@lattice-php/lattice 0.18.0 → 0.20.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

@@ -1,10 +1,10 @@
 import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./registry.js";
 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 { LATTICE_REF_HEADER, withRefHeader } from "./component-ref.js";
+import { withHeaders } from "./headers.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/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.js';
+import { ComponentPropsMap, NodeType, Option, PageContainer as KnownPageContainer, WireNode, Listen } from '../types/generated.js';
 export type { KnownPageContainer, NodeType, Option, WireNode };
 export type NodeProps = Record<string, unknown>;
 export type CommonNodeProps = {
@@ -23,11 +23,23 @@ export interface ComponentProps {
  */
 export type ResolveProps<TAugment, TBuiltins, TType extends string, TFallback> = TType extends keyof TAugment ? TAugment[TType] : TType extends keyof TBuiltins ? TBuiltins[TType] : TFallback;
 export type PropsOf<TType extends string> = ResolveProps<ComponentProps, ComponentPropsMap, TType, NodeProps> & CommonNodeProps;
+/**
+ * The loose wire node an unknown/untyped `type` resolves to: the shape every node
+ * shares, with a loose `props` bag. The single source of the wire-node shape;
+ * generated `WireNode` aliases `Node` (i.e. `Node<string>`), which is this.
+ */
+type LooseNode = {
+    id?: string;
+    key?: string;
+    type: string;
+    props?: NodeProps;
+    schema?: Schema;
+};
 /**
  * Built-in `props` is required, not optional — the wire serializes the full prop
- * object, so reads need no optional chaining. Unknown types fall back to `WireNode`.
+ * object, so reads need no optional chaining. Unknown types fall back to `LooseNode`.
  */
-export type NodeOfType<TType extends string = string> = string extends TType ? WireNode : {
+export type NodeOfType<TType extends string = string> = string extends TType ? LooseNode : {
     id?: string;
     key?: string;
     props: PropsOf<TType>;
@@ -57,7 +69,7 @@ export type PagePayload = {
     breadcrumbs: PageBreadcrumb[];
     container: PageContainer;
     layout: LayoutPayload | null;
-    listeners?: ListenerPayload[];
+    listeners?: Listen[];
     schema: Schema;
     title: string | null;
 };

package/dist/create-app.d.ts

@@ -1,9 +1,14 @@
+import { Page as InertiaPage } from '@inertiajs/core';
 import { createInertiaApp } from '@inertiajs/react';
 import { ReactElement } from 'react';
 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 CreateLatticeAppI18nOptions = {
+    /** i18next namespaces to load, e.g. `["lattice", "app"]`. Defaults to the package's own. */
+    namespaces?: string[];
+};
 export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layout" | "setup" | "withApp" | "pages"> & {
     registry?: Registry;
     /**
@@ -16,12 +21,35 @@ export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layou
     /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\/*.tsx')`. */
     pages?: PageModules;
     defaultLayout?: CreateLayoutResolverOptions["defaultLayout"];
+    /**
+     * Lattice's i18n bootstrap, on by default: when the backend shares the
+     * `lattice.i18n` prop, the first render waits for the translation setup (no
+     * flash of untranslated fallbacks), `LocaleReload` re-fetches the page after
+     * a locale switch, and every visit carries the locale/timezone headers. The
+     * i18next chunk only loads when the backend actually shares the prop. Pass
+     * `false` to opt out entirely.
+     */
+    i18n?: CreateLatticeAppI18nOptions | false;
+    /**
+     * App bootstrap that needs the initial page — e.g. `configureEcho` from a
+     * shared connection prop. Runs on the client before the first render; a
+     * returned promise delays that render until it resolves.
+     */
+    boot?: (context: {
+        page: InertiaPage;
+    }) => void | Promise<void>;
+    /**
+     * Compose providers or siblings around the app. Applied inside the Lattice
+     * Provider, so the registry, sprite, and toaster contexts are available.
+     */
+    wrap?: (app: ReactElement) => ReactElement;
 };
 /**
  * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers
  * (server-driven Lattice pages and normal Inertia pages alike), the Provider —
- * registry, sprite, flash toasts via Lattice's own Toaster — and theme
- * initialization. Forwards any other createInertiaApp option.
+ * registry, sprite, flash toasts via Lattice's own Toaster — theme
+ * initialization, and the i18n bootstrap. Forwards any other createInertiaApp
+ * option.
  */
-export declare function createLatticeApp({ registry, plugins, sprite, pages, defaultLayout, strictMode, ...inertiaOptions }?: CreateLatticeAppOptions): Promise<void | ((page: import('@inertiajs/core').Page<import('@inertiajs/core').PageProps>, renderToString: (element: ReactElement) => string) => Promise<import('@inertiajs/core').InertiaAppSSRResponse>)>;
+export declare function createLatticeApp({ registry, plugins, sprite, pages, defaultLayout, strictMode, i18n, boot, wrap, ...inertiaOptions }?: CreateLatticeAppOptions): Promise<void | ((page: InertiaPage<import('@inertiajs/core').PageProps>, renderToString: (element: ReactElement) => string) => Promise<import('@inertiajs/core').InertiaAppSSRResponse>)>;
 export {};

package/dist/create-app.js

@@ -1,32 +1,70 @@
 import { initializeTheme } from "./appearance/index.js";
 import { extendRegistry } from "./core/registry.js";
 import { setDefaultRegistry } from "./core/registry-context.js";
-import { createLayoutResolver, createPageResolver } from "./inertia.js";
+import { i18nConfigFromPageProps } from "./i18n/shared-props.js";
+import { LocaleReload } from "./i18n/locale-reload.js";
+import { createLayoutResolver, createPageResolver, withVisitHeaders } from "./inertia.js";
 import { ProviderBase } from "./provider-base.js";
 import { registry } from "./registry.js";
 import { createInertiaApp } from "@inertiajs/react";
-import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/create-app.tsx
+function AwaitReady({ ready, children }) {
+	const [isReady, setReady] = useState(false);
+	useEffect(() => {
+		let active = true;
+		const reveal = () => {
+			if (active) setReady(true);
+		};
+		ready.then(reveal, reveal);
+		return () => {
+			active = false;
+		};
+	}, [ready]);
+	return isReady ? children : null;
+}
 /**
 * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers
 * (server-driven Lattice pages and normal Inertia pages alike), the Provider —
-* registry, sprite, flash toasts via Lattice's own Toaster — and theme
-* initialization. Forwards any other createInertiaApp option.
+* registry, sprite, flash toasts via Lattice's own Toaster — theme
+* initialization, and the i18n bootstrap. Forwards any other createInertiaApp
+* option.
 */
-function createLatticeApp({ registry: registry$1, plugins, sprite, pages = {}, defaultLayout, strictMode = true, ...inertiaOptions } = {}) {
+function createLatticeApp({ registry: registry$1, plugins, sprite, pages = {}, defaultLayout, strictMode = true, i18n, boot, wrap, ...inertiaOptions } = {}) {
 	const baseRegistry = registry$1 ?? registry;
 	const activeRegistry = plugins && plugins.length > 0 ? extendRegistry(baseRegistry, ...plugins) : baseRegistry;
 	setDefaultRegistry(activeRegistry);
+	const i18nEnabled = i18n !== false;
+	const userVisitOptions = inertiaOptions.defaults?.visitOptions;
+	const defaults = i18nEnabled ? {
+		...inertiaOptions.defaults,
+		visitOptions: (href, options) => withVisitHeaders(href, userVisitOptions?.(href, options) ?? options)
+	} : inertiaOptions.defaults;
 	const app = createInertiaApp({
 		...inertiaOptions,
+		defaults,
 		strictMode,
 		resolve: createPageResolver(pages),
 		layout: createLayoutResolver({ defaultLayout }),
-		withApp: (node) => /* @__PURE__ */ jsx(ProviderBase, {
-			registry: activeRegistry,
-			sprite,
-			children: node
-		})
+		withApp: (node, { ssr, page }) => {
+			const pending = [];
+			if (!ssr) {
+				if (i18nEnabled && i18nConfigFromPageProps(page.props) !== void 0) pending.push(import("./i18n/page-props.js").then((module) => module.configureI18nFromPageProps(page.props, i18n ?? {})));
+				const booted = boot?.({ page });
+				if (booted) pending.push(booted);
+			}
+			const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [node, i18nEnabled ? /* @__PURE__ */ jsx(LocaleReload, {}) : null] });
+			const shell = /* @__PURE__ */ jsx(ProviderBase, {
+				registry: activeRegistry,
+				sprite,
+				children: wrap ? wrap(inner) : inner
+			});
+			return pending.length > 0 ? /* @__PURE__ */ jsx(AwaitReady, {
+				ready: Promise.all(pending),
+				children: shell
+			}) : shell;
+		}
 	});
 	initializeTheme();
 	return app;

package/dist/create-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-app.js","names":[],"sources":["../resources/js/create-app.tsx"],"sourcesContent":["import { createInertiaApp } from \"@inertiajs/react\";\nimport type { ReactElement } from \"react\";\nimport { initializeTheme } from \"./appearance\";\nimport { extendRegistry, type Plugin, type Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport {\n  createLayoutResolver,\n  createPageResolver,\n  type CreateLayoutResolverOptions,\n  type PageModules,\n} from \"./inertia\";\nimport { ProviderBase } from \"./provider-base\";\nimport { registry as defaultRegistry } from \"./registry\";\n\ntype InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;\n\nexport type CreateLatticeAppOptions = Omit<\n  InertiaAppOptions,\n  \"resolve\" | \"layout\" | \"setup\" | \"withApp\" | \"pages\"\n> & {\n  registry?: Registry;\n  /**\n   * Component-package plugins to merge onto the registry — pass the\n   * Composer-discovered `virtual:lattice/plugins` here to register vendor\n   * components with no manual `extendRegistry` call.\n   */\n  plugins?: Plugin[];\n  sprite?: SpriteValue;\n  /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\\/*.tsx')`. */\n  pages?: PageModules;\n  defaultLayout?: CreateLayoutResolverOptions[\"defaultLayout\"];\n};\n\n/**\n * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers\n * (server-driven Lattice pages and normal Inertia pages alike), the Provider —\n * registry, sprite, flash toasts via Lattice's own Toaster — and theme\n * initialization. Forwards any other createInertiaApp option.\n */\nexport function createLatticeApp({\n  registry,\n  plugins,\n  sprite,\n  pages = {},\n  defaultLayout,\n  strictMode = true,\n  ...inertiaOptions\n}: CreateLatticeAppOptions = {}) {\n  const baseRegistry = registry ?? defaultRegistry;\n  const activeRegistry =\n    plugins && plugins.length > 0 ? extendRegistry(baseRegistry, ...plugins) : baseRegistry;\n\n  setDefaultRegistry(activeRegistry);\n\n  const app = createInertiaApp({\n    ...inertiaOptions,\n    strictMode,\n    resolve: createPageResolver(pages),\n    layout: createLayoutResolver({ defaultLayout }),\n    withApp: (node: ReactElement): ReactElement => (\n      <ProviderBase registry={activeRegistry} sprite={sprite}>\n        {node}\n      </ProviderBase>\n    ),\n  });\n\n  initializeTheme();\n\n  return app;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,SAAgB,iBAAiB,EAC/B,UAAA,YACA,SACA,QACA,QAAQ,CAAC,GACT,eACA,aAAa,MACb,GAAG,mBACwB,CAAC,GAAG;CAC/B,MAAM,eAAe,cAAY;CACjC,MAAM,iBACJ,WAAW,QAAQ,SAAS,IAAI,eAAe,cAAc,GAAG,OAAO,IAAI;CAE7E,mBAAmB,cAAc;CAEjC,MAAM,MAAM,iBAAiB;EAC3B,GAAG;EACH;EACA,SAAS,mBAAmB,KAAK;EACjC,QAAQ,qBAAqB,EAAE,cAAc,CAAC;EAC9C,UAAU,SACR,oBAAC,cAAD;GAAc,UAAU;GAAwB;aAC7C;EACW,CAAA;CAElB,CAAC;CAED,gBAAgB;CAEhB,OAAO;AACT"}
+{"version":3,"file":"create-app.js","names":[],"sources":["../resources/js/create-app.tsx"],"sourcesContent":["import type { Page as InertiaPage, VisitOptions } from \"@inertiajs/core\";\nimport { createInertiaApp } from \"@inertiajs/react\";\nimport { useEffect, useState, type ReactElement, type ReactNode } from \"react\";\nimport { initializeTheme } from \"./appearance\";\nimport { extendRegistry, type Plugin, type Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { LocaleReload } from \"./i18n/locale-reload\";\nimport { i18nConfigFromPageProps } from \"./i18n/shared-props\";\nimport {\n  createLayoutResolver,\n  createPageResolver,\n  withVisitHeaders,\n  type CreateLayoutResolverOptions,\n  type PageModules,\n} from \"./inertia\";\nimport { ProviderBase } from \"./provider-base\";\nimport { registry as defaultRegistry } from \"./registry\";\n\ntype InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;\n\nexport type CreateLatticeAppI18nOptions = {\n  /** i18next namespaces to load, e.g. `[\"lattice\", \"app\"]`. Defaults to the package's own. */\n  namespaces?: string[];\n};\n\nexport type CreateLatticeAppOptions = Omit<\n  InertiaAppOptions,\n  \"resolve\" | \"layout\" | \"setup\" | \"withApp\" | \"pages\"\n> & {\n  registry?: Registry;\n  /**\n   * Component-package plugins to merge onto the registry — pass the\n   * Composer-discovered `virtual:lattice/plugins` here to register vendor\n   * components with no manual `extendRegistry` call.\n   */\n  plugins?: Plugin[];\n  sprite?: SpriteValue;\n  /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\\/*.tsx')`. */\n  pages?: PageModules;\n  defaultLayout?: CreateLayoutResolverOptions[\"defaultLayout\"];\n  /**\n   * Lattice's i18n bootstrap, on by default: when the backend shares the\n   * `lattice.i18n` prop, the first render waits for the translation setup (no\n   * flash of untranslated fallbacks), `LocaleReload` re-fetches the page after\n   * a locale switch, and every visit carries the locale/timezone headers. The\n   * i18next chunk only loads when the backend actually shares the prop. Pass\n   * `false` to opt out entirely.\n   */\n  i18n?: CreateLatticeAppI18nOptions | false;\n  /**\n   * App bootstrap that needs the initial page — e.g. `configureEcho` from a\n   * shared connection prop. Runs on the client before the first render; a\n   * returned promise delays that render until it resolves.\n   */\n  boot?: (context: { page: InertiaPage }) => void | Promise<void>;\n  /**\n   * Compose providers or siblings around the app. Applied inside the Lattice\n   * Provider, so the registry, sprite, and toaster contexts are available.\n   */\n  wrap?: (app: ReactElement) => ReactElement;\n};\n\n// Fail-open: a failed bootstrap renders the app anyway (with fallback strings)\n// rather than a blank page.\nfunction AwaitReady({ ready, children }: { ready: Promise<unknown>; children: ReactNode }) {\n  const [isReady, setReady] = useState(false);\n\n  useEffect(() => {\n    let active = true;\n    const reveal = (): void => {\n      if (active) {\n        setReady(true);\n      }\n    };\n\n    void ready.then(reveal, reveal);\n\n    return () => {\n      active = false;\n    };\n  }, [ready]);\n\n  return isReady ? children : null;\n}\n\n/**\n * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers\n * (server-driven Lattice pages and normal Inertia pages alike), the Provider —\n * registry, sprite, flash toasts via Lattice's own Toaster — theme\n * initialization, and the i18n bootstrap. Forwards any other createInertiaApp\n * option.\n */\nexport function createLatticeApp({\n  registry,\n  plugins,\n  sprite,\n  pages = {},\n  defaultLayout,\n  strictMode = true,\n  i18n,\n  boot,\n  wrap,\n  ...inertiaOptions\n}: CreateLatticeAppOptions = {}) {\n  const baseRegistry = registry ?? defaultRegistry;\n  const activeRegistry =\n    plugins && plugins.length > 0 ? extendRegistry(baseRegistry, ...plugins) : baseRegistry;\n\n  setDefaultRegistry(activeRegistry);\n\n  const i18nEnabled = i18n !== false;\n  const userVisitOptions = inertiaOptions.defaults?.visitOptions;\n  const defaults = i18nEnabled\n    ? {\n        ...inertiaOptions.defaults,\n        visitOptions: (href: string, options: VisitOptions): VisitOptions =>\n          withVisitHeaders(href, userVisitOptions?.(href, options) ?? options),\n      }\n    : inertiaOptions.defaults;\n\n  const app = createInertiaApp({\n    ...inertiaOptions,\n    defaults,\n    strictMode,\n    resolve: createPageResolver(pages),\n    layout: createLayoutResolver({ defaultLayout }),\n    withApp: (node: ReactElement, { ssr, page }: { ssr: boolean; page: InertiaPage }) => {\n      const pending: Promise<unknown>[] = [];\n\n      if (!ssr) {\n        // Loaded on demand so apps without the shared i18n prop never ship the\n        // i18next backend; the disabled-config call still stores the timezone.\n        if (i18nEnabled && i18nConfigFromPageProps(page.props) !== undefined) {\n          pending.push(\n            import(\"./i18n/page-props\").then((module) =>\n              module.configureI18nFromPageProps(page.props, i18n ?? {}),\n            ),\n          );\n        }\n\n        const booted = boot?.({ page });\n\n        if (booted) {\n          pending.push(booted);\n        }\n      }\n\n      const inner = (\n        <>\n          {node}\n          {i18nEnabled ? <LocaleReload /> : null}\n        </>\n      );\n\n      // The whole shell waits, not just the page: anything rendering a\n      // translated string (the Toaster included) would otherwise initialize\n      // i18next before the backend can register — init runs exactly once,\n      // first caller wins.\n      const shell = (\n        <ProviderBase registry={activeRegistry} sprite={sprite}>\n          {wrap ? wrap(inner) : inner}\n        </ProviderBase>\n      );\n\n      return pending.length > 0 ? (\n        <AwaitReady ready={Promise.all(pending)}>{shell}</AwaitReady>\n      ) : (\n        shell\n      );\n    },\n  });\n\n  initializeTheme();\n\n  return app;\n}\n"],"mappings":";;;;;;;;;;;;AAiEA,SAAS,WAAW,EAAE,OAAO,YAA8D;CACzF,MAAM,CAAC,SAAS,YAAY,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,SAAS;EACb,MAAM,eAAqB;GACzB,IAAI,QACF,SAAS,IAAI;EAEjB;EAEA,MAAW,KAAK,QAAQ,MAAM;EAE9B,aAAa;GACX,SAAS;EACX;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO,UAAU,WAAW;AAC9B;;;;;;;;AASA,SAAgB,iBAAiB,EAC/B,UAAA,YACA,SACA,QACA,QAAQ,CAAC,GACT,eACA,aAAa,MACb,MACA,MACA,MACA,GAAG,mBACwB,CAAC,GAAG;CAC/B,MAAM,eAAe,cAAY;CACjC,MAAM,iBACJ,WAAW,QAAQ,SAAS,IAAI,eAAe,cAAc,GAAG,OAAO,IAAI;CAE7E,mBAAmB,cAAc;CAEjC,MAAM,cAAc,SAAS;CAC7B,MAAM,mBAAmB,eAAe,UAAU;CAClD,MAAM,WAAW,cACb;EACE,GAAG,eAAe;EAClB,eAAe,MAAc,YAC3B,iBAAiB,MAAM,mBAAmB,MAAM,OAAO,KAAK,OAAO;CACvE,IACA,eAAe;CAEnB,MAAM,MAAM,iBAAiB;EAC3B,GAAG;EACH;EACA;EACA,SAAS,mBAAmB,KAAK;EACjC,QAAQ,qBAAqB,EAAE,cAAc,CAAC;EAC9C,UAAU,MAAoB,EAAE,KAAK,WAAgD;GACnF,MAAM,UAA8B,CAAC;GAErC,IAAI,CAAC,KAAK;IAGR,IAAI,eAAe,wBAAwB,KAAK,KAAK,MAAM,KAAA,GACzD,QAAQ,KACN,OAAO,wBAAqB,MAAM,WAChC,OAAO,2BAA2B,KAAK,OAAO,QAAQ,CAAC,CAAC,CAC1D,CACF;IAGF,MAAM,SAAS,OAAO,EAAE,KAAK,CAAC;IAE9B,IAAI,QACF,QAAQ,KAAK,MAAM;GAEvB;GAEA,MAAM,QACJ,qBAAA,YAAA,EAAA,UAAA,CACG,MACA,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,IAClC,EAAA,CAAA;GAOJ,MAAM,QACJ,oBAAC,cAAD;IAAc,UAAU;IAAwB;cAC7C,OAAO,KAAK,KAAK,IAAI;GACV,CAAA;GAGhB,OAAO,QAAQ,SAAS,IACtB,oBAAC,YAAD;IAAY,OAAO,QAAQ,IAAI,OAAO;cAAI;GAAkB,CAAA,IAE5D;EAEJ;CACF,CAAC;CAED,gBAAgB;CAEhB,OAAO;AACT"}

package/dist/effects/registry.d.ts

@@ -7,10 +7,11 @@ import { Effect, EffectPropsMap } from '../types/generated.js';
  */
 export interface EffectProps {
 }
-type EffectPayloadOf<TType extends string> = ResolveProps<EffectProps, EffectPropsMap, TType, Record<string, unknown>>;
+export type EffectPropsOf<TType extends string> = ResolveProps<EffectProps, EffectPropsMap, TType, Record<string, unknown>>;
 export type EffectOf<TType extends string> = string extends TType ? Effect : {
     type: TType;
-} & EffectPayloadOf<TType>;
+    props: EffectPropsOf<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>;
@@ -25,4 +26,3 @@ export declare function effectHandler<TType extends string>(_type: TType, fn: Ef
  */
 export declare const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string>;
 export declare function mergeEffectHandlers(...registries: Array<EffectHandlerRegistry | undefined>): EffectHandlerRegistry;
-export {};

package/dist/effects/registry.js

@@ -18,7 +18,7 @@ function triggerDownload(url) {
 	link.remove();
 }
 function bridge(event) {
-	return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect }));
+	return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect.props }));
 }
 /**
 * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events
@@ -26,9 +26,9 @@ function bridge(event) {
 */
 var builtinEffectHandlers = {
 	"reload-page": () => router.reload(),
-	redirect: effectHandler("redirect", (effect) => router.visit(effect.url)),
-	download: effectHandler("download", (effect) => triggerDownload(effect.url)),
-	"locale-change": effectHandler("locale-change", (effect) => setLocale(effect.locale)),
+	redirect: effectHandler("redirect", (effect) => router.visit(effect.props.url)),
+	download: effectHandler("download", (effect) => triggerDownload(effect.props.url)),
+	"locale-change": effectHandler("locale-change", (effect) => setLocale(effect.props.locale)),
 	toast: bridge(LATTICE_EVENT.toast),
 	callout: bridge(LATTICE_EVENT.callout),
 	"reload-component": bridge(LATTICE_EVENT.reloadComponent),

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\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"}
+{"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\nexport type EffectPropsOf<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; props: EffectPropsOf<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.props }));\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.props.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.props.url)),\n  \"locale-change\": effectHandler(\"locale-change\", (effect) => setLocale(effect.props.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,MAAM,CAAC,CAAC;AAC1F;;;;;AAMA,IAAa,wBAAiF;CAC5F,qBAAqB,OAAO,OAAO;CACnC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,MAAM,GAAG,CAAC;CAC9E,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,MAAM,GAAG,CAAC;CACjF,iBAAiB,cAAc,kBAAkB,WAAW,UAAU,OAAO,MAAM,MAAM,CAAC;CAC1F,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/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/base/field.d.ts

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

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

@@ -1,8 +1,8 @@
+import { useInTableCell } from "../../hooks/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 }) {
@@ -36,7 +36,7 @@ function FormFieldFrame({ children, error, helperText, label, labelAction, name,
 					/* @__PURE__ */ jsx(InfoTooltip, { content: tooltip }),
 					labelAction && /* @__PURE__ */ jsx(TextLink, {
 						href: labelAction.href,
-						tabIndex: labelAction.tabIndex,
+						tabIndex: labelAction.tabIndex ?? void 0,
 						className: "ml-auto text-sm",
 						children: labelAction.label
 					})

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/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"}
+{"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 { LabelAction } 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?: LabelAction;\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 ?? undefined}\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,YAAY,KAAA;MAClC,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/fields/color-picker-field.d.ts

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

package/dist/form/components/fields/color-picker-field.js

@@ -0,0 +1,57 @@
+import { cn } from "../../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
+import { controlSurface } from "../../../ui/control.js";
+import { ColorPicker, normalizeHex } from "../../../ui/color-picker.js";
+import { SimpleField } from "./simple-field.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/color-picker-field.tsx
+var ColorPickerFieldComponent = ({ node }) => {
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, value, readOnly, disabled, commit }) => {
+			const hex = normalizeHex(value);
+			return /* @__PURE__ */ jsxs(Popover, { children: [
+				/* @__PURE__ */ jsx("input", {
+					name,
+					type: "hidden",
+					value: hex ?? ""
+				}),
+				/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						className: cn(controlSurface(), "flex items-center gap-2 text-left"),
+						"data-test": `color-picker-${name}`,
+						disabled: disabled || readOnly,
+						id: name,
+						type: "button",
+						children: hex ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "size-4 shrink-0 rounded-full border border-lt-border",
+							style: { background: hex }
+						}), /* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: hex
+						})] }) : /* @__PURE__ */ jsx("span", {
+							className: "text-lt-muted-fg",
+							children: props.placeholder ?? ""
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(PopoverContent, {
+					className: "p-3",
+					children: /* @__PURE__ */ jsx(ColorPicker, {
+						onChange: (next) => commit(next),
+						palette: props.palette,
+						value: hex ?? "#6b7280"
+					})
+				})
+			] });
+		}
+	});
+};
+//#endregion
+export { ColorPickerFieldComponent };
+
+//# sourceMappingURL=color-picker-field.js.map

package/dist/form/components/fields/color-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/color-picker-field.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { ColorPicker, normalizeHex } from \"@lattice-php/lattice/ui/color-picker\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const ColorPickerFieldComponent: RendererComponent<\"field.color-picker\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => {\n        const hex = normalizeHex(value);\n\n        return (\n          <Popover>\n            <input name={name} type=\"hidden\" value={hex ?? \"\"} />\n            <PopoverTrigger asChild>\n              <button\n                className={cn(controlSurface(), \"flex items-center gap-2 text-left\")}\n                data-test={`color-picker-${name}`}\n                disabled={disabled || readOnly}\n                id={name}\n                type=\"button\"\n              >\n                {hex ? (\n                  <>\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-4 shrink-0 rounded-full border border-lt-border\"\n                      style={{ background: hex }}\n                    />\n                    <span className=\"tabular-nums\">{hex}</span>\n                  </>\n                ) : (\n                  <span className=\"text-lt-muted-fg\">{props.placeholder ?? \"\"}</span>\n                )}\n              </button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-3\">\n              <ColorPicker\n                onChange={(next) => commit(next)}\n                palette={props.palette}\n                value={hex ?? \"#6b7280\"}\n              />\n            </PopoverContent>\n          </Popover>\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,6BAAsE,EAAE,WAAW;CAC9F,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa;GAChD,MAAM,MAAM,aAAa,KAAK;GAE9B,OACE,qBAAC,SAAD,EAAA,UAAA;IACE,oBAAC,SAAD;KAAa;KAAM,MAAK;KAAS,OAAO,OAAO;IAAK,CAAA;IACpD,oBAAC,gBAAD;KAAgB,SAAA;eACd,oBAAC,UAAD;MACE,WAAW,GAAG,eAAe,GAAG,mCAAmC;MACnE,aAAW,gBAAgB;MAC3B,UAAU,YAAY;MACtB,IAAI;MACJ,MAAK;gBAEJ,MACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;OACE,eAAY;OACZ,WAAU;OACV,OAAO,EAAE,YAAY,IAAI;MAC1B,CAAA,GACD,oBAAC,QAAD;OAAM,WAAU;iBAAgB;MAAU,CAAA,CAC1C,EAAA,CAAA,IAEF,oBAAC,QAAD;OAAM,WAAU;iBAAoB,MAAM,eAAe;MAAS,CAAA;KAE9D,CAAA;IACM,CAAA;IAChB,oBAAC,gBAAD;KAAgB,WAAU;eACxB,oBAAC,aAAD;MACE,WAAW,SAAS,OAAO,IAAI;MAC/B,SAAS,MAAM;MACf,OAAO,OAAO;KACf,CAAA;IACa,CAAA;GACT,EAAA,CAAA;EAEb;CACW,CAAA;AAEjB"}

package/dist/form/components/fields/date-input.js

@@ -1,5 +1,5 @@
-import { DatePicker } from "./date-picker.js";
 import { SimpleField } from "./simple-field.js";
+import { DatePicker } from "./date-picker.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/date-input.tsx
 var DateInputComponent = ({ node }) => {

package/dist/form/components/fields/date-picker-field.js

@@ -1,6 +1,6 @@
-import { useLocale } from "../../../i18n/locale.js";
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
+import { useLocale } from "../../../i18n/locale.js";
 import { Button } from "../../../ui/button.js";
 import { Input } from "../../../ui/input.js";
 import { parseTimeString } from "./time-picker-columns.js";

package/dist/form/components/fields/date-time-input.js

@@ -1,6 +1,6 @@
 import { useTimezone } from "../../../i18n/timezone.js";
-import { DatePicker } from "./date-picker.js";
 import { SimpleField } from "./simple-field.js";
+import { DatePicker } from "./date-picker.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/date-time-input.tsx
 var DateTimeInputComponent = ({ node }) => {

package/dist/form/components/fields/file-upload.js

@@ -1,4 +1,3 @@
-import { Icon } from "../../../icons/sprite.js";
 import { useT } from "../../../i18n/instance.js";
 import { testIdentity } from "../../../core/test-id.js";
 import { apiFetch } from "../../../core/api.js";
@@ -7,6 +6,7 @@ import { useFieldScope } from "../../hooks/field-scope.js";
 import { useFormValues, useSetFormValue } from "../../hooks/values.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useDependentField } from "../../hooks/use-dependent-field.js";
+import { IconButton } from "../../../ui/icon-button.js";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/file-upload.tsx
@@ -116,7 +116,7 @@ var FileUploadComponent = ({ node }) => {
 		const sign = await response.json();
 		await new Promise((resolve) => {
 			const request = new XMLHttpRequest();
-			request.open(sign.method, sign.url, true);
+			request.open(sign.method.toUpperCase(), sign.url, true);
 			Object.entries(sign.headers).forEach(([key, value]) => request.setRequestHeader(key, String(value)));
 			request.upload.onprogress = (event) => {
 				if (event.lengthComputable) {
@@ -230,18 +230,13 @@ var FileUploadComponent = ({ node }) => {
 									})
 								]
 							}),
-							(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
-								"aria-label": t("form.file-upload.remove", "Remove {{name}}", { name: item.name }),
-								className: "inline-flex size-7 shrink-0 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-50",
+							(!item.existing || !scope) && /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								icon: "x",
+								label: t("form.file-upload.remove", "Remove {{name}}", { name: item.name }),
 								"data-test": testIdentity(item.existing ? `${name}-remove-existing` : `${name}-remove`),
 								disabled: locked,
-								onClick: () => removeItem(item.id),
-								type: "button",
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "x",
-									"aria-hidden": "true",
-									className: "size-lt-icon-sm"
-								})
+								onClick: () => removeItem(item.id)
 							}),
 							signed && !item.existing && item.key && item.status === "ready" && /* @__PURE__ */ jsx("input", {
 								"data-test": testIdentity(`${name}-uploaded`),