@lattice-php/lattice 0.16.0 → 0.17.1

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

@@ -1,9 +1,9 @@
 import { Renderer } from "../../core/renderer.js";
 import { useT } from "../../i18n/instance.js";
-import { dispatchActionError } from "../../effects/dispatch.js";
 import { Button } from "../../core/components/button.js";
 import { Dialog, DialogContent, DialogHeader } from "../../core/components/dialog.js";
 import { Spinner } from "../../core/components/spinner.js";
+import { dispatchActionError } from "../../effects/dispatch.js";
 import { apiFetch } from "../../core/api.js";
 import { Skeleton } from "../../core/components/skeleton.js";
 import { FormProvider } from "../../form/components/context.js";

package/dist/action/use-action.js

@@ -1,7 +1,7 @@
 import { withHeaders } from "../core/headers.js";
+import { ConfirmDialog } from "../core/components/confirm-dialog.js";
 import { getActionEffects } from "../effects/dispatch.js";
 import { useEffectDispatcher } from "../effects/use-effect-dispatcher.js";
-import { ConfirmDialog } from "../core/components/confirm-dialog.js";
 import { runAction } from "./run-action.js";
 import { ActionForm, useLazyActionForm } from "./components/action-form.js";
 import { router, useHttp } from "@inertiajs/react";

package/dist/chat/types.d.ts

@@ -1,14 +1,6 @@
 import { Node } from '../core/types';
-import { ChatMessage as GeneratedChatMessage, ChatRole } from '../types/generated';
-export type { ChatRole };
-/**
- * The generated message shape, but `parts` is widened from the generated
- * `ChatNode` union to open `Node`s — a part is just a component node rendered by
- * `type`, so a message can also carry a consumer's custom part.
- */
-export type ChatMessage = Omit<GeneratedChatMessage, "parts"> & {
-    parts: Node[];
-};
+import { ChatMessage, ChatRole } from '../types/generated';
+export type { ChatMessage, ChatRole };
 export type ChatStatus = "idle" | "submitted" | "streaming" | "error";
 export type ChatFrame = {
     type: "text";

package/dist/core/components/button.js

@@ -1,8 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import { IconRenderer } from "../../icons/icon-renderer.js";
 import { nodeIdentity } from "../test-id.js";
-import { getActionEffects } from "../../effects/dispatch.js";
-import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
+import { ActionTrigger, useClickBehavior } from "../use-click-behavior.js";
 import { Link } from "@inertiajs/react";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -45,34 +44,51 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 	});
 }
 var ButtonComponent = ({ node }) => {
-	const { href, label, icon } = node.props;
-	const effects = node.props.effects ?? [];
+	const { label, icon } = node.props;
 	const variant = node.props.variant ?? "default";
 	const testId = nodeIdentity(node);
-	const dispatch = useEffectDispatcher();
-	if (href) return /* @__PURE__ */ jsx(Button, {
+	const behavior = useClickBehavior(node.props);
+	const size = icon ? "icon" : "default";
+	const content = icon ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconRenderer, {
+		className: "size-lt-icon-md",
+		icon
+	}), label ? /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: label
+	}) : null] }) : label;
+	const triggerButton = ({ onClick, processing }) => /* @__PURE__ */ jsx(Button, {
+		"data-test": testId,
+		disabled: processing,
+		onClick,
+		size,
+		variant,
+		children: content
+	});
+	if (behavior.kind === "navigate") return /* @__PURE__ */ jsx(Button, {
 		asChild: true,
 		"data-test": testId,
 		variant,
-		size: "default",
+		size,
 		children: /* @__PURE__ */ jsx(Link, {
-			href,
-			children: label
+			href: behavior.href,
+			method: behavior.method,
+			children: content
 		})
 	});
+	if (behavior.kind === "action") return /* @__PURE__ */ jsx(ActionTrigger, {
+		action: behavior.action,
+		children: triggerButton
+	});
+	if (behavior.kind === "effects") return triggerButton({
+		onClick: behavior.onClick,
+		processing: false
+	});
 	return /* @__PURE__ */ jsx(Button, {
 		"data-test": testId,
-		onClick: effects.length > 0 ? () => dispatch(getActionEffects(effects)) : void 0,
-		size: icon ? "icon" : "default",
+		size,
 		type: node.props.buttonType,
 		variant,
-		children: icon ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconRenderer, {
-			className: "size-lt-icon-md",
-			icon
-		}), label ? /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: label
-		}) : null] }) : label
+		children: content
 	});
 };
 //#endregion

package/dist/core/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../resources/js/core/components/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { ButtonVariant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        success:\n          \"bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        info: \"bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        secondary:\n          \"bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      size: {\n        default: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { href, label, icon } = node.props;\n  const effects = node.props.effects ?? [];\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n  const dispatch = useEffectDispatcher();\n\n  if (href) {\n    return (\n      <Button asChild data-test={testId} variant={variant} size=\"default\">\n        <Link href={href}>{label}</Link>\n      </Button>\n    );\n  }\n\n  const hasEffects = effects.length > 0;\n\n  return (\n    <Button\n      data-test={testId}\n      onClick={hasEffects ? () => dispatch(getActionEffects(effects)) : undefined}\n      size={icon ? \"icon\" : \"default\"}\n      type={node.props.buttonType}\n      variant={variant}\n    >\n      {icon ? (\n        <>\n          <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n          {label ? <span className=\"sr-only\">{label}</span> : null}\n        </>\n      ) : (\n        label\n      )}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,GAAG,SAIA;CAGH,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,MAAM,OAAO,SAAS,KAAK;CACnC,MAAM,UAAU,KAAK,MAAM,WAAW,CAAC;CACvC,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,oBAAoB;CAErC,IAAI,MACF,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAS,MAAK;YACxD,oBAAC,MAAD;GAAY;aAAO;EAAY,CAAA;CACzB,CAAA;CAMZ,OACE,oBAAC,QAAD;EACE,aAAW;EACX,SALe,QAAQ,SAAS,UAKJ,SAAS,iBAAiB,OAAO,CAAC,IAAI,KAAA;EAClE,MAAM,OAAO,SAAS;EACtB,MAAM,KAAK,MAAM;EACR;YAER,OACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;GAAc,WAAU;GAAwB;EAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAEI,CAAA;AAEZ"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../resources/js/core/components/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport {\n  ActionTrigger,\n  type TriggerState,\n  useClickBehavior,\n} from \"@lattice-php/lattice/core/use-click-behavior\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { ButtonVariant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        success:\n          \"bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        info: \"bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        secondary:\n          \"bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      size: {\n        default: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { label, icon } = node.props;\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n  const behavior = useClickBehavior(node.props);\n  const size = icon ? \"icon\" : \"default\";\n  const content = icon ? (\n    <>\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </>\n  ) : (\n    label\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <Button\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      size={size}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n\n  if (behavior.kind === \"navigate\") {\n    return (\n      <Button asChild data-test={testId} variant={variant} size={size}>\n        <Link href={behavior.href} method={behavior.method}>\n          {content}\n        </Link>\n      </Button>\n    );\n  }\n\n  if (behavior.kind === \"action\") {\n    return <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>;\n  }\n\n  if (behavior.kind === \"effects\") {\n    return triggerButton({ onClick: behavior.onClick, processing: false });\n  }\n\n  return (\n    <Button data-test={testId} size={size} type={node.props.buttonType} variant={variant}>\n      {content}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,GAAG,SAIA;CAGH,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,OAAO,SAAS,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,UAAU,OACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EAAc,WAAU;EAAwB;CAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAGF,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,QAAD;EACE,aAAW;EACX,UAAU;EACD;EACH;EACG;YAER;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,YACpB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAe;YACzD,oBAAC,MAAD;GAAM,MAAM,SAAS;GAAM,QAAQ,SAAS;aACzC;EACG,CAAA;CACA,CAAA;CAIZ,IAAI,SAAS,SAAS,UACpB,OAAO,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA;CAG/E,IAAI,SAAS,SAAS,WACpB,OAAO,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC;CAGvE,OACE,oBAAC,QAAD;EAAQ,aAAW;EAAc;EAAM,MAAM,KAAK,MAAM;EAAqB;YAC1E;CACK,CAAA;AAEZ"}

package/dist/core/components/control.d.ts

@@ -1,4 +1,3 @@
-import { VariantProps } from 'class-variance-authority';
 export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
 /**
  * The shared chrome for single-line form/table controls (text inputs, native
@@ -9,4 +8,3 @@ export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ri
 export declare const controlSurface: (props?: ({
     density?: "compact" | "comfortable" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type ControlSurfaceVariants = VariantProps<typeof controlSurface>;

package/dist/core/components/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":[],"sources":["../../../resources/js/core/components/control.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-lt-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-lt-control-md bg-transparent px-3 py-1 text-base\",\n        compact: \"h-lt-control-md bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type ControlSurfaceVariants = VariantProps<typeof controlSurface>;\n"],"mappings":";;AAEA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}
+{"version":3,"file":"control.js","names":[],"sources":["../../../resources/js/core/components/control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-lt-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-lt-control-md bg-transparent px-3 py-1 text-base\",\n        compact: \"h-lt-control-md bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n"],"mappings":";;AAEA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}

package/dist/core/components/link.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import { IconRenderer } from "../../icons/icon-renderer.js";
 import { nodeIdentity } from "../test-id.js";
-import { useAction } from "../../action/use-action.js";
+import { ActionTrigger, useClickBehavior } from "../use-click-behavior.js";
 import { actionMenuItemClassName, useActionMenu } from "../../action/components/action-menu-context.js";
 import { Link } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,18 +14,6 @@ function TextLink({ className = "", children, ...props }) {
 		children
 	});
 }
-function ActionLink({ action, ariaLabel, className, children, testId }) {
-	const { processing, requestSubmit, overlays } = useAction(action);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		"aria-label": ariaLabel,
-		className: cn(textLinkClassName, className),
-		"data-test": testId,
-		disabled: processing,
-		onClick: requestSubmit,
-		type: "button",
-		children
-	}), overlays] });
-}
 function LinkAffix({ affix, className }) {
 	if (affix.icon) return /* @__PURE__ */ jsx(IconRenderer, {
 		className: cn("size-lt-icon-md shrink-0", className),
@@ -69,12 +57,10 @@ function labelWithTextAffixes(label, prefix, suffix) {
 }
 var LinkComponent = ({ node }) => {
 	const isMenuItem = useActionMenu();
-	const action = node.props.action;
-	const icon = node.props.icon;
-	const label = node.props.label;
-	const prefix = node.props.prefix;
-	const suffix = node.props.suffix;
-	const iconOnly = Boolean(icon);
+	const { icon, label, prefix, suffix } = node.props;
+	const behavior = useClickBehavior(node.props);
+	const className = isMenuItem ? actionMenuItemClassName : void 0;
+	const testId = nodeIdentity(node);
 	const content = /* @__PURE__ */ jsx(LinkContent, {
 		icon,
 		isMenuItem,
@@ -82,20 +68,30 @@ var LinkComponent = ({ node }) => {
 		prefix,
 		suffix
 	});
-	const ariaLabel = iconOnly ? label : labelWithTextAffixes(label, prefix, suffix);
-	if (action) return /* @__PURE__ */ jsx(ActionLink, {
-		action,
-		ariaLabel,
-		className: isMenuItem ? actionMenuItemClassName : void 0,
-		testId: nodeIdentity(node),
+	const ariaLabel = icon ? label : labelWithTextAffixes(label, prefix, suffix);
+	const triggerButton = ({ onClick, processing }) => /* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel,
+		className: cn(textLinkClassName, className),
+		"data-test": testId,
+		disabled: processing,
+		onClick,
+		type: "button",
 		children: content
 	});
+	if (behavior.kind === "action") return /* @__PURE__ */ jsx(ActionTrigger, {
+		action: behavior.action,
+		children: triggerButton
+	});
+	if (behavior.kind === "effects") return triggerButton({
+		onClick: behavior.onClick,
+		processing: false
+	});
 	return /* @__PURE__ */ jsx(TextLink, {
 		"aria-label": ariaLabel,
-		className: isMenuItem ? actionMenuItemClassName : void 0,
-		"data-test": nodeIdentity(node),
-		href: node.props.href ?? "#",
-		method: node.props.method ?? "get",
+		className,
+		"data-test": testId,
+		href: behavior.kind === "navigate" ? behavior.href : "#",
+		method: behavior.kind === "navigate" ? behavior.method : "get",
 		tabIndex: node.props.tabIndex ?? void 0,
 		children: content
 	});

package/dist/core/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useAction } from \"@lattice-php/lattice/action/use-action\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport {\n  actionMenuItemClassName,\n  useActionMenu,\n} from \"@lattice-php/lattice/action/components/action-menu-context\";\n\nconst textLinkClassName =\n  \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link className={cn(textLinkClassName, className)} {...props}>\n      {children}\n    </Link>\n  );\n}\n\nfunction ActionLink({\n  action,\n  ariaLabel,\n  className,\n  children,\n  testId,\n}: {\n  action: Node<\"action\">;\n  ariaLabel?: string;\n  className?: string;\n  children: ReactNode;\n  testId?: string;\n}) {\n  const { processing, requestSubmit, overlays } = useAction(action);\n\n  return (\n    <>\n      <button\n        aria-label={ariaLabel}\n        className={cn(textLinkClassName, className)}\n        data-test={testId}\n        disabled={processing}\n        onClick={requestSubmit}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {overlays}\n    </>\n  );\n}\n\nfunction LinkAffix({ affix, className }: { affix: Affix; className?: string }) {\n  if (affix.icon) {\n    return <IconRenderer className={cn(\"size-lt-icon-md shrink-0\", className)} icon={affix.icon} />;\n  }\n\n  return <span className={cn(\"shrink-0 text-sm text-lt-muted-fg\", className)}>{affix.text}</span>;\n}\n\nfunction LinkContent({\n  icon,\n  isMenuItem,\n  label,\n  prefix,\n  suffix,\n}: {\n  icon?: string | null;\n  isMenuItem: boolean;\n  label: string;\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n}) {\n  if (icon) {\n    return <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />;\n  }\n\n  if (isMenuItem) {\n    return (\n      <>\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} className=\"ml-auto\" /> : null}\n      </>\n    );\n  }\n\n  if (prefix || suffix) {\n    return (\n      <span className=\"inline-flex items-center gap-1.5 align-baseline\">\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} /> : null}\n      </span>\n    );\n  }\n\n  return label;\n}\n\nfunction labelWithTextAffixes(label: string, prefix?: Affix | null, suffix?: Affix | null) {\n  if (!prefix?.text && !suffix?.text) {\n    return undefined;\n  }\n\n  return [prefix?.text, label, suffix?.text]\n    .filter((part): part is string => Boolean(part))\n    .join(\" \");\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n  const action = node.props.action;\n  const icon = node.props.icon;\n  const label = node.props.label;\n  const prefix = node.props.prefix;\n  const suffix = node.props.suffix;\n  const iconOnly = Boolean(icon);\n  const content = (\n    <LinkContent\n      icon={icon}\n      isMenuItem={isMenuItem}\n      label={label}\n      prefix={prefix}\n      suffix={suffix}\n    />\n  );\n  const ariaLabel = iconOnly ? label : labelWithTextAffixes(label, prefix, suffix);\n\n  if (action) {\n    return (\n      <ActionLink\n        action={action as Node<\"action\">}\n        ariaLabel={ariaLabel}\n        className={isMenuItem ? actionMenuItemClassName : undefined}\n        testId={nodeIdentity(node)}\n      >\n        {content}\n      </ActionLink>\n    );\n  }\n\n  return (\n    <TextLink\n      aria-label={ariaLabel}\n      className={isMenuItem ? actionMenuItemClassName : undefined}\n      data-test={nodeIdentity(node)}\n      href={node.props.href ?? \"#\"}\n      method={node.props.method ?? \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {content}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;;;AAaA,IAAM,oBACJ;AAEF,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;EACpD;CACG,CAAA;AAEV;AAEA,SAAS,WAAW,EAClB,QACA,WACA,WACA,UACA,UAOC;CACD,MAAM,EAAE,YAAY,eAAe,aAAa,UAAU,MAAM;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAC1C,aAAW;EACX,UAAU;EACV,SAAS;EACT,MAAK;EAEJ;CACK,CAAA,GACP,QACD,EAAA,CAAA;AAEN;AAEA,SAAS,UAAU,EAAE,OAAO,aAAmD;CAC7E,IAAI,MAAM,MACR,OAAO,oBAAC,cAAD;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,MAAM,MAAM;CAAO,CAAA;CAGhG,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,qCAAqC,SAAS;YAAI,MAAM;CAAW,CAAA;AAChG;AAEA,SAAS,YAAY,EACnB,MACA,YACA,OACA,QACA,UAOC;CACD,IAAI,MACF,OAAO,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA;CAGzE,IAAI,YACF,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAClB,SAAS,oBAAC,WAAD;GAAW,OAAO;GAAQ,WAAU;EAAW,CAAA,IAAI;CAC7D,EAAA,CAAA;CAIN,IAAI,UAAU,QACZ,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB;GACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;GACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAClB,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACrC;;CAIV,OAAO;AACT;AAEA,SAAS,qBAAqB,OAAe,QAAuB,QAAuB;CACzF,IAAI,CAAC,QAAQ,QAAQ,CAAC,QAAQ,MAC5B;CAGF,OAAO;EAAC,QAAQ;EAAM;EAAO,QAAQ;CAAI,EACtC,QAAQ,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,GAAG;AACb;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,WAAW,QAAQ,IAAI;CAC7B,MAAM,UACJ,oBAAC,aAAD;EACQ;EACM;EACL;EACC;EACA;CACT,CAAA;CAEH,MAAM,YAAY,WAAW,QAAQ,qBAAqB,OAAO,QAAQ,MAAM;CAE/E,IAAI,QACF,OACE,oBAAC,YAAD;EACU;EACG;EACX,WAAW,aAAa,0BAA0B,KAAA;EAClD,QAAQ,aAAa,IAAI;YAExB;CACS,CAAA;CAIhB,OACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,aAAa,0BAA0B,KAAA;EAClD,aAAW,aAAa,IAAI;EAC5B,MAAM,KAAK,MAAM,QAAQ;EACzB,QAAQ,KAAK,MAAM,UAAU;EAC7B,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC;CACO,CAAA;AAEd"}
+{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport {\n  ActionTrigger,\n  type TriggerState,\n  useClickBehavior,\n} from \"@lattice-php/lattice/core/use-click-behavior\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport {\n  actionMenuItemClassName,\n  useActionMenu,\n} from \"@lattice-php/lattice/action/components/action-menu-context\";\n\nconst textLinkClassName =\n  \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link className={cn(textLinkClassName, className)} {...props}>\n      {children}\n    </Link>\n  );\n}\n\nfunction LinkAffix({ affix, className }: { affix: Affix; className?: string }) {\n  if (affix.icon) {\n    return <IconRenderer className={cn(\"size-lt-icon-md shrink-0\", className)} icon={affix.icon} />;\n  }\n\n  return <span className={cn(\"shrink-0 text-sm text-lt-muted-fg\", className)}>{affix.text}</span>;\n}\n\nfunction LinkContent({\n  icon,\n  isMenuItem,\n  label,\n  prefix,\n  suffix,\n}: {\n  icon?: string | null;\n  isMenuItem: boolean;\n  label: string;\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n}) {\n  if (icon) {\n    return <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />;\n  }\n\n  if (isMenuItem) {\n    return (\n      <>\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} className=\"ml-auto\" /> : null}\n      </>\n    );\n  }\n\n  if (prefix || suffix) {\n    return (\n      <span className=\"inline-flex items-center gap-1.5 align-baseline\">\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} /> : null}\n      </span>\n    );\n  }\n\n  return label;\n}\n\nfunction labelWithTextAffixes(label: string, prefix?: Affix | null, suffix?: Affix | null) {\n  if (!prefix?.text && !suffix?.text) {\n    return undefined;\n  }\n\n  return [prefix?.text, label, suffix?.text]\n    .filter((part): part is string => Boolean(part))\n    .join(\" \");\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n  const { icon, label, prefix, suffix } = node.props;\n  const behavior = useClickBehavior(node.props);\n  const className = isMenuItem ? actionMenuItemClassName : undefined;\n  const testId = nodeIdentity(node);\n  const content = (\n    <LinkContent\n      icon={icon}\n      isMenuItem={isMenuItem}\n      label={label}\n      prefix={prefix}\n      suffix={suffix}\n    />\n  );\n  const ariaLabel = icon ? label : labelWithTextAffixes(label, prefix, suffix);\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <button\n      aria-label={ariaLabel}\n      className={cn(textLinkClassName, className)}\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {content}\n    </button>\n  );\n\n  if (behavior.kind === \"action\") {\n    return <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>;\n  }\n\n  if (behavior.kind === \"effects\") {\n    return triggerButton({ onClick: behavior.onClick, processing: false });\n  }\n\n  return (\n    <TextLink\n      aria-label={ariaLabel}\n      className={className}\n      data-test={testId}\n      href={behavior.kind === \"navigate\" ? behavior.href : \"#\"}\n      method={behavior.kind === \"navigate\" ? behavior.method : \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {content}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;;;AAiBA,IAAM,oBACJ;AAEF,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;EACpD;CACG,CAAA;AAEV;AAEA,SAAS,UAAU,EAAE,OAAO,aAAmD;CAC7E,IAAI,MAAM,MACR,OAAO,oBAAC,cAAD;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,MAAM,MAAM;CAAO,CAAA;CAGhG,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,qCAAqC,SAAS;YAAI,MAAM;CAAW,CAAA;AAChG;AAEA,SAAS,YAAY,EACnB,MACA,YACA,OACA,QACA,UAOC;CACD,IAAI,MACF,OAAO,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA;CAGzE,IAAI,YACF,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAClB,SAAS,oBAAC,WAAD;GAAW,OAAO;GAAQ,WAAU;EAAW,CAAA,IAAI;CAC7D,EAAA,CAAA;CAIN,IAAI,UAAU,QACZ,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB;GACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;GACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAClB,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACrC;;CAIV,OAAO;AACT;AAEA,SAAS,qBAAqB,OAAe,QAAuB,QAAuB;CACzF,IAAI,CAAC,QAAQ,QAAQ,CAAC,QAAQ,MAC5B;CAGF,OAAO;EAAC,QAAQ;EAAM;EAAO,QAAQ;CAAI,EACtC,QAAQ,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,GAAG;AACb;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,MAAM,OAAO,QAAQ,WAAW,KAAK;CAC7C,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,YAAY,aAAa,0BAA0B,KAAA;CACzD,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,UACJ,oBAAC,aAAD;EACQ;EACM;EACL;EACC;EACA;CACT,CAAA;CAEH,MAAM,YAAY,OAAO,QAAQ,qBAAqB,OAAO,QAAQ,MAAM;CAE3E,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAC1C,aAAW;EACX,UAAU;EACD;EACT,MAAK;YAEJ;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,UACpB,OAAO,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA;CAG/E,IAAI,SAAS,SAAS,WACpB,OAAO,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC;CAGvE,OACE,oBAAC,UAAD;EACE,cAAY;EACD;EACX,aAAW;EACX,MAAM,SAAS,SAAS,aAAa,SAAS,OAAO;EACrD,QAAQ,SAAS,SAAS,aAAa,SAAS,SAAS;EACzD,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC;CACO,CAAA;AAEd"}

package/dist/core/renderer.js

@@ -1,10 +1,50 @@
 import { useComponentRegistry } from "./registry-context.js";
 import { useCollapsed } from "./collapsed-context.js";
 import { Suspense } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/renderer.tsx
+function MissingComponentIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: "size-lt-icon-md shrink-0",
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				height: "18",
+				rx: "2",
+				strokeDasharray: "4 3",
+				width: "18",
+				x: "3",
+				y: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+		]
+	});
+}
+/**
+* Fallback for a node whose type has no registered renderer. Always renders a
+* visible, muted marker — icon-only survives tight spots like table cells — so
+* the gap is never invisible. Shows the type inline in development; keeps it
+* screen-reader-only (plus a hover tooltip) in production.
+*/
 function MissingComponent({ node }) {
-	return null;
+	node.type;
+	const label = `Missing component: ${node.type}`;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1.5 align-middle text-lt-muted-fg",
+		"data-lattice-missing-component": node.type,
+		title: label,
+		children: [/* @__PURE__ */ jsx(MissingComponentIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
 }
 function nodeKey(node, index) {
 	return node.key ?? node.id ?? `${node.type}-${index}`;

package/dist/core/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { Suspense } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { Node } from \"./types\";\nimport { useCollapsed } from \"./collapsed-context\";\nimport { useComponentRegistry } from \"./registry-context\";\n\nfunction MissingComponent({ node }: { node: Node }) {\n  if (!import.meta.env.DEV) {\n    return null;\n  }\n\n  return <div data-lattice-missing-component={node.type}>Missing component: {node.type}</div>;\n}\n\nfunction nodeKey(node: Node, index: number): string {\n  return node.key ?? node.id ?? `${node.type}-${index}`;\n}\n\nexport function Renderer({ nodes }: { nodes: Node[] }): ReactNode {\n  return nodes.map((node, index) => <NodeRenderer key={nodeKey(node, index)} node={node} />);\n}\n\nexport function RenderNode({ node }: { node: Node }): ReactNode {\n  return <NodeRenderer node={node} />;\n}\n\nfunction NodeRenderer({ node }: { node: Node }) {\n  const collapsed = useCollapsed();\n  const registry = useComponentRegistry();\n  const registration = registry[node.type];\n\n  if (collapsed && node.props?.hideWhenCollapsed === true) {\n    return null;\n  }\n\n  if (!registration) {\n    return <MissingComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.schema?.length ? <Renderer nodes={node.schema} /> : null;\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const fallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : null;\n\n    return <Suspense fallback={fallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n}\n"],"mappings":";;;;;AAMA,SAAS,iBAAiB,EAAE,QAAwB;CAEhD,OAAO;AAIX;AAEA,SAAS,QAAQ,MAAY,OAAuB;CAClD,OAAO,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG;AAChD;AAEA,SAAgB,SAAS,EAAE,SAAuC;CAChE,OAAO,MAAM,KAAK,MAAM,UAAU,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CAAC;AAC3F;AAEA,SAAgB,WAAW,EAAE,QAAmC;CAC9D,OAAO,oBAAC,cAAD,EAAoB,KAAO,CAAA;AACpC;AAEA,SAAS,aAAa,EAAE,QAAwB;CAC9C,MAAM,YAAY,aAAa;CAE/B,MAAM,eADW,qBACI,EAAS,KAAK;CAEnC,IAAI,aAAa,KAAK,OAAO,sBAAsB,MACjD,OAAO;CAGT,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAE/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UADjC,KAAK,QAAQ,SAAS,oBAAC,UAAD,EAAU,OAAO,KAAK,OAAS,CAAA,IAAI;CACJ,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAKvC,OAAO,oBAAC,UAAD;GAAoB,UAJV,oBACf,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IACtD;aAEkC;EAA4B,CAAA;CACpE;CAEA,OAAO;AACT"}
+{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { Suspense } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { Node } from \"./types\";\nimport { useCollapsed } from \"./collapsed-context\";\nimport { useComponentRegistry } from \"./registry-context\";\n\nconst warnedMissingTypes = new Set<string>();\n\nfunction warnMissingComponent(type: string): void {\n  if (!import.meta.env.DEV || warnedMissingTypes.has(type)) {\n    return;\n  }\n\n  warnedMissingTypes.add(type);\n  console.warn(\n    `[lattice] No component registered for node type \"${type}\" — Lattice rendered a fallback ` +\n      \"placeholder. Likely causes: your app registry was not passed to \" +\n      \"createLatticeApp({ registry }), or the registry key does not match the PHP \" +\n      \"#[AsComponent]/AsField type.\",\n  );\n}\n\nfunction MissingComponentIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-md shrink-0\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <rect height=\"18\" rx=\"2\" strokeDasharray=\"4 3\" width=\"18\" x=\"3\" y=\"3\" />\n      <path d=\"M12 8v4\" />\n      <path d=\"M12 16h.01\" />\n    </svg>\n  );\n}\n\n/**\n * Fallback for a node whose type has no registered renderer. Always renders a\n * visible, muted marker — icon-only survives tight spots like table cells — so\n * the gap is never invisible. Shows the type inline in development; keeps it\n * screen-reader-only (plus a hover tooltip) in production.\n */\nfunction MissingComponent({ node }: { node: Node }) {\n  warnMissingComponent(node.type);\n\n  const label = `Missing component: ${node.type}`;\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1.5 align-middle text-lt-muted-fg\"\n      data-lattice-missing-component={node.type}\n      title={label}\n    >\n      <MissingComponentIcon />\n      <span className={import.meta.env.DEV ? \"text-sm\" : \"sr-only\"}>{label}</span>\n    </span>\n  );\n}\n\nfunction nodeKey(node: Node, index: number): string {\n  return node.key ?? node.id ?? `${node.type}-${index}`;\n}\n\nexport function Renderer({ nodes }: { nodes: Node[] }): ReactNode {\n  return nodes.map((node, index) => <NodeRenderer key={nodeKey(node, index)} node={node} />);\n}\n\nexport function RenderNode({ node }: { node: Node }): ReactNode {\n  return <NodeRenderer node={node} />;\n}\n\nfunction NodeRenderer({ node }: { node: Node }) {\n  const collapsed = useCollapsed();\n  const registry = useComponentRegistry();\n  const registration = registry[node.type];\n\n  if (collapsed && node.props?.hideWhenCollapsed === true) {\n    return null;\n  }\n\n  if (!registration) {\n    return <MissingComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.schema?.length ? <Renderer nodes={node.schema} /> : null;\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const fallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : null;\n\n    return <Suspense fallback={fallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n}\n"],"mappings":";;;;;AAsBA,SAAS,uBAAuB;CAC9B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YARV;GAUE,oBAAC,QAAD;IAAM,QAAO;IAAK,IAAG;IAAI,iBAAgB;IAAM,OAAM;IAAK,GAAE;IAAI,GAAE;GAAK,CAAA;GACvE,oBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;GACnB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET;;;;;;;AAQA,SAAS,iBAAiB,EAAE,QAAwB;CAClD,KAA0B;CAE1B,MAAM,QAAQ,sBAAsB,KAAK;CAEzC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,kCAAgC,KAAK;EACrC,OAAO;YAHT,CAKE,oBAAC,sBAAD,CAAuB,CAAA,GACvB,oBAAC,QAAD;GAAM,WAA6C;aAAY;EAAY,CAAA,CACvE;;AAEV;AAEA,SAAS,QAAQ,MAAY,OAAuB;CAClD,OAAO,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG;AAChD;AAEA,SAAgB,SAAS,EAAE,SAAuC;CAChE,OAAO,MAAM,KAAK,MAAM,UAAU,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CAAC;AAC3F;AAEA,SAAgB,WAAW,EAAE,QAAmC;CAC9D,OAAO,oBAAC,cAAD,EAAoB,KAAO,CAAA;AACpC;AAEA,SAAS,aAAa,EAAE,QAAwB;CAC9C,MAAM,YAAY,aAAa;CAE/B,MAAM,eADW,qBACI,EAAS,KAAK;CAEnC,IAAI,aAAa,KAAK,OAAO,sBAAsB,MACjD,OAAO;CAGT,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAE/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UADjC,KAAK,QAAQ,SAAS,oBAAC,UAAD,EAAU,OAAO,KAAK,OAAS,CAAA,IAAI;CACJ,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAKvC,OAAO,oBAAC,UAAD;GAAoB,UAJV,oBACf,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IACtD;aAEkC;EAA4B,CAAA;CACpE;CAEA,OAAO;AACT"}

package/dist/core/types.d.ts

@@ -1,58 +1,33 @@
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
-import { Node as WireNode, NodeType, Option, PageContainer as KnownPageContainer, ListenerPayload } from '../types/generated';
-export type { KnownPageContainer, NodeType, WireNode };
-/** Loose props bag for nodes whose `type` is not a generated built-in. */
+import { ComponentPropsMap, NodeType, Option, PageContainer as KnownPageContainer, WireNode, ListenerPayload } from '../types/generated';
+export type { KnownPageContainer, NodeType, Option, WireNode };
 export type NodeProps = Record<string, unknown>;
 export type CommonNodeProps = {
     dataBindings?: Record<string, string> | null;
     hideWhenCollapsed?: boolean | null;
 };
-/** A `{ label, value }` pair used by the choice, select and segmented controls. */
-export type { Option };
 /**
- * A node whose `type` is not one of the generated built-ins. This is the escape
- * hatch that keeps the renderer open to components registered by consumers.
- */
-export type LooseNode<TType extends string = string> = {
-    id?: string;
-    key?: string;
-    props?: NodeProps;
-    schema?: Schema;
-    type: TType;
-};
-/**
- * Augmentable map of wire `type` string → props. Consumer 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 `WireNode` union below, so
- * this interface starts empty. Types listed in neither fall back to a loose bag.
+ * 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 registry `type` string to its payload: consumer augmentations
- * (`TAugment`) first, then generated built-ins (`TBuiltins`), then a loose
- * fallback. Shared by the component, column, chat-part and effect type maps so
- * every extensible kind resolves the same way.
+ * 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;
-type WireNodeProps = {
-    [TNode in WireNode as TNode["type"]]: TNode extends {
-        props: infer TProps;
-    } ? TProps : never;
-};
-/**
- * Resolves a wire `type` to its props: consumer augmentations
- * (`ComponentProps`) first, then generated built-ins, then a loose bag.
- */
-export type PropsOf<TType extends string> = ResolveProps<ComponentProps, WireNodeProps, TType, NodeProps> & CommonNodeProps;
+export type PropsOf<TType extends string> = ResolveProps<ComponentProps, ComponentPropsMap, TType, NodeProps> & CommonNodeProps;
 /**
- * Resolves a wire `type` string to its node shape: built-ins narrow to their
- * generated props, unknown types fall back to a loose props bag so custom
- * components still type-check. Built-in `props` is always present — the wire
- * serializes the full prop object, so reads need no optional chaining.
+ * 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 ? LooseNode : {
+export type NodeOfType<TType extends string = string> = string extends TType ? WireNode : {
     id?: string;
     key?: string;
     props: PropsOf<TType>;
@@ -60,9 +35,14 @@ export type NodeOfType<TType extends string = string> = string extends TType ? L
     type: TType;
 };
 export type Node<TType extends string = string> = NodeOfType<TType>;
-/** An ordered list of component nodes — the content of a page, form, or container. */
+/**
+ * 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[];
-/** A server-composed layout shell: its key plus a schema containing one Outlet. */
+/** Its `schema` holds exactly one Outlet node. */
 export type LayoutPayload = {
     key: string;
     schema: Schema;

package/dist/core/use-click-behavior.d.ts

@@ -0,0 +1,42 @@
+import { Method } from '@inertiajs/core';
+import { ReactNode } from 'react';
+import { Node } from './types';
+import { Effect } from '../types/generated';
+export type ClickBehavior = {
+    kind: "navigate";
+    href: string;
+    method: Method;
+} | {
+    kind: "action";
+    action: Node<"action">;
+} | {
+    kind: "effects";
+    onClick: () => void;
+} | {
+    kind: "none";
+};
+/**
+ * The shared click model for Link/Button/MenuItem: a clickable carries exactly
+ * one behavior — navigate to an href, run a server action, or dispatch client
+ * effects. This resolves it without touching the action machinery, so plain
+ * links/labels stay cheap; the `action` behavior renders through {@link ActionTrigger}.
+ */
+export declare function useClickBehavior(props: {
+    href?: string | null;
+    method?: Method | null;
+    action?: Node | null;
+    effects?: Effect[] | null;
+}): ClickBehavior;
+export type TriggerState = {
+    onClick: () => void;
+    processing: boolean;
+};
+/**
+ * Runs a server action's gate (confirm/form) and renders its overlays, handing
+ * the host a click handler + processing state to render its own element with.
+ * Only mounted for the `action` behavior, so a plain link never runs `useAction`.
+ */
+export declare function ActionTrigger({ action, children, }: {
+    action: Node<"action">;
+    children: (trigger: TriggerState) => ReactNode;
+}): import("react").JSX.Element;

package/dist/core/use-click-behavior.js

@@ -0,0 +1,46 @@
+import { getActionEffects } from "../effects/dispatch.js";
+import { useEffectDispatcher } from "../effects/use-effect-dispatcher.js";
+import { useAction } from "../action/use-action.js";
+import { Fragment, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/use-click-behavior.tsx
+/**
+* The shared click model for Link/Button/MenuItem: a clickable carries exactly
+* one behavior — navigate to an href, run a server action, or dispatch client
+* effects. This resolves it without touching the action machinery, so plain
+* links/labels stay cheap; the `action` behavior renders through {@link ActionTrigger}.
+*/
+function useClickBehavior(props) {
+	const dispatch = useEffectDispatcher();
+	const action = props.action ?? null;
+	const effects = props.effects ?? [];
+	if (action) return {
+		kind: "action",
+		action
+	};
+	if (effects.length > 0) return {
+		kind: "effects",
+		onClick: () => dispatch(getActionEffects(effects))
+	};
+	if (props.href != null && props.href !== "") return {
+		kind: "navigate",
+		href: props.href,
+		method: props.method ?? "get"
+	};
+	return { kind: "none" };
+}
+/**
+* Runs a server action's gate (confirm/form) and renders its overlays, handing
+* the host a click handler + processing state to render its own element with.
+* Only mounted for the `action` behavior, so a plain link never runs `useAction`.
+*/
+function ActionTrigger({ action, children }) {
+	const { processing, requestSubmit, overlays } = useAction(action);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [children({
+		onClick: requestSubmit,
+		processing
+	}), overlays] });
+}
+//#endregion
+export { ActionTrigger, useClickBehavior };
+
+//# sourceMappingURL=use-click-behavior.js.map

package/dist/core/use-click-behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-behavior.js","names":[],"sources":["../../resources/js/core/use-click-behavior.tsx"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { ReactNode } from \"react\";\nimport { useAction } from \"@lattice-php/lattice/action/use-action\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport type { Effect } from \"@lattice-php/lattice/types/generated\";\n\nexport type ClickBehavior =\n  | { kind: \"navigate\"; href: string; method: Method }\n  | { kind: \"action\"; action: Node<\"action\"> }\n  | { kind: \"effects\"; onClick: () => void }\n  | { kind: \"none\" };\n\n/**\n * The shared click model for Link/Button/MenuItem: a clickable carries exactly\n * one behavior — navigate to an href, run a server action, or dispatch client\n * effects. This resolves it without touching the action machinery, so plain\n * links/labels stay cheap; the `action` behavior renders through {@link ActionTrigger}.\n */\nexport function useClickBehavior(props: {\n  href?: string | null;\n  method?: Method | null;\n  action?: Node | null;\n  effects?: Effect[] | null;\n}): ClickBehavior {\n  const dispatch = useEffectDispatcher();\n  const action = (props.action ?? null) as Node<\"action\"> | null;\n  const effects = props.effects ?? [];\n\n  if (action) {\n    return { kind: \"action\", action };\n  }\n\n  if (effects.length > 0) {\n    return { kind: \"effects\", onClick: () => dispatch(getActionEffects(effects)) };\n  }\n\n  if (props.href != null && props.href !== \"\") {\n    return { kind: \"navigate\", href: props.href, method: props.method ?? \"get\" };\n  }\n\n  return { kind: \"none\" };\n}\n\nexport type TriggerState = { onClick: () => void; processing: boolean };\n\n/**\n * Runs a server action's gate (confirm/form) and renders its overlays, handing\n * the host a click handler + processing state to render its own element with.\n * Only mounted for the `action` behavior, so a plain link never runs `useAction`.\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"],"mappings":";;;;;;;;;;;AAoBA,SAAgB,iBAAiB,OAKf;CAChB,MAAM,WAAW,oBAAoB;CACrC,MAAM,SAAU,MAAM,UAAU;CAChC,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,IAAI,QACF,OAAO;EAAE,MAAM;EAAU;CAAO;CAGlC,IAAI,QAAQ,SAAS,GACnB,OAAO;EAAE,MAAM;EAAW,eAAe,SAAS,iBAAiB,OAAO,CAAC;CAAE;CAG/E,IAAI,MAAM,QAAQ,QAAQ,MAAM,SAAS,IACvC,OAAO;EAAE,MAAM;EAAY,MAAM,MAAM;EAAM,QAAQ,MAAM,UAAU;CAAM;CAG7E,OAAO,EAAE,MAAM,OAAO;AACxB;;;;;;AASA,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"}

package/dist/create-app.d.ts

@@ -1,11 +1,17 @@
 import { createInertiaApp } from '@inertiajs/react';
 import { ReactElement } from 'react';
-import { Registry } from './core/registry';
+import { Plugin, Registry } from './core/registry';
 import { SpriteValue } from './icons/sprite';
 import { CreateLayoutResolverOptions, PageModules } from './inertia';
 type InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;
 export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layout" | "setup" | "withApp" | "pages"> & {
     registry?: Registry;
+    /**
+     * Component-package plugins to merge onto the registry — pass the
+     * Composer-discovered `virtual:lattice/plugins` here to register vendor
+     * components with no manual `extendRegistry` call.
+     */
+    plugins?: Plugin[];
     sprite?: SpriteValue;
     /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\/*.tsx')`. */
     pages?: PageModules;
@@ -17,5 +23,5 @@ export type CreateLatticeAppOptions = Omit<InertiaAppOptions, "resolve" | "layou
  * registry, sprite, flash toasts via Lattice's own Toaster — and theme
  * initialization. Forwards any other createInertiaApp option.
  */
-export declare function createLatticeApp({ registry, 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, ...inertiaOptions }?: CreateLatticeAppOptions): Promise<void | ((page: import('@inertiajs/core').Page<import('@inertiajs/core').PageProps>, renderToString: (element: ReactElement) => string) => Promise<import('@inertiajs/core').InertiaAppSSRResponse>)>;
 export {};

package/dist/create-app.js

@@ -1,4 +1,5 @@
 import { initializeTheme } from "./appearance/index.js";
+import { extendRegistry } from "./core/registry.js";
 import { setDefaultRegistry } from "./core/registry-context.js";
 import { createLayoutResolver, createPageResolver } from "./inertia.js";
 import { ProviderBase } from "./provider-base.js";
@@ -12,8 +13,9 @@ import { jsx } from "react/jsx-runtime";
 * registry, sprite, flash toasts via Lattice's own Toaster — and theme
 * initialization. Forwards any other createInertiaApp option.
 */
-function createLatticeApp({ registry, sprite, pages = {}, defaultLayout, strictMode = true, ...inertiaOptions } = {}) {
-	const activeRegistry = registry ?? lazyRegistry;
+function createLatticeApp({ registry, plugins, sprite, pages = {}, defaultLayout, strictMode = true, ...inertiaOptions } = {}) {
+	const baseRegistry = registry ?? lazyRegistry;
+	const activeRegistry = plugins && plugins.length > 0 ? extendRegistry(baseRegistry, ...plugins) : baseRegistry;
 	setDefaultRegistry(activeRegistry);
 	const app = createInertiaApp({
 		...inertiaOptions,