@lattice-php/lattice 0.20.0 → 0.22.0

package/dist/clipboard/index.js

@@ -1,16 +1,2 @@
 import { CopyableText, copyToClipboard } from "../ui/copyable-text.js";
-import { useState } from "react";
-//#region resources/js/clipboard/index.ts
-function useClipboard() {
-	const [copiedText, setCopiedText] = useState(null);
-	const copy = async (text) => {
-		const copied = await copyToClipboard(text);
-		setCopiedText(copied ? text : null);
-		return copied;
-	};
-	return [copiedText, copy];
-}
-//#endregion
-export { CopyableText, copyToClipboard, useClipboard };
-
-//# sourceMappingURL=index.js.map
+export { CopyableText, copyToClipboard };

package/dist/{events → core}/event-names.js

@@ -1,4 +1,4 @@
-//#region resources/js/events/event-names.ts
+//#region resources/js/core/event-names.ts
 /**
 * Single source of truth for the `lattice:*` DOM events the runtime dispatches
 * and listens for. The built-in effect handlers in effects/registry.ts bridge

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-names.js","names":[],"sources":["../../resources/js/core/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/core/hooks/use-window-event.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Subscribe to a window event for the lifetime of the component. The handler is
+ * read through a ref, so a fresh handler each render never re-subscribes; pass
+ * `enabled: false` to detach without unmounting.
+ */
+export declare function useWindowEvent(type: string, handler: (event: Event) => void, options?: {
+    enabled?: boolean;
+}): void;

package/dist/core/hooks/use-window-event.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+//#region resources/js/core/hooks/use-window-event.ts
+/**
+* Subscribe to a window event for the lifetime of the component. The handler is
+* read through a ref, so a fresh handler each render never re-subscribes; pass
+* `enabled: false` to detach without unmounting.
+*/
+function useWindowEvent(type, handler, options = {}) {
+	const { enabled = true } = options;
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	useEffect(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const listener = (event) => handlerRef.current(event);
+		window.addEventListener(type, listener);
+		return () => window.removeEventListener(type, listener);
+	}, [type, enabled]);
+}
+//#endregion
+export { useWindowEvent };
+
+//# sourceMappingURL=use-window-event.js.map

package/dist/core/hooks/use-window-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-window-event.js","names":[],"sources":["../../../resources/js/core/hooks/use-window-event.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * Subscribe to a window event for the lifetime of the component. The handler is\n * read through a ref, so a fresh handler each render never re-subscribes; pass\n * `enabled: false` to detach without unmounting.\n */\nexport function useWindowEvent(\n  type: string,\n  handler: (event: Event) => void,\n  options: { enabled?: boolean } = {},\n): void {\n  const { enabled = true } = options;\n  const handlerRef = useRef(handler);\n  handlerRef.current = handler;\n\n  useEffect(() => {\n    if (!enabled || typeof window === \"undefined\") {\n      return;\n    }\n\n    const listener = (event: Event): void => handlerRef.current(event);\n\n    window.addEventListener(type, listener);\n\n    return () => window.removeEventListener(type, listener);\n  }, [type, enabled]);\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,eACd,MACA,SACA,UAAiC,CAAC,GAC5B;CACN,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,gBAAgB;EACd,IAAI,CAAC,WAAW,OAAO,WAAW,aAChC;EAGF,MAAM,YAAY,UAAuB,WAAW,QAAQ,KAAK;EAEjE,OAAO,iBAAiB,MAAM,QAAQ;EAEtC,aAAa,OAAO,oBAAoB,MAAM,QAAQ;CACxD,GAAG,CAAC,MAAM,OAAO,CAAC;AACpB"}

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 { dataBindings, isRecord, materializeNode, materializeProps, materializeSchema, rowValue } from "./materialize.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 { 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/types.d.ts

@@ -1,81 +1,16 @@
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
-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 = {
-    dataBindings?: Record<string, string> | null;
-    hideWhenCollapsed?: boolean | null;
-};
-/**
- * Augmentable map of wire `type` string → props for consumer components. Apps
- * extend it via `declare module "@lattice-php/lattice"` so their custom components
- * gain strong prop types; the entries are generated by `php artisan lattice:typescript`.
- * Built-in components resolve through the generated `ComponentPropsMap` below, the
- * same way `ColumnProps` augments `ColumnPropsMap`. Types in neither fall back to a
- * loose bag.
- */
-export interface ComponentProps {
-}
-/**
- * Resolves a `type` string to its payload: consumer augmentations (`TAugment`)
- * win over generated built-ins (`TBuiltins`), then a loose fallback. The one
- * resolver behind the component, column and effect maps.
- */
-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 `LooseNode`.
- */
-export type NodeOfType<TType extends string = string> = string extends TType ? LooseNode : {
-    id?: string;
-    key?: string;
-    props: PropsOf<TType>;
-    schema?: Schema;
-    type: TType;
-};
-export type Node<TType extends string = string> = NodeOfType<TType>;
-/**
- * Distributes so `NodeUnionOf<"a" | "b">` is `NodeOfType<"a"> | NodeOfType<"b">`
- * — a discriminated union where `node.type` narrows `node.props`. Domains build
- * their node union from a generated `…NodeType` string union with this.
- */
-export type NodeUnionOf<TTypes extends string> = TTypes extends string ? NodeOfType<TTypes> : never;
-export type Schema = Node[];
+import { CommonNodeProps, ComponentProps, Node, NodeProps, NodeType, NodeUnionOf, Option, PageContainer as KnownPageContainer, ComponentPropsOf, ResolveProps, Schema, Breadcrumb, PageLayoutPayload, PagePayload as GeneratedPagePayload } from '../types/generated.js';
+export type { CommonNodeProps, ComponentProps, KnownPageContainer, Node, NodeProps, NodeType, NodeUnionOf, Option, ComponentPropsOf, ResolveProps, Schema, };
 /** Its `schema` holds exactly one Outlet node. */
-export type LayoutPayload = {
-    key: string;
-    schema: Schema;
-};
+export type LayoutPayload = PageLayoutPayload;
+export type PageBreadcrumb = Breadcrumb;
 /**
- * The page payload the server hydrates onto `lattice` (see PHP `Page::toArray`).
- * Hand-written rather than generated: its `schema`/`layout.schema` are component
- * trees serialized eagerly during the request (to fire side effects before the
- * final encode), so they cannot be derived from a value object as typed `Node[]`.
+ * The page payload the server hydrates onto `lattice` — the generated
+ * `PagePayload` (PHP `Http\PagePayload`), with `container` refined to the
+ * known-container union custom containers extend.
  */
-export type PagePayload = {
-    breadcrumbs: PageBreadcrumb[];
+export type PagePayload = Omit<GeneratedPagePayload, "container"> & {
     container: PageContainer;
-    layout: LayoutPayload | null;
-    listeners?: Listen[];
-    schema: Schema;
-    title: string | null;
-};
-export type PageBreadcrumb = {
-    href: string;
-    title: string;
 };
 export type PageContainer = KnownPageContainer | (string & {});
 export type RendererComponentProps<TType extends string = string> = {

package/dist/create-app.js

@@ -1,8 +1,8 @@
 import { initializeTheme } from "./appearance/index.js";
 import { extendRegistry } from "./core/registry.js";
 import { setDefaultRegistry } from "./core/registry-context.js";
-import { i18nConfigFromPageProps } from "./i18n/shared-props.js";
 import { LocaleReload } from "./i18n/locale-reload.js";
+import { i18nConfigFromPageProps } from "./i18n/shared-props.js";
 import { createLayoutResolver, createPageResolver, withVisitHeaders } from "./inertia.js";
 import { ProviderBase } from "./provider-base.js";
 import { registry } from "./registry.js";

package/dist/effects/dispatch.js

@@ -1,4 +1,4 @@
-import { LATTICE_EVENT } from "../events/event-names.js";
+import { LATTICE_EVENT } from "../core/event-names.js";
 import { builtinEffectHandlers } from "./registry.js";
 //#region resources/js/effects/dispatch.ts
 /**

package/dist/effects/dispatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"dispatch.js","names":[],"sources":["../../resources/js/effects/dispatch.ts"],"sourcesContent":["import type { ActionResult, Effect } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { builtinEffectHandlers } from \"./registry\";\nimport type { EffectHandlerRegistry } from \"./registry\";\n\nexport type ActionEffect = Effect;\n\nexport type ActionResponse = Partial<ActionResult>;\n\n/**\n * Run each effect through its handler. Handlers default to the built-ins; the\n * Provider passes a merged registry that also includes consumer-registered\n * handlers. An effect with no handler is warned about (dev) and skipped.\n */\nexport function dispatchEffects(\n  effects: ActionEffect[],\n  handlers: EffectHandlerRegistry = builtinEffectHandlers,\n): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  for (const effect of effects) {\n    const handler = handlers[effect.type];\n\n    if (handler === undefined) {\n      console.warn(`[lattice] No handler registered for effect type \"${effect.type}\".`);\n      continue;\n    }\n\n    handler(effect);\n  }\n}\n\nexport function dispatchActionError(error: unknown): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  window.dispatchEvent(new CustomEvent(LATTICE_EVENT.actionError, { detail: { error } }));\n}\n\nexport function getActionEffects(effects: unknown): ActionEffect[] {\n  return Array.isArray(effects) ? effects.filter(isActionEffect) : [];\n}\n\n/**\n * Structural guard for an effect on the wire. Intentionally open: it accepts any\n * object with a string `type`, not only the built-in types, so consumer-registered\n * effects pass through getActionEffects() and reach their handlers. Dispatch warns\n * on (and skips) a type with no registered handler.\n */\nexport function isActionEffect(effect: unknown): effect is ActionEffect {\n  return (\n    typeof effect === \"object\" &&\n    effect !== null &&\n    \"type\" in effect &&\n    typeof (effect as { type: unknown }).type === \"string\"\n  );\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,gBACd,SACA,WAAkC,uBAC5B;CACN,IAAI,OAAO,WAAW,aACpB;CAGF,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,UAAU,SAAS,OAAO;EAEhC,IAAI,YAAY,KAAA,GAAW;GACzB,QAAQ,KAAK,oDAAoD,OAAO,KAAK,GAAG;GAChF;EACF;EAEA,QAAQ,MAAM;CAChB;AACF;AAEA,SAAgB,oBAAoB,OAAsB;CACxD,IAAI,OAAO,WAAW,aACpB;CAGF,OAAO,cAAc,IAAI,YAAY,cAAc,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AACxF;AAEA,SAAgB,iBAAiB,SAAkC;CACjE,OAAO,MAAM,QAAQ,OAAO,IAAI,QAAQ,OAAO,cAAc,IAAI,CAAC;AACpE;;;;;;;AAQA,SAAgB,eAAe,QAAyC;CACtE,OACE,OAAO,WAAW,YAClB,WAAW,QACX,UAAU,UACV,OAAQ,OAA6B,SAAS;AAElD"}
+{"version":3,"file":"dispatch.js","names":[],"sources":["../../resources/js/effects/dispatch.ts"],"sourcesContent":["import type { ActionResult, Effect } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { builtinEffectHandlers } from \"./registry\";\nimport type { EffectHandlerRegistry } from \"./registry\";\n\nexport type ActionEffect = Effect;\n\nexport type ActionResponse = Partial<ActionResult>;\n\n/**\n * Run each effect through its handler. Handlers default to the built-ins; the\n * Provider passes a merged registry that also includes consumer-registered\n * handlers. An effect with no handler is warned about (dev) and skipped.\n */\nexport function dispatchEffects(\n  effects: ActionEffect[],\n  handlers: EffectHandlerRegistry = builtinEffectHandlers,\n): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  for (const effect of effects) {\n    const handler = handlers[effect.type];\n\n    if (handler === undefined) {\n      console.warn(`[lattice] No handler registered for effect type \"${effect.type}\".`);\n      continue;\n    }\n\n    handler(effect);\n  }\n}\n\nexport function dispatchActionError(error: unknown): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  window.dispatchEvent(new CustomEvent(LATTICE_EVENT.actionError, { detail: { error } }));\n}\n\nexport function getActionEffects(effects: unknown): ActionEffect[] {\n  return Array.isArray(effects) ? effects.filter(isActionEffect) : [];\n}\n\n/**\n * Structural guard for an effect on the wire. Intentionally open: it accepts any\n * object with a string `type`, not only the built-in types, so consumer-registered\n * effects pass through getActionEffects() and reach their handlers. Dispatch warns\n * on (and skips) a type with no registered handler.\n */\nexport function isActionEffect(effect: unknown): effect is ActionEffect {\n  return (\n    typeof effect === \"object\" &&\n    effect !== null &&\n    \"type\" in effect &&\n    typeof (effect as { type: unknown }).type === \"string\"\n  );\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,gBACd,SACA,WAAkC,uBAC5B;CACN,IAAI,OAAO,WAAW,aACpB;CAGF,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,UAAU,SAAS,OAAO;EAEhC,IAAI,YAAY,KAAA,GAAW;GACzB,QAAQ,KAAK,oDAAoD,OAAO,KAAK,GAAG;GAChF;EACF;EAEA,QAAQ,MAAM;CAChB;AACF;AAEA,SAAgB,oBAAoB,OAAsB;CACxD,IAAI,OAAO,WAAW,aACpB;CAGF,OAAO,cAAc,IAAI,YAAY,cAAc,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AACxF;AAEA,SAAgB,iBAAiB,SAAkC;CACjE,OAAO,MAAM,QAAQ,OAAO,IAAI,QAAQ,OAAO,cAAc,IAAI,CAAC;AACpE;;;;;;;AAQA,SAAgB,eAAe,QAAyC;CACtE,OACE,OAAO,WAAW,YAClB,WAAW,QACX,UAAU,UACV,OAAQ,OAA6B,SAAS;AAElD"}

package/dist/effects/registry.d.ts

@@ -1,17 +1,5 @@
-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
- * effect counterpart of `ComponentProps`.
- */
-export interface EffectProps {
-}
-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;
-    props: EffectPropsOf<TType>;
-};
+import { EffectOf, EffectProps, EffectPropsMap, EffectPropsOf } from '../types/generated.js';
+export type { EffectOf, EffectProps, EffectPropsOf };
 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>;
@@ -20,9 +8,5 @@ export type EffectHandlerRegistryFor<TTypes extends keyof EffectPropsMap & strin
  * register it through this — it erases the type parameter for the loose registry.
  */
 export declare function effectHandler<TType extends string>(_type: TType, fn: EffectHandler<TType>): EffectHandler;
-/**
- * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events
- * that toast/callout/modal/fragment/form subscribe to.
- */
 export declare const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string>;
 export declare function mergeEffectHandlers(...registries: Array<EffectHandlerRegistry | undefined>): EffectHandlerRegistry;

package/dist/effects/registry.js

@@ -1,4 +1,4 @@
-import { LATTICE_EVENT } from "../events/event-names.js";
+import { LATTICE_EVENT } from "../core/event-names.js";
 import { setLocale } from "../i18n/locale.js";
 import { router } from "@inertiajs/react";
 //#region resources/js/effects/registry.ts
@@ -20,15 +20,11 @@ function triggerDownload(url) {
 function bridge(event) {
 	return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect.props }));
 }
-/**
-* Imperative effects act directly; the rest bridge to the `lattice:*` DOM events
-* that toast/callout/modal/fragment/form subscribe to.
-*/
 var builtinEffectHandlers = {
 	"reload-page": () => router.reload(),
-	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)),
+	redirect: (effect) => router.visit(effect.props.url),
+	download: (effect) => triggerDownload(effect.props.url),
+	"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\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"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type {\n  EffectOf,\n  EffectProps,\n  EffectPropsMap,\n  EffectPropsOf,\n} from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\nexport type { EffectOf, EffectProps, EffectPropsOf };\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<TType extends keyof EffectPropsMap & string>(event: string): EffectHandler<TType> {\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. The export cast erases\n * the mapped type to the loose registry shape — the same variance erasure\n * effectHandler performs.\n */\nconst typedBuiltinHandlers: { [K in keyof EffectPropsMap]: EffectHandler<K> } = {\n  \"reload-page\": () => router.reload(),\n  redirect: (effect) => router.visit(effect.props.url),\n  download: (effect) => triggerDownload(effect.props.url),\n  \"locale-change\": (effect) => setLocale(effect.props.locale),\n  toast: bridge<\"toast\">(LATTICE_EVENT.toast),\n  callout: bridge<\"callout\">(LATTICE_EVENT.callout),\n  \"reload-component\": bridge<\"reload-component\">(LATTICE_EVENT.reloadComponent),\n  \"open-modal\": bridge<\"open-modal\">(LATTICE_EVENT.openModal),\n  \"close-modal\": bridge<\"close-modal\">(LATTICE_EVENT.closeModal),\n  \"reset-form\": bridge<\"reset-form\">(LATTICE_EVENT.resetForm),\n  \"toggle-sidebar\": bridge<\"toggle-sidebar\">(LATTICE_EVENT.toggleSidebar),\n};\n\nexport const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string> =\n  typedBuiltinHandlers as EffectHandlerRegistryFor<keyof EffectPropsMap & string>;\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":";;;;;;;;AAyBA,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,OAAoD,OAAqC;CAChG,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC;AAC1F;AAsBA,IAAa,wBACX;CAdA,qBAAqB,OAAO,OAAO;CACnC,WAAW,WAAW,OAAO,MAAM,OAAO,MAAM,GAAG;CACnD,WAAW,WAAW,gBAAgB,OAAO,MAAM,GAAG;CACtD,kBAAkB,WAAW,UAAU,OAAO,MAAM,MAAM;CAC1D,OAAO,OAAgB,cAAc,KAAK;CAC1C,SAAS,OAAkB,cAAc,OAAO;CAChD,oBAAoB,OAA2B,cAAc,eAAe;CAC5E,cAAc,OAAqB,cAAc,SAAS;CAC1D,eAAe,OAAsB,cAAc,UAAU;CAC7D,cAAc,OAAqB,cAAc,SAAS;CAC1D,kBAAkB,OAAyB,cAAc,aAAa;AAItE;AAEF,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}

package/dist/event-bridge.js

@@ -1,5 +1,6 @@
 import { isAppearance } from "./appearance/index.js";
-import { LATTICE_EVENT } from "./events/event-names.js";
+import { LATTICE_EVENT } from "./core/event-names.js";
+import { useWindowEvent } from "./core/hooks/use-window-event.js";
 import { onToast } from "./toast/toast.js";
 import { useEffect } from "react";
 //#region resources/js/event-bridge.tsx
@@ -8,28 +9,14 @@ function EventBridge({ onAppearanceChange, onLocaleChange, onToast: onToast$1 })
 		if (!onToast$1) return;
 		return onToast(onToast$1);
 	}, [onToast$1]);
-	useEffect(() => {
-		if (!onAppearanceChange) return;
-		const listener = (event) => {
-			const value = event.detail?.value;
-			if (isAppearance(value)) onAppearanceChange(value);
-		};
-		window.addEventListener(LATTICE_EVENT.appearanceChange, listener);
-		return () => {
-			window.removeEventListener(LATTICE_EVENT.appearanceChange, listener);
-		};
-	}, [onAppearanceChange]);
-	useEffect(() => {
-		if (!onLocaleChange) return;
-		const listener = (event) => {
-			const locale = event.detail?.locale;
-			if (typeof locale === "string" && locale !== "") onLocaleChange(locale);
-		};
-		window.addEventListener(LATTICE_EVENT.localeChange, listener);
-		return () => {
-			window.removeEventListener(LATTICE_EVENT.localeChange, listener);
-		};
-	}, [onLocaleChange]);
+	useWindowEvent(LATTICE_EVENT.appearanceChange, (event) => {
+		const value = event.detail?.value;
+		if (isAppearance(value)) onAppearanceChange?.(value);
+	}, { enabled: Boolean(onAppearanceChange) });
+	useWindowEvent(LATTICE_EVENT.localeChange, (event) => {
+		const locale = event.detail?.locale;
+		if (typeof locale === "string" && locale !== "") onLocaleChange?.(locale);
+	}, { enabled: Boolean(onLocaleChange) });
 	return null;
 }
 //#endregion

package/dist/event-bridge.js.map

@@ -1 +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"}
+{"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 { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { isAppearance, type Appearance } from \"./appearance\";\nimport { LATTICE_EVENT } from \"./core/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  useWindowEvent(\n    LATTICE_EVENT.appearanceChange,\n    (event) => {\n      const value = (event as AppearanceEvent).detail?.value;\n\n      if (isAppearance(value)) {\n        onAppearanceChange?.(value);\n      }\n    },\n    { enabled: Boolean(onAppearanceChange) },\n  );\n\n  useWindowEvent(\n    LATTICE_EVENT.localeChange,\n    (event) => {\n      const locale = (event as LocaleEvent).detail?.locale;\n\n      if (typeof locale === \"string\" && locale !== \"\") {\n        onLocaleChange?.(locale);\n      }\n    },\n    { enabled: Boolean(onLocaleChange) },\n  );\n\n  return null;\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,YAAY,EAAE,oBAAoB,gBAAgB,SAAA,aAA6B;CAC7F,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,OAAO,QAAkB,SAAO;CAClC,GAAG,CAAC,SAAO,CAAC;CAEZ,eACE,cAAc,mBACb,UAAU;EACT,MAAM,QAAS,MAA0B,QAAQ;EAEjD,IAAI,aAAa,KAAK,GACpB,qBAAqB,KAAK;CAE9B,GACA,EAAE,SAAS,QAAQ,kBAAkB,EAAE,CACzC;CAEA,eACE,cAAc,eACb,UAAU;EACT,MAAM,SAAU,MAAsB,QAAQ;EAE9C,IAAI,OAAO,WAAW,YAAY,WAAW,IAC3C,iBAAiB,MAAM;CAE3B,GACA,EAAE,SAAS,QAAQ,cAAc,EAAE,CACrC;CAEA,OAAO;AACT"}

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/file-upload.js

@@ -76,13 +76,13 @@ var FileUploadComponent = ({ node }) => {
 		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
 		previewUrlsRef.current.clear();
 	}, []);
-	const multipartFiles = items.filter((item) => item.file && !item.existing).map((item) => item.file);
+	const multipartFiles = useMemo(() => items.filter((item) => item.file && !item.existing).map((item) => item.file), [items]);
 	useEffect(() => {
 		if (signed || !fileInputRef.current) return;
 		const transfer = new DataTransfer();
 		multipartFiles.forEach((file) => transfer.items.add(file));
 		fileInputRef.current.files = transfer.files;
-	});
+	}, [multipartFiles, signed]);
 	function createPreviewUrl(file) {
 		if (!props.image) return;
 		const url = URL.createObjectURL(file);
@@ -172,10 +172,8 @@ var FileUploadComponent = ({ node }) => {
 	function removeItem(id) {
 		const target = items.find((item) => item.id === id);
 		if (target) revokePreviewUrl(target);
-		setItems((prev) => {
-			if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
-			return prev.filter((i) => i.id !== id);
-		});
+		if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
+		setItems((prev) => prev.filter((i) => i.id !== id));
 	}
 	if (hidden) return null;
 	return /* @__PURE__ */ jsx(FormFieldFrame, {

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { SignedUpload } from \"@lattice-php/lattice/types/generated\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValues, useSetFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignedUpload;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method.toUpperCase(), sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"form.file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"form.file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <IconButton\n                  size=\"sm\"\n                  icon=\"x\"\n                  label={t(\"form.file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                />\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAS,kBAAkB,SAAkB,MAAkC;CAC7E,IAAI,MAAM,QAAQ,IAAI,GACpB,OACE,MAAM,QAAQ,OAAO,KACrB,QAAQ,WAAW,KAAK,UACxB,QAAQ,OAAO,OAAO,UAAU,UAAU,KAAK,MAAM;CAIzD,OAAO,YAAY;AACrB;AAEA,IAAa,uBAA+D,EAAE,WAAW;CACvF,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,QAAQ,cAAc,WAAW,eAAe;CACxD,MAAM,OAAO,MAAM;CACnB,MAAM,QAAQ,cAAc;CAC5B,MAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,IAAI;CACjD,MAAM,WAAW,QAAQ,MAAM,SAAS,IAAI,IAAI;CAChD,MAAM,YAAY;CAClB,MAAM,SAAS,cAAc;CAC7B,MAAM,WAAW,gBAAgB;CACjC,MAAM,UAAU,MAAM;CACtB,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,iBAAiB,uBAAoB,IAAI,IAAI,CAAC;CACpD,MAAM,SAAS,YAAY;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,MAAM;CACvB,MAAM,YAAY,WAAW,GAAG,QAAQ,MAAM;CAiB9C,MAAM,CAAC,OAAO,YAAY,SAfV,eAEX,MAAM,SAAS,CAAC,GAAG,KAAK,UAAU;EACjC,IAAI,OAAO,WAAW;EACtB,MAAM,KAAK;EACX,MAAM,KAAK;EACX,QAAQ;EACR,UAAU;EACV,KAAK,KAAK;EACV,KAAK,KAAK;EACV,OAAO,KAAK;EACZ,UAAU;CACZ,EAAE,GACJ,CAAC,MAAM,KAAK,CAE6B,CAAO;CAClD,MAAM,CAAC,eAAe,oBAAoB,SAAmB,CAAC,CAAC;CAE/D,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,OAAO,MACV,QAAQ,SAAS,CAAC,KAAK,YAAY,KAAK,OAAO,KAAK,WAAW,OAAO,EACtE,KAAK,SAAS,KAAK,GAAa;EACnC,MAAM,OAAO,WAAW,OAAQ,KAAK,MAAM;EAE3C,IAAI,OAAO;GACT,IAAI,CAAC,kBAAkB,MAAM,SAAS,IAAI,GAAG,IAAI,GAC/C,MAAM,SAAS,MAAM,IAAI;GAG3B;EACF;EAEA,SAAS,MAAM,IAAI;CACrB,GAAG;EAAC;EAAO;EAAU;EAAM;EAAO;EAAU;CAAM,CAAC;CAEnD,gBAAgB;EACd,IAAI,CAAC,UAAU,OACb;EAGF,SAAS,GAAG,KAAK,YAAY,aAAa;CAC5C,GAAG;EAAC;EAAM;EAAe;EAAO;EAAU;CAAM,CAAC;CAEjD,sBACc;EACV,eAAe,QAAQ,SAAS,QAAQ,IAAI,gBAAgB,GAAG,CAAC;EAChE,eAAe,QAAQ,MAAM;CAC/B,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,MACpB,QAAQ,SAAS,KAAK,QAAQ,CAAC,KAAK,QAAQ,EAC5C,KAAK,SAAS,KAAK,IAAY;CAClC,gBAAgB;EACd,IAAI,UAAU,CAAC,aAAa,SAC1B;EAGF,MAAM,WAAW,IAAI,aAAa;EAClC,eAAe,SAAS,SAAS,SAAS,MAAM,IAAI,IAAI,CAAC;EACzD,aAAa,QAAQ,QAAQ,SAAS;CACxC,CAAC;CAED,SAAS,iBAAiB,MAAgC;EACxD,IAAI,CAAC,MAAM,OACT;EAGF,MAAM,MAAM,IAAI,gBAAgB,IAAI;EACpC,eAAe,QAAQ,IAAI,GAAG;EAE9B,OAAO;CACT;CAEA,SAAS,iBAAiB,MAAkB;EAC1C,IAAI,CAAC,KAAK,OAAO,CAAC,eAAe,QAAQ,IAAI,KAAK,GAAG,GACnD;EAGF,IAAI,gBAAgB,KAAK,GAAG;EAC5B,eAAe,QAAQ,OAAO,KAAK,GAAG;CACxC;CAEA,eAAe,cAAc,MAAY,MAA2B;EAClE,MAAM,WAAW,MAAM,SAAS,QAAQ;GACtC,QAAQ;GACR,KAAK;GACL,MAAM,KAAK,UAAU;IACnB,GAAG;IACH,SAAS;IACT,UAAU,KAAK;IACf,aAAa,KAAK;GACpB,CAAC;GACD,cAAc;EAChB,CAAC;EAED,IAAI,CAAC,SAAS,IAAI;GAChB,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;IAAE,GAAG;IAAO,QAAQ;GAAQ,IAAI,KAAM,CACpF;GAEA;EACF;EAEA,MAAM,OAAQ,MAAM,SAAS,KAAK;EAElC,MAAM,IAAI,SAAe,YAAY;GACnC,MAAM,UAAU,IAAI,eAAe;GACnC,QAAQ,KAAK,KAAK,OAAO,YAAY,GAAG,KAAK,KAAK,IAAI;GACtD,OAAO,QAAQ,KAAK,OAAO,EAAE,SAAS,CAAC,KAAK,WAC1C,QAAQ,iBAAiB,KAAK,OAAO,KAAK,CAAC,CAC7C;GACA,QAAQ,OAAO,cAAc,UAAU;IACrC,IAAI,MAAM,kBAAkB;KAC1B,MAAM,WAAW,KAAK,MAAO,MAAM,SAAS,MAAM,QAAS,GAAG;KAC9D,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;MAAE,GAAG;MAAO;KAAS,IAAI,KAAM,CAC7E;IACF;GACF;GACA,QAAQ,eAAe;IACrB,UAAU,SACR,KAAK,KAAK,UACR,MAAM,OAAO,KAAK,KACd;KACE,GAAG;KACH,QAAQ,QAAQ,SAAS,MAAM,UAAU;KACzC,KAAK,KAAK;KACV,UAAU;IACZ,IACA,KACN,CACF;IACA,QAAQ;GACV;GACA,QAAQ,gBAAgB;IACtB,UAAU,SACR,KAAK,KAAK,UAAW,MAAM,OAAO,KAAK,KAAK;KAAE,GAAG;KAAO,QAAQ;IAAQ,IAAI,KAAM,CACpF;IACA,QAAQ;GACV;GACA,QAAQ,KAAK,IAAI;EACnB,CAAC;CACH;CAEA,SAAS,SAAS,UAAiC;EACjD,IAAI,CAAC,YAAY,QACf;EAGF,MAAM,WAAW,MAAM,KAAK,QAAQ;EACpC,MAAM,OAAO,SAAS,KAAW,UAAU;GACzC,IAAI,OAAO,WAAW;GACtB,MAAM,KAAK;GACX,MAAM,KAAK;GACX,QAAQ,SAAS,cAAc;GAC/B,UAAU;GACV;GACA,KAAK,iBAAiB,IAAI;GAC1B,UAAU;EACZ,EAAE;EAEF,IAAI,CAAC,UAAU;GACb,MAAM,QAAQ,gBAAgB;GAE9B,IAAI,CAAC,OAAO;IACV,MAAM,iBAAiB,MACpB,QAAQ,SAAS,KAAK,YAAY,KAAK,KAAK,EAC5C,KAAK,SAAS,KAAK,KAAe;IAErC,IAAI,eAAe,SAAS,GAC1B,kBAAkB,WAAW,CAAC,GAAG,QAAQ,GAAG,cAAc,CAAC;GAE/D;EACF;EAEA,UAAU,SAAU,WAAW,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI,IAAK;EAEzD,IAAI,QACF,KAAK,SAAS,MAAM,UAAU,KAAK,cAAc,MAAM,SAAS,MAAM,CAAC;CAE3E;CAEA,SAAS,WAAW,IAAkB;EACpC,MAAM,SAAS,MAAM,MAAM,SAAS,KAAK,OAAO,EAAE;EAElD,IAAI,QACF,iBAAiB,MAAM;EAGzB,UAAU,SAAS;GACjB,IAAI,QAAQ,YAAY,OAAO,SAAS,CAAC,OACvC,kBAAkB,WAAW,CAAC,GAAG,QAAQ,OAAO,KAAe,CAAC;GAElE,OAAO,KAAK,QAAQ,MAAM,EAAE,OAAO,EAAE;EACvC,CAAC;CACH;CAEA,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EAChB;EACI;YAEV,qBAAC,OAAD;GACE,WAAU;GACV,aAAW,aAAa,IAAI;GAC5B,aAAa,UAAU,MAAM,eAAe;GAC5C,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,SAAS,MAAM,aAAa,KAAK;GACnC;aAPF;IASE,oBAAC,UAAD;KACE,WAAU;KACV,UAAU;KACV,eAAe,aAAa,SAAS,MAAM;KAC3C,MAAK;eAEJ,EAAE,6BAA6B,oCAAoC;IAC9D,CAAA;IAER,oBAAC,MAAD;KACE,WAAW,MAAM,QAAQ,0CAA0C;eAElE,MAAM,KAAK,SACV,qBAAC,MAAD;MACE,WACE,MAAM,QACF,+FACA;gBAJR;OAQG,MAAM,SAAS,KAAK,MACnB,oBAAC,OAAD;QACE,KAAK,KAAK;QACV,WAAU;QACV,aAAW,aAAa,GAAG,KAAK,SAAS;QACzC,KAAK,KAAK;OACX,CAAA,IACC;OACJ,qBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,oBAAC,QAAD;UAAM,WAAU;UAAiB,aAAW,aAAa,GAAG,KAAK,MAAM;oBACpE,KAAK;SACF,CAAA;SACL,KAAK,WAAW,eACf,qBAAC,QAAD;UAAM,WAAU;oBAAhB,CAA4C,KAAK,UAAS,GAAO;;SAElE,KAAK,WAAW,WACf,oBAAC,QAAD;UAAM,WAAU;oBACb,EAAE,2BAA2B,QAAQ;SAClC,CAAA;QAEL;;QACH,CAAC,KAAK,YAAY,CAAC,UACnB,oBAAC,YAAD;QACE,MAAK;QACL,MAAK;QACL,OAAO,EAAE,2BAA2B,mBAAmB,EAAE,MAAM,KAAK,KAAK,CAAC;QAC1E,aAAW,aACT,KAAK,WAAW,GAAG,KAAK,oBAAoB,GAAG,KAAK,QACtD;QACA,UAAU;QACV,eAAe,WAAW,KAAK,EAAE;OAClC,CAAA;OAEF,UAAU,CAAC,KAAK,YAAY,KAAK,OAAO,KAAK,WAAW,WACvD,oBAAC,SAAD;QACE,aAAW,aAAa,GAAG,KAAK,UAAU;QAC1C,MAAM;QACN,MAAK;QACL,OAAO,KAAK;OACb,CAAA;MAED;QA3CG,KAAK,EA2CR,CACL;IACC,CAAA;IAEH,CAAC,SACA,cAAc,KAAK,UACjB,oBAAC,SAAD;KAAmB,MAAM,GAAG,KAAK;KAAc,MAAK;KAAS,OAAO;IAAQ,GAAhE,KAAgE,CAC7E;IAEH,oBAAC,SAAD;KACE,QAAQ,MAAM,UAAU,KAAA;KACxB,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW,aAAa,GAAG,KAAK,OAAO;KACvC,IAAI;KACM;KACV,MAAM,SAAS,KAAA,IAAY;KAC3B,WAAW,UAAU;MACnB,SAAS,MAAM,OAAO,KAAK;MAC3B,IAAI,QACF,MAAM,OAAO,QAAQ;KAEzB;KACA,KAAK;KACL,MAAK;IACN,CAAA;GACE;;CACS,CAAA;AAEpB"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { SignedUpload } from \"@lattice-php/lattice/types/generated\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValues, useSetFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = useMemo(\n    () => items.filter((item) => item.file && !item.existing).map((item) => item.file as File),\n    [items],\n  );\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  }, [multipartFiles, signed]);\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignedUpload;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method.toUpperCase(), sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    if (target?.existing && target.token && !scope) {\n      setRemovedTokens((tokens) => [...tokens, target.token as string]);\n    }\n\n    setItems((prev) => prev.filter((i) => i.id !== id));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"form.file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"form.file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <IconButton\n                  size=\"sm\"\n                  icon=\"x\"\n                  label={t(\"form.file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                />\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { materializeSchema } from "../../../core/materialize.js";
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
 import { Renderer } from "../../../core/renderer.js";
@@ -14,7 +15,6 @@ import { useDependentField } from "../../hooks/use-dependent-field.js";
 import { fieldDomName } from "../../lib/field-dom-name.js";
 import { controlSurface } from "../../../ui/control.js";
 import { Combobox } from "../../../ui/combobox.js";
-import { materializeSchema } from "../../../core/materialize.js";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/select.tsx
@@ -35,7 +35,7 @@ var SelectComponent = ({ node }) => {
 	const scope = useFieldScope();
 	const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);
 	const errorKey = scope ? scope.errorKey(name) : name;
-	const searchKey = scope ? scope.errorKey(name) : name;
+	const searchKey = errorKey;
 	const placeholder = props.placeholder || "Select…";
 	const multiple = props.multiple;
 	const searchable = props.searchable;

package/dist/form/components/fields/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => {\n              const color = colorFor(value);\n\n              return (\n                <span\n                  className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                  key={value}\n                >\n                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"Remove {{label}}\", {\n                        label: labelFor(value),\n                      })}\n                      data-test={`select-${name}-remove-${value}`}\n                      className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                      onClick={() => remove(value)}\n                      type=\"button\"\n                    >\n                      <Icon name=\"x\" />\n                    </button>\n                  )}\n                </span>\n              );\n            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = errorKey;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => {\n              const color = colorFor(value);\n\n              return (\n                <span\n                  className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                  key={value}\n                >\n                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"Remove {{label}}\", {\n                        label: labelFor(value),\n                      })}\n                      data-test={`select-${name}-remove-${value}`}\n                      className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                      onClick={() => remove(value)}\n                      type=\"button\"\n                    >\n                      <Icon name=\"x\" />\n                    </button>\n                  )}\n                </span>\n              );\n            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}