@lattice-php/lattice 0.3.0 → 0.5.0

package/dist/core/components/button.js

@@ -1,28 +1,31 @@
 import { cn } from "../../lib/utils.js";
+import { IconRenderer } from "../../icons/icon-renderer.js";
 import { nodeIdentity } from "../test-id.js";
-import "react";
+import { getActionEffects } from "../../effects/dispatch.js";
+import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { Link } from "@inertiajs/react";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", {
 	variants: {
 		variant: {
-			default: "bg-lt-primary text-lt-primary-fg shadow-xs hover:bg-lt-primary/90",
-			destructive: "bg-lt-danger text-lt-danger-fg shadow-xs hover:bg-lt-danger/90 focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40",
-			success: "bg-lt-success text-lt-success-fg shadow-xs hover:bg-lt-success/90",
-			info: "bg-lt-info text-lt-info-fg shadow-xs hover:bg-lt-info/90",
-			outline: "border border-lt-input bg-lt-bg shadow-xs hover:bg-lt-accent hover:text-lt-accent-fg",
-			secondary: "bg-lt-secondary text-lt-secondary-fg shadow-xs hover:bg-lt-secondary/80",
-			ghost: "hover:bg-lt-accent hover:text-lt-accent-fg",
-			link: "text-lt-primary underline-offset-4 hover:underline"
+			default: "bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+			destructive: "bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+			success: "bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+			info: "bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+			outline: "border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none",
+			secondary: "bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+			ghost: "hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg",
+			link: "text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			sm: "h-8 rounded-lt-sm px-3 has-[>svg]:px-2.5",
-			lg: "h-10 rounded-lt-sm px-6 has-[>svg]:px-4",
-			icon: "size-9"
+			default: "h-lt-control-md px-4 py-2 has-[>svg]:px-3",
+			sm: "h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5",
+			lg: "h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4",
+			icon: "size-lt-control-md"
 		}
 	},
 	defaultVariants: {
@@ -42,14 +45,16 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 	});
 }
 var ButtonComponent = ({ node }) => {
-	const { href, label } = node.props;
+	const { href, label, icon } = node.props;
+	const effects = node.props.effects ?? [];
 	const variant = node.props.variant ?? "default";
 	const testId = nodeIdentity(node);
+	const dispatch = useEffectDispatcher();
 	if (href) return /* @__PURE__ */ jsx(Button, {
 		asChild: true,
 		"data-test": testId,
 		variant,
-		size: "lg",
+		size: "default",
 		children: /* @__PURE__ */ jsx(Link, {
 			href,
 			children: label
@@ -57,10 +62,17 @@ var ButtonComponent = ({ node }) => {
 	});
 	return /* @__PURE__ */ jsx(Button, {
 		"data-test": testId,
+		onClick: effects.length > 0 ? () => dispatch(getActionEffects(effects)) : void 0,
+		size: icon ? "icon" : "default",
 		type: node.props.buttonType,
 		variant,
-		size: "lg",
-		children: label
+		children: icon ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconRenderer, {
+			className: "size-lt-icon-md",
+			icon
+		}), label ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}) : null] }) : label
 	});
 };
 //#endregion

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

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

package/dist/core/components/card.js

@@ -1,11 +1,12 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/card.tsx
 function Card({ className, ...props }) {
 	return /* @__PURE__ */ jsx("article", {
 		"data-slot": "card",
-		className: cn("flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-xs", className),
+		className: cn("flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm", className),
 		...props
 	});
 }
@@ -47,7 +48,7 @@ function CardFooter({ className, ...props }) {
 var CardComponent = ({ children, node }) => {
 	const { title, description } = node.props;
 	return /* @__PURE__ */ jsxs(Card, {
-		"data-lattice-component": node.id,
+		"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, {
 			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 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-xs\",\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={node.id}>\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":";;;;AAIA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,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,KAAK;YAAnC,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\";\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"}

package/dist/core/components/chart.js

@@ -1,3 +1,4 @@
+import { nodeIdentity } from "../test-id.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region resources/js/core/components/chart.tsx
@@ -52,7 +53,7 @@ function cartesianChartFor(series) {
 }
 function ChartFrame({ children, description, id, title }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-xs",
+		className: "flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm",
 		"data-lattice-component": id,
 		children: [(title !== null || description !== null) && /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1.5",
@@ -158,7 +159,7 @@ var ChartComponent = ({ node }) => {
 	const hasCartesianSeries = props.series.some(isCartesianSeries);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		description: props.description,
-		id: node.id,
+		id: nodeIdentity(node),
 		title: props.title,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "min-h-0 w-full",

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

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-xs\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis stroke=\"var(--lt-muted-fg)\" tick={axisTick} tickLine={false} width={42} />\n        )}\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={node.id} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartComponent;\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis stroke=\"var(--lt-muted-fg)\" tick={axisTick} tickLine={false} width={42} />\n        )}\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartComponent;\n"],"mappings":"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"}

package/dist/core/components/checkbox.js

@@ -7,7 +7,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",

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

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

package/dist/core/components/control.js

@@ -9,15 +9,15 @@ var FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 foc
 * border, focus ring, invalid, and disabled treatment are unified.
 */
 var controlSurface = cva([
-	"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-xs outline-none transition-[color,box-shadow]",
+	"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-lt-xs outline-none transition-[color,box-shadow]",
 	"placeholder:text-lt-muted-fg",
 	FOCUS_RING,
 	"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40",
-	"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+	"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg"
 ], {
 	variants: { density: {
-		comfortable: "h-9 bg-transparent px-3 py-1 text-base md:text-sm",
-		compact: "h-9 bg-lt-bg px-2 text-sm font-normal"
+		comfortable: "h-lt-control-md bg-transparent px-3 py-1 text-base",
+		compact: "h-lt-control-md bg-lt-bg px-2 text-sm font-normal"
 	} },
 	defaultVariants: { density: "comfortable" }
 });

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

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

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

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-export declare const DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg";
+export declare const DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
 declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;

package/dist/core/components/dialog.js

@@ -1,11 +1,11 @@
 import { cn } from "../../lib/utils.js";
-import { Button } from "./button.js";
 import { Icon } from "../../icons/sprite.js";
+import { Button } from "./button.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 //#region resources/js/core/components/dialog.tsx
-var DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg";
+var DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
 function Dialog(props) {
 	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
 		"data-slot": "dialog",
@@ -58,6 +58,7 @@ function DialogHeader({ closeLabel, description, title }) {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Button, {
 				"aria-label": closeLabel,
+				"data-test": "dialog-close",
 				size: "icon",
 				variant: "ghost",
 				children: /* @__PURE__ */ jsx(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../../resources/js/core/components/dialog.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const DIALOG_SURFACE =\n  \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\";\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className=\"fixed inset-0 z-50 bg-lt-overlay\"\n        data-slot=\"dialog-overlay\"\n      />\n      <DialogPrimitive.Content\n        className={cn(DIALOG_SURFACE, className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\n/**\n * The shared dialog header: a title with an optional description and a ghost\n * close button. Pass `description` as `undefined` to suppress the description\n * and the matching `aria-describedby` wiring on the content.\n */\nfunction DialogHeader({\n  closeLabel,\n  description,\n  title,\n}: {\n  closeLabel?: string;\n  description?: React.ReactNode;\n  title: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"grid gap-2\">\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </div>\n      <DialogClose asChild>\n        <Button aria-label={closeLabel} size=\"icon\" variant=\"ghost\">\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </Button>\n      </DialogClose>\n    </div>\n  );\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };\n"],"mappings":";;;;;;;AAMA,IAAa,iBACX;AAEF,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAAC,gBAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAAC,gBAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,qDAAqD,SAAS;EAC5E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,UACA,WACA,GAAG,SACoD;CACvD,OACE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,gBAAgB,SAAjB;EACE,WAAU;EACV,aAAU;CACX,CAAA,GACD,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,gBAAgB,SAAS;EACvC,aAAU;EACV,GAAI;EAEH;CACsB,CAAA,CACH,EAAA,CAAA;AAE5B;;;;;;AAOA,SAAS,aAAa,EACpB,YACA,aACA,SAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,cAAc,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,IAAI,IACnE;MACL,oBAAC,aAAD;GAAa,SAAA;aACX,oBAAC,QAAD;IAAQ,cAAY;IAAY,MAAK;IAAO,SAAQ;cAClD,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EACG,CAAA,CACV;;AAET"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../resources/js/core/components/dialog.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const DIALOG_SURFACE =\n  \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg\";\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className=\"fixed inset-0 z-50 bg-lt-overlay\"\n        data-slot=\"dialog-overlay\"\n      />\n      <DialogPrimitive.Content\n        className={cn(DIALOG_SURFACE, className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\n/**\n * The shared dialog header: a title with an optional description and a ghost\n * close button. Pass `description` as `undefined` to suppress the description\n * and the matching `aria-describedby` wiring on the content.\n */\nfunction DialogHeader({\n  closeLabel,\n  description,\n  title,\n}: {\n  closeLabel?: string;\n  description?: React.ReactNode;\n  title: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"grid gap-2\">\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </div>\n      <DialogClose asChild>\n        <Button aria-label={closeLabel} data-test=\"dialog-close\" size=\"icon\" variant=\"ghost\">\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </Button>\n      </DialogClose>\n    </div>\n  );\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };\n"],"mappings":";;;;;;;AAMA,IAAa,iBACX;AAEF,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAAC,gBAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAAC,gBAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,qDAAqD,SAAS;EAC5E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,UACA,WACA,GAAG,SACoD;CACvD,OACE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,gBAAgB,SAAjB;EACE,WAAU;EACV,aAAU;CACX,CAAA,GACD,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,gBAAgB,SAAS;EACvC,aAAU;EACV,GAAI;EAEH;CACsB,CAAA,CACH,EAAA,CAAA;AAE5B;;;;;;AAOA,SAAS,aAAa,EACpB,YACA,aACA,SAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,cAAc,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,IAAI,IACnE;MACL,oBAAC,aAAD;GAAa,SAAA;aACX,oBAAC,QAAD;IAAQ,cAAY;IAAY,aAAU;IAAe,MAAK;IAAO,SAAQ;cAC3E,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EACG,CAAA,CACV;;AAET"}

package/dist/core/components/floating-panel.js

@@ -1,5 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { RenderNode } from "../renderer.js";
+import { nodeIdentity } from "../test-id.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/floating-panel.tsx
@@ -29,8 +30,8 @@ var FloatingPanelComponent = ({ children, node }) => {
 	const [open, setOpen] = useState(false);
 	if (trigger.length === 0) return /* @__PURE__ */ jsx("div", {
 		"aria-label": label,
-		className: "fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md",
-		"data-lattice-component": node.id,
+		className: "fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lt-md",
+		"data-lattice-component": nodeIdentity(node),
 		role: label ? "group" : void 0,
 		style: placementStyle(placement, offset),
 		children
@@ -40,14 +41,14 @@ var FloatingPanelComponent = ({ children, node }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": label,
 		className: "fixed z-50 max-w-[calc(100vw-2rem)]",
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		role: label ? "group" : void 0,
 		style: placementStyle(placement, offset),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("flex w-fit gap-2", expandsUpward ? "flex-col-reverse" : "flex-col"),
 			children: [/* @__PURE__ */ jsx("button", {
 				"aria-expanded": open,
-				className: cn("inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-md hover:bg-lt-muted", anchorsToStart ? "self-start" : "self-end"),
+				className: cn("inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-lt-md hover:bg-lt-muted", anchorsToStart ? "self-start" : "self-end"),
 				"data-test": node.key ? `${node.key}-trigger` : void 0,
 				onClick: () => setOpen((value) => !value),
 				type: "button",

package/dist/core/components/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-panel.js","names":[],"sources":["../../../resources/js/core/components/floating-panel.tsx"],"sourcesContent":["import { type CSSProperties, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { FloatingPlacement } from \"@lattice-php/lattice/types/generated\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction placementStyle(placement: FloatingPlacement, offset: number): CSSProperties {\n  if (placement === \"top-start\") {\n    return { left: offset, top: offset };\n  }\n\n  if (placement === \"top-end\") {\n    return { right: offset, top: offset };\n  }\n\n  if (placement === \"bottom-start\") {\n    return { bottom: offset, left: offset };\n  }\n\n  return { bottom: offset, right: offset };\n}\n\nconst FloatingPanelComponent: RendererComponent<\"floating-panel\"> = ({ children, node }) => {\n  const label = node.props.label ?? undefined;\n  const offset = Math.max(0, node.props.offset ?? 16);\n  const placement = node.props.placement ?? \"bottom-end\";\n  const trigger = node.props.trigger ?? [];\n  const [open, setOpen] = useState(false);\n\n  if (trigger.length === 0) {\n    return (\n      <div\n        aria-label={label}\n        className=\"fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md\"\n        data-lattice-component={node.id}\n        role={label ? \"group\" : undefined}\n        style={placementStyle(placement, offset)}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const expandsUpward = placement === \"bottom-start\" || placement === \"bottom-end\";\n  const anchorsToStart = placement === \"top-start\" || placement === \"bottom-start\";\n\n  return (\n    <div\n      aria-label={label}\n      className=\"fixed z-50 max-w-[calc(100vw-2rem)]\"\n      data-lattice-component={node.id}\n      role={label ? \"group\" : undefined}\n      style={placementStyle(placement, offset)}\n    >\n      <div className={cn(\"flex w-fit gap-2\", expandsUpward ? \"flex-col-reverse\" : \"flex-col\")}>\n        <button\n          aria-expanded={open}\n          className={cn(\n            \"inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-md hover:bg-lt-muted\",\n            anchorsToStart ? \"self-start\" : \"self-end\",\n          )}\n          data-test={node.key ? `${node.key}-trigger` : undefined}\n          onClick={() => setOpen((value) => !value)}\n          type=\"button\"\n        >\n          {trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </button>\n        <div className={open ? \"block\" : \"hidden\"}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default FloatingPanelComponent;\n"],"mappings":";;;;;AAMA,SAAS,eAAe,WAA8B,QAA+B;CACnF,IAAI,cAAc,aAChB,OAAO;EAAE,MAAM;EAAQ,KAAK;CAAO;CAGrC,IAAI,cAAc,WAChB,OAAO;EAAE,OAAO;EAAQ,KAAK;CAAO;CAGtC,IAAI,cAAc,gBAChB,OAAO;EAAE,QAAQ;EAAQ,MAAM;CAAO;CAGxC,OAAO;EAAE,QAAQ;EAAQ,OAAO;CAAO;AACzC;AAEA,IAAM,0BAA+D,EAAE,UAAU,WAAW;CAC1F,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAA;CAClC,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,EAAE;CAClD,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,UAAU,KAAK,MAAM,WAAW,CAAC;CACvC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,IAAI,QAAQ,WAAW,GACrB,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,KAAK;EAC7B,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;EAEtC;CACE,CAAA;CAIT,MAAM,gBAAgB,cAAc,kBAAkB,cAAc;CACpE,MAAM,iBAAiB,cAAc,eAAe,cAAc;CAElE,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,KAAK;EAC7B,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;YAEvC,qBAAC,OAAD;GAAK,WAAW,GAAG,oBAAoB,gBAAgB,qBAAqB,UAAU;aAAtF,CACE,oBAAC,UAAD;IACE,iBAAe;IACf,WAAW,GACT,kKACA,iBAAiB,eAAe,UAClC;IACA,aAAW,KAAK,MAAM,GAAG,KAAK,IAAI,YAAY,KAAA;IAC9C,eAAe,SAAS,UAAU,CAAC,KAAK;IACxC,MAAK;cAEJ,QAAQ,KAAK,aAAa,UACzB,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;GACK,CAAA,GACR,oBAAC,OAAD;IAAK,WAAW,OAAO,UAAU;IAAW;GAAc,CAAA,CACvD;;CACF,CAAA;AAET"}
+{"version":3,"file":"floating-panel.js","names":[],"sources":["../../../resources/js/core/components/floating-panel.tsx"],"sourcesContent":["import { type CSSProperties, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { FloatingPlacement } from \"@lattice-php/lattice/types/generated\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction placementStyle(placement: FloatingPlacement, offset: number): CSSProperties {\n  if (placement === \"top-start\") {\n    return { left: offset, top: offset };\n  }\n\n  if (placement === \"top-end\") {\n    return { right: offset, top: offset };\n  }\n\n  if (placement === \"bottom-start\") {\n    return { bottom: offset, left: offset };\n  }\n\n  return { bottom: offset, right: offset };\n}\n\nconst FloatingPanelComponent: RendererComponent<\"floating-panel\"> = ({ children, node }) => {\n  const label = node.props.label ?? undefined;\n  const offset = Math.max(0, node.props.offset ?? 16);\n  const placement = node.props.placement ?? \"bottom-end\";\n  const trigger = node.props.trigger ?? [];\n  const [open, setOpen] = useState(false);\n\n  if (trigger.length === 0) {\n    return (\n      <div\n        aria-label={label}\n        className=\"fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lt-md\"\n        data-lattice-component={nodeIdentity(node)}\n        role={label ? \"group\" : undefined}\n        style={placementStyle(placement, offset)}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const expandsUpward = placement === \"bottom-start\" || placement === \"bottom-end\";\n  const anchorsToStart = placement === \"top-start\" || placement === \"bottom-start\";\n\n  return (\n    <div\n      aria-label={label}\n      className=\"fixed z-50 max-w-[calc(100vw-2rem)]\"\n      data-lattice-component={nodeIdentity(node)}\n      role={label ? \"group\" : undefined}\n      style={placementStyle(placement, offset)}\n    >\n      <div className={cn(\"flex w-fit gap-2\", expandsUpward ? \"flex-col-reverse\" : \"flex-col\")}>\n        <button\n          aria-expanded={open}\n          className={cn(\n            \"inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-lt-md hover:bg-lt-muted\",\n            anchorsToStart ? \"self-start\" : \"self-end\",\n          )}\n          data-test={node.key ? `${node.key}-trigger` : undefined}\n          onClick={() => setOpen((value) => !value)}\n          type=\"button\"\n        >\n          {trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </button>\n        <div className={open ? \"block\" : \"hidden\"}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default FloatingPanelComponent;\n"],"mappings":";;;;;;AAOA,SAAS,eAAe,WAA8B,QAA+B;CACnF,IAAI,cAAc,aAChB,OAAO;EAAE,MAAM;EAAQ,KAAK;CAAO;CAGrC,IAAI,cAAc,WAChB,OAAO;EAAE,OAAO;EAAQ,KAAK;CAAO;CAGtC,IAAI,cAAc,gBAChB,OAAO;EAAE,QAAQ;EAAQ,MAAM;CAAO;CAGxC,OAAO;EAAE,QAAQ;EAAQ,OAAO;CAAO;AACzC;AAEA,IAAM,0BAA+D,EAAE,UAAU,WAAW;CAC1F,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAA;CAClC,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,EAAE;CAClD,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,UAAU,KAAK,MAAM,WAAW,CAAC;CACvC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,IAAI,QAAQ,WAAW,GACrB,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,aAAa,IAAI;EACzC,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;EAEtC;CACE,CAAA;CAIT,MAAM,gBAAgB,cAAc,kBAAkB,cAAc;CACpE,MAAM,iBAAiB,cAAc,eAAe,cAAc;CAElE,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,aAAa,IAAI;EACzC,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;YAEvC,qBAAC,OAAD;GAAK,WAAW,GAAG,oBAAoB,gBAAgB,qBAAqB,UAAU;aAAtF,CACE,oBAAC,UAAD;IACE,iBAAe;IACf,WAAW,GACT,qKACA,iBAAiB,eAAe,UAClC;IACA,aAAW,KAAK,MAAM,GAAG,KAAK,IAAI,YAAY,KAAA;IAC9C,eAAe,SAAS,UAAU,CAAC,KAAK;IACxC,MAAK;cAEJ,QAAQ,KAAK,aAAa,UACzB,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;GACK,CAAA,GACR,oBAAC,OAAD;IAAK,WAAW,OAAO,UAAU;IAAW;GAAc,CAAA,CACvD;;CACF,CAAA;AAET"}

package/dist/core/components/fragment.js

@@ -1,7 +1,8 @@
 import { LATTICE_EVENT } from "../../events/event-names.js";
+import { Renderer } from "../renderer.js";
 import { apiJson } from "../api.js";
 import { Skeleton } from "./skeleton.js";
-import { Renderer } from "../renderer.js";
+import { toNodes } from "../nodes.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/fragment.tsx
@@ -12,10 +13,6 @@ var fragmentSizeHeights = {
 	xl: 384,
 	xs: 32
 };
-function getComponents(value) {
-	if (!Array.isArray(value)) return [];
-	return value.filter((node) => typeof node === "object" && node !== null && "type" in node && typeof node.type === "string");
-}
 var FragmentComponent = ({ node }) => {
 	const endpoint = node.props.endpoint ?? "";
 	const isLazy = node.props.lazy === true;
@@ -28,7 +25,7 @@ var FragmentComponent = ({ node }) => {
 		if (!endpoint) return;
 		setProcessing(true);
 		try {
-			setComponents(getComponents((await apiJson(endpoint, { ref: componentRef })).schema));
+			setComponents(toNodes((await apiJson(endpoint, { ref: componentRef })).schema));
 			setHasLoaded(true);
 		} finally {
 			setProcessing(false);

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

@@ -1 +1 @@
-{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(getComponents(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;AAWA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,eAAc,MAFP,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAE3C,MAAM,CAAC;GAC1C,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}
+{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(toNodes(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,SAAQ,MAFD,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAEjD,MAAM,CAAC;GACpC,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}

package/dist/core/components/grid.js

@@ -1,10 +1,11 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/grid.tsx
 var GridComponent = ({ children, node }) => {
 	const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);
 	return /* @__PURE__ */ jsx("div", {
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		className: cn("grid gap-x-4 gap-y-6", columns >= 2 && "md:grid-cols-2", columns >= 3 && "lg:grid-cols-3", columns >= 4 && "xl:grid-cols-4"),
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;;AAIA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/heading.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 var HeadingComponent = ({ node }) => {
 	const { text } = 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-4xl leading-tight sm:text-5xl", level === 2 && "text-2xl", level > 2 && "text-lg");
+	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");
 	switch (level) {
 		case 1: return /* @__PURE__ */ jsx("h1", {
 			className,

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-4xl leading-tight sm:text-5xl\",\n    level === 2 && \"text-2xl\",\n    level > 2 && \"text-lg\",\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,sCACf,UAAU,KAAK,YACf,QAAQ,KAAK,SACf;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\";\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"}

package/dist/core/components/index.js

@@ -1,6 +1,5 @@
 import { createPlugin, eagerComponent, lazyComponent } from "../registry.js";
 import ButtonComponent from "./button.js";
-import { ChatBox } from "../../chat/components/chat-box.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
 import FloatingPanelComponent from "./floating-panel.js";
@@ -23,7 +22,6 @@ var coreComponents = createPlugin({
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
 		chart: lazyComponent(() => import("./chart.js")),
-		"chat.box": eagerComponent(ChatBox),
 		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),
 		grid: eagerComponent(GridComponent),

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 ChatBoxComponent from \"../../chat/components/chat-box\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\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    \"chat.box\": eagerComponent(ChatBoxComponent),\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,YAAY,eAAe,OAAgB;EAC3C,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 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    \"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":";;;;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,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"}

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

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
-export declare const POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md";
+export declare const POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
 declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 declare function PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;

package/dist/core/components/popover.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 //#region resources/js/core/components/popover.tsx
-var POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md";
+var POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
 function Popover(props) {
 	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
 		"data-slot": "popover",

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../../resources/js/core/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const POPOVER_SURFACE =\n  \"z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverContent({\n  align = \"start\",\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(POPOVER_SURFACE, className)}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverClose, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;AAIA,IAAa,kBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAAC,iBAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;EACS;EACP,WAAW,GAAG,iBAAiB,SAAS;EACxC,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../../resources/js/core/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const POPOVER_SURFACE =\n  \"z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverContent({\n  align = \"start\",\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(POPOVER_SURFACE, className)}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverClose, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;AAIA,IAAa,kBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAAC,iBAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;EACS;EACP,WAAW,GAAG,iBAAiB,SAAS;EACxC,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}