@lattice-php/lattice 0.17.2 → 0.18.0

package/dist/core/registry.d.ts

@@ -1,7 +1,8 @@
 import { LazyExoticComponent } from 'react';
-import { RendererComponent, RendererComponentModule } from './types';
-import { ColumnRegistry } from '../table/registry';
-import { EffectHandlerRegistry } from '../effects/registry';
+import { RendererComponent, RendererComponentModule } from './types.js';
+import { EffectHandlerRegistry } from '../effects/registry.js';
+import { ColumnRegistry } from '../table/registry.js';
+import { ComponentPropsMap } from '../types/generated.js';
 export type EagerComponentRegistration = {
     component: RendererComponent;
     mode: "eager";
@@ -14,6 +15,7 @@ export type LazyComponentRegistration = {
 };
 export type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;
 export type ComponentRegistry = Record<string, ComponentRegistration>;
+export type ComponentRegistryFor<TTypes extends keyof ComponentPropsMap & string> = Record<TTypes, ComponentRegistration>;
 export type Plugin = {
     name: string;
     components?: ComponentRegistry;

package/dist/core/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/core/registry.ts"],"sourcesContent":["import { lazy } from \"react\";\nimport type { LazyExoticComponent } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"./types\";\nimport type { ColumnRegistry } from \"../table/registry\";\nimport type { EffectHandlerRegistry } from \"../effects/registry\";\n\nexport type EagerComponentRegistration = {\n  component: RendererComponent;\n  mode: \"eager\";\n};\n\nexport type LazyComponentRegistration = {\n  component: LazyExoticComponent<RendererComponent>;\n  fallback?: RendererComponent;\n  load: () => Promise<RendererComponentModule>;\n  mode: \"lazy\";\n};\n\nexport type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;\n\nexport type ComponentRegistry = Record<string, ComponentRegistration>;\n\nexport type Plugin = {\n  name: string;\n  components?: ComponentRegistry;\n  columns?: ColumnRegistry;\n  effects?: EffectHandlerRegistry;\n};\n\nexport type Registry = {\n  components: ComponentRegistry;\n  columns: ColumnRegistry;\n  effects: EffectHandlerRegistry;\n};\n\nexport type LazyComponentOptions<TType extends string> = {\n  fallback?: RendererComponent<TType>;\n};\n\nexport function eagerComponent<TType extends string>(\n  component: RendererComponent<TType>,\n): EagerComponentRegistration {\n  return {\n    component: component as unknown as RendererComponent,\n    mode: \"eager\",\n  };\n}\n\nexport function lazyComponent<TType extends string>(\n  load: () => Promise<RendererComponentModule<TType>>,\n  options: LazyComponentOptions<TType> = {},\n): LazyComponentRegistration {\n  const erasedLoader = load as unknown as () => Promise<RendererComponentModule>;\n\n  return {\n    component: lazy(erasedLoader),\n    fallback: options.fallback as RendererComponent | undefined,\n    load: erasedLoader,\n    mode: \"lazy\",\n  };\n}\n\nexport function createPlugin(plugin: Plugin): Plugin {\n  return plugin;\n}\n\nexport function createRegistry(...plugins: Plugin[]): Registry {\n  return plugins.reduce<Registry>(\n    (registry, plugin) => ({\n      components: { ...registry.components, ...plugin.components },\n      columns: { ...registry.columns, ...plugin.columns },\n      effects: { ...registry.effects, ...plugin.effects },\n    }),\n    { components: {}, columns: {}, effects: {} },\n  );\n}\n\nexport function extendRegistry(registry: Registry, ...plugins: Plugin[]): Registry {\n  const merged = createRegistry(...plugins);\n\n  return {\n    components: { ...registry.components, ...merged.components },\n    columns: { ...registry.columns, ...merged.columns },\n    effects: { ...registry.effects, ...merged.effects },\n  };\n}\n"],"mappings":";;AAuCA,SAAgB,eACd,WAC4B;CAC5B,OAAO;EACM;EACX,MAAM;CACR;AACF;AAEA,SAAgB,cACd,MACA,UAAuC,CAAC,GACb;CAC3B,MAAM,eAAe;CAErB,OAAO;EACL,WAAW,KAAK,YAAY;EAC5B,UAAU,QAAQ;EAClB,MAAM;EACN,MAAM;CACR;AACF;AAEA,SAAgB,aAAa,QAAwB;CACnD,OAAO;AACT;AAEA,SAAgB,eAAe,GAAG,SAA6B;CAC7D,OAAO,QAAQ,QACZ,UAAU,YAAY;EACrB,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD,IACA;EAAE,YAAY,CAAC;EAAG,SAAS,CAAC;EAAG,SAAS,CAAC;CAAE,CAC7C;AACF;AAEA,SAAgB,eAAe,UAAoB,GAAG,SAA6B;CACjF,MAAM,SAAS,eAAe,GAAG,OAAO;CAExC,OAAO;EACL,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD;AACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/core/registry.ts"],"sourcesContent":["import { lazy } from \"react\";\nimport type { LazyExoticComponent } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"./types\";\nimport type { EffectHandlerRegistry } from \"@lattice-php/lattice/effects/registry\";\nimport type { ColumnRegistry } from \"@lattice-php/lattice/table/registry\";\nimport type { ComponentPropsMap } from \"@lattice-php/lattice/types/generated\";\n\nexport type EagerComponentRegistration = {\n  component: RendererComponent;\n  mode: \"eager\";\n};\n\nexport type LazyComponentRegistration = {\n  component: LazyExoticComponent<RendererComponent>;\n  fallback?: RendererComponent;\n  load: () => Promise<RendererComponentModule>;\n  mode: \"lazy\";\n};\n\nexport type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;\n\nexport type ComponentRegistry = Record<string, ComponentRegistration>;\n\nexport type ComponentRegistryFor<TTypes extends keyof ComponentPropsMap & string> = Record<\n  TTypes,\n  ComponentRegistration\n>;\n\nexport type Plugin = {\n  name: string;\n  components?: ComponentRegistry;\n  columns?: ColumnRegistry;\n  effects?: EffectHandlerRegistry;\n};\n\nexport type Registry = {\n  components: ComponentRegistry;\n  columns: ColumnRegistry;\n  effects: EffectHandlerRegistry;\n};\n\nexport type LazyComponentOptions<TType extends string> = {\n  fallback?: RendererComponent<TType>;\n};\n\nexport function eagerComponent<TType extends string>(\n  component: RendererComponent<TType>,\n): EagerComponentRegistration {\n  return {\n    component: component as unknown as RendererComponent,\n    mode: \"eager\",\n  };\n}\n\nexport function lazyComponent<TType extends string>(\n  load: () => Promise<RendererComponentModule<TType>>,\n  options: LazyComponentOptions<TType> = {},\n): LazyComponentRegistration {\n  const erasedLoader = load as unknown as () => Promise<RendererComponentModule>;\n\n  return {\n    component: lazy(erasedLoader),\n    fallback: options.fallback as RendererComponent | undefined,\n    load: erasedLoader,\n    mode: \"lazy\",\n  };\n}\n\nexport function createPlugin(plugin: Plugin): Plugin {\n  return plugin;\n}\n\nexport function createRegistry(...plugins: Plugin[]): Registry {\n  return plugins.reduce<Registry>(\n    (registry, plugin) => ({\n      components: { ...registry.components, ...plugin.components },\n      columns: { ...registry.columns, ...plugin.columns },\n      effects: { ...registry.effects, ...plugin.effects },\n    }),\n    { components: {}, columns: {}, effects: {} },\n  );\n}\n\nexport function extendRegistry(registry: Registry, ...plugins: Plugin[]): Registry {\n  const merged = createRegistry(...plugins);\n\n  return {\n    components: { ...registry.components, ...merged.components },\n    columns: { ...registry.columns, ...merged.columns },\n    effects: { ...registry.effects, ...merged.effects },\n  };\n}\n"],"mappings":";;AA6CA,SAAgB,eACd,WAC4B;CAC5B,OAAO;EACM;EACX,MAAM;CACR;AACF;AAEA,SAAgB,cACd,MACA,UAAuC,CAAC,GACb;CAC3B,MAAM,eAAe;CAErB,OAAO;EACL,WAAW,KAAK,YAAY;EAC5B,UAAU,QAAQ;EAClB,MAAM;EACN,MAAM;CACR;AACF;AAEA,SAAgB,aAAa,QAAwB;CACnD,OAAO;AACT;AAEA,SAAgB,eAAe,GAAG,SAA6B;CAC7D,OAAO,QAAQ,QACZ,UAAU,YAAY;EACrB,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD,IACA;EAAE,YAAY,CAAC;EAAG,SAAS,CAAC;EAAG,SAAS,CAAC;CAAE,CAC7C;AACF;AAEA,SAAgB,eAAe,UAAoB,GAAG,SAA6B;CACjF,MAAM,SAAS,eAAe,GAAG,OAAO;CAExC,OAAO;EACL,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD;AACF"}

package/dist/core/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Node } from './types';
+import { Node } from './types.js';
 export declare function Renderer({ nodes }: {
     nodes: Node[];
 }): ReactNode;

package/dist/core/renderer.js

@@ -1,6 +1,6 @@
 import { useComponentRegistry } from "./registry-context.js";
 import { useCollapsed } from "./collapsed-context.js";
-import { Suspense } from "react";
+import { Suspense, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/renderer.tsx
 function MissingComponentIcon() {
@@ -55,7 +55,7 @@ function Renderer({ nodes }) {
 function RenderNode({ node }) {
 	return /* @__PURE__ */ jsx(NodeRenderer, { node });
 }
-function NodeRenderer({ node }) {
+var NodeRenderer = memo(function NodeRenderer({ node }) {
 	const collapsed = useCollapsed();
 	const registration = useComponentRegistry()[node.type];
 	if (collapsed && node.props?.hideWhenCollapsed === true) return null;
@@ -76,7 +76,7 @@ function NodeRenderer({ node }) {
 		});
 	}
 	return renderedComponent;
-}
+});
 //#endregion
 export { RenderNode, Renderer };
 

package/dist/core/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { 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\nfunction 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,SAAS,aAAa,EAAE,QAAwB;CAC9C,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"}
+{"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"}

package/dist/core/test-id.d.ts

@@ -1,4 +1,4 @@
-import { Node } from './types';
+import { Node } from './types.js';
 type IdentifiedNode = Pick<Node, "id" | "key">;
 export declare function testIdentity(value: string | null | undefined): string | undefined;
 export declare function nodeIdentity(node: IdentifiedNode): string | undefined;

package/dist/core/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
-import { ComponentPropsMap, NodeType, Option, PageContainer as KnownPageContainer, WireNode, ListenerPayload } from '../types/generated';
+import { ComponentPropsMap, NodeType, Option, PageContainer as KnownPageContainer, WireNode, ListenerPayload } from '../types/generated.js';
 export type { KnownPageContainer, NodeType, Option, WireNode };
 export type NodeProps = Record<string, unknown>;
 export type CommonNodeProps = {

package/dist/create-app.d.ts

@@ -1,8 +1,8 @@
 import { createInertiaApp } from '@inertiajs/react';
 import { ReactElement } from 'react';
-import { Plugin, Registry } from './core/registry';
-import { SpriteValue } from './icons/sprite';
-import { CreateLayoutResolverOptions, PageModules } from './inertia';
+import { Plugin, Registry } from './core/registry.js';
+import { SpriteValue } from './icons/sprite.js';
+import { CreateLayoutResolverOptions, PageModules } from './inertia.js';
 type InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;
 export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layout" | "setup" | "withApp" | "pages"> & {
     registry?: Registry;

package/dist/effects/dispatch.d.ts

@@ -1,5 +1,5 @@
-import { ActionResult, Effect } from '../types/generated';
-import { EffectHandlerRegistry } from './registry';
+import { ActionResult, Effect } from '../types/generated.js';
+import { EffectHandlerRegistry } from './registry.js';
 export type ActionEffect = Effect;
 export type ActionResponse = Partial<ActionResult>;
 /**

package/dist/effects/registry.d.ts

@@ -1,5 +1,5 @@
-import { ResolveProps } from '../core/types';
-import { Effect, EffectPropsMap } from '../types/generated';
+import { ResolveProps } from '../core/types.js';
+import { Effect, EffectPropsMap } from '../types/generated.js';
 /**
  * Consumer apps augment this via `declare module "@lattice-php/lattice"` to type
  * their custom effects' payloads; built-ins resolve through `EffectPropsMap`. The
@@ -13,6 +13,7 @@ export type EffectOf<TType extends string> = string extends TType ? Effect : {
 } & EffectPayloadOf<TType>;
 export type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;
 export type EffectHandlerRegistry = Record<string, EffectHandler>;
+export type EffectHandlerRegistryFor<TTypes extends keyof EffectPropsMap & string> = Record<TTypes, EffectHandler>;
 /**
  * Author a handler against `EffectHandler<"my.type">` for a typed payload, then
  * register it through this — it erases the type parameter for the loose registry.
@@ -22,6 +23,6 @@ export declare function effectHandler<TType extends string>(_type: TType, fn: Ef
  * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events
  * that toast/callout/modal/fragment/form subscribe to.
  */
-export declare const builtinEffectHandlers: EffectHandlerRegistry;
+export declare const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string>;
 export declare function mergeEffectHandlers(...registries: Array<EffectHandlerRegistry | undefined>): EffectHandlerRegistry;
 export {};

package/dist/effects/registry.js

@@ -25,17 +25,17 @@ function bridge(event) {
 * that toast/callout/modal/fragment/form subscribe to.
 */
 var builtinEffectHandlers = {
-	reloadPage: () => router.reload(),
+	"reload-page": () => router.reload(),
 	redirect: effectHandler("redirect", (effect) => router.visit(effect.url)),
 	download: effectHandler("download", (effect) => triggerDownload(effect.url)),
-	localeChange: effectHandler("localeChange", (effect) => setLocale(effect.locale)),
+	"locale-change": effectHandler("locale-change", (effect) => setLocale(effect.locale)),
 	toast: bridge(LATTICE_EVENT.toast),
 	callout: bridge(LATTICE_EVENT.callout),
-	reloadComponent: bridge(LATTICE_EVENT.reloadComponent),
-	openModal: bridge(LATTICE_EVENT.openModal),
-	closeModal: bridge(LATTICE_EVENT.closeModal),
-	resetForm: bridge(LATTICE_EVENT.resetForm),
-	toggleSidebar: bridge(LATTICE_EVENT.toggleSidebar)
+	"reload-component": bridge(LATTICE_EVENT.reloadComponent),
+	"open-modal": bridge(LATTICE_EVENT.openModal),
+	"close-modal": bridge(LATTICE_EVENT.closeModal),
+	"reset-form": bridge(LATTICE_EVENT.resetForm),
+	"toggle-sidebar": bridge(LATTICE_EVENT.toggleSidebar)
 };
 function mergeEffectHandlers(...registries) {
 	return registries.reduce((merged, registry) => ({

package/dist/effects/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type { ResolveProps } from \"@lattice-php/lattice/core/types\";\nimport type { Effect, EffectPropsMap } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\n/**\n * Consumer apps augment this via `declare module \"@lattice-php/lattice\"` to type\n * their custom effects' payloads; built-ins resolve through `EffectPropsMap`. The\n * effect counterpart of `ComponentProps`.\n */\nexport interface EffectProps {}\n\ntype EffectPayloadOf<TType extends string> = ResolveProps<\n  EffectProps,\n  EffectPropsMap,\n  TType,\n  Record<string, unknown>\n>;\n\nexport type EffectOf<TType extends string> = string extends TType\n  ? Effect\n  : { type: TType } & EffectPayloadOf<TType>;\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\n/**\n * Author a handler against `EffectHandler<\"my.type\">` for a typed payload, then\n * register it through this — it erases the type parameter for the loose registry.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\nfunction bridge(event: string): EffectHandler {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect }));\n}\n\n/**\n * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events\n * that toast/callout/modal/fragment/form subscribe to.\n */\nexport const builtinEffectHandlers: EffectHandlerRegistry = {\n  reloadPage: () => router.reload(),\n  redirect: effectHandler(\"redirect\", (effect) => router.visit(effect.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.url)),\n  localeChange: effectHandler(\"localeChange\", (effect) => setLocale(effect.locale)),\n  toast: bridge(LATTICE_EVENT.toast),\n  callout: bridge(LATTICE_EVENT.callout),\n  reloadComponent: bridge(LATTICE_EVENT.reloadComponent),\n  openModal: bridge(LATTICE_EVENT.openModal),\n  closeModal: bridge(LATTICE_EVENT.closeModal),\n  resetForm: bridge(LATTICE_EVENT.resetForm),\n  toggleSidebar: bridge(LATTICE_EVENT.toggleSidebar),\n};\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;AAgCA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;AAEA,SAAS,OAAO,OAA8B;CAC5C,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,CAAC,CAAC;AACpF;;;;;AAMA,IAAa,wBAA+C;CAC1D,kBAAkB,OAAO,OAAO;CAChC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,GAAG,CAAC;CACxE,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,GAAG,CAAC;CAC3E,cAAc,cAAc,iBAAiB,WAAW,UAAU,OAAO,MAAM,CAAC;CAChF,OAAO,OAAO,cAAc,KAAK;CACjC,SAAS,OAAO,cAAc,OAAO;CACrC,iBAAiB,OAAO,cAAc,eAAe;CACrD,WAAW,OAAO,cAAc,SAAS;CACzC,YAAY,OAAO,cAAc,UAAU;CAC3C,WAAW,OAAO,cAAc,SAAS;CACzC,eAAe,OAAO,cAAc,aAAa;AACnD;AAEA,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type { ResolveProps } from \"@lattice-php/lattice/core/types\";\nimport type { Effect, EffectPropsMap } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\n/**\n * Consumer apps augment this via `declare module \"@lattice-php/lattice\"` to type\n * their custom effects' payloads; built-ins resolve through `EffectPropsMap`. The\n * effect counterpart of `ComponentProps`.\n */\nexport interface EffectProps {}\n\ntype EffectPayloadOf<TType extends string> = ResolveProps<\n  EffectProps,\n  EffectPropsMap,\n  TType,\n  Record<string, unknown>\n>;\n\nexport type EffectOf<TType extends string> = string extends TType\n  ? Effect\n  : { type: TType } & EffectPayloadOf<TType>;\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\nexport type EffectHandlerRegistryFor<TTypes extends keyof EffectPropsMap & string> = Record<\n  TTypes,\n  EffectHandler\n>;\n\n/**\n * Author a handler against `EffectHandler<\"my.type\">` for a typed payload, then\n * register it through this — it erases the type parameter for the loose registry.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\nfunction bridge(event: string): EffectHandler {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect }));\n}\n\n/**\n * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events\n * that toast/callout/modal/fragment/form subscribe to.\n */\nexport const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string> = {\n  \"reload-page\": () => router.reload(),\n  redirect: effectHandler(\"redirect\", (effect) => router.visit(effect.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.url)),\n  \"locale-change\": effectHandler(\"locale-change\", (effect) => setLocale(effect.locale)),\n  toast: bridge(LATTICE_EVENT.toast),\n  callout: bridge(LATTICE_EVENT.callout),\n  \"reload-component\": bridge(LATTICE_EVENT.reloadComponent),\n  \"open-modal\": bridge(LATTICE_EVENT.openModal),\n  \"close-modal\": bridge(LATTICE_EVENT.closeModal),\n  \"reset-form\": bridge(LATTICE_EVENT.resetForm),\n  \"toggle-sidebar\": bridge(LATTICE_EVENT.toggleSidebar),\n};\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;AAqCA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;AAEA,SAAS,OAAO,OAA8B;CAC5C,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,CAAC,CAAC;AACpF;;;;;AAMA,IAAa,wBAAiF;CAC5F,qBAAqB,OAAO,OAAO;CACnC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,GAAG,CAAC;CACxE,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,GAAG,CAAC;CAC3E,iBAAiB,cAAc,kBAAkB,WAAW,UAAU,OAAO,MAAM,CAAC;CACpF,OAAO,OAAO,cAAc,KAAK;CACjC,SAAS,OAAO,cAAc,OAAO;CACrC,oBAAoB,OAAO,cAAc,eAAe;CACxD,cAAc,OAAO,cAAc,SAAS;CAC5C,eAAe,OAAO,cAAc,UAAU;CAC9C,cAAc,OAAO,cAAc,SAAS;CAC5C,kBAAkB,OAAO,cAAc,aAAa;AACtD;AAEA,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}

package/dist/effects/use-effect-dispatcher.d.ts

@@ -1,4 +1,4 @@
-import { ActionEffect } from './dispatch';
+import { ActionEffect } from './dispatch.js';
 /**
  * Returns a dispatcher bound to the built-in handlers plus any consumer handlers
  * in the current registry. The built-ins are merged in directly so they fire even

package/dist/{events/event-bridge.d.ts → event-bridge.d.ts}

@@ -1,6 +1,5 @@
-import { ToastMessage } from '../toast/toast';
-declare const appearances: readonly ["light", "dark", "system"];
-export type Appearance = (typeof appearances)[number];
+import { ToastMessage } from './toast/index.js';
+import { Appearance } from './appearance/index.js';
 type EventBridgeProps = {
     onAppearanceChange?: (appearance: Appearance) => void;
     onLocaleChange?: (locale: string) => void;

package/dist/{events/event-bridge.js → event-bridge.js}

@@ -1,15 +1,8 @@
-import { LATTICE_EVENT } from "./event-names.js";
-import { onToast } from "../toast/toast.js";
+import { isAppearance } from "./appearance/index.js";
+import { LATTICE_EVENT } from "./events/event-names.js";
+import { onToast } from "./toast/toast.js";
 import { useEffect } from "react";
-//#region resources/js/events/event-bridge.tsx
-var appearances = [
-	"light",
-	"dark",
-	"system"
-];
-function isAppearance(value) {
-	return appearances.some((appearance) => appearance === value);
-}
+//#region resources/js/event-bridge.tsx
 function EventBridge({ onAppearanceChange, onLocaleChange, onToast: onToast$1 }) {
 	useEffect(() => {
 		if (!onToast$1) return;

package/dist/event-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-bridge.js","names":[],"sources":["../resources/js/event-bridge.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { onToast as subscribeToToasts } from \"@lattice-php/lattice/toast\";\nimport type { ToastMessage } from \"@lattice-php/lattice/toast\";\nimport { isAppearance, type Appearance } from \"./appearance\";\nimport { LATTICE_EVENT } from \"./events/event-names\";\n\ntype EventBridgeProps = {\n  onAppearanceChange?: (appearance: Appearance) => void;\n  onLocaleChange?: (locale: string) => void;\n  onToast?: (toast: ToastMessage) => void;\n};\n\ntype AppearanceEvent = CustomEvent<{\n  value?: unknown;\n}>;\n\ntype LocaleEvent = CustomEvent<{\n  locale?: unknown;\n}>;\n\nexport function EventBridge({ onAppearanceChange, onLocaleChange, onToast }: EventBridgeProps) {\n  useEffect(() => {\n    if (!onToast) {\n      return;\n    }\n\n    return subscribeToToasts(onToast);\n  }, [onToast]);\n\n  useEffect(() => {\n    if (!onAppearanceChange) {\n      return;\n    }\n\n    const listener = (event: Event): void => {\n      const value = (event as AppearanceEvent).detail?.value;\n\n      if (isAppearance(value)) {\n        onAppearanceChange(value);\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.appearanceChange, listener);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.appearanceChange, listener);\n    };\n  }, [onAppearanceChange]);\n\n  useEffect(() => {\n    if (!onLocaleChange) {\n      return;\n    }\n\n    const listener = (event: Event): void => {\n      const locale = (event as LocaleEvent).detail?.locale;\n\n      if (typeof locale === \"string\" && locale !== \"\") {\n        onLocaleChange(locale);\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.localeChange, listener);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.localeChange, listener);\n    };\n  }, [onLocaleChange]);\n\n  return null;\n}\n"],"mappings":";;;;;AAoBA,SAAgB,YAAY,EAAE,oBAAoB,gBAAgB,SAAA,aAA6B;CAC7F,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,OAAO,QAAkB,SAAO;CAClC,GAAG,CAAC,SAAO,CAAC;CAEZ,gBAAgB;EACd,IAAI,CAAC,oBACH;EAGF,MAAM,YAAY,UAAuB;GACvC,MAAM,QAAS,MAA0B,QAAQ;GAEjD,IAAI,aAAa,KAAK,GACpB,mBAAmB,KAAK;EAE5B;EAEA,OAAO,iBAAiB,cAAc,kBAAkB,QAAQ;EAEhE,aAAa;GACX,OAAO,oBAAoB,cAAc,kBAAkB,QAAQ;EACrE;CACF,GAAG,CAAC,kBAAkB,CAAC;CAEvB,gBAAgB;EACd,IAAI,CAAC,gBACH;EAGF,MAAM,YAAY,UAAuB;GACvC,MAAM,SAAU,MAAsB,QAAQ;GAE9C,IAAI,OAAO,WAAW,YAAY,WAAW,IAC3C,eAAe,MAAM;EAEzB;EAEA,OAAO,iBAAiB,cAAc,cAAc,QAAQ;EAE5D,aAAa;GACX,OAAO,oBAAoB,cAAc,cAAc,QAAQ;EACjE;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,OAAO;AACT"}

package/dist/form/components/base/field.d.ts

@@ -1,4 +1,4 @@
-import { FormLabelAction } from '../types';
+import { FormLabelAction } from '../../types.js';
 export declare function FormFieldFrame({ children, error, helperText, label, labelAction, name, required, tooltip, }: {
     children: React.ReactNode;
     error?: string;

package/dist/form/components/base/field.js

@@ -1,8 +1,8 @@
-import { InfoTooltip } from "../../../core/components/info-tooltip.js";
-import { TextLink } from "../../../core/components/link.js";
-import InputError from "./input-error.js";
-import { Label } from "./label.js";
-import { useInTableCell } from "../row-layout-context.js";
+import { InfoTooltip } from "../../../ui/info-tooltip.js";
+import { TextLink } from "../../../ui/link.js";
+import InputError from "../../../ui/input-error.js";
+import { Label } from "../../../ui/label.js";
+import { useInTableCell } from "../../hooks/row-layout-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/base/field.tsx
 function FormFieldFrame({ children, error, helperText, label, labelAction, name, required, tooltip }) {

package/dist/form/components/base/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../../resources/js/form/components/base/field.tsx"],"sourcesContent":["import InputError from \"@lattice-php/lattice/form/components/base/input-error\";\nimport { InfoTooltip } from \"@lattice-php/lattice/core/components/info-tooltip\";\nimport { TextLink } from \"@lattice-php/lattice/core/components/link\";\nimport { Label } from \"@lattice-php/lattice/form/components/base/label\";\nimport { useInTableCell } from \"../row-layout-context\";\nimport type { FormLabelAction } from \"../types\";\n\nexport function FormFieldFrame({\n  children,\n  error,\n  helperText,\n  label,\n  labelAction,\n  name,\n  required,\n  tooltip,\n}: {\n  children: React.ReactNode;\n  error?: string;\n  helperText?: string;\n  label: string;\n  labelAction?: FormLabelAction;\n  name: string;\n  required?: boolean;\n  tooltip?: string;\n}) {\n  const bare = useInTableCell();\n\n  if (bare) {\n    return (\n      <div className=\"grid gap-1\">\n        <Label htmlFor={name} className=\"sr-only\">\n          {label}\n        </Label>\n        {children}\n        <InputError message={error} />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex min-h-5 items-center\">\n        <Label htmlFor={name}>{label}</Label>\n        {required && (\n          <span aria-hidden=\"true\" className=\"ml-0.5 text-lt-danger\">\n            *\n          </span>\n        )}\n        <InfoTooltip content={tooltip} />\n        {labelAction && (\n          <TextLink\n            href={labelAction.href}\n            tabIndex={labelAction.tabIndex}\n            className=\"ml-auto text-sm\"\n          >\n            {labelAction.label}\n          </TextLink>\n        )}\n      </div>\n\n      {children}\n\n      {helperText && <p className=\"text-sm text-lt-muted-fg\">{helperText}</p>}\n\n      <InputError message={error} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,eAAe,EAC7B,UACA,OACA,YACA,OACA,aACA,MACA,UACA,WAUC;CAGD,IAFa,eAET,GACF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAO,SAAS;IAAM,WAAU;cAC7B;GACI,CAAA;GACN;GACD,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAO,SAAS;gBAAO;KAAa,CAAA;KACnC,YACC,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBAAwB;KAErD,CAAA;KAER,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA;KAC/B,eACC,oBAAC,UAAD;MACE,MAAM,YAAY;MAClB,UAAU,YAAY;MACtB,WAAU;gBAET,YAAY;KACL,CAAA;IAET;;GAEJ;GAEA,cAAc,oBAAC,KAAD;IAAG,WAAU;cAA4B;GAAc,CAAA;GAEtE,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;AAET"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../../resources/js/form/components/base/field.tsx"],"sourcesContent":["import InputError from \"@lattice-php/lattice/ui/input-error\";\nimport { InfoTooltip } from \"@lattice-php/lattice/ui/info-tooltip\";\nimport { TextLink } from \"@lattice-php/lattice/ui/link\";\nimport { Label } from \"@lattice-php/lattice/ui/label\";\nimport { useInTableCell } from \"@lattice-php/lattice/form/hooks/row-layout-context\";\nimport type { FormLabelAction } from \"@lattice-php/lattice/form/types\";\n\nexport function FormFieldFrame({\n  children,\n  error,\n  helperText,\n  label,\n  labelAction,\n  name,\n  required,\n  tooltip,\n}: {\n  children: React.ReactNode;\n  error?: string;\n  helperText?: string;\n  label: string;\n  labelAction?: FormLabelAction;\n  name: string;\n  required?: boolean;\n  tooltip?: string;\n}) {\n  const bare = useInTableCell();\n\n  if (bare) {\n    return (\n      <div className=\"grid gap-1\">\n        <Label htmlFor={name} className=\"sr-only\">\n          {label}\n        </Label>\n        {children}\n        <InputError message={error} />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex min-h-5 items-center\">\n        <Label htmlFor={name}>{label}</Label>\n        {required && (\n          <span aria-hidden=\"true\" className=\"ml-0.5 text-lt-danger\">\n            *\n          </span>\n        )}\n        <InfoTooltip content={tooltip} />\n        {labelAction && (\n          <TextLink\n            href={labelAction.href}\n            tabIndex={labelAction.tabIndex}\n            className=\"ml-auto text-sm\"\n          >\n            {labelAction.label}\n          </TextLink>\n        )}\n      </div>\n\n      {children}\n\n      {helperText && <p className=\"text-sm text-lt-muted-fg\">{helperText}</p>}\n\n      <InputError message={error} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,eAAe,EAC7B,UACA,OACA,YACA,OACA,aACA,MACA,UACA,WAUC;CAGD,IAFa,eAET,GACF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAO,SAAS;IAAM,WAAU;cAC7B;GACI,CAAA;GACN;GACD,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAO,SAAS;gBAAO;KAAa,CAAA;KACnC,YACC,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBAAwB;KAErD,CAAA;KAER,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA;KAC/B,eACC,oBAAC,UAAD;MACE,MAAM,YAAY;MAClB,UAAU,YAAY;MACtB,WAAU;gBAET,YAAY;KACL,CAAA;IAET;;GAEJ;GAEA,cAAc,oBAAC,KAAD;IAAG,WAAU;cAA4B;GAAc,CAAA;GAEtE,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;AAET"}

package/dist/form/components/base/submit-button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonVariant } from '../../../types/generated';
+import { ButtonVariant } from '../../../types/generated.js';
 export declare function FormSubmitButton({ label, summaryLabel, variant, }: {
     label: string;
     summaryLabel: string;

package/dist/form/components/base/submit-button.js

@@ -1,6 +1,6 @@
-import { Button } from "../../../core/components/button.js";
-import { Spinner } from "../../../core/components/spinner.js";
-import { useFormContext } from "../context.js";
+import { Button } from "../../../ui/button.js";
+import { Spinner } from "../../../ui/spinner.js";
+import { useFormContext } from "../../hooks/context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/base/submit-button.tsx
 function FormSubmitButton({ label, summaryLabel, variant = "default" }) {

package/dist/form/components/base/submit-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-lt-popover mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}
+{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-lt-popover mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}

package/dist/form/components/fields/{block-add-menu.d.ts → add-row-menu.d.ts}

@@ -1,9 +1,9 @@
-export type BlockOption = {
+export type AddRowOption = {
     type: string;
     label: string;
 };
-export declare function BlockAddMenu({ addLabel, blocks, onSelect, }: {
+export declare function AddRowMenu({ addLabel, options, onSelect, }: {
     addLabel: string;
-    blocks: BlockOption[];
+    options: AddRowOption[];
     onSelect: (type: string) => void;
 }): import("react").JSX.Element;

package/dist/form/components/fields/{block-add-menu.js → add-row-menu.js}

@@ -1,8 +1,8 @@
 import { Icon } from "../../../icons/sprite.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../core/components/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/form/components/fields/block-add-menu.tsx
-function BlockAddMenu({ addLabel, blocks, onSelect }) {
+//#region resources/js/form/components/fields/add-row-menu.tsx
+function AddRowMenu({ addLabel, options, onSelect }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs("button", {
@@ -14,14 +14,14 @@ function BlockAddMenu({ addLabel, blocks, onSelect }) {
 	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
 		align: "start",
 		className: "min-w-[12rem]",
-		children: blocks.map((block) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-			"data-test": `builder-add-${block.type}`,
-			onClick: () => onSelect(block.type),
-			children: block.label
-		}, block.type))
+		children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			"data-test": `builder-add-${option.type}`,
+			onClick: () => onSelect(option.type),
+			children: option.label
+		}, option.type))
 	})] });
 }
 //#endregion
-export { BlockAddMenu };
+export { AddRowMenu };
 
-//# sourceMappingURL=block-add-menu.js.map
+//# sourceMappingURL=add-row-menu.js.map

package/dist/form/components/fields/add-row-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-row-menu.js","names":[],"sources":["../../../../resources/js/form/components/fields/add-row-menu.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/ui/dropdown-menu\";\n\nexport type AddRowOption = { type: string; label: string };\n\nexport function AddRowMenu({\n  addLabel,\n  options,\n  onSelect,\n}: {\n  addLabel: string;\n  options: AddRowOption[];\n  onSelect: (type: string) => void;\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-test=\"builder-add\"\n          className=\"inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm\"\n        >\n          <Icon name=\"plus\" />\n          {addLabel}\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"min-w-[12rem]\">\n        {options.map((option) => (\n          <DropdownMenuItem\n            key={option.type}\n            data-test={`builder-add-${option.type}`}\n            onClick={() => onSelect(option.type)}\n          >\n            {option.label}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgB,WAAW,EACzB,UACA,SACA,YAKC;CACD,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;YACnB,qBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,WAAU;aAHZ,CAKE,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA,GAClB,QACK;;CACW,CAAA,GACrB,oBAAC,qBAAD;EAAqB,OAAM;EAAQ,WAAU;YAC1C,QAAQ,KAAK,WACZ,oBAAC,kBAAD;GAEE,aAAW,eAAe,OAAO;GACjC,eAAe,SAAS,OAAO,IAAI;aAElC,OAAO;EACQ,GALX,OAAO,IAKI,CACnB;CACkB,CAAA,CACT,EAAA,CAAA;AAElB"}

package/dist/form/components/fields/builder.d.ts

@@ -1,2 +1,2 @@
-import { RendererComponent } from '../../../core/types';
+import { RendererComponent } from '../../../core/types.js';
 export declare const BuilderComponent: RendererComponent<"field.builder">;

package/dist/form/components/fields/builder.js

@@ -1,12 +1,13 @@
 import { useT } from "../../../i18n/instance.js";
-import { useFormContext } from "../context.js";
-import "./repeater-rows.js";
-import { appendPath, toHtmlName } from "../form-path.js";
+import { useFormContext } from "../../hooks/context.js";
+import { ROW_ID_KEY } from "./repeater-rows.js";
+import { rowTemplatesOf } from "./row-templates.js";
 import { FormFieldFrame } from "../base/field.js";
-import { useDependentField } from "../use-dependent-field.js";
-import { BlockAddMenu } from "./block-add-menu.js";
+import { useDependentField } from "../../hooks/use-dependent-field.js";
+import { AddRowMenu } from "./add-row-menu.js";
 import { buildRowActions } from "./row-action-menu.js";
 import { RowActions } from "./row-actions.js";
+import { RowKeyInputs } from "./row-key-inputs.js";
 import { RowItem } from "./row-item.js";
 import { TableRows, columnsFromSchema } from "./table-rows.js";
 import { useFlipReorder } from "./use-flip-reorder.js";
@@ -17,37 +18,32 @@ var EMPTY_TEMPLATE = [];
 var BuilderComponent = ({ node }) => {
 	const props = node.props;
 	const name = props.name;
-	const blocks = node.blocks ?? [];
+	const templates = rowTemplatesOf(node) ?? [];
 	const { errors } = useFormContext();
 	const { hidden, required } = useDependentField(node);
 	const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(name, props.defaultItems ?? 0);
 	const { t } = useT("lattice");
-	const registerRow = useFlipReorder(rows.map((r) => String(r["__rowId"] ?? "")).join(","));
+	const registerRow = useFlipReorder(rows.map((r) => String(r["rowId"] ?? "")).join(","));
 	const atMax = props.maxItems != null && rows.length >= props.maxItems;
 	const atMin = props.minItems != null && rows.length <= props.minItems;
 	const isTable = props.layout === "table";
-	const blockFor = (type) => blocks.find((b) => b.type === type);
-	const options = blocks.map((b) => ({
-		type: b.type,
-		label: b.label
+	const templateFor = (type) => templates.find((template) => template.type === type);
+	const options = templates.map((template) => ({
+		type: template.type,
+		label: template.label
 	}));
 	if (hidden) return null;
-	const hiddenTypeInputs = rows.map((row, index) => /* @__PURE__ */ jsx("input", {
-		type: "hidden",
-		name: toHtmlName(appendPath(path, index, "type")),
-		value: String(row.type ?? "")
-	}, String(row["__rowId"] ?? index)));
-	const primary = blocks[0];
+	const primary = templates[0];
 	const tableRows = rows.map((row, index) => {
-		const block = blockFor(row.type);
-		const isPrimary = !!block && !!primary && block.type === primary.type;
+		const template = templateFor(row.type);
+		const isPrimary = !!template && !!primary && template.type === primary.type;
 		return {
-			key: String(row["__rowId"] ?? index),
+			key: String(row["rowId"] ?? index),
 			index,
 			row,
-			template: block?.schema ?? EMPTY_TEMPLATE,
+			template: template?.schema ?? EMPTY_TEMPLATE,
 			span: !isPrimary,
-			heading: block?.label ?? `Unknown block: ${String(row.type)}`
+			heading: template?.label ?? `Unknown block: ${String(row.type)}`
 		};
 	});
 	return /* @__PURE__ */ jsx(FormFieldFrame, {
@@ -59,62 +55,71 @@ var BuilderComponent = ({ node }) => {
 		required,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
-			children: [isTable ? /* @__PURE__ */ jsxs(Fragment, { children: [hiddenTypeInputs, /* @__PURE__ */ jsx(TableRows, {
-				base: path,
-				columns: columnsFromSchema(primary?.schema ?? []),
-				rows: tableRows,
-				reorderable: props.reorderable ?? false,
-				removable: () => !atMin,
-				rowActions: props.rowActions,
-				onField,
-				onMove,
-				onRemove,
-				onDuplicate,
-				registerRow,
-				resizableColumns: props.resizableColumns === true,
-				resizeIndicator: props.resizeIndicator === true
-			})] }) : rows.map((row, index) => {
-				const block = blockFor(row.type);
-				const key = String(row["__rowId"] ?? index);
-				return /* @__PURE__ */ jsxs("div", {
-					ref: (el) => registerRow(key, el),
-					"data-flip-key": key,
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "hidden",
-						name: toHtmlName(appendPath(path, index, "type")),
-						value: String(row.type ?? "")
-					}), block ? /* @__PURE__ */ jsx(RowItem, {
-						base: path,
-						index,
-						row,
-						template: block.schema ?? EMPTY_TEMPLATE,
-						heading: block.label,
-						reorderable: props.reorderable ?? false,
-						isFirst: index === 0,
-						isLast: index === rows.length - 1,
-						removable: !atMin,
-						rowActions: props.rowActions,
-						onField,
-						onRemove,
-						onMove,
-						onDuplicate
-					}) : /* @__PURE__ */ jsxs("div", {
-						"data-test": `repeater-${name}-row-${index}`,
-						className: "flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg",
-						children: [/* @__PURE__ */ jsxs("span", { children: ["Unknown block: ", String(row.type)] }), /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(props.rowActions, {
+			children: [
+				/* @__PURE__ */ jsx(RowKeyInputs, {
+					path,
+					rows,
+					rowKey: ROW_ID_KEY
+				}),
+				/* @__PURE__ */ jsx(RowKeyInputs, {
+					path,
+					rows,
+					rowKey: "type"
+				}),
+				isTable ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TableRows, {
+					base: path,
+					columns: columnsFromSchema(primary?.schema ?? []),
+					rows: tableRows,
+					reorderable: props.reorderable ?? false,
+					removable: () => !atMin,
+					rowActions: props.rowActions,
+					onField,
+					onMove,
+					onRemove,
+					onDuplicate,
+					registerRow,
+					resizableColumns: props.resizableColumns === true,
+					resizeIndicator: props.resizeIndicator === true
+				}) }) : rows.map((row, index) => {
+					const template = templateFor(row.type);
+					const key = String(row["rowId"] ?? index);
+					return /* @__PURE__ */ jsx("div", {
+						ref: (el) => registerRow(key, el),
+						"data-flip-key": key,
+						children: template ? /* @__PURE__ */ jsx(RowItem, {
+							base: path,
 							index,
+							row,
+							template: template.schema ?? EMPTY_TEMPLATE,
+							heading: template.label,
+							reorderable: props.reorderable ?? false,
+							isFirst: index === 0,
+							isLast: index === rows.length - 1,
 							removable: !atMin,
+							rowActions: props.rowActions,
+							onField,
 							onRemove,
-							onDuplicate,
-							t
-						}) })]
-					})]
-				}, key);
-			}), !atMax && /* @__PURE__ */ jsx(BlockAddMenu, {
-				addLabel: props.addLabel ?? "Add",
-				blocks: options,
-				onSelect: (type) => append({ type })
-			})]
+							onMove,
+							onDuplicate
+						}) : /* @__PURE__ */ jsxs("div", {
+							"data-test": `repeater-${name}-row-${index}`,
+							className: "flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg",
+							children: [/* @__PURE__ */ jsxs("span", { children: ["Unknown block: ", String(row.type)] }), /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(props.rowActions, {
+								index,
+								removable: !atMin,
+								onRemove,
+								onDuplicate,
+								t
+							}) })]
+						})
+					}, key);
+				}),
+				!atMax && /* @__PURE__ */ jsx(AddRowMenu, {
+					addLabel: props.addLabel ?? "Add",
+					options,
+					onSelect: (type) => append({ type })
+				})
+			]
 		})
 	});
 };