@lattice-php/lattice 0.18.0 → 0.19.0

package/README.md

@@ -30,7 +30,7 @@ composer require lattice-php/lattice
 npm install @lattice-php/lattice
 ```
 
-See [Installation](https://latticephp.com/introduction/installation/) for the full setup.
+See [Installation](https://latticephp.com/introduction/installation/) for the full setup. No Node toolchain? Lattice also ships prebuilt assets — publish them with `php artisan lattice:assets` and skip the npm step entirely; see [No-build setup](https://latticephp.com/introduction/no-build/).
 
 ## Documentation
 

package/dist/core/index.js

@@ -2,9 +2,9 @@ import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyCompo
 import { RegistryContext, setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./registry-context.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./component-ref.js";
 import { withHeaders } from "./headers.js";
+import { toNodes } from "./nodes.js";
 import { CollapsedContext, useCollapsed } from "./collapsed-context.js";
 import { RenderNode, Renderer } from "./renderer.js";
 import { ApiError, apiFetch, apiJson, clearRemoteTokenCache, invalidateRemoteToken, remoteFetch, remoteJson, remoteToken } from "./api.js";
-import { toNodes } from "./nodes.js";
 import { dataBindings, isRecord, materializeNode, materializeProps, materializeSchema, rowValue } from "./materialize.js";
 export { ApiError, CollapsedContext, LATTICE_REF_HEADER, RegistryContext, RenderNode, Renderer, apiFetch, apiJson, clearRemoteTokenCache, createPlugin, createRegistry, dataBindings, eagerComponent, extendRegistry, invalidateRemoteToken, isRecord, lazyComponent, materializeNode, materializeProps, materializeSchema, remoteFetch, remoteJson, remoteToken, rowValue, setDefaultRegistry, toNodes, useCollapsed, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry, withHeaders, withRefHeader };

package/dist/core/nodes.d.ts

@@ -4,3 +4,8 @@ import { Node } from './types.js';
  * anything that isn't an object carrying a string `type`.
  */
 export declare function toNodes(value: unknown): Node[];
+/**
+ * Stable list key for a node: the reconciliation key, then the id, then a
+ * type-scoped index fallback so keyless template children never collide.
+ */
+export declare function nodeKey(node: Node, index: number): string;

package/dist/core/nodes.js

@@ -7,7 +7,14 @@ function toNodes(value) {
 	if (!Array.isArray(value)) return [];
 	return value.filter((node) => typeof node === "object" && node !== null && "type" in node && typeof node.type === "string");
 }
+/**
+* Stable list key for a node: the reconciliation key, then the id, then a
+* type-scoped index fallback so keyless template children never collide.
+*/
+function nodeKey(node, index) {
+	return node.key ?? node.id ?? `${node.type}-${index}`;
+}
 //#endregion
-export { toNodes };
+export { nodeKey, toNodes };
 
 //# sourceMappingURL=nodes.js.map

package/dist/core/nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodes.js","names":[],"sources":["../../resources/js/core/nodes.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\n\n/**\n * Keep only the well-formed component nodes from an untyped value, dropping\n * anything that isn't an object carrying a string `type`.\n */\nexport function toNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n"],"mappings":";;;;;AAMA,SAAgB,QAAQ,OAAwB;CAC9C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF"}
+{"version":3,"file":"nodes.js","names":[],"sources":["../../resources/js/core/nodes.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\n\n/**\n * Keep only the well-formed component nodes from an untyped value, dropping\n * anything that isn't an object carrying a string `type`.\n */\nexport function toNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\n/**\n * Stable list key for a node: the reconciliation key, then the id, then a\n * type-scoped index fallback so keyless template children never collide.\n */\nexport function nodeKey(node: Node, index: number): string {\n  return node.key ?? node.id ?? `${node.type}-${index}`;\n}\n"],"mappings":";;;;;AAMA,SAAgB,QAAQ,OAAwB;CAC9C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;;;;;AAMA,SAAgB,QAAQ,MAAY,OAAuB;CACzD,OAAO,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG;AAChD"}

package/dist/core/renderer.js

@@ -1,4 +1,5 @@
 import { useComponentRegistry } from "./registry-context.js";
+import { nodeKey } from "./nodes.js";
 import { useCollapsed } from "./collapsed-context.js";
 import { Suspense, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,9 +47,6 @@ function MissingComponent({ node }) {
 		})]
 	});
 }
-function nodeKey(node, index) {
-	return node.key ?? node.id ?? `${node.type}-${index}`;
-}
 function Renderer({ nodes }) {
 	return nodes.map((node, index) => /* @__PURE__ */ jsx(NodeRenderer, { node }, nodeKey(node, index)));
 }

package/dist/core/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { memo, Suspense } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { Node } from \"./types\";\nimport { useCollapsed } from \"./collapsed-context\";\nimport { useComponentRegistry } from \"./registry-context\";\n\nconst warnedMissingTypes = new Set<string>();\n\nfunction warnMissingComponent(type: string): void {\n  if (!import.meta.env.DEV || warnedMissingTypes.has(type)) {\n    return;\n  }\n\n  warnedMissingTypes.add(type);\n  console.warn(\n    `[lattice] No component registered for node type \"${type}\" — Lattice rendered a fallback ` +\n      \"placeholder. Likely causes: your app registry was not passed to \" +\n      \"createLatticeApp({ registry }), or the registry key does not match the PHP \" +\n      \"#[AsComponent]/AsField type.\",\n  );\n}\n\nfunction MissingComponentIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-md shrink-0\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <rect height=\"18\" rx=\"2\" strokeDasharray=\"4 3\" width=\"18\" x=\"3\" y=\"3\" />\n      <path d=\"M12 8v4\" />\n      <path d=\"M12 16h.01\" />\n    </svg>\n  );\n}\n\n/**\n * Fallback for a node whose type has no registered renderer. Always renders a\n * visible, muted marker — icon-only survives tight spots like table cells — so\n * the gap is never invisible. Shows the type inline in development; keeps it\n * screen-reader-only (plus a hover tooltip) in production.\n */\nfunction MissingComponent({ node }: { node: Node }) {\n  warnMissingComponent(node.type);\n\n  const label = `Missing component: ${node.type}`;\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1.5 align-middle text-lt-muted-fg\"\n      data-lattice-missing-component={node.type}\n      title={label}\n    >\n      <MissingComponentIcon />\n      <span className={import.meta.env.DEV ? \"text-sm\" : \"sr-only\"}>{label}</span>\n    </span>\n  );\n}\n\nfunction nodeKey(node: Node, index: number): string {\n  return node.key ?? node.id ?? `${node.type}-${index}`;\n}\n\nexport function Renderer({ nodes }: { nodes: Node[] }): ReactNode {\n  return nodes.map((node, index) => <NodeRenderer key={nodeKey(node, index)} node={node} />);\n}\n\nexport function RenderNode({ node }: { node: Node }): ReactNode {\n  return <NodeRenderer node={node} />;\n}\n\nconst NodeRenderer = memo(function NodeRenderer({ node }: { node: Node }) {\n  const collapsed = useCollapsed();\n  const registry = useComponentRegistry();\n  const registration = registry[node.type];\n\n  if (collapsed && node.props?.hideWhenCollapsed === true) {\n    return null;\n  }\n\n  if (!registration) {\n    return <MissingComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.schema?.length ? <Renderer nodes={node.schema} /> : null;\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const fallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : null;\n\n    return <Suspense fallback={fallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n});\n"],"mappings":";;;;;AAsBA,SAAS,uBAAuB;CAC9B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YARV;GAUE,oBAAC,QAAD;IAAM,QAAO;IAAK,IAAG;IAAI,iBAAgB;IAAM,OAAM;IAAK,GAAE;IAAI,GAAE;GAAK,CAAA;GACvE,oBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;GACnB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET;;;;;;;AAQA,SAAS,iBAAiB,EAAE,QAAwB;CAClD,KAA0B;CAE1B,MAAM,QAAQ,sBAAsB,KAAK;CAEzC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,kCAAgC,KAAK;EACrC,OAAO;YAHT,CAKE,oBAAC,sBAAD,CAAuB,CAAA,GACvB,oBAAC,QAAD;GAAM,WAA6C;aAAY;EAAY,CAAA,CACvE;;AAEV;AAEA,SAAS,QAAQ,MAAY,OAAuB;CAClD,OAAO,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG;AAChD;AAEA,SAAgB,SAAS,EAAE,SAAuC;CAChE,OAAO,MAAM,KAAK,MAAM,UAAU,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CAAC;AAC3F;AAEA,SAAgB,WAAW,EAAE,QAAmC;CAC9D,OAAO,oBAAC,cAAD,EAAoB,KAAO,CAAA;AACpC;AAEA,IAAM,eAAe,KAAK,SAAS,aAAa,EAAE,QAAwB;CACxE,MAAM,YAAY,aAAa;CAE/B,MAAM,eADW,qBACI,EAAS,KAAK;CAEnC,IAAI,aAAa,KAAK,OAAO,sBAAsB,MACjD,OAAO;CAGT,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAE/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UADjC,KAAK,QAAQ,SAAS,oBAAC,UAAD,EAAU,OAAO,KAAK,OAAS,CAAA,IAAI;CACJ,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAKvC,OAAO,oBAAC,UAAD;GAAoB,UAJV,oBACf,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IACtD;aAEkC;EAA4B,CAAA;CACpE;CAEA,OAAO;AACT,CAAC"}
+{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { memo, Suspense } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { Node } from \"./types\";\nimport { nodeKey } from \"./nodes\";\nimport { useCollapsed } from \"./collapsed-context\";\nimport { useComponentRegistry } from \"./registry-context\";\n\nconst warnedMissingTypes = new Set<string>();\n\nfunction warnMissingComponent(type: string): void {\n  if (!import.meta.env.DEV || warnedMissingTypes.has(type)) {\n    return;\n  }\n\n  warnedMissingTypes.add(type);\n  console.warn(\n    `[lattice] No component registered for node type \"${type}\" — Lattice rendered a fallback ` +\n      \"placeholder. Likely causes: your app registry was not passed to \" +\n      \"createLatticeApp({ registry }), or the registry key does not match the PHP \" +\n      \"#[AsComponent]/AsField type.\",\n  );\n}\n\nfunction MissingComponentIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-md shrink-0\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <rect height=\"18\" rx=\"2\" strokeDasharray=\"4 3\" width=\"18\" x=\"3\" y=\"3\" />\n      <path d=\"M12 8v4\" />\n      <path d=\"M12 16h.01\" />\n    </svg>\n  );\n}\n\n/**\n * Fallback for a node whose type has no registered renderer. Always renders a\n * visible, muted marker — icon-only survives tight spots like table cells — so\n * the gap is never invisible. Shows the type inline in development; keeps it\n * screen-reader-only (plus a hover tooltip) in production.\n */\nfunction MissingComponent({ node }: { node: Node }) {\n  warnMissingComponent(node.type);\n\n  const label = `Missing component: ${node.type}`;\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1.5 align-middle text-lt-muted-fg\"\n      data-lattice-missing-component={node.type}\n      title={label}\n    >\n      <MissingComponentIcon />\n      <span className={import.meta.env.DEV ? \"text-sm\" : \"sr-only\"}>{label}</span>\n    </span>\n  );\n}\n\nexport function Renderer({ nodes }: { nodes: Node[] }): ReactNode {\n  return nodes.map((node, index) => <NodeRenderer key={nodeKey(node, index)} node={node} />);\n}\n\nexport function RenderNode({ node }: { node: Node }): ReactNode {\n  return <NodeRenderer node={node} />;\n}\n\nconst NodeRenderer = memo(function NodeRenderer({ node }: { node: Node }) {\n  const collapsed = useCollapsed();\n  const registry = useComponentRegistry();\n  const registration = registry[node.type];\n\n  if (collapsed && node.props?.hideWhenCollapsed === true) {\n    return null;\n  }\n\n  if (!registration) {\n    return <MissingComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.schema?.length ? <Renderer nodes={node.schema} /> : null;\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const fallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : null;\n\n    return <Suspense fallback={fallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n});\n"],"mappings":";;;;;;AAuBA,SAAS,uBAAuB;CAC9B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YARV;GAUE,oBAAC,QAAD;IAAM,QAAO;IAAK,IAAG;IAAI,iBAAgB;IAAM,OAAM;IAAK,GAAE;IAAI,GAAE;GAAK,CAAA;GACvE,oBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;GACnB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET;;;;;;;AAQA,SAAS,iBAAiB,EAAE,QAAwB;CAClD,KAA0B;CAE1B,MAAM,QAAQ,sBAAsB,KAAK;CAEzC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,kCAAgC,KAAK;EACrC,OAAO;YAHT,CAKE,oBAAC,sBAAD,CAAuB,CAAA,GACvB,oBAAC,QAAD;GAAM,WAA6C;aAAY;EAAY,CAAA,CACvE;;AAEV;AAEA,SAAgB,SAAS,EAAE,SAAuC;CAChE,OAAO,MAAM,KAAK,MAAM,UAAU,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CAAC;AAC3F;AAEA,SAAgB,WAAW,EAAE,QAAmC;CAC9D,OAAO,oBAAC,cAAD,EAAoB,KAAO,CAAA;AACpC;AAEA,IAAM,eAAe,KAAK,SAAS,aAAa,EAAE,QAAwB;CACxE,MAAM,YAAY,aAAa;CAE/B,MAAM,eADW,qBACI,EAAS,KAAK;CAEnC,IAAI,aAAa,KAAK,OAAO,sBAAsB,MACjD,OAAO;CAGT,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAE/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UADjC,KAAK,QAAQ,SAAS,oBAAC,UAAD,EAAU,OAAO,KAAK,OAAS,CAAA,IAAI;CACJ,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAKvC,OAAO,oBAAC,UAAD;GAAoB,UAJV,oBACf,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IACtD;aAEkC;EAA4B,CAAA;CACpE;CAEA,OAAO;AACT,CAAC"}

package/dist/events/event-names.d.ts

@@ -7,9 +7,6 @@ export declare const LATTICE_EVENT: {
     readonly callout: "lattice:callout";
     readonly toast: "lattice:toast";
     readonly reloadComponent: "lattice:reload-component";
-    readonly reloadPage: "lattice:reload-page";
-    readonly redirect: "lattice:redirect";
-    readonly download: "lattice:download";
     readonly openModal: "lattice:open-modal";
     readonly closeModal: "lattice:close-modal";
     readonly resetForm: "lattice:reset-form";

package/dist/events/event-names.js

@@ -8,9 +8,6 @@ var LATTICE_EVENT = {
 	callout: "lattice:callout",
 	toast: "lattice:toast",
 	reloadComponent: "lattice:reload-component",
-	reloadPage: "lattice:reload-page",
-	redirect: "lattice:redirect",
-	download: "lattice:download",
 	openModal: "lattice:open-modal",
 	closeModal: "lattice:close-modal",
 	resetForm: "lattice:reset-form",

package/dist/events/event-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-names.js","names":[],"sources":["../../resources/js/events/event-names.ts"],"sourcesContent":["/**\n * Single source of truth for the `lattice:*` DOM events the runtime dispatches\n * and listens for. The built-in effect handlers in effects/registry.ts bridge\n * effects to these events; the rest are framework events with no PHP counterpart.\n */\nexport const LATTICE_EVENT = {\n  callout: \"lattice:callout\",\n  toast: \"lattice:toast\",\n  reloadComponent: \"lattice:reload-component\",\n  reloadPage: \"lattice:reload-page\",\n  redirect: \"lattice:redirect\",\n  download: \"lattice:download\",\n  openModal: \"lattice:open-modal\",\n  closeModal: \"lattice:close-modal\",\n  resetForm: \"lattice:reset-form\",\n  toggleSidebar: \"lattice:toggle-sidebar\",\n  appearanceChange: \"lattice:appearance-change\",\n  localeChange: \"lattice:locale-change\",\n  timezoneChange: \"lattice:timezone-change\",\n  actionError: \"lattice:action-error\",\n} as const;\n\nexport type ReloadComponentEvent = CustomEvent<{\n  component?: string;\n  type?: string;\n}>;\n"],"mappings":";;;;;;AAKA,IAAa,gBAAgB;CAC3B,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,YAAY;CACZ,UAAU;CACV,UAAU;CACV,WAAW;CACX,YAAY;CACZ,WAAW;CACX,eAAe;CACf,kBAAkB;CAClB,cAAc;CACd,gBAAgB;CAChB,aAAa;AACf"}
+{"version":3,"file":"event-names.js","names":[],"sources":["../../resources/js/events/event-names.ts"],"sourcesContent":["/**\n * Single source of truth for the `lattice:*` DOM events the runtime dispatches\n * and listens for. The built-in effect handlers in effects/registry.ts bridge\n * effects to these events; the rest are framework events with no PHP counterpart.\n */\nexport const LATTICE_EVENT = {\n  callout: \"lattice:callout\",\n  toast: \"lattice:toast\",\n  reloadComponent: \"lattice:reload-component\",\n  openModal: \"lattice:open-modal\",\n  closeModal: \"lattice:close-modal\",\n  resetForm: \"lattice:reset-form\",\n  toggleSidebar: \"lattice:toggle-sidebar\",\n  appearanceChange: \"lattice:appearance-change\",\n  localeChange: \"lattice:locale-change\",\n  timezoneChange: \"lattice:timezone-change\",\n  actionError: \"lattice:action-error\",\n} as const;\n\nexport type ReloadComponentEvent = CustomEvent<{\n  component?: string;\n  type?: string;\n}>;\n"],"mappings":";;;;;;AAKA,IAAa,gBAAgB;CAC3B,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,WAAW;CACX,YAAY;CACZ,WAAW;CACX,eAAe;CACf,kBAAkB;CAClB,cAAc;CACd,gBAAgB;CAChB,aAAa;AACf"}

package/dist/form/components/fields/rich-editor-field.js

@@ -14,6 +14,7 @@ import { Highlight } from "@tiptap/extension-highlight";
 import { Link } from "@tiptap/extension-link";
 import { TableKit } from "@tiptap/extension-table";
 import { TextAlign } from "@tiptap/extension-text-align";
+import { Placeholder } from "@tiptap/extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
 //#region resources/js/form/components/fields/rich-editor-field.tsx
@@ -299,7 +300,8 @@ var RichEditorField = ({ node }) => {
 			TableKit.configure({ table: { resizable: false } }),
 			Details,
 			DetailsSummary,
-			DetailsContent
+			DetailsContent,
+			Placeholder.configure({ placeholder: node.props.placeholder ?? "" })
 		],
 		content: initialContent,
 		editable: !locked,

package/dist/form/components/fields/rich-editor-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor-field.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nconst RichEditorField: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n\nexport default RichEditorField;\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor-field.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { Placeholder } from \"@tiptap/extensions\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nconst RichEditorField: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n      Placeholder.configure({ placeholder: node.props.placeholder ?? \"\" }),\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n\nexport default RichEditorField;\n"],"mappings":"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"}

package/dist/form/components/fields/row-item.js

@@ -1,4 +1,5 @@
 import { Icon } from "../../../icons/sprite.js";
+import { nodeKey } from "../../../core/nodes.js";
 import { RenderNode } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../../hooks/field-scope.js";
@@ -58,7 +59,7 @@ var RowItem = memo(function RowItem({ base, index, row, template, heading, reord
 			onChange: (field, value) => onField(index, field, value),
 			children: /* @__PURE__ */ jsx("div", {
 				className: "flex flex-col gap-4",
-				children: template.map((child) => /* @__PURE__ */ jsx(RenderNode, { node: child }, child.key ?? child.id))
+				children: template.map((child, childIndex) => /* @__PURE__ */ jsx(RenderNode, { node: child }, nodeKey(child, childIndex)))
 			})
 		})]
 	});

package/dist/form/components/fields/row-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-item.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-item.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ReactNode } from \"react\";\nimport { memo } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nexport function RowButton({\n  label,\n  testId,\n  onClick,\n  children,\n}: {\n  label: string;\n  testId: string;\n  onClick: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      data-test={testId}\n      className=\"text-lt-muted-fg hover:text-lt-fg\"\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n\ntype RowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  heading: string;\n  reorderable: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onRemove: (index: number) => void;\n  onMove: (index: number, delta: number) => void;\n  onDuplicate: (index: number) => void;\n};\n\n// Memoised so editing one row doesn't re-render its siblings. Its props are kept\n// referentially stable by the parent: `row` survives untouched via functional\n// store updates, and the handlers are `useCallback`-stable.\nexport const RowItem = memo(function RowItem({\n  base,\n  index,\n  row,\n  template,\n  heading,\n  reorderable,\n  isFirst,\n  isLast,\n  removable,\n  rowActions,\n  onField,\n  onRemove,\n  onMove,\n  onDuplicate,\n}: RowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-test={`repeater-${base}-row-${index}`}\n      className=\"rounded-lt border border-lt-border bg-lt-surface p-4\"\n    >\n      <div className=\"mb-2 flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-lt-muted-fg\">{heading}</span>\n        <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n          {reorderable && !isFirst && (\n            <RowButton\n              label=\"Move up\"\n              testId={`repeater-${base}-up-${index}`}\n              onClick={() => onMove(index, -1)}\n            >\n              <Icon name=\"arrow-up\" />\n            </RowButton>\n          )}\n          {reorderable && !isLast && (\n            <RowButton\n              label=\"Move down\"\n              testId={`repeater-${base}-down-${index}`}\n              onClick={() => onMove(index, 1)}\n            >\n              <Icon name=\"arrow-down\" />\n            </RowButton>\n          )}\n          <RowActions\n            actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n          />\n        </div>\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <div className=\"flex flex-col gap-4\">\n          {template.map((child) => (\n            <RenderNode key={child.key ?? child.id} node={child} />\n          ))}\n        </div>\n      </FieldScopeProvider>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAYA,SAAgB,UAAU,EACxB,OACA,QACA,SACA,YAMC;CACD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAU;EACD;EAER;CACK,CAAA;AAEZ;AAsBA,IAAa,UAAU,KAAK,SAAS,QAAQ,EAC3C,MACA,OACA,KACA,UACA,SACA,aACA,SACA,QACA,WACA,YACA,SACA,UACA,QACA,eACe;CACf,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAW,YAAY,KAAK,OAAO;EACnC,WAAU;YAFZ,CAIE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAwC;GAAc,CAAA,GACtE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,eAAe,CAAC,WACf,oBAAC,WAAD;MACE,OAAM;MACN,QAAQ,YAAY,KAAK,MAAM;MAC/B,eAAe,OAAO,OAAO,EAAE;gBAE/B,oBAAC,MAAD,EAAM,MAAK,WAAY,CAAA;KACd,CAAA;KAEZ,eAAe,CAAC,UACf,oBAAC,WAAD;MACE,OAAM;MACN,QAAQ,YAAY,KAAK,QAAQ;MACjC,eAAe,OAAO,OAAO,CAAC;gBAE9B,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;KAChB,CAAA;KAEb,oBAAC,YAAD,EACE,SAAS,gBAAgB,YAAY;MAAE;MAAO;MAAW;MAAU;MAAa;KAAE,CAAC,EACpF,CAAA;IACE;KACF;MAEL,oBAAC,oBAAD;GACQ;GACC;GACF;GACL,WAAW,OAAO,UAAU,QAAQ,OAAO,OAAO,KAAK;aAEvD,oBAAC,OAAD;IAAK,WAAU;cACZ,SAAS,KAAK,UACb,oBAAC,YAAD,EAAwC,MAAM,MAAQ,GAArC,MAAM,OAAO,MAAM,EAAkB,CACvD;GACE,CAAA;EACa,CAAA,CACjB;;AAET,CAAC"}
+{"version":3,"file":"row-item.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-item.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ReactNode } from \"react\";\nimport { memo } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { nodeKey } from \"@lattice-php/lattice/core/nodes\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nexport function RowButton({\n  label,\n  testId,\n  onClick,\n  children,\n}: {\n  label: string;\n  testId: string;\n  onClick: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      data-test={testId}\n      className=\"text-lt-muted-fg hover:text-lt-fg\"\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n\ntype RowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  heading: string;\n  reorderable: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onRemove: (index: number) => void;\n  onMove: (index: number, delta: number) => void;\n  onDuplicate: (index: number) => void;\n};\n\n// Memoised so editing one row doesn't re-render its siblings. Its props are kept\n// referentially stable by the parent: `row` survives untouched via functional\n// store updates, and the handlers are `useCallback`-stable.\nexport const RowItem = memo(function RowItem({\n  base,\n  index,\n  row,\n  template,\n  heading,\n  reorderable,\n  isFirst,\n  isLast,\n  removable,\n  rowActions,\n  onField,\n  onRemove,\n  onMove,\n  onDuplicate,\n}: RowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-test={`repeater-${base}-row-${index}`}\n      className=\"rounded-lt border border-lt-border bg-lt-surface p-4\"\n    >\n      <div className=\"mb-2 flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-lt-muted-fg\">{heading}</span>\n        <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n          {reorderable && !isFirst && (\n            <RowButton\n              label=\"Move up\"\n              testId={`repeater-${base}-up-${index}`}\n              onClick={() => onMove(index, -1)}\n            >\n              <Icon name=\"arrow-up\" />\n            </RowButton>\n          )}\n          {reorderable && !isLast && (\n            <RowButton\n              label=\"Move down\"\n              testId={`repeater-${base}-down-${index}`}\n              onClick={() => onMove(index, 1)}\n            >\n              <Icon name=\"arrow-down\" />\n            </RowButton>\n          )}\n          <RowActions\n            actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n          />\n        </div>\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <div className=\"flex flex-col gap-4\">\n          {template.map((child, childIndex) => (\n            <RenderNode key={nodeKey(child, childIndex)} node={child} />\n          ))}\n        </div>\n      </FieldScopeProvider>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAaA,SAAgB,UAAU,EACxB,OACA,QACA,SACA,YAMC;CACD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAU;EACD;EAER;CACK,CAAA;AAEZ;AAsBA,IAAa,UAAU,KAAK,SAAS,QAAQ,EAC3C,MACA,OACA,KACA,UACA,SACA,aACA,SACA,QACA,WACA,YACA,SACA,UACA,QACA,eACe;CACf,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAW,YAAY,KAAK,OAAO;EACnC,WAAU;YAFZ,CAIE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAwC;GAAc,CAAA,GACtE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,eAAe,CAAC,WACf,oBAAC,WAAD;MACE,OAAM;MACN,QAAQ,YAAY,KAAK,MAAM;MAC/B,eAAe,OAAO,OAAO,EAAE;gBAE/B,oBAAC,MAAD,EAAM,MAAK,WAAY,CAAA;KACd,CAAA;KAEZ,eAAe,CAAC,UACf,oBAAC,WAAD;MACE,OAAM;MACN,QAAQ,YAAY,KAAK,QAAQ;MACjC,eAAe,OAAO,OAAO,CAAC;gBAE9B,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;KAChB,CAAA;KAEb,oBAAC,YAAD,EACE,SAAS,gBAAgB,YAAY;MAAE;MAAO;MAAW;MAAU;MAAa;KAAE,CAAC,EACpF,CAAA;IACE;KACF;MAEL,oBAAC,oBAAD;GACQ;GACC;GACF;GACL,WAAW,OAAO,UAAU,QAAQ,OAAO,OAAO,KAAK;aAEvD,oBAAC,OAAD;IAAK,WAAU;cACZ,SAAS,KAAK,OAAO,eACpB,oBAAC,YAAD,EAA6C,MAAM,MAAQ,GAA1C,QAAQ,OAAO,UAAU,CAAiB,CAC5D;GACE,CAAA;EACa,CAAA,CACjB;;AAET,CAAC"}

package/dist/form/components/fields/table-rows.js

@@ -1,4 +1,5 @@
 import { Icon } from "../../../icons/sprite.js";
+import { nodeKey } from "../../../core/nodes.js";
 import { RenderNode } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../../hooks/field-scope.js";
@@ -73,8 +74,8 @@ var TableRowItem = memo(function TableRowItem({ base, index, row, template, span
 					"data-test": `table-row-${base}-${index}-span`,
 					className: "flex flex-col gap-2",
 					style: { gridColumn: `span ${columnCount}` },
-					children: template.map((child) => /* @__PURE__ */ jsx(RenderNode, { node: child }, child.key ?? child.id))
-				}) : template.map((child) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RenderNode, { node: child }) }, child.key ?? child.id)) })
+					children: template.map((child, childIndex) => /* @__PURE__ */ jsx(RenderNode, { node: child }, nodeKey(child, childIndex)))
+				}) : template.map((child, childIndex) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RenderNode, { node: child }) }, nodeKey(child, childIndex))) })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex items-center",

package/dist/form/components/fields/table-rows.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/table-rows.tsx"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/use-column-resizing\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { memo, useEffect, useMemo, useState } from \"react\";\nimport type { ColumnWidth, RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/row-layout-context\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowButton, RowItem } from \"./row-item\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nconst rowControlTrack = \"3rem\";\nconst rowActionTrack = \"3rem\";\nconst rowControlTracks = [rowControlTrack];\nconst rowActionTracks = [rowActionTrack];\nconst tableViewportQuery = \"(min-width: 768px)\";\n\nexport type TableColumn = { name: string; label: string; columnWidth: ColumnWidth };\n\ntype TableRowModel = {\n  key: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  heading?: string;\n};\n\nfunction tableViewportMatches(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return true;\n  }\n\n  return window.matchMedia(tableViewportQuery).matches;\n}\n\nfunction useTableViewport(): boolean {\n  const [matches, setMatches] = useState(tableViewportMatches);\n\n  useEffect(() => {\n    if (typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const query = window.matchMedia(tableViewportQuery);\n    const update = () => setMatches(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return matches;\n}\n\nexport function columnsFromSchema(nodes: Node[]): TableColumn[] {\n  return nodes.map((node) => {\n    const props = node.props as {\n      name: unknown;\n      label?: unknown;\n      columnWidth?: ColumnWidth | null;\n    };\n    return {\n      name: String(props.name),\n      label: String(props.label ?? props.name),\n      columnWidth: props.columnWidth ?? DEFAULT_COLUMN_WIDTH,\n    };\n  });\n}\n\ntype TableRowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  columnCount: number;\n  flipKey: string;\n  reorderable: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n};\n\nconst TableRowItem = memo(function TableRowItem({\n  base,\n  index,\n  row,\n  template,\n  span,\n  isFirst,\n  isLast,\n  columnCount,\n  flipKey,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n}: TableRowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      ref={(el) => registerRow?.(flipKey, el)}\n      data-flip-key={flipKey}\n      data-test={`table-row-${base}-${index}`}\n      className=\"grid grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\n    >\n      <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n        {reorderable && !isFirst && (\n          <RowButton\n            label=\"Move up\"\n            testId={`table-${base}-up-${index}`}\n            onClick={() => onMove(index, -1)}\n          >\n            <Icon name=\"arrow-up\" />\n          </RowButton>\n        )}\n        {reorderable && !isLast && (\n          <RowButton\n            label=\"Move down\"\n            testId={`table-${base}-down-${index}`}\n            onClick={() => onMove(index, 1)}\n          >\n            <Icon name=\"arrow-down\" />\n          </RowButton>\n        )}\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <TableCellProvider>\n          {span ? (\n            <div\n              data-test={`table-row-${base}-${index}-span`}\n              className=\"flex flex-col gap-2\"\n              style={{ gridColumn: `span ${columnCount}` }}\n            >\n              {template.map((child) => (\n                <RenderNode key={child.key ?? child.id} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child) => (\n              <div key={child.key ?? child.id}>\n                <RenderNode node={child} />\n              </div>\n            ))\n          )}\n        </TableCellProvider>\n      </FieldScopeProvider>\n\n      <div className=\"flex items-center\">\n        <RowActions\n          actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport function TableRows({\n  base,\n  columns,\n  rows,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n  resizableColumns = false,\n  resizeIndicator = false,\n}: {\n  base: string;\n  columns: TableColumn[];\n  rows: TableRowModel[];\n  reorderable: boolean;\n  removable: (index: number) => boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n  resizableColumns?: boolean;\n  resizeIndicator?: boolean;\n}) {\n  const { t } = useT(\"lattice\");\n  const isTableViewport = useTableViewport();\n  const sizingColumns = useMemo<SizableColumn[]>(\n    () =>\n      columns.map((column) => ({\n        key: column.name,\n        label: column.label,\n        width: column.columnWidth,\n      })),\n    [columns],\n  );\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resizeRootRef, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizableColumns,\n      columnGapPx: 12,\n      leadingTracks: rowControlTracks,\n      showIndicator: resizeIndicator,\n      storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : undefined,\n      trailingTracks: rowActionTracks,\n    });\n\n  if (!isTableViewport) {\n    return (\n      <div className=\"flex flex-col gap-3\">\n        {rows.map((row) => (\n          <div key={row.key} ref={(el) => registerRow?.(row.key, el)} data-flip-key={row.key}>\n            <RowItem\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              heading={row.heading ?? `#${row.index + 1}`}\n              reorderable={reorderable}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onRemove={onRemove}\n              onMove={onMove}\n              onDuplicate={onDuplicate}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"table.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"table.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto\">\n        <div\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\n            <div />\n            {columns.map((column, index) => (\n              <div\n                key={column.name}\n                className=\"relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg\"\n              >\n                {column.label}\n                {resizableColumns && <div {...getResizeHandleProps(sizingColumns[index])} />}\n              </div>\n            ))}\n            <div />\n          </div>\n\n          {rows.map((row) => (\n            <TableRowItem\n              key={row.key}\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              span={row.span}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              columnCount={columns.length}\n              flipKey={row.key}\n              reorderable={reorderable}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"table-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/table-rows.tsx"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { nodeKey } from \"@lattice-php/lattice/core/nodes\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/use-column-resizing\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { memo, useEffect, useMemo, useState } from \"react\";\nimport type { ColumnWidth, RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/row-layout-context\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowButton, RowItem } from \"./row-item\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nconst rowControlTrack = \"3rem\";\nconst rowActionTrack = \"3rem\";\nconst rowControlTracks = [rowControlTrack];\nconst rowActionTracks = [rowActionTrack];\nconst tableViewportQuery = \"(min-width: 768px)\";\n\nexport type TableColumn = { name: string; label: string; columnWidth: ColumnWidth };\n\ntype TableRowModel = {\n  key: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  heading?: string;\n};\n\nfunction tableViewportMatches(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return true;\n  }\n\n  return window.matchMedia(tableViewportQuery).matches;\n}\n\nfunction useTableViewport(): boolean {\n  const [matches, setMatches] = useState(tableViewportMatches);\n\n  useEffect(() => {\n    if (typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const query = window.matchMedia(tableViewportQuery);\n    const update = () => setMatches(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return matches;\n}\n\nexport function columnsFromSchema(nodes: Node[]): TableColumn[] {\n  return nodes.map((node) => {\n    const props = node.props as {\n      name: unknown;\n      label?: unknown;\n      columnWidth?: ColumnWidth | null;\n    };\n    return {\n      name: String(props.name),\n      label: String(props.label ?? props.name),\n      columnWidth: props.columnWidth ?? DEFAULT_COLUMN_WIDTH,\n    };\n  });\n}\n\ntype TableRowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  columnCount: number;\n  flipKey: string;\n  reorderable: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n};\n\nconst TableRowItem = memo(function TableRowItem({\n  base,\n  index,\n  row,\n  template,\n  span,\n  isFirst,\n  isLast,\n  columnCount,\n  flipKey,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n}: TableRowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      ref={(el) => registerRow?.(flipKey, el)}\n      data-flip-key={flipKey}\n      data-test={`table-row-${base}-${index}`}\n      className=\"grid grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\n    >\n      <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n        {reorderable && !isFirst && (\n          <RowButton\n            label=\"Move up\"\n            testId={`table-${base}-up-${index}`}\n            onClick={() => onMove(index, -1)}\n          >\n            <Icon name=\"arrow-up\" />\n          </RowButton>\n        )}\n        {reorderable && !isLast && (\n          <RowButton\n            label=\"Move down\"\n            testId={`table-${base}-down-${index}`}\n            onClick={() => onMove(index, 1)}\n          >\n            <Icon name=\"arrow-down\" />\n          </RowButton>\n        )}\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <TableCellProvider>\n          {span ? (\n            <div\n              data-test={`table-row-${base}-${index}-span`}\n              className=\"flex flex-col gap-2\"\n              style={{ gridColumn: `span ${columnCount}` }}\n            >\n              {template.map((child, childIndex) => (\n                <RenderNode key={nodeKey(child, childIndex)} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child, childIndex) => (\n              <div key={nodeKey(child, childIndex)}>\n                <RenderNode node={child} />\n              </div>\n            ))\n          )}\n        </TableCellProvider>\n      </FieldScopeProvider>\n\n      <div className=\"flex items-center\">\n        <RowActions\n          actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport function TableRows({\n  base,\n  columns,\n  rows,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n  resizableColumns = false,\n  resizeIndicator = false,\n}: {\n  base: string;\n  columns: TableColumn[];\n  rows: TableRowModel[];\n  reorderable: boolean;\n  removable: (index: number) => boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n  resizableColumns?: boolean;\n  resizeIndicator?: boolean;\n}) {\n  const { t } = useT(\"lattice\");\n  const isTableViewport = useTableViewport();\n  const sizingColumns = useMemo<SizableColumn[]>(\n    () =>\n      columns.map((column) => ({\n        key: column.name,\n        label: column.label,\n        width: column.columnWidth,\n      })),\n    [columns],\n  );\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resizeRootRef, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizableColumns,\n      columnGapPx: 12,\n      leadingTracks: rowControlTracks,\n      showIndicator: resizeIndicator,\n      storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : undefined,\n      trailingTracks: rowActionTracks,\n    });\n\n  if (!isTableViewport) {\n    return (\n      <div className=\"flex flex-col gap-3\">\n        {rows.map((row) => (\n          <div key={row.key} ref={(el) => registerRow?.(row.key, el)} data-flip-key={row.key}>\n            <RowItem\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              heading={row.heading ?? `#${row.index + 1}`}\n              reorderable={reorderable}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onRemove={onRemove}\n              onMove={onMove}\n              onDuplicate={onDuplicate}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"table.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"table.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto\">\n        <div\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\n            <div />\n            {columns.map((column, index) => (\n              <div\n                key={column.name}\n                className=\"relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg\"\n              >\n                {column.label}\n                {resizableColumns && <div {...getResizeHandleProps(sizingColumns[index])} />}\n              </div>\n            ))}\n            <div />\n          </div>\n\n          {rows.map((row) => (\n            <TableRowItem\n              key={row.key}\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              span={row.span}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              columnCount={columns.length}\n              flipKey={row.key}\n              reorderable={reorderable}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/icons/icon-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-renderer.js","names":[],"sources":["../../resources/js/icons/icon-renderer.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Icon, useSprite } from \"./sprite\";\n\nexport type IconRendererProps = {\n  className?: string;\n  icon: string;\n};\n\nexport type IconRendererFunction = (props: IconRendererProps) => ReactNode;\n\ntype IconRendererProviderProps = {\n  children: ReactNode;\n  mode?: \"replace\" | \"stack\";\n  renderer: IconRendererFunction;\n};\n\nconst IconRenderersContext = createContext<IconRendererFunction[]>([]);\nconst loggedMissingIcons = new Set<string>();\n\nexport function IconRendererProvider({\n  children,\n  mode = \"stack\",\n  renderer,\n}: IconRendererProviderProps) {\n  const parentRenderers = useContext(IconRenderersContext);\n  const renderers = useMemo(\n    () => (mode === \"replace\" ? [renderer] : [renderer, ...parentRenderers]),\n    [mode, parentRenderers, renderer],\n  );\n\n  return (\n    <IconRenderersContext.Provider value={renderers}>{children}</IconRenderersContext.Provider>\n  );\n}\n\nexport function IconRenderer({ className, icon }: IconRendererProps) {\n  const renderers = useContext(IconRenderersContext);\n  const { ids } = useSprite();\n\n  // Custom renderers (the override stack) take precedence over the sprite.\n  for (const renderer of renderers) {\n    const rendered = renderer({ className, icon });\n\n    if (rendered !== null && rendered !== undefined && rendered !== false) {\n      return rendered;\n    }\n  }\n\n  // When the sprite is wired and the icon is genuinely absent, show a visible\n  // marker. When `ids` is unknown (not yet wired), optimistically emit the\n  // sprite reference rather than crying wolf.\n  if (ids && !ids.includes(icon)) {\n    logMissingIcon(icon);\n    return <MissingIcon className={className} />;\n  }\n\n  return <Icon className={className} name={icon} />;\n}\n\nfunction MissingIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\"size-lt-icon-md text-lt-muted-fg\", className)}\n      data-lattice-missing-icon=\"\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n      <path d=\"M12 17h.01\" />\n    </svg>\n  );\n}\n\nfunction logMissingIcon(icon: string): void {\n  if (!import.meta.env.DEV || loggedMissingIcons.has(icon)) {\n    return;\n  }\n\n  loggedMissingIcons.add(icon);\n  console.log(`[Lattice] Missing icon renderer for \"${icon}\".`);\n}\n"],"mappings":";;;;;AAkBA,IAAM,uBAAuB,cAAsC,CAAC,CAAC;AAGrE,SAAgB,qBAAqB,EACnC,UACA,OAAO,SACP,YAC4B;CAC5B,MAAM,kBAAkB,WAAW,oBAAoB;CACvD,MAAM,YAAY,cACT,SAAS,YAAY,CAAC,QAAQ,IAAI,CAAC,UAAU,GAAG,eAAe,GACtE;EAAC;EAAM;EAAiB;CAAQ,CAClC;CAEA,OACE,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAY;CAAwC,CAAA;AAE9F;AAEA,SAAgB,aAAa,EAAE,WAAW,QAA2B;CACnE,MAAM,YAAY,WAAW,oBAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU;CAG1B,KAAK,MAAM,YAAY,WAAW;EAChC,MAAM,WAAW,SAAS;GAAE;GAAW;EAAK,CAAC;EAE7C,IAAI,aAAa,QAAQ,aAAa,KAAA,KAAa,aAAa,OAC9D,OAAO;CAEX;CAKA,IAAI,OAAO,CAAC,IAAI,SAAS,IAAI,GAE3B,OAAO,oBAAC,aAAD,EAAwB,UAAY,CAAA;CAG7C,OAAO,oBAAC,MAAD;EAAiB;EAAW,MAAM;CAAO,CAAA;AAClD;AAEA,SAAS,YAAY,EAAE,aAAqC;CAC1D,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,oCAAoC,SAAS;EAC3D,6BAA0B;EAC1B,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YATV;GAWE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAM,CAAA;GAChC,oBAAC,QAAD,EAAM,GAAE,uCAAwC,CAAA;GAChD,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET"}
+{"version":3,"file":"icon-renderer.js","names":[],"sources":["../../resources/js/icons/icon-renderer.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Icon, useSprite } from \"./sprite\";\n\nexport type IconRendererProps = {\n  className?: string;\n  icon: string;\n};\n\nexport type IconRendererFunction = (props: IconRendererProps) => ReactNode;\n\ntype IconRendererProviderProps = {\n  children: ReactNode;\n  mode?: \"replace\" | \"stack\";\n  renderer: IconRendererFunction;\n};\n\nconst IconRenderersContext = createContext<IconRendererFunction[]>([]);\nconst loggedMissingIcons = new Set<string>();\n\nexport function IconRendererProvider({\n  children,\n  mode = \"stack\",\n  renderer,\n}: IconRendererProviderProps) {\n  const parentRenderers = useContext(IconRenderersContext);\n  const renderers = useMemo(\n    () => (mode === \"replace\" ? [renderer] : [renderer, ...parentRenderers]),\n    [mode, parentRenderers, renderer],\n  );\n\n  return (\n    <IconRenderersContext.Provider value={renderers}>{children}</IconRenderersContext.Provider>\n  );\n}\n\nexport function IconRenderer({ className, icon }: IconRendererProps) {\n  const renderers = useContext(IconRenderersContext);\n  const { ids } = useSprite();\n\n  for (const renderer of renderers) {\n    const rendered = renderer({ className, icon });\n\n    if (rendered !== null && rendered !== undefined && rendered !== false) {\n      return rendered;\n    }\n  }\n\n  // When the sprite is wired and the icon is genuinely absent, show a visible\n  // marker. When `ids` is unknown (not yet wired), optimistically emit the\n  // sprite reference rather than crying wolf.\n  if (ids && !ids.includes(icon)) {\n    logMissingIcon(icon);\n    return <MissingIcon className={className} />;\n  }\n\n  return <Icon className={className} name={icon} />;\n}\n\nfunction MissingIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\"size-lt-icon-md text-lt-muted-fg\", className)}\n      data-lattice-missing-icon=\"\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n      <path d=\"M12 17h.01\" />\n    </svg>\n  );\n}\n\nfunction logMissingIcon(icon: string): void {\n  if (!import.meta.env.DEV || loggedMissingIcons.has(icon)) {\n    return;\n  }\n\n  loggedMissingIcons.add(icon);\n  console.log(`[Lattice] Missing icon renderer for \"${icon}\".`);\n}\n"],"mappings":";;;;;AAkBA,IAAM,uBAAuB,cAAsC,CAAC,CAAC;AAGrE,SAAgB,qBAAqB,EACnC,UACA,OAAO,SACP,YAC4B;CAC5B,MAAM,kBAAkB,WAAW,oBAAoB;CACvD,MAAM,YAAY,cACT,SAAS,YAAY,CAAC,QAAQ,IAAI,CAAC,UAAU,GAAG,eAAe,GACtE;EAAC;EAAM;EAAiB;CAAQ,CAClC;CAEA,OACE,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAY;CAAwC,CAAA;AAE9F;AAEA,SAAgB,aAAa,EAAE,WAAW,QAA2B;CACnE,MAAM,YAAY,WAAW,oBAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU;CAE1B,KAAK,MAAM,YAAY,WAAW;EAChC,MAAM,WAAW,SAAS;GAAE;GAAW;EAAK,CAAC;EAE7C,IAAI,aAAa,QAAQ,aAAa,KAAA,KAAa,aAAa,OAC9D,OAAO;CAEX;CAKA,IAAI,OAAO,CAAC,IAAI,SAAS,IAAI,GAE3B,OAAO,oBAAC,aAAD,EAAwB,UAAY,CAAA;CAG7C,OAAO,oBAAC,MAAD;EAAiB;EAAW,MAAM;CAAO,CAAA;AAClD;AAEA,SAAS,YAAY,EAAE,aAAqC;CAC1D,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,oCAAoC,SAAS;EAC3D,6BAA0B;EAC1B,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YATV;GAWE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAM,CAAA;GAChC,oBAAC,QAAD,EAAM,GAAE,uCAAwC,CAAA;GAChD,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET"}

package/dist/lattice.css

@@ -27,7 +27,6 @@
   --lt-success-fg: var(--success-foreground, oklch(0.985 0 0));
   --lt-info: var(--info, oklch(0.62 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  /* Interaction states (hover / active / disabled) */
   --lt-primary-hover: var(--primary-hover, oklch(0.43 0.092 182));
   --lt-primary-active: var(--primary-active, oklch(0.39 0.092 182));
   --lt-danger-hover: var(--destructive-hover, oklch(0.53 0.21 27.3));
@@ -62,15 +61,14 @@
   --lt-control-h-lg: 2.5rem;
 
   /* Table cell padding — table density lever */
-  --lt-table-cell-x: calc(var(--spacing) * 4); /* 1rem */
-  --lt-table-cell-y: calc(var(--spacing) * 4); /* 1rem */
+  --lt-table-cell-x: calc(var(--spacing) * 4);
+  --lt-table-cell-y: calc(var(--spacing) * 4);
 
   --lt-font-weight-normal: 400;
   --lt-font-weight-medium: 500;
   --lt-font-weight-semibold: 600;
   --lt-font-weight-bold: 700;
 
-  /* Elevation */
   --lt-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
   --lt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
   --lt-shadow-md:
@@ -78,7 +76,6 @@
   --lt-shadow-lg:
     0 8px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.08);
 
-  /* Z-index scale */
   --lt-z-dropdown: 1000;
   --lt-z-sticky: 1100;
   --lt-z-overlay: 1200;
@@ -86,17 +83,15 @@
   --lt-z-popover: 1400;
   --lt-z-toast: 1500;
 
-  /* Motion */
   --lt-duration-fast: 120ms;
   --lt-duration-base: 160ms;
 
-  /* Layout dimensions */
   --lt-sidebar-w: 16rem;
   --lt-sidebar-w-collapsed: 4rem;
   --lt-container-max: 80rem;
 
   /* Card / section content inset — the gutter apps can break out of */
-  --lt-gutter: calc(var(--spacing) * 6); /* 1.5rem */
+  --lt-gutter: calc(var(--spacing) * 6);
 
   color-scheme: light;
 }
@@ -129,7 +124,6 @@
   --lt-info: var(--info, oklch(0.7 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
 
-  /* Interaction states (dark) */
   --lt-primary-hover: var(--primary-hover, oklch(0.79 0.105 182));
   --lt-primary-active: var(--primary-active, oklch(0.84 0.105 182));
   --lt-danger-hover: var(--destructive-hover, oklch(0.47 0.13 26));
@@ -219,7 +213,6 @@
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
 
-  /* Base spacing unit */
   --spacing: 0.25rem;
 
   --text-xs: 0.625rem;
@@ -402,6 +395,15 @@
   margin: calc(var(--spacing) * 2) 0;
 }
 
+/* TipTap renders the empty-editor placeholder via this attribute hook. */
+.lattice-prose :where(p.is-editor-empty:first-child)::before {
+  content: attr(data-placeholder);
+  color: var(--lt-muted-fg);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
 .lattice-prose :where(ul) {
   list-style: disc;
   padding-left: calc(var(--spacing) * 6);

package/dist/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action/plugin\";\nimport { chatComponents } from \"./chat/plugin\";\nimport { uiComponents } from \"./ui/plugin\";\nimport { formComponents } from \"./form/plugin\";\nimport { layoutComponents } from \"./layout\";\nimport { notificationsComponents } from \"./notifications/plugin\";\nimport { remoteComponents } from \"./remote/plugin\";\nimport { tableComponents } from \"./table/plugin\";\n\nexport const registry = createRegistry(\n  uiComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatComponents,\n  notificationsComponents,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;;AAUA,IAAa,WAAW,eACtB,cACA,kBACA,gBACA,kBACA,iBACA,gBACA,yBACA,gBACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action/plugin\";\nimport { chatComponents } from \"./chat/plugin\";\nimport { uiComponents } from \"./ui/plugin\";\nimport { formComponents } from \"./form/plugin\";\nimport { layoutComponents } from \"./layout/plugin\";\nimport { notificationsComponents } from \"./notifications/plugin\";\nimport { remoteComponents } from \"./remote/plugin\";\nimport { tableComponents } from \"./table/plugin\";\n\nexport const registry = createRegistry(\n  uiComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatComponents,\n  notificationsComponents,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;;AAUA,IAAa,WAAW,eACtB,cACA,kBACA,gBACA,kBACA,iBACA,gBACA,yBACA,gBACF"}

package/dist/ui/collapsible.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
+import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { nodeIdentity, prefixedTestId } from "../core/test-id.js";
 import { InfoTooltip } from "./info-tooltip.js";
-import { toNodes } from "../core/nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/collapsible.tsx

package/dist/ui/fragment.js

@@ -1,8 +1,8 @@
 import { LATTICE_EVENT } from "../events/event-names.js";
+import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { apiJson } from "../core/api.js";
 import { Skeleton } from "./skeleton.js";
-import { toNodes } from "../core/nodes.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/fragment.tsx

package/dist/ui/section.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
+import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { nodeIdentity, prefixedTestId } from "../core/test-id.js";
 import { InfoTooltip } from "./info-tooltip.js";
-import { toNodes } from "../core/nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/section.tsx

package/dist/ui/tooltip.js

@@ -1,7 +1,7 @@
+import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InfoTooltip } from "./info-tooltip.js";
-import { toNodes } from "../core/nodes.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/tooltip.tsx
 var TooltipComponent = ({ node }) => {