UI
165 pages.
A look decides how an app's pixels read; an ARRANGEMENT decides how the app is built — where navigation lives, how a record opens, where a person…
How to make an Osy# app look like somebody designed it rather than like the default: commit to one visual direction, build it as a theme, set type…
How the flow canvas draws a directed graph by itself: nodes in ranks from the starts to the ends, the main path on one straight row, every edge…
Osysharp.Ui.Looks ships seven finished looks for any app built on the UI kit — Ledger, Relay, Civic, Studio, Signal, Folio and Tempo — each a whole…
The kit's menus grow out of the control that opened them and keep a notch pointing back at it, carry icons, key hints and a checked mark, and are…
A work shell draws the reader's own shortcuts — the pages they PINNED and the ones they opened RECENTLY — above its nav, turns the brand into an app…
A watched mailbox that can PUSH is told of new mail the moment it lands instead of being asked every minute: Gmail publishes to a Cloud Pub/Sub topic…
An app WATCHES a mailbox — it is never a mail server. The mail arrives where it always did (a Google Workspace or Microsoft 365 inbox, any IMAP…
`Osysharp.AuditLog` is a default audit log page an app mounts with one line. It reads the platform's change trail (`EntityAuditRecord`) as the reader…
`Osysharp.Automations` runs rules — WHEN something happens to a record (any event about it, or every hour), IF the record is so (its own fields, as…
`Osysharp.Conversations` keeps a conversation with a customer as ONE ordered timeline — their messages, the team's replies, internal notes, AI drafts…
`Osysharp.CustomFields` lets an app's admins add fields to its records without a release — text, numbers, yes or no, one of a list, a date; required…
`Osysharp.EmailTemplates` ships the parts a designed mail is built from — a layout with its preview line, logo and a footer carrying the sender's…
`Osysharp.IncidentReports` keeps incident reports — injuries, near misses, damage, concerns — readable by the person who filed them and by whoever…
`Osysharp.KnowledgeBase` keeps a knowledge base — markdown articles in categories and sections, written as drafts and published as numbered versions…
`Osysharp.Mail` is the contract between an app that sends mail and whatever carries it. `SendMail` writes the message to an outbox in the caller's…
`Osysharp.MailingLists` keeps an app's mailing lists: sign-up with double opt-in, consent recorded word for word, a link in every mail that shows the…
`Osysharp.Memberships` sells what lets people in — a day ticket, a monthly membership, a card of ten visits, a family year — and lets them in: a…
`Osysharp.Notifications` tells a person that something needs them — in the app, a bell with a live count and a list with read and unread and "Mark…
`Osysharp.OfferSales` sells a handful of fixed-price offers — a ticket, a pass, a pack, a membership — online through any Osysharp.Payments provider…
Two controls over a stored PDF: a reader with fit, zoom and a real text layer, and a thumbnail that draws one page as a picture. Shipped as an…
`Osysharp.PageBuilder` is the desk where the people who run a site arrange its [[ui-blocks|regions]]: add, move, fill in and take out blocks beside a…
`Osysharp.PrepaidCredits` keeps prepaid uses — a class pack, a ten-visit card, machine hours — as packs of credits a person holds. A spend takes from…
`Osysharp.Qualifications` keeps what a person holds that lets them do something — a licence, a certificate, an induction, a background check, a…
`Osysharp.RecordTimeline` puts what happened to a record on its timeline: every event the app and its kits raise about it, one line each, said in the…
`Osysharp.ReplyComposer` is the box a person writes a reply in — on a ticket, a case, an order, a lead. Saved replies with placeholders the APP…
`Osysharp.Reports` lets a team build its own reports — start from one thing the app keeps, pick fields by following its relations (Order › Café ›…
`Osysharp.Seo` ships schema.org's shapes as classes: a product with its offer, rating and brand, an article, a breadcrumb trail, the organization…
`Osysharp.SatisfactionSurveys` asks the person a piece of work was for "how did we do?" — one good-or-bad answer and, if they want, a comment. They…
`Osysharp.ShiftScheduling` is a staff rota: shifts with a number of numbered places, built as drafts and published in one go, filled by a manager or…
`ShopSearchPage` is the Shop kit's listing: every listed product as a card with its photograph, its price and how much is left, under a search box, a…
`Osysharp.Sms` is the contract between an app that sends text messages and whatever carries them, shaped like the Mail kit. `SendSms` writes the…
`Osysharp.TimeZone` is the app's one answer to "what day is it here?" — the time zone the team's days start in and the day its week starts, picked by…
Every screen in an Osy# app is a `component` — the one archetype. A page is a component with a route on it, a layout is a component, a reusable…
`Osysharp.Webhooks` sends other systems a signed JSON document each time an event happens to a record — any public event of the app or its kits…
`Osysharp.WorkQueues` ships the screens a team works an inbox from, on the Switchboard floor: its views, queues and saved views as rows of the app's…
`Osysharp.WebAnalytics` reports an app's page views and e-commerce events to Plausible or Google Analytics 4. The app picks the provider in its…
A live camera scanner for QR codes and barcodes, shipped as an optional KIT you depend on with one line. It owns the camera and the decode loop and…
Line, area, column, bar, scatter and OHLC candle marks over one shared value scale, plus a Pie — an optional KIT you depend on with one line. Marks…
`Osysharp.Color` is colour maths in plain Osy#, for an app that lets people choose colours: read a hex however it is typed, work in OKLCH, measure…
A modelling canvas — pan, zoom, drag nodes, draw edges between ports, select and delete, by mouse and by keyboard — shipped as an optional KIT. Nodes…
`Osysharp.MachineTranslation` tells which language a text is in — offline first, from its script or the commonest words of twelve European languages…
A full rich-text markdown editor — sections, partial saves, a block menu, tables, find and replace, maths and diagrams — shipped as an optional KIT…
`Osysharp.LoadingOrbs` draws a small dotted 3D sphere for a wait — nine states (searching, composing, weaving, connecting…) at two sizes — so a…
How an Osy# component comes alive and stays in sync: declarations are live value bindings, `on mount`/`on unmount` are once-only lifecycle bodies…
`Osysharp.Stemming` puts words in their base form, per language, so a search for "betalningen" finds "betalningar" and a search for "بالبطاقة" finds…
Every app page is served with a Content-Security-Policy the browser enforces. Scripts, styles, fonts, workers and data connections must come from the…
Osy# is C# almost everywhere, which is what makes the handful of deliberate differences worth knowing before you hit them. Ordinary C# works and…
A component's callback parameter may return a value. Typed `Func<T, R>` and invoked from an action, it runs the parent's handler to completion and…
osy lint's ui-chart-over-unbounded-rows (SHOULD) fires when a chart or a map is drawn from a page query that reads every row of an entity with no…
When a query a region reads fails or is refused, that region shows the failure in place — the server's own sentence, the correlation id to look it up…
osy lint's ui-unbounded-list-does-not-page (SHOULD) fires when a page draws a list with foreach from a query that reads every row of an entity with…
osy lint's ui-page-query-without-a-take (CONSIDER) is the catch-all: a page query reads every row of an entity with no Take, and the page uses it…
A page that edits rows writes no save machinery. Every edit joins the page's unit of work; each action a person runs and each field they type into is…
A Dropdown is usable for a few dozen options; over an entity that grows, past the first answer (about 2 MB of rows) the rows after it are not offered…
A DataGrid reads calmly: its per-column filter row is shut until somebody asks to filter (the Filter toggle, or a column's funnel), a filter that is…
When the order of a list is a fact the person owns rather than something a field implies, store it: an int Position on the row, written when the row…
An app shell is the frame around every page: a brand, a navigation tree, the signed-in person and a menu behind them, a search slot and a place for a…
An in-app assistant over the page: a panel floating at the right edge (a full-screen sheet on a phone) with the conversation so far, suggested…
A `[Block]` is a component staff can place on a page: its parameters are the fields they fill in, and each parameter's type chooses the editor. A…
A look is a kit that draws two contracts: the general site contract (`Osysharp.Site.Looks` — a hero, a quote, the footer) and one category's…
A render expression may call a PURE client helper — a component `method`, a client class method, a top-level function — and render the value it…
A drawing surface, and the verbs that paint on it. Put a `Canvas` in a render block, call `Draw.*` from an `on frame` body, and the picture is…
A lit, shadowed 3D scene on the same `Canvas` the 2D verbs paint. Build meshes once into fields, then each frame place a camera, a sun and some fog…
A control that paints cells — a grid — writes plain text in each one. A `slot <Field> { row => … }` block on the call replaces that column's cell…
Put a string on the visitor's system clipboard. One verb, callable from any action, so a copy button — an API key, a share link, a code snippet, an…
The live state of the browser's link to the server, and the two verbs that recover it. A component you nominate as your app's connection-loss surface…
`Device.HasKeyboard` is true when the page is used with keys worth hinting at: a mouse or a trackpad (a fine pointer that can hover), or once a…
Opens a component in an overlay above the current screen, with a unit of work you choose: `Inherit` makes its edits a savepoint of the work already…
The page's drawers: the page in the middle, a drawer docked on the right (the record a row opened, an inspector) and one along the bottom (a log, a…
Information about one thing as a key/value table: what each fact is on the left, its value on the right, one line per fact with a rule under it, and…
When an action fails — a security denial, a constraint violation, a server that refused — the platform records why, and `Failure` is how a page says…
An app shell for completing a single task — a checkout, an approval, a configuration step, a guided flow. It is built around three things a task…
`Frame(html)` shows a whole HTML document inside the page, in a frame of its own — what a mail preview is. The document is sandboxed whatever it…
A parameter or class field typed `Func<T, R>` takes a lambda and can be invoked for a result, so reusable code can be told HOW to get a value rather…
A heading is part of a page's outline, not only its type: a screen-reader user moves through a page by jumping from heading to heading. `PageTitle`…
A page's query is sent bounded. Its own .Take(n) is the ceiling: the browser may ask for fewer of those rows, never more. A page query with no Take…
A kit with something an admin configures implements `ISettingsProvider` and serves its pages under `[Layout(SettingsFrame)]`. `SettingsArea()` with…
`Layout.ScrollHeight` is how tall a container's CONTENT is; `Layout.Height` is how tall the container is. The difference is what "is there more here…
Answers how wide a string will actually paint, measured against the font the surrounding container paints with. Null wherever there is no font to…
When somebody presses another row in the sidebar shell's rail while the page holds unsaved edits, the shell asks first: Keep editing, Save and leave…
A page's list over a big table holds the first answer's rows (about 2 MB of them). rows.HasMore says whether the set holds rows past what the page…
A LOOK is a site's whole design — its frame, its pages, its theme and fonts, its design of every block type — declared in code (normally in a look…
`Markdown(text)` renders a markdown string as formatted content — headings, lists, tables, code, links. It is a read-only renderer, not an editor:…
A control prop declared Func<TRow, V> is a member selector: the call site writes `xField: s => s.X`, the compiler checks it against the row type the…
A `render` block can name a value the way any C# block does — `var lapsed = …;` to infer the type, or `bool lapsed = …;` to declare it. The name is…
The routes the user has open, which of them hold UNSAVED edits, and the verbs that move between them or close one without losing work. Read…
The bundled UI kit — ready-made styled controls like `Button`, the shared design-system vocabularies (`Tone`, `Size`) and a starter theme — reaches a…
A sheet of paper on the page's ground — a reading width, generous margins, the theme's hairline and lift — so an invoice, a contract or a report…
When a control's action waits on the server, the platform shows a busy spinner and disables the control — but only after a short delay, so a fast…
A kit like `Ui` is versioned independently of the platform, so you pin the major you build against with `using Ui@3;`. The number is a stability…
A caller may PLACE, SPACE and ANIMATE a component it calls — `m*`, `w`/`h` and their min/max, `grow`, `shrink`, `basis`, `alignSelf`, `order`…
`Video` plays one film, addressed one of three ways: a film the app SHIPS in `model/videos/` (`video: Videos.Harbour`, compile-checked), a clip…
A QR code a phone can scan, drawn from the rows `Qr.Encode(text)` answers: dark modules on white whatever the theme, inside the four-module white…
One choice of a few, all in view — a radio per option under a caption. The same shape as Dropdown: value is a two-way Binding<T>, options default to…
An app shell built around a permanently narrow icon rail, in the shape Slack, Linear and Discord converge on. Every row reveals its label on hover…
Drop a `.svg` into `model/art/` and render it with `Svg(Art.Hexgrid)`. Unlike an icon, an asset keeps its own colours, gradients and patterns — it is…
Every edit on a page joins the route's unit of work; how the page OFFERS to keep it is a choice of presentation. `SaveBar` rises at the foot while…
Give an element an `id:` handle and it becomes a section the rest of the page can go to: `Link(to: services)` is an in-page link to it, and…
osy lint's cost-page-ships-whole-rows-for-few-fields (CONSIDER) fires when a page reads whole rows of a wide entity and shows only a few of their…
`Session.CurrentUser` is the person the app is being shown to, as your own `[Principal]` entity. Read it in a member, in a render expression, or…
The kit's settings vocabulary: `SettingsArea` lays out an app's settings — its sections in a grouped nav, the current one lit, each section's page…
`Image` is the element that shows a picture, and it addresses one of two ways. `src` takes a URL — for a file in the app's own path store…
A `Slot` marks where a component renders the content block its caller wrapped around it. Writing `Card { Text("hi"); }` passes `Text("hi")` as Card's…
`Slot(item)` renders the caller's template once for that item. It is how a component owns the list — the layout, the scrolling, the selection — while…
A sortable table names its sort key with the chosen column's own selector, never with a string. Over rows already loaded the sort happens in memory…
Navigation inside a tab: a list down the side of a tab's body that moves between that tab's own places — a record's invoices one at a time, a…
An app shell whose primary navigation is a horizontal strip of tabs under the brand row, and a bottom tab bar within thumb reach on a phone. It takes…
When a person's save from a page meets a row somebody else changed while they were editing it, and nothing in the app catches the ConflictException…
The frame around every page — the menu, the strip across the top, the footer — can be the staff's to change, like a page's regions: `SiteMenu(…)`…
You declare a field's rules once, on the entity — `[Required]`, `[Pattern]`, `[MaxLength]` — and give each rule the sentence to show when it fails. A…
Two questions with one shape. `Layout.AtLeast(Tablet)` asks whether THIS component's container is at least the breakpoint wide — the right question…
`Visitor.Id` names the browser someone is using. The platform issues it on their first visit, proves it on every request with a sealed HttpOnly…
A workspace of cards — figures, charts and lists side by side on a four-column grid (two on a tablet, one on a phone), each a Widget with a title and…
The arrangement of a developer tool or an operator's console: an activity bar with one mark per section, an explorer beside it listing the current…
A kit's working pages (a knowledge base's desk, its review queue) name `[Layout(WorkspaceFrame)]`, and the settings area stands in it too: design…
`[Authorize]` on one action (or method) of a component makes that action members-only, on any page — a public `[AllowAnonymous]` page included. A…
Mark a presentational, composition-only component `[Composable]` so a public page can compose it without marking it `[AllowAnonymous]` itself. A…
An `[Email]` component is a mail template. It is rendered on the server — from any function, a workflow step included — into HTML every mail client…
`[Remembered]` on a component field keeps the reader's last value in their browser — per app, signed-in user, component and field — and the next…
Mark the row staff configure `[Settings("Title", Authorize = Policy)]` and each field on it `[Setting("Label")]`, and the settings area draws the…
A slot is a place on a page others add to. A kit marks one (`[Slot] public abstract component QuotePanel(Quote quote);`), and every component that…
Tags already give an element its role, focus and keyboard behaviour. The semantic props say the rest: `role:` for a widget a tag cannot name…
A component's `action` and its plain `method` run the exact same body grammar with the exact same capabilities — reads, writes, commits, effects…
An `animation` block declares reusable keyframe motion — an entrance, a shimmer, a pulse, a flash that decays. Its stops are written with the…
`animationKey: value` on any element makes its animation play each time the value CHANGES — and not when the element first appears, so a page load…
Take a photograph, record a video, or record audio. `Camera.Start()` asks for the device and `Camera()` shows the viewfinder; `Camera.Capture()`…
`canPress`/`canEdit`/`canSee: <policy>` ties a control to a declared `policy`: `canPress` disables a button, `canEdit` makes a value control…
A `chunks { }` block declares assets a control ships but does not need at mount — a maths renderer, a diagram engine, a stylesheet only one feature…
`Palette.From("#seed")` turns one brand color into a full ramp of shades. A bare reference (`Primary`) is the seed itself; `Primary.Hover` and…
A `commands { }` block declares the verbs a control accepts — the mirror of its events. An event is the control telling the app something happened; a…
`--theme <file>` compiles an app with the theme in that file INSTEAD of its own — a replacement, never a merge, so the look you get is one you can…
The one archetype for all UI: a bounded reactive unit — typed props, reactive members (fields, `live` queries/computeds, actions, methods), and a…
A `control` block declares the contract of a foreign UI widget — a chart, a data grid, a map — that a small JavaScript module implements. You declare…
A UI `action` creates, updates and deletes data by writing `new Entity { … }`, assigning fields, and calling `.Delete()`. Edits apply instantly and…
`debounce: 300` tells a control to wait for a pause before it runs its event handler. Without it, an `onInput` handler fires on every keystroke — so…
`drag:` binds a number to a drag gesture: grabbing the element moves the value, arrow keys move the same value, and Escape puts it back where it…
A component with type parameters, bound at each call site from the arguments — one component that works over any enum or any row type, instead of a…
A routed page's document head — its title, description, canonical address, share image, structured data, whether it may be indexed, and whether it…
Drop `.svg` files into `model/icons/` and render them with `Icon(Icons.Search)`. The name is checked at compile time, so a typo is an error rather…
`key:` on a component call names the instance. While the key reads the same the instance stays and takes its new arguments; when it reads differently…
`keys:` declares that an element owns a set of keys: it becomes focusable, those keys stop scrolling the page, and `Keyboard.Down(Left)` answers…
The built-in layout primitives and how they arrange children. `Stack` stacks children in a column, `Row` lays them in a row, and `Box` is a plain…
`on change { … }` is a reactive **side-effect**: the runtime re-runs it whenever a value it read changes, so it's how you keep something OUTSIDE the…
`on every (TimeSpan.FromSeconds(5)) { … }` runs a block on a repeating cadence for as long as the component is mounted. Unlike `on frame` it is…
`on mount { … }` runs a block ONCE, the first time a component appears, beside its first reads; `on unmount { … }` runs a block ONCE when it goes…
`on settled(x) { … }` runs once when the stream `x` finishes arriving — whether it completed or failed. It is how you store a streamed answer, and it…
`onEnter` runs an action when the Enter key is pressed while an element is focused — the keyboard peer of `onClick`. There is no form to submit: in…
`onEscape` runs an action when the Escape key is pressed while the element is on screen. Unlike `onEnter` it is not scoped to the focused element —…
A `policy` names a reusable authorization predicate over the current user — e.g. `policy Admins => UserRole.Any(r => r.User == user && r.Role ==…
`onPointerEnter` / `onPointerLeave` run an action when the pointer enters or leaves an element. They are the half of hover an app can ACT on — a…
A `probe { }` block declares the facts a control publishes about its OWN internal state, so an app's tests can ask for them. It is the one direction…
Names the package whose component or control you mean, as Owner.Name.Element. Use it when your own declaration shadows a package's, or when two…
A data read written inside an `action`, `method` or lifecycle hook runs at that point in the body: the platform fetches it from the server and the…
How a component becomes a page: it declares a route with `[Route("/catalog/{slug}")]`, and navigating to a matching path serves it. Covers route…
A control declares how the element it is mounted into should be sized — grow with its content, fill the box the app put it in, or keep a fixed ratio…
A second render tree that stands in for a page or a component while its first read — its queries, its live server calls, the row a page's address…
Drop `.mp3`, `.wav`, `.ogg` or `.m4a` files into `model/sounds/` and play them with `Sound.Play(Sounds.Flap)`. The name is a compile-checked member…
`store` declares a headless reactive unit — the same members a component has, minus `render` — meant to hold UI state and actions shared across…
Inside a `variants` block, each `Name = value` is a style prop from a fixed vocabulary the renderer maps to CSS — paint (`Bg`, `Color`, `Border`)…
A `styles { }` block declares the look values a control owns — its paddings, widths, shadows — as named knobs an app can override. It is how a…
Drop `.png`, `.jpg` or `.webp` files into `model/textures/` and blit them onto a canvas with `Draw.Image(wall, …)`. The name is checked at compile…
A `theme` block names your app's design tokens — colors, spacing, radii, and more — as reusable values. A token can hold a literal value (`Primary =…
`Upload(onUploaded: Ingest) { … }` is a file picker wearing whatever you put inside it. When someone chooses a file its bytes are stored and your…
Naming a font in your theme asks for it; `osy font add` ships it. The command pins a font file in your project's lock, every compile carries it to…