@lattice-php/lattice 0.13.0 → 0.14.0

package/dist/core/components/card.js

@@ -1,5 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { nodeIdentity } from "../test-id.js";
+import { InfoTooltip } from "./info-tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/card.tsx
@@ -46,10 +47,16 @@ function CardFooter({ className, ...props }) {
 	});
 }
 var CardComponent = ({ children, node }) => {
-	const { title, description } = node.props;
+	const { title, description, tooltip } = node.props;
 	return /* @__PURE__ */ jsxs(Card, {
 		"data-lattice-component": nodeIdentity(node),
-		children: [(title || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [title && /* @__PURE__ */ jsx(CardTitle, { children: title }), description && /* @__PURE__ */ jsx(CardDescription, { children: description })] }), children && /* @__PURE__ */ jsx(CardContent, {
+		children: [(title || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [title && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx(CardTitle, { children: title }), /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })]
+		}), description && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx(CardDescription, { children: description }), !title && /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })]
+		})] }), children && /* @__PURE__ */ jsx(CardContent, {
 			className: "flex flex-col gap-6",
 			children
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../resources/js/core/components/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"article\">) {\n  return (\n    <article\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 px-6\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-6\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-footer\" className={cn(\"flex items-center px-6\", className)} {...props} />\n  );\n}\n\nconst CardComponent: RendererComponent<\"card\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n\n  return (\n    <Card data-lattice-component={nodeIdentity(node)}>\n      {(title || description) && (\n        <CardHeader>\n          {title && <CardTitle>{title}</CardTitle>}\n          {description && <CardDescription>{description}</CardDescription>}\n        </CardHeader>\n      )}\n      {children && <CardContent className=\"flex flex-col gap-6\">{children}</CardContent>}\n    </Card>\n  );\n};\n\nexport default CardComponent;\nexport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":";;;;;AAKA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,6GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEjG;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,EAAE,OAAO,gBAAgB,KAAK;CAEpC,OACE,qBAAC,MAAD;EAAM,0BAAwB,aAAa,IAAI;YAA/C,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SAAS,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GACtC,eAAe,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,CACrD,EAAA,CAAA,GAEb,YAAY,oBAAC,aAAD;GAAa,WAAU;GAAuB;EAAsB,CAAA,CAC7E;;AAEV"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../resources/js/core/components/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"article\">) {\n  return (\n    <article\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 px-6\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-6\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-footer\" className={cn(\"flex items-center px-6\", className)} {...props} />\n  );\n}\n\nconst CardComponent: RendererComponent<\"card\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n\n  return (\n    <Card data-lattice-component={nodeIdentity(node)}>\n      {(title || description) && (\n        <CardHeader>\n          {title && (\n            <div className=\"flex items-center\">\n              <CardTitle>{title}</CardTitle>\n              <InfoTooltip content={tooltip} />\n            </div>\n          )}\n          {description && (\n            <div className=\"flex items-center\">\n              <CardDescription>{description}</CardDescription>\n              {!title && <InfoTooltip content={tooltip} />}\n            </div>\n          )}\n        </CardHeader>\n      )}\n      {children && <CardContent className=\"flex flex-col gap-6\">{children}</CardContent>}\n    </Card>\n  );\n};\n\nexport default CardComponent;\nexport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":";;;;;;AAMA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,6GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEjG;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAE7C,OACE,qBAAC,MAAD;EAAM,0BAAwB,aAAa,IAAI;YAA/C,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GAC7B,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;MAEN,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,GAC9C,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;IAEG,EAAA,CAAA,GAEb,YAAY,oBAAC,aAAD;GAAa,WAAU;GAAuB;EAAsB,CAAA,CAC7E;;AAEV"}

package/dist/core/components/collapsible.js

@@ -2,6 +2,7 @@ import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { Renderer } from "../renderer.js";
 import { nodeIdentity, prefixedTestId } from "../test-id.js";
+import { InfoTooltip } from "./info-tooltip.js";
 import { toNodes } from "../nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -41,9 +42,14 @@ var CollapsibleComponent = ({ children, node }) => {
 			},
 			role: "button",
 			tabIndex: 0,
-			children: [/* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: /* @__PURE__ */ jsx(Renderer, { nodes: trigger })
+				children: [/* @__PURE__ */ jsx(Renderer, { nodes: trigger }), node.props.tooltip && /* @__PURE__ */ jsx("span", {
+					role: "presentation",
+					onClick: (event) => event.stopPropagation(),
+					onKeyDown: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ jsx(InfoTooltip, { content: node.props.tooltip })
+				})]
 			}), /* @__PURE__ */ jsx(Icon, {
 				name: "chevron-down",
 				className: cn("size-lt-icon-md shrink-0 text-lt-muted-fg transition-transform", !open && "-rotate-90")

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":[],"sources":["../../../resources/js/core/components/collapsible.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst CollapsibleComponent: RendererComponent<\"collapsible\"> = ({ children, node }) => {\n  const rememberState = node.props.rememberState === true;\n  const trigger = toNodes(node.props.trigger);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:collapsible:${identity ?? \"default\"}`;\n  const contentId = `${identity ?? \"collapsible\"}-content`;\n\n  const [open, setOpen] = useState(() =>\n    readStored(storageKey, rememberState, node.props.collapsed === false),\n  );\n\n  function toggle(): void {\n    setOpen((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  return (\n    <div data-lattice-component={identity}>\n      <div\n        aria-controls={contentId}\n        aria-expanded={open}\n        data-test={prefixedTestId(\"collapsible-toggle\", identity) ?? \"collapsible-toggle-default\"}\n        className=\"flex w-full cursor-pointer items-center justify-between gap-4 rounded-lt-sm py-2 text-left text-lt-fg transition-colors hover:bg-lt-muted\"\n        onClick={toggle}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            toggle();\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n          <Renderer nodes={trigger} />\n        </div>\n        <Icon\n          name=\"chevron-down\"\n          className={cn(\n            \"size-lt-icon-md shrink-0 text-lt-muted-fg transition-transform\",\n            !open && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {open && children && (\n        <div id={contentId} className=\"flex flex-col gap-4 pt-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CollapsibleComponent;\n"],"mappings":";;;;;;;;AAQA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,wBAA0D,EAAE,UAAU,WAAW;CACrF,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAC1C,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,uBAAuB,YAAY;CACtD,MAAM,YAAY,GAAG,YAAY,cAAc;CAE/C,MAAM,CAAC,MAAM,WAAW,eACtB,WAAW,YAAY,eAAe,KAAK,MAAM,cAAc,KAAK,CACtE;CAEA,SAAS,SAAe;EACtB,SAAS,UAAU;GACjB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,0BAAwB;YAA7B,CACE,qBAAC,OAAD;GACE,iBAAe;GACf,iBAAe;GACf,aAAW,eAAe,sBAAsB,QAAQ,KAAK;GAC7D,WAAU;GACV,SAAS;GACT,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,OAAO;IACT;GACF;GACA,MAAK;GACL,UAAU;aAbZ,CAeE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA;GACxB,CAAA,GACL,oBAAC,MAAD;IACE,MAAK;IACL,WAAW,GACT,kEACA,CAAC,QAAQ,YACX;GACD,CAAA,CACE;MAEJ,QAAQ,YACP,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,CAEJ;;AAET"}
+{"version":3,"file":"collapsible.js","names":[],"sources":["../../../resources/js/core/components/collapsible.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst CollapsibleComponent: RendererComponent<\"collapsible\"> = ({ children, node }) => {\n  const rememberState = node.props.rememberState === true;\n  const trigger = toNodes(node.props.trigger);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:collapsible:${identity ?? \"default\"}`;\n  const contentId = `${identity ?? \"collapsible\"}-content`;\n\n  const [open, setOpen] = useState(() =>\n    readStored(storageKey, rememberState, node.props.collapsed === false),\n  );\n\n  function toggle(): void {\n    setOpen((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  return (\n    <div data-lattice-component={identity}>\n      <div\n        aria-controls={contentId}\n        aria-expanded={open}\n        data-test={prefixedTestId(\"collapsible-toggle\", identity) ?? \"collapsible-toggle-default\"}\n        className=\"flex w-full cursor-pointer items-center justify-between gap-4 rounded-lt-sm py-2 text-left text-lt-fg transition-colors hover:bg-lt-muted\"\n        onClick={toggle}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            toggle();\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n          <Renderer nodes={trigger} />\n          {node.props.tooltip && (\n            <span\n              role=\"presentation\"\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              <InfoTooltip content={node.props.tooltip} />\n            </span>\n          )}\n        </div>\n        <Icon\n          name=\"chevron-down\"\n          className={cn(\n            \"size-lt-icon-md shrink-0 text-lt-muted-fg transition-transform\",\n            !open && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {open && children && (\n        <div id={contentId} className=\"flex flex-col gap-4 pt-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CollapsibleComponent;\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,wBAA0D,EAAE,UAAU,WAAW;CACrF,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAC1C,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,uBAAuB,YAAY;CACtD,MAAM,YAAY,GAAG,YAAY,cAAc;CAE/C,MAAM,CAAC,MAAM,WAAW,eACtB,WAAW,YAAY,eAAe,KAAK,MAAM,cAAc,KAAK,CACtE;CAEA,SAAS,SAAe;EACtB,SAAS,UAAU;GACjB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,0BAAwB;YAA7B,CACE,qBAAC,OAAD;GACE,iBAAe;GACf,iBAAe;GACf,aAAW,eAAe,sBAAsB,QAAQ,KAAK;GAC7D,WAAU;GACV,SAAS;GACT,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,OAAO;IACT;GACF;GACA,MAAK;GACL,UAAU;aAbZ,CAeE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA,GAC1B,KAAK,MAAM,WACV,oBAAC,QAAD;KACE,MAAK;KACL,UAAU,UAAU,MAAM,gBAAgB;KAC1C,YAAY,UAAU,MAAM,gBAAgB;eAE5C,oBAAC,aAAD,EAAa,SAAS,KAAK,MAAM,QAAU,CAAA;IACvC,CAAA,CAEL;OACL,oBAAC,MAAD;IACE,MAAK;IACL,WAAW,GACT,kEACA,CAAC,QAAQ,YACX;GACD,CAAA,CACE;MAEJ,QAAQ,YACP,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,CAEJ;;AAET"}

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

@@ -0,0 +1 @@
+export declare const eagerCoreComponents: import('../registry').Plugin;

package/dist/core/components/eager.js

@@ -0,0 +1,50 @@
+import { createPlugin, eagerComponent } from "../registry.js";
+import ButtonComponent from "./button.js";
+import BadgeComponent from "./badge.js";
+import CardComponent from "./card.js";
+import CollapsibleComponent from "./collapsible.js";
+import FloatingPanelComponent from "./floating-panel.js";
+import FragmentComponent from "./fragment.js";
+import GridComponent from "./grid.js";
+import HeadingComponent from "./heading.js";
+import IconComponent from "./icon.js";
+import LinkComponent from "./link.js";
+import ModalComponent from "./modal.js";
+import RawBlockComponent from "./raw-block.js";
+import SectionComponent from "./section.js";
+import SegmentedControlComponent from "./segmented-control.js";
+import StackComponent from "./stack.js";
+import TabComponent, { TabsComponent } from "./tabs.js";
+import TextComponent from "./text.js";
+import TooltipComponent from "./tooltip.js";
+import ChartComponent from "./chart.js";
+//#region resources/js/core/components/eager.ts
+var eagerCoreComponents = createPlugin({
+	components: {
+		badge: eagerComponent(BadgeComponent),
+		button: eagerComponent(ButtonComponent),
+		card: eagerComponent(CardComponent),
+		chart: eagerComponent(ChartComponent),
+		collapsible: eagerComponent(CollapsibleComponent),
+		"floating-panel": eagerComponent(FloatingPanelComponent),
+		fragment: eagerComponent(FragmentComponent),
+		grid: eagerComponent(GridComponent),
+		heading: eagerComponent(HeadingComponent),
+		icon: eagerComponent(IconComponent),
+		link: eagerComponent(LinkComponent),
+		modal: eagerComponent(ModalComponent),
+		"raw-block": eagerComponent(RawBlockComponent),
+		section: eagerComponent(SectionComponent),
+		"segmented-control": eagerComponent(SegmentedControlComponent),
+		stack: eagerComponent(StackComponent),
+		tab: eagerComponent(TabComponent),
+		tabs: eagerComponent(TabsComponent),
+		text: eagerComponent(TextComponent),
+		tooltip: eagerComponent(TooltipComponent)
+	},
+	name: "lattice/core"
+});
+//#endregion
+export { eagerCoreComponents };
+
+//# sourceMappingURL=eager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eager.js","names":[],"sources":["../../../resources/js/core/components/eager.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\nexport const eagerCoreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,sBAAsB,aAAa;CAC9C,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}

package/dist/core/components/heading.js

@@ -1,34 +1,36 @@
 import { cn } from "../../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { InfoTooltip } from "./info-tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/heading.tsx
 var HeadingComponent = ({ node }) => {
-	const { text } = node.props;
+	const { text, tooltip } = node.props;
 	const level = Math.min(Math.max(node.props.level, 1), 6);
 	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-2xl font-bold leading-tight", level === 2 && "text-xl", level > 2 && "text-base");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [text, /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })] });
 	switch (level) {
 		case 1: return /* @__PURE__ */ jsx("h1", {
 			className,
-			children: text
+			children: content
 		});
 		case 2: return /* @__PURE__ */ jsx("h2", {
 			className,
-			children: text
+			children: content
 		});
 		case 3: return /* @__PURE__ */ jsx("h3", {
 			className,
-			children: text
+			children: content
 		});
 		case 4: return /* @__PURE__ */ jsx("h4", {
 			className,
-			children: text
+			children: content
 		});
 		case 5: return /* @__PURE__ */ jsx("h5", {
 			className,
-			children: text
+			children: content
 		});
 		default: return /* @__PURE__ */ jsx("h6", {
 			className,
-			children: text
+			children: content
 		});
 	}
 };

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

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text } = node.props;\n  const level = Math.min(Math.max(node.props.level, 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-2xl font-bold leading-tight\",\n    level === 2 && \"text-xl\",\n    level > 2 && \"text-base\",\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{text}</h1>;\n    case 2:\n      return <h2 className={className}>{text}</h2>;\n    case 3:\n      return <h3 className={className}>{text}</h3>;\n    case 4:\n      return <h4 className={className}>{text}</h4>;\n    case 5:\n      return <h5 className={className}>{text}</h5>;\n    default:\n      return <h6 className={className}>{text}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;AAGA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,SAAS,KAAK;CACtB,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,oCACf,UAAU,KAAK,WACf,QAAQ,KAAK,WACf;CAEA,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;CAC/C;AACF"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text, tooltip } = node.props;\n  const level = Math.min(Math.max(node.props.level, 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-2xl font-bold leading-tight\",\n    level === 2 && \"text-xl\",\n    level > 2 && \"text-base\",\n  );\n\n  const content = (\n    <>\n      {text}\n      <InfoTooltip content={tooltip} />\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{content}</h1>;\n    case 2:\n      return <h2 className={className}>{content}</h2>;\n    case 3:\n      return <h3 className={className}>{content}</h3>;\n    case 4:\n      return <h4 className={className}>{content}</h4>;\n    case 5:\n      return <h5 className={className}>{content}</h5>;\n    default:\n      return <h6 className={className}>{content}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;;AAIA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,MAAM,YAAY,KAAK;CAC/B,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,oCACf,UAAU,KAAK,WACf,QAAQ,KAAK,WACf;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAChC,EAAA,CAAA;CAGJ,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;CAClD;AACF"}

package/dist/core/components/index.js

@@ -16,6 +16,7 @@ import SegmentedControlComponent from "./segmented-control.js";
 import StackComponent from "./stack.js";
 import TabComponent, { TabsComponent } from "./tabs.js";
 import TextComponent from "./text.js";
+import TooltipComponent from "./tooltip.js";
 //#region resources/js/core/components/index.ts
 var coreComponents = createPlugin({
 	components: {
@@ -37,7 +38,8 @@ var coreComponents = createPlugin({
 		stack: eagerComponent(StackComponent),
 		tab: eagerComponent(TabComponent),
 		tabs: eagerComponent(TabsComponent),
-		text: eagerComponent(TextComponent)
+		text: eagerComponent(TextComponent),
+		tooltip: eagerComponent(TooltipComponent)
 	},
 	name: "lattice/core"
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}

package/dist/core/components/section.js

@@ -2,6 +2,7 @@ import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { Renderer } from "../renderer.js";
 import { nodeIdentity, prefixedTestId } from "../test-id.js";
+import { InfoTooltip } from "./info-tooltip.js";
 import { toNodes } from "../nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,7 +13,7 @@ function readStored(key, remember, fallback) {
 	return stored === null ? fallback : stored === "true";
 }
 var SectionComponent = ({ children, node }) => {
-	const { title, description } = node.props;
+	const { title, description, tooltip } = node.props;
 	const collapsible = node.props.collapsible === true;
 	const rememberState = node.props.rememberState !== false;
 	const headerActions = toNodes(node.props.headerActions);
@@ -47,12 +48,18 @@ var SectionComponent = ({ children, node }) => {
 					})
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-col gap-1.5",
-					children: [title && /* @__PURE__ */ jsx("div", {
-						className: "font-semibold leading-none",
-						children: title
-					}), description && /* @__PURE__ */ jsx("div", {
-						className: "text-sm text-lt-muted-fg",
-						children: description
+					children: [title && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "font-semibold leading-none",
+							children: title
+						}), /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })]
+					}), description && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-sm text-lt-muted-fg",
+							children: description
+						}), !title && /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })]
 					})]
 				})]
 			}), headerActions.length > 0 && /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;AAQA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB;YAF1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAOzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && (\n                <div className=\"flex items-center\">\n                  <div className=\"font-semibold leading-none\">{title}</div>\n                  <InfoTooltip content={tooltip} />\n                </div>\n              )}\n              {description && (\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-lt-muted-fg\">{description}</div>\n                  {!title && <InfoTooltip content={tooltip} />}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB;YAF1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAOzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA8B;MAAW,CAAA,GACxD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;SAEN,eACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA4B;MAAiB,CAAA,GAC3D,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;OAEJ;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}

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

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../types';
+declare const TooltipComponent: RendererComponent<"tooltip">;
+export default TooltipComponent;

package/dist/core/components/tooltip.js

@@ -0,0 +1,25 @@
+import { Renderer } from "../renderer.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { InfoTooltip } from "./info-tooltip.js";
+import { toNodes } from "../nodes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/tooltip.tsx
+var TooltipComponent = ({ node }) => {
+	const content = node.props.content;
+	const trigger = toNodes(node.props.trigger);
+	if (!content) return null;
+	if (trigger.length === 0) return /* @__PURE__ */ jsx(InfoTooltip, { content });
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		type: "button",
+		className: "inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
+		children: /* @__PURE__ */ jsx(Renderer, { nodes: trigger })
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "start",
+		className: "max-w-xs p-3 text-sm [&_a]:underline",
+		dangerouslySetInnerHTML: { __html: content }
+	})] });
+};
+//#endregion
+export { TooltipComponent as default };
+
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../resources/js/core/components/tooltip.tsx"],"sourcesContent":["import { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst TooltipComponent: RendererComponent<\"tooltip\"> = ({ node }) => {\n  const content = node.props.content;\n  const trigger = toNodes(node.props.trigger);\n\n  if (!content) {\n    return null;\n  }\n\n  if (trigger.length === 0) {\n    return <InfoTooltip content={content} />;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        className=\"inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Renderer nodes={trigger} />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n};\n\nexport default TooltipComponent;\n"],"mappings":";;;;;;AAMA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAE1C,IAAI,CAAC,SACH,OAAO;CAGT,IAAI,QAAQ,WAAW,GACrB,OAAO,oBAAC,aAAD,EAAsB,QAAU,CAAA;CAGzC,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,WAAU;YAEV,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA;CACb,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

package/dist/core/renderer.js

@@ -1,5 +1,5 @@
-import { useCollapsed } from "./collapsed-context.js";
 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

package/dist/create-app.js

@@ -1,6 +1,8 @@
 import { initializeTheme } from "./appearance/index.js";
+import { setDefaultRegistry } from "./core/registry-context.js";
 import { createLayoutResolver, createPageResolver } from "./inertia.js";
-import { Provider } from "./provider.js";
+import { ProviderBase } from "./provider-base.js";
+import { lazyRegistry } from "./registry/lazy.js";
 import { createInertiaApp } from "@inertiajs/react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/create-app.tsx
@@ -11,13 +13,15 @@ import { jsx } from "react/jsx-runtime";
 * initialization. Forwards any other createInertiaApp option.
 */
 function createLatticeApp({ registry, sprite, pages = {}, defaultLayout, strictMode = true, ...inertiaOptions } = {}) {
+	const activeRegistry = registry ?? lazyRegistry;
+	setDefaultRegistry(activeRegistry);
 	const app = createInertiaApp({
 		...inertiaOptions,
 		strictMode,
 		resolve: createPageResolver(pages),
 		layout: createLayoutResolver({ defaultLayout }),
-		withApp: (node) => /* @__PURE__ */ jsx(Provider, {
-			registry,
+		withApp: (node) => /* @__PURE__ */ jsx(ProviderBase, {
+			registry: activeRegistry,
 			sprite,
 			children: node
 		})

package/dist/create-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-app.js","names":[],"sources":["../resources/js/create-app.tsx"],"sourcesContent":["import { createInertiaApp } from \"@inertiajs/react\";\nimport type { ReactElement } from \"react\";\nimport { initializeTheme } from \"./appearance\";\nimport type { Registry } from \"./core/registry\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport {\n  createLayoutResolver,\n  createPageResolver,\n  type CreateLayoutResolverOptions,\n  type PageModules,\n} from \"./inertia\";\nimport { Provider } from \"./provider\";\n\ntype InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;\n\nexport type CreateLatticeAppOptions = Omit<\n  InertiaAppOptions,\n  \"resolve\" | \"layout\" | \"setup\" | \"withApp\" | \"pages\"\n> & {\n  registry?: Registry;\n  sprite?: SpriteValue;\n  /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\\/*.tsx')`. */\n  pages?: PageModules;\n  defaultLayout?: CreateLayoutResolverOptions[\"defaultLayout\"];\n};\n\n/**\n * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers\n * (server-driven Lattice pages and normal Inertia pages alike), the Provider —\n * registry, sprite, flash toasts via Lattice's own Toaster — and theme\n * initialization. Forwards any other createInertiaApp option.\n */\nexport function createLatticeApp({\n  registry,\n  sprite,\n  pages = {},\n  defaultLayout,\n  strictMode = true,\n  ...inertiaOptions\n}: CreateLatticeAppOptions = {}) {\n  const app = createInertiaApp({\n    ...inertiaOptions,\n    strictMode,\n    resolve: createPageResolver(pages),\n    layout: createLayoutResolver({ defaultLayout }),\n    withApp: (node: ReactElement): ReactElement => (\n      <Provider registry={registry} sprite={sprite}>\n        {node}\n      </Provider>\n    ),\n  });\n\n  initializeTheme();\n\n  return app;\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAgB,iBAAiB,EAC/B,UACA,QACA,QAAQ,CAAC,GACT,eACA,aAAa,MACb,GAAG,mBACwB,CAAC,GAAG;CAC/B,MAAM,MAAM,iBAAiB;EAC3B,GAAG;EACH;EACA,SAAS,mBAAmB,KAAK;EACjC,QAAQ,qBAAqB,EAAE,cAAc,CAAC;EAC9C,UAAU,SACR,oBAAC,UAAD;GAAoB;GAAkB;aACnC;EACO,CAAA;CAEd,CAAC;CAED,gBAAgB;CAEhB,OAAO;AACT"}
+{"version":3,"file":"create-app.js","names":[],"sources":["../resources/js/create-app.tsx"],"sourcesContent":["import { createInertiaApp } from \"@inertiajs/react\";\nimport type { ReactElement } from \"react\";\nimport { initializeTheme } from \"./appearance\";\nimport type { Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport {\n  createLayoutResolver,\n  createPageResolver,\n  type CreateLayoutResolverOptions,\n  type PageModules,\n} from \"./inertia\";\nimport { ProviderBase } from \"./provider-base\";\nimport { registry as defaultRegistry } from \"./registry\";\n\ntype InertiaAppOptions = NonNullable<Parameters<typeof createInertiaApp>[0]>;\n\nexport type CreateLatticeAppOptions = Omit<\n  InertiaAppOptions,\n  \"resolve\" | \"layout\" | \"setup\" | \"withApp\" | \"pages\"\n> & {\n  registry?: Registry;\n  sprite?: SpriteValue;\n  /** Normal Inertia page modules, e.g. `import.meta.glob('./pages/**\\/*.tsx')`. */\n  pages?: PageModules;\n  defaultLayout?: CreateLayoutResolverOptions[\"defaultLayout\"];\n};\n\n/**\n * Bootstrap an Inertia app with the Lattice shell: the page/layout resolvers\n * (server-driven Lattice pages and normal Inertia pages alike), the Provider —\n * registry, sprite, flash toasts via Lattice's own Toaster — and theme\n * initialization. Forwards any other createInertiaApp option.\n */\nexport function createLatticeApp({\n  registry,\n  sprite,\n  pages = {},\n  defaultLayout,\n  strictMode = true,\n  ...inertiaOptions\n}: CreateLatticeAppOptions = {}) {\n  const activeRegistry = registry ?? defaultRegistry;\n\n  setDefaultRegistry(activeRegistry);\n\n  const app = createInertiaApp({\n    ...inertiaOptions,\n    strictMode,\n    resolve: createPageResolver(pages),\n    layout: createLayoutResolver({ defaultLayout }),\n    withApp: (node: ReactElement): ReactElement => (\n      <ProviderBase registry={activeRegistry} sprite={sprite}>\n        {node}\n      </ProviderBase>\n    ),\n  });\n\n  initializeTheme();\n\n  return app;\n}\n"],"mappings":";;;;;;;;;;;;;;AAkCA,SAAgB,iBAAiB,EAC/B,UACA,QACA,QAAQ,CAAC,GACT,eACA,aAAa,MACb,GAAG,mBACwB,CAAC,GAAG;CAC/B,MAAM,iBAAiB,YAAY;CAEnC,mBAAmB,cAAc;CAEjC,MAAM,MAAM,iBAAiB;EAC3B,GAAG;EACH;EACA,SAAS,mBAAmB,KAAK;EACjC,QAAQ,qBAAqB,EAAE,cAAc,CAAC;EAC9C,UAAU,SACR,oBAAC,cAAD;GAAc,UAAU;GAAwB;aAC7C;EACW,CAAA;CAElB,CAAC;CAED,gBAAgB;CAEhB,OAAO;AACT"}

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

@@ -1,5 +1,5 @@
-import { TextLink } from "../../../core/components/link.js";
 import { InfoTooltip } from "../../../core/components/info-tooltip.js";
+import { TextLink } from "../../../core/components/link.js";
 import InputError from "./input-error.js";
 import { Label } from "./label.js";
 import { useInTableCell } from "../row-layout-context.js";

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

@@ -1,10 +1,10 @@
 import { testIdentity } from "../../../core/test-id.js";
 import { useFieldScope } from "../field-scope.js";
 import { useFormValue } from "../values.js";
-import { Checkbox } from "../../../core/components/checkbox.js";
-import { toBoolean } from "../conditions.js";
 import { Label } from "../base/label.js";
+import { toBoolean } from "../conditions.js";
 import { useDependentField } from "../use-dependent-field.js";
+import { Checkbox } from "../../../core/components/checkbox.js";
 import { useFieldCommit } from "../use-field-commit.js";
 import { useSeedDefault } from "../use-seed-default.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/form/components/fields/select.js

@@ -6,11 +6,11 @@ import { postFormAction } from "../form-transport.js";
 import { useFieldScope } from "../field-scope.js";
 import { useResolvedNode } from "../resolved-nodes.js";
 import { useFormValue, useFormValues } from "../values.js";
-import { Combobox } from "../../../core/components/combobox.js";
-import { controlSurface } from "../../../core/components/control.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useDependentField } from "../use-dependent-field.js";
 import { useFieldCommit } from "../use-field-commit.js";
+import { controlSurface } from "../../../core/components/control.js";
+import { Combobox } from "../../../core/components/combobox.js";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/select.tsx
@@ -132,6 +132,7 @@ var SelectComponent = ({ node }) => {
 			},
 			options,
 			searchPlaceholder: props.searchPlaceholder ?? void 0,
+			showSearch: Boolean(searchable),
 			selected,
 			testId: `select-${name}`,
 			trigger: /* @__PURE__ */ jsxs(Fragment$1, { children: [!multiple && selected.length > 0 ? /* @__PURE__ */ jsx("span", { children: labelFor(selected[0]) }) : /* @__PURE__ */ jsx("span", {

package/dist/form/components/fields/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useFormValues } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      commit(\n        selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n      );\n\n      return;\n    }\n\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"form.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Combobox\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useFormValues } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      commit(\n        selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n      );\n\n      return;\n    }\n\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"form.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Combobox\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/toggle.js

@@ -3,8 +3,8 @@ import { testIdentity } from "../../../core/test-id.js";
 import { useFormContext } from "../context.js";
 import { useFieldScope } from "../field-scope.js";
 import { useFormValue } from "../values.js";
-import { toBoolean } from "../conditions.js";
 import { FormFieldFrame } from "../base/field.js";
+import { toBoolean } from "../conditions.js";
 import { useDependentField } from "../use-dependent-field.js";
 import { useFieldCommit } from "../use-field-commit.js";
 import { useSeedDefault } from "../use-seed-default.js";

package/dist/form/components/index.js

@@ -1,10 +1,10 @@
-import { FormComponent } from "./form.js";
 import { BuilderComponent } from "./fields/builder.js";
 import { CheckboxComponent } from "./fields/checkbox.js";
 import { ChoiceComponent } from "./fields/choice.js";
 import { DateInputComponent } from "./fields/date-input.js";
 import { DateTimeInputComponent } from "./fields/date-time-input.js";
 import { FileUploadComponent } from "./fields/file-upload.js";
+import { FormComponent } from "./form.js";
 import { HiddenInputComponent } from "./fields/hidden-input.js";
 import { NumberInputComponent } from "./fields/number-input.js";
 import { OtpInputComponent } from "./fields/otp-input.js";

package/dist/form/eager.d.ts

@@ -0,0 +1 @@
+export declare const eagerFormComponents: import('../core/registry').Plugin;

package/dist/form/eager.js

@@ -0,0 +1,47 @@
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import { BuilderComponent } from "./components/fields/builder.js";
+import { CheckboxComponent } from "./components/fields/checkbox.js";
+import { ChoiceComponent } from "./components/fields/choice.js";
+import { DateInputComponent } from "./components/fields/date-input.js";
+import { DateTimeInputComponent } from "./components/fields/date-time-input.js";
+import { FileUploadComponent } from "./components/fields/file-upload.js";
+import { FormComponent } from "./components/form.js";
+import { HiddenInputComponent } from "./components/fields/hidden-input.js";
+import { NumberInputComponent } from "./components/fields/number-input.js";
+import { OtpInputComponent } from "./components/fields/otp-input.js";
+import { PasswordInputComponent } from "./components/fields/password-input.js";
+import { RepeaterComponent } from "./components/fields/repeater.js";
+import { SelectComponent } from "./components/fields/select.js";
+import { TextareaComponent } from "./components/fields/textarea.js";
+import { TextInputComponent } from "./components/fields/text-input.js";
+import { TimeInputComponent } from "./components/fields/time-input.js";
+import { ToggleComponent } from "./components/fields/toggle.js";
+import { RichEditorComponent } from "./components/fields/rich-editor.js";
+//#region resources/js/form/eager.ts
+var eagerFormComponents = createPlugin({
+	components: {
+		form: eagerComponent(FormComponent),
+		"field.builder": eagerComponent(BuilderComponent),
+		"field.checkbox": eagerComponent(CheckboxComponent),
+		"field.choice": eagerComponent(ChoiceComponent),
+		"field.date-input": eagerComponent(DateInputComponent),
+		"field.date-time-input": eagerComponent(DateTimeInputComponent),
+		"field.file-upload": eagerComponent(FileUploadComponent),
+		"field.hidden-input": eagerComponent(HiddenInputComponent),
+		"field.number-input": eagerComponent(NumberInputComponent),
+		"field.otp": eagerComponent(OtpInputComponent),
+		"field.password-input": eagerComponent(PasswordInputComponent),
+		"field.repeater": eagerComponent(RepeaterComponent),
+		"field.rich-editor": eagerComponent(RichEditorComponent),
+		"field.select": eagerComponent(SelectComponent),
+		"field.textarea": eagerComponent(TextareaComponent),
+		"field.text-input": eagerComponent(TextInputComponent),
+		"field.time-input": eagerComponent(TimeInputComponent),
+		"field.toggle": eagerComponent(ToggleComponent)
+	},
+	name: "lattice/form"
+});
+//#endregion
+export { eagerFormComponents };
+
+//# sourceMappingURL=eager.js.map

package/dist/form/eager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eager.js","names":[],"sources":["../../resources/js/form/eager.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport {\n  BuilderComponent,\n  CheckboxComponent,\n  ChoiceComponent,\n  DateInputComponent,\n  DateTimeInputComponent,\n  FileUploadComponent,\n  FormComponent,\n  HiddenInputComponent,\n  NumberInputComponent,\n  OtpInputComponent,\n  PasswordInputComponent,\n  RepeaterComponent,\n  SelectComponent,\n  TextareaComponent,\n  TextInputComponent,\n  TimeInputComponent,\n  ToggleComponent,\n} from \"./components\";\nimport { RichEditorComponent } from \"./components/fields/rich-editor\";\n\nexport const eagerFormComponents = createPlugin({\n  components: {\n    form: eagerComponent(FormComponent),\n    \"field.builder\": eagerComponent(BuilderComponent),\n    \"field.checkbox\": eagerComponent(CheckboxComponent),\n    \"field.choice\": eagerComponent(ChoiceComponent),\n    \"field.date-input\": eagerComponent(DateInputComponent),\n    \"field.date-time-input\": eagerComponent(DateTimeInputComponent),\n    \"field.file-upload\": eagerComponent(FileUploadComponent),\n    \"field.hidden-input\": eagerComponent(HiddenInputComponent),\n    \"field.number-input\": eagerComponent(NumberInputComponent),\n    \"field.otp\": eagerComponent(OtpInputComponent),\n    \"field.password-input\": eagerComponent(PasswordInputComponent),\n    \"field.repeater\": eagerComponent(RepeaterComponent),\n    \"field.rich-editor\": eagerComponent(RichEditorComponent),\n    \"field.select\": eagerComponent(SelectComponent),\n    \"field.textarea\": eagerComponent(TextareaComponent),\n    \"field.text-input\": eagerComponent(TextInputComponent),\n    \"field.time-input\": eagerComponent(TimeInputComponent),\n    \"field.toggle\": eagerComponent(ToggleComponent),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,sBAAsB,aAAa;CAC9C,YAAY;EACV,MAAM,eAAe,aAAa;EAClC,iBAAiB,eAAe,gBAAgB;EAChD,kBAAkB,eAAe,iBAAiB;EAClD,gBAAgB,eAAe,eAAe;EAC9C,oBAAoB,eAAe,kBAAkB;EACrD,yBAAyB,eAAe,sBAAsB;EAC9D,qBAAqB,eAAe,mBAAmB;EACvD,sBAAsB,eAAe,oBAAoB;EACzD,sBAAsB,eAAe,oBAAoB;EACzD,aAAa,eAAe,iBAAiB;EAC7C,wBAAwB,eAAe,sBAAsB;EAC7D,kBAAkB,eAAe,iBAAiB;EAClD,qBAAqB,eAAe,mBAAmB;EACvD,gBAAgB,eAAe,eAAe;EAC9C,kBAAkB,eAAe,iBAAiB;EAClD,oBAAoB,eAAe,kBAAkB;EACrD,oBAAoB,eAAe,kBAAkB;EACrD,gBAAgB,eAAe,eAAe;CAChD;CACA,MAAM;AACR,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { registry } from './registry';
+export { lazyRegistry, registry } from './registry';
 export { useChat } from './chat/use-chat';
 export { chatPlugin } from './chat';
 export { getActionEffects, isActionEffect, dispatchEffects, dispatchActionError, } from './effects/dispatch';

package/dist/index.js

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

package/dist/provider-base.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { Registry } from './core/registry';
+import { SpriteValue } from './icons/sprite';
+export type ProviderBaseProps = {
+    children: ReactNode;
+    registry: Registry;
+    sprite?: SpriteValue;
+    toaster?: boolean;
+};
+export declare function ProviderBase({ children, registry, sprite, toaster, }: ProviderBaseProps): import("react").JSX.Element;

package/dist/provider-base.js

@@ -0,0 +1,27 @@
+import { updateAppearance } from "./appearance/index.js";
+import { RegistryContext } from "./core/registry-context.js";
+import { SpriteProvider } from "./icons/sprite.js";
+import { EventBridge } from "./events/event-bridge.js";
+import { useFlashEffects } from "./effects/use-flash-effects.js";
+import { Toaster } from "./toast/toaster.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/provider-base.tsx
+var defaultSprite = { href: "" };
+function ProviderBase({ children, registry, sprite = defaultSprite, toaster = true }) {
+	useFlashEffects();
+	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
+		value: registry,
+		children: /* @__PURE__ */ jsxs(SpriteProvider, {
+			sprite,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(EventBridge, { onAppearanceChange: updateAppearance }),
+				toaster ? /* @__PURE__ */ jsx(Toaster, {}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { ProviderBase };
+
+//# sourceMappingURL=provider-base.js.map

package/dist/provider-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-base.js","names":[],"sources":["../resources/js/provider-base.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Registry } from \"./core/registry\";\nimport { RegistryContext } from \"./core/registry-context\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\nimport { EventBridge } from \"./events/event-bridge\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport { Toaster } from \"./toast\";\nimport { updateAppearance } from \"./appearance\";\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport type ProviderBaseProps = {\n  children: ReactNode;\n  registry: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n};\n\nexport function ProviderBase({\n  children,\n  registry,\n  sprite = defaultSprite,\n  toaster = true,\n}: ProviderBaseProps) {\n  useFlashEffects();\n\n  return (\n    <RegistryContext.Provider value={registry}>\n      <SpriteProvider sprite={sprite}>\n        {children}\n        <EventBridge onAppearanceChange={updateAppearance} />\n        {toaster ? <Toaster /> : null}\n      </SpriteProvider>\n    </RegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAS9C,SAAgB,aAAa,EAC3B,UACA,UACA,SAAS,eACT,UAAU,QACU;CACpB,gBAAgB;CAEhB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,qBAAC,gBAAD;GAAwB;aAAxB;IACG;IACD,oBAAC,aAAD,EAAa,oBAAoB,iBAAmB,CAAA;IACnD,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI;GACX;;CACQ,CAAA;AAE9B"}

package/dist/provider.d.ts

@@ -1,10 +1,7 @@
-import { ReactNode } from 'react';
-import { SpriteValue } from './icons/sprite';
 import { Registry } from './core/registry';
-export declare function Provider({ children, registry, sprite, toaster, }: {
-    children: ReactNode;
+import { ProviderBaseProps } from './provider-base';
+type ProviderProps = Omit<ProviderBaseProps, "registry"> & {
     registry?: Registry;
-    sprite?: SpriteValue;
-    toaster?: boolean;
-}): import("react").JSX.Element;
+};
+export declare function Provider({ registry, ...props }: ProviderProps): import("react").JSX.Element;
 export { useComponentRegistry, useColumnRegistry, useEffectHandlerRegistry, } from './core/registry-context';

package/dist/provider.js

@@ -1,26 +1,13 @@
-import { updateAppearance } from "./appearance/index.js";
-import { SpriteProvider } from "./icons/sprite.js";
-import { RegistryContext, setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./core/registry-context.js";
-import { EventBridge } from "./events/event-bridge.js";
-import { registry } from "./registry.js";
-import { Toaster } from "./toast/toaster.js";
-import { useFlashEffects } from "./effects/use-flash-effects.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./core/registry-context.js";
+import { ProviderBase } from "./provider-base.js";
+import { lazyRegistry } from "./registry/lazy.js";
+import { jsx } from "react/jsx-runtime";
 //#region resources/js/provider.tsx
-setDefaultRegistry(registry);
-var defaultSprite = { href: "" };
-function Provider({ children, registry: registry$1 = registry, sprite = defaultSprite, toaster = true }) {
-	useFlashEffects();
-	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
-		value: registry$1,
-		children: /* @__PURE__ */ jsxs(SpriteProvider, {
-			sprite,
-			children: [
-				children,
-				/* @__PURE__ */ jsx(EventBridge, { onAppearanceChange: updateAppearance }),
-				toaster ? /* @__PURE__ */ jsx(Toaster, {}) : null
-			]
-		})
+setDefaultRegistry(lazyRegistry);
+function Provider({ registry = lazyRegistry, ...props }) {
+	return /* @__PURE__ */ jsx(ProviderBase, {
+		...props,
+		registry
 	});
 }
 //#endregion

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { RegistryContext, setDefaultRegistry } from \"./core/registry-context\";\nimport { Toaster } from \"./toast\";\nimport { updateAppearance } from \"./appearance\";\nimport { EventBridge } from \"./events/event-bridge\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport function Provider({\n  children,\n  registry = defaultRegistry,\n  sprite = defaultSprite,\n  toaster = true,\n}: {\n  children: ReactNode;\n  registry?: Registry;\n  sprite?: SpriteValue;\n  toaster?: boolean;\n}) {\n  useFlashEffects();\n\n  return (\n    <RegistryContext.Provider value={registry}>\n      <SpriteProvider sprite={sprite}>\n        {children}\n        <EventBridge onAppearanceChange={updateAppearance} />\n        {toaster ? <Toaster /> : null}\n      </SpriteProvider>\n    </RegistryContext.Provider>\n  );\n}\n\nexport {\n  useComponentRegistry,\n  useColumnRegistry,\n  useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;;;;;AAcA,mBAAmB,QAAe;AAElC,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAE9C,SAAgB,SAAS,EACvB,UACA,UAAA,aAAW,UACX,SAAS,eACT,UAAU,QAMT;CACD,gBAAgB;CAEhB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,qBAAC,gBAAD;GAAwB;aAAxB;IACG;IACD,oBAAC,aAAD,EAAa,oBAAoB,iBAAmB,CAAA;IACnD,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI;GACX;;CACQ,CAAA;AAE9B"}
+{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport { ProviderBase, type ProviderBaseProps } from \"./provider-base\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\ntype ProviderProps = Omit<ProviderBaseProps, \"registry\"> & {\n  registry?: Registry;\n};\n\nexport function Provider({ registry = defaultRegistry, ...props }: ProviderProps) {\n  return <ProviderBase {...props} registry={registry} />;\n}\n\nexport {\n  useComponentRegistry,\n  useColumnRegistry,\n  useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;AAQA,mBAAmB,YAAe;AAMlC,SAAgB,SAAS,EAAE,WAAW,cAAiB,GAAG,SAAwB;CAChF,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAiB;CAAW,CAAA;AACvD"}

package/dist/registry/eager.d.ts

@@ -0,0 +1 @@
+export declare const eagerRegistry: import('../core/registry').Registry;

package/dist/registry/eager.js

@@ -0,0 +1,14 @@
+import { createRegistry } from "../core/registry.js";
+import { layoutComponents } from "../layout/components.js";
+import { actionComponents } from "../action/index.js";
+import { chatPlugin } from "../chat/index.js";
+import { remoteComponents } from "../remote/index.js";
+import { eagerFormComponents } from "../form/eager.js";
+import { eagerCoreComponents } from "../core/components/eager.js";
+import { eagerTableComponents } from "../table/eager.js";
+//#region resources/js/registry/eager.ts
+var eagerRegistry = createRegistry(eagerCoreComponents, actionComponents, eagerFormComponents, layoutComponents, eagerTableComponents, chatPlugin, remoteComponents);
+//#endregion
+export { eagerRegistry };
+
+//# sourceMappingURL=eager.js.map

package/dist/registry/eager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eager.js","names":[],"sources":["../../resources/js/registry/eager.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"../action\";\nimport { chatPlugin } from \"../chat\";\nimport { eagerCoreComponents } from \"../core/components/eager\";\nimport { eagerFormComponents } from \"../form/eager\";\nimport { layoutComponents } from \"../layout/components\";\nimport { remoteComponents } from \"../remote\";\nimport { eagerTableComponents } from \"../table/eager\";\n\nexport const eagerRegistry = createRegistry(\n  eagerCoreComponents,\n  actionComponents,\n  eagerFormComponents,\n  layoutComponents,\n  eagerTableComponents,\n  chatPlugin,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;AASA,IAAa,gBAAgB,eAC3B,qBACA,kBACA,qBACA,kBACA,sBACA,YACA,gBACF"}

package/dist/registry/lazy.d.ts

@@ -0,0 +1 @@
+export declare const lazyRegistry: import('../core/registry').Registry;

package/dist/registry/lazy.js

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

package/dist/registry/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","names":[],"sources":["../../resources/js/registry/lazy.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"../action\";\nimport { chatPlugin } from \"../chat\";\nimport { coreComponents } from \"../core/components\";\nimport { formComponents } from \"../form\";\nimport { layoutComponents } from \"../layout/components\";\nimport { remoteComponents } from \"../remote\";\nimport { tableComponents } from \"../table\";\n\nexport const lazyRegistry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatPlugin,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;AASA,IAAa,eAAe,eAC1B,gBACA,kBACA,gBACA,kBACA,iBACA,YACA,gBACF"}

package/dist/registry.d.ts

@@ -1 +1 @@
-export declare const registry: import('./core/registry').Registry;
+export { lazyRegistry, lazyRegistry as registry } from './registry/lazy';

package/dist/registry.js

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

package/dist/table/components/filter-controls.js

@@ -1,9 +1,9 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
-import { filterOptions, stringProp } from "../filter-values.js";
 import { Checkbox } from "../../core/components/checkbox.js";
 import { Combobox } from "../../core/components/combobox.js";
+import { filterOptions, stringProp } from "../filter-values.js";
 import { fieldClass } from "./filter-value-input.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/table/components/table.js

@@ -4,13 +4,13 @@ import { useT } from "../../i18n/instance.js";
 import { nodeIdentity } from "../../core/test-id.js";
 import { useColumnResizing } from "../../core/use-column-resizing.js";
 import { useColumnVisibility } from "../../core/use-column-visibility.js";
+import { Checkbox } from "../../core/components/checkbox.js";
 import { alignJustifyItems, alignText } from "../align.js";
 import { getBulkActions } from "../bulk.js";
 import { flattenColumns, getRowActions, getRowKey } from "../payload.js";
 import { getQueryParams, getTableSizingColumns, getTableUtilityTracks, getVisiblePages } from "../query.js";
-import { useTableSelection } from "../use-table-selection.js";
 import { useTable } from "../use-table.js";
-import { Checkbox } from "../../core/components/checkbox.js";
+import { useTableSelection } from "../use-table-selection.js";
 import { BulkBar } from "./bulk-bar.js";
 import { ColumnFilterControl } from "./column-filter-control.js";
 import { ColumnHeader } from "./column-header.js";

package/dist/table/eager.d.ts

@@ -0,0 +1 @@
+export declare const eagerTableComponents: import('../core/registry').Plugin;

package/dist/table/eager.js

@@ -0,0 +1,11 @@
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import TableComponent from "./components/table.js";
+//#region resources/js/table/eager.ts
+var eagerTableComponents = createPlugin({
+	components: { table: eagerComponent(TableComponent) },
+	name: "lattice/table"
+});
+//#endregion
+export { eagerTableComponents };
+
+//# sourceMappingURL=eager.js.map

package/dist/table/eager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eager.js","names":[],"sources":["../../resources/js/table/eager.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport TableComponent from \"./components/table\";\n\nexport const eagerTableComponents = createPlugin({\n  components: {\n    table: eagerComponent(TableComponent as unknown as RendererComponent<\"table\">),\n  },\n  name: \"lattice/table\",\n});\n"],"mappings":";;;AAIA,IAAa,uBAAuB,aAAa;CAC/C,YAAY,EACV,OAAO,eAAe,cAAuD,EAC/E;CACA,MAAM;AACR,CAAC"}

package/dist/table/use-table.js

@@ -1,7 +1,7 @@
 import { LATTICE_EVENT } from "../events/event-names.js";
 import { apiFetch, apiJson } from "../core/api.js";
-import { isEmptyFilterValue } from "./filter-values.js";
 import { getColumns, getPagination, getRows, getState } from "./payload.js";
+import { isEmptyFilterValue } from "./filter-values.js";
 import { buildEndpoint, nextSort } from "./query.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region resources/js/table/use-table.ts

package/dist/types/generated.d.ts

@@ -123,6 +123,7 @@ export type Callouts = Record<string, never>;
 export type Card = {
     description: string | null;
     title: string | null;
+    tooltip: string | null;
 };
 export type ChannelVisibility = "public" | "private" | "presence";
 export type Chart = {
@@ -231,6 +232,7 @@ export type CloseModalEffect = {
 export type Collapsible = {
     collapsed: boolean;
     rememberState: boolean;
+    tooltip: string | null;
     trigger: Node[];
 };
 export type Color = "default" | "muted" | "primary" | "success" | "info" | "warning" | "danger";
@@ -372,6 +374,10 @@ export type CoreNode = {
     type: "text";
     key?: string;
     props: Text;
+} | {
+    type: "tooltip";
+    key?: string;
+    props: Tooltip;
 };
 export type DataList = {
     dataEndpoint: string | null;
@@ -635,6 +641,7 @@ export type Grid = {
 export type Heading = {
     level: number;
     text: string;
+    tooltip: string | null;
 };
 export type Height = "full" | "screen";
 export type HiddenInput = {
@@ -981,6 +988,7 @@ export type Section = {
     headerActions: Node[];
     rememberState: boolean;
     title: string | null;
+    tooltip: string | null;
 };
 export type SegmentedControl = {
     emits: string | null;
@@ -1248,6 +1256,10 @@ export type ToolCallPart = {
     args: Record<string, unknown>;
     name: string;
 };
+export type Tooltip = {
+    content: string | null;
+    trigger: Node[];
+};
 export type Topbar = {
     sticky: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-php/lattice",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Server-driven React components for Laravel and Inertia.",
   "license": "MIT",
   "author": "Manuel Christlieb <manuel@christlieb.eu>",
@@ -135,6 +135,14 @@
       "types": "./dist/registry.d.ts",
       "import": "./dist/registry.js"
     },
+    "./registry/eager": {
+      "types": "./dist/registry/eager.d.ts",
+      "import": "./dist/registry/eager.js"
+    },
+    "./registry/lazy": {
+      "types": "./dist/registry/lazy.d.ts",
+      "import": "./dist/registry/lazy.js"
+    },
     "./remote": {
       "types": "./dist/remote/index.d.ts",
       "import": "./dist/remote/index.js"

package/dist/registry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { chatPlugin } from \"./chat\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { remoteComponents } from \"./remote\";\nimport { layoutComponents } from \"./layout/components\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatPlugin,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;AASA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,iBACA,YACA,gBACF"}