@close-by/clay 0.2.12 → 0.2.14

package/docs/api.md

@@ -1052,7 +1052,7 @@ ui.stat([
 
 #### `ui.areaChart(props)`
 
-Stacked area chart (Recharts). Optional card chrome via `title` / `description`. Set `interactive: true` with ISO date `xKey` values for client-side period tabs (default 7d / 30d / 90d; override with `periods`). Optional `headline: { value, trend?, trendDirection? }` for a KPI row above the chart; `loading: true` shows a skeleton. Legend is always shown. Pass `stacked: false` to overlay series instead of stacking (default `true`).
+Stacked area chart (Recharts). Optional card chrome via `title` / `description`. Set `interactive: true` with ISO date `xKey` values for client-side period tabs (default 7d / 30d / 90d; override with `periods`). Optional `headline: { value, trend?, trendDirection? }` for a KPI row above the chart; `loading: true` shows a skeleton. Legend is shown by default; pass `showLegend: false` to hide. Pass `stacked: false` to overlay series instead of stacking (default `true`).
 
 ```typescript
 ui.areaChart({
@@ -1071,7 +1071,7 @@ ui.areaChart({
 
 #### `ui.barChart(props)`
 
-Bar chart with the same cartesian props as area (`data`, `xKey`, `series`, title/description/height/interactive, `headline`, `periods`, `loading`). Optional `stacked` (default `false`) and `layout: 'vertical' | 'horizontal'` (default `'vertical'` — category on X).
+Bar chart with the same cartesian props as area (`data`, `xKey`, `series`, title/description/height/interactive, `headline`, `periods`, `loading`, `showLegend?`). Optional `stacked` (default `false`) and `layout: 'vertical' | 'horizontal'` (default `'vertical'` — category on X).
 
 ```typescript
 ui.barChart({
@@ -1089,11 +1089,22 @@ ui.barChart({
 
 #### `ui.lineChart(props)`
 
-Line chart with the same cartesian props as area (including interactive date ranges, headline, periods, loading).
+Line chart with the same cartesian props as area (including interactive date ranges, headline, periods, loading, `showLegend?`). Line styling:
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `curve` | `'monotone'` | Recharts interpolation: `'linear'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`, `'basis'` |
+| `strokeWidth` | `2` | Line thickness in px |
+| `dots` | `false` | Show point markers |
+| `strokeDasharray` / `dashed` | — | Dashed stroke; `dashed: true` → `'4 4'` |
+| `variant` | `'default'` | `'minimal'` hides the grid for a cleaner plot |
 
 ```typescript
 ui.lineChart({
   title: 'Traffic trend',
+  showLegend: false,
+  curve: 'step',
+  dots: true,
   data: monthly,
   xKey: 'month',
   series: [

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) |
@@ -101,9 +102,9 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `upload` | `upload` | File picker / dropzone → `POST /upload` (progress/abort) → WS `upload` / `progress` / `error` / `abort` |
 | `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) |
-| `lineChart` | `linechart` | Recharts line (+ optional interactive periods, headline, loading) |
+| `areaChart` | `areachart` | Recharts stacked area (+ legend, optional interactive periods, `headline`, `loading`, `stacked?`, `showLegend?`) |
+| `barChart` | `barchart` | Recharts bar (`stacked?`, `layout?: 'vertical' \| 'horizontal'`, shared cartesian chrome, `showLegend?`) |
+| `lineChart` | `linechart` | Recharts line (+ interactive periods, headline, loading, `curve`/`strokeWidth`/`dots`/`dashed`/`variant`, `showLegend?`) |
 | `pieChart` | `piechart` | Recharts pie/donut (`nameKey`/`valueKey` or `series`, `innerRadius?`) |
 | `radarChart` | `radarchart` | Recharts radar (`angleKey` + `series`, optional `fillOpacity`) |
 | `radialChart` | `radialchart` | Recharts radial bar (`nameKey`/`valueKey` or stacked `series`, optional center text / angles) |

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.14",
   "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.14",
+    "@close-by/clay-core": "0.2.14",
+    "@close-by/clay-components": "0.2.14",
+    "@close-by/clay-server": "0.2.14",
     "@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,
@@ -232,6 +237,9 @@ import {
   type ChartPeriod,
   type ChartReferenceLine,
   type ChartReferenceArea,
+  type LineCurve,
+  type LineChartVariant,
+  type LineChartStyleProps,
   type SparklineProps,
   type CardProps,
   type DialogProps,
@@ -948,6 +956,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 +1823,7 @@ export const ui = {
   buttonGroup,
   empty,
   pageHeading,
+  spacer,
   pagination,
   filterBar,
   filterChips,