@declarion/react 0.6.12 → 0.6.13

package/README.md

@@ -17,9 +17,40 @@ pnpm add react react-dom
 | Import | Purpose |
 |---|---|
 | `@declarion/react` | Main React entry — components, hooks, types |
+| `@declarion/react/icons` | Lightweight icon rendering — `DynamicIcon` + `setIconRegistry` + built-in glyphs + lazy Lucide, WITHOUT the eager UI bundle (~5 kB gzip). For host/embed apps that render nav from `/api/schema`. |
 | `@declarion/react/styles.css` | Pre-compiled Tailwind output; import once at the SPA root |
 | `@declarion/react/vite` | Node-only Vite plugin — opt into client staleness handling at build time |
 
+## Icons
+
+A DSL `icon:` value is a NAME resolved against **Lucide** (the default icon
+library, ~1500 glyphs) by name. Resolution order: a consumer-declared `icons:`
+entry served on `/api/schema` (svg / url / lucide-alias) → the curated built-in
+set (`src/components/primitives/Icons.tsx`, thin wrappers over Lucide, bundled
+eagerly for instant render) → Lucide by name (lazy) → `folder`. A host renders
+any icon with one component:
+
+```tsx
+import { setIconRegistry, DynamicIcon } from "@declarion/react/icons";
+
+// once, after the /api/schema fetch (it carries any custom icons):
+setIconRegistry(schema.icons ?? {});
+// anywhere, any depth - the registry is a module singleton:
+<DynamicIcon name={navItem.icon} size={16} />
+```
+
+`setIconRegistry` is a module-level store (mirrors `registerScreen`); `DynamicIcon`
+subscribes via `useSyncExternalStore`, so replacing the registry (identity switch)
+re-renders every icon. Bare names resolve from Lucide - no registry entry needed.
+Lucide's per-icon `dynamicIconImports` map is loaded only via `import()` and stays
+out of the eager bundle (the curated `Icons.tsx` set is tree-shaken named imports).
+See [`examples/embed-host`](https://github.com/disciplinedware/declarion/blob/main/typescript/examples/embed-host) for a working host.
+
+The curated built-in set is just a name→Lucide-component map with the SDK's
+`{ size, cls, style }` prop adapter; there is no hand-drawn SVG and no codegen.
+To add a name to the eager set, add an entry to `Icons.tsx`; anything not in it
+resolves lazily from Lucide regardless.
+
 ## Vite plugin: build identity for client staleness handling
 
 The SDK ships with a tiny Vite plugin that emits `bundle-fingerprint.txt` next to `index.html` after every production build. The Declarion server reads it at boot and folds it into the build identity stamped on every `/api/*` response (`X-Declarion-Version`). The SDK's built-in version watcher detects drift on every API response, on focus/online/60s probe, and either silently invalidates the schema query (schema-only changes) or prompts the user to reload (asset/binary changes). Cross-tab coordination via `BroadcastChannel`.

package/dist-lib/{DraggableChildrenTable-CdzxxoTe.js → DraggableChildrenTable-rb6uaMOV.js}

@@ -1,70 +1,71 @@
-import { Qt as e, St as t, Xt as n, Zt as r, a as i, i as a, n as o, r as s, t as c, ut as l } from "./dataTableStyles-zH3M7xdm.js";
+import { s as e } from "./DynamicIcon-DCRdxxZ7.js";
+import { Xt as t, Yt as n, a as r, i, lt as a, n as o, r as s, t as c, xt as l } from "./dataTableStyles-EMyLDQRB.js";
 import { useCallback as u, useMemo as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { DndContext as h, PointerSensor as g, closestCenter as _, useSensor as v, useSensors as y } from "@dnd-kit/core";
 import { SortableContext as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
 import { CSS as C } from "@dnd-kit/utilities";
 //#region src/components/detail-layout/DraggableChildrenTable.tsx
-function w({ config: t, childEntity: n, schema: i, rows: a, onChange: c, validationErrors: x, refs: C }) {
-	let w = f(null), E = t.position_field, D = t.columns, O = y(v(g, { activationConstraint: { distance: 5 } })), k = new Set(Array.isArray(t.foreign_key) ? t.foreign_key : [t.foreign_key]), A = D.filter((e) => {
+function w({ config: n, childEntity: r, schema: i, rows: c, onChange: l, validationErrors: x, refs: C }) {
+	let w = f(null), E = n.position_field, D = n.columns, O = y(v(g, { activationConstraint: { distance: 5 } })), k = new Set(Array.isArray(n.foreign_key) ? n.foreign_key : [n.foreign_key]), A = D.filter((e) => {
 		if (k.has(e) || e === E) return !1;
-		let t = n.fields.get(e);
+		let t = r.fields.get(e);
 		return !(!t || t.auto || t.primary);
 	}), j = new Set(D.filter((e) => {
 		if (e === E) return !0;
-		let t = n.fields.get(e);
+		let t = r.fields.get(e);
 		return t && (t.auto || t.primary);
-	})), M = D.filter((e) => e !== E), N = d(() => a.filter((e) => !e._deleted).map((e) => e._key), [a]), P = u((e, t, n) => {
-		c(a.map((r) => r._key === e ? {
+	})), M = D.filter((e) => e !== E), N = d(() => c.filter((e) => !e._deleted).map((e) => e._key), [c]), P = u((e, t, n) => {
+		l(c.map((r) => r._key === e ? {
 			...r,
 			[t]: n,
 			_dirty: !0
 		} : r));
-	}, [a, c]), F = u(() => {
-		let e = a.filter((e) => !e._deleted).reduce((e, t) => {
+	}, [c, l]), F = u(() => {
+		let e = c.filter((e) => !e._deleted).reduce((e, t) => {
 			let n = typeof t[E] == "number" ? t[E] : -1;
 			return Math.max(e, n);
-		}, -1), r = {
+		}, -1), t = {
 			_key: crypto.randomUUID(),
 			_dirty: !0,
 			[E]: e + 1
-		}, i = t.quick_add?.defaults ?? {};
+		}, i = n.quick_add?.defaults ?? {};
 		for (let e of A) {
-			let t = n.fields.get(e);
-			t && (i[e] === void 0 ? t.default === void 0 ? t.type === "bool" && (r[e] = !1) : r[e] = t.default : r[e] = i[e]);
+			let n = r.fields.get(e);
+			n && (i[e] === void 0 ? n.default === void 0 ? n.type === "bool" && (t[e] = !1) : t[e] = n.default : t[e] = i[e]);
 		}
-		c([...a, r]);
+		l([...c, t]);
 	}, [
-		a,
 		c,
+		l,
 		A,
-		n,
-		t.quick_add?.defaults,
+		r,
+		n.quick_add?.defaults,
 		E
 	]), I = u((e) => {
-		c(a.map((t) => t._key === e ? {
+		l(c.map((t) => t._key === e ? {
 			...t,
 			_deleted: !0
 		} : t));
-	}, [a, c]), L = u((e) => {
-		c(a.map((t) => t._key === e ? {
+	}, [c, l]), L = u((e) => {
+		l(c.map((t) => t._key === e ? {
 			...t,
 			_deleted: !1
 		} : t));
-	}, [a, c]), R = u((e) => {
+	}, [c, l]), R = u((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
-		let r = a.filter((e) => !e._deleted), i = a.filter((e) => e._deleted), o = r.findIndex((e) => e._key === String(t.id)), s = r.findIndex((e) => e._key === String(n.id));
-		if (o === -1 || s === -1) return;
-		let l = [...r], [u] = l.splice(o, 1);
-		l.splice(s, 0, u), c([...l.map((e, t) => ({
+		let r = c.filter((e) => !e._deleted), i = c.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
+		if (a === -1 || o === -1) return;
+		let s = [...r], [u] = s.splice(a, 1);
+		s.splice(o, 0, u), l([...s.map((e, t) => ({
 			...e,
 			[E]: t,
 			_dirty: e[E] === t ? e._dirty : !0
 		})), ...i]);
 	}, [
-		a,
 		c,
+		l,
 		E
 	]), z = u((e) => {
 		let t = e.target, n = t.closest("td");
@@ -116,10 +117,10 @@ function w({ config: t, childEntity: n, schema: i, rows: a, onChange: c, validat
 						padding: "0 4px"
 					} }),
 					M.map((e) => {
-						let t = n.fields.get(e);
+						let t = r.fields.get(e);
 						return /* @__PURE__ */ p("th", {
 							style: B,
-							children: t ? l(t, e, i.entities) : e
+							children: t ? a(t, e, i.entities) : e
 						}, e);
 					}),
 					/* @__PURE__ */ p("th", { style: {
@@ -129,12 +130,12 @@ function w({ config: t, childEntity: n, schema: i, rows: a, onChange: c, validat
 				] }) }), /* @__PURE__ */ p(b, {
 					items: N,
 					strategy: S,
-					children: /* @__PURE__ */ p("tbody", { children: a.map((e) => /* @__PURE__ */ p(T, {
+					children: /* @__PURE__ */ p("tbody", { children: c.map((e) => /* @__PURE__ */ p(T, {
 						row: e,
 						columns: M,
 						editableColumns: A,
 						displayOnlyColumns: j,
-						childEntity: n,
+						childEntity: r,
 						validationErrors: x,
 						refs: C,
 						onCellChange: P,
@@ -146,7 +147,7 @@ function w({ config: t, childEntity: n, schema: i, rows: a, onChange: c, validat
 		})
 	}), /* @__PURE__ */ p("div", {
 		style: { marginTop: 8 },
-		children: /* @__PURE__ */ p(r, {
+		children: /* @__PURE__ */ p(t, {
 			kind: "ghost",
 			size: "xs",
 			icon: /* @__PURE__ */ p(e.plus, { size: 12 }),
@@ -155,9 +156,9 @@ function w({ config: t, childEntity: n, schema: i, rows: a, onChange: c, validat
 		})
 	})] });
 }
-function T({ row: r, columns: o, editableColumns: s, displayOnlyColumns: l, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
-	let v = a(), y = !!r._deleted, b = d?.[r._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
-		id: r._key,
+function T({ row: t, columns: a, editableColumns: o, displayOnlyColumns: s, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
+	let v = i(), y = !!t._deleted, b = d?.[t._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
+		id: t._key,
 		disabled: y
 	}), k = {
 		transform: C.Translate.toString(E),
@@ -198,40 +199,40 @@ function T({ row: r, columns: o, editableColumns: s, displayOnlyColumns: l, chil
 					children: /* @__PURE__ */ p(e.grid, { size: 14 })
 				})
 			}),
-			o.map((e) => {
-				let n = u.fields.get(e), a = b?.includes(e), o = l.has(e), c = s.includes(e);
-				return y || o || !c ? /* @__PURE__ */ p("td", {
+			a.map((e) => {
+				let n = u.fields.get(e), i = b?.includes(e), a = s.has(e), c = o.includes(e);
+				return y || a || !c ? /* @__PURE__ */ p("td", {
 					style: {
 						...A,
 						textDecoration: y ? "line-through" : "none"
 					},
-					children: n ? i({
+					children: n ? r({
 						field: n,
 						fieldName: e,
-						value: r[e],
+						value: t[e],
 						mode: "display",
-						record: r,
+						record: t,
 						refs: f,
 						locale: v
-					}) : t(r[e])
+					}) : l(t[e])
 				}, e) : /* @__PURE__ */ p("td", {
 					style: {
 						...j,
-						outline: a ? "1px solid var(--danger)" : "none",
+						outline: i ? "1px solid var(--danger)" : "none",
 						outlineOffset: -1,
-						borderRadius: a ? 4 : 0
+						borderRadius: i ? 4 : 0
 					},
-					title: a ? `${e} is required` : void 0,
-					children: n ? i({
+					title: i ? `${e} is required` : void 0,
+					children: n ? r({
 						field: n,
 						fieldName: e,
-						value: r[e],
+						value: t[e],
 						mode: "edit",
-						onChange: (t) => h(r._key, e, t),
-						record: r,
+						onChange: (n) => h(t._key, e, n),
+						record: t,
 						refs: f,
 						locale: v
-					}) : t(r[e])
+					}) : l(t[e])
 				}, e);
 			}),
 			/* @__PURE__ */ p("td", {
@@ -243,12 +244,12 @@ function T({ row: r, columns: o, editableColumns: s, displayOnlyColumns: l, chil
 				children: y ? /* @__PURE__ */ p(n, {
 					size: 24,
 					icon: /* @__PURE__ */ p(e.refresh, { size: 12 }),
-					onClick: () => _(r._key),
+					onClick: () => _(t._key),
 					title: "Undo delete"
 				}) : /* @__PURE__ */ p(n, {
 					size: 24,
 					icon: /* @__PURE__ */ p(e.trash, { size: 12 }),
-					onClick: () => g(r._key),
+					onClick: () => g(t._key),
 					title: "Delete row"
 				})
 			})

package/dist-lib/DynamicIcon-DCRdxxZ7.js

@@ -0,0 +1,260 @@
+import { useEffect as e, useState as t, useSyncExternalStore as n } from "react";
+import { Activity as r, ArrowDown as i, ArrowLeft as a, ArrowUp as o, ArrowUpDown as s, BadgeDollarSign as c, Ban as l, Bell as ee, Bolt as te, Box as u, Boxes as d, Briefcase as ne, Building as f, Building2 as re, Calendar as ie, CalendarClock as ae, Check as oe, ChevronDown as p, ChevronLeft as se, ChevronRight as ce, ChevronUp as le, CircleDot as ue, ClipboardCheck as de, Clock as fe, Code as pe, Columns as me, Columns3 as he, Command as ge, Copy as m, Cpu as h, CreditCard as g, Database as _, Dot as v, Download as y, Edit as b, ExternalLink as x, Eye as S, EyeOff as C, File as w, FileDiff as T, Filter as E, Folder as D, FormInput as O, GitBranch as k, Globe as A, Grid as j, Group as M, Hash as N, Home as P, Inbox as F, Info as I, Key as L, KeyRound as R, Layers as _e, Layout as ve, LayoutDashboard as ye, Link as be, List as xe, ListChecks as Se, Loader as Ce, Lock as we, LogIn as Te, LogOut as Ee, Mail as De, Menu as Oe, Minus as ke, Moon as Ae, MoreHorizontal as je, Package as Me, Paperclip as Ne, Play as Pe, PlayCircle as Fe, Plus as Ie, PlusCircle as Le, ReceiptText as Re, RefreshCw as ze, Repeat as Be, Save as Ve, ScrollText as He, Search as Ue, Settings as We, Settings2 as Ge, Shield as Ke, ShieldCheck as qe, ShieldPlus as Je, ShoppingCart as Ye, Sliders as Xe, SlidersHorizontal as Ze, Smartphone as Qe, Sparkle as $e, Sparkles as et, Star as tt, Sun as nt, Table2 as rt, Tag as it, Tags as at, ToggleRight as ot, Trash as st, Trash2 as ct, TriangleAlert as lt, Undo2 as ut, Upload as dt, User as ft, UserPlus as pt, Users as z, UsersRound as mt, WalletCards as ht, Webhook as gt, Workflow as _t, X as vt, Zap as B } from "lucide-react";
+import { jsx as V } from "react/jsx-runtime";
+//#region src/components/primitives/Icons.tsx
+var H = (e) => function({ size: t = 14, cls: n = "", style: r = {} }) {
+	return /* @__PURE__ */ V(e, {
+		size: t,
+		className: n,
+		style: r
+	});
+}, U = {
+	action: H(B),
+	activity: H(r),
+	ai: H(et),
+	arrowDown: H(i),
+	arrowUp: H(o),
+	audit: H(de),
+	back: H(a),
+	"badge-dollar-sign": H(c),
+	ban: H(l),
+	bell: H(ee),
+	bolt: H(te),
+	box: H(u),
+	boxes: H(d),
+	branch: H(k),
+	building: H(f),
+	calendar: H(ie),
+	check: H(oe),
+	cheveron: H(p),
+	"circle-dot": H(ue),
+	clock: H(fe),
+	code: H(pe),
+	columns: H(me),
+	"columns-3": H(he),
+	command: H(ge),
+	company: H(re),
+	copy: H(m),
+	cpu: H(h),
+	"credit-card": H(g),
+	database: H(_),
+	dbtable: H(rt),
+	device: H(Qe),
+	dot: H(v),
+	down: H(p),
+	download: H(y),
+	edit: H(b),
+	email: H(De),
+	entity: H(u),
+	external: H(x),
+	eye: H(S),
+	eyeOff: H(C),
+	field: H(O),
+	file: H(w),
+	"file-diff": H(T),
+	filter: H(E),
+	flow: H(_t),
+	folder: H(D),
+	"git-branch": H(k),
+	globe: H(A),
+	grid: H(j),
+	group: H(M),
+	handlers: H(gt),
+	hash: H(N),
+	home: H(P),
+	idp: H(R),
+	inbox: H(F),
+	info: H(I),
+	jobs: H(ne),
+	key: H(L),
+	"key-round": H(R),
+	layers: H(_e),
+	layout: H(ve),
+	"layout-dashboard": H(ye),
+	leads: H(z),
+	left: H(se),
+	link: H(be),
+	list: H(xe),
+	"list-checks": H(Se),
+	loader: H(Ce),
+	lock: H(we),
+	log: H(He),
+	"log-in": H(Te),
+	logout: H(Ee),
+	menu: H(Oe),
+	minus: H(ke),
+	moon: H(Ae),
+	more: H(je),
+	package: H(Me),
+	paperclip: H(Ne),
+	pipeline: H(k),
+	play: H(Pe),
+	"play-circle": H(Fe),
+	plus: H(Ie),
+	"plus-circle": H(Le),
+	"receipt-text": H(Re),
+	refresh: H(ze),
+	repeat: H(Be),
+	right: H(ce),
+	save: H(Ve),
+	sched: H(ae),
+	search: H(Ue),
+	settings: H(We),
+	"settings-2": H(Ge),
+	shield: H(Ke),
+	"shield-check": H(qe),
+	"shield-plus": H(Je),
+	"shopping-cart": H(Ye),
+	sliders: H(Xe),
+	"sliders-horizontal": H(Ze),
+	sort: H(s),
+	sparkle: H($e),
+	star: H(tt),
+	sun: H(nt),
+	tag: H(it),
+	tags: H(at),
+	tenant: H(f),
+	"toggle-right": H(ot),
+	trash: H(st),
+	"trash-2": H(ct),
+	"undo-2": H(ut),
+	up: H(le),
+	upload: H(dt),
+	user: H(ft),
+	"user-plus": H(pt),
+	users: H(z),
+	"users-round": H(mt),
+	"wallet-cards": H(ht),
+	warning: H(lt),
+	x: H(vt),
+	zap: H(B)
+}, W = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Set(), K = 0;
+function q() {
+	K += 1;
+	for (let e of G) e();
+}
+function yt(e) {
+	W.clear();
+	for (let [t, n] of Object.entries(e)) W.set(t, n);
+	q();
+}
+function J(e) {
+	return W.get(e);
+}
+function Y(e) {
+	return G.add(e), () => {
+		G.delete(e);
+	};
+}
+function X() {
+	return K;
+}
+//#endregion
+//#region src/components/shared/LucideIcon.tsx
+var Z = /* @__PURE__ */ new Map(), Q = null;
+function bt() {
+	return Q ||= import("lucide-react/dynamicIconImports").then((e) => e.default ?? e), Q;
+}
+function $({ name: n, size: r = 14, className: i, style: a }) {
+	let [o, s] = t(() => Z.get(n)), [c, l] = t(!1);
+	if (e(() => {
+		let e = Z.get(n);
+		if (e) {
+			s(() => e), l(!1);
+			return;
+		}
+		s(void 0), l(!1);
+		let t = !0;
+		return bt().then((e) => {
+			let r = e[n];
+			if (!r) {
+				t && l(!0);
+				return;
+			}
+			return r().then((e) => {
+				Z.set(n, e.default), t && (s(() => e.default), l(!1));
+			});
+		}), () => {
+			t = !1;
+		};
+	}, [n]), c) {
+		let e = U.folder;
+		return /* @__PURE__ */ V(e, {
+			size: r,
+			cls: i,
+			style: a
+		});
+	}
+	return o ? /* @__PURE__ */ V(o, {
+		size: r,
+		className: i,
+		style: a
+	}) : null;
+}
+//#endregion
+//#region src/components/shared/DynamicIcon.tsx
+var xt = "lucide:";
+function St({ name: e, size: t, className: r, style: i }) {
+	n(Y, X, X);
+	let a = typeof t == "number" ? t : typeof t == "string" ? parseFloat(t) : 14, o = J(e);
+	if (o) return /* @__PURE__ */ V(Ct, {
+		def: o,
+		size: a,
+		className: r,
+		style: i
+	});
+	let s = U[e];
+	return s ? /* @__PURE__ */ V(s, {
+		size: a,
+		cls: r,
+		style: i
+	}) : /* @__PURE__ */ V($, {
+		name: e.startsWith(xt) ? e.slice(7) : e,
+		size: a,
+		className: r,
+		style: i
+	});
+}
+function Ct({ def: e, size: t, className: n, style: r }) {
+	switch (e.kind) {
+		case "svg": return /* @__PURE__ */ V(wt, {
+			paths: e.paths,
+			size: t,
+			className: n,
+			style: r
+		});
+		case "url": return /* @__PURE__ */ V("img", {
+			src: e.src,
+			alt: "",
+			"aria-hidden": "true",
+			width: t,
+			height: t,
+			className: n,
+			style: r
+		});
+		case "lucide": return /* @__PURE__ */ V($, {
+			name: e.name,
+			size: t,
+			className: n,
+			style: r
+		});
+	}
+}
+function wt({ paths: e, size: t, className: n, style: r }) {
+	return /* @__PURE__ */ V("svg", {
+		width: t,
+		height: t,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: n,
+		style: r,
+		"aria-hidden": "true",
+		children: e.map((e, t) => /* @__PURE__ */ V("path", { d: e }, t))
+	});
+}
+//#endregion
+export { yt as a, X as i, $ as n, Y as o, J as r, U as s, St as t };

package/dist-lib/components/layout/Rail.d.ts

@@ -1,9 +1,8 @@
-import { type IconName } from "../../components/primitives";
 import type { AreaDef } from "../../types/schema";
 import type { PublicBranding } from "../../types/api";
 export interface RailAreaItem {
     id: string;
-    icon: IconName | undefined;
+    icon: string | undefined;
     label: string;
 }
 export interface RailProps {