@close-by/clay 0.2.8 → 0.2.10

package/README.md

@@ -18,4 +18,4 @@ export default function () {
 bunx clay hello.ts
 ```
 
-Docs: shipped with the package at `node_modules/@close-by/clay/docs/`. See [getting-started.md](docs/getting-started.md) after install.
+Docs: shipped with the package at `node_modules/@close-by/clay/docs/`. Agent skill: `node_modules/@close-by/clay/SKILL.md` (or `@close-by/clay/skill`). See [getting-started.md](docs/getting-started.md) after install.

package/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: clay
+description: >-
+  Build Clay server-driven UI apps with ui.* on Bun. Use when authoring Clay
+  pages, demos, or ops consoles; importing @close-by/clay; running clay CLI;
+  ui.page/ui.run/ui.state/ui.auto; or when the user asks about Clay, NiceGUI-style
+  TypeScript UI, or server-owned element trees.
+---
+
+# Clay
+
+Server-driven UI for TypeScript. Write imperative `ui.*` on the server; Clay owns a per-tab element tree and syncs it to a React + ShadCN client over WebSocket.
+
+**Clay is not React.** Do not write React components, JSX, or client-side screen logic for app pages. The React client is a renderer only.
+
+## Install and run
+
+```bash
+bun add @close-by/clay-cli @close-by/clay
+```
+
+```typescript
+// hello.ts
+import { ui } from '@close-by/clay';
+
+export default function () {
+  ui.label('Hello Clay');
+  ui.button('Ping', { onClick: () => ui.notify('hi', 'success') });
+}
+```
+
+```bash
+bunx clay hello.ts   # http://localhost:3000
+```
+
+**Monorepo (this repo):** `bun run build:client` before `bun run demo` or `bun run clay …` — new wire types require a rebuilt client bundle.
+
+## Mental model
+
+1. `ui.page(path, fn)` or `ui.run(fn)` builds an **element tree** on the server.
+2. Each browser tab = one **WebSocket session**; page code runs once per tab.
+3. User events → server handlers → **patches** (`updateProps`, `setChildren`) → client re-render.
+4. Local `let` / session state is **per tab**, not shared. Use `ui.storage.app` for process-wide data.
+
+## Reactive UI (preferred)
+
+Keep mutable state **outside** rebuild blocks:
+
+```typescript
+const s = ui.state({ count: 0, items: [] as string[] });
+
+ui.auto(() => {
+  ui.label(`Count: ${s.count}`);
+  ui.button('+', { onClick: () => { s.count++; } });
+  for (const item of s.items) ui.label(item);
+});
+
+// Or bind one label without a full block:
+ui.label(() => `Count: ${s.count}`);
+```
+
+| API | Use when |
+|-----|----------|
+| `ui.state(initial)` | Reactive object; writes trigger tracked rebuilds |
+| `ui.auto(fn)` | Rebuild a UI block when tracked state changes |
+| `ui.label(() => …)` / `bindText` | Patch text only (stable tree) |
+| `bindValue` | Two-way inputs |
+| `ui.refreshable` + `.refresh()` | Simple one-shot structural rebuilds |
+| `ui.timer(ms, fn)` | Poll / clock ticks inside reactive pages |
+
+**Inside `ui.auto`:** child tree shape (types + counts) should stay stable when possible — then updates use `updateProps` instead of remounting. For toggling optional `className`, use `undefined` to clear (Clay sends `null` patches).
+
+**Button groups:** use `variant: 'outline'` on all segmented buttons; highlight selection with `className: active ? 'bg-accent' : undefined`.
+
+## Pages and layout
+
+```typescript
+ui.page('/dashboard', () => {
+  ui.column({ gap: 4 }, () => {
+    ui.row({ gap: 2 }, () => {
+      ui.button('Save', { onClick: save });
+    });
+    ui.card({ title: 'Stats' }, () => {
+      ui.label('…');
+    });
+  });
+});
+```
+
+- Nest with callbacks: `ui.row(() => { … })`, `ui.column(() => { … })`.
+- Tailwind: `ui.label('x').classes('text-sm text-muted-foreground')` or pass `className` in props.
+- Toasts: `ui.notify('Saved', 'success')`.
+
+## Do not
+
+- Import React, write JSX, or add client components for screens.
+- Use `window`, `document`, `navigator` in page code — use `ui.clipboard`, `ui.setUrlHash`, `ui.openExternal`.
+- Assume `let` is shared across tabs or users.
+- Use `ui.ai.*` as an LLM runtime — it is visual primitives only.
+
+## Docs (shipped with package)
+
+After install, read version-matched docs at `node_modules/@close-by/clay/docs/`:
+
+| Doc | Purpose |
+|-----|---------|
+| `getting-started.md` | CLI, first app, publish |
+| `concepts.md` | Sessions, patches, storage |
+| `api.md` | Full `ui.*` reference |
+| `elements.md` | Wire types → client mapping |
+| `reactive-let.md` | `ui.state` / `ui.auto` / compile-time `let` |
+| `ops-patterns.md` | Dense consoles, feeds, tables |
+| `examples.md` | Demo route catalog |
+
+Resolve docs programmatically: `resolveClayDocsDir()` from `@close-by/clay/docs-dir`.
+
+## Optional compile-time reactive `let`
+
+Opt-in via `// @clay-reactive` + `clay app.ts --reactive-let`. Prefer explicit `ui.state` + `ui.auto` for production/async-heavy apps.
+
+## Package map (monorepo)
+
+| npm | Role |
+|-----|------|
+| `@close-by/clay` | `ui.*` facade (this skill ships here) |
+| `@close-by/clay-cli` | `clay` binary + bundled client |
+| `@close-by/clay-core` | Element tree, sessions, patches |
+| `@close-by/clay-components` | Wire element factories |
+| `@close-by/clay-server` | HTTP + WebSocket server |
+
+## Agent checklist
+
+1. Read `api.md` / `elements.md` before adding unfamiliar wire types.
+2. Use `ui.state` + `ui.auto` for live data; avoid manual `setText` loops.
+3. Rebuild client in monorepo after new element types (`bun run build:client`).
+4. Match existing demo patterns under `apps/demo/src/examples/` when unsure.
+5. Run `bun test` in touched packages; keep diffs minimal.

package/docs/README.md

@@ -4,7 +4,7 @@ Server-driven UI for TypeScript, inspired by [NiceGUI](https://nicegui.io/).
 
 You write imperative `ui.*` code on the server. Clay owns a per-client element tree and syncs it to a thin React + ShadCN client over WebSocket.
 
-For coding agents: the repo-root [llms.txt](../llms.txt) is a short map of these guides.
+For coding agents: the repo-root [llms.txt](../llms.txt) is a short map of these guides. The [agent skill](./SKILL.md) ships with `@close-by/clay` at package root (`SKILL.md`).
 
 ## Guides
 

package/docs/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: clay
+description: >-
+  Build Clay server-driven UI apps with ui.* on Bun. Use when authoring Clay
+  pages, demos, or ops consoles; importing @close-by/clay; running clay CLI;
+  ui.page/ui.run/ui.state/ui.auto; or when the user asks about Clay, NiceGUI-style
+  TypeScript UI, or server-owned element trees.
+---
+
+# Clay
+
+Server-driven UI for TypeScript. Write imperative `ui.*` on the server; Clay owns a per-tab element tree and syncs it to a React + ShadCN client over WebSocket.
+
+**Clay is not React.** Do not write React components, JSX, or client-side screen logic for app pages. The React client is a renderer only.
+
+## Install and run
+
+```bash
+bun add @close-by/clay-cli @close-by/clay
+```
+
+```typescript
+// hello.ts
+import { ui } from '@close-by/clay';
+
+export default function () {
+  ui.label('Hello Clay');
+  ui.button('Ping', { onClick: () => ui.notify('hi', 'success') });
+}
+```
+
+```bash
+bunx clay hello.ts   # http://localhost:3000
+```
+
+**Monorepo (this repo):** `bun run build:client` before `bun run demo` or `bun run clay …` — new wire types require a rebuilt client bundle.
+
+## Mental model
+
+1. `ui.page(path, fn)` or `ui.run(fn)` builds an **element tree** on the server.
+2. Each browser tab = one **WebSocket session**; page code runs once per tab.
+3. User events → server handlers → **patches** (`updateProps`, `setChildren`) → client re-render.
+4. Local `let` / session state is **per tab**, not shared. Use `ui.storage.app` for process-wide data.
+
+## Reactive UI (preferred)
+
+Keep mutable state **outside** rebuild blocks:
+
+```typescript
+const s = ui.state({ count: 0, items: [] as string[] });
+
+ui.auto(() => {
+  ui.label(`Count: ${s.count}`);
+  ui.button('+', { onClick: () => { s.count++; } });
+  for (const item of s.items) ui.label(item);
+});
+
+// Or bind one label without a full block:
+ui.label(() => `Count: ${s.count}`);
+```
+
+| API | Use when |
+|-----|----------|
+| `ui.state(initial)` | Reactive object; writes trigger tracked rebuilds |
+| `ui.auto(fn)` | Rebuild a UI block when tracked state changes |
+| `ui.label(() => …)` / `bindText` | Patch text only (stable tree) |
+| `bindValue` | Two-way inputs |
+| `ui.refreshable` + `.refresh()` | Simple one-shot structural rebuilds |
+| `ui.timer(ms, fn)` | Poll / clock ticks inside reactive pages |
+
+**Inside `ui.auto`:** child tree shape (types + counts) should stay stable when possible — then updates use `updateProps` instead of remounting. For toggling optional `className`, use `undefined` to clear (Clay sends `null` patches).
+
+**Button groups:** use `variant: 'outline'` on all segmented buttons; highlight selection with `className: active ? 'bg-accent' : undefined`.
+
+## Pages and layout
+
+```typescript
+ui.page('/dashboard', () => {
+  ui.column({ gap: 4 }, () => {
+    ui.row({ gap: 2 }, () => {
+      ui.button('Save', { onClick: save });
+    });
+    ui.card({ title: 'Stats' }, () => {
+      ui.label('…');
+    });
+  });
+});
+```
+
+- Nest with callbacks: `ui.row(() => { … })`, `ui.column(() => { … })`.
+- Tailwind: `ui.label('x').classes('text-sm text-muted-foreground')` or pass `className` in props.
+- Toasts: `ui.notify('Saved', 'success')`.
+
+## Do not
+
+- Import React, write JSX, or add client components for screens.
+- Use `window`, `document`, `navigator` in page code — use `ui.clipboard`, `ui.setUrlHash`, `ui.openExternal`.
+- Assume `let` is shared across tabs or users.
+- Use `ui.ai.*` as an LLM runtime — it is visual primitives only.
+
+## Docs (shipped with package)
+
+After install, read version-matched docs at `node_modules/@close-by/clay/docs/`:
+
+| Doc | Purpose |
+|-----|---------|
+| `getting-started.md` | CLI, first app, publish |
+| `concepts.md` | Sessions, patches, storage |
+| `api.md` | Full `ui.*` reference |
+| `elements.md` | Wire types → client mapping |
+| `reactive-let.md` | `ui.state` / `ui.auto` / compile-time `let` |
+| `ops-patterns.md` | Dense consoles, feeds, tables |
+| `examples.md` | Demo route catalog |
+
+Resolve docs programmatically: `resolveClayDocsDir()` from `@close-by/clay/docs-dir`.
+
+## Optional compile-time reactive `let`
+
+Opt-in via `// @clay-reactive` + `clay app.ts --reactive-let`. Prefer explicit `ui.state` + `ui.auto` for production/async-heavy apps.
+
+## Package map (monorepo)
+
+| npm | Role |
+|-----|------|
+| `@close-by/clay` | `ui.*` facade (this skill ships here) |
+| `@close-by/clay-cli` | `clay` binary + bundled client |
+| `@close-by/clay-core` | Element tree, sessions, patches |
+| `@close-by/clay-components` | Wire element factories |
+| `@close-by/clay-server` | HTTP + WebSocket server |
+
+## Agent checklist
+
+1. Read `api.md` / `elements.md` before adding unfamiliar wire types.
+2. Use `ui.state` + `ui.auto` for live data; avoid manual `setText` loops.
+3. Rebuild client in monorepo after new element types (`bun run build:client`).
+4. Match existing demo patterns under `apps/demo/src/examples/` when unsure.
+5. Run `bun test` in touched packages; keep diffs minimal.

package/docs/elements.md

@@ -21,6 +21,25 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `combobox` | `combobox` | ShadCN `Combobox` (searchable select; optional `error`) |
 | `date` | `date` | Calendar + Popover date picker (ISO `YYYY-MM-DD`; optional `error`) |
 | `dateRange` | `dateRange` | Range picker with presets (ISO `from` / `to`) |
+| `buttonGroup` | `buttonGroup` | Grouped buttons / segmented controls |
+| `empty` | `empty` | Centered empty state (title, description, icon, footer slot) |
+| `pagination` | `pagination` | Standalone pager (outside `dataTable`) |
+| `filterBar` | `filterBar` | Ops filter row: chips + control slot |
+| `filterChips` | `filterChips` | Removable filter chips only |
+| `numberField` | `numberField` | Numeric input with +/- steppers |
+| `phoneInput` | `phoneInput` | Country dial + local number |
+| `field` | `field` | Label + description + error wrapper for one control |
+| `nativeSelect` | `nativeSelect` | Styled native `<select>` |
+| `navigationMenu` | `navigationmenu` (+ sub/link children) | Top nav mega-menu |
+| `inputGroup` | `inputGroup` | Input with prefix/suffix addons |
+| `toggle` | `toggle` | Pressed toolbar toggle |
+| `descriptionList` | `descriptionList` | Key-value detail rows |
+| `staticTable` | `staticTable` | Read-only HTML table |
+| `aspectRatio` | `aspectRatio` | Fixed-ratio child wrapper |
+| `itemList` | `itemList` | Settings / notification rows |
+| `checkboxGroup` | `checkboxGroup` | Multi-select checkboxes |
+| `notice` | `notice` | Dismissible app banner |
+| `eventCalendar` | `eventCalendar` | Month grid + day event list (`events` API → wire `items`) |
 | `timeline` | `timeline` | Vertical or horizontal event timeline |
 | `stepper` | `stepper` (+ `stepperStep`) | Inline multi-step flow with panels |
 | `slider` | `slider` | ShadCN `Slider` (+ optional `error`) |
@@ -80,7 +99,7 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `image` | `image` | `<img>` |
 | `iframe` | `iframe` | `<iframe>` embed |
 | `upload` | `upload` | File picker / dropzone → `POST /upload` (progress/abort) → WS `upload` / `progress` / `error` / `abort` |
-| `stat` | `stat` | Grid of metric cards |
+| `stat` | `stat` | Grid of metric cards (optional per-item `sparkline`) |
 | `sparkline` | `sparkline` | KPI card with inline area/line mini chart (`headline`, `value`/`trend` shorthand) |
 | `areaChart` | `areachart` | Recharts stacked area (+ legend, optional interactive periods, `headline`, `loading`, `stacked?`) |
 | `barChart` | `barchart` | Recharts bar (`stacked?`, `layout?: 'vertical' \| 'horizontal'`, shared cartesian chrome) |

package/docs/examples.md

@@ -17,7 +17,10 @@ After `bun run build:client && bun run demo` (or `bun run demo:cli`), open http:
 | `/examples/upload` | `FileUpload.ts` | `ui.upload` button + dropzone (progress/abort/size), `ui.storage.tab` / `user`, `ui.download`, `ui.clipboard` |
 | `/examples/dashboard` | `Dashboard.ts` | `stat`, `areaChart`, full-chrome `dataTable` (views, editors, detail drawer) |
 | `/examples/datatable` | `DataTableDemo.ts` | Multi-sort (Shift+click / badges), footer aggregates + a11y hints, column pin, remote filter/sort + pagination; density/zebra, editors (Enter/Esc + focus restore), resize, virtualization (≥40, coexists with reorder via windowed drop targets); facets, bulk, collapse/expand, loading/empty; `ui.table` sugar |
-| `/examples/charts` | `ChartDemo.ts` | `ui.chart.*` including scatter / composed; props API sample |
+| `/examples/composed` | `ComposedDemo.ts` | ReUI batch 1: `ui.timeline`, `ui.stepper`, `ui.dateRange`, `ui.feedList`/`ui.feedRow`, `ui.sparkline` |
+| `/examples/reui-batches` | `ReuiBatchesDemo.ts` | ReUI batches 3–6: `buttonGroup`, `empty`, `pagination`, `filterBar`, form inputs, `navigationMenu`, `notice`, `stat`+sparkline, `eventCalendar`, datatable `showFilterChips` |
+| `/examples/reui-batch-7` | `ReuiBatch7Demo.ts` | ReUI batch 7: `inputGroup`, `toggle`, `descriptionList`, `staticTable`, `aspectRatio`, `itemList`, `checkboxGroup` |
+| `/examples/charts` | `ChartDemo.ts` | `ui.chart.*`, `ui.sparkline`, composed/scatter charts |
 | `/examples/slider-demo` | `SliderDemo.ts` | Slider, checkbox, select + bindings |
 | `/examples/feedback` | `FeedbackDemo.ts` | Alerts, progress, timer, `ui.theme`, `ui.runJavaScript` / `ui.scroll` |
 | `/examples/form-demo` | `FormDemo.ts` | Form + validate + `ui.draft` + rating / colorPicker / tags |

package/docs/llms.txt

@@ -12,6 +12,7 @@ Notes for agents:
 - Never use `window` / `navigator` in page code — use `ui.clipboard`, `ui.setUrlHash`, `ui.openExternal`.
 - Runtime is Bun. In this repo: `bun run build:client`, then `bun run demo` (http://localhost:4000) or `bun run clay hello.ts`.
 - `ui.ai.*` is visual primitives only — no model or streaming runtime.
+- Agent skill (Cursor / compatible tools): `@close-by/clay/SKILL.md` — copy to `.cursor/skills/clay/SKILL.md` or read from `node_modules` when installed.
 
 ## Docs
 

package/docs/ops-patterns.md

@@ -111,6 +111,49 @@ ui.auto(() => {
 
 Manual `ui.row` composition still works when you need a custom layout.
 
+## Filter toolbar
+
+Use **`ui.filterBar`** for the chip row + control slot pattern (Orders-style pages):
+
+```ts
+ui.auto(() => {
+  ui.filterBar(
+    {
+      chips: [
+        { id: 'status', label: 'Status', value: live.statusFilter },
+        { id: 'q', label: 'Search', value: live.query },
+      ],
+      onRemoveChip: (id) => {
+        if (id === 'status') live.statusFilter = '';
+        if (id === 'q') live.query = '';
+      },
+      onClear: () => {
+        live.statusFilter = '';
+        live.query = '';
+      },
+    },
+    () => {
+      ui.select({
+        options: statusOptions,
+        value: live.statusFilter,
+        onChange: (v) => {
+          live.statusFilter = v;
+        },
+      });
+      ui.input({
+        value: live.query,
+        placeholder: 'Search…',
+        onInput: (v) => {
+          live.query = v;
+        },
+      });
+    },
+  );
+});
+```
+
+For **`ui.dataTable`**, pass `showFilterChips: true` to surface active search + column filters as removable chips in the table chrome (`views` remain the saved-view tabs API).
+
 ## Logs / traces — sensitive bodies
 
 Structured logs often contain API keys or partner tokens. Scrubbing is the **app’s** job; Clay can still reduce shoulder-surfing:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
@@ -9,11 +9,14 @@
     ".": "./src/index.ts",
     "./page-tsconfig": "./page-tsconfig.json",
     "./docs-dir": "./src/docs-dir.ts",
-    "./docs/*": "./docs/*"
+    "./docs/*": "./docs/*",
+    "./skill": "./SKILL.md",
+    "./SKILL.md": "./SKILL.md"
   },
   "files": [
     "src",
     "docs",
+    "SKILL.md",
     "page-tsconfig.json",
     "README.md",
     "LICENSE",
@@ -34,10 +37,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@close-by/clay-compiler": "0.2.8",
-    "@close-by/clay-core": "0.2.8",
-    "@close-by/clay-components": "0.2.8",
-    "@close-by/clay-server": "0.2.8",
+    "@close-by/clay-compiler": "0.2.10",
+    "@close-by/clay-core": "0.2.10",
+    "@close-by/clay-components": "0.2.10",
+    "@close-by/clay-server": "0.2.10",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -29,7 +29,27 @@ import {
   statusDot as statusDotFactory,
   feedRow as feedRowFactory,
   feedList as feedListFactory,
+  buttonGroup as buttonGroupFactory,
+  empty as emptyFactory,
+  pagination as paginationFactory,
+  filterBar as filterBarFactory,
+  filterChips as filterChipsFactory,
+  numberField as numberFieldFactory,
+  phoneInput as phoneInputFactory,
+  field as fieldFactory,
+  nativeSelect as nativeSelectFactory,
+  navigationMenu as navigationMenuFactory,
+  NavigationMenuElement,
+  notice as noticeFactory,
+  eventCalendar as eventCalendarFactory,
   stat as statFactory,
+  inputGroup as inputGroupFactory,
+  toggleControl as toggleControlFactory,
+  descriptionList as descriptionListFactory,
+  staticTable as staticTableFactory,
+  aspectRatio as aspectRatioFactory,
+  itemList as itemListFactory,
+  checkboxGroup as checkboxGroupFactory,
   dataTable as dataTableFactory,
   areaChart as areaChartFactory,
   barChart as barChartFactory,
@@ -134,6 +154,38 @@ import {
   type FeedRowProps,
   type FeedRowStatus,
   type FeedListProps,
+  type ButtonGroupProps,
+  type ButtonGroupOrientation,
+  type EmptyProps,
+  type PaginationProps,
+  type FilterBarProps,
+  type FilterChip,
+  type NumberFieldProps,
+  type PhoneInputProps,
+  type PhoneCountry,
+  type FieldProps,
+  type FieldOrientation,
+  type NativeSelectProps,
+  type NativeSelectOption,
+  type NavigationMenuProps,
+  type NavigationMenuLinkItem,
+  type NoticeProps,
+  type NoticeVariant,
+  type EventCalendarProps,
+  type EventCalendarEvent,
+  type InputGroupProps,
+  type ToggleControlProps,
+  type ToggleControlVariant,
+  type ToggleControlSize,
+  type DescriptionListProps,
+  type DescriptionListItem,
+  type StaticTableProps,
+  type StaticTableColumn,
+  type AspectRatioProps,
+  type ItemListProps,
+  type ItemListEntry,
+  type CheckboxGroupProps,
+  type CheckboxGroupOption,
   type StatItem,
   type DataTableProps,
   type DataTableAction,
@@ -341,6 +393,7 @@ import {
   DialogElement,
   DialogStackElement,
   StepperElement,
+  NavigationMenuElement,
   AlertDialogElement,
   DropdownMenuElement,
   ContextMenuElement,
@@ -632,6 +685,7 @@ export {
   DialogElement,
   DialogStackElement,
   StepperElement,
+  NavigationMenuElement,
   AlertDialogElement,
   DropdownMenuElement,
   SheetElement,
@@ -864,6 +918,117 @@ export function feedRow(props: FeedRowProps, footer?: () => void): Element {
   return feedRowFactory(props, footer);
 }
 
+/** Visually grouped buttons / controls. See {@link ButtonGroupProps}. */
+export function buttonGroup(fn: () => void, props?: ButtonGroupProps): Element;
+export function buttonGroup(props: ButtonGroupProps, fn: () => void): Element;
+export function buttonGroup(a: any, b?: any): Element {
+  return buttonGroupFactory(a, b);
+}
+
+/** Centered empty state. See {@link EmptyProps}. */
+export function empty(props: EmptyProps, footer?: () => void): Element {
+  return emptyFactory(props, footer);
+}
+
+/** Standalone pager. See {@link PaginationProps}. */
+export function pagination(props?: PaginationProps): Element {
+  return paginationFactory(props);
+}
+
+/** Ops filter toolbar with chips + control slot. See {@link FilterBarProps}. */
+export function filterBar(fn: () => void, props?: FilterBarProps): Element;
+export function filterBar(props: FilterBarProps, fn: () => void): Element;
+export function filterBar(a: any, b?: any): Element {
+  return filterBarFactory(a, b);
+}
+
+/** Removable filter chips row. */
+export function filterChips(props: Parameters<typeof filterChipsFactory>[0]): Element {
+  return filterChipsFactory(props);
+}
+
+/** Numeric input with steppers. See {@link NumberFieldProps}. */
+export function numberField(props?: NumberFieldProps): Element {
+  return numberFieldFactory(props);
+}
+
+/** Country dial code + phone number. See {@link PhoneInputProps}. */
+export function phoneInput(props?: PhoneInputProps): Element {
+  return phoneInputFactory(props);
+}
+
+/** Label + description + error field wrapper. See {@link FieldProps}. */
+export function field(fn: () => void, props?: FieldProps): Element;
+export function field(props: FieldProps, fn: () => void): Element;
+export function field(a: any, b?: any): Element {
+  return fieldFactory(a, b);
+}
+
+/** Styled native `<select>`. See {@link NativeSelectProps}. */
+export function nativeSelect(props: NativeSelectProps): Element {
+  return nativeSelectFactory(props);
+}
+
+/** Top navigation mega-menu. See {@link NavigationMenuProps}. */
+export function navigationMenu(
+  fn: (menu: NavigationMenuElement) => void,
+  props?: NavigationMenuProps,
+): NavigationMenuElement;
+export function navigationMenu(
+  props: NavigationMenuProps,
+  fn: (menu: NavigationMenuElement) => void,
+): NavigationMenuElement;
+export function navigationMenu(a: any, b?: any): NavigationMenuElement {
+  return navigationMenuFactory(a, b);
+}
+
+/** Dismissible app banner. See {@link NoticeProps}. */
+export function notice(message?: string | (() => string), props?: Omit<NoticeProps, 'message'>): Element {
+  return noticeFactory(message, props);
+}
+
+/** Month calendar with day events. See {@link EventCalendarProps}. */
+export function eventCalendar(props?: EventCalendarProps): Element {
+  return eventCalendarFactory(props);
+}
+
+/** Input with prefix/suffix addons. See {@link InputGroupProps}. */
+export function inputGroup(props?: InputGroupProps): Element {
+  return inputGroupFactory(props);
+}
+
+/** Toolbar pressed toggle. See {@link ToggleControlProps}. */
+export function toggle(props?: ToggleControlProps): Element {
+  return toggleControlFactory(props);
+}
+
+/** Key-value detail rows. See {@link DescriptionListProps}. */
+export function descriptionList(props: DescriptionListProps): Element {
+  return descriptionListFactory(props);
+}
+
+/** Read-only HTML table. See {@link StaticTableProps}. */
+export function staticTable(props: StaticTableProps): Element {
+  return staticTableFactory(props);
+}
+
+/** Fixed aspect ratio wrapper. See {@link AspectRatioProps}. */
+export function aspectRatio(fn: () => void, props?: AspectRatioProps): Element;
+export function aspectRatio(props: AspectRatioProps, fn: () => void): Element;
+export function aspectRatio(a: any, b?: any): Element {
+  return aspectRatioFactory(a, b);
+}
+
+/** Settings / notification list rows. See {@link ItemListProps}. */
+export function itemList(props: ItemListProps): Element {
+  return itemListFactory(props);
+}
+
+/** Multi-select checkbox group. See {@link CheckboxGroupProps}. */
+export function checkboxGroup(props: CheckboxGroupProps): Element {
+  return checkboxGroupFactory(props);
+}
+
 /** Render markdown to HTML. Prefer `ui.markdown`. See {@link MarkdownProps}. */
 export function markdown(text?: string, props?: MarkdownProps): Element {
   return markdownFactory(text, props);
@@ -1621,6 +1786,25 @@ export const ui = {
   statusDot,
   feedRow,
   feedList,
+  buttonGroup,
+  empty,
+  pagination,
+  filterBar,
+  filterChips,
+  numberField,
+  phoneInput,
+  field,
+  nativeSelect,
+  navigationMenu,
+  notice,
+  eventCalendar,
+  inputGroup,
+  toggle,
+  descriptionList,
+  staticTable,
+  aspectRatio,
+  itemList,
+  checkboxGroup,
   markdown,
   html,
   image,