@lattice-php/lattice 0.1.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.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    stack: {\n      align?: string;\n      direction?: string;\n      gap?: string;\n      width?: string;\n    };\n  }\n}\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center justify-center text-center\",\n  start: \"items-center justify-start text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = getStringProp(node.props, \"align\", \"stretch\");\n  const direction = getStringProp(node.props, \"direction\", \"column\");\n  const gap = getStringProp(node.props, \"gap\", \"md\");\n  const width = getStringProp(node.props, \"width\", \"full\");\n\n  if (direction === \"row\") {\n    return (\n      <div\n        data-lattice-component={node.id}\n        className={cn(\n          \"flex flex-wrap\",\n          flexAlignments[align] ?? flexAlignments.stretch,\n          stackGaps[gap] ?? stackGaps.md,\n          stackWidths[width] ?? stackWidths.full,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid\",\n        gridAlignments[align] ?? gridAlignments.stretch,\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;;AAeA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,SAAS;CAC1D,MAAM,YAAY,cAAc,KAAK,OAAO,aAAa,QAAQ;CACjE,MAAM,MAAM,cAAc,KAAK,OAAO,OAAO,IAAI;CACjD,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,MAAM;CAEvD,IAAI,cAAc,OAChB,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,kBACA,eAAe,UAAU,eAAe,SACxC,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,IACpC;EAEC;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,QACA,eAAe,UAAU,eAAe,SACxC,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,IACpC;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;AAGA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,IAClC;EAEC;CACE,CAAA;AAET"}

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":";;;;;;AAYA,IAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAmC;CAC1C,MAAM,UAAU,WAAW,WAAW;CAEtC,IAAI,CAAC,SACH,OAAO;EACL,aAAa;EACb,sBAAsB,CAAC;CACzB;CAGF,OAAO;AACT;AAUA,SAAS,QAAQ,MAAuB;CACtC,QAAQ,KAAK,YAAY,CAAC,GACvB,QAAQ,UAAU,MAAM,SAAS,KAAK,EACtC,KAAK,WAAW;EACf,SAAS,oBAAoB,MAAM,KAAK;EACxC,OAAO,cAAc,MAAM,OAAO,OAAO;EACzC,OAAO,cAAc,MAAM,OAAO,OAAO;CAC3C,EAAE,EACD,QAAQ,QAAQ,IAAI,UAAU,EAAE;AACrC;AAEA,SAAS,oBAAoB,OAA0C;CACrE,MAAM,UAAU,OAAO;CAEvB,IAAI,CAAC,WAAW,OAAO,YAAY,YAAY,MAAM,QAAQ,OAAO,GAClE;CAKF,OAAO,EACL,UAAU,QAAa,aAAa,KACtC;AACF;AAEA,SAAS,WAAW,UAAkB,MAA+C;CACnF,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,MAAM,QAAQ,IAAI,gBAAgB,OAAO,SAAS,MAAM,EAAE,IAAI,QAAQ;CAEtE,IAAI,CAAC,SAAS,CAAC,KAAK,MAAM,QAAQ,IAAI,UAAU,KAAK,GACnD,OAAO;CAGT,OAAO;AACT;AAEA,SAAS,kBAAkB,UAAkB,OAAqB;CAChE,IAAI,OAAO,WAAW,aACpB;CAGF,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;CACxC,IAAI,aAAa,IAAI,UAAU,KAAK;CACpC,OAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,GAAG,IAAI,WAAW,IAAI,SAAS,IAAI,MAAM;AACjG;AAEA,SAAS,SAAS,UAAkB,OAAuB;CACzD,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;CACxC,IAAI,aAAa,IAAI,UAAU,KAAK;CAEpC,OAAO,GAAG,IAAI,WAAW,IAAI,SAAS,IAAI;AAC5C;AAqBA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,OAAO,cAAc,QAAQ,IAAI,GAAG,CAAC,IAAI,CAAC;CAChD,MAAM,aAAa,KAAK,IAAI,SAAS;CACrC,MAAM,WAAW,cAAc,KAAK,OAAO,YAAY,MAAM;CAC7D,MAAM,oBAAoB,cAAc,KAAK,OAAO,eAAe,EAAE;CACrE,MAAM,eAAe,cAAc,KAAK,OAAO,gBAAgB,UAAU;CACzE,MAAM,CAAC,aAAa,qBAAqB,eACjC,sBAAsB,WAAW,UAAU,IAAI,KAAK,iBAAiB,UAC7E;CAEA,SAAS,UAAU,KAAoB;EACrC,IAAI,IAAI,SAAS,UAAU;GACzB,OAAO,MAAM,SAAS,UAAU,IAAI,KAAK,GAAG,EAC1C,gBAAgB,KAClB,CAAC;GAED;EACF;EAEA,kBAAkB,IAAI,KAAK;EAC3B,kBAAkB,UAAU,IAAI,KAAK;CACvC;CAEA,SAAS,eAAe,OAAqB;EAC3C,MAAM,MAAM,KAAK,MAAM,SAAS,KAAK,UAAU,KAAK;EAEpD,IAAI,KACF,UAAU,GAAG;CAEjB;CAEA,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAa,gBAAgB;EAAe;YACzE,qBAAC,OAAD;GAAK,WAAU;GAAa,qBAAmB,KAAK,OAAO,KAAK;aAAhE,CACE,oBAAC,OAAD;IACE,cAAY,cAAc,KAAK,OAAO,SAAS,MAAM;IACrD,WAAU;IACV,MAAK;cAEJ,KAAK,KAAK,QAAQ;KACjB,MAAM,WAAW,gBAAgB,IAAI;KAErC,OACE,oBAAC,UAAD;MACE,iBAAe,GAAG,IAAI,MAAM;MAC5B,iBAAe;MACf,WAAW,GACT,qFACA,WACI,kCACA,qDACN;MACA,IAAI,GAAG,IAAI,MAAM;MAEjB,eAAe,UAAU,GAAG;MAC5B,MAAK;MACL,MAAK;gBAEJ,IAAI;KACC,GAND,IAAI,KAMH;IAEZ,CAAC;GACE,CAAA,GAEL,oBAAC,OAAD;IAAK,WAAU;IAAW;GAAc,CAAA,CACrC;;CACe,CAAA;AAE1B;AAEA,IAAM,gBAA0C,EAAE,UAAU,WAAW;CACrE,MAAM,EAAE,gBAAgB,eAAe;CACvC,MAAM,QAAQ,cAAc,KAAK,OAAO,OAAO;CAC/C,MAAM,WAAW,gBAAgB;CACjC,MAAM,CAAC,WAAW,gBAAgB,SAAS,QAAQ;CAEnD,gBAAgB;EACd,IAAI,UACF,aAAa,IAAI;CAErB,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,WAAD;EACE,mBAAiB,GAAG,MAAM;EAC1B,WAAW,GAAG,aAAa,CAAC,YAAY,QAAQ;EAChD,QAAQ,CAAC;EACT,IAAI,GAAG,MAAM;EACb,MAAK;EACL,UAAU;YAET,YAAa,WAAyB;CAChC,CAAA;AAEb"}
+{"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-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/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,15 +1,30 @@
 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 = {
 	center: "text-center",
 	left: "text-left"
 };
+var textColors = {
+	default: "text-lt-fg",
+	muted: "text-lt-muted-fg",
+	primary: "text-lt-primary",
+	success: "text-lt-success",
+	info: "text-lt-info",
+	warning: "text-lt-warning",
+	danger: "text-lt-danger"
+};
+var textSizes = {
+	xs: "text-xs leading-5",
+	sm: "text-sm leading-6",
+	md: "text-base leading-7",
+	lg: "text-lg leading-8",
+	xl: "text-xl leading-8"
+};
 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("m-0", "max-w-2xl", textAlignments[node.props.align ?? "left"] ?? textAlignments.left, textColors[node.props.color], textSizes[node.props.size]),
+		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-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst textColors: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst textSizes: Record<Size, string> = {\n  xs: \"text-xs leading-5\",\n  sm: \"text-sm leading-6\",\n  md: \"text-base leading-7\",\n  lg: \"text-lg leading-8\",\n  xl: \"text-xl leading-8\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n\n  return (\n    <p\n      className={cn(\n        \"m-0\",\n        \"max-w-2xl\",\n        textAlignments[align] ?? textAlignments.left,\n        textColors[node.props.color],\n        textSizes[node.props.size],\n      )}\n    >\n      {node.props.text}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,OACA,aACA,eAPQ,KAAK,MAAM,SAAS,WAOH,eAAe,MACxC,WAAW,KAAK,MAAM,QACtB,UAAU,KAAK,MAAM,KACvB;YAEC,KAAK,MAAM;CACX,CAAA;AAEP"}

package/dist/core/headers.d.ts

@@ -0,0 +1 @@
+export declare function withHeaders(componentRef?: string, headers?: Record<string, string>): Record<string, string>;

package/dist/core/headers.js

@@ -0,0 +1,14 @@
+import { localeHeader } from "../i18n/locale.js";
+import { withRefHeader } from "./component-ref.js";
+//#region resources/js/core/headers.ts
+function withHeaders(componentRef = "", headers = {}) {
+	return {
+		...localeHeader(),
+		...withRefHeader(componentRef),
+		...headers
+	};
+}
+//#endregion
+export { withHeaders };
+
+//# sourceMappingURL=headers.js.map

package/dist/core/headers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headers.js","names":[],"sources":["../../resources/js/core/headers.ts"],"sourcesContent":["import { localeHeader } from \"../i18n/locale\";\nimport { withRefHeader } from \"./component-ref\";\n\nexport function withHeaders(\n  componentRef = \"\",\n  headers: Record<string, string> = {},\n): Record<string, string> {\n  return {\n    ...localeHeader(),\n    ...withRefHeader(componentRef),\n    ...headers,\n  };\n}\n"],"mappings":";;;AAGA,SAAgB,YACd,eAAe,IACf,UAAkC,CAAC,GACX;CACxB,OAAO;EACL,GAAG,aAAa;EAChB,GAAG,cAAc,YAAY;EAC7B,GAAG;CACL;AACF"}

package/dist/core/registry-context.d.ts

@@ -0,0 +1,21 @@
+import { ComponentRegistry, Registry } from './registry';
+import { ColumnRegistry } from '../table/registry';
+import { EffectHandlerRegistry } from '../effects/registry';
+/**
+ * Holds the active Registry for the current Provider subtree. Extracted into
+ * its own module to break the circular reference between provider.tsx (which
+ * imports the default registry instance) and use-effect-dispatcher.ts (which
+ * imports the context selector). Neither file imports from the other; both
+ * import from here.
+ *
+ * The context default is null. Selectors fall back to `_defaultRegistry`,
+ * which provider.tsx sets at module evaluation time (after registry.ts has
+ * finished loading). This avoids a synchronous evaluation cycle while
+ * preserving the pre-existing behaviour that components work without a
+ * surrounding <Provider>.
+ */
+export declare const RegistryContext: import('react').Context<Registry | null>;
+export declare function setDefaultRegistry(registry: Registry): void;
+export declare function useComponentRegistry(): ComponentRegistry;
+export declare function useColumnRegistry(): ColumnRegistry;
+export declare function useEffectHandlerRegistry(): EffectHandlerRegistry;

package/dist/core/registry-context.js

@@ -0,0 +1,40 @@
+import { createContext, useContext } from "react";
+//#region resources/js/core/registry-context.tsx
+/**
+* Holds the active Registry for the current Provider subtree. Extracted into
+* its own module to break the circular reference between provider.tsx (which
+* imports the default registry instance) and use-effect-dispatcher.ts (which
+* imports the context selector). Neither file imports from the other; both
+* import from here.
+*
+* The context default is null. Selectors fall back to `_defaultRegistry`,
+* which provider.tsx sets at module evaluation time (after registry.ts has
+* finished loading). This avoids a synchronous evaluation cycle while
+* preserving the pre-existing behaviour that components work without a
+* surrounding <Provider>.
+*/
+var RegistryContext = createContext(null);
+/**
+* Called by provider.tsx at module-evaluation time, after registry.ts finishes
+* loading. The constraint is on CALLING this setter, not on importing this
+* module: do not call setDefaultRegistry from any module that evaluates before
+* registry.ts completes. (use-effect-dispatcher.ts safely imports the selectors
+* below — that import is exactly why this module was extracted.)
+*/
+var _defaultRegistry = null;
+function setDefaultRegistry(registry) {
+	_defaultRegistry = registry;
+}
+function useComponentRegistry() {
+	return (useContext(RegistryContext) ?? _defaultRegistry)?.components ?? {};
+}
+function useColumnRegistry() {
+	return (useContext(RegistryContext) ?? _defaultRegistry)?.columns ?? {};
+}
+function useEffectHandlerRegistry() {
+	return (useContext(RegistryContext) ?? _defaultRegistry)?.effects ?? {};
+}
+//#endregion
+export { RegistryContext, setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry };
+
+//# sourceMappingURL=registry-context.js.map

package/dist/core/registry-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-context.js","names":[],"sources":["../../resources/js/core/registry-context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentRegistry, Registry } from \"./registry\";\nimport type { ColumnRegistry } from \"../table/registry\";\nimport type { EffectHandlerRegistry } from \"../effects/registry\";\n\n/**\n * Holds the active Registry for the current Provider subtree. Extracted into\n * its own module to break the circular reference between provider.tsx (which\n * imports the default registry instance) and use-effect-dispatcher.ts (which\n * imports the context selector). Neither file imports from the other; both\n * import from here.\n *\n * The context default is null. Selectors fall back to `_defaultRegistry`,\n * which provider.tsx sets at module evaluation time (after registry.ts has\n * finished loading). This avoids a synchronous evaluation cycle while\n * preserving the pre-existing behaviour that components work without a\n * surrounding <Provider>.\n */\nexport const RegistryContext = createContext<Registry | null>(null);\n\n/**\n * Called by provider.tsx at module-evaluation time, after registry.ts finishes\n * loading. The constraint is on CALLING this setter, not on importing this\n * module: do not call setDefaultRegistry from any module that evaluates before\n * registry.ts completes. (use-effect-dispatcher.ts safely imports the selectors\n * below — that import is exactly why this module was extracted.)\n */\nlet _defaultRegistry: Registry | null = null;\n\nexport function setDefaultRegistry(registry: Registry): void {\n  _defaultRegistry = registry;\n}\n\nexport function useComponentRegistry(): ComponentRegistry {\n  const registry = useContext(RegistryContext) ?? _defaultRegistry;\n  return registry?.components ?? {};\n}\n\nexport function useColumnRegistry(): ColumnRegistry {\n  const registry = useContext(RegistryContext) ?? _defaultRegistry;\n  return registry?.columns ?? {};\n}\n\nexport function useEffectHandlerRegistry(): EffectHandlerRegistry {\n  const registry = useContext(RegistryContext) ?? _defaultRegistry;\n  return registry?.effects ?? {};\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAa,kBAAkB,cAA+B,IAAI;;;;;;;;AASlE,IAAI,mBAAoC;AAExC,SAAgB,mBAAmB,UAA0B;CAC3D,mBAAmB;AACrB;AAEA,SAAgB,uBAA0C;CAExD,QADiB,WAAW,eAAe,KAAK,mBAC/B,cAAc,CAAC;AAClC;AAEA,SAAgB,oBAAoC;CAElD,QADiB,WAAW,eAAe,KAAK,mBAC/B,WAAW,CAAC;AAC/B;AAEA,SAAgB,2BAAkD;CAEhE,QADiB,WAAW,eAAe,KAAK,mBAC/B,WAAW,CAAC;AAC/B"}

package/dist/core/registry.d.ts

@@ -1,5 +1,7 @@
 import { LazyExoticComponent } from 'react';
 import { RendererComponent, RendererComponentModule } from './types';
+import { ColumnRegistry } from '../table/registry';
+import { EffectHandlerRegistry } from '../effects/registry';
 export type EagerComponentRegistration = {
     component: RendererComponent;
     mode: "eager";
@@ -13,8 +15,15 @@ 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;
+    effects?: EffectHandlerRegistry;
+};
+export type Registry = {
+    components: ComponentRegistry;
+    columns: ColumnRegistry;
+    effects: EffectHandlerRegistry;
 };
 export type LazyComponentOptions<TType extends string> = {
     fallback?: RendererComponent<TType>;
@@ -22,5 +31,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,39 @@ function createPlugin(plugin) {
 }
 function createRegistry(...plugins) {
 	return plugins.reduce((registry, plugin) => ({
-		...registry,
-		...plugin.components
-	}), {});
+		components: {
+			...registry.components,
+			...plugin.components
+		},
+		columns: {
+			...registry.columns,
+			...plugin.columns
+		},
+		effects: {
+			...registry.effects,
+			...plugin.effects
+		}
+	}), {
+		components: {},
+		columns: {},
+		effects: {}
+	});
 }
 function extendRegistry(registry, ...plugins) {
+	const merged = createRegistry(...plugins);
 	return {
-		...registry,
-		...createRegistry(...plugins)
+		components: {
+			...registry.components,
+			...merged.components
+		},
+		columns: {
+			...registry.columns,
+			...merged.columns
+		},
+		effects: {
+			...registry.effects,
+			...merged.effects
+		}
 	};
 }
 //#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/registry\";\nimport type { EffectHandlerRegistry } from \"../effects/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  effects?: EffectHandlerRegistry;\n};\n\nexport type Registry = {\n  components: ComponentRegistry;\n  columns: ColumnRegistry;\n  effects: EffectHandlerRegistry;\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      effects: { ...registry.effects, ...plugin.effects },\n    }),\n    { components: {}, columns: {}, effects: {} },\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    effects: { ...registry.effects, ...merged.effects },\n  };\n}\n"],"mappings":";;AAuCA,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;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD,IACA;EAAE,YAAY,CAAC;EAAG,SAAS,CAAC;EAAG,SAAS,CAAC;CAAE,CAC7C;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;EAClD,SAAS;GAAE,GAAG,SAAS;GAAS,GAAG,OAAO;EAAQ;CACpD;AACF"}

package/dist/core/renderer.d.ts

@@ -1,16 +1,10 @@
 import { ReactNode } from 'react';
-import { ComponentRegistry } from './registry';
-import { Node, UnknownComponent } from './types';
-type RendererContextValue = {
-    fallback: ReactNode;
-    missingComponent: UnknownComponent;
-    registry: ComponentRegistry;
-};
-export declare function useRendererContext(): RendererContextValue;
-export declare function Renderer({ fallback, missingComponent: UnknownComponent, nodes, registry, }: {
-    fallback?: ReactNode;
-    missingComponent?: UnknownComponent;
+import { Node } from './types';
+/** Renders a schema (list of nodes) against the active component registry. */
+export declare function Renderer({ nodes }: {
     nodes: Node[];
-    registry: ComponentRegistry;
-}): import("react").JSX.Element;
-export {};
+}): ReactNode;
+/** Renders a single node against the active component registry. */
+export declare function RenderNode({ node }: {
+    node: Node;
+}): ReactNode;

package/dist/core/renderer.js

@@ -1,47 +1,31 @@
-import { Suspense, createContext, useContext, useMemo } from "react";
+import { useComponentRegistry } from "./registry-context.js";
+import { useCollapsed } from "./collapsed-context.js";
+import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/renderer.tsx
 function MissingComponent({ node }) {
 	return null;
 }
-var RendererContext = createContext(null);
-function useRendererContext() {
-	const context = useContext(RendererContext);
-	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,
-		missingComponent: UnknownComponent,
-		registry
-	}), [
-		fallback,
-		registry,
-		UnknownComponent
-	]);
-	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}`))
-	});
+/** Renders a schema (list of nodes) against the active component registry. */
+function Renderer({ nodes }) {
+	return nodes.map((node, index) => /* @__PURE__ */ jsx(NodeRenderer, { node }, nodeKey(node, index)));
+}
+/** Renders a single node against the active component registry. */
+function RenderNode({ node }) {
+	return /* @__PURE__ */ jsx(NodeRenderer, { node });
 }
-function NodeRenderer({ fallback, missingComponent: UnknownComponent, node, registry }) {
-	const registration = registry[node.type];
-	if (!registration) return /* @__PURE__ */ jsx(UnknownComponent, { node });
+function NodeRenderer({ node }) {
+	const collapsed = useCollapsed();
+	const registration = useComponentRegistry()[node.type];
+	if (collapsed && node.props?.hideWhenCollapsed === true) return null;
+	if (!registration) return /* @__PURE__ */ jsx(MissingComponent, { 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 ? /* @__PURE__ */ jsx(Renderer, { nodes: node.schema }) : null
 	});
 	if (registration.mode === "lazy") {
 		const FallbackComponent = registration.fallback;
@@ -49,13 +33,13 @@ function NodeRenderer({ fallback, missingComponent: UnknownComponent, node, regi
 			fallback: FallbackComponent ? /* @__PURE__ */ jsx(FallbackComponent, {
 				node,
 				children: null
-			}) : fallback,
+			}) : null,
 			children: renderedComponent
 		});
 	}
 	return renderedComponent;
 }
 //#endregion
-export { Renderer, useRendererContext };
+export { RenderNode, Renderer };
 
 //# sourceMappingURL=renderer.js.map

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 { 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\n/** Renders a schema (list of nodes) against the active component registry. */\nexport function Renderer({ nodes }: { nodes: Node[] }): ReactNode {\n  return nodes.map((node, index) => <NodeRenderer key={nodeKey(node, index)} node={node} />);\n}\n\n/** Renders a single node against the active component registry. */\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;;AAGA,SAAgB,SAAS,EAAE,SAAuC;CAChE,OAAO,MAAM,KAAK,MAAM,UAAU,oBAAC,cAAD,EAA+C,KAAO,GAAnC,QAAQ,MAAM,KAAK,CAAgB,CAAC;AAC3F;;AAGA,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/test-id.d.ts

@@ -0,0 +1,8 @@
+import { Node } from './types';
+type IdentifiedNode = Pick<Node, "id" | "key">;
+export declare function testIdentity(value: string | null | undefined): string | undefined;
+export declare function nodeIdentity(node: IdentifiedNode): string | undefined;
+export declare function leafTestIdentity(value: string | null | undefined): string | undefined;
+export declare function prefixedTestId(prefix: string, value: string | null | undefined): string | undefined;
+export declare function prefixedNodeTestId(prefix: string, node: IdentifiedNode): string | undefined;
+export {};