@lattice-php/lattice 0.19.0 → 0.20.0

package/dist/ui/image-preview.js

@@ -0,0 +1,65 @@
+import { useT } from "../i18n/instance.js";
+import { Button } from "./button.js";
+import { Dialog, DialogClose, DialogContent, DialogTitle } from "./dialog.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/ui/image-preview.tsx
+function PreviewableImage({ src, alt, previewable, width, height, className, testId }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	const image = /* @__PURE__ */ jsx("img", {
+		alt,
+		src,
+		width,
+		height,
+		className,
+		style: width ? {
+			width,
+			height
+		} : void 0
+	});
+	if (!previewable) return image;
+	const openLabel = t("common.image.open-preview", "View image");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-test": testId,
+		className: "cursor-zoom-in",
+		"aria-label": openLabel,
+		onClick: () => setOpen(true),
+		children: image
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"aria-describedby": void 0,
+			className: "max-h-[90vh] max-w-[90vw] border-none bg-transparent p-0 shadow-none",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: alt || openLabel
+				}),
+				/* @__PURE__ */ jsx("img", {
+					alt,
+					src,
+					"data-slot": "image-lightbox",
+					className: "max-h-[90vh] max-w-[90vw] rounded-lt object-contain"
+				}),
+				/* @__PURE__ */ jsx(DialogClose, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						icon: "x",
+						"aria-label": t("common.close", "Close"),
+						"data-test": "lightbox-close",
+						size: "icon",
+						variant: "ghost",
+						className: "absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg"
+					})
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+export { PreviewableImage };
+
+//# sourceMappingURL=image-preview.js.map

package/dist/ui/image-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-preview.js","names":[],"sources":["../../resources/js/ui/image-preview.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { type ReactNode, useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from \"./dialog\";\n\ninterface PreviewableImageProps {\n  src: string;\n  alt: string;\n  previewable: boolean;\n  width?: number;\n  height?: number;\n  className?: string;\n  testId?: string;\n}\n\nexport function PreviewableImage({\n  src,\n  alt,\n  previewable,\n  width,\n  height,\n  className,\n  testId,\n}: PreviewableImageProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  const image = (\n    <img\n      alt={alt}\n      src={src}\n      width={width}\n      height={height}\n      className={className}\n      style={width ? { width, height } : undefined}\n    />\n  );\n\n  if (!previewable) {\n    return image;\n  }\n\n  const openLabel = t(\"common.image.open-preview\", \"View image\");\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-test={testId}\n        className=\"cursor-zoom-in\"\n        aria-label={openLabel}\n        onClick={() => setOpen(true)}\n      >\n        {image}\n      </button>\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent\n          aria-describedby={undefined}\n          className=\"max-h-[90vh] max-w-[90vw] border-none bg-transparent p-0 shadow-none\"\n        >\n          <DialogTitle className=\"sr-only\">{alt || openLabel}</DialogTitle>\n          <img\n            alt={alt}\n            src={src}\n            data-slot=\"image-lightbox\"\n            className=\"max-h-[90vh] max-w-[90vw] rounded-lt object-contain\"\n          />\n          <DialogClose asChild>\n            <Button\n              icon=\"x\"\n              aria-label={t(\"common.close\", \"Close\")}\n              data-test=\"lightbox-close\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg\"\n            />\n          </DialogClose>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,iBAAiB,EAC/B,KACA,KACA,aACA,OACA,QACA,WACA,UACmC;CACnC,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,QACJ,oBAAC,OAAD;EACO;EACA;EACE;EACC;EACG;EACX,OAAO,QAAQ;GAAE;GAAO;EAAO,IAAI,KAAA;CACpC,CAAA;CAGH,IAAI,CAAC,aACH,OAAO;CAGT,MAAM,YAAY,EAAE,6BAA6B,YAAY;CAE7D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAU;EACV,cAAY;EACZ,eAAe,QAAQ,IAAI;YAE1B;CACK,CAAA,GACR,oBAAC,QAAD;EAAc;EAAM,cAAc;YAChC,qBAAC,eAAD;GACE,oBAAkB,KAAA;GAClB,WAAU;aAFZ;IAIE,oBAAC,aAAD;KAAa,WAAU;eAAW,OAAO;IAAuB,CAAA;IAChE,oBAAC,OAAD;KACO;KACA;KACL,aAAU;KACV,WAAU;IACX,CAAA;IACD,oBAAC,aAAD;KAAa,SAAA;eACX,oBAAC,QAAD;MACE,MAAK;MACL,cAAY,EAAE,gBAAgB,OAAO;MACrC,aAAU;MACV,MAAK;MACL,SAAQ;MACR,WAAU;KACX,CAAA;IACU,CAAA;GACA;;CACT,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/ui/image.d.ts

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

package/dist/ui/image.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.js";
+import { PreviewableImage } from "./image-preview.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/ui/image.tsx
+var ImageComponent = ({ node }) => {
+	const { src, alt, size, circular, previewable } = node.props;
+	return /* @__PURE__ */ jsx(PreviewableImage, {
+		alt: alt ?? "",
+		className: cn("object-cover", circular ? "rounded-full" : "rounded-lt-sm"),
+		height: size ?? void 0,
+		previewable,
+		src,
+		testId: nodeIdentity(node),
+		width: size ?? void 0
+	});
+};
+//#endregion
+export { ImageComponent as default };
+
+//# sourceMappingURL=image.js.map

package/dist/ui/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../../resources/js/ui/image.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\";\nimport { PreviewableImage } from \"./image-preview\";\n\nconst ImageComponent: RendererComponent<\"image\"> = ({ node }) => {\n  const { src, alt, size, circular, previewable } = node.props;\n\n  return (\n    <PreviewableImage\n      alt={alt ?? \"\"}\n      className={cn(\"object-cover\", circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      height={size ?? undefined}\n      previewable={previewable}\n      src={src}\n      testId={nodeIdentity(node)}\n      width={size ?? undefined}\n    />\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;AAKA,IAAM,kBAA8C,EAAE,WAAW;CAC/D,MAAM,EAAE,KAAK,KAAK,MAAM,UAAU,gBAAgB,KAAK;CAEvD,OACE,oBAAC,kBAAD;EACE,KAAK,OAAO;EACZ,WAAW,GAAG,gBAAgB,WAAW,iBAAiB,eAAe;EACzE,QAAQ,QAAQ,KAAA;EACH;EACR;EACL,QAAQ,aAAa,IAAI;EACzB,OAAO,QAAQ,KAAA;CAChB,CAAA;AAEL"}

package/dist/ui/index.d.ts

@@ -10,8 +10,9 @@ export { ConfirmDialog } from './confirm-dialog.js';
 export { ActionTrigger, ActionTriggerProvider, useActionTrigger, useClickBehavior, } from './click-behavior.js';
 export type { ActionTriggerRenderer, ClickBehavior, TriggerState } from './click-behavior.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
-export { CopyableText, copyToClipboard } from './copyable-text.js';
+export { CopyButton, CopyableText, copyToClipboard } from './copyable-text.js';
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+export { PreviewableImage } from './image-preview.js';
 export { InfoTooltip } from './info-tooltip.js';
 export { Input } from './input.js';
 export { default as InputError } from './input-error.js';

package/dist/ui/index.js

@@ -10,17 +10,18 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Badge, badgeVariants } from "./badge.js";
 import { InfoTooltip } from "./info-tooltip.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { CopyButton, CopyableText, copyToClipboard } from "./copyable-text.js";
+import { PreviewableImage } from "./image-preview.js";
 import { TextLink } from "./link.js";
 import { SegmentedPills } from "./segmented-pills.js";
-import { CopyableText, copyToClipboard } from "./copyable-text.js";
 import { uiComponents } from "./plugin.js";
 import InputError from "./input-error.js";
 import { Label } from "./label.js";
 import { Checkbox } from "./checkbox.js";
-import { AffixGroup } from "./affix-group.js";
 import { Input } from "./input.js";
+import { AffixGroup } from "./affix-group.js";
 import { InputOTP } from "./input-otp.js";
 import PasswordInput from "./password-input.js";
 import { Combobox } from "./combobox.js";
 import { Textarea } from "./textarea.js";
-export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };
+export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };

package/dist/ui/info-tooltip.js

@@ -8,7 +8,7 @@ function InfoTooltip({ content }) {
 	if (!content) return null;
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		type: "button",
-		"aria-label": t("common.moreInfo", "More information"),
+		"aria-label": t("common.more-info", "More information"),
 		className: "ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: "info",

package/dist/ui/info-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"common.moreInfo\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,mBAAmB,kBAAkB;EACnD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"common.more-info\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,oBAAoB,kBAAkB;EACpD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

package/dist/ui/input.d.ts

@@ -1,3 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import { controlSurface } from './control.js';
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function Input({ className, type, density, ...props }: React.ComponentProps<"input"> & VariantProps<typeof controlSurface>): React.JSX.Element;
 export { Input };

package/dist/ui/input.js

@@ -3,11 +3,11 @@ import { controlSurface } from "./control.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/input.tsx
-function Input({ className, type, ...props }) {
+function Input({ className, type, density, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
-		className: cn(controlSurface(), "file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium", className),
+		className: cn(controlSurface({ density }), "file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium", className),
 		...props
 	});
 }

package/dist/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../resources/js/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        controlSurface(),\n        \"file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,eAAe,GACf,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"input.js","names":[],"sources":["../../resources/js/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { VariantProps } from \"class-variance-authority\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Input({\n  className,\n  type,\n  density,\n  ...props\n}: React.ComponentProps<\"input\"> & VariantProps<typeof controlSurface>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        controlSurface({ density }),\n        \"file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;;AAMA,SAAS,MAAM,EACb,WACA,MACA,SACA,GAAG,SACmE;CACtE,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,eAAe,EAAE,QAAQ,CAAC,GAC1B,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/modal.js

@@ -1,6 +1,6 @@
 import { LATTICE_EVENT } from "../events/event-names.js";
 import { Dialog, DialogContent, DialogHeader } from "./dialog.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/modal.tsx
 function matchesModal(event, modal) {
@@ -12,12 +12,17 @@ var ModalComponent = ({ children, node }) => {
 	const description = node.props.description;
 	const closeLabel = node.props.closeLabel;
 	const [isOpen, setIsOpen] = useState(node.props.open === true);
+	const openerRef = useRef(null);
+	const wasOpenRef = useRef(isOpen);
 	useEffect(() => {
 		if (node.props.open === true) setIsOpen(true);
 	}, [node.props.open]);
 	useEffect(() => {
 		function open(event) {
-			if (node.id && matchesModal(event, node.id)) setIsOpen(true);
+			if (node.id && matchesModal(event, node.id)) {
+				openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				setIsOpen(true);
+			}
 		}
 		function close(event) {
 			if (!node.id || matchesModal(event, node.id)) setIsOpen(false);
@@ -29,6 +34,13 @@ var ModalComponent = ({ children, node }) => {
 			window.removeEventListener(LATTICE_EVENT.closeModal, close);
 		};
 	}, [node.id]);
+	useEffect(() => {
+		if (wasOpenRef.current && !isOpen) {
+			const opener = openerRef.current;
+			if (opener) requestAnimationFrame(() => opener.focus());
+		}
+		wasOpenRef.current = isOpen;
+	}, [isOpen]);
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
 		onOpenChange: setIsOpen,

package/dist/ui/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAK7D,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACxC,UAAU,IAAI;EAElB;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAEZ,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}
+{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n  const openerRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(isOpen);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        openerRef.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null;\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  // Radix only restores focus to a `DialogTrigger`-registered element, and this\n  // modal is opened imperatively rather than through one. Own the restore\n  // ourselves instead: whatever had focus when the modal opened gets it back\n  // once the closing dialog has finished unmounting.\n  useEffect(() => {\n    if (wasOpenRef.current && !isOpen) {\n      const opener = openerRef.current;\n\n      if (opener) {\n        requestAnimationFrame(() => opener.focus());\n      }\n    }\n\n    wasOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAC7D,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,aAAa,OAAO,MAAM;CAKhC,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GAAG;IAC3C,UAAU,UACR,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;IAC3E,UAAU,IAAI;GAChB;EACF;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAMZ,gBAAgB;EACd,IAAI,WAAW,WAAW,CAAC,QAAQ;GACjC,MAAM,SAAS,UAAU;GAEzB,IAAI,QACF,4BAA4B,OAAO,MAAM,CAAC;EAE9C;EAEA,WAAW,UAAU;CACvB,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}

package/dist/ui/native-select.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { controlSurface } from './control.js';
+import * as React from "react";
+/**
+ * A native `<select>` wearing the shared control chrome — for short, fixed
+ * option lists (filter operators, boolean/ternary states) where the full
+ * Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.
+ */
+declare function NativeSelect({ className, density, children, ref, ...props }: React.ComponentProps<"select"> & VariantProps<typeof controlSurface>): React.JSX.Element;
+export { NativeSelect };

package/dist/ui/native-select.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { controlSurface } from "./control.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/ui/native-select.tsx
+/**
+* A native `<select>` wearing the shared control chrome — for short, fixed
+* option lists (filter operators, boolean/ternary states) where the full
+* Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.
+*/
+function NativeSelect({ className, density, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("select", {
+		ref,
+		"data-slot": "native-select",
+		className: cn(controlSurface({ density }), "cursor-pointer", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { NativeSelect };
+
+//# sourceMappingURL=native-select.js.map

package/dist/ui/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../resources/js/ui/native-select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { VariantProps } from \"class-variance-authority\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A native `<select>` wearing the shared control chrome — for short, fixed\n * option lists (filter operators, boolean/ternary states) where the full\n * Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.\n */\nfunction NativeSelect({\n  className,\n  density,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<\"select\"> & VariantProps<typeof controlSurface>) {\n  return (\n    <select\n      ref={ref}\n      data-slot=\"native-select\"\n      className={cn(controlSurface({ density }), \"cursor-pointer\", className)}\n      {...props}\n    >\n      {children}\n    </select>\n  );\n}\n\nexport { NativeSelect };\n"],"mappings":";;;;;;;;;;AAWA,SAAS,aAAa,EACpB,WACA,SACA,UACA,KACA,GAAG,SACoE;CACvE,OACE,oBAAC,UAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,kBAAkB,SAAS;EACtE,GAAI;EAEH;CACK,CAAA;AAEZ"}

package/dist/ui/plugin.js

@@ -1,5 +1,6 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import ButtonComponent from "./button.js";
+import AvatarComponent from "./avatar.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
 import ChartComponent from "./chart.js";
@@ -9,18 +10,23 @@ import FragmentComponent from "./fragment.js";
 import GridComponent from "./grid.js";
 import HeadingComponent from "./heading.js";
 import IconComponent from "./icon.js";
+import ImageComponent from "./image.js";
 import LinkComponent from "./link.js";
 import ModalComponent from "./modal.js";
+import ProgressComponent from "./progress.js";
 import RawBlockComponent from "./raw-block.js";
 import SectionComponent from "./section.js";
 import SegmentedControlComponent from "./segmented-control.js";
+import SeparatorComponent from "./separator.js";
 import StackComponent from "./stack.js";
 import TabComponent, { TabsComponent } from "./tabs.js";
 import TextComponent from "./text.js";
 import TooltipComponent from "./tooltip.js";
+import TreeComponent from "./tree.js";
 //#region resources/js/ui/plugin.ts
 var uiComponents = createPlugin({
 	components: {
+		avatar: eagerComponent(AvatarComponent),
 		badge: eagerComponent(BadgeComponent),
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
@@ -31,16 +37,20 @@ var uiComponents = createPlugin({
 		grid: eagerComponent(GridComponent),
 		heading: eagerComponent(HeadingComponent),
 		icon: eagerComponent(IconComponent),
+		image: eagerComponent(ImageComponent),
 		link: eagerComponent(LinkComponent),
 		modal: eagerComponent(ModalComponent),
+		progress: eagerComponent(ProgressComponent),
 		"raw-block": eagerComponent(RawBlockComponent),
 		section: eagerComponent(SectionComponent),
 		"segmented-control": eagerComponent(SegmentedControlComponent),
+		separator: eagerComponent(SeparatorComponent),
 		stack: eagerComponent(StackComponent),
 		tab: eagerComponent(TabComponent),
 		tabs: eagerComponent(TabsComponent),
 		text: eagerComponent(TextComponent),
-		tooltip: eagerComponent(TooltipComponent)
+		tooltip: eagerComponent(TooltipComponent),
+		tree: eagerComponent(TreeComponent)
 	},
 	name: "lattice/ui"
 });

package/dist/ui/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/ui/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { ActionNodeType, FormNodeType, NodeType } from \"@lattice-php/lattice/types/generated\";\nimport type { ChatComponentType } from \"@lattice-php/lattice/chat/plugin\";\nimport type { LayoutComponentType } from \"@lattice-php/lattice/layout/plugin\";\nimport type { NotificationsComponentType } from \"@lattice-php/lattice/notifications/plugin\";\nimport type { RemoteComponentType } from \"@lattice-php/lattice/remote/plugin\";\nimport type { TableComponentType } from \"@lattice-php/lattice/table/plugin\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\ntype NonUiComponentType =\n  | ActionNodeType\n  | ChatComponentType\n  | FormNodeType\n  | LayoutComponentType\n  | NotificationsComponentType\n  | RemoteComponentType\n  | TableComponentType;\n\ntype UiComponentType = Exclude<NodeType, NonUiComponentType>;\n\nexport const uiComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n  } satisfies ComponentRegistryFor<UiComponentType>,\n  name: \"lattice/ui\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/ui/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { ActionNodeType, FormNodeType, NodeType } from \"@lattice-php/lattice/types/generated\";\nimport type { ChatComponentType } from \"@lattice-php/lattice/chat/plugin\";\nimport type { LayoutComponentType } from \"@lattice-php/lattice/layout/plugin\";\nimport type { NotificationsComponentType } from \"@lattice-php/lattice/notifications/plugin\";\nimport type { RemoteComponentType } from \"@lattice-php/lattice/remote/plugin\";\nimport type { TableComponentType } from \"@lattice-php/lattice/table/plugin\";\nimport AvatarComponent from \"./avatar\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport ImageComponent from \"./image\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport ProgressComponent from \"./progress\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport SeparatorComponent from \"./separator\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\nimport TreeComponent from \"./tree\";\n\ntype NonUiComponentType =\n  | ActionNodeType\n  | ChatComponentType\n  | FormNodeType\n  | LayoutComponentType\n  | NotificationsComponentType\n  | RemoteComponentType\n  | TableComponentType;\n\ntype UiComponentType = Exclude<NodeType, NonUiComponentType>;\n\nexport const uiComponents = createPlugin({\n  components: {\n    avatar: eagerComponent(AvatarComponent),\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    image: eagerComponent(ImageComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    progress: eagerComponent(ProgressComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    separator: eagerComponent(SeparatorComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n    tooltip: eagerComponent(TooltipComponent),\n    tree: eagerComponent(TreeComponent),\n  } satisfies ComponentRegistryFor<UiComponentType>,\n  name: \"lattice/ui\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,QAAQ,eAAe,eAAe;EACtC,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,UAAU,eAAe,iBAAiB;EAC1C,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,WAAW,eAAe,kBAAkB;EAC5C,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}

package/dist/ui/progress.d.ts

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

package/dist/ui/progress.js

@@ -0,0 +1,114 @@
+import { cn } from "../lib/utils.js";
+import { useLocale } from "../i18n/locale.js";
+import { coerceColor, colorValue, namedColor } from "../lib/color.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/ui/progress.tsx
+var barHeights = {
+	xs: "h-1",
+	sm: "h-1.5",
+	md: "h-2.5",
+	lg: "h-3",
+	xl: "h-4",
+	"2xl": "h-5",
+	"3xl": "h-6",
+	"4xl": "h-8"
+};
+var circleDiameters = {
+	xs: 24,
+	sm: 32,
+	md: 40,
+	lg: 48,
+	xl: 64,
+	"2xl": 80,
+	"3xl": 96,
+	"4xl": 128
+};
+var circleReadouts = {
+	xs: "text-[0.5rem]",
+	sm: "text-[0.625rem]",
+	md: "text-xs",
+	lg: "text-sm",
+	xl: "text-base",
+	"2xl": "text-lg",
+	"3xl": "text-xl",
+	"4xl": "text-2xl"
+};
+var ProgressComponent = ({ node }) => {
+	const { value, max, variant, showValue, color, size } = node.props;
+	const { locale } = useLocale();
+	const paint = colorValue(coerceColor(color) ?? namedColor("primary"));
+	const clamped = max > 0 ? Math.min(Math.max(value, 0), max) : 0;
+	const ratio = max > 0 ? clamped / max : 0;
+	const percent = new Intl.NumberFormat(locale, {
+		maximumFractionDigits: 0,
+		style: "percent"
+	}).format(ratio);
+	const aria = {
+		"aria-valuemax": max,
+		"aria-valuemin": 0,
+		"aria-valuenow": clamped,
+		"aria-valuetext": percent,
+		role: "progressbar"
+	};
+	if (variant === "circle") {
+		const diameter = circleDiameters[size];
+		const strokeWidth = Math.max(3, diameter / 10);
+		const radius = (diameter - strokeWidth) / 2;
+		const circumference = 2 * Math.PI * radius;
+		return /* @__PURE__ */ jsxs("div", {
+			...aria,
+			className: "relative inline-flex",
+			"data-lattice-progress": "circle",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				className: "-rotate-90",
+				height: diameter,
+				width: diameter,
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: "text-lt-muted",
+					cx: diameter / 2,
+					cy: diameter / 2,
+					fill: "none",
+					r: radius,
+					stroke: "currentColor",
+					strokeWidth
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: diameter / 2,
+					cy: diameter / 2,
+					fill: "none",
+					r: radius,
+					stroke: "currentColor",
+					strokeDasharray: circumference,
+					strokeDashoffset: circumference * (1 - ratio),
+					strokeLinecap: "round",
+					strokeWidth,
+					style: { color: paint }
+				})]
+			}), showValue && /* @__PURE__ */ jsx("span", {
+				className: cn("absolute inset-0 flex items-center justify-center font-medium text-lt-fg tabular-nums", circleReadouts[size]),
+				children: percent
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-2",
+		"data-lattice-progress": "bar",
+		children: [/* @__PURE__ */ jsx("div", {
+			...aria,
+			className: cn("w-full overflow-hidden rounded-full bg-lt-muted", barHeights[size]),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full",
+				style: {
+					background: paint,
+					width: `${ratio * 100}%`
+				}
+			})
+		}), showValue && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 text-lt-muted-fg text-sm tabular-nums",
+			children: percent
+		})]
+	});
+};
+//#endregion
+export { ProgressComponent as default };
+
+//# sourceMappingURL=progress.js.map

package/dist/ui/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../resources/js/ui/progress.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { coerceColor, colorValue, namedColor } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Size } from \"@lattice-php/lattice/types/generated\";\n\nconst barHeights: Record<Size, string> = {\n  xs: \"h-1\",\n  sm: \"h-1.5\",\n  md: \"h-2.5\",\n  lg: \"h-3\",\n  xl: \"h-4\",\n  \"2xl\": \"h-5\",\n  \"3xl\": \"h-6\",\n  \"4xl\": \"h-8\",\n};\n\nconst circleDiameters: Record<Size, number> = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 48,\n  xl: 64,\n  \"2xl\": 80,\n  \"3xl\": 96,\n  \"4xl\": 128,\n};\n\nconst circleReadouts: Record<Size, string> = {\n  xs: \"text-[0.5rem]\",\n  sm: \"text-[0.625rem]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n  \"2xl\": \"text-lg\",\n  \"3xl\": \"text-xl\",\n  \"4xl\": \"text-2xl\",\n};\n\nconst ProgressComponent: RendererComponent<\"progress\"> = ({ node }) => {\n  const { value, max, variant, showValue, color, size } = node.props;\n  const { locale } = useLocale();\n  const paint = colorValue(coerceColor(color) ?? namedColor(\"primary\"));\n\n  const clamped = max > 0 ? Math.min(Math.max(value, 0), max) : 0;\n  const ratio = max > 0 ? clamped / max : 0;\n  const percent = new Intl.NumberFormat(locale, {\n    maximumFractionDigits: 0,\n    style: \"percent\",\n  }).format(ratio);\n\n  const aria = {\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": 0,\n    \"aria-valuenow\": clamped,\n    \"aria-valuetext\": percent,\n    role: \"progressbar\",\n  } as const;\n\n  if (variant === \"circle\") {\n    const diameter = circleDiameters[size];\n    const strokeWidth = Math.max(3, diameter / 10);\n    const radius = (diameter - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    return (\n      <div {...aria} className=\"relative inline-flex\" data-lattice-progress=\"circle\">\n        <svg className=\"-rotate-90\" height={diameter} width={diameter}>\n          <circle\n            className=\"text-lt-muted\"\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeWidth={strokeWidth}\n          />\n          <circle\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - ratio)}\n            strokeLinecap=\"round\"\n            strokeWidth={strokeWidth}\n            style={{ color: paint }}\n          />\n        </svg>\n        {showValue && (\n          <span\n            className={cn(\n              \"absolute inset-0 flex items-center justify-center font-medium text-lt-fg tabular-nums\",\n              circleReadouts[size],\n            )}\n          >\n            {percent}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center gap-2\" data-lattice-progress=\"bar\">\n      <div\n        {...aria}\n        className={cn(\"w-full overflow-hidden rounded-full bg-lt-muted\", barHeights[size])}\n      >\n        <div\n          className=\"h-full rounded-full\"\n          style={{ background: paint, width: `${ratio * 100}%` }}\n        />\n      </div>\n      {showValue && (\n        <span className=\"shrink-0 text-lt-muted-fg text-sm tabular-nums\">{percent}</span>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressComponent;\n"],"mappings":";;;;;AAMA,IAAM,aAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,kBAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,EAAE,OAAO,KAAK,SAAS,WAAW,OAAO,SAAS,KAAK;CAC7D,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,WAAW,YAAY,KAAK,KAAK,WAAW,SAAS,CAAC;CAEpE,MAAM,UAAU,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG,IAAI;CAC9D,MAAM,QAAQ,MAAM,IAAI,UAAU,MAAM;CACxC,MAAM,UAAU,IAAI,KAAK,aAAa,QAAQ;EAC5C,uBAAuB;EACvB,OAAO;CACT,CAAC,EAAE,OAAO,KAAK;CAEf,MAAM,OAAO;EACX,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,MAAM;CACR;CAEA,IAAI,YAAY,UAAU;EACxB,MAAM,WAAW,gBAAgB;EACjC,MAAM,cAAc,KAAK,IAAI,GAAG,WAAW,EAAE;EAC7C,MAAM,UAAU,WAAW,eAAe;EAC1C,MAAM,gBAAgB,IAAI,KAAK,KAAK;EAEpC,OACE,qBAAC,OAAD;GAAK,GAAI;GAAM,WAAU;GAAuB,yBAAsB;aAAtE,CACE,qBAAC,OAAD;IAAK,WAAU;IAAa,QAAQ;IAAU,OAAO;cAArD,CACE,oBAAC,UAAD;KACE,WAAU;KACV,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACM;IACd,CAAA,GACD,oBAAC,UAAD;KACE,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACP,iBAAiB;KACjB,kBAAkB,iBAAiB,IAAI;KACvC,eAAc;KACD;KACb,OAAO,EAAE,OAAO,MAAM;IACvB,CAAA,CACE;OACJ,aACC,oBAAC,QAAD;IACE,WAAW,GACT,yFACA,eAAe,KACjB;cAEC;GACG,CAAA,CAEL;;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAiC,yBAAsB;YAAtE,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GAAG,mDAAmD,WAAW,KAAK;aAEjF,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,YAAY;KAAO,OAAO,GAAG,QAAQ,IAAI;IAAG;GACtD,CAAA;EACE,CAAA,GACJ,aACC,oBAAC,QAAD;GAAM,WAAU;aAAkD;EAAc,CAAA,CAE/E;;AAET"}

package/dist/ui/separator.d.ts

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

package/dist/ui/separator.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/ui/separator.tsx
+var SeparatorComponent = ({ node }) => {
+	const horizontal = node.props.orientation === "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": node.props.orientation,
+		className: cn("shrink-0 bg-lt-border", horizontal ? "h-px w-full" : "h-full w-px self-stretch")
+	});
+};
+//#endregion
+export { SeparatorComponent as default };
+
+//# sourceMappingURL=separator.js.map

package/dist/ui/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../resources/js/ui/separator.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst SeparatorComponent: RendererComponent<\"separator\"> = ({ node }) => {\n  const horizontal = node.props.orientation === \"horizontal\";\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={node.props.orientation}\n      className={cn(\n        \"shrink-0 bg-lt-border\",\n        horizontal ? \"h-px w-full\" : \"h-full w-px self-stretch\",\n      )}\n    />\n  );\n};\n\nexport default SeparatorComponent;\n"],"mappings":";;;AAGA,IAAM,sBAAsD,EAAE,WAAW;CACvE,MAAM,aAAa,KAAK,MAAM,gBAAgB;CAE9C,OACE,oBAAC,OAAD;EACE,MAAK;EACL,oBAAkB,KAAK,MAAM;EAC7B,WAAW,GACT,yBACA,aAAa,gBAAgB,0BAC/B;CACD,CAAA;AAEL"}

package/dist/ui/text.js

@@ -1,20 +1,12 @@
 import { cn } from "../lib/utils.js";
 import { CopyableText } from "./copyable-text.js";
+import { coerceColor, colorValue, namedColor } from "../lib/color.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/text.tsx
 var textAlignments = {
 	center: "text-center",
 	left: "text-left"
 };
-var textColors = {
-	default: "text-lt-fg",
-	muted: "text-lt-muted-fg",
-	primary: "text-lt-primary",
-	success: "text-lt-success",
-	info: "text-lt-info",
-	warning: "text-lt-warning",
-	danger: "text-lt-danger"
-};
 var textSizes = {
 	xs: "text-xs leading-5",
 	sm: "text-sm leading-6",
@@ -26,8 +18,11 @@ var textSizes = {
 	"4xl": "text-4xl leading-none"
 };
 var TextComponent = ({ node }) => {
+	const align = node.props.align ?? "left";
+	const color = colorValue(coerceColor(node.props.color) ?? namedColor("muted"));
 	const text = /* @__PURE__ */ jsx("p", {
-		className: cn("m-0", "max-w-2xl", textAlignments[node.props.align ?? "left"] ?? textAlignments.left, textColors[node.props.color ?? "muted"], textSizes[node.props.size]),
+		className: cn("m-0", "max-w-2xl", textAlignments[align] ?? textAlignments.left, textSizes[node.props.size]),
+		style: { color },
 		children: node.props.text
 	});
 	if (!node.props.copyable) return text;

package/dist/ui/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../resources/js/ui/text.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\nimport { CopyableText } from \"./copyable-text\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst textColors: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst textSizes: Record<Size, string> = {\n  xs: \"text-xs leading-5\",\n  sm: \"text-sm leading-6\",\n  md: \"text-base leading-7\",\n  lg: \"text-lg leading-8\",\n  xl: \"text-xl leading-8\",\n  \"2xl\": \"text-2xl leading-9\",\n  \"3xl\": \"text-3xl leading-10\",\n  \"4xl\": \"text-4xl leading-none\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n\n  const text = (\n    <p\n      className={cn(\n        \"m-0\",\n        \"max-w-2xl\",\n        textAlignments[align] ?? textAlignments.left,\n        textColors[node.props.color ?? \"muted\"],\n        textSizes[node.props.size],\n      )}\n    >\n      {node.props.text}\n    </p>\n  );\n\n  if (!node.props.copyable) {\n    return text;\n  }\n\n  return (\n    <CopyableText value={node.props.text} label={node.props.text}>\n      {text}\n    </CopyableText>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;;AAKA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,MAAM,OACJ,oBAAC,KAAD;EACE,WAAW,GACT,OACA,aACA,eAPQ,KAAK,MAAM,SAAS,WAOH,eAAe,MACxC,WAAW,KAAK,MAAM,SAAS,UAC/B,UAAU,KAAK,MAAM,KACvB;YAEC,KAAK,MAAM;CACX,CAAA;CAGL,IAAI,CAAC,KAAK,MAAM,UACd,OAAO;CAGT,OACE,oBAAC,cAAD;EAAc,OAAO,KAAK,MAAM;EAAM,OAAO,KAAK,MAAM;YACrD;CACW,CAAA;AAElB"}
+{"version":3,"file":"text.js","names":[],"sources":["../../resources/js/ui/text.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { coerceColor, colorValue, namedColor } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Size } from \"@lattice-php/lattice/types/generated\";\nimport { CopyableText } from \"./copyable-text\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst textSizes: Record<Size, string> = {\n  xs: \"text-xs leading-5\",\n  sm: \"text-sm leading-6\",\n  md: \"text-base leading-7\",\n  lg: \"text-lg leading-8\",\n  xl: \"text-xl leading-8\",\n  \"2xl\": \"text-2xl leading-9\",\n  \"3xl\": \"text-3xl leading-10\",\n  \"4xl\": \"text-4xl leading-none\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n  const color = colorValue(coerceColor(node.props.color) ?? namedColor(\"muted\"));\n\n  const text = (\n    <p\n      className={cn(\n        \"m-0\",\n        \"max-w-2xl\",\n        textAlignments[align] ?? textAlignments.left,\n        textSizes[node.props.size],\n      )}\n      style={{ color }}\n    >\n      {node.props.text}\n    </p>\n  );\n\n  if (!node.props.copyable) {\n    return text;\n  }\n\n  return (\n    <CopyableText value={node.props.text} label={node.props.text}>\n      {text}\n    </CopyableText>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;;;AAMA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,QAAQ,WAAW,YAAY,KAAK,MAAM,KAAK,KAAK,WAAW,OAAO,CAAC;CAE7E,MAAM,OACJ,oBAAC,KAAD;EACE,WAAW,GACT,OACA,aACA,eAAe,UAAU,eAAe,MACxC,UAAU,KAAK,MAAM,KACvB;EACA,OAAO,EAAE,MAAM;YAEd,KAAK,MAAM;CACX,CAAA;CAGL,IAAI,CAAC,KAAK,MAAM,UACd,OAAO;CAGT,OACE,oBAAC,cAAD;EAAc,OAAO,KAAK,MAAM;EAAM,OAAO,KAAK,MAAM;YACrD;CACW,CAAA;AAElB"}

package/dist/ui/tree-context.d.ts

@@ -0,0 +1,33 @@
+import { RefObject } from 'react';
+export type TreeItemRegistration = {
+    id: string;
+    label: string;
+    orderPath: string;
+    parentPath: string | null;
+    path: string;
+    ref: RefObject<HTMLLIElement | null>;
+};
+export type TreeFocusDirection = "first" | "firstChild" | "last" | "next" | "parent" | "prev";
+export type TreeContextValue = {
+    activate: (id: string) => void;
+    activeId: string | null;
+    expanded: Set<string>;
+    focus: (id: string) => void;
+    focusedId: string | null;
+    moveFocus: (fromId: string, direction: TreeFocusDirection) => void;
+    register: (entry: TreeItemRegistration) => void;
+    toggle: (id: string) => void;
+    typeAhead: (fromId: string, character: string) => void;
+    unregister: (path: string) => void;
+};
+export declare const TreeContext: import('react').Context<TreeContextValue>;
+export declare function useTreeContext(): TreeContextValue;
+export declare function useTreeState({ activeId: initialActiveId, defaultExpanded, nodes, rememberState, storageKey, }: {
+    activeId: string | null;
+    defaultExpanded: string[];
+    nodes: Array<{
+        id: string;
+    }>;
+    rememberState: boolean;
+    storageKey: string;
+}): TreeContextValue;