@close-by/clay 0.2.11 → 0.2.12

package/docs/ops-patterns.md

@@ -39,9 +39,9 @@ const live = ui.state({ selectedId: null as string | null, rows: [] as Row[] });
 
 ui.auto(() => {
   ui.resizable(
-    { orientation: 'horizontal', className: 'h-[calc(100vh-8rem)] w-full min-h-[24rem]' },
+    { orientation: 'horizontal', fill: 'viewport' },
     (r) => {
-      r.panel({ defaultSize: 40, minSize: 28 }, () => {
+      r.panel({ defaultSize: 40, minSize: 28, className: 'min-h-0 overflow-hidden' }, () => {
         ui.auto(() => {
           for (const row of live.rows) {
             ui.button(row.id, {
@@ -54,11 +54,12 @@ ui.auto(() => {
           }
         });
       });
-      r.panel({ defaultSize: 60, minSize: 36 }, () => {
+      r.handle();
+      r.panel({ defaultSize: 60, minSize: 36, className: 'min-h-0 overflow-hidden' }, () => {
         ui.auto(() => {
           const row = live.rows.find((x) => x.id === live.selectedId);
           if (!row) {
-            ui.label('Select a row').classes('text-sm text-muted-foreground');
+            ui.empty({ title: 'Select a row', density: 'inline' });
             return;
           }
           // detail…
@@ -70,7 +71,7 @@ ui.auto(() => {
 });
 ```
 
-Keep **separate** `ui.auto` regions for list vs detail so selection updates do not remount the whole shell. Default panel sizes (`defaultSize` / `minSize`) are percentages.
+Keep **separate** `ui.auto` regions for list vs detail so selection updates do not remount the whole shell. Default panel sizes (`defaultSize` / `minSize`) are percentages. Prefer `fill: 'parent' | 'viewport'` over viewport `calc` height utilities.
 
 ## Live feed rows (not `ui.list`)
 
@@ -163,7 +164,7 @@ For **`ui.dataTable`**, pass `showFilterChips: true` to surface active search +
 ```ts
 ui.auto(() => {
   if (live.loadingMore) {
-    ui.label('Loading…').classes('text-xs text-muted-foreground p-2');
+    ui.label('Loading…', { tone: 'muted', size: 'xs' });
     return;
   }
   if (!live.hasMore) return;
@@ -183,6 +184,22 @@ ui.auto(() => {
 
 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`.
 
+## Fewer classes (ops density)
+
+Prefer semantic props over Tailwind soup:
+
+| Instead of… | Prefer… |
+|-------------|---------|
+| `.classes('text-sm text-muted-foreground')` | `ui.label(…, { tone: 'muted', size: 'sm' })` |
+| Title + subtitle stacks | `ui.pageHeading('Orders', { description: '…' })` |
+| `className: 'flex-row w-[10rem]'` on filters | `ui.select({ inline: true, width: 'sm', … })` |
+| `ui.spinner({ className: 'h-3 w-3' })` | `ui.spinner({ size: 'xs' })` |
+| Feed empty muted label | `ui.empty({ title: '…', density: 'inline' })` |
+| `h-[calc(100%-7rem)]!` on resizable | `ui.resizable({ fill: 'parent' \| 'viewport' }, …)` |
+| `className: 'items-end justify-between'` on rows | `ui.row({ align: 'end', justify: 'between' }, …)` |
+
+`className` remains an escape hatch.
+
 ## 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.11",
+  "version": "0.2.12",
   "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.11",
-    "@close-by/clay-core": "0.2.11",
-    "@close-by/clay-components": "0.2.11",
-    "@close-by/clay-server": "0.2.11",
+    "@close-by/clay-compiler": "0.2.12",
+    "@close-by/clay-core": "0.2.12",
+    "@close-by/clay-components": "0.2.12",
+    "@close-by/clay-server": "0.2.12",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -34,6 +34,7 @@ import {
   pagination as paginationFactory,
   filterBar as filterBarFactory,
   filterChips as filterChipsFactory,
+  pageHeading as pageHeadingFactory,
   numberField as numberFieldFactory,
   phoneInput as phoneInputFactory,
   field as fieldFactory,
@@ -120,7 +121,10 @@ import {
   type ButtonVariant,
   type ButtonSize,
   type LabelProps,
+  type LabelTone,
+  type LabelSize,
   type InputProps,
+  type FieldWidth,
   type CheckboxProps,
   type SwitchProps,
   type SelectProps,
@@ -144,6 +148,7 @@ import {
   type BadgeProps,
   type AlertProps,
   type SpinnerProps,
+  type SpinnerSize,
   type ProgressProps,
   type SeparatorProps,
   type IconProps,
@@ -157,6 +162,8 @@ import {
   type ButtonGroupProps,
   type ButtonGroupOrientation,
   type EmptyProps,
+  type EmptyDensity,
+  type PageHeadingProps,
   type PaginationProps,
   type FilterBarProps,
   type FilterChip,
@@ -253,6 +260,7 @@ import {
   type CommandMode,
   type CommandItemOptions,
   type ResizableProps,
+  type ResizableFill,
   type ResizableOrientation,
   type ResizablePanelProps,
   type ResizableHandleProps,
@@ -494,7 +502,10 @@ export type {
   ButtonVariant,
   ButtonSize,
   LabelProps,
+  LabelTone,
+  LabelSize,
   InputProps,
+  FieldWidth,
   CheckboxProps,
   BadgeProps,
   LinkProps,
@@ -555,6 +566,7 @@ export type {
   AvatarProps,
   SkeletonProps,
   SpinnerProps,
+  SpinnerSize,
   ProgressProps,
   SeparatorProps,
   IconProps,
@@ -931,6 +943,11 @@ export function empty(props: EmptyProps, footer?: () => void): Element {
   return emptyFactory(props, footer);
 }
 
+/** Page title + optional description. Prefer over stacked muted labels. */
+export function pageHeading(props: PageHeadingProps, trailing?: () => void): Element {
+  return pageHeadingFactory(props, trailing);
+}
+
 /** Standalone pager. See {@link PaginationProps}. */
 export function pagination(props?: PaginationProps): Element {
   return paginationFactory(props);
@@ -1789,6 +1806,7 @@ export const ui = {
   feedList,
   buttonGroup,
   empty,
+  pageHeading,
   pagination,
   filterBar,
   filterChips,