@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/action/components/action-form.d.ts

@@ -1,4 +1,6 @@
+import { DialogPlacement } from '../../ui/dialog.js';
 import { Node } from '../../core/types.js';
+import { ModalWidth } from '../../types/generated.js';
 import { ActionResponse } from '../../effects/dispatch.js';
 type ActionFormProps = {
     cancelLabel: string;
@@ -12,13 +14,16 @@ type ActionFormProps = {
     method: string;
     onClose: () => void;
     onSuccess: (response: ActionResponse) => void;
+    /** Dialog placement for the form modal; sheets dock to a viewport edge. */
+    placement?: DialogPlacement;
     submitLabel: string;
     title: string;
+    width?: ModalWidth;
 };
 /**
  * Fetch a lazily-served form schema from the action endpoint while `enabled`,
  * so it can be prefilled per record. Returns null until it arrives.
  */
 export declare function useLazyActionForm(endpoint: string, componentRef: string, enabled: boolean): Node | null;
-export declare function ActionForm({ description, formNode, onClose, title, ...rest }: ActionFormProps): import("react").JSX.Element;
+export declare function ActionForm({ description, formNode, onClose, placement, title, width, ...rest }: ActionFormProps): import("react").JSX.Element;
 export {};

package/dist/action/components/action-form.js

@@ -8,11 +8,13 @@ import { apiFetch } from "../../core/api.js";
 import { Skeleton } from "../../ui/skeleton.js";
 import { FormProvider } from "../../form/hooks/context.js";
 import { PrefillProvider } from "../../form/hooks/prefill-context.js";
-import { walkFields } from "../../form/lib/field-props.js";
 import { ResolvedNodesProvider } from "../../form/hooks/resolved-nodes.js";
 import { FormValuesProvider, useFormValues } from "../../form/hooks/values.js";
 import "../../form/lib/form-transport.js";
 import { useFormResolver } from "../../form/hooks/use-form-resolver.js";
+import { collectFields } from "../../form/lib/collect-fields.js";
+import { firstErrors } from "../../form/lib/field-errors.js";
+import { useDebouncedCallback } from "../../lib/use-debounced-callback.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/action/components/action-form.tsx
@@ -43,11 +45,6 @@ function useLazyActionForm(endpoint, componentRef, enabled) {
 	]);
 	return node;
 }
-function firstErrors(errors) {
-	const result = {};
-	for (const [key, value] of Object.entries(errors ?? {})) result[key] = Array.isArray(value) ? value[0] : value;
-	return result;
-}
 function ActionFormSkeleton() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
@@ -59,22 +56,6 @@ function ActionFormSkeleton() {
 		]
 	});
 }
-function collectFields(formNode) {
-	const labels = {};
-	const values = {};
-	walkFields(formNode.schema, (props) => {
-		if (!props.name) return;
-		if (props.label) labels[props.name] = props.label;
-		if (props.value !== void 0) values[props.name] = props.value;
-	});
-	return {
-		labels,
-		values: {
-			...values,
-			...formNode.props?.state
-		}
-	};
-}
 function ActionFormBody({ cancelLabel, componentRef, endpoint, extraData, fieldLabels, formNode, method, onClose, onSuccess, precognitive, submitLabel }) {
 	const values = useFormValues();
 	const valuesRef = useRef(values);
@@ -84,7 +65,6 @@ function ActionFormBody({ cancelLabel, componentRef, endpoint, extraData, fieldL
 	const { nodes: resolvedNodes, markUserEdit } = useFormResolver(endpoint, componentRef, formNode.schema);
 	const [errors, setErrors] = useState({});
 	const [processing, setProcessing] = useState(false);
-	const timer = useRef(void 0);
 	const request = useCallback((extraHeaders) => apiFetch(endpoint, {
 		body: JSON.stringify({
 			...valuesRef.current,
@@ -105,30 +85,25 @@ function ActionFormBody({ cancelLabel, componentRef, endpoint, extraData, fieldL
 			[field]: void 0
 		});
 	}, []);
+	const runValidation = useDebouncedCallback((field) => {
+		request({
+			Precognition: "true",
+			"Precognition-Validate-Only": field
+		}).then(async (response) => {
+			if (response.status === 422) {
+				const body = await response.json();
+				setErrors((current) => ({
+					...current,
+					...firstErrors(body.errors)
+				}));
+				return;
+			}
+			clearErrors(field);
+		}).catch(() => {});
+	}, 250);
 	const validate = useCallback((field) => {
-		if (!precognitive) return;
-		window.clearTimeout(timer.current);
-		timer.current = window.setTimeout(() => {
-			request({
-				Precognition: "true",
-				"Precognition-Validate-Only": field
-			}).then(async (response) => {
-				if (response.status === 422) {
-					const body = await response.json();
-					setErrors((current) => ({
-						...current,
-						...firstErrors(body.errors)
-					}));
-					return;
-				}
-				clearErrors(field);
-			}).catch(() => {});
-		}, 250);
-	}, [
-		clearErrors,
-		precognitive,
-		request
-	]);
+		if (precognitive) runValidation(field);
+	}, [precognitive, runValidation]);
 	const submit = useCallback(() => {
 		setProcessing(true);
 		request().then(async (response) => {
@@ -196,7 +171,16 @@ function ActionFormBody({ cancelLabel, componentRef, endpoint, extraData, fieldL
 }
 function ActionFormContent({ formNode, ...rest }) {
 	const precognitive = Boolean(formNode.props?.precognitive);
-	const { labels: fieldLabels, values: initialValues } = useMemo(() => collectFields(formNode), [formNode]);
+	const { labels: fieldLabels, values: initialValues } = useMemo(() => {
+		const { labels, values } = collectFields(formNode.schema);
+		return {
+			labels,
+			values: {
+				...values,
+				...formNode.props?.state
+			}
+		};
+	}, [formNode]);
 	return /* @__PURE__ */ jsx(FormValuesProvider, {
 		initial: initialValues,
 		children: /* @__PURE__ */ jsx(ActionFormBody, {
@@ -207,7 +191,7 @@ function ActionFormContent({ formNode, ...rest }) {
 		})
 	});
 }
-function ActionForm({ description, formNode, onClose, title, ...rest }) {
+function ActionForm({ description, formNode, onClose, placement, title, width, ...rest }) {
 	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: true,
@@ -216,7 +200,8 @@ function ActionForm({ description, formNode, onClose, title, ...rest }) {
 		},
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			...description ? {} : { "aria-describedby": void 0 },
-			className: "max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto",
+			placement,
+			width,
 			children: [/* @__PURE__ */ jsx(DialogHeader, {
 				closeLabel: t("common.close", "Close"),
 				description,

package/dist/action/components/action-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-form.js","names":[],"sources":["../../../resources/js/action/components/action-form.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport { Skeleton } from \"@lattice-php/lattice/ui/skeleton\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport {\n  FORM_DEBOUNCE_MS,\n  FormProvider,\n  FormValuesProvider,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  useFormResolver,\n  useFormValues,\n  walkFields,\n} from \"@lattice-php/lattice/form/embed\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { dispatchActionError } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\n\ntype FieldErrors = Record<string, string | undefined>;\n\ntype ActionFormProps = {\n  cancelLabel: string;\n  componentRef: string;\n  description?: string;\n  endpoint: string;\n  /** Extra payload merged into every request, e.g. a bulk action's selection. */\n  extraData?: Record<string, unknown>;\n  /** The form to render; null while a lazy schema is still being fetched. */\n  formNode: Node | null;\n  method: string;\n  onClose: () => void;\n  onSuccess: (response: ActionResponse) => void;\n  submitLabel: string;\n  title: string;\n};\n\n/**\n * Fetch a lazily-served form schema from the action endpoint while `enabled`,\n * so it can be prefilled per record. Returns null until it arrives.\n */\nexport function useLazyActionForm(\n  endpoint: string,\n  componentRef: string,\n  enabled: boolean,\n): Node | null {\n  const [node, setNode] = useState<Node | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      setNode(null);\n\n      return;\n    }\n\n    const controller = new AbortController();\n\n    void apiFetch(endpoint, {\n      body: JSON.stringify({ _form: true }),\n      ref: componentRef,\n      method: \"POST\",\n      signal: controller.signal,\n      throwOnError: false,\n    })\n      .then((response) => (response.ok ? (response.json() as Promise<Node>) : null))\n      .then((fetched) => setNode(fetched))\n      .catch(() => {});\n\n    return () => controller.abort();\n  }, [enabled, endpoint, componentRef]);\n\n  return node;\n}\n\nfunction firstErrors(errors: Record<string, string[] | string> | undefined): FieldErrors {\n  const result: FieldErrors = {};\n\n  for (const [key, value] of Object.entries(errors ?? {})) {\n    result[key] = Array.isArray(value) ? value[0] : value;\n  }\n\n  return result;\n}\n\nfunction ActionFormSkeleton() {\n  return (\n    <div className=\"space-y-4\" data-lattice-action-form-loading>\n      <Skeleton className=\"h-4 w-24\" />\n      <Skeleton className=\"h-10 w-full\" />\n      <Skeleton className=\"h-10 w-full\" />\n    </div>\n  );\n}\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(formNode: Node): CollectedFields {\n  const labels: Record<string, string> = {};\n  const values: Record<string, unknown> = {};\n\n  walkFields(formNode.schema, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      values[props.name] = props.value;\n    }\n  });\n\n  return {\n    labels,\n    values: { ...values, ...(formNode.props?.state as Record<string, unknown> | undefined) },\n  };\n}\n\nfunction ActionFormBody({\n  cancelLabel,\n  componentRef,\n  endpoint,\n  extraData,\n  fieldLabels,\n  formNode,\n  method,\n  onClose,\n  onSuccess,\n  precognitive,\n  submitLabel,\n}: Omit<ActionFormProps, \"description\" | \"title\"> & {\n  fieldLabels: Record<string, string>;\n  formNode: Node;\n  precognitive: boolean;\n}) {\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const extraDataRef = useRef(extraData);\n  extraDataRef.current = extraData;\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(\n    endpoint,\n    componentRef,\n    formNode.schema,\n  );\n\n  const [errors, setErrors] = useState<FieldErrors>({});\n  const [processing, setProcessing] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const request = useCallback(\n    (extraHeaders?: Record<string, string>): Promise<Response> =>\n      apiFetch(endpoint, {\n        body: JSON.stringify({ ...valuesRef.current, ...extraDataRef.current }),\n        method,\n        ref: componentRef,\n        headers: extraHeaders,\n        throwOnError: false,\n      }),\n    [componentRef, endpoint, method],\n  );\n\n  const clearErrors = useCallback((field: string) => {\n    setErrors((current) =>\n      current[field] === undefined ? current : { ...current, [field]: undefined },\n    );\n  }, []);\n\n  const validate = useCallback(\n    (field: string) => {\n      if (!precognitive) {\n        return;\n      }\n\n      window.clearTimeout(timer.current);\n      timer.current = window.setTimeout(() => {\n        void request({ Precognition: \"true\", \"Precognition-Validate-Only\": field })\n          .then(async (response) => {\n            if (response.status === 422) {\n              const body = (await response.json()) as { errors?: Record<string, string[]> };\n              setErrors((current) => ({ ...current, ...firstErrors(body.errors) }));\n\n              return;\n            }\n\n            clearErrors(field);\n          })\n          .catch(() => {});\n      }, FORM_DEBOUNCE_MS);\n    },\n    [clearErrors, precognitive, request],\n  );\n\n  const submit = useCallback(() => {\n    setProcessing(true);\n\n    void request()\n      .then(async (response) => {\n        if (response.status === 422) {\n          const body = (await response.json()) as { errors?: Record<string, string[]> };\n          setErrors(firstErrors(body.errors));\n\n          return;\n        }\n\n        if (!response.ok) {\n          dispatchActionError(new Error(`Action request failed with status ${response.status}`));\n\n          return;\n        }\n\n        onSuccess((await response.json()) as ActionResponse);\n      })\n      .catch((error: unknown) => dispatchActionError(error))\n      .finally(() => setProcessing(false));\n  }, [onSuccess, request]);\n\n  const context = useMemo(\n    () => ({\n      action: endpoint,\n      clearErrors,\n      componentRef,\n      errors,\n      fieldLabels,\n      precognitive,\n      processing,\n      validate,\n    }),\n    [clearErrors, componentRef, endpoint, errors, fieldLabels, precognitive, processing, validate],\n  );\n\n  return (\n    <FormProvider value={context}>\n      <form\n        className=\"flex flex-col gap-6\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          submit();\n        }}\n      >\n        <PrefillProvider value={{ markUserEdit }}>\n          <ResolvedNodesProvider nodes={resolvedNodes}>\n            <Renderer nodes={formNode.schema ?? []} />\n          </ResolvedNodesProvider>\n        </PrefillProvider>\n\n        <div className=\"flex justify-end gap-3\">\n          <Button\n            data-test=\"action-form-cancel\"\n            disabled={processing}\n            onClick={onClose}\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {cancelLabel}\n          </Button>\n\n          <Button data-test=\"action-form-submit\" disabled={processing} type=\"submit\">\n            {processing && <Spinner />}\n            {submitLabel}\n          </Button>\n        </div>\n      </form>\n    </FormProvider>\n  );\n}\n\nfunction ActionFormContent({\n  formNode,\n  ...rest\n}: Omit<ActionFormProps, \"description\" | \"title\"> & { formNode: Node }) {\n  const precognitive = Boolean(formNode.props?.precognitive);\n  const { labels: fieldLabels, values: initialValues } = useMemo(\n    () => collectFields(formNode),\n    [formNode],\n  );\n\n  return (\n    <FormValuesProvider initial={initialValues}>\n      <ActionFormBody\n        fieldLabels={fieldLabels}\n        formNode={formNode}\n        precognitive={precognitive}\n        {...rest}\n      />\n    </FormValuesProvider>\n  );\n}\n\nexport function ActionForm({ description, formNode, onClose, title, ...rest }: ActionFormProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onClose();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader\n          closeLabel={t(\"common.close\", \"Close\")}\n          description={description}\n          title={title}\n        />\n\n        <div className=\"mt-6\">\n          {formNode ? (\n            <ActionFormContent formNode={formNode} onClose={onClose} {...rest} />\n          ) : (\n            <ActionFormSkeleton />\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"action-form.js","names":[],"sources":["../../../resources/js/action/components/action-form.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  type DialogPlacement,\n} from \"@lattice-php/lattice/ui/dialog\";\nimport { Skeleton } from \"@lattice-php/lattice/ui/skeleton\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { ModalWidth } from \"@lattice-php/lattice/types/generated\";\nimport {\n  collectFields,\n  FORM_DEBOUNCE_MS,\n  FormProvider,\n  FormValuesProvider,\n  firstErrors,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  useFormResolver,\n  useFormValues,\n} from \"@lattice-php/lattice/form/embed\";\nimport type { FieldErrors } from \"@lattice-php/lattice/form/embed\";\nimport { useDebouncedCallback } from \"@lattice-php/lattice/lib/use-debounced-callback\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { dispatchActionError } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\n\ntype ActionFormProps = {\n  cancelLabel: string;\n  componentRef: string;\n  description?: string;\n  endpoint: string;\n  /** Extra payload merged into every request, e.g. a bulk action's selection. */\n  extraData?: Record<string, unknown>;\n  /** The form to render; null while a lazy schema is still being fetched. */\n  formNode: Node | null;\n  method: string;\n  onClose: () => void;\n  onSuccess: (response: ActionResponse) => void;\n  /** Dialog placement for the form modal; sheets dock to a viewport edge. */\n  placement?: DialogPlacement;\n  submitLabel: string;\n  title: string;\n  width?: ModalWidth;\n};\n\n/**\n * Fetch a lazily-served form schema from the action endpoint while `enabled`,\n * so it can be prefilled per record. Returns null until it arrives.\n */\nexport function useLazyActionForm(\n  endpoint: string,\n  componentRef: string,\n  enabled: boolean,\n): Node | null {\n  const [node, setNode] = useState<Node | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      setNode(null);\n\n      return;\n    }\n\n    const controller = new AbortController();\n\n    void apiFetch(endpoint, {\n      body: JSON.stringify({ _form: true }),\n      ref: componentRef,\n      method: \"POST\",\n      signal: controller.signal,\n      throwOnError: false,\n    })\n      .then((response) => (response.ok ? (response.json() as Promise<Node>) : null))\n      .then((fetched) => setNode(fetched))\n      .catch(() => {});\n\n    return () => controller.abort();\n  }, [enabled, endpoint, componentRef]);\n\n  return node;\n}\n\nfunction ActionFormSkeleton() {\n  return (\n    <div className=\"space-y-4\" data-lattice-action-form-loading>\n      <Skeleton className=\"h-4 w-24\" />\n      <Skeleton className=\"h-10 w-full\" />\n      <Skeleton className=\"h-10 w-full\" />\n    </div>\n  );\n}\n\nfunction ActionFormBody({\n  cancelLabel,\n  componentRef,\n  endpoint,\n  extraData,\n  fieldLabels,\n  formNode,\n  method,\n  onClose,\n  onSuccess,\n  precognitive,\n  submitLabel,\n}: Omit<ActionFormProps, \"description\" | \"title\"> & {\n  fieldLabels: Record<string, string>;\n  formNode: Node;\n  precognitive: boolean;\n}) {\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const extraDataRef = useRef(extraData);\n  extraDataRef.current = extraData;\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(\n    endpoint,\n    componentRef,\n    formNode.schema,\n  );\n\n  const [errors, setErrors] = useState<FieldErrors>({});\n  const [processing, setProcessing] = useState(false);\n\n  const request = useCallback(\n    (extraHeaders?: Record<string, string>): Promise<Response> =>\n      apiFetch(endpoint, {\n        body: JSON.stringify({ ...valuesRef.current, ...extraDataRef.current }),\n        method,\n        ref: componentRef,\n        headers: extraHeaders,\n        throwOnError: false,\n      }),\n    [componentRef, endpoint, method],\n  );\n\n  const clearErrors = useCallback((field: string) => {\n    setErrors((current) =>\n      current[field] === undefined ? current : { ...current, [field]: undefined },\n    );\n  }, []);\n\n  const runValidation = useDebouncedCallback((field: string) => {\n    void request({ Precognition: \"true\", \"Precognition-Validate-Only\": field })\n      .then(async (response) => {\n        if (response.status === 422) {\n          const body = (await response.json()) as { errors?: Record<string, string[]> };\n          setErrors((current) => ({ ...current, ...firstErrors(body.errors) }));\n\n          return;\n        }\n\n        clearErrors(field);\n      })\n      .catch(() => {});\n  }, FORM_DEBOUNCE_MS);\n\n  const validate = useCallback(\n    (field: string) => {\n      if (precognitive) {\n        runValidation(field);\n      }\n    },\n    [precognitive, runValidation],\n  );\n\n  const submit = useCallback(() => {\n    setProcessing(true);\n\n    void request()\n      .then(async (response) => {\n        if (response.status === 422) {\n          const body = (await response.json()) as { errors?: Record<string, string[]> };\n          setErrors(firstErrors(body.errors));\n\n          return;\n        }\n\n        if (!response.ok) {\n          dispatchActionError(new Error(`Action request failed with status ${response.status}`));\n\n          return;\n        }\n\n        onSuccess((await response.json()) as ActionResponse);\n      })\n      .catch((error: unknown) => dispatchActionError(error))\n      .finally(() => setProcessing(false));\n  }, [onSuccess, request]);\n\n  const context = useMemo(\n    () => ({\n      action: endpoint,\n      clearErrors,\n      componentRef,\n      errors,\n      fieldLabels,\n      precognitive,\n      processing,\n      validate,\n    }),\n    [clearErrors, componentRef, endpoint, errors, fieldLabels, precognitive, processing, validate],\n  );\n\n  return (\n    <FormProvider value={context}>\n      <form\n        className=\"flex flex-col gap-6\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          submit();\n        }}\n      >\n        <PrefillProvider value={{ markUserEdit }}>\n          <ResolvedNodesProvider nodes={resolvedNodes}>\n            <Renderer nodes={formNode.schema ?? []} />\n          </ResolvedNodesProvider>\n        </PrefillProvider>\n\n        <div className=\"flex justify-end gap-3\">\n          <Button\n            data-test=\"action-form-cancel\"\n            disabled={processing}\n            onClick={onClose}\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {cancelLabel}\n          </Button>\n\n          <Button data-test=\"action-form-submit\" disabled={processing} type=\"submit\">\n            {processing && <Spinner />}\n            {submitLabel}\n          </Button>\n        </div>\n      </form>\n    </FormProvider>\n  );\n}\n\nfunction ActionFormContent({\n  formNode,\n  ...rest\n}: Omit<ActionFormProps, \"description\" | \"title\"> & { formNode: Node }) {\n  const precognitive = Boolean(formNode.props?.precognitive);\n  const { labels: fieldLabels, values: initialValues } = useMemo(() => {\n    const { labels, values } = collectFields(formNode.schema);\n\n    return {\n      labels,\n      values: { ...values, ...(formNode.props?.state as Record<string, unknown> | undefined) },\n    };\n  }, [formNode]);\n\n  return (\n    <FormValuesProvider initial={initialValues}>\n      <ActionFormBody\n        fieldLabels={fieldLabels}\n        formNode={formNode}\n        precognitive={precognitive}\n        {...rest}\n      />\n    </FormValuesProvider>\n  );\n}\n\nexport function ActionForm({\n  description,\n  formNode,\n  onClose,\n  placement,\n  title,\n  width,\n  ...rest\n}: ActionFormProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onClose();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        placement={placement}\n        width={width}\n      >\n        <DialogHeader\n          closeLabel={t(\"common.close\", \"Close\")}\n          description={description}\n          title={title}\n        />\n\n        <div className=\"mt-6\">\n          {formNode ? (\n            <ActionFormContent formNode={formNode} onClose={onClose} {...rest} />\n          ) : (\n            <ActionFormSkeleton />\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/action/components/action-trigger-provider.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { Node } from '../../core/types.js';
 import { TriggerState } from '../../ui/click-behavior.js';
 export declare function ActionTrigger({ action, children, }: {
-    action: Node<"action">;
+    action: Node<"action" | "action.bulk">;
     children: (trigger: TriggerState) => ReactNode;
 }): import("react").JSX.Element;
 export declare function ActionInteractionProvider({ children }: {

package/dist/action/components/action-trigger-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-trigger-provider.js","names":[],"sources":["../../../resources/js/action/components/action-trigger-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { ActionTriggerProvider, type TriggerState } from \"@lattice-php/lattice/ui/click-behavior\";\nimport { useAction } from \"@lattice-php/lattice/action/hooks/use-action\";\n\nexport function ActionTrigger({\n  action,\n  children,\n}: {\n  action: Node<\"action\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) {\n  const { processing, requestSubmit, overlays } = useAction(action);\n\n  return (\n    <>\n      {children({ onClick: requestSubmit, processing })}\n      {overlays}\n    </>\n  );\n}\n\nexport function ActionInteractionProvider({ children }: { children: ReactNode }) {\n  return (\n    <ActionTriggerProvider\n      render={(props) => <ActionTrigger action={props.action}>{props.children}</ActionTrigger>}\n    >\n      {children}\n    </ActionTriggerProvider>\n  );\n}\n"],"mappings":";;;;AAKA,SAAgB,cAAc,EAC5B,QACA,YAIC;CACD,MAAM,EAAE,YAAY,eAAe,aAAa,UAAU,MAAM;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SAAS;EAAE,SAAS;EAAe;CAAW,CAAC,GAC/C,QACD,EAAA,CAAA;AAEN;AAEA,SAAgB,0BAA0B,EAAE,YAAqC;CAC/E,OACE,oBAAC,uBAAD;EACE,SAAS,UAAU,oBAAC,eAAD;GAAe,QAAQ,MAAM;aAAS,MAAM;EAAwB,CAAA;EAEtF;CACoB,CAAA;AAE3B"}
+{"version":3,"file":"action-trigger-provider.js","names":[],"sources":["../../../resources/js/action/components/action-trigger-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { ActionTriggerProvider, type TriggerState } from \"@lattice-php/lattice/ui/click-behavior\";\nimport { useAction } from \"@lattice-php/lattice/action/hooks/use-action\";\n\nexport function ActionTrigger({\n  action,\n  children,\n}: {\n  action: Node<\"action\" | \"action.bulk\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) {\n  const { processing, requestSubmit, overlays } = useAction(action);\n\n  return (\n    <>\n      {children({ onClick: requestSubmit, processing })}\n      {overlays}\n    </>\n  );\n}\n\nexport function ActionInteractionProvider({ children }: { children: ReactNode }) {\n  return (\n    <ActionTriggerProvider\n      render={(props) => <ActionTrigger action={props.action}>{props.children}</ActionTrigger>}\n    >\n      {children}\n    </ActionTriggerProvider>\n  );\n}\n"],"mappings":";;;;AAKA,SAAgB,cAAc,EAC5B,QACA,YAIC;CACD,MAAM,EAAE,YAAY,eAAe,aAAa,UAAU,MAAM;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SAAS;EAAE,SAAS;EAAe;CAAW,CAAC,GAC/C,QACD,EAAA,CAAA;AAEN;AAEA,SAAgB,0BAA0B,EAAE,YAAqC;CAC/E,OACE,oBAAC,uBAAD;EACE,SAAS,UAAU,oBAAC,eAAD;GAAe,QAAQ,MAAM;aAAS,MAAM;EAAwB,CAAA;EAEtF;CACoB,CAAA;AAE3B"}

package/dist/action/hooks/use-action.d.ts

@@ -14,5 +14,5 @@ type UseAction = {
  * otherwise dispatch) and renders the matching overlays. The host owns the
  * trigger element so each surface keeps its own styling.
  */
-export declare function useAction(node: Node<"action">): UseAction;
+export declare function useAction(node: Node<"action" | "action.bulk">): UseAction;
 export {};

package/dist/action/hooks/use-action.js

@@ -75,8 +75,10 @@ function useAction(node) {
 			dispatch(getActionEffects(response.effects));
 			setIsFilling(false);
 		},
+		placement: node.props.modalSide ?? "center",
 		submitLabel: confirmationConfirmLabel,
-		title: confirmationTitle
+		title: confirmationTitle,
+		width: node.props.modalWidth ?? void 0
 	})] });
 	return {
 		processing: http.processing,

package/dist/action/hooks/use-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-action.js","names":[],"sources":["../../../resources/js/action/hooks/use-action.tsx"],"sourcesContent":["import { router, useHttp } from \"@inertiajs/react\";\nimport type { Method } from \"@inertiajs/core\";\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { runAction } from \"@lattice-php/lattice/action/lib/run-action\";\nimport { ActionForm, useLazyActionForm } from \"@lattice-php/lattice/action/components/action-form\";\n\ntype UseAction = {\n  /** Whether the action request is in flight. */\n  processing: boolean;\n  /** Gate then run the action: open the form, confirm, or dispatch directly. */\n  requestSubmit: () => void;\n  /** The confirm dialog and action form rendered next to the trigger. */\n  overlays: ReactNode;\n};\n\n/**\n * The shared action machinery behind the Action button, action menu items, and\n * action links: it gates submission (form → modal, confirmation → confirm,\n * otherwise dispatch) and renders the matching overlays. The host owns the\n * trigger element so each surface keeps its own styling.\n */\nexport function useAction(node: Node<\"action\">): UseAction {\n  const endpoint = node.props.endpoint ?? \"\";\n  const componentRef = node.props.ref ?? \"\";\n  const method: Method = node.props.method ?? \"post\";\n  const label = node.props.label ?? \"Run action\";\n  const variant = node.props.variant ?? \"default\";\n  const confirmation = node.props.confirmation;\n  const inlineForm = node.props.form;\n  const lazyForm = node.props.lazyForm === true;\n  const hasForm = Boolean(inlineForm) || lazyForm;\n\n  const http = useHttp<Record<string, never>, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [isConfirming, setIsConfirming] = useState(false);\n  const [isFilling, setIsFilling] = useState(false);\n  const lazyNode = useLazyActionForm(endpoint, componentRef, isFilling && lazyForm);\n  const formNode = lazyForm ? lazyNode : inlineForm;\n\n  const submit = async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    if (method === \"get\") {\n      router.visit(endpoint, { headers: withHeaders(componentRef) });\n      setIsConfirming(false);\n\n      return;\n    }\n\n    const ok = await runAction(\n      () => http[method](endpoint, { headers: withHeaders(componentRef) }),\n      dispatch,\n    );\n\n    if (ok) {\n      setIsConfirming(false);\n    }\n  };\n\n  const requestSubmit = (): void => {\n    if (hasForm) {\n      setIsFilling(true);\n\n      return;\n    }\n\n    if (confirmation) {\n      setIsConfirming(true);\n\n      return;\n    }\n\n    void submit();\n  };\n\n  const confirmationTitle = confirmation?.title ?? label;\n  const confirmationConfirmLabel = confirmation?.confirmLabel ?? label;\n  const confirmationCancelLabel = confirmation?.cancelLabel ?? \"Cancel\";\n\n  const overlays = (\n    <>\n      {isConfirming && confirmation && (\n        <ConfirmDialog\n          title={confirmationTitle}\n          description={confirmation.description ?? undefined}\n          confirmLabel={confirmationConfirmLabel}\n          cancelLabel={confirmationCancelLabel}\n          confirmVariant={variant}\n          processing={http.processing}\n          confirmDisabled={!endpoint}\n          onConfirm={() => void submit()}\n          onCancel={() => setIsConfirming(false)}\n        />\n      )}\n\n      {isFilling && hasForm && (\n        <ActionForm\n          cancelLabel={confirmationCancelLabel}\n          componentRef={componentRef}\n          description={confirmation?.description ?? undefined}\n          endpoint={endpoint}\n          formNode={formNode}\n          method={method}\n          onClose={() => setIsFilling(false)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setIsFilling(false);\n          }}\n          submitLabel={confirmationConfirmLabel}\n          title={confirmationTitle}\n        />\n      )}\n    </>\n  );\n\n  return { processing: http.processing, requestSubmit, overlays };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,SAAgB,UAAU,MAAiC;CACzD,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,SAAiB,KAAK,MAAM,UAAU;CAC5C,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,eAAe,KAAK,MAAM;CAChC,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,WAAW,KAAK,MAAM,aAAa;CACzC,MAAM,UAAU,QAAQ,UAAU,KAAK;CAEvC,MAAM,OAAO,QAA+C,CAAC,CAAC;CAC9D,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,WAAW,kBAAkB,UAAU,cAAc,aAAa,QAAQ;CAChF,MAAM,WAAW,WAAW,WAAW;CAEvC,MAAM,SAAS,YAA2B;EACxC,IAAI,CAAC,UACH;EAGF,IAAI,WAAW,OAAO;GACpB,OAAO,MAAM,UAAU,EAAE,SAAS,YAAY,YAAY,EAAE,CAAC;GAC7D,gBAAgB,KAAK;GAErB;EACF;EAOA,IAAI,MALa,gBACT,KAAK,QAAQ,UAAU,EAAE,SAAS,YAAY,YAAY,EAAE,CAAC,GACnE,QACF,GAGE,gBAAgB,KAAK;CAEzB;CAEA,MAAM,sBAA4B;EAChC,IAAI,SAAS;GACX,aAAa,IAAI;GAEjB;EACF;EAEA,IAAI,cAAc;GAChB,gBAAgB,IAAI;GAEpB;EACF;EAEA,OAAY;CACd;CAEA,MAAM,oBAAoB,cAAc,SAAS;CACjD,MAAM,2BAA2B,cAAc,gBAAgB;CAC/D,MAAM,0BAA0B,cAAc,eAAe;CAE7D,MAAM,WACJ,qBAAA,YAAA,EAAA,UAAA,CACG,gBAAgB,gBACf,oBAAC,eAAD;EACE,OAAO;EACP,aAAa,aAAa,eAAe,KAAA;EACzC,cAAc;EACd,aAAa;EACb,gBAAgB;EAChB,YAAY,KAAK;EACjB,iBAAiB,CAAC;EAClB,iBAAiB,KAAK,OAAO;EAC7B,gBAAgB,gBAAgB,KAAK;CACtC,CAAA,GAGF,aAAa,WACZ,oBAAC,YAAD;EACE,aAAa;EACC;EACd,aAAa,cAAc,eAAe,KAAA;EAChC;EACA;EACF;EACR,eAAe,aAAa,KAAK;EACjC,YAAY,aAAa;GACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;GAC3C,aAAa,KAAK;EACpB;EACA,aAAa;EACb,OAAO;CACR,CAAA,CAEH,EAAA,CAAA;CAGJ,OAAO;EAAE,YAAY,KAAK;EAAY;EAAe;CAAS;AAChE"}
+{"version":3,"file":"use-action.js","names":[],"sources":["../../../resources/js/action/hooks/use-action.tsx"],"sourcesContent":["import { router, useHttp } from \"@inertiajs/react\";\nimport type { Method } from \"@inertiajs/core\";\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { runAction } from \"@lattice-php/lattice/action/lib/run-action\";\nimport { ActionForm, useLazyActionForm } from \"@lattice-php/lattice/action/components/action-form\";\n\ntype UseAction = {\n  /** Whether the action request is in flight. */\n  processing: boolean;\n  /** Gate then run the action: open the form, confirm, or dispatch directly. */\n  requestSubmit: () => void;\n  /** The confirm dialog and action form rendered next to the trigger. */\n  overlays: ReactNode;\n};\n\n/**\n * The shared action machinery behind the Action button, action menu items, and\n * action links: it gates submission (form → modal, confirmation → confirm,\n * otherwise dispatch) and renders the matching overlays. The host owns the\n * trigger element so each surface keeps its own styling.\n */\nexport function useAction(node: Node<\"action\" | \"action.bulk\">): UseAction {\n  const endpoint = node.props.endpoint ?? \"\";\n  const componentRef = node.props.ref ?? \"\";\n  const method: Method = node.props.method ?? \"post\";\n  const label = node.props.label ?? \"Run action\";\n  const variant = node.props.variant ?? \"default\";\n  const confirmation = node.props.confirmation;\n  const inlineForm = node.props.form;\n  const lazyForm = node.props.lazyForm === true;\n  const hasForm = Boolean(inlineForm) || lazyForm;\n\n  const http = useHttp<Record<string, never>, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [isConfirming, setIsConfirming] = useState(false);\n  const [isFilling, setIsFilling] = useState(false);\n  const lazyNode = useLazyActionForm(endpoint, componentRef, isFilling && lazyForm);\n  const formNode = lazyForm ? lazyNode : inlineForm;\n\n  const submit = async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    if (method === \"get\") {\n      router.visit(endpoint, { headers: withHeaders(componentRef) });\n      setIsConfirming(false);\n\n      return;\n    }\n\n    const ok = await runAction(\n      () => http[method](endpoint, { headers: withHeaders(componentRef) }),\n      dispatch,\n    );\n\n    if (ok) {\n      setIsConfirming(false);\n    }\n  };\n\n  const requestSubmit = (): void => {\n    if (hasForm) {\n      setIsFilling(true);\n\n      return;\n    }\n\n    if (confirmation) {\n      setIsConfirming(true);\n\n      return;\n    }\n\n    void submit();\n  };\n\n  const confirmationTitle = confirmation?.title ?? label;\n  const confirmationConfirmLabel = confirmation?.confirmLabel ?? label;\n  const confirmationCancelLabel = confirmation?.cancelLabel ?? \"Cancel\";\n\n  const overlays = (\n    <>\n      {isConfirming && confirmation && (\n        <ConfirmDialog\n          title={confirmationTitle}\n          description={confirmation.description ?? undefined}\n          confirmLabel={confirmationConfirmLabel}\n          cancelLabel={confirmationCancelLabel}\n          confirmVariant={variant}\n          processing={http.processing}\n          confirmDisabled={!endpoint}\n          onConfirm={() => void submit()}\n          onCancel={() => setIsConfirming(false)}\n        />\n      )}\n\n      {isFilling && hasForm && (\n        <ActionForm\n          cancelLabel={confirmationCancelLabel}\n          componentRef={componentRef}\n          description={confirmation?.description ?? undefined}\n          endpoint={endpoint}\n          formNode={formNode}\n          method={method}\n          onClose={() => setIsFilling(false)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setIsFilling(false);\n          }}\n          placement={node.props.modalSide ?? \"center\"}\n          submitLabel={confirmationConfirmLabel}\n          title={confirmationTitle}\n          width={node.props.modalWidth ?? undefined}\n        />\n      )}\n    </>\n  );\n\n  return { processing: http.processing, requestSubmit, overlays };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,SAAgB,UAAU,MAAiD;CACzE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,SAAiB,KAAK,MAAM,UAAU;CAC5C,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,eAAe,KAAK,MAAM;CAChC,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,WAAW,KAAK,MAAM,aAAa;CACzC,MAAM,UAAU,QAAQ,UAAU,KAAK;CAEvC,MAAM,OAAO,QAA+C,CAAC,CAAC;CAC9D,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,WAAW,kBAAkB,UAAU,cAAc,aAAa,QAAQ;CAChF,MAAM,WAAW,WAAW,WAAW;CAEvC,MAAM,SAAS,YAA2B;EACxC,IAAI,CAAC,UACH;EAGF,IAAI,WAAW,OAAO;GACpB,OAAO,MAAM,UAAU,EAAE,SAAS,YAAY,YAAY,EAAE,CAAC;GAC7D,gBAAgB,KAAK;GAErB;EACF;EAOA,IAAI,MALa,gBACT,KAAK,QAAQ,UAAU,EAAE,SAAS,YAAY,YAAY,EAAE,CAAC,GACnE,QACF,GAGE,gBAAgB,KAAK;CAEzB;CAEA,MAAM,sBAA4B;EAChC,IAAI,SAAS;GACX,aAAa,IAAI;GAEjB;EACF;EAEA,IAAI,cAAc;GAChB,gBAAgB,IAAI;GAEpB;EACF;EAEA,OAAY;CACd;CAEA,MAAM,oBAAoB,cAAc,SAAS;CACjD,MAAM,2BAA2B,cAAc,gBAAgB;CAC/D,MAAM,0BAA0B,cAAc,eAAe;CAE7D,MAAM,WACJ,qBAAA,YAAA,EAAA,UAAA,CACG,gBAAgB,gBACf,oBAAC,eAAD;EACE,OAAO;EACP,aAAa,aAAa,eAAe,KAAA;EACzC,cAAc;EACd,aAAa;EACb,gBAAgB;EAChB,YAAY,KAAK;EACjB,iBAAiB,CAAC;EAClB,iBAAiB,KAAK,OAAO;EAC7B,gBAAgB,gBAAgB,KAAK;CACtC,CAAA,GAGF,aAAa,WACZ,oBAAC,YAAD;EACE,aAAa;EACC;EACd,aAAa,cAAc,eAAe,KAAA;EAChC;EACA;EACF;EACR,eAAe,aAAa,KAAK;EACjC,YAAY,aAAa;GACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;GAC3C,aAAa,KAAK;EACpB;EACA,WAAW,KAAK,MAAM,aAAa;EACnC,aAAa;EACb,OAAO;EACP,OAAO,KAAK,MAAM,cAAc,KAAA;CACjC,CAAA,CAEH,EAAA,CAAA;CAGJ,OAAO;EAAE,YAAY,KAAK;EAAY;EAAe;CAAS;AAChE"}

package/dist/action/index.d.ts

@@ -4,7 +4,5 @@ export { default as ActionGroupComponent } from './components/action-group.js';
 export { ActionInteractionProvider, ActionTrigger } from './components/action-trigger-provider.js';
 export { ActionMenuProvider, actionMenuItemClassName, useActionMenu, } from '../ui/action-menu-context.js';
 export { useAction } from './hooks/use-action.js';
-export { useClickBehavior } from '../ui/click-behavior.js';
-export type { ClickBehavior, TriggerState } from '../ui/click-behavior.js';
 export { runAction } from './lib/run-action.js';
 export { actionComponents } from './plugin.js';

package/dist/action/index.js

@@ -1,4 +1,3 @@
-import { useClickBehavior } from "../ui/click-behavior.js";
 import { runAction } from "./lib/run-action.js";
 import { ActionForm } from "./components/action-form.js";
 import { useAction } from "./hooks/use-action.js";
@@ -7,4 +6,4 @@ import { ActionMenuProvider, actionMenuItemClassName, useActionMenu } from "../u
 import ActionComponent from "./components/action.js";
 import ActionGroupComponent from "./components/action-group.js";
 import { actionComponents } from "./plugin.js";
-export { ActionComponent, ActionForm, ActionGroupComponent, ActionInteractionProvider, ActionMenuProvider, ActionTrigger, actionComponents, actionMenuItemClassName, runAction, useAction, useActionMenu, useClickBehavior };
+export { ActionComponent, ActionForm, ActionGroupComponent, ActionInteractionProvider, ActionMenuProvider, ActionTrigger, actionComponents, actionMenuItemClassName, runAction, useAction, useActionMenu };

package/dist/chat/plugin.d.ts

@@ -1,2 +1 @@
-export type ChatComponentType = "chat.box" | "chat.part.text" | "chat.part.tool-call";
 export declare const chatComponents: import('../core/registry.js').Plugin;

package/dist/chat/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/chat/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport ChatBoxComponent from \"./components/chat-box\";\nimport { TextPart } from \"./parts/text\";\nimport { ToolCallPart } from \"./parts/tool-call\";\n\nexport type ChatComponentType = \"chat.box\" | \"chat.part.text\" | \"chat.part.tool-call\";\n\nexport const chatComponents = createPlugin({\n  name: \"lattice/chat\",\n  components: {\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"chat.part.text\": eagerComponent(TextPart),\n    \"chat.part.tool-call\": eagerComponent(ToolCallPart),\n  } satisfies ComponentRegistryFor<ChatComponentType>,\n});\n"],"mappings":";;;;;AAWA,IAAa,iBAAiB,aAAa;CACzC,MAAM;CACN,YAAY;EACV,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,QAAQ;EACzC,uBAAuB,eAAe,YAAY;CACpD;AACF,CAAC"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/chat/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport ChatBoxComponent from \"./components/chat-box\";\nimport { TextPart } from \"./parts/text\";\nimport type { ChatNodeType } from \"@lattice-php/lattice/types/generated\";\nimport { ToolCallPart } from \"./parts/tool-call\";\n\nexport const chatComponents = createPlugin({\n  name: \"lattice/chat\",\n  components: {\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"chat.part.text\": eagerComponent(TextPart),\n    \"chat.part.tool-call\": eagerComponent(ToolCallPart),\n  } satisfies ComponentRegistryFor<ChatNodeType>,\n});\n"],"mappings":";;;;;AAUA,IAAa,iBAAiB,aAAa;CACzC,MAAM;CACN,YAAY;EACV,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,QAAQ;EACzC,uBAAuB,eAAe,YAAY;CACpD;AACF,CAAC"}

package/dist/clipboard/index.d.ts

@@ -1,5 +1 @@
 export { CopyableText, copyToClipboard } from '../ui/copyable-text.js';
-export type CopiedValue = string | null;
-export type CopyFn = (text: string) => Promise<boolean>;
-export type UseClipboardReturn = [CopiedValue, CopyFn];
-export declare function useClipboard(): UseClipboardReturn;

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 { 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,69 +1,16 @@
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
-import { ComponentPropsMap, NodeType, Option, PageContainer as KnownPageContainer, WireNode, ListenerPayload } from '../types/generated.js';
-export type { KnownPageContainer, NodeType, Option, WireNode };
-export type NodeProps = Record<string, unknown>;
-export type CommonNodeProps = {
-    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;
-/**
- * Built-in `props` is required, not optional — the wire serializes the full prop
- * object, so reads need no optional chaining. Unknown types fall back to `WireNode`.
- */
-export type NodeOfType<TType extends string = string> = string extends TType ? WireNode : {
-    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?: ListenerPayload[];
-    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.d.ts

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