@lattice-php/lattice 0.4.0 → 0.5.0

package/dist/form/components/prefill-targets.d.ts

@@ -11,7 +11,6 @@ type PrefillSnapshot = {
 };
 export { getPath } from './form-path';
 export declare function collectPrefillTargets(nodes: Node[] | undefined, values: Record<string, unknown>): PrefillTarget[];
-export declare function applyPrefillValue(setValue: (name: string, value: unknown) => void, path: string, value: unknown): void;
 export declare function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[];
 export declare function seededOverrides(targets: PrefillTarget[], values: Record<string, unknown>): string[];
 export declare function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string>;

package/dist/form/components/prefill-targets.js

@@ -44,9 +44,6 @@ function collectPrefillTargets(nodes, values) {
 	walk(nodes);
 	return targets;
 }
-function applyPrefillValue(setValue, path, value) {
-	setValue(path, value);
-}
 function pathsToClear(previous, next) {
 	const previousByKey = new Map(previous.targets.map((target) => [target.overrideKey, target]));
 	return next.targets.filter((target) => {
@@ -68,6 +65,6 @@ function pruneOverrides(overrides, targets) {
 	return new Set([...overrides].filter((key) => liveKeys.has(key)));
 }
 //#endregion
-export { applyPrefillValue, collectPrefillTargets, getPath, pathsToClear, pruneOverrides, seededOverrides };
+export { collectPrefillTargets, getPath, pathsToClear, pruneOverrides, seededOverrides };
 
 //# sourceMappingURL=prefill-targets.js.map

package/dist/form/components/prefill-targets.js.map

@@ -1 +1 @@
-{"version":3,"file":"prefill-targets.js","names":[],"sources":["../../../resources/js/form/components/prefill-targets.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { fieldProps } from \"./field-props\";\nimport { appendPath, getPath } from \"./form-path\";\nimport { buildOverrideKey, rowIdFrom } from \"./override-keys\";\n\nexport type PrefillTarget = {\n  path: string;\n  overrideKey: string;\n  resetOn: string[];\n  refreshOn: string[];\n};\n\ntype PrefillSnapshot = {\n  targets: PrefillTarget[];\n  values: Record<string, unknown>;\n};\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst ROW_COLLECTION_TYPES = new Set([\"field.builder\", \"field.repeater\"]);\n\nexport { getPath } from \"./form-path\";\n\nfunction mapDep(dep: string, rowPath: string | null): string {\n  if (dep.startsWith(\"@\")) {\n    return dep.slice(1);\n  }\n\n  return rowPath === null ? dep : appendPath(rowPath, dep);\n}\n\nfunction targetFor(\n  node: Node,\n  rowPath: string | null,\n  identityCollectionPath: string | null,\n  index = 0,\n  row: Record<string, unknown> = {},\n): PrefillTarget | null {\n  const props = fieldProps(node);\n\n  if (!props.editablePrefill || !props.name) {\n    return null;\n  }\n\n  const rowId = rowIdFrom(row);\n\n  return {\n    path: rowPath === null ? props.name : appendPath(rowPath, props.name),\n    overrideKey:\n      identityCollectionPath === null\n        ? props.name\n        : buildOverrideKey(identityCollectionPath, rowId, index, props.name),\n    resetOn: (props.prefillResetOn ?? []).map((dep) => mapDep(dep, rowPath)),\n    refreshOn: (props.prefillRefreshOn ?? []).map((dep) => mapDep(dep, rowPath)),\n  };\n}\n\nexport function collectPrefillTargets(\n  nodes: Node[] | undefined,\n  values: Record<string, unknown>,\n): PrefillTarget[] {\n  const targets: PrefillTarget[] = [];\n\n  const walk = (\n    list: Node[] | undefined,\n    rowPath: string | null = null,\n    identityRowPath: string | null = null,\n    identityCollectionPath: string | null = null,\n    index = 0,\n    row: Record<string, unknown> = {},\n  ): void => {\n    for (const node of list ?? []) {\n      if (ROW_COLLECTION_TYPES.has(node.type)) {\n        const name = fieldProps(node).name;\n        if (name) {\n          const childCollectionPath = appendPath(rowPath, name);\n          const childIdentityCollectionPath = appendPath(identityRowPath, name);\n          const storedRows = getPath(values, childCollectionPath);\n          const rows = Array.isArray(storedRows)\n            ? (storedRows as Array<Record<string, unknown>>)\n            : [];\n          const blocks = (node as unknown as { blocks?: Block[] }).blocks;\n\n          rows.forEach((childRow, childIndex) => {\n            const template = blocks\n              ? (blocks.find((block) => block.type === childRow.type)?.schema ?? [])\n              : (node.schema ?? []);\n\n            walk(\n              template,\n              appendPath(childCollectionPath, childIndex),\n              appendPath(childIdentityCollectionPath, rowIdFrom(childRow) ?? childIndex),\n              childIdentityCollectionPath,\n              childIndex,\n              childRow,\n            );\n          });\n        }\n\n        continue;\n      }\n\n      const target = targetFor(node, rowPath, identityCollectionPath, index, row);\n      if (target) {\n        targets.push(target);\n      }\n\n      walk(node.schema, rowPath, identityRowPath, identityCollectionPath, index, row);\n    }\n  };\n\n  walk(nodes);\n\n  return targets;\n}\n\nexport function applyPrefillValue(\n  setValue: (name: string, value: unknown) => void,\n  path: string,\n  value: unknown,\n): void {\n  setValue(path, value);\n}\n\nexport function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[] {\n  const previousByKey = new Map(\n    previous.targets.map((target) => [target.overrideKey, target] as const),\n  );\n\n  return next.targets\n    .filter((target) => {\n      const previousTarget = previousByKey.get(target.overrideKey);\n\n      return target.resetOn.some((dep, index) => {\n        const previousDep = previousTarget?.resetOn[index] ?? dep;\n\n        return !Object.is(getPath(previous.values, previousDep), getPath(next.values, dep));\n      });\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function seededOverrides(\n  targets: PrefillTarget[],\n  values: Record<string, unknown>,\n): string[] {\n  return targets\n    .filter((target) => {\n      const value = getPath(values, target.path);\n\n      return value !== undefined && value !== null && value !== \"\";\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string> {\n  const liveKeys = new Set(targets.map((target) => target.overrideKey));\n\n  return new Set([...overrides].filter((key) => liveKeys.has(key)));\n}\n"],"mappings":"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"}
+{"version":3,"file":"prefill-targets.js","names":[],"sources":["../../../resources/js/form/components/prefill-targets.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { fieldProps } from \"./field-props\";\nimport { appendPath, getPath } from \"./form-path\";\nimport { buildOverrideKey, rowIdFrom } from \"./override-keys\";\n\nexport type PrefillTarget = {\n  path: string;\n  overrideKey: string;\n  resetOn: string[];\n  refreshOn: string[];\n};\n\ntype PrefillSnapshot = {\n  targets: PrefillTarget[];\n  values: Record<string, unknown>;\n};\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst ROW_COLLECTION_TYPES = new Set([\"field.builder\", \"field.repeater\"]);\n\nexport { getPath } from \"./form-path\";\n\nfunction mapDep(dep: string, rowPath: string | null): string {\n  if (dep.startsWith(\"@\")) {\n    return dep.slice(1);\n  }\n\n  return rowPath === null ? dep : appendPath(rowPath, dep);\n}\n\nfunction targetFor(\n  node: Node,\n  rowPath: string | null,\n  identityCollectionPath: string | null,\n  index = 0,\n  row: Record<string, unknown> = {},\n): PrefillTarget | null {\n  const props = fieldProps(node);\n\n  if (!props.editablePrefill || !props.name) {\n    return null;\n  }\n\n  const rowId = rowIdFrom(row);\n\n  return {\n    path: rowPath === null ? props.name : appendPath(rowPath, props.name),\n    overrideKey:\n      identityCollectionPath === null\n        ? props.name\n        : buildOverrideKey(identityCollectionPath, rowId, index, props.name),\n    resetOn: (props.prefillResetOn ?? []).map((dep) => mapDep(dep, rowPath)),\n    refreshOn: (props.prefillRefreshOn ?? []).map((dep) => mapDep(dep, rowPath)),\n  };\n}\n\nexport function collectPrefillTargets(\n  nodes: Node[] | undefined,\n  values: Record<string, unknown>,\n): PrefillTarget[] {\n  const targets: PrefillTarget[] = [];\n\n  const walk = (\n    list: Node[] | undefined,\n    rowPath: string | null = null,\n    identityRowPath: string | null = null,\n    identityCollectionPath: string | null = null,\n    index = 0,\n    row: Record<string, unknown> = {},\n  ): void => {\n    for (const node of list ?? []) {\n      if (ROW_COLLECTION_TYPES.has(node.type)) {\n        const name = fieldProps(node).name;\n        if (name) {\n          const childCollectionPath = appendPath(rowPath, name);\n          const childIdentityCollectionPath = appendPath(identityRowPath, name);\n          const storedRows = getPath(values, childCollectionPath);\n          const rows = Array.isArray(storedRows)\n            ? (storedRows as Array<Record<string, unknown>>)\n            : [];\n          const blocks = (node as unknown as { blocks?: Block[] }).blocks;\n\n          rows.forEach((childRow, childIndex) => {\n            const template = blocks\n              ? (blocks.find((block) => block.type === childRow.type)?.schema ?? [])\n              : (node.schema ?? []);\n\n            walk(\n              template,\n              appendPath(childCollectionPath, childIndex),\n              appendPath(childIdentityCollectionPath, rowIdFrom(childRow) ?? childIndex),\n              childIdentityCollectionPath,\n              childIndex,\n              childRow,\n            );\n          });\n        }\n\n        continue;\n      }\n\n      const target = targetFor(node, rowPath, identityCollectionPath, index, row);\n      if (target) {\n        targets.push(target);\n      }\n\n      walk(node.schema, rowPath, identityRowPath, identityCollectionPath, index, row);\n    }\n  };\n\n  walk(nodes);\n\n  return targets;\n}\n\nexport function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[] {\n  const previousByKey = new Map(\n    previous.targets.map((target) => [target.overrideKey, target] as const),\n  );\n\n  return next.targets\n    .filter((target) => {\n      const previousTarget = previousByKey.get(target.overrideKey);\n\n      return target.resetOn.some((dep, index) => {\n        const previousDep = previousTarget?.resetOn[index] ?? dep;\n\n        return !Object.is(getPath(previous.values, previousDep), getPath(next.values, dep));\n      });\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function seededOverrides(\n  targets: PrefillTarget[],\n  values: Record<string, unknown>,\n): string[] {\n  return targets\n    .filter((target) => {\n      const value = getPath(values, target.path);\n\n      return value !== undefined && value !== null && value !== \"\";\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string> {\n  const liveKeys = new Set(targets.map((target) => target.overrideKey));\n\n  return new Set([...overrides].filter((key) => liveKeys.has(key)));\n}\n"],"mappings":"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"}

package/dist/form/components/use-form-resolver.js

@@ -1,7 +1,7 @@
 import { walkFields } from "./field-props.js";
 import { postFormAction } from "./form-transport.js";
 import { getPath } from "./form-path.js";
-import { applyPrefillValue, collectPrefillTargets, pathsToClear, pruneOverrides, seededOverrides } from "./prefill-targets.js";
+import { collectPrefillTargets, pathsToClear, pruneOverrides, seededOverrides } from "./prefill-targets.js";
 import { useFormValues, useSetFormValue } from "./values.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region resources/js/form/components/use-form-resolver.ts
@@ -70,7 +70,7 @@ function useFormResolver(action, componentRef, nodes) {
 				const targetsByPath = new Map(targetsRef.current.map((target) => [target.path, target]));
 				for (const [path, value] of Object.entries(response.prefill ?? {})) {
 					const target = targetsByPath.get(path);
-					if (target && !overrides.current.has(target.overrideKey)) applyPrefillValue(setValue, path, value);
+					if (target && !overrides.current.has(target.overrideKey)) setValue(path, value);
 				}
 				if (response.fields) setResolved(response.fields);
 			}).catch(() => {});

package/dist/form/components/use-form-resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/components/use-form-resolver.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { walkFields } from \"./field-props\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"./form-transport\";\nimport {\n  applyPrefillValue,\n  collectPrefillTargets,\n  getPath,\n  pathsToClear,\n  pruneOverrides,\n  seededOverrides,\n} from \"./prefill-targets\";\nimport type { PrefillController } from \"./prefill-context\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype ResolveResponse = {\n  fields?: Record<string, Node>;\n  values?: Record<string, unknown>;\n  prefill?: Record<string, unknown>;\n};\n\nexport type FormResolver = {\n  nodes: Record<string, Node>;\n  markUserEdit: PrefillController[\"markUserEdit\"];\n};\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): FormResolver {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);\n\n  const overrides = useRef<Set<string>>(new Set());\n  const seededOverrideKeys = useRef<Set<string>>(new Set());\n  const previousValues = useRef<Record<string, unknown>>(values);\n  const previousTargets = useRef(targets);\n\n  // Read targets via a ref inside the effect: `targets` changes identity on every\n  // value change, but the effect must fire only when `watchSignature` changes\n  // (which already reflects added/removed target paths). Keeping `targets` out of\n  // the dep array preserves the targeted watch in non-\"any\" mode.\n  const targetsRef = useRef(targets);\n  targetsRef.current = targets;\n\n  useLayoutEffect(() => {\n    const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));\n    seededOverrideKeys.current = new Set(\n      [...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)),\n    );\n    const freshTargets = targets.filter(\n      (target) => !seededOverrideKeys.current.has(target.overrideKey),\n    );\n\n    // Layout ordering seeds loaded values before the first resolve effect can apply prefill.\n    for (const overrideKey of seededOverrides(freshTargets, values)) {\n      overrides.current.add(overrideKey);\n    }\n\n    for (const target of freshTargets) {\n      seededOverrideKeys.current.add(target.overrideKey);\n    }\n  }, [targets, values]);\n\n  const markUserEdit = useCallback((overrideKey: string) => {\n    overrides.current.add(overrideKey);\n  }, []);\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    let any = false;\n    walkFields(nodes, (props) => {\n      if (Array.isArray(props.dependsOnKeys)) {\n        for (const key of props.dependsOnKeys) {\n          keys.add(String(key));\n        }\n      }\n      if (props.dependsOnAny) {\n        any = true;\n      }\n    });\n    return { keys: [...keys], any };\n  }, [nodes]);\n\n  const watchPaths = useMemo(() => {\n    const set = new Set<string>(watch.keys);\n    for (const target of targets) {\n      for (const dep of target.resetOn) {\n        set.add(dep);\n      }\n      for (const dep of target.refreshOn) {\n        set.add(dep);\n      }\n    }\n    return [...set];\n  }, [watch.keys, targets]);\n\n  // In \"any\" mode the values store keeps a stable reference until something\n  // actually changes, so its identity is the change signal. Otherwise hash the\n  // watched paths (form-level and per-row).\n  const watchSignature = watch.any\n    ? values\n    : JSON.stringify(watchPaths.map((path) => getPath(values, path)));\n\n  useEffect(() => {\n    if (watchPaths.length === 0 && !watch.any) {\n      return;\n    }\n\n    const previous = previousValues.current;\n    previousValues.current = values;\n\n    // `resetOn` deps unlock a path (a fresh product gives a fresh price); `refreshOn`\n    // deps only re-ask the server and never clear an override (a customer change\n    // re-prices untouched rows but leaves user-edited ones alone).\n    for (const overrideKey of pathsToClear(\n      { targets: previousTargets.current, values: previous },\n      { targets: targetsRef.current, values },\n    )) {\n      overrides.current.delete(overrideKey);\n    }\n    previousTargets.current = targetsRef.current;\n\n    // Override ownership is row-id keyed, so pruning removes departed rows without reindex drift.\n    overrides.current = pruneOverrides(overrides.current, targetsRef.current);\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          const targetsByPath = new Map(\n            targetsRef.current.map((target) => [target.path, target] as const),\n          );\n          for (const [path, value] of Object.entries(response.prefill ?? {})) {\n            const target = targetsByPath.get(path);\n\n            if (target && !overrides.current.has(target.overrideKey)) {\n              applyPrefillValue(setValue, path, value);\n            }\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watchSignature, action, componentRef, watch.any, setValue]);\n\n  return { nodes: resolved, markUserEdit };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/components/use-form-resolver.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { walkFields } from \"./field-props\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"./form-transport\";\nimport {\n  collectPrefillTargets,\n  getPath,\n  pathsToClear,\n  pruneOverrides,\n  seededOverrides,\n} from \"./prefill-targets\";\nimport type { PrefillController } from \"./prefill-context\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype ResolveResponse = {\n  fields?: Record<string, Node>;\n  values?: Record<string, unknown>;\n  prefill?: Record<string, unknown>;\n};\n\nexport type FormResolver = {\n  nodes: Record<string, Node>;\n  markUserEdit: PrefillController[\"markUserEdit\"];\n};\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): FormResolver {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);\n\n  const overrides = useRef<Set<string>>(new Set());\n  const seededOverrideKeys = useRef<Set<string>>(new Set());\n  const previousValues = useRef<Record<string, unknown>>(values);\n  const previousTargets = useRef(targets);\n\n  // Read targets via a ref inside the effect: `targets` changes identity on every\n  // value change, but the effect must fire only when `watchSignature` changes\n  // (which already reflects added/removed target paths). Keeping `targets` out of\n  // the dep array preserves the targeted watch in non-\"any\" mode.\n  const targetsRef = useRef(targets);\n  targetsRef.current = targets;\n\n  useLayoutEffect(() => {\n    const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));\n    seededOverrideKeys.current = new Set(\n      [...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)),\n    );\n    const freshTargets = targets.filter(\n      (target) => !seededOverrideKeys.current.has(target.overrideKey),\n    );\n\n    // Layout ordering seeds loaded values before the first resolve effect can apply prefill.\n    for (const overrideKey of seededOverrides(freshTargets, values)) {\n      overrides.current.add(overrideKey);\n    }\n\n    for (const target of freshTargets) {\n      seededOverrideKeys.current.add(target.overrideKey);\n    }\n  }, [targets, values]);\n\n  const markUserEdit = useCallback((overrideKey: string) => {\n    overrides.current.add(overrideKey);\n  }, []);\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    let any = false;\n    walkFields(nodes, (props) => {\n      if (Array.isArray(props.dependsOnKeys)) {\n        for (const key of props.dependsOnKeys) {\n          keys.add(String(key));\n        }\n      }\n      if (props.dependsOnAny) {\n        any = true;\n      }\n    });\n    return { keys: [...keys], any };\n  }, [nodes]);\n\n  const watchPaths = useMemo(() => {\n    const set = new Set<string>(watch.keys);\n    for (const target of targets) {\n      for (const dep of target.resetOn) {\n        set.add(dep);\n      }\n      for (const dep of target.refreshOn) {\n        set.add(dep);\n      }\n    }\n    return [...set];\n  }, [watch.keys, targets]);\n\n  // In \"any\" mode the values store keeps a stable reference until something\n  // actually changes, so its identity is the change signal. Otherwise hash the\n  // watched paths (form-level and per-row).\n  const watchSignature = watch.any\n    ? values\n    : JSON.stringify(watchPaths.map((path) => getPath(values, path)));\n\n  useEffect(() => {\n    if (watchPaths.length === 0 && !watch.any) {\n      return;\n    }\n\n    const previous = previousValues.current;\n    previousValues.current = values;\n\n    // `resetOn` deps unlock a path (a fresh product gives a fresh price); `refreshOn`\n    // deps only re-ask the server and never clear an override (a customer change\n    // re-prices untouched rows but leaves user-edited ones alone).\n    for (const overrideKey of pathsToClear(\n      { targets: previousTargets.current, values: previous },\n      { targets: targetsRef.current, values },\n    )) {\n      overrides.current.delete(overrideKey);\n    }\n    previousTargets.current = targetsRef.current;\n\n    // Override ownership is row-id keyed, so pruning removes departed rows without reindex drift.\n    overrides.current = pruneOverrides(overrides.current, targetsRef.current);\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          const targetsByPath = new Map(\n            targetsRef.current.map((target) => [target.path, target] as const),\n          );\n          for (const [path, value] of Object.entries(response.prefill ?? {})) {\n            const target = targetsByPath.get(path);\n\n            if (target && !overrides.current.has(target.overrideKey)) {\n              setValue(path, value);\n            }\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watchSignature, action, componentRef, watch.any, setValue]);\n\n  return { nodes: resolved, markUserEdit };\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,gBACd,QACA,cACA,OACc;CACd,MAAM,SAAS,cAAc;CAC7B,MAAM,WAAW,gBAAgB;CACjC,MAAM,CAAC,UAAU,eAAe,SAA+B,CAAC,CAAC;CAEjE,MAAM,UAAU,cAAc,sBAAsB,OAAO,MAAM,GAAG,CAAC,OAAO,MAAM,CAAC;CAEnF,MAAM,YAAY,uBAAoB,IAAI,IAAI,CAAC;CAC/C,MAAM,qBAAqB,uBAAoB,IAAI,IAAI,CAAC;CACxD,MAAM,iBAAiB,OAAgC,MAAM;CAC7D,MAAM,kBAAkB,OAAO,OAAO;CAMtC,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,sBAAsB;EACpB,MAAM,mBAAmB,IAAI,IAAI,QAAQ,KAAK,WAAW,OAAO,WAAW,CAAC;EAC5E,mBAAmB,UAAU,IAAI,IAC/B,CAAC,GAAG,mBAAmB,OAAO,EAAE,QAAQ,gBAAgB,iBAAiB,IAAI,WAAW,CAAC,CAC3F;EACA,MAAM,eAAe,QAAQ,QAC1B,WAAW,CAAC,mBAAmB,QAAQ,IAAI,OAAO,WAAW,CAChE;EAGA,KAAK,MAAM,eAAe,gBAAgB,cAAc,MAAM,GAC5D,UAAU,QAAQ,IAAI,WAAW;EAGnC,KAAK,MAAM,UAAU,cACnB,mBAAmB,QAAQ,IAAI,OAAO,WAAW;CAErD,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,MAAM,eAAe,aAAa,gBAAwB;EACxD,UAAU,QAAQ,IAAI,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,cAAc;EAC1B,MAAM,uBAAO,IAAI,IAAY;EAC7B,IAAI,MAAM;EACV,WAAW,QAAQ,UAAU;GAC3B,IAAI,MAAM,QAAQ,MAAM,aAAa,GACnC,KAAK,MAAM,OAAO,MAAM,eACtB,KAAK,IAAI,OAAO,GAAG,CAAC;GAGxB,IAAI,MAAM,cACR,MAAM;EAEV,CAAC;EACD,OAAO;GAAE,MAAM,CAAC,GAAG,IAAI;GAAG;EAAI;CAChC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,cAAc;EAC/B,MAAM,MAAM,IAAI,IAAY,MAAM,IAAI;EACtC,KAAK,MAAM,UAAU,SAAS;GAC5B,KAAK,MAAM,OAAO,OAAO,SACvB,IAAI,IAAI,GAAG;GAEb,KAAK,MAAM,OAAO,OAAO,WACvB,IAAI,IAAI,GAAG;EAEf;EACA,OAAO,CAAC,GAAG,GAAG;CAChB,GAAG,CAAC,MAAM,MAAM,OAAO,CAAC;CASxB,gBAAgB;EACd,IAAI,WAAW,WAAW,KAAK,CAAC,MAAM,KACpC;EAGF,MAAM,WAAW,eAAe;EAChC,eAAe,UAAU;EAKzB,KAAK,MAAM,eAAe,aACxB;GAAE,SAAS,gBAAgB;GAAS,QAAQ;EAAS,GACrD;GAAE,SAAS,WAAW;GAAS;EAAO,CACxC,GACE,UAAU,QAAQ,OAAO,WAAW;EAEtC,gBAAgB,UAAU,WAAW;EAGrC,UAAU,UAAU,eAAe,UAAU,SAAS,WAAW,OAAO;EAExE,MAAM,aAAa,IAAI,gBAAgB;EAEvC,MAAM,QAAQ,OAAO,iBAAiB;GACpC,eACE,QACA,cACA;IAAE,UAAU;IAAM,GAAG;GAAO,GAC5B,WAAW,MACb,EACG,MAAM,aAAa;IAClB,IAAI,CAAC,UACH;IAEF,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,UAAU,CAAC,CAAC,GAC9D,SAAS,MAAM,KAAK;IAEtB,MAAM,gBAAgB,IAAI,IACxB,WAAW,QAAQ,KAAK,WAAW,CAAC,OAAO,MAAM,MAAM,CAAU,CACnE;IACA,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,WAAW,CAAC,CAAC,GAAG;KAClE,MAAM,SAAS,cAAc,IAAI,IAAI;KAErC,IAAI,UAAU,CAAC,UAAU,QAAQ,IAAI,OAAO,WAAW,GACrD,SAAS,MAAM,KAAK;IAExB;IACA,IAAI,SAAS,QACX,YAAY,SAAS,MAAM;GAE/B,CAAC,EACA,YAAY,CAAC,CAAC;EACnB,GAAA,GAAmB;EAEnB,aAAa;GACX,OAAO,aAAa,KAAK;GACzB,WAAW,MAAM;EACnB;CAEF,GAAG;EAhEoB,MAAM,MACzB,SACA,KAAK,UAAU,WAAW,KAAK,SAAS,QAAQ,QAAQ,IAAI,CAAC,CAAC;EA8D9C;EAAQ;EAAc,MAAM;EAAK;CAAQ,CAAC;CAE9D,OAAO;EAAE,OAAO;EAAU;CAAa;AACzC"}

package/dist/form/index.js

@@ -17,6 +17,7 @@ var formComponents = createPlugin({
 		"field.file-upload": lazyComponent(loadFormComponent("FileUploadComponent")),
 		"field.hidden-input": lazyComponent(loadFormComponent("HiddenInputComponent")),
 		"field.number-input": lazyComponent(loadFormComponent("NumberInputComponent")),
+		"field.otp": lazyComponent(loadFormComponent("OtpInputComponent")),
 		"field.password-input": lazyComponent(loadFormComponent("PasswordInputComponent")),
 		"field.repeater": lazyComponent(loadFormComponent("RepeaterComponent")),
 		"field.rich-editor": lazyComponent(async () => {

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAmBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;CAC3E;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"OtpInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.otp\": lazyComponent(loadFormComponent(\"OtpInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAoBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,aAAa,cAAc,kBAAkB,mBAAmB,CAAC;EACjE,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;CAC3E;CACA,MAAM;AACR,CAAC"}

package/dist/i18n/locale-reload.js

@@ -1,6 +1,6 @@
 import { EventBridge } from "../events/event-bridge.js";
-import { useCallback } from "react";
 import { router } from "@inertiajs/react";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/i18n/locale-reload.tsx
 function LocaleReload({ preserveScroll = true, preserveState = true }) {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { useEffectDispatcher } from './effects/use-effect-dispatcher';
 export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry';
 export { initializeTheme, useAppearance } from './appearance';
 export { copyToClipboard, useClipboard } from './clipboard';
+export { createLatticeApp, type CreateLatticeAppOptions } from './create-app';
 export { EventBridge } from './events/event-bridge';
 export { Icon, IconRenderer, IconRendererProvider, SpriteProvider } from './icons';
 export { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders, } from './inertia';

package/dist/index.js

@@ -1,30 +1,31 @@
-import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
+import { initializeTheme, useAppearance } from "./appearance/index.js";
 import { LATTICE_EVENT } from "./events/event-names.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
 import { withHeaders } from "./core/headers.js";
 import { Icon, SpriteProvider } from "./icons/sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icons/icon-renderer.js";
-import { onToast, showToast } from "./toast/toast.js";
-import { EventBridge } from "./events/event-bridge.js";
-import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
-import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
-import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
-import { useEffectDispatcher } from "./effects/use-effect-dispatcher.js";
 import { CollapsedContext, useCollapsed } from "./core/collapsed-context.js";
+import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
 import { Renderer } from "./core/renderer.js";
-import { chatPlugin } from "./chat/index.js";
-import { useChat } from "./chat/use-chat.js";
+import { onToast, showToast } from "./toast/toast.js";
 import { onCallout } from "./toast/callout.js";
+import { EventBridge } from "./events/event-bridge.js";
 import Callouts from "./layout/callouts.js";
+import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
 import { OutletContext } from "./layout/context.js";
 import { layoutComponents } from "./layout/components.js";
-import { registry } from "./registry.js";
-import { initializeTheme, useAppearance } from "./appearance/index.js";
-import { copyToClipboard, useClipboard } from "./clipboard/index.js";
 import SchemaLayout from "./layout/schema-layout.js";
 import { RealtimeListeners } from "./realtime/listeners.js";
 import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
+import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
+import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
+import { useEffectDispatcher } from "./effects/use-effect-dispatcher.js";
+import { useChat } from "./chat/use-chat.js";
+import { chatPlugin } from "./chat/index.js";
+import { registry } from "./registry.js";
 import { Toaster } from "./toast/toaster.js";
 import { Provider } from "./provider.js";
+import { createLatticeApp } from "./create-app.js";
+import { copyToClipboard, useClipboard } from "./clipboard/index.js";
 import { columnCell } from "./table/registry.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };

package/dist/layout/breadcrumbs.js

@@ -1,5 +1,6 @@
-import { Fragment } from "react";
+import { nodeIdentity } from "../core/test-id.js";
 import { Link, usePage } from "@inertiajs/react";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/breadcrumbs.tsx
 var BreadcrumbsComponent = ({ node }) => {
@@ -7,7 +8,7 @@ var BreadcrumbsComponent = ({ node }) => {
 	if (crumbs.length === 0) return null;
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Breadcrumb",
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "flex items-center gap-2 text-sm text-lt-muted-fg",
 			children: crumbs.map((crumb, index) => {

package/dist/layout/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../resources/js/layout/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={node.id}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;AAIA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,KAAK;YACxD,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../resources/js/layout/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={nodeIdentity(node)}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;;AAKA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,aAAa,IAAI;YACpE,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/layout/callouts.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
-import { useT } from "../i18n/instance.js";
 import { RenderNode } from "../core/renderer.js";
 import { onCallout } from "../toast/callout.js";
+import { useT } from "../i18n/instance.js";
 import { variantStyles } from "../toast/variant-styles.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/layout/components.js

@@ -1,6 +1,6 @@
+import Callouts from "./callouts.js";
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import BreadcrumbsComponent from "./breadcrumbs.js";
-import Callouts from "./callouts.js";
 import DropdownComponent from "./dropdown.js";
 import MenuComponent from "./menu.js";
 import MenuItemComponent from "./menu-item.js";

package/dist/layout/menu-item.js

@@ -1,11 +1,11 @@
 import { cn } from "../lib/utils.js";
-import { prefixedNodeTestId } from "../core/test-id.js";
 import { Icon } from "../icons/sprite.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
 import { useCollapsed } from "../core/collapsed-context.js";
+import { prefixedNodeTestId } from "../core/test-id.js";
 import { Popover } from "./popover.js";
-import { useState } from "react";
 import { Link, usePage } from "@inertiajs/react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/menu-item.tsx
 var rowClass = "flex items-center gap-2 rounded-lt-sm px-3 py-2 text-base font-medium text-lt-fg transition-colors hover:bg-lt-muted";

package/dist/layout/menu.js

@@ -1,7 +1,8 @@
+import { nodeIdentity } from "../core/test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/layout/menu.tsx
 var MenuComponent = ({ children, node }) => /* @__PURE__ */ jsx("nav", {
-	"data-lattice-component": node.id,
+	"data-lattice-component": nodeIdentity(node),
 	children: /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-col gap-1",
 		children

package/dist/layout/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../resources/js/layout/menu.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst MenuComponent: RendererComponent<\"menu\"> = ({ children, node }) => (\n  <nav data-lattice-component={node.id}>\n    <ul className=\"flex flex-col gap-1\">{children}</ul>\n  </nav>\n);\n\nexport default MenuComponent;\n"],"mappings":";;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAC5D,oBAAC,OAAD;CAAK,0BAAwB,KAAK;WAChC,oBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA;AAC/C,CAAA"}
+{"version":3,"file":"menu.js","names":[],"sources":["../../resources/js/layout/menu.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst MenuComponent: RendererComponent<\"menu\"> = ({ children, node }) => (\n  <nav data-lattice-component={nodeIdentity(node)}>\n    <ul className=\"flex flex-col gap-1\">{children}</ul>\n  </nav>\n);\n\nexport default MenuComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAC5D,oBAAC,OAAD;CAAK,0BAAwB,aAAa,IAAI;WAC5C,oBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA;AAC/C,CAAA"}

package/dist/layout/popover.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
 import { CollapsedContext } from "../core/collapsed-context.js";
 import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../core/components/popover.js";
-import { useEffect, useState } from "react";
 import { usePage } from "@inertiajs/react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/popover.tsx
 /**

package/dist/layout/sidebar.js

@@ -1,45 +1,85 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
 import { cn } from "../lib/utils.js";
-import { Icon } from "../icons/sprite.js";
 import { CollapsedContext } from "../core/collapsed-context.js";
-import { useState } from "react";
+import { nodeIdentity } from "../core/test-id.js";
+import { router } from "@inertiajs/react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/sidebar.tsx
+var DESKTOP_QUERY = "(min-width: 768px)";
 function readStored(key, remember) {
 	if (!remember || typeof window === "undefined") return false;
 	return window.localStorage.getItem(key) === "true";
 }
+function matchesTarget(event, identity) {
+	const target = event.detail?.target;
+	return target == null || target === identity;
+}
+function useIsDesktop() {
+	const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+	const [isDesktop, setIsDesktop] = useState(() => supported() ? window.matchMedia(DESKTOP_QUERY).matches : true);
+	useEffect(() => {
+		if (!supported()) return;
+		const query = window.matchMedia(DESKTOP_QUERY);
+		const update = () => setIsDesktop(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return isDesktop;
+}
 var SidebarComponent = ({ children, node }) => {
 	const collapsible = node.props.collapsible;
 	const rememberState = node.props.rememberState;
-	const storageKey = `lattice:sidebar:${node.id ?? "default"}`;
+	const identity = nodeIdentity(node);
+	const storageKey = `lattice:sidebar:${identity ?? "default"}`;
+	const isDesktop = useIsDesktop();
 	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
-	function toggle() {
-		setCollapsed((value) => {
-			const next = !value;
-			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
-			return next;
-		});
-	}
-	const isCollapsed = collapsible && collapsed;
-	return /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+	const [mobileOpen, setMobileOpen] = useState(false);
+	useEffect(() => {
+		function toggle(event) {
+			if (!matchesTarget(event, identity)) return;
+			if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
+				if (!collapsible) return;
+				setCollapsed((value) => {
+					const next = !value;
+					if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
+					return next;
+				});
+			} else setMobileOpen((open) => !open);
+		}
+		window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+		return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+	}, [
+		identity,
+		collapsible,
+		rememberState,
+		storageKey
+	]);
+	useEffect(() => router.on("navigate", () => setMobileOpen(false)), []);
+	useEffect(() => {
+		if (!mobileOpen) return;
+		function close(event) {
+			if (event.key === "Escape") setMobileOpen(false);
+		}
+		window.addEventListener("keydown", close);
+		return () => window.removeEventListener("keydown", close);
+	}, [mobileOpen]);
+	const isCollapsed = collapsible && collapsed && isDesktop;
+	return /* @__PURE__ */ jsxs(CollapsedContext.Provider, {
 		value: isCollapsed,
-		children: /* @__PURE__ */ jsxs("aside", {
-			className: cn("sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]", isCollapsed ? "w-16 overflow-visible" : "w-64 overflow-x-hidden overflow-y-auto"),
-			"data-lattice-component": node.id,
-			children: [collapsible ? /* @__PURE__ */ jsx("button", {
-				"aria-expanded": !isCollapsed,
-				"aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-				"data-test": "sidebar-toggle",
-				className: cn("inline-flex items-center rounded-lt-sm p-2 text-lt-fg transition-colors hover:bg-lt-muted", isCollapsed ? "self-center" : "self-end"),
-				onClick: toggle,
-				type: "button",
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "panel-left",
-					"aria-hidden": "true",
-					className: "size-lt-icon-md shrink-0"
-				})
-			}) : null, children]
-		})
+		children: [mobileOpen ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "fixed inset-0 z-30 bg-black/50 md:hidden",
+			"data-test": "sidebar-backdrop",
+			onClick: () => setMobileOpen(false)
+		}) : null, /* @__PURE__ */ jsx("aside", {
+			className: cn("fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform", "md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]", mobileOpen ? "translate-x-0" : "-translate-x-full", isCollapsed ? "md:w-16 md:overflow-visible" : "md:w-64 md:overflow-x-hidden md:overflow-y-auto"),
+			"data-collapsed": isCollapsed ? "true" : "false",
+			"data-lattice-component": identity,
+			"data-test": "sidebar",
+			children
+		})]
 	});
 };
 //#endregion

package/dist/layout/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const storageKey = `lattice:sidebar:${node.id ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      <aside\n        className={cn(\n          \"sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]\",\n          isCollapsed ? \"w-16 overflow-visible\" : \"w-64 overflow-x-hidden overflow-y-auto\",\n        )}\n        data-lattice-component={node.id}\n      >\n        {collapsible ? (\n          <button\n            aria-expanded={!isCollapsed}\n            aria-label={isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n            data-test=\"sidebar-toggle\"\n            className={cn(\n              \"inline-flex items-center rounded-lt-sm p-2 text-lt-fg transition-colors hover:bg-lt-muted\",\n              isCollapsed ? \"self-center\" : \"self-end\",\n            )}\n            onClick={toggle}\n            type=\"button\"\n          >\n            <Icon name=\"panel-left\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n          </button>\n        ) : null}\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAEnC,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,qBAAC,SAAD;GACE,WAAW,GACT,oGACA,cAAc,0BAA0B,wCAC1C;GACA,0BAAwB,KAAK;aAL/B,CAOG,cACC,oBAAC,UAAD;IACE,iBAAe,CAAC;IAChB,cAAY,cAAc,mBAAmB;IAC7C,aAAU;IACV,WAAW,GACT,6FACA,cAAc,gBAAgB,UAChC;IACA,SAAS;IACT,MAAK;cAEL,oBAAC,MAAD;KAAM,MAAK;KAAa,eAAY;KAAO,WAAU;IAA4B,CAAA;GAC3E,CAAA,IACN,MACH,QACI;;CACkB,CAAA;AAE/B"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nfunction matchesTarget(event: Event, identity: string | undefined): boolean {\n  const target = (event as CustomEvent<{ target?: string }>).detail?.target;\n\n  return target == null || target === identity;\n}\n\nfunction useIsDesktop(): boolean {\n  const supported = () => typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n  const [isDesktop, setIsDesktop] = useState(() =>\n    supported() ? window.matchMedia(DESKTOP_QUERY).matches : true,\n  );\n\n  useEffect(() => {\n    if (!supported()) {\n      return;\n    }\n\n    const query = window.matchMedia(DESKTOP_QUERY);\n    const update = (): void => setIsDesktop(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return isDesktop;\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:sidebar:${identity ?? \"default\"}`;\n  const isDesktop = useIsDesktop();\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useEffect(() => {\n    function toggle(event: Event): void {\n      if (!matchesTarget(event, identity)) {\n        return;\n      }\n\n      if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n        if (!collapsible) {\n          return;\n        }\n\n        setCollapsed((value) => {\n          const next = !value;\n\n          if (rememberState && typeof window !== \"undefined\") {\n            window.localStorage.setItem(storageKey, String(next));\n          }\n\n          return next;\n        });\n      } else {\n        setMobileOpen((open) => !open);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n  }, [identity, collapsible, rememberState, storageKey]);\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useEffect(() => {\n    if (!mobileOpen) {\n      return;\n    }\n\n    function close(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    }\n\n    window.addEventListener(\"keydown\", close);\n\n    return () => window.removeEventListener(\"keydown\", close);\n  }, [mobileOpen]);\n\n  const isCollapsed = collapsible && collapsed && isDesktop;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      {mobileOpen ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 z-30 bg-black/50 md:hidden\"\n          data-test=\"sidebar-backdrop\"\n          onClick={() => setMobileOpen(false)}\n        />\n      ) : null}\n      <aside\n        className={cn(\n          \"fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform\",\n          \"md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]\",\n          mobileOpen ? \"translate-x-0\" : \"-translate-x-full\",\n          isCollapsed\n            ? \"md:w-16 md:overflow-visible\"\n            : \"md:w-64 md:overflow-x-hidden md:overflow-y-auto\",\n        )}\n        data-collapsed={isCollapsed ? \"true\" : \"false\"}\n        data-lattice-component={identity}\n        data-test=\"sidebar\"\n      >\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB;AAEtB,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,SAAS,eAAwB;CAC/B,MAAM,kBAAkB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CACtF,MAAM,CAAC,WAAW,gBAAgB,eAChC,UAAU,IAAI,OAAO,WAAW,aAAa,EAAE,UAAU,IAC3D;CAEA,gBAAgB;EACd,IAAI,CAAC,UAAU,GACb;EAGF,MAAM,QAAQ,OAAO,WAAW,aAAa;EAC7C,MAAM,eAAqB,aAAa,MAAM,OAAO;EAErD,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EAEvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAClD,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAClC,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;GAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW,MAAM;IACtD,IAAI,CAAC,aACH;IAGF,cAAc,UAAU;KACtB,MAAM,OAAO,CAAC;KAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;KAGtD,OAAO;IACT,CAAC;GACH,OACE,eAAe,SAAS,CAAC,IAAI;EAEjC;EAEA,OAAO,iBAAiB,cAAc,eAAe,MAAM;EAE3D,aAAa,OAAO,oBAAoB,cAAc,eAAe,MAAM;CAC7E,GAAG;EAAC;EAAU;EAAa;EAAe;CAAU,CAAC;CAErD,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,SAAS,MAAM,OAA4B;GACzC,IAAI,MAAM,QAAQ,UAChB,cAAc,KAAK;EAEvB;EAEA,OAAO,iBAAiB,WAAW,KAAK;EAExC,aAAa,OAAO,oBAAoB,WAAW,KAAK;CAC1D,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,cAAc,eAAe,aAAa;CAEhD,OACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC,CACG,aACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,aAAU;GACV,eAAe,cAAc,KAAK;EACnC,CAAA,IACC,MACJ,oBAAC,SAAD;GACE,WAAW,GACT,gJACA,qFACA,aAAa,kBAAkB,qBAC/B,cACI,gCACA,iDACN;GACA,kBAAgB,cAAc,SAAS;GACvC,0BAAwB;GACxB,aAAU;GAET;EACI,CAAA,CACkB;;AAE/B"}

package/dist/layout/topbar.js

@@ -1,10 +1,11 @@
 import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/layout/topbar.tsx
 var TopbarComponent = ({ children, node }) => {
 	const sticky = node.props.sticky;
 	return /* @__PURE__ */ jsx("header", {
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		className: cn("flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg", sticky && "sticky top-0 z-30"),
 		children
 	});

package/dist/layout/topbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"topbar.js","names":[],"sources":["../../resources/js/layout/topbar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst TopbarComponent: RendererComponent<\"topbar\"> = ({ children, node }) => {\n  const sticky = node.props.sticky;\n\n  return (\n    <header\n      data-lattice-component={node.id}\n      className={cn(\n        \"flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg\",\n        sticky && \"sticky top-0 z-30\",\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default TopbarComponent;\n"],"mappings":";;;AAGA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,0FACA,UAAU,mBACZ;EAEC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"topbar.js","names":[],"sources":["../../resources/js/layout/topbar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst TopbarComponent: RendererComponent<\"topbar\"> = ({ children, node }) => {\n  const sticky = node.props.sticky;\n\n  return (\n    <header\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        \"flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg\",\n        sticky && \"sticky top-0 z-30\",\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default TopbarComponent;\n"],"mappings":";;;;AAIA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,0FACA,UAAU,mBACZ;EAEC;CACK,CAAA;AAEZ"}

package/dist/registry.js

@@ -1,10 +1,10 @@
 import { createRegistry } from "./core/registry.js";
+import { layoutComponents } from "./layout/components.js";
 import { actionComponents } from "./action/index.js";
 import { chatPlugin } from "./chat/index.js";
 import { coreComponents } from "./core/components/index.js";
 import { formComponents } from "./form/index.js";
 import { remoteComponents } from "./remote/index.js";
-import { layoutComponents } from "./layout/components.js";
 import { tableComponents } from "./table/index.js";
 //#region resources/js/registry.ts
 var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents, chatPlugin, remoteComponents);

package/dist/remote/components/data-list.js

@@ -1,6 +1,6 @@
+import { Renderer } from "../../core/renderer.js";
 import { useT } from "../../i18n/instance.js";
 import { remoteJson } from "../../core/api.js";
-import { Renderer } from "../../core/renderer.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/remote/components/data-list.tsx

package/dist/remote/index.js

@@ -1,12 +1,8 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import { DataList } from "./components/data-list.js";
-import { RemoteChatBox } from "./components/chat-box.js";
 //#region resources/js/remote/index.ts
 var remoteComponents = createPlugin({
-	components: {
-		"remote.data-list": eagerComponent(DataList),
-		"remote.chat-box": eagerComponent(RemoteChatBox)
-	},
+	components: { "remote.data-list": eagerComponent(DataList) },
 	name: "lattice/remote"
 });
 //#endregion

package/dist/remote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/remote/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\nimport RemoteChatBoxComponent from \"./components/chat-box\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n    \"remote.chat-box\": eagerComponent(RemoteChatBoxComponent),\n  },\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;;AAIA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,oBAAoB,eAAe,QAAiB;EACpD,mBAAmB,eAAe,aAAsB;CAC1D;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/remote/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n  },\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;AAGA,IAAa,mBAAmB,aAAa;CAC3C,YAAY,EACV,oBAAoB,eAAe,QAAiB,EACtD;CACA,MAAM;AACR,CAAC"}

package/dist/table/components/bulk-bar.js

@@ -1,14 +1,15 @@
 import { withHeaders } from "../../core/headers.js";
+import { useT } from "../../i18n/instance.js";
 import { prefixedTestId } from "../../core/test-id.js";
+import { getActionEffects } from "../../effects/dispatch.js";
+import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { Button } from "../../core/components/button.js";
-import { useT } from "../../i18n/instance.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
-import { dispatchActionError, getActionEffects } from "../../effects/dispatch.js";
-import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
+import { runAction } from "../../action/run-action.js";
 import { ActionForm } from "../../action/components/action-form.js";
-import { useState } from "react";
 import { useHttp } from "@inertiajs/react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/bulk-bar.tsx
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
@@ -22,19 +23,13 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		...query
 	} : { selected: selectedKeys };
 	async function submit(action) {
-		try {
-			http.transform((data) => ({
-				...data,
-				...allMatching ? {
-					allMatching: true,
-					...query
-				} : { selected: selectedKeys }
-			}));
-			dispatch(getActionEffects((await http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") })).effects));
+		http.transform((data) => ({
+			...data,
+			...selectionPayload()
+		}));
+		if (await runAction(() => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") }), dispatch)) {
 			setConfirming(null);
 			onCompleted();
-		} catch (error) {
-			dispatchActionError(error);
 		}
 	}
 	function run(action) {