@close-by/clay 0.2.12 → 0.2.13

package/docs/boot.md

@@ -2,6 +2,18 @@
 
 Clay has two entry styles. Prefer **one production path** (library mode) and treat the CLI as a thin dev wrapper so port, CSS, and `clientDir` do not drift.
 
+### Dev HTML comments
+
+When `dev` is on (default unless `NODE_ENV=production`, or set `ui.run({ dev: true })`), the shell sets `window.__CLAY_DEV__` and the client inserts HTML comments around each wire node:
+
+```html
+<!-- clay:staticTable -->
+…table markup…
+<!-- /clay:staticTable -->
+```
+
+Pass `dev: false` to disable.
+
 ## Recommended production path — library mode
 
 ```typescript

package/docs/elements.md

@@ -34,7 +34,7 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `inputGroup` | `inputGroup` | Input with prefix/suffix addons |
 | `toggle` | `toggle` | Pressed toolbar toggle |
 | `descriptionList` | `descriptionList` | Key-value detail rows |
-| `staticTable` | `staticTable` | Read-only HTML table |
+| `staticTable` | `staticTable` | Read-only HTML table (`bordered`/`hoverable` default on; `density`, `emptyTitle`, column `mono`) |
 | `aspectRatio` | `aspectRatio` | Fixed-ratio child wrapper |
 | `itemList` | `itemList` | Settings / notification rows |
 | `checkboxGroup` | `checkboxGroup` | Multi-select checkboxes |
@@ -76,6 +76,7 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `badge` | `badge` | ShadCN `Badge` |
 | `alert` | `alert` | Bordered alert box |
 | `spinner` | `spinner` | Lucide spinner |
+| `spacer` | `spacer` | Fixed gap (`orientation` default `horizontal`; `size` xs–xl) |
 | `skeleton` | `skeleton` | ShadCN `Skeleton` placeholder |
 | `avatar` | `avatar` | ShadCN `Avatar` (+ fallback) |
 | `progress` | `progress` | ShadCN `Progress` (0–100) |

package/docs/ops-patterns.md

@@ -197,8 +197,9 @@ Prefer semantic props over Tailwind soup:
 | 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: 'mb-2'` between uneven blocks | Parent `column({ gap })`, or `ui.spacer({ orientation: 'vertical', size: 'md' })` |
 
-`className` remains an escape hatch.
+Prefer even stacks via parent `gap`. Use `ui.spacer` for uneven breaks (`orientation` default **`horizontal`**; `vertical` for column stacks). `className` remains an escape hatch.
 
 ## Logs / traces — sensitive bodies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "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.12",
-    "@close-by/clay-core": "0.2.12",
-    "@close-by/clay-components": "0.2.12",
-    "@close-by/clay-server": "0.2.12",
+    "@close-by/clay-compiler": "0.2.13",
+    "@close-by/clay-core": "0.2.13",
+    "@close-by/clay-components": "0.2.13",
+    "@close-by/clay-server": "0.2.13",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -35,6 +35,7 @@ import {
   filterBar as filterBarFactory,
   filterChips as filterChipsFactory,
   pageHeading as pageHeadingFactory,
+  spacer as spacerFactory,
   numberField as numberFieldFactory,
   phoneInput as phoneInputFactory,
   field as fieldFactory,
@@ -164,6 +165,9 @@ import {
   type EmptyProps,
   type EmptyDensity,
   type PageHeadingProps,
+  type SpacerProps,
+  type SpacerSize,
+  type SpacerOrientation,
   type PaginationProps,
   type FilterBarProps,
   type FilterChip,
@@ -188,6 +192,7 @@ import {
   type DescriptionListItem,
   type StaticTableProps,
   type StaticTableColumn,
+  type StaticTableDensity,
   type AspectRatioProps,
   type ItemListProps,
   type ItemListEntry,
@@ -948,6 +953,14 @@ export function pageHeading(props: PageHeadingProps, trailing?: () => void): Ele
   return pageHeadingFactory(props, trailing);
 }
 
+/**
+ * Explicit space between siblings. Default orientation is horizontal (width).
+ * Prefer parent `gap` for even stacks; use spacer for uneven breaks.
+ */
+export function spacer(props?: SpacerProps): Element {
+  return spacerFactory(props);
+}
+
 /** Standalone pager. See {@link PaginationProps}. */
 export function pagination(props?: PaginationProps): Element {
   return paginationFactory(props);
@@ -1807,6 +1820,7 @@ export const ui = {
   buttonGroup,
   empty,
   pageHeading,
+  spacer,
   pagination,
   filterBar,
   filterChips,