@close-by/clay 0.2.9 → 0.2.11

package/SKILL.md

@@ -116,7 +116,7 @@ Resolve docs programmatically: `resolveClayDocsDir()` from `@close-by/clay/docs-
 
 ## 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.
+Auto-registers when pages use `// @clay-reactive` / `"use reactive"` (`clay` / `loadPages` default). Prefer explicit `ui.state` + `ui.auto` for production/async-heavy apps; force with `--reactive-let` if needed.
 
 ## Package map (monorepo)
 

package/docs/SKILL.md

@@ -116,7 +116,7 @@ Resolve docs programmatically: `resolveClayDocsDir()` from `@close-by/clay/docs-
 
 ## 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.
+Auto-registers when pages use `// @clay-reactive` / `"use reactive"` (`clay` / `loadPages` default). Prefer explicit `ui.state` + `ui.auto` for production/async-heavy apps; force with `--reactive-let` if needed.
 
 ## Package map (monorepo)
 

package/docs/api.md

@@ -1682,17 +1682,18 @@ ui.scrollArea(
 
 #### `ui.viewportEnter(fn, props?)` / `ui.viewportEnter(props, fn)`
 
-IntersectionObserver wrapper. Fires `onEnter` when the element intersects the viewport — default **once**.
+IntersectionObserver wrapper. Fires `onEnter` when the element intersects the scroll root — default **once**, root = browser viewport.
 
 ```typescript
 ui.viewportEnter(
   {
     once: true,
+    root: 'nearest-scroll', // overflow panel / scroll-area, not only the window
     rootMargin: '80px',
-    onEnter: () => void loadSection(),
+    onEnter: () => void loadMore(),
   },
   () => {
-    ui.label('Lazy block');
+    ui.label('Load more…');
   },
 );
 ```
@@ -1702,9 +1703,12 @@ ui.viewportEnter(
 | `className` | `string` | |
 | `onEnter` | `() => void \| Promise<void>` | — client emits `enter` |
 | `once` | `boolean` | `true` |
+| `root` | `'viewport' \| 'nearest-scroll' \| string` | `'viewport'` |
 | `rootMargin` | `string` | `'0px'` |
 | `threshold` | `number \| number[]` | `0` |
 
+`nearest-scroll` walks ancestors for overflow scroll or `[data-slot="scroll-area-viewport"]`. A CSS selector uses `closest` / `querySelector`.
+
 #### `ui.keybind(props)`
 
 Headless keyboard chord listener. Renders nothing; while the node is in the tree the client listens on `window` `keydown`, matches a chord, and emits `press` → `onPress`.

package/docs/boot.md

@@ -90,7 +90,11 @@ Legacy `_clay-reload-*.ts` files under `pages/` (pre-0.2.5) should be deleted; m
 
 ## Reactive-let
 
-The CLI leaves the compile-time `let` transform **off** unless you pass `--reactive-let`. Library mode never registers the Bun loader unless you call `registerReactiveLetPlugin()` yourself. Prefer Phase 1 `ui.state` / `ui.auto` for real apps — see [reactive-let](./reactive-let.md).
+The CLI **auto-registers** the compile-time `let` transform when any loaded page contains `// @clay-reactive` or `"use reactive"`. Force on with `--reactive-let`, force off with `--no-reactive-let`.
+
+`ui.loadPages` does the same scan-before-import in library mode (default `reactiveLet: 'auto'`), so apps no longer need a manual `registerReactiveLetPlugin()` before `loadPages`. Prefer Phase 1 `ui.state` / `ui.auto` for dense/async production apps until you are ready for the pragma path — see [reactive-let](./reactive-let.md).
+
+`configureRun` Tailwind options (`appendCss`, custom `content`, …) are **merged** with CLI defaults; the CLI no longer replaces the whole `tailwind` object.
 
 ## Checklist (avoid drift)
 

package/docs/elements.md

@@ -31,6 +31,13 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `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 |
@@ -84,7 +91,7 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `command` | `command` (+ `commandgroup` / `commanditem` / `commandseparator`) | Command palette (`mode: 'dialog' \| 'inline'`; dialog owns `open`) |
 | `resizable` | `resizable` (+ `resizablepanel` / `resizablehandle`) | `react-resizable-panels` |
 | `scrollArea` | `scrollarea` | ShadCN `ScrollArea` (`onNearEnd` for infinite scroll) |
-| `viewportEnter` | `viewportEnter` | IntersectionObserver wrapper (`onEnter`, `once?`) |
+| `viewportEnter` | `viewportEnter` | IntersectionObserver (`onEnter`, `once?`, `root?`) |
 | `keybind` | `keybind` | Headless `window` `keydown` chord listener (`return null`) |
 | `kbd` | `kbd` | Display-only chord glyphs (`Kbd` / `KbdGroup`; same tokens as `keybind`) |
 | `markdown` | `markdown` | Client `marked` + DOMPurify |

package/docs/examples.md

@@ -18,7 +18,9 @@ After `bun run build:client && bun run demo` (or `bun run demo:cli`), open http:
 | `/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/composed` | `ComposedDemo.ts` | ReUI batch 1: `ui.timeline`, `ui.stepper`, `ui.dateRange`, `ui.feedList`/`ui.feedRow`, `ui.sparkline` |
+| `/examples/ops-console` | `OpsConsoleDemo.ts` | Dogfood ops console: `filterBar` → `feedList` → `descriptionList` / `staticTable` (batches 1–7 in one surface) |
 | `/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` |

package/docs/ops-patterns.md

@@ -2,6 +2,8 @@
 
 Dense internal tools (live feeds, master–detail, logs/traces) push Clay past card dashboards. Prefer Phase 1 reactivity ([Concepts](./concepts.md#canonical-recipe-state--auto--timer)) and the helpers below.
 
+**Runnable dogfood:** `/examples/ops-console` (`OpsConsoleDemo.ts`) — one Orders-shaped surface using `filterBar`, `inputGroup`, `feedList`/`feedRow`, `descriptionList`, `staticTable`, `pagination`, `empty`, `notice`, and `toggle`. Use that page to find API friction before adding more wire types.
+
 ## Status chips
 
 ```ts
@@ -154,6 +156,33 @@ ui.auto(() => {
 
 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).
 
+## Infinite scroll / load-more
+
+**Blessed pattern for overflow feeds** (master–detail panels): `ui.viewportEnter` with `root: 'nearest-scroll'`. Remount the sentinel while a page is in flight if you need to re-arm after `once: true`:
+
+```ts
+ui.auto(() => {
+  if (live.loadingMore) {
+    ui.label('Loading…').classes('text-xs text-muted-foreground p-2');
+    return;
+  }
+  if (!live.hasMore) return;
+  ui.viewportEnter(
+    {
+      once: true,
+      root: 'nearest-scroll',
+      rootMargin: '120px',
+      onEnter: () => void loadNextPage(),
+    },
+    () => {
+      ui.label(' ').classes('h-1');
+    },
+  );
+});
+```
+
+Alternative when you already wrap the list in **`ui.scrollArea`**: use `onNearEnd` on the scroll area (scroll-root is built-in). Prefer one pattern per surface — `viewportEnter` + `nearest-scroll` does **not** require `scrollArea`.
+
 ## 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/docs/reactive-let.md

@@ -75,17 +75,17 @@ Phase 1 remains the **escape hatch** — copy patterns from [`ReactiveLetOrders.
 
 Package `@close-by/clay-compiler` rewrites a **documented subset** of `let` into Phase 1 APIs.
 
-### Opt-in (required)
+### Opt-in
 
-Both of:
-
-1. **CLI / loader:** pass `--reactive-let` to `clay` (or call `registerReactiveLetPlugin()` yourself). Off by default.
-2. **Source:** one of:
+1. **Source:** one of:
    - File pragma: `// @clay-reactive` (near the top of the file) — applies to **`ui.page` / `page` callbacks only**
    - Block directive as the first statement: `"use reactive";` — required for nested helpers / `ui.column(() => …)` lets
+2. **Loader:** by default, `clay` and `ui.loadPages` **auto-register** the Bun plugin when any scanned page has the pragma / directive. Force with `--reactive-let` / `loadPages(dir, { reactiveLet: true })`; disable with `--no-reactive-let` / `{ reactiveLet: false }`. Manual `registerReactiveLetPlugin()` is still fine (and idempotent).
 
 `ui.page(...)` alone does **not** opt in. Module-level helpers (`function mergeUnits() { … }`) and nested `function` / arrow bodies do **not** inherit the file pragma — use `"use reactive";` inside the page callback or a nested site when needed.
 
+**Hard fail:** a local that shadows lifted state and whose initializer reads that name (`const detail = detail` or `const detail = rows.find(… detail …)`) **refuses to emit** — rename the local. Silent `undefined` after fetch was a hub dogfood failure mode.
+
 ### Who wraps `ui.auto`?
 
 Compile-time region analysis **does not** see into nested function bodies. Authors must still wrap rebuild regions when UI is built from helpers or widget callbacks:
@@ -111,7 +111,8 @@ Inline UI in widget callbacks (`ui.label(expr)`, `ui.icon(…, { className: expr
 | `units.filter(u => { … })` reading lifted state | Plain JS (no `ui.auto` inside filter) | Nothing |
 | `onClick` / `onChange` / `ui.timer` handler | Not a build region | Normal JS |
 | `const live = ui.state({…})` (no pragma) | Unchanged | Explicit `ui.auto` (Phase 1) |
-| Local `const detail = …` shadows lifted `let detail` | Renames in emit + compile warning | Prefer distinct names |
+| Local `const detail = …` shadows lifted `let detail` (no self-read) | Renames in emit + compile warning | Prefer distinct names |
+| Local `const detail = detail` / initializer reads `detail` | **Hard error** — transform refuses to emit | Rename the local |
 
 ### What transforms
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
@@ -37,10 +37,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@close-by/clay-compiler": "0.2.9",
-    "@close-by/clay-core": "0.2.9",
-    "@close-by/clay-components": "0.2.9",
-    "@close-by/clay-server": "0.2.9",
+    "@close-by/clay-compiler": "0.2.11",
+    "@close-by/clay-core": "0.2.11",
+    "@close-by/clay-components": "0.2.11",
+    "@close-by/clay-server": "0.2.11",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -43,6 +43,13 @@ import {
   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,
@@ -166,6 +173,19 @@ import {
   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,
@@ -238,6 +258,7 @@ import {
   type ResizableHandleProps,
   type ScrollAreaProps,
   type ViewportEnterProps,
+  type ViewportEnterRoot,
   type KeybindProps,
   type KbdProps,
   type BreadcrumbItem,
@@ -264,7 +285,6 @@ import {
   type HtmlProps,
   type ImageProps,
   type IframeProps,
-  type ViewportEnterProps,
   type UploadProps,
   type UploadVariant,
   type UploadedFile,
@@ -551,6 +571,7 @@ export type {
   ImageProps,
   IframeProps,
   ViewportEnterProps,
+  ViewportEnterRoot,
   UploadProps,
   UploadVariant,
   UploadedFile,
@@ -972,6 +993,43 @@ 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);
@@ -1741,6 +1799,13 @@ export const ui = {
   navigationMenu,
   notice,
   eventCalendar,
+  inputGroup,
+  toggle,
+  descriptionList,
+  staticTable,
+  aspectRatio,
+  itemList,
+  checkboxGroup,
   markdown,
   html,
   image,

package/src/pages.ts

@@ -7,6 +7,10 @@ import {
   type PageFn,
 } from '@close-by/clay-core';
 import { warnClayPageIssues } from '@close-by/clay-compiler';
+import {
+  ensureReactiveLetPluginForPaths,
+  registerReactiveLetPlugin,
+} from '@close-by/clay-compiler/plugin';
 import type { AppNavItem } from '@close-by/clay-components';
 
 /**
@@ -109,11 +113,26 @@ function shouldSkipPageFile(relativePath: string): boolean {
  * Clears prior registrations first, then fresh-imports each module (cache-busted)
  * so `--reload` picks up edits. Each module should call `ui.page` once; optional
  * `pageMeta` is attached to the new path.
+ *
+ * When `reactiveLet` is `'auto'` (default), scans pages for `// @clay-reactive` /
+ * `"use reactive"` and registers the Bun plugin **before** imports so library
+ * boot does not need a manual `registerReactiveLetPlugin()` call.
  */
-export async function loadPages(dir: string | URL): Promise<string[]> {
+export async function loadPages(
+  dir: string | URL,
+  opts?: { reactiveLet?: boolean | 'auto' },
+): Promise<string[]> {
   const absDir = typeof dir === 'string' ? dir : fileURLToPath(dir);
   const glob = new Bun.Glob('**/*.{ts,tsx}');
   const files = [...glob.scanSync({ cwd: absDir })].filter((f) => !shouldSkipPageFile(f)).sort();
+  const fullPaths = files.map((relative) => join(absDir, relative));
+
+  const reactiveMode = opts?.reactiveLet ?? 'auto';
+  if (reactiveMode === true) {
+    registerReactiveLetPlugin();
+  } else if (reactiveMode === 'auto') {
+    await ensureReactiveLetPluginForPaths(fullPaths);
+  }
 
   clearPages();
   clearPageMeta();