@lattice-php/lattice 0.1.0 → 0.2.0

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

@@ -1,22 +1,4 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        tab: {
-            confirm?: {
-                redirectUrl?: string;
-                required?: boolean;
-                timeout?: number;
-            };
-            label?: string;
-            value?: string;
-        };
-        tabs: {
-            activeValue?: string;
-            defaultValue?: string;
-            queryKey?: string;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 export declare const TabsComponent: RendererComponent<"tabs">;
 declare const TabComponent: RendererComponent<"tab">;
 export default TabComponent;

package/dist/core/components/tabs.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/utils.js";
-import { getStringProp } from "../props.js";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { useT } from "../../i18n/instance.js";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { router } from "@inertiajs/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/tabs.tsx
@@ -14,16 +14,14 @@ function useTabsContext() {
 	return context;
 }
 function getTabs(node) {
-	return (node.children ?? []).filter((child) => child.type === "tab").map((child) => ({
-		confirm: getConfirmationProp(child.props),
-		label: getStringProp(child.props, "label"),
-		value: getStringProp(child.props, "value")
-	})).filter((tab) => tab.value !== "");
-}
-function getConfirmationProp(props) {
-	const confirm = props?.confirm;
-	if (!confirm || typeof confirm !== "object" || Array.isArray(confirm)) return;
-	return { required: confirm.required === true };
+	return (node.schema ?? []).filter((child) => child.type === "tab").map((child) => {
+		const props = child.props;
+		return {
+			confirm: props.confirm ? { required: props.confirm.required } : void 0,
+			label: props.label,
+			value: props.value
+		};
+	}).filter((tab) => tab.value !== "");
 }
 function queryValue(queryKey, tabs) {
 	if (typeof window === "undefined") return null;
@@ -44,11 +42,15 @@ function queryUrl(queryKey, value) {
 	return `${url.pathname}${url.search}${url.hash}`;
 }
 var TabsComponent = ({ children, node }) => {
+	const { t } = useT("lattice");
 	const tabs = useMemo(() => getTabs(node), [node]);
 	const firstValue = tabs[0]?.value ?? "";
-	const queryKey = getStringProp(node.props, "queryKey", "tabs");
-	const serverActiveValue = getStringProp(node.props, "activeValue", "");
-	const defaultValue = getStringProp(node.props, "defaultValue", firstValue);
+	const queryKey = node.props.queryKey;
+	const orientation = node.props.orientation;
+	const isVertical = orientation === "vertical";
+	const serverActiveValue = node.props.activeValue;
+	const defaultValue = node.props.defaultValue ?? firstValue;
+	const tablistRef = useRef(null);
 	const [activeValue, setActiveTabValue] = useState(() => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue);
 	function selectTab(tab) {
 		if (tab.confirm?.required) {
@@ -62,33 +64,55 @@ var TabsComponent = ({ children, node }) => {
 		const tab = tabs.find((item) => item.value === value);
 		if (tab) selectTab(tab);
 	}
+	function onTablistKeyDown(event) {
+		const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+		const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+		if (event.key !== nextKey && event.key !== prevKey && event.key !== "Home" && event.key !== "End") return;
+		const buttons = Array.from(tablistRef.current?.querySelectorAll("[role=\"tab\"]") ?? []);
+		if (buttons.length === 0) return;
+		event.preventDefault();
+		const current = buttons.indexOf(document.activeElement);
+		let index;
+		if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = buttons.length - 1;
+		else {
+			const delta = event.key === nextKey ? 1 : -1;
+			index = ((current < 0 ? 0 : current) + delta + buttons.length) % buttons.length;
+		}
+		buttons[index]?.focus();
+	}
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
 		value: {
 			activeValue,
 			setActiveValue: selectTabValue
 		},
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "grid gap-6",
+			className: cn("gap-6", isVertical ? "flex" : "grid"),
 			"data-lattice-tabs": node.key ?? node.id,
 			children: [/* @__PURE__ */ jsx("div", {
-				"aria-label": getStringProp(node.props, "label", "Tabs"),
-				className: "inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1",
+				"aria-label": t("a11y.tabs", "Tabs"),
+				"aria-orientation": orientation,
+				className: cn("gap-1 rounded-lt bg-lt-muted p-1", isVertical ? "flex flex-col" : "inline-flex w-fit max-w-full overflow-x-auto"),
+				ref: tablistRef,
 				role: "tablist",
 				children: tabs.map((tab) => {
 					const isActive = activeValue === tab.value;
 					return /* @__PURE__ */ jsx("button", {
 						"aria-controls": `${tab.value}-panel`,
 						"aria-selected": isActive,
-						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg"),
+						"data-test": `tab-${tab.value}`,
+						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", isVertical && "text-left"),
 						id: `${tab.value}-tab`,
 						onClick: () => selectTab(tab),
+						onKeyDown: onTablistKeyDown,
 						role: "tab",
+						tabIndex: isActive ? 0 : -1,
 						type: "button",
 						children: tab.label
 					}, tab.value);
 				})
 			}), /* @__PURE__ */ jsx("div", {
-				className: "min-w-0",
+				className: cn("min-w-0", isVertical && "flex-1"),
 				children
 			})]
 		})
@@ -96,7 +120,7 @@ var TabsComponent = ({ children, node }) => {
 };
 var TabComponent = ({ children, node }) => {
 	const { activeValue } = useTabsContext();
-	const value = getStringProp(node.props, "value");
+	const value = node.props.value;
 	const isActive = activeValue === value;
 	const [hasOpened, setHasOpened] = useState(isActive);
 	useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../resources/js/core/components/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { Node, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.children ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => ({\n      confirm: getConfirmationProp(child.props),\n      label: getStringProp(child.props, \"label\"),\n      value: getStringProp(child.props, \"value\"),\n    }))\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction getConfirmationProp(props: Node[\"props\"]): TabItem[\"confirm\"] {\n  const confirm = props?.confirm;\n\n  if (!confirm || typeof confirm !== \"object\" || Array.isArray(confirm)) {\n    return undefined;\n  }\n\n  const confirmation = confirm as Record<string, unknown>;\n\n  return {\n    required: confirmation.required === true,\n  };\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    tab: {\n      confirm?: {\n        redirectUrl?: string;\n        required?: boolean;\n        timeout?: number;\n      };\n      label?: string;\n      value?: string;\n    };\n    tabs: {\n      activeValue?: string;\n      defaultValue?: string;\n      queryKey?: string;\n    };\n  }\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = getStringProp(node.props, \"queryKey\", \"tabs\");\n  const serverActiveValue = getStringProp(node.props, \"activeValue\", \"\");\n  const defaultValue = getStringProp(node.props, \"defaultValue\", firstValue);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div className=\"grid gap-6\" data-lattice-tabs={node.key ?? node.id}>\n        <div\n          aria-label={getStringProp(node.props, \"label\", \"Tabs\")}\n          className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                role=\"tab\"\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className=\"min-w-0\">{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = getStringProp(node.props, \"value\");\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../resources/js/core/components/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice/lattice/core/types\";\nimport type { Tab } from \"@lattice/lattice/types/generated\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div\n        className={cn(\"gap-6\", isVertical ? \"flex\" : \"grid\")}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"a11y.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical ? \"flex flex-col\" : \"inline-flex w-fit max-w-full overflow-x-auto\",\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                  isVertical && \"text-left\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}

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

@@ -1,11 +1,3 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        text: {
-            align?: string;
-            text?: string;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 declare const TextComponent: RendererComponent<"text">;
 export default TextComponent;

package/dist/core/components/text.js

@@ -1,5 +1,4 @@
 import { cn } from "../../lib/utils.js";
-import { getStringProp } from "../props.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/text.tsx
 var textAlignments = {
@@ -8,8 +7,8 @@ var textAlignments = {
 };
 var TextComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("max-w-2xl text-base leading-7 text-lt-muted-fg", textAlignments[getStringProp(node.props, "align", "left")] ?? textAlignments.left),
-		children: getStringProp(node.props, "text")
+		className: cn("max-w-2xl text-base leading-7 text-lt-muted-fg", textAlignments[node.props.align ?? "left"] ?? textAlignments.left),
+		children: node.props.text
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../resources/js/core/components/text.tsx"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    text: {\n      align?: string;\n      text?: string;\n    };\n  }\n}\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = getStringProp(node.props, \"align\", \"left\");\n\n  return (\n    <p\n      className={cn(\n        \"max-w-2xl text-base leading-7 text-lt-muted-fg\",\n        textAlignments[align] ?? textAlignments.left,\n      )}\n    >\n      {getStringProp(node.props, \"text\")}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;;AAaA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,kDACA,eANQ,cAAc,KAAK,OAAO,SAAS,MAM5B,MAAU,eAAe,IAC1C;YAEC,cAAc,KAAK,OAAO,MAAM;CAChC,CAAA;AAEP"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../resources/js/core/components/text.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n\n  return (\n    <p\n      className={cn(\n        \"max-w-2xl text-base leading-7 text-lt-muted-fg\",\n        textAlignments[align] ?? textAlignments.left,\n      )}\n    >\n      {node.props.text}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;AAGA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,kDACA,eANQ,KAAK,MAAM,SAAS,WAMH,eAAe,IAC1C;YAEC,KAAK,MAAM;CACX,CAAA;AAEP"}

package/dist/core/registry.d.ts

@@ -1,5 +1,6 @@
 import { LazyExoticComponent } from 'react';
 import { RendererComponent, RendererComponentModule } from './types';
+import { ColumnRegistry } from '../table/column-registry';
 export type EagerComponentRegistration = {
     component: RendererComponent;
     mode: "eager";
@@ -13,8 +14,13 @@ export type LazyComponentRegistration = {
 export type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;
 export type ComponentRegistry = Record<string, ComponentRegistration>;
 export type Plugin = {
-    components: ComponentRegistry;
     name: string;
+    components?: ComponentRegistry;
+    columns?: ColumnRegistry;
+};
+export type Registry = {
+    components: ComponentRegistry;
+    columns: ColumnRegistry;
 };
 export type LazyComponentOptions<TType extends string> = {
     fallback?: RendererComponent<TType>;
@@ -22,5 +28,5 @@ export type LazyComponentOptions<TType extends string> = {
 export declare function eagerComponent<TType extends string>(component: RendererComponent<TType>): EagerComponentRegistration;
 export declare function lazyComponent<TType extends string>(load: () => Promise<RendererComponentModule<TType>>, options?: LazyComponentOptions<TType>): LazyComponentRegistration;
 export declare function createPlugin(plugin: Plugin): Plugin;
-export declare function createRegistry(...plugins: Plugin[]): ComponentRegistry;
-export declare function extendRegistry(registry: ComponentRegistry, ...plugins: Plugin[]): ComponentRegistry;
+export declare function createRegistry(...plugins: Plugin[]): Registry;
+export declare function extendRegistry(registry: Registry, ...plugins: Plugin[]): Registry;

package/dist/core/registry.js

@@ -20,14 +20,30 @@ function createPlugin(plugin) {
 }
 function createRegistry(...plugins) {
 	return plugins.reduce((registry, plugin) => ({
-		...registry,
-		...plugin.components
-	}), {});
+		components: {
+			...registry.components,
+			...plugin.components
+		},
+		columns: {
+			...registry.columns,
+			...plugin.columns
+		}
+	}), {
+		components: {},
+		columns: {}
+	});
 }
 function extendRegistry(registry, ...plugins) {
+	const merged = createRegistry(...plugins);
 	return {
-		...registry,
-		...createRegistry(...plugins)
+		components: {
+			...registry.components,
+			...merged.components
+		},
+		columns: {
+			...registry.columns,
+			...merged.columns
+		}
 	};
 }
 //#endregion

package/dist/core/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/core/registry.ts"],"sourcesContent":["import { lazy } from \"react\";\nimport type { LazyExoticComponent } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"./types\";\n\nexport type EagerComponentRegistration = {\n  component: RendererComponent;\n  mode: \"eager\";\n};\n\nexport type LazyComponentRegistration = {\n  component: LazyExoticComponent<RendererComponent>;\n  fallback?: RendererComponent;\n  load: () => Promise<RendererComponentModule>;\n  mode: \"lazy\";\n};\n\nexport type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;\n\nexport type ComponentRegistry = Record<string, ComponentRegistration>;\n\nexport type Plugin = {\n  components: ComponentRegistry;\n  name: string;\n};\n\nexport type LazyComponentOptions<TType extends string> = {\n  fallback?: RendererComponent<TType>;\n};\n\nexport function eagerComponent<TType extends string>(\n  component: RendererComponent<TType>,\n): EagerComponentRegistration {\n  return {\n    component: component as RendererComponent,\n    mode: \"eager\",\n  };\n}\n\nexport function lazyComponent<TType extends string>(\n  load: () => Promise<RendererComponentModule<TType>>,\n  options: LazyComponentOptions<TType> = {},\n): LazyComponentRegistration {\n  const erasedLoader = load as unknown as () => Promise<RendererComponentModule>;\n\n  return {\n    component: lazy(erasedLoader),\n    fallback: options.fallback as RendererComponent | undefined,\n    load: erasedLoader,\n    mode: \"lazy\",\n  };\n}\n\nexport function createPlugin(plugin: Plugin): Plugin {\n  return plugin;\n}\n\nexport function createRegistry(...plugins: Plugin[]): ComponentRegistry {\n  return plugins.reduce<ComponentRegistry>(\n    (registry, plugin) => ({\n      ...registry,\n      ...plugin.components,\n    }),\n    {},\n  );\n}\n\nexport function extendRegistry(\n  registry: ComponentRegistry,\n  ...plugins: Plugin[]\n): ComponentRegistry {\n  return {\n    ...registry,\n    ...createRegistry(...plugins),\n  };\n}\n"],"mappings":";;AA6BA,SAAgB,eACd,WAC4B;CAC5B,OAAO;EACM;EACX,MAAM;CACR;AACF;AAEA,SAAgB,cACd,MACA,UAAuC,CAAC,GACb;CAC3B,MAAM,eAAe;CAErB,OAAO;EACL,WAAW,KAAK,YAAY;EAC5B,UAAU,QAAQ;EAClB,MAAM;EACN,MAAM;CACR;AACF;AAEA,SAAgB,aAAa,QAAwB;CACnD,OAAO;AACT;AAEA,SAAgB,eAAe,GAAG,SAAsC;CACtE,OAAO,QAAQ,QACZ,UAAU,YAAY;EACrB,GAAG;EACH,GAAG,OAAO;CACZ,IACA,CAAC,CACH;AACF;AAEA,SAAgB,eACd,UACA,GAAG,SACgB;CACnB,OAAO;EACL,GAAG;EACH,GAAG,eAAe,GAAG,OAAO;CAC9B;AACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/core/registry.ts"],"sourcesContent":["import { lazy } from \"react\";\nimport type { LazyExoticComponent } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"./types\";\nimport type { ColumnRegistry } from \"../table/column-registry\";\n\nexport type EagerComponentRegistration = {\n  component: RendererComponent;\n  mode: \"eager\";\n};\n\nexport type LazyComponentRegistration = {\n  component: LazyExoticComponent<RendererComponent>;\n  fallback?: RendererComponent;\n  load: () => Promise<RendererComponentModule>;\n  mode: \"lazy\";\n};\n\nexport type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;\n\nexport type ComponentRegistry = Record<string, ComponentRegistration>;\n\nexport type Plugin = {\n  name: string;\n  components?: ComponentRegistry;\n  columns?: ColumnRegistry;\n};\n\nexport type Registry = {\n  components: ComponentRegistry;\n  columns: ColumnRegistry;\n};\n\nexport type LazyComponentOptions<TType extends string> = {\n  fallback?: RendererComponent<TType>;\n};\n\nexport function eagerComponent<TType extends string>(\n  component: RendererComponent<TType>,\n): EagerComponentRegistration {\n  return {\n    component: component as unknown as RendererComponent,\n    mode: \"eager\",\n  };\n}\n\nexport function lazyComponent<TType extends string>(\n  load: () => Promise<RendererComponentModule<TType>>,\n  options: LazyComponentOptions<TType> = {},\n): LazyComponentRegistration {\n  const erasedLoader = load as unknown as () => Promise<RendererComponentModule>;\n\n  return {\n    component: lazy(erasedLoader),\n    fallback: options.fallback as RendererComponent | undefined,\n    load: erasedLoader,\n    mode: \"lazy\",\n  };\n}\n\nexport function createPlugin(plugin: Plugin): Plugin {\n  return plugin;\n}\n\nexport function createRegistry(...plugins: Plugin[]): Registry {\n  return plugins.reduce<Registry>(\n    (registry, plugin) => ({\n      components: { ...registry.components, ...plugin.components },\n      columns: { ...registry.columns, ...plugin.columns },\n    }),\n    { components: {}, columns: {} },\n  );\n}\n\nexport function extendRegistry(registry: Registry, ...plugins: Plugin[]): Registry {\n  const merged = createRegistry(...plugins);\n\n  return {\n    components: { ...registry.components, ...merged.components },\n    columns: { ...registry.columns, ...merged.columns },\n  };\n}\n"],"mappings":";;AAoCA,SAAgB,eACd,WAC4B;CAC5B,OAAO;EACM;EACX,MAAM;CACR;AACF;AAEA,SAAgB,cACd,MACA,UAAuC,CAAC,GACb;CAC3B,MAAM,eAAe;CAErB,OAAO;EACL,WAAW,KAAK,YAAY;EAC5B,UAAU,QAAQ;EAClB,MAAM;EACN,MAAM;CACR;AACF;AAEA,SAAgB,aAAa,QAAwB;CACnD,OAAO;AACT;AAEA,SAAgB,eAAe,GAAG,SAA6B;CAC7D,OAAO,QAAQ,QACZ,UAAU,YAAY;EACrB,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD,IACA;EAAE,YAAY,CAAC;EAAG,SAAS,CAAC;CAAE,CAChC;AACF;AAEA,SAAgB,eAAe,UAAoB,GAAG,SAA6B;CACjF,MAAM,SAAS,eAAe,GAAG,OAAO;CAExC,OAAO;EACL,YAAY;GAAE,GAAG,SAAS;GAAY,GAAG,OAAO;EAAW;EAC3D,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD;AACF"}

package/dist/core/renderer.js

@@ -10,6 +10,9 @@ function useRendererContext() {
 	if (!context) throw new Error("Renderer context is not available.");
 	return context;
 }
+function nodeKey(node, index) {
+	return node.key ?? node.id ?? `${node.type}-${index}`;
+}
 function Renderer({ fallback = null, missingComponent: UnknownComponent = MissingComponent, nodes, registry }) {
 	const context = useMemo(() => ({
 		fallback,
@@ -22,26 +25,17 @@ function Renderer({ fallback = null, missingComponent: UnknownComponent = Missin
 	]);
 	return /* @__PURE__ */ jsx(RendererContext.Provider, {
 		value: context,
-		children: nodes.map((node, index) => /* @__PURE__ */ jsx(NodeRenderer, {
-			fallback,
-			missingComponent: UnknownComponent,
-			node,
-			registry
-		}, node.key ?? node.id ?? `${node.type}-${index}`))
+		children: nodes.map((node, index) => /* @__PURE__ */ jsx(NodeRenderer, { node }, nodeKey(node, index)))
 	});
 }
-function NodeRenderer({ fallback, missingComponent: UnknownComponent, node, registry }) {
+function NodeRenderer({ node }) {
+	const { fallback, missingComponent: UnknownComponent, registry } = useRendererContext();
 	const registration = registry[node.type];
 	if (!registration) return /* @__PURE__ */ jsx(UnknownComponent, { node });
 	const Component = registration.component;
 	const renderedComponent = /* @__PURE__ */ jsx(Component, {
 		node,
-		children: node.children?.length ? /* @__PURE__ */ jsx(Renderer, {
-			fallback,
-			missingComponent: UnknownComponent,
-			nodes: node.children,
-			registry
-		}) : null
+		children: node.schema?.length ? node.schema.map((child, index) => /* @__PURE__ */ jsx(NodeRenderer, { node: child }, nodeKey(child, index))) : null
 	});
 	if (registration.mode === "lazy") {
 		const FallbackComponent = registration.fallback;

package/dist/core/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { createContext, Suspense, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ComponentRegistry } from \"./registry\";\nimport type { Node, UnknownComponent } from \"./types\";\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\ntype RendererContextValue = {\n  fallback: ReactNode;\n  missingComponent: UnknownComponent;\n  registry: ComponentRegistry;\n};\n\nconst RendererContext = createContext<RendererContextValue | null>(null);\n\nexport function useRendererContext(): RendererContextValue {\n  const context = useContext(RendererContext);\n\n  if (!context) {\n    throw new Error(\"Renderer context is not available.\");\n  }\n\n  return context;\n}\n\nexport function Renderer({\n  fallback = null,\n  missingComponent: UnknownComponent = MissingComponent,\n  nodes,\n  registry,\n}: {\n  fallback?: ReactNode;\n  missingComponent?: UnknownComponent;\n  nodes: Node[];\n  registry: ComponentRegistry;\n}) {\n  const context = useMemo(\n    () => ({\n      fallback,\n      missingComponent: UnknownComponent,\n      registry,\n    }),\n    [fallback, registry, UnknownComponent],\n  );\n\n  return (\n    <RendererContext.Provider value={context}>\n      {nodes.map((node, index) => (\n        <NodeRenderer\n          fallback={fallback}\n          key={node.key ?? node.id ?? `${node.type}-${index}`}\n          missingComponent={UnknownComponent}\n          node={node}\n          registry={registry}\n        />\n      ))}\n    </RendererContext.Provider>\n  );\n}\n\nfunction NodeRenderer({\n  fallback,\n  missingComponent: UnknownComponent,\n  node,\n  registry,\n}: {\n  fallback: ReactNode;\n  missingComponent: UnknownComponent;\n  node: Node;\n  registry: ComponentRegistry;\n}) {\n  const registration = registry[node.type];\n\n  if (!registration) {\n    return <UnknownComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.children?.length ? (\n    <Renderer\n      fallback={fallback}\n      missingComponent={UnknownComponent}\n      nodes={node.children}\n      registry={registry}\n    />\n  ) : null;\n\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const suspenseFallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : (\n      fallback\n    );\n\n    return <Suspense fallback={suspenseFallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n}\n"],"mappings":";;;AAKA,SAAS,iBAAiB,EAAE,QAAwB;CAEhD,OAAO;AAIX;AAQA,IAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAgB,qBAA2C;CACzD,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,oCAAoC;CAGtD,OAAO;AACT;AAEA,SAAgB,SAAS,EACvB,WAAW,MACX,kBAAkB,mBAAmB,kBACrC,OACA,YAMC;CACD,MAAM,UAAU,eACP;EACL;EACA,kBAAkB;EAClB;CACF,IACA;EAAC;EAAU;EAAU;CAAgB,CACvC;CAEA,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC9B,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD;GACY;GAEV,kBAAkB;GACZ;GACI;EACX,GAJM,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG,OAI7C,CACF;CACuB,CAAA;AAE9B;AAEA,SAAS,aAAa,EACpB,UACA,kBAAkB,kBAClB,MACA,YAMC;CACD,MAAM,eAAe,SAAS,KAAK;CAEnC,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAU/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UATjC,KAAK,UAAU,SAC9B,oBAAC,UAAD;GACY;GACV,kBAAkB;GAClB,OAAO,KAAK;GACF;EACX,CAAA,IACC;CAEkE,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAOvC,OAAO,oBAAC,UAAD;GAAU,UANQ,oBACvB,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IAExD;aAG4C;EAA4B,CAAA;CAC5E;CAEA,OAAO;AACT"}
+{"version":3,"file":"renderer.js","names":[],"sources":["../../resources/js/core/renderer.tsx"],"sourcesContent":["import { createContext, Suspense, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ComponentRegistry } from \"./registry\";\nimport type { Node, UnknownComponent } from \"./types\";\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\ntype RendererContextValue = {\n  fallback: ReactNode;\n  missingComponent: UnknownComponent;\n  registry: ComponentRegistry;\n};\n\nconst RendererContext = createContext<RendererContextValue | null>(null);\n\nexport function useRendererContext(): RendererContextValue {\n  const context = useContext(RendererContext);\n\n  if (!context) {\n    throw new Error(\"Renderer context is not available.\");\n  }\n\n  return context;\n}\n\nfunction nodeKey(node: Node, index: number): string {\n  return node.key ?? node.id ?? `${node.type}-${index}`;\n}\n\nexport function Renderer({\n  fallback = null,\n  missingComponent: UnknownComponent = MissingComponent,\n  nodes,\n  registry,\n}: {\n  fallback?: ReactNode;\n  missingComponent?: UnknownComponent;\n  nodes: Node[];\n  registry: ComponentRegistry;\n}) {\n  const context = useMemo(\n    () => ({\n      fallback,\n      missingComponent: UnknownComponent,\n      registry,\n    }),\n    [fallback, registry, UnknownComponent],\n  );\n\n  return (\n    <RendererContext.Provider value={context}>\n      {nodes.map((node, index) => (\n        <NodeRenderer key={nodeKey(node, index)} node={node} />\n      ))}\n    </RendererContext.Provider>\n  );\n}\n\nfunction NodeRenderer({ node }: { node: Node }) {\n  const { fallback, missingComponent: UnknownComponent, registry } = useRendererContext();\n  const registration = registry[node.type];\n\n  if (!registration) {\n    return <UnknownComponent node={node} />;\n  }\n\n  const Component = registration.component;\n  const children = node.schema?.length\n    ? node.schema.map((child, index) => <NodeRenderer key={nodeKey(child, index)} node={child} />)\n    : null;\n\n  const renderedComponent = <Component node={node}>{children}</Component>;\n\n  if (registration.mode === \"lazy\") {\n    const FallbackComponent = registration.fallback;\n    const suspenseFallback = FallbackComponent ? (\n      <FallbackComponent node={node}>{null}</FallbackComponent>\n    ) : (\n      fallback\n    );\n\n    return <Suspense fallback={suspenseFallback}>{renderedComponent}</Suspense>;\n  }\n\n  return renderedComponent;\n}\n"],"mappings":";;;AAKA,SAAS,iBAAiB,EAAE,QAAwB;CAEhD,OAAO;AAIX;AAQA,IAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAgB,qBAA2C;CACzD,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,oCAAoC;CAGtD,OAAO;AACT;AAEA,SAAS,QAAQ,MAAY,OAAuB;CAClD,OAAO,KAAK,OAAO,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG;AAChD;AAEA,SAAgB,SAAS,EACvB,WAAW,MACX,kBAAkB,mBAAmB,kBACrC,OACA,YAMC;CACD,MAAM,UAAU,eACP;EACL;EACA,kBAAkB;EAClB;CACF,IACA;EAAC;EAAU;EAAU;CAAgB,CACvC;CAEA,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC9B,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CACvD;CACuB,CAAA;AAE9B;AAEA,SAAS,aAAa,EAAE,QAAwB;CAC9C,MAAM,EAAE,UAAU,kBAAkB,kBAAkB,aAAa,mBAAmB;CACtF,MAAM,eAAe,SAAS,KAAK;CAEnC,IAAI,CAAC,cACH,OAAO,oBAAC,kBAAD,EAAwB,KAAO,CAAA;CAGxC,MAAM,YAAY,aAAa;CAK/B,MAAM,oBAAoB,oBAAC,WAAD;EAAiB;EAAO,UAJjC,KAAK,QAAQ,SAC1B,KAAK,OAAO,KAAK,OAAO,UAAU,oBAAC,cAAD,EAA0C,MAAM,MAAQ,GAArC,QAAQ,OAAO,KAAK,CAAiB,CAAC,IAC3F;CAEkE,CAAA;CAEtE,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,oBAAoB,aAAa;EAOvC,OAAO,oBAAC,UAAD;GAAU,UANQ,oBACvB,oBAAC,mBAAD;IAAyB;cAAO;GAAwB,CAAA,IAExD;aAG4C;EAA4B,CAAA;CAC5E;CAEA,OAAO;AACT"}

package/dist/core/types.d.ts

@@ -1,46 +1,74 @@
-import { Method } from '@inertiajs/core';
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
+import { Node as WireNode, NodeType, Option, PageContainer as KnownPageContainer } from '../types/generated';
+export type { KnownPageContainer, NodeType, WireNode };
+/** Loose props bag for nodes whose `type` is not a generated built-in. */
 export type NodeProps = Record<string, unknown>;
+/** 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.
+ */
 export interface ComponentProps {
-    [component: string]: NodeProps;
 }
-export type ComponentType = keyof ComponentProps & string;
-export type PropsFor<TType extends string> = TType extends ComponentType ? ComponentProps[TType] & NodeProps : NodeProps;
-export type Node<TType extends string = string> = {
-    children?: Node[];
+type BuiltInPropsOf<TType extends string> = [Extract<WireNode, {
+    type: TType;
+}>] extends [never] ? never : Extract<WireNode, {
+    type: TType;
+}> 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> = TType extends keyof ComponentProps ? ComponentProps[TType] : [BuiltInPropsOf<TType>] extends [never] ? NodeProps : BuiltInPropsOf<TType>;
+/**
+ * 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.
+ */
+export type NodeOfType<TType extends string = string> = string extends TType ? LooseNode : {
     id?: string;
     key?: string;
-    props?: PropsFor<TType>;
+    props: PropsOf<TType>;
+    schema?: Schema;
     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. */
+export type Schema = Node[];
+/** A server-composed layout shell: its key plus a schema containing one Outlet. */
+export type LayoutPayload = {
+    key: string;
+    schema: Schema;
+};
 export type PagePayload = {
     breadcrumbs: PageBreadcrumb[];
-    components: Node[];
     container: PageContainer;
-    layout: string;
-    menus: Record<string, MenuPayload | undefined>;
+    layout: LayoutPayload | null;
+    schema: Schema;
     title: string | null;
 };
 export type PageBreadcrumb = {
     href: string;
     title: string;
 };
-export type MenuItem = {
-    active: boolean;
-    href: string;
-    icon: string | null;
-    key: string;
-    label: string;
-    method: Method;
-};
-export type MenuGroup = {
-    items: MenuItem[];
-    label: string | null;
-};
-export type MenuPayload = {
-    groups: MenuGroup[];
-};
-export type KnownPageContainer = "centered" | "default";
 export type PageContainer = KnownPageContainer | (string & {});
 export type RendererComponentProps<TType extends string = string> = {
     children: ReactNode;

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

@@ -1,7 +1,7 @@
 import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../icons/sprite.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { CheckIcon } from "lucide-react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 //#region resources/js/form/components/base/checkbox.tsx
 function Checkbox({ className, ...props }) {
@@ -12,7 +12,10 @@ function Checkbox({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",
 			className: "flex items-center justify-center text-current transition-none",
-			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				className: "size-lt-icon-sm"
+			})
 		})
 	});
 }

package/dist/form/components/base/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/base/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { CheckIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,6bACA,SACF;EACA,GAAI;YAEJ,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACN,CAAA;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/base/checkbox.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <Icon name=\"check\" className=\"size-lt-icon-sm\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,6bACA,SACF;EACA,GAAI;YAEJ,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA;EACrB,CAAA;CACP,CAAA;AAE5B"}

package/dist/form/components/base/field.d.ts

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

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

@@ -3,7 +3,7 @@ import { Label } from "./label.js";
 import InputError from "./input-error.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/base/field.tsx
-function FormFieldFrame({ children, error, label, labelAction, name, required }) {
+function FormFieldFrame({ children, error, helperText, label, labelAction, name, required }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-2",
 		children: [
@@ -28,6 +28,10 @@ function FormFieldFrame({ children, error, label, labelAction, name, required })
 				]
 			}),
 			children,
+			helperText && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-lt-muted-fg",
+				children: helperText
+			}),
 			/* @__PURE__ */ jsx(InputError, { message: error })
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../../resources/js/form/components/base/field.tsx"],"sourcesContent":["import InputError from \"@lattice/lattice/form/components/base/input-error\";\nimport { TextLink } from \"@lattice/lattice/core/components/link\";\nimport { Label } from \"@lattice/lattice/form/components/base/label\";\nimport type { FormLabelAction } from \"../types\";\n\nexport function FormFieldFrame({\n  children,\n  error,\n  label,\n  labelAction,\n  name,\n  required,\n}: {\n  children: React.ReactNode;\n  error?: string;\n  label: string;\n  labelAction?: FormLabelAction;\n  name: string;\n  required?: boolean;\n}) {\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex min-h-5 items-center\">\n        <Label htmlFor={name}>{label}</Label>\n        {required && (\n          <span aria-hidden=\"true\" className=\"ml-0.5 text-lt-danger\">\n            *\n          </span>\n        )}\n        {labelAction && (\n          <TextLink\n            href={labelAction.href}\n            tabIndex={labelAction.tabIndex}\n            className=\"ml-auto text-sm\"\n          >\n            {labelAction.label}\n          </TextLink>\n        )}\n      </div>\n\n      {children}\n\n      <InputError message={error} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,UACA,OACA,OACA,aACA,MACA,YAQC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAO,SAAS;gBAAO;KAAa,CAAA;KACnC,YACC,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBAAwB;KAErD,CAAA;KAEP,eACC,oBAAC,UAAD;MACE,MAAM,YAAY;MAClB,UAAU,YAAY;MACtB,WAAU;gBAET,YAAY;KACL,CAAA;IAET;;GAEJ;GAED,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;AAET"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../../resources/js/form/components/base/field.tsx"],"sourcesContent":["import InputError from \"@lattice/lattice/form/components/base/input-error\";\nimport { TextLink } from \"@lattice/lattice/core/components/link\";\nimport { Label } from \"@lattice/lattice/form/components/base/label\";\nimport type { FormLabelAction } from \"../types\";\n\nexport function FormFieldFrame({\n  children,\n  error,\n  helperText,\n  label,\n  labelAction,\n  name,\n  required,\n}: {\n  children: React.ReactNode;\n  error?: string;\n  helperText?: string;\n  label: string;\n  labelAction?: FormLabelAction;\n  name: string;\n  required?: boolean;\n}) {\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex min-h-5 items-center\">\n        <Label htmlFor={name}>{label}</Label>\n        {required && (\n          <span aria-hidden=\"true\" className=\"ml-0.5 text-lt-danger\">\n            *\n          </span>\n        )}\n        {labelAction && (\n          <TextLink\n            href={labelAction.href}\n            tabIndex={labelAction.tabIndex}\n            className=\"ml-auto text-sm\"\n          >\n            {labelAction.label}\n          </TextLink>\n        )}\n      </div>\n\n      {children}\n\n      {helperText && <p className=\"text-sm text-lt-muted-fg\">{helperText}</p>}\n\n      <InputError message={error} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,UACA,OACA,YACA,OACA,aACA,MACA,YASC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAO,SAAS;gBAAO;KAAa,CAAA;KACnC,YACC,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBAAwB;KAErD,CAAA;KAEP,eACC,oBAAC,UAAD;MACE,MAAM,YAAY;MAClB,UAAU,YAAY;MACtB,WAAU;gBAET,YAAY;KACL,CAAA;IAET;;GAEJ;GAEA,cAAc,oBAAC,KAAD;IAAG,WAAU;cAA4B;GAAc,CAAA;GAEtE,oBAAC,YAAD,EAAY,SAAS,MAAQ,CAAA;EAC1B;;AAET"}

package/dist/form/components/base/password-input.js

@@ -1,8 +1,8 @@
 import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../icons/sprite.js";
 import { Input } from "./input.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Eye, EyeOff } from "lucide-react";
 //#region resources/js/form/components/base/password-input.tsx
 function PasswordInput({ className, ref, ...props }) {
 	const [showPassword, setShowPassword] = useState(false);
@@ -15,11 +15,18 @@ function PasswordInput({ className, ref, ...props }) {
 			...props
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
+			"data-test": typeof props.name === "string" ? `${props.name}-visibility` : "password-visibility",
 			onClick: () => setShowPassword((prev) => !prev),
 			className: "absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none",
 			"aria-label": showPassword ? "Hide password" : "Show password",
 			tabIndex: -1,
-			children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+			children: showPassword ? /* @__PURE__ */ jsx(Icon, {
+				name: "eye-off",
+				className: "size-lt-icon-md"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "eye",
+				className: "size-lt-icon-md"
+			})
 		})]
 	});
 }

package/dist/form/components/base/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/base/password-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport type { ComponentProps, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { Input } from \"@lattice/lattice/form/components/base/input\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype PasswordInputProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  passwordrules?: string;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        className={cn(\"pr-10\", className)}\n        ref={ref}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        onClick={() => setShowPassword((prev) => !prev)}\n        className=\"absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none\"\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n      >\n        {showPassword ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAwB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CACtF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAM,eAAe,SAAS;GAC9B,WAAW,GAAG,SAAS,SAAS;GAC3B;GACL,GAAI;EACL,CAAA,GACD,oBAAC,UAAD;GACE,MAAK;GACL,eAAe,iBAAiB,SAAS,CAAC,IAAI;GAC9C,WAAU;GACV,cAAY,eAAe,kBAAkB;GAC7C,UAAU;aAET,eAAe,oBAAC,QAAD,EAAQ,WAAU,SAAU,CAAA,IAAI,oBAAC,KAAD,EAAK,WAAU,SAAU,CAAA;EACnE,CAAA,CACL;;AAET"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/base/password-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport type { ComponentProps, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { Input } from \"@lattice/lattice/form/components/base/input\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype PasswordInputProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  passwordrules?: string;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        className={cn(\"pr-10\", className)}\n        ref={ref}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        data-test={\n          typeof props.name === \"string\" ? `${props.name}-visibility` : \"password-visibility\"\n        }\n        onClick={() => setShowPassword((prev) => !prev)}\n        className=\"absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none\"\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n      >\n        {showPassword ? (\n          <Icon name=\"eye-off\" className=\"size-lt-icon-md\" />\n        ) : (\n          <Icon name=\"eye\" className=\"size-lt-icon-md\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAwB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CACtF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAM,eAAe,SAAS;GAC9B,WAAW,GAAG,SAAS,SAAS;GAC3B;GACL,GAAI;EACL,CAAA,GACD,oBAAC,UAAD;GACE,MAAK;GACL,aACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,KAAK,eAAe;GAEhE,eAAe,iBAAiB,SAAS,CAAC,IAAI;GAC9C,WAAU;GACV,cAAY,eAAe,kBAAkB;GAC7C,UAAU;aAET,eACC,oBAAC,MAAD;IAAM,MAAK;IAAU,WAAU;GAAmB,CAAA,IAElD,oBAAC,MAAD;IAAM,MAAK;IAAM,WAAU;GAAmB,CAAA;EAE1C,CAAA,CACL;;AAET"}

package/dist/form/components/base/submit-button.d.ts

@@ -1,6 +1,6 @@
-type SubmitButtonVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
-export declare function FormSubmitButton({ label, variant, }: {
+import { ButtonVariant } from '../../../types/generated';
+export declare function FormSubmitButton({ label, summaryLabel, variant, }: {
     label: string;
-    variant?: SubmitButtonVariant;
+    summaryLabel: string;
+    variant?: ButtonVariant;
 }): import("react").JSX.Element;
-export {};