@lattice-php/lattice 0.18.0 → 0.20.0

package/dist/ui/color-picker.js

@@ -0,0 +1,59 @@
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HexColorPicker } from "react-colorful";
+//#region resources/js/ui/color-picker.tsx
+function normalizeHex(input) {
+	const raw = input.trim().replace(/^#/, "").toLowerCase();
+	if (/^[0-9a-f]{6}$/.test(raw)) return `#${raw}`;
+	if (/^[0-9a-f]{3}$/.test(raw)) return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;
+	return null;
+}
+function ColorPicker({ value, onChange, palette, hexLabel = "Hex color", paletteLabel = "Color palette" }) {
+	const [draft, setDraft] = useState(null);
+	const color = normalizeHex(value) ?? "#6b7280";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-56 flex-col gap-3",
+		"data-slot": "color-picker",
+		children: [
+			/* @__PURE__ */ jsx(HexColorPicker, {
+				className: "!w-full",
+				color,
+				onChange
+			}),
+			palette.length > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-label": paletteLabel,
+				className: "flex flex-wrap gap-1.5",
+				role: "listbox",
+				children: palette.map((swatch) => {
+					const normalized = normalizeHex(swatch) ?? swatch;
+					return /* @__PURE__ */ jsx("button", {
+						"aria-label": normalized,
+						"aria-selected": normalized === color,
+						className: cn("size-6 shrink-0 rounded-full border border-lt-border", normalized === color && "ring-2 ring-lt-ring ring-offset-1"),
+						onClick: () => onChange(normalized),
+						role: "option",
+						style: { background: swatch },
+						type: "button"
+					}, swatch);
+				})
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				"aria-label": hexLabel,
+				onBlur: () => setDraft(null),
+				onChange: (event) => {
+					const text = event.target.value;
+					const hex = normalizeHex(text);
+					setDraft(text);
+					if (hex !== null) onChange(hex);
+				},
+				value: draft ?? color
+			})
+		]
+	});
+}
+//#endregion
+export { ColorPicker, normalizeHex };
+
+//# sourceMappingURL=color-picker.js.map

package/dist/ui/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","names":[],"sources":["../../resources/js/ui/color-picker.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HexColorPicker } from \"react-colorful\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Input } from \"./input\";\n\nexport function normalizeHex(input: string): string | null {\n  const raw = input.trim().replace(/^#/, \"\").toLowerCase();\n\n  if (/^[0-9a-f]{6}$/.test(raw)) {\n    return `#${raw}`;\n  }\n\n  if (/^[0-9a-f]{3}$/.test(raw)) {\n    return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;\n  }\n\n  return null;\n}\n\nexport function ColorPicker({\n  value,\n  onChange,\n  palette,\n  hexLabel = \"Hex color\",\n  paletteLabel = \"Color palette\",\n}: {\n  value: string;\n  onChange: (hex: string) => void;\n  palette: string[];\n  hexLabel?: string;\n  paletteLabel?: string;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const color = normalizeHex(value) ?? \"#6b7280\";\n\n  return (\n    <div className=\"flex w-56 flex-col gap-3\" data-slot=\"color-picker\">\n      <HexColorPicker className=\"!w-full\" color={color} onChange={onChange} />\n      {palette.length > 0 && (\n        <div aria-label={paletteLabel} className=\"flex flex-wrap gap-1.5\" role=\"listbox\">\n          {palette.map((swatch) => {\n            const normalized = normalizeHex(swatch) ?? swatch;\n\n            return (\n              <button\n                aria-label={normalized}\n                aria-selected={normalized === color}\n                className={cn(\n                  \"size-6 shrink-0 rounded-full border border-lt-border\",\n                  normalized === color && \"ring-2 ring-lt-ring ring-offset-1\",\n                )}\n                key={swatch}\n                onClick={() => onChange(normalized)}\n                role=\"option\"\n                style={{ background: swatch }}\n                type=\"button\"\n              />\n            );\n          })}\n        </div>\n      )}\n      <Input\n        aria-label={hexLabel}\n        onBlur={() => setDraft(null)}\n        onChange={(event) => {\n          const text = event.target.value;\n          const hex = normalizeHex(text);\n          setDraft(text);\n\n          if (hex !== null) {\n            onChange(hex);\n          }\n        }}\n        value={draft ?? color}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,aAAa,OAA8B;CACzD,MAAM,MAAM,MAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,EAAE,YAAY;CAEvD,IAAI,gBAAgB,KAAK,GAAG,GAC1B,OAAO,IAAI;CAGb,IAAI,gBAAgB,KAAK,GAAG,GAC1B,OAAO,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;CAG9D,OAAO;AACT;AAEA,SAAgB,YAAY,EAC1B,OACA,UACA,SACA,WAAW,aACX,eAAe,mBAOd;CACD,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,QAAQ,aAAa,KAAK,KAAK;CAErC,OACE,qBAAC,OAAD;EAAK,WAAU;EAA2B,aAAU;YAApD;GACE,oBAAC,gBAAD;IAAgB,WAAU;IAAiB;IAAiB;GAAW,CAAA;GACtE,QAAQ,SAAS,KAChB,oBAAC,OAAD;IAAK,cAAY;IAAc,WAAU;IAAyB,MAAK;cACpE,QAAQ,KAAK,WAAW;KACvB,MAAM,aAAa,aAAa,MAAM,KAAK;KAE3C,OACE,oBAAC,UAAD;MACE,cAAY;MACZ,iBAAe,eAAe;MAC9B,WAAW,GACT,wDACA,eAAe,SAAS,mCAC1B;MAEA,eAAe,SAAS,UAAU;MAClC,MAAK;MACL,OAAO,EAAE,YAAY,OAAO;MAC5B,MAAK;KACN,GALM,MAKN;IAEL,CAAC;GACE,CAAA;GAEP,oBAAC,OAAD;IACE,cAAY;IACZ,cAAc,SAAS,IAAI;IAC3B,WAAW,UAAU;KACnB,MAAM,OAAO,MAAM,OAAO;KAC1B,MAAM,MAAM,aAAa,IAAI;KAC7B,SAAS,IAAI;KAEb,IAAI,QAAQ,MACV,SAAS,GAAG;IAEhB;IACA,OAAO,SAAS;GACjB,CAAA;EACE;;AAET"}

package/dist/ui/combobox.d.ts

@@ -7,18 +7,27 @@ import * as React from "react";
  * consumer also owns option fetching. Pass `onSearch` for remote search (the
  * combobox debounces the query and renders `options` as given); omit it to
  * filter the provided `options` locally by label. The combobox closes itself
- * after a single-select.
+ * after a single-select. Pass `renderOption` to render rich option rows; the
+ * option's label stays the accessible name. `onSelect` toggles selection
+ * (used by dropdown-row clicks); tag-entry commits (Enter/comma/paste) that
+ * match an existing option call `onCommit` instead, falling back to
+ * `onSelect` when it is not provided, so consumers can make tag entry
+ * additive instead of toggling.
  */
-declare function Combobox({ contentClassName, emptyLabel, loading, multiple, onSearch, onSelect, open, onOpenChange, options, searchLabel, searchPlaceholder, selected, showSearch, testId, trigger, triggerClassName, triggerProps, }: {
+declare function Combobox({ contentClassName, creatable, emptyLabel, loading, multiple, onCommit, onCreate, onSearch, onSelect, open, onOpenChange, options, renderOption, searchLabel, searchPlaceholder, selected, showSearch, testId, trigger, triggerClassName, triggerProps, }: {
     contentClassName?: string;
+    creatable?: boolean;
     emptyLabel?: string;
     loading?: boolean;
     multiple?: boolean;
+    onCommit?: (value: string) => void;
+    onCreate?: (label: string) => void;
     onSearch?: (query: string) => void;
     onSelect: (value: string) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     options: Option[];
+    renderOption?: (option: Option) => React.ReactNode;
     searchLabel?: string;
     searchPlaceholder?: string;
     selected: string[];

package/dist/ui/combobox.js

@@ -13,11 +13,27 @@ var SEARCH_DEBOUNCE_MS = 250;
 * consumer also owns option fetching. Pass `onSearch` for remote search (the
 * combobox debounces the query and renders `options` as given); omit it to
 * filter the provided `options` locally by label. The combobox closes itself
-* after a single-select.
+* after a single-select. Pass `renderOption` to render rich option rows; the
+* option's label stays the accessible name. `onSelect` toggles selection
+* (used by dropdown-row clicks); tag-entry commits (Enter/comma/paste) that
+* match an existing option call `onCommit` instead, falling back to
+* `onSelect` when it is not provided, so consumers can make tag entry
+* additive instead of toggling.
 */
-function Combobox({ contentClassName, emptyLabel, loading = false, multiple = false, onSearch, onSelect, open, onOpenChange, options, searchLabel, searchPlaceholder, selected, showSearch = true, testId, trigger, triggerClassName, triggerProps }) {
+function Combobox({ contentClassName, creatable = false, emptyLabel, loading = false, multiple = false, onCommit, onCreate, onSearch, onSelect, open, onOpenChange, options, renderOption, searchLabel, searchPlaceholder, selected, showSearch = true, testId, trigger, triggerClassName, triggerProps }) {
 	const { t } = useT("lattice");
 	const [query, setQuery] = useState("");
+	function commitCreate(raw) {
+		const tokens = raw.split(",").map((token) => token.trim()).filter(Boolean);
+		for (const token of tokens) {
+			const match = options.find((option) => option.label.toLowerCase() === token.toLowerCase());
+			if (match) (onCommit ?? onSelect)(match.value);
+			else onCreate?.(token);
+		}
+		if (multiple) setQuery("");
+		else close();
+	}
+	const exactMatch = options.some((option) => option.label.toLowerCase() === query.trim().toLowerCase());
 	useEffect(() => {
 		if (!onSearch || !open) return;
 		const timer = window.setTimeout(() => onSearch(query), SEARCH_DEBOUNCE_MS);
@@ -53,11 +69,24 @@ function Combobox({ contentClassName, emptyLabel, loading = false, multiple = fa
 			children: [showSearch && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 border-b border-lt-border px-3 py-2",
 				children: [/* @__PURE__ */ jsx("input", {
-					"aria-label": searchLabel ?? t("form.searchOptions", "Search options"),
+					"aria-label": searchLabel ?? t("form.search-options", "Search options"),
 					"data-slot": "combobox-search",
 					"data-test": testId ? `${testId}-search` : void 0,
 					className: "w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg",
-					onChange: (event) => setQuery(event.target.value),
+					onChange: (event) => {
+						const next = event.target.value;
+						if (creatable && next.includes(",")) {
+							commitCreate(next);
+							return;
+						}
+						setQuery(next);
+					},
+					onKeyDown: (event) => {
+						if (creatable && event.key === "Enter" && query.trim() !== "") {
+							event.preventDefault();
+							commitCreate(query);
+						}
+					},
 					placeholder: searchPlaceholder,
 					value: query
 				}), loading && /* @__PURE__ */ jsx(Icon, {
@@ -65,15 +94,26 @@ function Combobox({ contentClassName, emptyLabel, loading = false, multiple = fa
 					"aria-hidden": "true",
 					className: "size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg"
 				})]
-			}), /* @__PURE__ */ jsx("div", {
+			}), /* @__PURE__ */ jsxs("div", {
 				className: "max-h-60 overflow-y-auto p-1",
 				role: "listbox",
-				children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
+				children: [creatable && query.trim() !== "" && !exactMatch && /* @__PURE__ */ jsxs("button", {
+					className: "flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg",
+					"data-test": testId ? `${testId}-create` : void 0,
+					onClick: () => commitCreate(query),
+					type: "button",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "plus",
+						"aria-hidden": "true",
+						className: "size-lt-icon-md shrink-0"
+					}), t("form.create-option", "Create \"{{label}}\"", { label: query.trim() })]
+				}), visibleOptions.length === 0 && !(creatable && query.trim() !== "" && !exactMatch) ? /* @__PURE__ */ jsx("p", {
 					className: "px-3 py-2 text-sm text-lt-muted-fg",
 					children: emptyLabel
 				}) : visibleOptions.map((option) => {
 					const isSelected = selected.includes(option.value);
 					return /* @__PURE__ */ jsxs("button", {
+						"aria-label": renderOption ? option.label : void 0,
 						"aria-selected": isSelected,
 						className: cn("flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg", isSelected && "bg-lt-accent/60"),
 						"data-slot": "combobox-option",
@@ -82,13 +122,16 @@ function Combobox({ contentClassName, emptyLabel, loading = false, multiple = fa
 						onClick: () => choose(option.value),
 						role: "option",
 						type: "button",
-						children: [option.label, isSelected && /* @__PURE__ */ jsx(Icon, {
+						children: [renderOption ? /* @__PURE__ */ jsx("span", {
+							className: "flex min-w-0 flex-1 items-center gap-2",
+							children: renderOption(option)
+						}) : option.label, isSelected && /* @__PURE__ */ jsx(Icon, {
 							name: "check",
 							"aria-hidden": "true",
 							className: "size-lt-icon-md shrink-0"
 						})]
 					}, option.value);
-				})
+				})]
 			})]
 		})]
 	});

package/dist/ui/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../resources/js/ui/combobox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst SEARCH_DEBOUNCE_MS = 250;\n\n/**\n * A popover select list with an optional search box and single/multi selection.\n *\n * Selection state is controlled by the consumer (`selected` + `onSelect`); the\n * consumer also owns option fetching. Pass `onSearch` for remote search (the\n * combobox debounces the query and renders `options` as given); omit it to\n * filter the provided `options` locally by label. The combobox closes itself\n * after a single-select.\n */\nfunction Combobox({\n  contentClassName,\n  emptyLabel,\n  loading = false,\n  multiple = false,\n  onSearch,\n  onSelect,\n  open,\n  onOpenChange,\n  options,\n  searchLabel,\n  searchPlaceholder,\n  selected,\n  showSearch = true,\n  testId,\n  trigger,\n  triggerClassName,\n  triggerProps,\n}: {\n  contentClassName?: string;\n  emptyLabel?: string;\n  loading?: boolean;\n  multiple?: boolean;\n  onSearch?: (query: string) => void;\n  onSelect: (value: string) => void;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  options: Option[];\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selected: string[];\n  showSearch?: boolean;\n  testId?: string;\n  trigger: React.ReactNode;\n  triggerClassName?: string;\n  triggerProps?: React.ComponentProps<\"button\"> & { \"data-test\"?: string };\n}) {\n  const { t } = useT(\"lattice\");\n  const [query, setQuery] = useState(\"\");\n\n  useEffect(() => {\n    if (!onSearch || !open) {\n      return;\n    }\n\n    const timer = window.setTimeout(() => onSearch(query), SEARCH_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timer);\n  }, [query, onSearch, open]);\n\n  const visibleOptions = onSearch\n    ? options\n    : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));\n\n  function close(): void {\n    setQuery(\"\");\n    onOpenChange(false);\n  }\n\n  function choose(value: string): void {\n    onSelect(value);\n\n    if (!multiple) {\n      close();\n    }\n  }\n\n  return (\n    <Popover open={open} onOpenChange={(next) => (next ? onOpenChange(true) : close())}>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className={triggerClassName} {...triggerProps}>\n          {trigger}\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        align=\"start\"\n        className={cn(\n          \"w-[var(--radix-popover-trigger-width)] overflow-hidden p-0\",\n          contentClassName,\n        )}\n      >\n        {showSearch && (\n          <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n            <input\n              aria-label={searchLabel ?? t(\"form.searchOptions\", \"Search options\")}\n              data-slot=\"combobox-search\"\n              data-test={testId ? `${testId}-search` : undefined}\n              className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder={searchPlaceholder}\n              value={query}\n            />\n            {loading && (\n              <Icon\n                name=\"loader-2\"\n                aria-hidden=\"true\"\n                className=\"size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg\"\n              />\n            )}\n          </div>\n        )}\n\n        <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n          {visibleOptions.length === 0 ? (\n            <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">{emptyLabel}</p>\n          ) : (\n            visibleOptions.map((option) => {\n              const isSelected = selected.includes(option.value);\n\n              return (\n                <button\n                  aria-selected={isSelected}\n                  className={cn(\n                    \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                    isSelected && \"bg-lt-accent/60\",\n                  )}\n                  data-slot=\"combobox-option\"\n                  data-test={testId ? `${testId}-option-${option.value}` : undefined}\n                  data-value={option.value}\n                  key={option.value}\n                  onClick={() => choose(option.value)}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {option.label}\n                  {isSelected && (\n                    <Icon name=\"check\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n                  )}\n                </button>\n              );\n            })\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox };\n"],"mappings":";;;;;;;AAQA,IAAM,qBAAqB;;;;;;;;;;AAW3B,SAAS,SAAS,EAChB,kBACA,YACA,UAAU,OACV,WAAW,OACX,UACA,UACA,MACA,cACA,SACA,aACA,mBACA,UACA,aAAa,MACb,QACA,SACA,kBACA,gBAmBC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,gBAAgB;EACd,IAAI,CAAC,YAAY,CAAC,MAChB;EAGF,MAAM,QAAQ,OAAO,iBAAiB,SAAS,KAAK,GAAG,kBAAkB;EAEzE,aAAa,OAAO,aAAa,KAAK;CACxC,GAAG;EAAC;EAAO;EAAU;CAAI,CAAC;CAE1B,MAAM,iBAAiB,WACnB,UACA,QAAQ,QAAQ,WAAW,OAAO,MAAM,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC;CAEvF,SAAS,QAAc;EACrB,SAAS,EAAE;EACX,aAAa,KAAK;CACpB;CAEA,SAAS,OAAO,OAAqB;EACnC,SAAS,KAAK;EAEd,IAAI,CAAC,UACH,MAAM;CAEV;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,eAAe,SAAU,OAAO,aAAa,IAAI,IAAI,MAAM;YAAhF,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW;IAAkB,GAAI;cACpD;GACK,CAAA;EACM,CAAA,GAEhB,qBAAC,gBAAD;GACE,OAAM;GACN,WAAW,GACT,8DACA,gBACF;aALF,CAOG,cACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,eAAe,EAAE,sBAAsB,gBAAgB;KACnE,aAAU;KACV,aAAW,SAAS,GAAG,OAAO,WAAW,KAAA;KACzC,WAAU;KACV,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;KAChD,aAAa;KACb,OAAO;IACR,CAAA,GACA,WACC,oBAAC,MAAD;KACE,MAAK;KACL,eAAY;KACZ,WAAU;IACX,CAAA,CAEA;OAGP,oBAAC,OAAD;IAAK,WAAU;IAA+B,MAAK;cAChD,eAAe,WAAW,IACzB,oBAAC,KAAD;KAAG,WAAU;eAAsC;IAAc,CAAA,IAEjE,eAAe,KAAK,WAAW;KAC7B,MAAM,aAAa,SAAS,SAAS,OAAO,KAAK;KAEjD,OACE,qBAAC,UAAD;MACE,iBAAe;MACf,WAAW,GACT,2JACA,cAAc,iBAChB;MACA,aAAU;MACV,aAAW,SAAS,GAAG,OAAO,UAAU,OAAO,UAAU,KAAA;MACzD,cAAY,OAAO;MAEnB,eAAe,OAAO,OAAO,KAAK;MAClC,MAAK;MACL,MAAK;gBAZP,CAcG,OAAO,OACP,cACC,oBAAC,MAAD;OAAM,MAAK;OAAQ,eAAY;OAAO,WAAU;MAA4B,CAAA,CAExE;QATD,OAAO,KASN;IAEZ,CAAC;GAEA,CAAA,CACS;IACT;;AAEb"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../resources/js/ui/combobox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst SEARCH_DEBOUNCE_MS = 250;\n\n/**\n * A popover select list with an optional search box and single/multi selection.\n *\n * Selection state is controlled by the consumer (`selected` + `onSelect`); the\n * consumer also owns option fetching. Pass `onSearch` for remote search (the\n * combobox debounces the query and renders `options` as given); omit it to\n * filter the provided `options` locally by label. The combobox closes itself\n * after a single-select. Pass `renderOption` to render rich option rows; the\n * option's label stays the accessible name. `onSelect` toggles selection\n * (used by dropdown-row clicks); tag-entry commits (Enter/comma/paste) that\n * match an existing option call `onCommit` instead, falling back to\n * `onSelect` when it is not provided, so consumers can make tag entry\n * additive instead of toggling.\n */\nfunction Combobox({\n  contentClassName,\n  creatable = false,\n  emptyLabel,\n  loading = false,\n  multiple = false,\n  onCommit,\n  onCreate,\n  onSearch,\n  onSelect,\n  open,\n  onOpenChange,\n  options,\n  renderOption,\n  searchLabel,\n  searchPlaceholder,\n  selected,\n  showSearch = true,\n  testId,\n  trigger,\n  triggerClassName,\n  triggerProps,\n}: {\n  contentClassName?: string;\n  creatable?: boolean;\n  emptyLabel?: string;\n  loading?: boolean;\n  multiple?: boolean;\n  onCommit?: (value: string) => void;\n  onCreate?: (label: string) => void;\n  onSearch?: (query: string) => void;\n  onSelect: (value: string) => void;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  options: Option[];\n  renderOption?: (option: Option) => React.ReactNode;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selected: string[];\n  showSearch?: boolean;\n  testId?: string;\n  trigger: React.ReactNode;\n  triggerClassName?: string;\n  triggerProps?: React.ComponentProps<\"button\"> & { \"data-test\"?: string };\n}) {\n  const { t } = useT(\"lattice\");\n  const [query, setQuery] = useState(\"\");\n\n  function commitCreate(raw: string): void {\n    const tokens = raw\n      .split(\",\")\n      .map((token) => token.trim())\n      .filter(Boolean);\n\n    for (const token of tokens) {\n      const match = options.find((option) => option.label.toLowerCase() === token.toLowerCase());\n\n      if (match) {\n        (onCommit ?? onSelect)(match.value);\n      } else {\n        onCreate?.(token);\n      }\n    }\n\n    if (multiple) {\n      setQuery(\"\");\n    } else {\n      close();\n    }\n  }\n\n  const exactMatch = options.some(\n    (option) => option.label.toLowerCase() === query.trim().toLowerCase(),\n  );\n\n  useEffect(() => {\n    if (!onSearch || !open) {\n      return;\n    }\n\n    const timer = window.setTimeout(() => onSearch(query), SEARCH_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timer);\n  }, [query, onSearch, open]);\n\n  const visibleOptions = onSearch\n    ? options\n    : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));\n\n  function close(): void {\n    setQuery(\"\");\n    onOpenChange(false);\n  }\n\n  function choose(value: string): void {\n    onSelect(value);\n\n    if (!multiple) {\n      close();\n    }\n  }\n\n  return (\n    <Popover open={open} onOpenChange={(next) => (next ? onOpenChange(true) : close())}>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className={triggerClassName} {...triggerProps}>\n          {trigger}\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        align=\"start\"\n        className={cn(\n          \"w-[var(--radix-popover-trigger-width)] overflow-hidden p-0\",\n          contentClassName,\n        )}\n      >\n        {showSearch && (\n          <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n            <input\n              aria-label={searchLabel ?? t(\"form.search-options\", \"Search options\")}\n              data-slot=\"combobox-search\"\n              data-test={testId ? `${testId}-search` : undefined}\n              className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n              onChange={(event) => {\n                const next = event.target.value;\n\n                if (creatable && next.includes(\",\")) {\n                  commitCreate(next);\n\n                  return;\n                }\n\n                setQuery(next);\n              }}\n              onKeyDown={(event) => {\n                if (creatable && event.key === \"Enter\" && query.trim() !== \"\") {\n                  event.preventDefault();\n                  commitCreate(query);\n                }\n              }}\n              placeholder={searchPlaceholder}\n              value={query}\n            />\n            {loading && (\n              <Icon\n                name=\"loader-2\"\n                aria-hidden=\"true\"\n                className=\"size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg\"\n              />\n            )}\n          </div>\n        )}\n\n        <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n          {creatable && query.trim() !== \"\" && !exactMatch && (\n            <button\n              className=\"flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\"\n              data-test={testId ? `${testId}-create` : undefined}\n              onClick={() => commitCreate(query)}\n              type=\"button\"\n            >\n              <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n              {t(\"form.create-option\", 'Create \"{{label}}\"', { label: query.trim() })}\n            </button>\n          )}\n\n          {visibleOptions.length === 0 && !(creatable && query.trim() !== \"\" && !exactMatch) ? (\n            <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">{emptyLabel}</p>\n          ) : (\n            visibleOptions.map((option) => {\n              const isSelected = selected.includes(option.value);\n\n              return (\n                <button\n                  aria-label={renderOption ? option.label : undefined}\n                  aria-selected={isSelected}\n                  className={cn(\n                    \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                    isSelected && \"bg-lt-accent/60\",\n                  )}\n                  data-slot=\"combobox-option\"\n                  data-test={testId ? `${testId}-option-${option.value}` : undefined}\n                  data-value={option.value}\n                  key={option.value}\n                  onClick={() => choose(option.value)}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {renderOption ? (\n                    <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                      {renderOption(option)}\n                    </span>\n                  ) : (\n                    option.label\n                  )}\n                  {isSelected && (\n                    <Icon name=\"check\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n                  )}\n                </button>\n              );\n            })\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox };\n"],"mappings":";;;;;;;AAQA,IAAM,qBAAqB;;;;;;;;;;;;;;;AAgB3B,SAAS,SAAS,EAChB,kBACA,YAAY,OACZ,YACA,UAAU,OACV,WAAW,OACX,UACA,UACA,UACA,UACA,MACA,cACA,SACA,cACA,aACA,mBACA,UACA,aAAa,MACb,QACA,SACA,kBACA,gBAuBC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,SAAS,aAAa,KAAmB;EACvC,MAAM,SAAS,IACZ,MAAM,GAAG,EACT,KAAK,UAAU,MAAM,KAAK,CAAC,EAC3B,OAAO,OAAO;EAEjB,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,MAAM,YAAY,MAAM,MAAM,YAAY,CAAC;GAEzF,IAAI,OACF,CAAC,YAAY,UAAU,MAAM,KAAK;QAElC,WAAW,KAAK;EAEpB;EAEA,IAAI,UACF,SAAS,EAAE;OAEX,MAAM;CAEV;CAEA,MAAM,aAAa,QAAQ,MACxB,WAAW,OAAO,MAAM,YAAY,MAAM,MAAM,KAAK,EAAE,YAAY,CACtE;CAEA,gBAAgB;EACd,IAAI,CAAC,YAAY,CAAC,MAChB;EAGF,MAAM,QAAQ,OAAO,iBAAiB,SAAS,KAAK,GAAG,kBAAkB;EAEzE,aAAa,OAAO,aAAa,KAAK;CACxC,GAAG;EAAC;EAAO;EAAU;CAAI,CAAC;CAE1B,MAAM,iBAAiB,WACnB,UACA,QAAQ,QAAQ,WAAW,OAAO,MAAM,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC;CAEvF,SAAS,QAAc;EACrB,SAAS,EAAE;EACX,aAAa,KAAK;CACpB;CAEA,SAAS,OAAO,OAAqB;EACnC,SAAS,KAAK;EAEd,IAAI,CAAC,UACH,MAAM;CAEV;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,eAAe,SAAU,OAAO,aAAa,IAAI,IAAI,MAAM;YAAhF,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW;IAAkB,GAAI;cACpD;GACK,CAAA;EACM,CAAA,GAEhB,qBAAC,gBAAD;GACE,OAAM;GACN,WAAW,GACT,8DACA,gBACF;aALF,CAOG,cACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,eAAe,EAAE,uBAAuB,gBAAgB;KACpE,aAAU;KACV,aAAW,SAAS,GAAG,OAAO,WAAW,KAAA;KACzC,WAAU;KACV,WAAW,UAAU;MACnB,MAAM,OAAO,MAAM,OAAO;MAE1B,IAAI,aAAa,KAAK,SAAS,GAAG,GAAG;OACnC,aAAa,IAAI;OAEjB;MACF;MAEA,SAAS,IAAI;KACf;KACA,YAAY,UAAU;MACpB,IAAI,aAAa,MAAM,QAAQ,WAAW,MAAM,KAAK,MAAM,IAAI;OAC7D,MAAM,eAAe;OACrB,aAAa,KAAK;MACpB;KACF;KACA,aAAa;KACb,OAAO;IACR,CAAA,GACA,WACC,oBAAC,MAAD;KACE,MAAK;KACL,eAAY;KACZ,WAAU;IACX,CAAA,CAEA;OAGP,qBAAC,OAAD;IAAK,WAAU;IAA+B,MAAK;cAAnD,CACG,aAAa,MAAM,KAAK,MAAM,MAAM,CAAC,cACpC,qBAAC,UAAD;KACE,WAAU;KACV,aAAW,SAAS,GAAG,OAAO,WAAW,KAAA;KACzC,eAAe,aAAa,KAAK;KACjC,MAAK;eAJP,CAME,oBAAC,MAAD;MAAM,MAAK;MAAO,eAAY;MAAO,WAAU;KAA4B,CAAA,GAC1E,EAAE,sBAAsB,wBAAsB,EAAE,OAAO,MAAM,KAAK,EAAE,CAAC,CAChE;QAGT,eAAe,WAAW,KAAK,EAAE,aAAa,MAAM,KAAK,MAAM,MAAM,CAAC,cACrE,oBAAC,KAAD;KAAG,WAAU;eAAsC;IAAc,CAAA,IAEjE,eAAe,KAAK,WAAW;KAC7B,MAAM,aAAa,SAAS,SAAS,OAAO,KAAK;KAEjD,OACE,qBAAC,UAAD;MACE,cAAY,eAAe,OAAO,QAAQ,KAAA;MAC1C,iBAAe;MACf,WAAW,GACT,2JACA,cAAc,iBAChB;MACA,aAAU;MACV,aAAW,SAAS,GAAG,OAAO,UAAU,OAAO,UAAU,KAAA;MACzD,cAAY,OAAO;MAEnB,eAAe,OAAO,OAAO,KAAK;MAClC,MAAK;MACL,MAAK;gBAbP,CAeG,eACC,oBAAC,QAAD;OAAM,WAAU;iBACb,aAAa,MAAM;MAChB,CAAA,IAEN,OAAO,OAER,cACC,oBAAC,MAAD;OAAM,MAAK;OAAQ,eAAY;OAAO,WAAU;MAA4B,CAAA,CAExE;QAfD,OAAO,KAeN;IAEZ,CAAC,CAEA;KACS;IACT;;AAEb"}

package/dist/ui/copyable-text.d.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from 'react';
 export declare function copyToClipboard(text: string): Promise<boolean>;
+interface CopyButtonProps {
+    value: string;
+    label: string;
+    testId?: string;
+    className?: string;
+}
+export declare function CopyButton({ value, label, testId, className }: CopyButtonProps): ReactNode;
 interface CopyableTextProps {
     value: string;
     label: string;

package/dist/ui/copyable-text.js

@@ -1,3 +1,4 @@
+import { cn } from "../lib/utils.js";
 import { Icon } from "../icons/sprite.js";
 import { useT } from "../i18n/instance.js";
 import { useEffect, useState } from "react";
@@ -12,7 +13,7 @@ async function copyToClipboard(text) {
 		return false;
 	}
 }
-function CopyableText({ value, label, testId, children }) {
+function CopyButton({ value, label, testId, className }) {
 	const { t } = useT("lattice");
 	const [copied, setCopied] = useState(false);
 	useEffect(() => {
@@ -24,23 +25,30 @@ function CopyableText({ value, label, testId, children }) {
 		copyToClipboard(value);
 		setCopied(true);
 	}
-	const ariaLabel = copied ? t("common.copiedValue", "Copied {{label}}", { label }) : t("common.copyValue", "Copy {{label}}", { label });
+	const ariaLabel = copied ? t("common.copied-value", "Copied {{label}}", { label }) : t("common.copy-value", "Copy {{label}}", { label });
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-test": testId,
+		className: cn("inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs", className),
+		"aria-label": ariaLabel,
+		onClick: handleCopy,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: copied ? "check" : "copy",
+			className: "size-lt-icon-xs"
+		}), copied ? t("common.copied", "Copied") : t("common.copy", "Copy")]
+	});
+}
+function CopyableText({ value, label, testId, children }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex items-center gap-2",
-		children: [children ?? value, /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"data-test": testId,
-			className: "inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs",
-			"aria-label": ariaLabel,
-			onClick: handleCopy,
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: copied ? "check" : "copy",
-				className: "size-lt-icon-xs"
-			}), copied ? t("common.copied", "Copied") : t("common.copy", "Copy")]
+		children: [children ?? value, /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			label,
+			testId
 		})]
 	});
 }
 //#endregion
-export { CopyableText, copyToClipboard };
+export { CopyButton, CopyableText, copyToClipboard };
 
 //# sourceMappingURL=copyable-text.js.map

package/dist/ui/copyable-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyable-text.js","names":[],"sources":["../../resources/js/ui/copyable-text.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { type ReactNode, useEffect, useState } from \"react\";\n\nexport async function copyToClipboard(text: string): Promise<boolean> {\n  if (!navigator?.clipboard) {\n    return false;\n  }\n\n  try {\n    await navigator.clipboard.writeText(text);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface CopyableTextProps {\n  value: string;\n  label: string;\n  testId?: string;\n  children?: ReactNode;\n}\n\nexport function CopyableText({ value, label, testId, children }: CopyableTextProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(value);\n    setCopied(true);\n  }\n\n  const ariaLabel = copied\n    ? t(\"common.copiedValue\", \"Copied {{label}}\", { label })\n    : t(\"common.copyValue\", \"Copy {{label}}\", { label });\n\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      {children ?? value}\n      <button\n        type=\"button\"\n        data-test={testId}\n        className=\"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\"\n        aria-label={ariaLabel}\n        onClick={handleCopy}\n      >\n        <Icon name={copied ? \"check\" : \"copy\"} className=\"size-lt-icon-xs\" />\n        {copied ? t(\"common.copied\", \"Copied\") : t(\"common.copy\", \"Copy\")}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,eAAsB,gBAAgB,MAAgC;CACpE,IAAI,CAAC,WAAW,WACd,OAAO;CAGT,IAAI;EACF,MAAM,UAAU,UAAU,UAAU,IAAI;EAExC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AASA,SAAgB,aAAa,EAAE,OAAO,OAAO,QAAQ,YAA0C;CAC7F,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,KAAK;EAC1B,UAAU,IAAI;CAChB;CAEA,MAAM,YAAY,SACd,EAAE,sBAAsB,oBAAoB,EAAE,MAAM,CAAC,IACrD,EAAE,oBAAoB,kBAAkB,EAAE,MAAM,CAAC;CAErD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,YAAY,OACb,qBAAC,UAAD;GACE,MAAK;GACL,aAAW;GACX,WAAU;GACV,cAAY;GACZ,SAAS;aALX,CAOE,oBAAC,MAAD;IAAM,MAAM,SAAS,UAAU;IAAQ,WAAU;GAAmB,CAAA,GACnE,SAAS,EAAE,iBAAiB,QAAQ,IAAI,EAAE,eAAe,MAAM,CAC1D;IACL;;AAET"}
+{"version":3,"file":"copyable-text.js","names":[],"sources":["../../resources/js/ui/copyable-text.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { type ReactNode, useEffect, useState } from \"react\";\n\nexport async function copyToClipboard(text: string): Promise<boolean> {\n  if (!navigator?.clipboard) {\n    return false;\n  }\n\n  try {\n    await navigator.clipboard.writeText(text);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface CopyButtonProps {\n  value: string;\n  label: string;\n  testId?: string;\n  className?: string;\n}\n\nexport function CopyButton({ value, label, testId, className }: CopyButtonProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(value);\n    setCopied(true);\n  }\n\n  const ariaLabel = copied\n    ? t(\"common.copied-value\", \"Copied {{label}}\", { label })\n    : t(\"common.copy-value\", \"Copy {{label}}\", { label });\n\n  return (\n    <button\n      type=\"button\"\n      data-test={testId}\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\",\n        className,\n      )}\n      aria-label={ariaLabel}\n      onClick={handleCopy}\n    >\n      <Icon name={copied ? \"check\" : \"copy\"} className=\"size-lt-icon-xs\" />\n      {copied ? t(\"common.copied\", \"Copied\") : t(\"common.copy\", \"Copy\")}\n    </button>\n  );\n}\n\ninterface CopyableTextProps {\n  value: string;\n  label: string;\n  testId?: string;\n  children?: ReactNode;\n}\n\nexport function CopyableText({ value, label, testId, children }: CopyableTextProps): ReactNode {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      {children ?? value}\n      <CopyButton value={value} label={label} testId={testId} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,eAAsB,gBAAgB,MAAgC;CACpE,IAAI,CAAC,WAAW,WACd,OAAO;CAGT,IAAI;EACF,MAAM,UAAU,UAAU,UAAU,IAAI;EAExC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AASA,SAAgB,WAAW,EAAE,OAAO,OAAO,QAAQ,aAAyC;CAC1F,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,KAAK;EAC1B,UAAU,IAAI;CAChB;CAEA,MAAM,YAAY,SACd,EAAE,uBAAuB,oBAAoB,EAAE,MAAM,CAAC,IACtD,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;CAEtD,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAW,GACT,0FACA,SACF;EACA,cAAY;EACZ,SAAS;YARX,CAUE,oBAAC,MAAD;GAAM,MAAM,SAAS,UAAU;GAAQ,WAAU;EAAmB,CAAA,GACnE,SAAS,EAAE,iBAAiB,QAAQ,IAAI,EAAE,eAAe,MAAM,CAC1D;;AAEZ;AASA,SAAgB,aAAa,EAAE,OAAO,OAAO,QAAQ,YAA0C;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,YAAY,OACb,oBAAC,YAAD;GAAmB;GAAc;GAAe;EAAS,CAAA,CACtD;;AAET"}

package/dist/ui/fragment.js

@@ -1,8 +1,8 @@
 import { LATTICE_EVENT } from "../events/event-names.js";
+import { toNodes } from "../core/nodes.js";
 import { Renderer } from "../core/renderer.js";
 import { apiJson } from "../core/api.js";
 import { Skeleton } from "./skeleton.js";
-import { toNodes } from "../core/nodes.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/fragment.tsx

package/dist/ui/fragment.js.map

@@ -1 +1 @@
-{"version":3,"file":"fragment.js","names":[],"sources":["../../resources/js/ui/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/ui/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  \"2xl\": 448,\n  \"3xl\": 512,\n  \"4xl\": 576,\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;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;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"}
+{"version":3,"file":"fragment.js","names":[],"sources":["../../resources/js/ui/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/ui/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { FragmentResponse } from \"@lattice-php/lattice/types/generated\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n  \"2xl\": 448,\n  \"3xl\": 512,\n  \"4xl\": 576,\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":";;;;;;;;AASA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;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/ui/heading.js

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

package/dist/ui/heading.js.map

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

package/dist/ui/icon-button.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * A compact, resizable icon button — the shared affordance behind toolbar
+ * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
+ * `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+ * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
+ * of an adjacent input. Size defaults to `sm`; pass `size` to resize.
+ */
+declare const iconButtonVariants: (props?: ({
+    variant?: "ghost" | "segmented" | null | undefined;
+    size?: "xs" | "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }: Omit<React.ComponentProps<"button">, "aria-pressed"> & VariantProps<typeof iconButtonVariants> & {
+    /** Icon glyph name; omit and pass `children` for custom content. */
+    icon?: string;
+    /** Accessible name (also used when the button shows only an icon). */
+    label: string;
+    /** Toggle state — sets `aria-pressed` and the pressed styling. */
+    active?: boolean;
+}): React.JSX.Element;
+export { iconButtonVariants };

package/dist/ui/icon-button.js

@@ -0,0 +1,51 @@
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region resources/js/ui/icon-button.tsx
+/**
+* A compact, resizable icon button — the shared affordance behind toolbar
+* triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
+* `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+* and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
+* of an adjacent input. Size defaults to `sm`; pass `size` to resize.
+*/
+var iconButtonVariants = cva(cn("relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50", "disabled:pointer-events-none disabled:opacity-50"), {
+	variants: {
+		variant: {
+			ghost: cn("text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg", "aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg"),
+			segmented: cn("-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg")
+		},
+		size: {
+			xs: "size-5 [&_svg]:size-lt-icon-sm",
+			sm: "size-7 [&_svg]:size-lt-icon-md",
+			md: "size-lt-control-md [&_svg]:size-lt-icon-md"
+		}
+	},
+	defaultVariants: {
+		variant: "ghost",
+		size: "sm"
+	}
+});
+function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": active,
+		className: cn(iconButtonVariants({
+			variant,
+			size
+		}), className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			"aria-hidden": "true"
+		}) : null, children]
+	});
+}
+//#endregion
+export { IconButton, iconButtonVariants };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/ui/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../resources/js/ui/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A compact, resizable icon button — the shared affordance behind toolbar\n * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches\n * `Button variant=\"ghost\"` (accent hover) and reacts to `aria-pressed` (toggle)\n * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right\n * of an adjacent input. Size defaults to `sm`; pass `size` to resize.\n */\nconst iconButtonVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      variant: {\n        ghost: cn(\n          \"text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg\",\n          \"aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg\",\n        ),\n        segmented: cn(\n          \"-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg\",\n        ),\n      },\n      size: {\n        xs: \"size-5 [&_svg]:size-lt-icon-sm\",\n        sm: \"size-7 [&_svg]:size-lt-icon-md\",\n        md: \"size-lt-control-md [&_svg]:size-lt-icon-md\",\n      },\n    },\n    defaultVariants: { variant: \"ghost\", size: \"sm\" },\n  },\n);\n\nexport function IconButton({\n  icon,\n  label,\n  active,\n  size,\n  variant,\n  className,\n  children,\n  ref,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"aria-pressed\"> &\n  VariantProps<typeof iconButtonVariants> & {\n    /** Icon glyph name; omit and pass `children` for custom content. */\n    icon?: string;\n    /** Accessible name (also used when the button shows only an icon). */\n    label: string;\n    /** Toggle state — sets `aria-pressed` and the pressed styling. */\n    active?: boolean;\n  }) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      className={cn(iconButtonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport { iconButtonVariants };\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,GACE,6FACA,mEACA,kDACF,GACA;CACE,UAAU;EACR,SAAS;GACP,OAAO,GACL,+DACA,sEACA,0DACF;GACA,WAAW,GACT,4GACA,yFACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAS,MAAM;CAAK;AAClD,CACF;AAEA,SAAgB,WAAW,EACzB,MACA,OACA,QACA,MACA,SACA,WACA,UACA,KACA,GAAG,SASA;CACH,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC9D,GAAI;YANN,CAQG,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAM,eAAY;EAAQ,CAAA,IAAI,MACjD,QACK;;AAEZ"}

package/dist/ui/icon.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
+import { coerceColor, colorValue } from "../lib/color.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/icon.tsx
 var sizeClass = {
@@ -12,20 +13,18 @@ var sizeClass = {
 	"3xl": "size-lt-icon-3xl",
 	"4xl": "size-lt-icon-4xl"
 };
-var colorClass = {
-	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 IconComponent = ({ node }) => {
 	const { name, size, color, class: className } = node.props;
-	return /* @__PURE__ */ jsx(IconRenderer, {
+	const icon = /* @__PURE__ */ jsx(IconRenderer, {
 		icon: name,
-		className: cn(sizeClass[size], color ? colorClass[color] : void 0, className)
+		className: cn(sizeClass[size], className)
+	});
+	const coerced = coerceColor(color);
+	if (!coerced) return icon;
+	return /* @__PURE__ */ jsx("span", {
+		className: "contents",
+		style: { color: colorValue(coerced) },
+		children: icon
 	});
 };
 //#endregion

package/dist/ui/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../resources/js/ui/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst sizeClass: Record<Size, string> = {\n  xs: \"size-lt-icon-xs\",\n  sm: \"size-lt-icon-sm\",\n  md: \"size-lt-icon-md\",\n  lg: \"size-lt-icon-lg\",\n  xl: \"size-lt-icon-xl\",\n  \"2xl\": \"size-lt-icon-2xl\",\n  \"3xl\": \"size-lt-icon-3xl\",\n  \"4xl\": \"size-lt-icon-4xl\",\n};\n\nconst colorClass: 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 IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n\n  return (\n    <IconRenderer\n      icon={name}\n      className={cn(sizeClass[size], color ? colorClass[color] : undefined, className)}\n    />\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;AAKA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CAErD,OACE,oBAAC,cAAD;EACE,MAAM;EACN,WAAW,GAAG,UAAU,OAAO,QAAQ,WAAW,SAAS,KAAA,GAAW,SAAS;CAChF,CAAA;AAEL"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../resources/js/ui/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { coerceColor, colorValue } 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 sizeClass: Record<Size, string> = {\n  xs: \"size-lt-icon-xs\",\n  sm: \"size-lt-icon-sm\",\n  md: \"size-lt-icon-md\",\n  lg: \"size-lt-icon-lg\",\n  xl: \"size-lt-icon-xl\",\n  \"2xl\": \"size-lt-icon-2xl\",\n  \"3xl\": \"size-lt-icon-3xl\",\n  \"4xl\": \"size-lt-icon-4xl\",\n};\n\nconst IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n  const icon = <IconRenderer icon={name} className={cn(sizeClass[size], className)} />;\n  const coerced = coerceColor(color);\n\n  if (!coerced) {\n    return icon;\n  }\n\n  return (\n    <span className=\"contents\" style={{ color: colorValue(coerced) }}>\n      {icon}\n    </span>\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;;AAMA,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,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CACrD,MAAM,OAAO,oBAAC,cAAD;EAAc,MAAM;EAAM,WAAW,GAAG,UAAU,OAAO,SAAS;CAAI,CAAA;CACnF,MAAM,UAAU,YAAY,KAAK;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,QAAD;EAAM,WAAU;EAAW,OAAO,EAAE,OAAO,WAAW,OAAO,EAAE;YAC5D;CACG,CAAA;AAEV"}

package/dist/ui/image-preview.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface PreviewableImageProps {
+    src: string;
+    alt: string;
+    previewable: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+    testId?: string;
+}
+export declare function PreviewableImage({ src, alt, previewable, width, height, className, testId, }: PreviewableImageProps): ReactNode;
+export {};