@threadlabs/looma 0.2.19 → 0.3.0

package/react/index.js

@@ -0,0 +1,1526 @@
+// src/index.ts
+import "@threadlabs/looma/core";
+import "@threadlabs/looma/layout";
+import "@threadlabs/looma/editor/ui";
+
+// src/generated/UiAffordanceScope.tsx
+import { useLayoutEffect, useRef } from "react";
+import { attachLoomaComponent, updateComponentProps } from "@threadlabs/looma/core/declarative";
+import { jsx } from "react/jsx-runtime";
+var definition = { ...{ "contract": { "tag": "ui-affordance-scope", "props": { "nearRadius": { "type": "number", "required": false, "target": { "attribute": "nearradius" }, "default": 16 } } }, "template": { "kind": "element", "name": "span", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiAffordanceScope(props) {
+  const { "nearRadius": prop0 = 16, slots, children, ref, ...nativeProps } = props;
+  const root = useRef(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "nearRadius": props["nearRadius"] };
+  useLayoutEffect(() => root.current == null ? void 0 : attachLoomaComponent(root.current, definition, "ui-affordance-scope", componentProps), []);
+  useLayoutEffect(() => {
+    if (root.current != null) updateComponentProps(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx("span", { ...nativeProps, "data-component": "ui-affordance-scope", "data-component-root": "ui-affordance-scope", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiAvatarGroup.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { attachLoomaComponent as attachLoomaComponent2, updateComponentProps as updateComponentProps2 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var definition2 = { ...{ "contract": { "tag": "ui-avatar-group", "props": { "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "People" }, "max": { "type": "number", "required": false, "target": { "attribute": "max" }, "default": 5 } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "group" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "overflowCount", "expression": { "source": "0", "ast": { "kind": "literal", "value": 0 }, "dependencies": [] } }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiAvatarGroup(props) {
+  const { "label": prop0 = "People", "max": prop1 = 5, slots, children, ref, ...nativeProps } = props;
+  const root = useRef2(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "label": props["label"], "max": props["max"] };
+  useLayoutEffect2(() => root.current == null ? void 0 : attachLoomaComponent2(root.current, definition2, "ui-avatar-group", componentProps), []);
+  useLayoutEffect2(() => {
+    if (root.current != null) updateComponentProps2(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx2("div", { ...nativeProps, "data-component": "ui-avatar-group", "data-component-root": "ui-avatar-group", role: "group", "aria-label": prop0 ?? void 0, ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiAvatar.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef3 } from "react";
+import { attachLoomaComponent as attachLoomaComponent3, updateComponentProps as updateComponentProps3 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var definition3 = { ...{ "contract": { "tag": "ui-avatar", "props": { "alt": { "type": "string", "required": false, "target": { "attribute": "alt" }, "default": "" }, "fallback": { "type": "string", "required": false, "target": { "attribute": "fallback" }, "default": "" }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "src": { "type": "string", "required": false, "target": { "attribute": "src" }, "default": "" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-has-image", "expression": "hasImage", "expressionPlan": { "source": "hasImage", "ast": { "kind": "id", "name": "hasImage" }, "dependencies": ["hasImage"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "avatar" }], "children": [{ "kind": "slot" }, { "kind": "element", "name": "img", "attributes": [{ "kind": "literal", "name": "class", "value": "avatar__managed-image" }, { "kind": "attribute", "name": "src", "expression": "src", "expressionPlan": { "source": "src", "ast": { "kind": "id", "name": "src" }, "dependencies": ["src"] } }, { "kind": "literal", "name": "alt", "value": "" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "fallback" }], "children": [] }] }] }, "declarations": [{ "kind": "state", "name": "hasImage", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasAuthoredImage", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiAvatar(props) {
+  const { "alt": prop0 = "", "fallback": prop1 = "", "name": prop2 = "", "src": prop3 = "", slots, children, ref, ...nativeProps } = props;
+  const root = useRef3(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "alt": props["alt"], "fallback": props["fallback"], "name": props["name"], "src": props["src"] };
+  useLayoutEffect3(() => root.current == null ? void 0 : attachLoomaComponent3(root.current, definition3, "ui-avatar", componentProps), []);
+  useLayoutEffect3(() => {
+    if (root.current != null) updateComponentProps3(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx3("span", { ...nativeProps, "data-component": "ui-avatar", "data-component-root": "ui-avatar", "data-has-image": void 0, ref: setRoot, children: /* @__PURE__ */ jsxs("div", { className: "avatar", "data-component": "ui-avatar", children: [
+    children ?? null,
+    /* @__PURE__ */ jsx3("img", { className: "avatar__managed-image", src: prop3 ?? void 0, alt: "", "aria-hidden": "true", "data-component": "ui-avatar" }),
+    /* @__PURE__ */ jsx3("span", { className: "fallback", "data-component": "ui-avatar" })
+  ] }) });
+}
+
+// src/generated/UiBadge.tsx
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef4 } from "react";
+import { manageGeneratedProps, updateGeneratedProps } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function UiBadge(props) {
+  const { "tone": prop0 = "neutral", "variant": prop1 = "subtle", slots, children, ref, ...nativeProps } = props;
+  const root = useRef4(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "tone": props["tone"], "variant": props["variant"] };
+  useLayoutEffect4(() => root.current == null ? void 0 : manageGeneratedProps(root.current, [
+    { name: "tone", attribute: "data-tone", value: props["tone"], default: "neutral", bound: true, type: ["neutral", "accent", "info", "success", "warning", "danger"], required: false },
+    { name: "variant", attribute: "data-variant", value: props["variant"], default: "subtle", bound: true, type: ["solid", "subtle"], required: false }
+  ]), []);
+  useLayoutEffect4(() => {
+    if (root.current != null) updateGeneratedProps(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx4("span", { ...nativeProps, "data-component": "ui-badge", "data-component-root": "ui-badge", "data-variant": prop1 ?? void 0, "data-tone": prop0 ?? void 0, ref: setRoot, children: /* @__PURE__ */ jsx4("span", { className: "badge__surface", "data-component": "ui-badge", children: children ?? null }) });
+}
+
+// src/generated/UiButton.tsx
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef5 } from "react";
+import { attachLoomaComponent as attachLoomaComponent4, updateComponentProps as updateComponentProps4 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var definition4 = { ...{ "contract": { "tag": "ui-button", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "size": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "data-size" }, "default": "md" }, "variant": { "type": { "enum": ["outline", "solid", "danger", "ghost", "link"] }, "required": false, "target": { "attribute": "data-variant" }, "default": "outline" } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "attribute", "name": "data-size", "expression": "size", "expressionPlan": { "source": "size", "ast": { "kind": "id", "name": "size" }, "dependencies": ["size"] } }, { "kind": "attribute", "name": "data-variant", "expression": "variant", "expressionPlan": { "source": "variant", "ast": { "kind": "id", "name": "variant" }, "dependencies": ["variant"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function UiButton(props) {
+  const { "disabled": prop0 = false, "size": prop1 = "md", "variant": prop2 = "outline", slots, children, ref, ...nativeProps } = props;
+  const root = useRef5(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "size": props["size"], "variant": props["variant"] };
+  useLayoutEffect5(() => root.current == null ? void 0 : attachLoomaComponent4(root.current, definition4, "ui-button", componentProps), []);
+  useLayoutEffect5(() => {
+    if (root.current != null) updateComponentProps4(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx5("button", { ...nativeProps, "data-component": "ui-button", "data-component-root": "ui-button", "data-size": prop1 ?? void 0, "data-variant": prop2 ?? void 0, disabled: prop0 ?? void 0, ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiCallout.tsx
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef6 } from "react";
+import { attachLoomaComponent as attachLoomaComponent5, updateComponentProps as updateComponentProps5 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var definition5 = { ...{ "contract": { "tag": "ui-callout", "props": { "tone": { "type": { "enum": ["info", "note", "warning", "success", "danger"] }, "required": false, "target": { "attribute": "data-tone" }, "default": "info" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "note" }, { "kind": "attribute", "name": "data-tone", "expression": "tone", "expressionPlan": { "source": "tone", "ast": { "kind": "id", "name": "tone" }, "dependencies": ["tone"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "callout__surface" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "content" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiCallout(props) {
+  const { "tone": prop0 = "info", slots, children, ref, ...nativeProps } = props;
+  const root = useRef6(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "tone": props["tone"] };
+  useLayoutEffect6(() => root.current == null ? void 0 : attachLoomaComponent5(root.current, definition5, "ui-callout", componentProps), []);
+  useLayoutEffect6(() => {
+    if (root.current != null) updateComponentProps5(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx6("div", { ...nativeProps, "data-component": "ui-callout", "data-component-root": "ui-callout", role: "note", "data-tone": prop0 ?? void 0, ref: setRoot, children: /* @__PURE__ */ jsxs2("div", { className: "callout__surface", "data-component": "ui-callout", children: [
+    /* @__PURE__ */ jsx6("span", { className: "icon", "aria-hidden": "true", "data-component": "ui-callout" }),
+    /* @__PURE__ */ jsx6("div", { className: "content", "data-component": "ui-callout", children: children ?? null })
+  ] }) });
+}
+
+// src/generated/UiCheckbox.tsx
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef7 } from "react";
+import { attachLoomaComponent as attachLoomaComponent6, updateComponentProps as updateComponentProps6 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var definition6 = { ...{ "contract": { "tag": "ui-checkbox", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "indeterminate": { "type": "boolean", "required": false, "target": { "attribute": "indeterminate" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "checkbox" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiCheckbox(props) {
+  const { "checked": prop0 = false, "disabled": prop1 = false, "indeterminate": prop2 = false, "required": prop3 = false, "value": prop4 = "on", onChange, slots, children, ref, ...nativeProps } = props;
+  const root = useRef7(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "checked": props["checked"], "disabled": props["disabled"], "indeterminate": props["indeterminate"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect7(() => root.current == null ? void 0 : attachLoomaComponent6(root.current, definition6, "ui-checkbox", componentProps), []);
+  useLayoutEffect7(() => {
+    if (root.current != null) updateComponentProps6(root.current, componentProps);
+  });
+  useLayoutEffect7(() => {
+    const node = root.current;
+    if (node == null || onChange == null) return;
+    const listener0 = (event) => onChange(event.detail, event);
+    node.addEventListener("change", listener0);
+    return () => node.removeEventListener("change", listener0);
+  }, [onChange]);
+  return /* @__PURE__ */ jsx7("span", { ...nativeProps, "data-component": "ui-checkbox", "data-component-root": "ui-checkbox", "data-disabled": prop1 ? "" : void 0, ref: setRoot, children: /* @__PURE__ */ jsxs3("label", { className: "control", "data-component": "ui-checkbox", children: [
+    /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: void 0, required: prop3 ?? void 0, value: prop4 ?? void 0, "data-component": "ui-checkbox" }),
+    /* @__PURE__ */ jsx7("span", { className: "label", "data-component": "ui-checkbox", children: children ?? null })
+  ] }) });
+}
+
+// src/generated/UiCombobox.tsx
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef9 } from "react";
+
+// src/generated/UiTooltip.tsx
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef8 } from "react";
+import { attachLoomaComponent as attachLoomaComponent7, updateComponentProps as updateComponentProps7 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var definition7 = { ...{ "contract": { "tag": "ui-tooltip", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "hideDelay": { "type": "number", "required": false, "target": { "attribute": "hidedelay" }, "default": 100 }, "inverse": { "type": "boolean", "required": false, "target": { "attribute": "data-inverse" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "top-start" }, "showDelay": { "type": "number", "required": false, "target": { "attribute": "showdelay" }, "default": 500 } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "role", "value": "tooltip" }, { "kind": "attribute", "name": "hidden", "expression": "not internalOpen", "expressionPlan": { "source": "not internalOpen", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "internalOpen" } }, "dependencies": ["internalOpen"] } }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }, { "kind": "attribute", "name": "data-inverse", "expression": "inverse", "expressionPlan": { "source": "inverse", "ast": { "kind": "id", "name": "inverse" }, "dependencies": ["inverse"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tooltip__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiTooltip(props) {
+  const { "for": prop0 = "", "hideDelay": prop1 = 100, "inverse": prop2 = false, "open": prop3 = false, "placement": prop4 = "top-start", "showDelay": prop5 = 500, onOpen, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef8(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "for": props["for"], "hideDelay": props["hideDelay"], "inverse": props["inverse"], "open": props["open"], "placement": props["placement"], "showDelay": props["showDelay"] };
+  useLayoutEffect8(() => root.current == null ? void 0 : attachLoomaComponent7(root.current, definition7, "ui-tooltip", componentProps), []);
+  useLayoutEffect8(() => {
+    if (root.current != null) updateComponentProps7(root.current, componentProps);
+  });
+  useLayoutEffect8(() => {
+    const node = root.current;
+    if (node == null || onOpen == null) return;
+    const listener0 = (event) => onOpen(event.detail, event);
+    node.addEventListener("open", listener0);
+    return () => node.removeEventListener("open", listener0);
+  }, [onOpen]);
+  useLayoutEffect8(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener1 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener1);
+    return () => node.removeEventListener("close", listener1);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx8("span", { ...nativeProps, "data-component": "ui-tooltip", "data-component-root": "ui-tooltip", role: "tooltip", hidden: void 0, "data-state-open": void 0, "data-inverse": prop2 ? "" : void 0, ref: setRoot, children: /* @__PURE__ */ jsx8("div", { className: "tooltip__surface", "data-component": "ui-tooltip", children: children ?? null }) });
+}
+
+// src/generated/UiCombobox.tsx
+import { attachLoomaComponent as attachLoomaComponent8, updateComponentProps as updateComponentProps8 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var definition8 = { ...{ "contract": { "tag": "ui-combobox", "props": { "allowCreate": { "type": "boolean", "required": false, "target": { "attribute": "allowcreate" }, "default": false }, "allowFreeText": { "type": "boolean", "required": false, "target": { "attribute": "allowfreetext" }, "default": false }, "clearable": { "type": "boolean", "required": false, "target": { "attribute": "clearable" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "disclosure": { "type": "boolean", "required": false, "target": { "attribute": "disclosure" }, "default": false }, "help": { "type": "string", "required": false, "target": { "attribute": "help" }, "default": "" }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "id", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "value", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "label", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "group", "type": { "kind": "terminal", "name": "string" }, "optional": true }, { "name": "disabled", "type": { "kind": "terminal", "name": "boolean" }, "optional": true }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "" }, "labelVisibility": { "type": { "enum": ["visible", "sr-only"] }, "required": false, "target": { "attribute": "labelvisibility" }, "default": "visible" }, "multiple": { "type": "boolean", "required": false, "target": { "attribute": "multiple" }, "default": false }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "placeholder": { "type": "string", "required": false, "target": { "attribute": "placeholder" }, "default": "" }, "query": { "type": "string", "required": false, "target": { "attribute": "query" } }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "size": { "type": { "enum": ["sm", "md"] }, "required": false, "target": { "attribute": "data-size" }, "default": "md" }, "tokenSeparators": { "type": { "kind": "list", "item": { "kind": "terminal", "name": "string" } }, "required": false, "target": { "attribute": "tokenseparators" } }, "value": { "type": { "kind": "union", "members": [{ "kind": "terminal", "name": "string" }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-size", "expression": "size", "expressionPlan": { "source": "size", "ast": { "kind": "id", "name": "size" }, "dependencies": ["size"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "for", "value": "input" }, { "kind": "literal", "name": "part", "value": "label" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "field" }, { "kind": "literal", "name": "part", "value": "field" }], "children": [{ "kind": "slot", "fallback": [], "name": "start" }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "items" }, { "kind": "literal", "name": "role", "value": "group" }], "children": [], "flow": { "kind": "if", "test": "multiple", "testPlan": { "source": "multiple", "ast": { "kind": "id", "name": "multiple" }, "dependencies": ["multiple"] } } }, { "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "id", "value": "input" }, { "kind": "literal", "name": "role", "value": "combobox" }, { "kind": "literal", "name": "aria-autocomplete", "value": "list" }, { "kind": "literal", "name": "aria-controls", "value": "listbox" }, { "kind": "attribute", "name": "value", "expression": "display", "expressionPlan": { "source": "display", "ast": { "kind": "id", "name": "display" }, "dependencies": ["display"] } }, { "kind": "attribute", "name": "placeholder", "expression": "placeholder", "expressionPlan": { "source": "placeholder", "ast": { "kind": "id", "name": "placeholder" }, "dependencies": ["placeholder"] } }, { "kind": "attribute", "name": "name", "expression": "name", "expressionPlan": { "source": "name", "ast": { "kind": "id", "name": "name" }, "dependencies": ["name"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "literal", "name": "autocomplete", "value": "off" }, { "kind": "literal", "name": "part", "value": "input" }], "children": [] }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }], "children": [{ "kind": "element", "name": "svg", "attributes": [{ "kind": "literal", "name": "class", "value": "affordance-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }, { "kind": "literal", "name": "viewBox", "value": "0 0 24 24" }, { "kind": "literal", "name": "fill", "value": "none" }, { "kind": "literal", "name": "stroke", "value": "currentColor" }, { "kind": "literal", "name": "stroke-width", "value": "2" }, { "kind": "literal", "name": "stroke-linecap", "value": "round" }], "children": [{ "kind": "element", "name": "path", "attributes": [{ "kind": "literal", "name": "d", "value": "M7 7l10 10M17 7 7 17" }], "children": [] }] }], "flow": { "kind": "if", "test": "clearable", "testPlan": { "source": "clearable", "ast": { "kind": "id", "name": "clearable" }, "dependencies": ["clearable"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "id", "value": "help" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "text", "value": "?" }] }], "flow": { "kind": "if", "test": "help", "testPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }, { "kind": "literal", "name": "aria-controls", "value": "listbox" }], "children": [{ "kind": "element", "name": "svg", "attributes": [{ "kind": "literal", "name": "class", "value": "affordance-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }, { "kind": "literal", "name": "viewBox", "value": "0 0 24 24" }, { "kind": "literal", "name": "fill", "value": "none" }, { "kind": "literal", "name": "stroke", "value": "currentColor" }, { "kind": "literal", "name": "stroke-width", "value": "2.25" }, { "kind": "literal", "name": "stroke-linecap", "value": "round" }, { "kind": "literal", "name": "stroke-linejoin", "value": "round" }], "children": [{ "kind": "element", "name": "path", "attributes": [{ "kind": "literal", "name": "d", "value": "m6 9 6 6 6-6" }], "children": [] }] }], "flow": { "kind": "if", "test": "disclosure", "testPlan": { "source": "disclosure", "ast": { "kind": "id", "name": "disclosure" }, "dependencies": ["disclosure"] } } }] }, { "kind": "element", "name": "ui-tooltip", "attributes": [{ "kind": "literal", "name": "id", "value": "help-text" }, { "kind": "literal", "name": "for", "value": "help" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "help", "expressionPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } }], "children": [] }], "flow": { "kind": "if", "test": "help", "testPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } } }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "popup" }, { "kind": "literal", "name": "part", "value": "popup" }, { "kind": "attribute", "name": "hidden", "expression": "not expanded", "expressionPlan": { "source": "not expanded", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "expanded" } }, "dependencies": ["expanded"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "id", "value": "listbox" }, { "kind": "literal", "name": "role", "value": "listbox" }], "children": [] }, { "kind": "slot", "fallback": [], "name": "footer" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "id", "value": "validation" }, { "kind": "literal", "name": "class", "value": "message" }, { "kind": "literal", "name": "part", "value": "validation" }, { "kind": "attribute", "name": "hidden", "expression": "not validation.issues.length", "expressionPlan": { "source": "not validation.issues.length", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "member", "object": { "kind": "member", "object": { "kind": "id", "name": "validation" }, "key": "issues" }, "key": "length" } }, "dependencies": ["validation.issues.length"] } }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "sr-only" }, { "kind": "literal", "name": "role", "value": "status" }, { "kind": "literal", "name": "aria-live", "value": "polite" }, { "kind": "literal", "name": "aria-atomic", "value": "true" }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "authored-options" }, { "kind": "literal", "name": "hidden", "value": "" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "raw", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "display", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "selected", "expression": { "source": "null", "ast": { "kind": "literal", "value": null }, "dependencies": [] } }, { "kind": "state", "name": "expanded", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "rows", "expression": { "source": "[]", "ast": { "kind": "array", "items": [] }, "dependencies": [] } }, { "kind": "state", "name": "active", "expression": { "source": "-1", "ast": { "kind": "unary", "op": "-", "operand": { "kind": "literal", "value": 1 } }, "dependencies": [] } }, { "kind": "state", "name": "loading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "helpOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "lookupError", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "validation", "expression": { "source": "{ status: 'pristine', touched: false, dirty: false, issues: [] }", "ast": { "kind": "object", "pairs": [{ "key": "status", "value": { "kind": "literal", "value": "pristine" } }, { "key": "touched", "value": { "kind": "literal", "value": false } }, { "key": "dirty", "value": { "kind": "literal", "value": false } }, { "key": "issues", "value": { "kind": "array", "items": [] } }] }, "dependencies": [] } }, { "kind": "event", "name": "query-change", "type": "object({ query: string, display: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "value-change", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "free-entry", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "create-entry", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "validation-change", "type": "object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "options-change", "type": "list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "add-item", "type": "object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "remove-item", "type": "object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "create-item", "type": "object({ query: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "method", "name": "validate", "exportName": "validate", "returns": "promise(unknown)" }, { "kind": "method", "name": "focusInput", "exportName": "focusInput", "returns": "promise(undefined)" }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiCombobox(props) {
+  const { "allowCreate": prop0 = false, "allowFreeText": prop1 = false, "clearable": prop2 = false, "disabled": prop3 = false, "disclosure": prop4 = false, "help": prop5 = "", "items": prop6, "label": prop7 = "", "labelVisibility": prop8 = "visible", "multiple": prop9 = false, "name": prop10 = "", "placeholder": prop11 = "", "query": prop12, "readOnly": prop13 = false, "required": prop14 = false, "size": prop15 = "md", "tokenSeparators": prop16, "value": prop17, onQueryChange, onValueChange, onFreeEntry, onCreateEntry, onValidationChange, onOptionsChange, onAddItem, onRemoveItem, onCreateItem, slots, children, ref, ...nativeProps } = props;
+  const root = useRef9(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "allowCreate": props["allowCreate"], "allowFreeText": props["allowFreeText"], "clearable": props["clearable"], "disabled": props["disabled"], "disclosure": props["disclosure"], "help": props["help"], "items": props["items"], "label": props["label"], "labelVisibility": props["labelVisibility"], "multiple": props["multiple"], "name": props["name"], "placeholder": props["placeholder"], "query": props["query"], "readonly": props["readOnly"], "required": props["required"], "size": props["size"], "tokenSeparators": props["tokenSeparators"], "value": props["value"] };
+  useLayoutEffect9(() => root.current == null ? void 0 : attachLoomaComponent8(root.current, definition8, "ui-combobox", componentProps), []);
+  useLayoutEffect9(() => {
+    if (root.current != null) updateComponentProps8(root.current, componentProps);
+  });
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onQueryChange == null) return;
+    const listener0 = (event) => onQueryChange(event.detail, event);
+    node.addEventListener("query-change", listener0);
+    return () => node.removeEventListener("query-change", listener0);
+  }, [onQueryChange]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onValueChange == null) return;
+    const listener1 = (event) => onValueChange(event.detail, event);
+    node.addEventListener("value-change", listener1);
+    return () => node.removeEventListener("value-change", listener1);
+  }, [onValueChange]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onFreeEntry == null) return;
+    const listener2 = (event) => onFreeEntry(event.detail, event);
+    node.addEventListener("free-entry", listener2);
+    return () => node.removeEventListener("free-entry", listener2);
+  }, [onFreeEntry]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onCreateEntry == null) return;
+    const listener3 = (event) => onCreateEntry(event.detail, event);
+    node.addEventListener("create-entry", listener3);
+    return () => node.removeEventListener("create-entry", listener3);
+  }, [onCreateEntry]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onValidationChange == null) return;
+    const listener4 = (event) => onValidationChange(event.detail, event);
+    node.addEventListener("validation-change", listener4);
+    return () => node.removeEventListener("validation-change", listener4);
+  }, [onValidationChange]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onOptionsChange == null) return;
+    const listener5 = (event) => onOptionsChange(event.detail, event);
+    node.addEventListener("options-change", listener5);
+    return () => node.removeEventListener("options-change", listener5);
+  }, [onOptionsChange]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onAddItem == null) return;
+    const listener6 = (event) => onAddItem(event.detail, event);
+    node.addEventListener("add-item", listener6);
+    return () => node.removeEventListener("add-item", listener6);
+  }, [onAddItem]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onRemoveItem == null) return;
+    const listener7 = (event) => onRemoveItem(event.detail, event);
+    node.addEventListener("remove-item", listener7);
+    return () => node.removeEventListener("remove-item", listener7);
+  }, [onRemoveItem]);
+  useLayoutEffect9(() => {
+    const node = root.current;
+    if (node == null || onCreateItem == null) return;
+    const listener8 = (event) => onCreateItem(event.detail, event);
+    node.addEventListener("create-item", listener8);
+    return () => node.removeEventListener("create-item", listener8);
+  }, [onCreateItem]);
+  return /* @__PURE__ */ jsxs4("div", { ...nativeProps, "data-component": "ui-combobox", "data-component-root": "ui-combobox", "data-size": prop15 ?? void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsx9("label", { htmlFor: "input", part: "label", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("template", { "data-component": "ui-combobox", children: prop7 }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "field", part: "field", "data-component": "ui-combobox", children: [
+      slots?.["start"] ?? null,
+      /* @__PURE__ */ jsx9("div", { className: "items", role: "group", "data-component": "ui-combobox" }),
+      /* @__PURE__ */ jsx9("input", { id: "input", role: "combobox", "aria-autocomplete": "list", "aria-controls": "listbox", value: void 0, placeholder: prop11 ?? void 0, name: prop10 ?? void 0, disabled: prop3 ?? void 0, readOnly: prop13 ?? void 0, required: prop14 ?? void 0, autoComplete: "off", part: "input", "data-component": "ui-combobox" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", part: "affordance", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("svg", { className: "affordance-icon", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("path", { d: "M7 7l10 10M17 7 7 17", "data-component": "ui-combobox" }) }) }),
+      /* @__PURE__ */ jsx9("button", { id: "help", type: "button", part: "affordance", disabled: prop3 ?? void 0, "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", "data-component": "ui-combobox", children: "?" }) }),
+      /* @__PURE__ */ jsx9("button", { type: "button", part: "affordance", "aria-controls": "listbox", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("svg", { className: "affordance-icon", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("path", { d: "m6 9 6 6 6-6", "data-component": "ui-combobox" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx9(UiTooltip, { id: "help-text", for: "help", "data-component": "ui-combobox", children: /* @__PURE__ */ jsx9("template", { "data-component": "ui-combobox", children: prop5 }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "popup", part: "popup", hidden: void 0, "data-component": "ui-combobox", children: [
+      /* @__PURE__ */ jsx9("div", { id: "listbox", role: "listbox", "data-component": "ui-combobox" }),
+      slots?.["footer"] ?? null
+    ] }),
+    /* @__PURE__ */ jsx9("div", { id: "validation", className: "message", part: "validation", hidden: void 0, "data-component": "ui-combobox" }),
+    /* @__PURE__ */ jsx9("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", "data-component": "ui-combobox" }),
+    /* @__PURE__ */ jsx9("div", { className: "authored-options", hidden: true, "aria-hidden": "true", "data-component": "ui-combobox", children: children ?? null })
+  ] });
+}
+
+// src/generated/UiContextMenu.tsx
+import { useLayoutEffect as useLayoutEffect11, useRef as useRef11 } from "react";
+
+// src/generated/UiMenu.tsx
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef10 } from "react";
+import { attachLoomaComponent as attachLoomaComponent9, updateComponentProps as updateComponentProps9 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var definition9 = { ...{ "contract": { "tag": "ui-menu", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "bottom-start" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "menu" }, { "kind": "literal", "name": "aria-orientation", "value": "vertical" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "menu__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiMenu(props) {
+  const { "for": prop0 = "", "open": prop1 = false, "placement": prop2 = "bottom-start", onSelect, onOpen, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef10(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "for": props["for"], "open": props["open"], "placement": props["placement"] };
+  useLayoutEffect10(() => root.current == null ? void 0 : attachLoomaComponent9(root.current, definition9, "ui-menu", componentProps), []);
+  useLayoutEffect10(() => {
+    if (root.current != null) updateComponentProps9(root.current, componentProps);
+  });
+  useLayoutEffect10(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener0 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener0);
+    return () => node.removeEventListener("select", listener0);
+  }, [onSelect]);
+  useLayoutEffect10(() => {
+    const node = root.current;
+    if (node == null || onOpen == null) return;
+    const listener1 = (event) => onOpen(event.detail, event);
+    node.addEventListener("open", listener1);
+    return () => node.removeEventListener("open", listener1);
+  }, [onOpen]);
+  useLayoutEffect10(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener2 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener2);
+    return () => node.removeEventListener("close", listener2);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx10("div", { ...nativeProps, "data-component": "ui-menu", "data-component-root": "ui-menu", role: "menu", "aria-orientation": "vertical", "data-state-open": void 0, ref: setRoot, children: /* @__PURE__ */ jsx10("div", { className: "menu__surface", "data-component": "ui-menu", children: children ?? null }) });
+}
+
+// src/generated/UiContextMenu.tsx
+import { attachLoomaComponent as attachLoomaComponent10, updateComponentProps as updateComponentProps10 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var definition10 = { ...{ "contract": { "tag": "ui-context-menu", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "menu" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "ui-menu", "attributes": [], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "focusTrigger", "expression": { "source": "'programmatic'", "ast": { "kind": "literal", "value": "programmatic" }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiContextMenu(props) {
+  const { "for": prop0 = "", "open": prop1 = false, onOpen, onClose, onSelect, slots, children, ref, ...nativeProps } = props;
+  const root = useRef11(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "for": props["for"], "open": props["open"] };
+  useLayoutEffect11(() => root.current == null ? void 0 : attachLoomaComponent10(root.current, definition10, "ui-context-menu", componentProps), []);
+  useLayoutEffect11(() => {
+    if (root.current != null) updateComponentProps10(root.current, componentProps);
+  });
+  useLayoutEffect11(() => {
+    const node = root.current;
+    if (node == null || onOpen == null) return;
+    const listener0 = (event) => onOpen(event.detail, event);
+    node.addEventListener("open", listener0);
+    return () => node.removeEventListener("open", listener0);
+  }, [onOpen]);
+  useLayoutEffect11(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener1 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener1);
+    return () => node.removeEventListener("close", listener1);
+  }, [onClose]);
+  useLayoutEffect11(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener2 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener2);
+    return () => node.removeEventListener("select", listener2);
+  }, [onSelect]);
+  return /* @__PURE__ */ jsx11("span", { ...nativeProps, "data-component": "ui-context-menu", "data-component-root": "ui-context-menu", "data-state-open": void 0, ref: setRoot, children: /* @__PURE__ */ jsx11("div", { className: "menu", "data-state-open": void 0, "data-component": "ui-context-menu", children: /* @__PURE__ */ jsx11(UiMenu, { "data-component": "ui-context-menu", children: children ?? null }) }) });
+}
+
+// src/generated/UiDialog.tsx
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef12 } from "react";
+import { attachLoomaComponent as attachLoomaComponent11, updateComponentProps as updateComponentProps11 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var definition11 = { ...{ "contract": { "tag": "ui-dialog", "props": { "dismissible": { "type": "boolean", "required": false, "target": { "attribute": "dismissible" }, "default": false }, "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" } }, "modal": { "type": "boolean", "required": false, "target": { "attribute": "modal" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "dialog", "attributes": [{ "kind": "attribute", "name": "aria-label", "expression": "accessibleLabel", "expressionPlan": { "source": "accessibleLabel", "ast": { "kind": "id", "name": "accessibleLabel" }, "dependencies": ["accessibleLabel"] } }], "children": [{ "kind": "element", "name": "header", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__header" }], "children": [{ "kind": "element", "name": "h2", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__title" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }], "flow": { "kind": "if", "test": "label", "testPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__close" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "aria-label", "value": "Close" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__body" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "footer", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__footer" }], "children": [{ "kind": "slot", "fallback": [], "name": "actions" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "accessibleLabel", "expression": { "source": "'Dialog'", "ast": { "kind": "literal", "value": "Dialog" }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "dialog", "choices": ["dialog"] } }, source: { file: import.meta.url }, css: "" };
+function UiDialog(props) {
+  const { "dismissible": prop0 = false, "for": prop1 = "", "label": prop2, "modal": prop3 = false, "open": prop4 = false, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef12(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "dismissible": props["dismissible"], "for": props["for"], "label": props["label"], "modal": props["modal"], "open": props["open"] };
+  useLayoutEffect12(() => root.current == null ? void 0 : attachLoomaComponent11(root.current, definition11, "ui-dialog", componentProps), []);
+  useLayoutEffect12(() => {
+    if (root.current != null) updateComponentProps11(root.current, componentProps);
+  });
+  useLayoutEffect12(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener0 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener0);
+    return () => node.removeEventListener("close", listener0);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs5("dialog", { ...nativeProps, "data-component": "ui-dialog", "data-component-root": "ui-dialog", "aria-label": void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsxs5("header", { className: "dialog__header", "data-component": "ui-dialog", children: [
+      /* @__PURE__ */ jsx12("h2", { className: "dialog__title", "data-component": "ui-dialog", children: /* @__PURE__ */ jsx12("template", { "data-component": "ui-dialog", children: prop2 }) }),
+      /* @__PURE__ */ jsx12("button", { className: "dialog__close", type: "button", "aria-label": "Close", "data-component": "ui-dialog" })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "dialog__body", "data-component": "ui-dialog", children: children ?? null }),
+    /* @__PURE__ */ jsx12("footer", { className: "dialog__footer", "data-component": "ui-dialog", children: slots?.["actions"] ?? null })
+  ] });
+}
+
+// src/generated/UiDisclosure.tsx
+import { useLayoutEffect as useLayoutEffect13, useRef as useRef13 } from "react";
+import { attachLoomaComponent as attachLoomaComponent12, updateComponentProps as updateComponentProps12 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var definition12 = { ...{ "contract": { "tag": "ui-disclosure", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "summary": { "type": "string", "required": false, "target": { "attribute": "summary" }, "default": "Details" } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__trigger" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "aria-controls", "expression": "contentId", "expressionPlan": { "source": "contentId", "ast": { "kind": "id", "name": "contentId" }, "dependencies": ["contentId"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "summary", "expressionPlan": { "source": "summary", "ast": { "kind": "id", "name": "summary" }, "dependencies": ["summary"] } }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__chevron" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__panel" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__panel-inner" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "contentId", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiDisclosure(props) {
+  const { "disabled": prop0 = false, "open": prop1 = false, "summary": prop2 = "Details", onOpen, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef13(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "open": props["open"], "summary": props["summary"] };
+  useLayoutEffect13(() => root.current == null ? void 0 : attachLoomaComponent12(root.current, definition12, "ui-disclosure", componentProps), []);
+  useLayoutEffect13(() => {
+    if (root.current != null) updateComponentProps12(root.current, componentProps);
+  });
+  useLayoutEffect13(() => {
+    const node = root.current;
+    if (node == null || onOpen == null) return;
+    const listener0 = (event) => onOpen(event.detail, event);
+    node.addEventListener("open", listener0);
+    return () => node.removeEventListener("open", listener0);
+  }, [onOpen]);
+  useLayoutEffect13(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener1 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener1);
+    return () => node.removeEventListener("close", listener1);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs6("div", { ...nativeProps, "data-component": "ui-disclosure", "data-component-root": "ui-disclosure", ref: setRoot, children: [
+    /* @__PURE__ */ jsxs6("button", { className: "disclosure__trigger", type: "button", "aria-controls": void 0, disabled: prop0 ?? void 0, "data-component": "ui-disclosure", children: [
+      /* @__PURE__ */ jsx13("span", { "data-component": "ui-disclosure", children: /* @__PURE__ */ jsx13("template", { "data-component": "ui-disclosure", children: prop2 }) }),
+      /* @__PURE__ */ jsx13("span", { className: "disclosure__chevron", "aria-hidden": "true", "data-component": "ui-disclosure" })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "disclosure__panel", "data-component": "ui-disclosure", children: /* @__PURE__ */ jsx13("div", { className: "disclosure__panel-inner", "data-component": "ui-disclosure", children: children ?? null }) })
+  ] });
+}
+
+// src/generated/UiEditable.tsx
+import { useLayoutEffect as useLayoutEffect14, useRef as useRef14 } from "react";
+import { attachLoomaComponent as attachLoomaComponent13, updateComponentProps as updateComponentProps13 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var definition13 = { ...{ "contract": { "tag": "ui-editable", "props": { "actions": { "type": "boolean", "required": false, "target": { "attribute": "actions" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "edit": { "type": "boolean", "required": false, "target": { "attribute": "edit" }, "default": false }, "hint": { "type": "string", "required": false, "target": { "attribute": "hint" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Edit value" }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-state-edit", "expression": "internalEdit", "expressionPlan": { "source": "internalEdit", "ast": { "kind": "id", "name": "internalEdit" }, "dependencies": ["internalEdit"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__field" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__preview" }, { "kind": "literal", "name": "type", "value": "button" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__text" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "internalValue", "expressionPlan": { "source": "internalValue", "ast": { "kind": "id", "name": "internalValue" }, "dependencies": ["internalValue"] } }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__hint" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "hint", "expressionPlan": { "source": "hint", "ast": { "kind": "id", "name": "hint" }, "dependencies": ["hint"] } }], "children": [] }], "flow": { "kind": "if", "test": "hint", "testPlan": { "source": "hint", "ast": { "kind": "id", "name": "hint" }, "dependencies": ["hint"] } } }] }, { "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__input" }, { "kind": "literal", "name": "type", "value": "text" }, { "kind": "attribute", "name": "value", "expression": "draft", "expressionPlan": { "source": "draft", "ast": { "kind": "id", "name": "draft" }, "dependencies": ["draft"] } }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__actions" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "data-action", "value": "save" }], "children": [{ "kind": "text", "value": "Save" }] }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "data-action", "value": "cancel" }], "children": [{ "kind": "text", "value": "Cancel" }] }], "flow": { "kind": "if", "test": "actions", "testPlan": { "source": "actions", "ast": { "kind": "id", "name": "actions" }, "dependencies": ["actions"] } } }] }, "declarations": [{ "kind": "state", "name": "internalEdit", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "draft", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "input", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "change", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "edit-change", "type": "object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditable(props) {
+  const { "actions": prop0 = false, "disabled": prop1 = false, "edit": prop2 = false, "hint": prop3 = "", "label": prop4 = "Edit value", "value": prop5 = "", onInput, onChange, onEditChange, slots, children, ref, ...nativeProps } = props;
+  const root = useRef14(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "actions": props["actions"], "disabled": props["disabled"], "edit": props["edit"], "hint": props["hint"], "label": props["label"], "value": props["value"] };
+  useLayoutEffect14(() => root.current == null ? void 0 : attachLoomaComponent13(root.current, definition13, "ui-editable", componentProps), []);
+  useLayoutEffect14(() => {
+    if (root.current != null) updateComponentProps13(root.current, componentProps);
+  });
+  useLayoutEffect14(() => {
+    const node = root.current;
+    if (node == null || onInput == null) return;
+    const listener0 = (event) => onInput(event.detail, event);
+    node.addEventListener("input", listener0);
+    return () => node.removeEventListener("input", listener0);
+  }, [onInput]);
+  useLayoutEffect14(() => {
+    const node = root.current;
+    if (node == null || onChange == null) return;
+    const listener1 = (event) => onChange(event.detail, event);
+    node.addEventListener("change", listener1);
+    return () => node.removeEventListener("change", listener1);
+  }, [onChange]);
+  useLayoutEffect14(() => {
+    const node = root.current;
+    if (node == null || onEditChange == null) return;
+    const listener2 = (event) => onEditChange(event.detail, event);
+    node.addEventListener("edit-change", listener2);
+    return () => node.removeEventListener("edit-change", listener2);
+  }, [onEditChange]);
+  return /* @__PURE__ */ jsxs7("div", { ...nativeProps, "data-component": "ui-editable", "data-component-root": "ui-editable", "data-state-edit": void 0, "data-disabled": prop1 ? "" : void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "editable__field", "data-component": "ui-editable", children: [
+      /* @__PURE__ */ jsxs7("button", { className: "editable__preview", type: "button", "data-component": "ui-editable", children: [
+        /* @__PURE__ */ jsx14("span", { className: "editable__text", "data-component": "ui-editable", children: /* @__PURE__ */ jsx14("template", { "data-component": "ui-editable", children: void 0 }) }),
+        /* @__PURE__ */ jsx14("span", { className: "editable__hint", "aria-hidden": "true", "data-component": "ui-editable", children: /* @__PURE__ */ jsx14("template", { "data-component": "ui-editable", children: prop3 }) })
+      ] }),
+      /* @__PURE__ */ jsx14("input", { className: "editable__input", type: "text", value: void 0, "data-component": "ui-editable" })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "editable__actions", "data-component": "ui-editable", children: [
+      /* @__PURE__ */ jsx14("button", { type: "button", "data-action": "save", "data-component": "ui-editable", children: "Save" }),
+      /* @__PURE__ */ jsx14("button", { type: "button", "data-action": "cancel", "data-component": "ui-editable", children: "Cancel" })
+    ] })
+  ] });
+}
+
+// src/generated/UiFormField.tsx
+import { useLayoutEffect as useLayoutEffect15, useRef as useRef15 } from "react";
+import { attachLoomaComponent as attachLoomaComponent14, updateComponentProps as updateComponentProps14 } from "@threadlabs/looma/core/declarative";
+import { jsxs as jsxs8 } from "react/jsx-runtime";
+var definition14 = { ...{ "contract": { "tag": "ui-form-field", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "data-invalid" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "data-required" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-invalid", "expression": "invalid", "expressionPlan": { "source": "invalid", "ast": { "kind": "id", "name": "invalid" }, "dependencies": ["invalid"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "data-required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "label" }, { "kind": "slot" }, { "kind": "slot", "fallback": [], "name": "help" }, { "kind": "slot", "fallback": [], "name": "error" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiFormField(props) {
+  const { "disabled": prop0 = false, "invalid": prop1 = false, "required": prop2 = false, slots, children, ref, ...nativeProps } = props;
+  const root = useRef15(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "invalid": props["invalid"], "required": props["required"] };
+  useLayoutEffect15(() => root.current == null ? void 0 : attachLoomaComponent14(root.current, definition14, "ui-form-field", componentProps), []);
+  useLayoutEffect15(() => {
+    if (root.current != null) updateComponentProps14(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsxs8("div", { ...nativeProps, "data-component": "ui-form-field", "data-component-root": "ui-form-field", "data-invalid": prop1 ? "" : void 0, "data-disabled": prop0 ? "" : void 0, "data-required": prop2 ? "" : void 0, ref: setRoot, children: [
+    slots?.["label"] ?? null,
+    children ?? null,
+    slots?.["help"] ?? null,
+    slots?.["error"] ?? null
+  ] });
+}
+
+// src/generated/UiIconButton.tsx
+import { useLayoutEffect as useLayoutEffect16, useRef as useRef16 } from "react";
+import { attachLoomaComponent as attachLoomaComponent15, updateComponentProps as updateComponentProps15 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var definition15 = { ...{ "contract": { "tag": "ui-icon-button", "props": { "anticipatory": { "type": "boolean", "required": false, "target": { "attribute": "anticipatory" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "" }, "round": { "type": "boolean", "required": false, "target": { "attribute": "data-round" }, "default": false }, "size": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "size" }, "default": "md" }, "variant": { "type": { "enum": ["ghost", "outline", "solid"] }, "required": false, "target": { "attribute": "variant" }, "default": "ghost" } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "data-round", "expression": "round", "expressionPlan": { "source": "round", "ast": { "kind": "id", "name": "round" }, "dependencies": ["round"] } }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function UiIconButton(props) {
+  const { "anticipatory": prop0 = false, "disabled": prop1 = false, "label": prop2 = "", "round": prop3 = false, "size": prop4 = "md", "variant": prop5 = "ghost", slots, children, ref, ...nativeProps } = props;
+  const root = useRef16(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "anticipatory": props["anticipatory"], "disabled": props["disabled"], "label": props["label"], "round": props["round"], "size": props["size"], "variant": props["variant"] };
+  useLayoutEffect16(() => root.current == null ? void 0 : attachLoomaComponent15(root.current, definition15, "ui-icon-button", componentProps), []);
+  useLayoutEffect16(() => {
+    if (root.current != null) updateComponentProps15(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx15("button", { ...nativeProps, "data-component": "ui-icon-button", "data-component-root": "ui-icon-button", disabled: prop1 ?? void 0, "data-round": prop3 ? "" : void 0, type: "button", "aria-label": prop2 ?? void 0, ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiInput.tsx
+import { useLayoutEffect as useLayoutEffect17, useRef as useRef17 } from "react";
+import { attachLoomaComponent as attachLoomaComponent16, updateComponentProps as updateComponentProps16 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var definition16 = { ...{ "contract": { "tag": "ui-input", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "input", "attributes": [{ "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "input", "choices": ["input"] } }, source: { file: import.meta.url }, css: "" };
+function UiInput(props) {
+  const { "disabled": prop0 = false, "invalid": prop1 = false, "readOnly": prop2 = false, "required": prop3 = false, "value": prop4, slots, children, ref, ...nativeProps } = props;
+  const root = useRef17(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "invalid": props["invalid"], "readonly": props["readOnly"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect17(() => root.current == null ? void 0 : attachLoomaComponent16(root.current, definition16, "ui-input", componentProps), []);
+  useLayoutEffect17(() => {
+    if (root.current != null) updateComponentProps16(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx16("input", { ...nativeProps, "data-component": "ui-input", "data-component-root": "ui-input", value: prop4 ?? void 0, disabled: prop0 ?? void 0, readOnly: prop2 ?? void 0, required: prop3 ?? void 0, ref: setRoot });
+}
+
+// src/generated/UiMenuItem.tsx
+import { useLayoutEffect as useLayoutEffect18, useRef as useRef18 } from "react";
+import { manageGeneratedProps as manageGeneratedProps2, updateGeneratedProps as updateGeneratedProps2 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function UiMenuItem(props) {
+  const { "disabled": prop0 = false, "value": prop1 = "", slots, children, ref, ...nativeProps } = props;
+  const root = useRef18(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "value": props["value"] };
+  useLayoutEffect18(() => root.current == null ? void 0 : manageGeneratedProps2(root.current, [
+    { name: "disabled", attribute: "data-disabled", value: props["disabled"], default: false, type: "boolean", required: false },
+    { name: "value", attribute: "data-value", value: props["value"], default: "", bound: true, type: "string", required: false }
+  ]), []);
+  useLayoutEffect18(() => {
+    if (root.current != null) updateGeneratedProps2(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx17("div", { ...nativeProps, "data-component": "ui-menu-item", "data-component-root": "ui-menu-item", role: "menuitem", "data-value": prop1 ?? void 0, ref: setRoot, children: /* @__PURE__ */ jsx17("span", { className: "menu-item__surface", "data-component": "ui-menu-item", children: children ?? null }) });
+}
+
+// src/generated/UiPopover.tsx
+import { useLayoutEffect as useLayoutEffect19, useRef as useRef19 } from "react";
+import { attachLoomaComponent as attachLoomaComponent17, updateComponentProps as updateComponentProps17 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var definition17 = { ...{ "contract": { "tag": "ui-popover", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "bottom-start" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "popover__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiPopover(props) {
+  const { "for": prop0 = "", "open": prop1 = false, "placement": prop2 = "bottom-start", onOpen, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef19(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "for": props["for"], "open": props["open"], "placement": props["placement"] };
+  useLayoutEffect19(() => root.current == null ? void 0 : attachLoomaComponent17(root.current, definition17, "ui-popover", componentProps), []);
+  useLayoutEffect19(() => {
+    if (root.current != null) updateComponentProps17(root.current, componentProps);
+  });
+  useLayoutEffect19(() => {
+    const node = root.current;
+    if (node == null || onOpen == null) return;
+    const listener0 = (event) => onOpen(event.detail, event);
+    node.addEventListener("open", listener0);
+    return () => node.removeEventListener("open", listener0);
+  }, [onOpen]);
+  useLayoutEffect19(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener1 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener1);
+    return () => node.removeEventListener("close", listener1);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx18("span", { ...nativeProps, "data-component": "ui-popover", "data-component-root": "ui-popover", "data-state-open": void 0, ref: setRoot, children: /* @__PURE__ */ jsx18("div", { className: "popover__surface", "data-component": "ui-popover", children: children ?? null }) });
+}
+
+// src/generated/UiRadioGroup.tsx
+import { useLayoutEffect as useLayoutEffect20, useRef as useRef20 } from "react";
+import { attachLoomaComponent as attachLoomaComponent18, updateComponentProps as updateComponentProps18 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var definition18 = { ...{ "contract": { "tag": "ui-radio-group", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Options" }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "data-orientation" }, "default": "horizontal" }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "fieldset", "attributes": [{ "kind": "literal", "name": "role", "value": "radiogroup" }, { "kind": "attribute", "name": "data-orientation", "expression": "orientation", "expressionPlan": { "source": "orientation", "ast": { "kind": "id", "name": "orientation" }, "dependencies": ["orientation"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "legend", "attributes": [], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }] }, { "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "fieldset", "choices": ["fieldset"] } }, source: { file: import.meta.url }, css: "" };
+function UiRadioGroup(props) {
+  const { "disabled": prop0 = false, "label": prop1 = "Options", "name": prop2 = "", "orientation": prop3 = "horizontal", "required": prop4 = false, "value": prop5 = "", onSelect, onChange, slots, children, ref, ...nativeProps } = props;
+  const root = useRef20(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "label": props["label"], "name": props["name"], "orientation": props["orientation"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect20(() => root.current == null ? void 0 : attachLoomaComponent18(root.current, definition18, "ui-radio-group", componentProps), []);
+  useLayoutEffect20(() => {
+    if (root.current != null) updateComponentProps18(root.current, componentProps);
+  });
+  useLayoutEffect20(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener0 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener0);
+    return () => node.removeEventListener("select", listener0);
+  }, [onSelect]);
+  useLayoutEffect20(() => {
+    const node = root.current;
+    if (node == null || onChange == null) return;
+    const listener1 = (event) => onChange(event.detail, event);
+    node.addEventListener("change", listener1);
+    return () => node.removeEventListener("change", listener1);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs9("fieldset", { ...nativeProps, "data-component": "ui-radio-group", "data-component-root": "ui-radio-group", role: "radiogroup", "data-orientation": prop3 ?? void 0, "data-disabled": prop0 ? "" : void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsx19("legend", { "data-component": "ui-radio-group", children: /* @__PURE__ */ jsx19("template", { "data-component": "ui-radio-group", children: prop1 }) }),
+    children ?? null
+  ] });
+}
+
+// src/generated/UiRadio.tsx
+import { useLayoutEffect as useLayoutEffect21, useRef as useRef21 } from "react";
+import { attachLoomaComponent as attachLoomaComponent19, updateComponentProps as updateComponentProps19 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var definition19 = { ...{ "contract": { "tag": "ui-radio", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "radio" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "name", "expression": "name", "expressionPlan": { "source": "name", "ast": { "kind": "id", "name": "name" }, "dependencies": ["name"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiRadio(props) {
+  const { "checked": prop0 = false, "disabled": prop1 = false, "name": prop2 = "", "required": prop3 = false, "value": prop4 = "on", onChange, slots, children, ref, ...nativeProps } = props;
+  const root = useRef21(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "checked": props["checked"], "disabled": props["disabled"], "name": props["name"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect21(() => root.current == null ? void 0 : attachLoomaComponent19(root.current, definition19, "ui-radio", componentProps), []);
+  useLayoutEffect21(() => {
+    if (root.current != null) updateComponentProps19(root.current, componentProps);
+  });
+  useLayoutEffect21(() => {
+    const node = root.current;
+    if (node == null || onChange == null) return;
+    const listener0 = (event) => onChange(event.detail, event);
+    node.addEventListener("change", listener0);
+    return () => node.removeEventListener("change", listener0);
+  }, [onChange]);
+  return /* @__PURE__ */ jsx20("span", { ...nativeProps, "data-component": "ui-radio", "data-component-root": "ui-radio", "data-disabled": prop1 ? "" : void 0, ref: setRoot, children: /* @__PURE__ */ jsxs10("label", { className: "control", "data-component": "ui-radio", children: [
+    /* @__PURE__ */ jsx20("input", { type: "radio", checked: void 0, name: prop2 ?? void 0, required: prop3 ?? void 0, value: prop4 ?? void 0, "data-component": "ui-radio" }),
+    /* @__PURE__ */ jsx20("span", { className: "label", "data-component": "ui-radio", children: children ?? null })
+  ] }) });
+}
+
+// src/generated/UiSearchResultRow.tsx
+import { useLayoutEffect as useLayoutEffect22, useRef as useRef22 } from "react";
+import { attachLoomaComponent as attachLoomaComponent20, updateComponentProps as updateComponentProps20 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var definition20 = { ...{ "contract": { "tag": "ui-search-result-row", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "selected": { "type": "boolean", "required": false, "target": { "attribute": "data-selected" }, "default": false } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "data-selected", "expression": "selected", "expressionPlan": { "source": "selected", "ast": { "kind": "id", "name": "selected" }, "dependencies": ["selected"] } }, { "kind": "literal", "name": "part", "value": "button" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__leading" }, { "kind": "literal", "name": "part", "value": "leading" }, { "kind": "attribute", "name": "hidden", "expression": "not hasLeading", "expressionPlan": { "source": "not hasLeading", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasLeading" } }, "dependencies": ["hasLeading"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__content" }, { "kind": "literal", "name": "part", "value": "content" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__title" }, { "kind": "literal", "name": "part", "value": "title" }], "children": [{ "kind": "slot", "fallback": [], "name": "title" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__meta" }, { "kind": "literal", "name": "part", "value": "meta" }, { "kind": "attribute", "name": "hidden", "expression": "not hasMeta", "expressionPlan": { "source": "not hasMeta", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasMeta" } }, "dependencies": ["hasMeta"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "meta" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__excerpt" }, { "kind": "literal", "name": "part", "value": "excerpt" }, { "kind": "attribute", "name": "hidden", "expression": "not hasExcerpt", "expressionPlan": { "source": "not hasExcerpt", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasExcerpt" } }, "dependencies": ["hasExcerpt"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "excerpt" }] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__trailing" }, { "kind": "literal", "name": "part", "value": "trailing" }, { "kind": "attribute", "name": "hidden", "expression": "not hasTrailing", "expressionPlan": { "source": "not hasTrailing", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasTrailing" } }, "dependencies": ["hasTrailing"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "trailing" }] }] }, "declarations": [{ "kind": "state", "name": "hasLeading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasMeta", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasExcerpt", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasTrailing", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function UiSearchResultRow(props) {
+  const { "disabled": prop0 = false, "selected": prop1 = false, slots, children, ref, ...nativeProps } = props;
+  const root = useRef22(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "selected": props["selected"] };
+  useLayoutEffect22(() => root.current == null ? void 0 : attachLoomaComponent20(root.current, definition20, "ui-search-result-row", componentProps), []);
+  useLayoutEffect22(() => {
+    if (root.current != null) updateComponentProps20(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsxs11("button", { ...nativeProps, "data-component": "ui-search-result-row", "data-component-root": "ui-search-result-row", className: "search-result-row", type: "button", disabled: prop0 ?? void 0, "data-selected": prop1 ? "" : void 0, part: "button", ref: setRoot, children: [
+    /* @__PURE__ */ jsx21("span", { className: "search-result-row__leading", part: "leading", hidden: void 0, "data-component": "ui-search-result-row", children: slots?.["leading"] ?? null }),
+    /* @__PURE__ */ jsxs11("span", { className: "search-result-row__content", part: "content", "data-component": "ui-search-result-row", children: [
+      /* @__PURE__ */ jsx21("span", { className: "search-result-row__title", part: "title", "data-component": "ui-search-result-row", children: slots?.["title"] ?? null }),
+      /* @__PURE__ */ jsx21("span", { className: "search-result-row__meta", part: "meta", hidden: void 0, "data-component": "ui-search-result-row", children: slots?.["meta"] ?? null }),
+      /* @__PURE__ */ jsx21("span", { className: "search-result-row__excerpt", part: "excerpt", hidden: void 0, "data-component": "ui-search-result-row", children: slots?.["excerpt"] ?? null })
+    ] }),
+    /* @__PURE__ */ jsx21("span", { className: "search-result-row__trailing", part: "trailing", hidden: void 0, "data-component": "ui-search-result-row", children: slots?.["trailing"] ?? null })
+  ] });
+}
+
+// src/generated/UiSearchShell.tsx
+import { useLayoutEffect as useLayoutEffect23, useRef as useRef23 } from "react";
+import { attachLoomaComponent as attachLoomaComponent21, updateComponentProps as updateComponentProps21 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var definition21 = { ...{ "contract": { "tag": "ui-search-shell", "props": { "dismissible": { "type": "boolean", "required": false, "target": { "attribute": "dismissible" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Search" }, "modal": { "type": "boolean", "required": false, "target": { "attribute": "modal" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "dialog", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell" }, { "kind": "literal", "name": "part", "value": "base" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__panel" }, { "kind": "literal", "name": "part", "value": "panel" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__search" }, { "kind": "literal", "name": "part", "value": "search" }], "children": [{ "kind": "slot", "fallback": [], "name": "search" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__status" }, { "kind": "literal", "name": "part", "value": "status" }], "children": [{ "kind": "slot", "fallback": [], "name": "status" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__body" }, { "kind": "literal", "name": "part", "value": "body" }], "children": [{ "kind": "slot", "fallback": [], "name": "body" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__footer" }, { "kind": "literal", "name": "part", "value": "footer" }], "children": [{ "kind": "slot", "fallback": [], "name": "footer" }] }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiSearchShell(props) {
+  const { "dismissible": prop0 = false, "label": prop1 = "Search", "modal": prop2 = false, "open": prop3 = false, onClose, slots, children, ref, ...nativeProps } = props;
+  const root = useRef23(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "dismissible": props["dismissible"], "label": props["label"], "modal": props["modal"], "open": props["open"] };
+  useLayoutEffect23(() => root.current == null ? void 0 : attachLoomaComponent21(root.current, definition21, "ui-search-shell", componentProps), []);
+  useLayoutEffect23(() => {
+    if (root.current != null) updateComponentProps21(root.current, componentProps);
+  });
+  useLayoutEffect23(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener0 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener0);
+    return () => node.removeEventListener("close", listener0);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx22("div", { ...nativeProps, "data-component": "ui-search-shell", "data-component-root": "ui-search-shell", ref: setRoot, children: /* @__PURE__ */ jsx22("dialog", { className: "search-shell", part: "base", "data-component": "ui-search-shell", children: /* @__PURE__ */ jsxs12("div", { className: "search-shell__panel", part: "panel", "data-component": "ui-search-shell", children: [
+    /* @__PURE__ */ jsx22("div", { className: "search-shell__search", part: "search", "data-component": "ui-search-shell", children: slots?.["search"] ?? null }),
+    /* @__PURE__ */ jsx22("div", { className: "search-shell__status", part: "status", "data-component": "ui-search-shell", children: slots?.["status"] ?? null }),
+    /* @__PURE__ */ jsx22("div", { className: "search-shell__body", part: "body", "data-component": "ui-search-shell", children: slots?.["body"] ?? null }),
+    /* @__PURE__ */ jsx22("div", { className: "search-shell__footer", part: "footer", "data-component": "ui-search-shell", children: slots?.["footer"] ?? null })
+  ] }) }) });
+}
+
+// src/generated/UiSelect.tsx
+import { useLayoutEffect as useLayoutEffect24, useRef as useRef24 } from "react";
+import { attachLoomaComponent as attachLoomaComponent22, updateComponentProps as updateComponentProps22 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var definition22 = { ...{ "contract": { "tag": "ui-select", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "multiple": { "type": "boolean", "required": false, "target": { "attribute": "multiple" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "select", "attributes": [{ "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "multiple", "expression": "multiple", "expressionPlan": { "source": "multiple", "ast": { "kind": "id", "name": "multiple" }, "dependencies": ["multiple"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "select", "choices": ["select"] } }, source: { file: import.meta.url }, css: "" };
+function UiSelect(props) {
+  const { "disabled": prop0 = false, "invalid": prop1 = false, "multiple": prop2 = false, "required": prop3 = false, "value": prop4, slots, children, ref, ...nativeProps } = props;
+  const root = useRef24(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "invalid": props["invalid"], "multiple": props["multiple"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect24(() => root.current == null ? void 0 : attachLoomaComponent22(root.current, definition22, "ui-select", componentProps), []);
+  useLayoutEffect24(() => {
+    if (root.current != null) updateComponentProps22(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx23("select", { ...nativeProps, "data-component": "ui-select", "data-component-root": "ui-select", disabled: prop0 ?? void 0, required: prop3 ?? void 0, multiple: prop2 ?? void 0, ref: setRoot });
+}
+
+// src/generated/UiSwitch.tsx
+import { useLayoutEffect as useLayoutEffect25, useRef as useRef25 } from "react";
+import { attachLoomaComponent as attachLoomaComponent23, updateComponentProps as updateComponentProps23 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var definition23 = { ...{ "contract": { "tag": "ui-switch", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "checkbox" }, { "kind": "literal", "name": "role", "value": "switch" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function UiSwitch(props) {
+  const { "checked": prop0 = false, "disabled": prop1 = false, "required": prop2 = false, "value": prop3 = "on", onChange, slots, children, ref, ...nativeProps } = props;
+  const root = useRef25(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "checked": props["checked"], "disabled": props["disabled"], "required": props["required"], "value": props["value"] };
+  useLayoutEffect25(() => root.current == null ? void 0 : attachLoomaComponent23(root.current, definition23, "ui-switch", componentProps), []);
+  useLayoutEffect25(() => {
+    if (root.current != null) updateComponentProps23(root.current, componentProps);
+  });
+  useLayoutEffect25(() => {
+    const node = root.current;
+    if (node == null || onChange == null) return;
+    const listener0 = (event) => onChange(event.detail, event);
+    node.addEventListener("change", listener0);
+    return () => node.removeEventListener("change", listener0);
+  }, [onChange]);
+  return /* @__PURE__ */ jsx24("span", { ...nativeProps, "data-component": "ui-switch", "data-component-root": "ui-switch", "data-disabled": prop1 ? "" : void 0, ref: setRoot, children: /* @__PURE__ */ jsxs13("label", { className: "control", "data-component": "ui-switch", children: [
+    /* @__PURE__ */ jsx24("input", { type: "checkbox", role: "switch", checked: void 0, required: prop2 ?? void 0, value: prop3 ?? void 0, "data-component": "ui-switch" }),
+    /* @__PURE__ */ jsx24("span", { className: "label", "data-component": "ui-switch", children: children ?? null })
+  ] }) });
+}
+
+// src/generated/UiTabs.tsx
+import { useLayoutEffect as useLayoutEffect26, useRef as useRef26 } from "react";
+import { attachLoomaComponent as attachLoomaComponent24, updateComponentProps as updateComponentProps24 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var definition24 = { ...{ "contract": { "tag": "ui-tabs", "props": { "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "Tabs" }, "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "data-orientation" }, "default": "horizontal" }, "stretch": { "type": "boolean", "required": false, "target": { "attribute": "data-stretch" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-orientation", "expression": "orientation", "expressionPlan": { "source": "orientation", "ast": { "kind": "id", "name": "orientation" }, "dependencies": ["orientation"] } }, { "kind": "attribute", "name": "data-stretch", "expression": "stretch", "expressionPlan": { "source": "stretch", "ast": { "kind": "id", "name": "stretch" }, "dependencies": ["stretch"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tabs__list" }, { "kind": "literal", "name": "role", "value": "tablist" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tabs__panels" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiTabs(props) {
+  const { "label": prop0 = "Tabs", "orientation": prop1 = "horizontal", "stretch": prop2 = false, "value": prop3 = "", onSelect, slots, children, ref, ...nativeProps } = props;
+  const root = useRef26(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "label": props["label"], "orientation": props["orientation"], "stretch": props["stretch"], "value": props["value"] };
+  useLayoutEffect26(() => root.current == null ? void 0 : attachLoomaComponent24(root.current, definition24, "ui-tabs", componentProps), []);
+  useLayoutEffect26(() => {
+    if (root.current != null) updateComponentProps24(root.current, componentProps);
+  });
+  useLayoutEffect26(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener0 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener0);
+    return () => node.removeEventListener("select", listener0);
+  }, [onSelect]);
+  return /* @__PURE__ */ jsxs14("div", { ...nativeProps, "data-component": "ui-tabs", "data-component-root": "ui-tabs", "data-orientation": prop1 ?? void 0, "data-stretch": prop2 ? "" : void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsx25("div", { className: "tabs__list", role: "tablist", "aria-label": prop0 ?? void 0, "data-component": "ui-tabs" }),
+    /* @__PURE__ */ jsx25("div", { className: "tabs__panels", "data-component": "ui-tabs", children: children ?? null })
+  ] });
+}
+
+// src/generated/UiTextarea.tsx
+import { useLayoutEffect as useLayoutEffect27, useRef as useRef27 } from "react";
+import { attachLoomaComponent as attachLoomaComponent25, updateComponentProps as updateComponentProps25 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var definition25 = { ...{ "contract": { "tag": "ui-textarea", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "rows": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "rows" }, "default": 4 }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "textarea", "attributes": [{ "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "rows", "expression": "rows", "expressionPlan": { "source": "rows", "ast": { "kind": "id", "name": "rows" }, "dependencies": ["rows"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "textarea", "choices": ["textarea"] } }, source: { file: import.meta.url }, css: "" };
+function UiTextarea(props) {
+  const { "disabled": prop0 = false, "invalid": prop1 = false, "readOnly": prop2 = false, "required": prop3 = false, "rows": prop4 = 4, "value": prop5, slots, children, ref, ...nativeProps } = props;
+  const root = useRef27(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "disabled": props["disabled"], "invalid": props["invalid"], "readonly": props["readOnly"], "required": props["required"], "rows": props["rows"], "value": props["value"] };
+  useLayoutEffect27(() => root.current == null ? void 0 : attachLoomaComponent25(root.current, definition25, "ui-textarea", componentProps), []);
+  useLayoutEffect27(() => {
+    if (root.current != null) updateComponentProps25(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx26("textarea", { ...nativeProps, "data-component": "ui-textarea", "data-component-root": "ui-textarea", value: prop5 ?? void 0, disabled: prop0 ?? void 0, readOnly: prop2 ?? void 0, required: prop3 ?? void 0, rows: prop4 ?? void 0, ref: setRoot });
+}
+
+// src/generated/UiToastRegion.tsx
+import { useLayoutEffect as useLayoutEffect28, useRef as useRef28 } from "react";
+import { attachLoomaComponent as attachLoomaComponent26, updateComponentProps as updateComponentProps26 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var definition26 = { ...{ "contract": { "tag": "ui-toast-region", "props": { "auto": { "type": "boolean", "required": false, "target": { "attribute": "auto" }, "default": false }, "duration": { "type": "number", "required": false, "target": { "attribute": "duration" }, "default": 5e3 }, "message": { "type": "string", "required": false, "target": { "attribute": "message" }, "default": "Notification" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "region" }, { "kind": "literal", "name": "aria-label", "value": "Notifications" }, { "kind": "literal", "name": "aria-live", "value": "polite" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "dismiss", "type": "object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "method", "name": "show", "exportName": "show", "returns": "promise(string)" }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiToastRegion(props) {
+  const { "auto": prop0 = false, "duration": prop1 = 5e3, "message": prop2 = "Notification", "open": prop3 = false, onClose, onDismiss, slots, children, ref, ...nativeProps } = props;
+  const root = useRef28(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "auto": props["auto"], "duration": props["duration"], "message": props["message"], "open": props["open"] };
+  useLayoutEffect28(() => root.current == null ? void 0 : attachLoomaComponent26(root.current, definition26, "ui-toast-region", componentProps), []);
+  useLayoutEffect28(() => {
+    if (root.current != null) updateComponentProps26(root.current, componentProps);
+  });
+  useLayoutEffect28(() => {
+    const node = root.current;
+    if (node == null || onClose == null) return;
+    const listener0 = (event) => onClose(event.detail, event);
+    node.addEventListener("close", listener0);
+    return () => node.removeEventListener("close", listener0);
+  }, [onClose]);
+  useLayoutEffect28(() => {
+    const node = root.current;
+    if (node == null || onDismiss == null) return;
+    const listener1 = (event) => onDismiss(event.detail, event);
+    node.addEventListener("dismiss", listener1);
+    return () => node.removeEventListener("dismiss", listener1);
+  }, [onDismiss]);
+  return /* @__PURE__ */ jsx27("div", { ...nativeProps, "data-component": "ui-toast-region", "data-component-root": "ui-toast-region", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-state-open": void 0, ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiTopBar.tsx
+import { useLayoutEffect as useLayoutEffect29, useRef as useRef29 } from "react";
+import { attachLoomaComponent as attachLoomaComponent27, updateComponentProps as updateComponentProps27 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var definition27 = { ...{ "contract": { "tag": "ui-top-bar", "props": {} }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "header", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar" }, { "kind": "literal", "name": "part", "value": "base" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__leading" }, { "kind": "attribute", "name": "hidden", "expression": "not hasLeading", "expressionPlan": { "source": "not hasLeading", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasLeading" } }, "dependencies": ["hasLeading"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__title" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__search" }, { "kind": "attribute", "name": "hidden", "expression": "not hasSearch", "expressionPlan": { "source": "not hasSearch", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasSearch" } }, "dependencies": ["hasSearch"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "search" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__actions" }, { "kind": "attribute", "name": "hidden", "expression": "not hasActions", "expressionPlan": { "source": "not hasActions", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasActions" } }, "dependencies": ["hasActions"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "actions" }] }] }] }, "declarations": [{ "kind": "state", "name": "hasLeading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasSearch", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasActions", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiTopBar(props) {
+  const { slots, children, ref, ...nativeProps } = props;
+  const root = useRef29(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = {};
+  useLayoutEffect29(() => root.current == null ? void 0 : attachLoomaComponent27(root.current, definition27, "ui-top-bar", componentProps), []);
+  useLayoutEffect29(() => {
+    if (root.current != null) updateComponentProps27(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx28("div", { ...nativeProps, "data-component": "ui-top-bar", "data-component-root": "ui-top-bar", ref: setRoot, children: /* @__PURE__ */ jsxs15("header", { className: "top-bar", part: "base", "data-component": "ui-top-bar", children: [
+    /* @__PURE__ */ jsx28("div", { className: "top-bar__leading", hidden: void 0, "data-component": "ui-top-bar", children: slots?.["leading"] ?? null }),
+    /* @__PURE__ */ jsx28("div", { className: "top-bar__title", "data-component": "ui-top-bar", children: children ?? null }),
+    /* @__PURE__ */ jsx28("div", { className: "top-bar__search", hidden: void 0, "data-component": "ui-top-bar", children: slots?.["search"] ?? null }),
+    /* @__PURE__ */ jsx28("div", { className: "top-bar__actions", hidden: void 0, "data-component": "ui-top-bar", children: slots?.["actions"] ?? null })
+  ] }) });
+}
+
+// src/generated/UiTreeItem.tsx
+import { useLayoutEffect as useLayoutEffect30, useRef as useRef30 } from "react";
+import { attachLoomaComponent as attachLoomaComponent28, updateComponentProps as updateComponentProps28 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var definition28 = { ...{ "contract": { "tag": "ui-tree-item", "props": { "accepts": { "type": "string", "required": false, "target": { "attribute": "data-accepts" }, "default": "" }, "container": { "type": "boolean", "required": false, "target": { "attribute": "container" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "dragType": { "type": "string", "required": false, "target": { "attribute": "dragtype" }, "default": "item" }, "dropDepth": { "type": "number", "required": false, "target": { "attribute": "dropdepth" } }, "dropScope": { "type": "string", "required": false, "target": { "attribute": "data-drop-scope" }, "default": "" }, "expanded": { "type": "boolean", "required": false, "target": { "attribute": "expanded" }, "default": false }, "itemId": { "type": "string", "required": false, "target": { "attribute": "itemid" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "" }, "selected": { "type": "boolean", "required": false, "target": { "attribute": "selected" }, "default": false }, "sortable": { "type": "boolean", "required": false, "target": { "attribute": "sortable" }, "default": false }, "subtreeDepth": { "type": "number", "required": false, "target": { "attribute": "subtreedepth" } } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "treeitem" }, { "kind": "attribute", "name": "data-drop-scope", "expression": "dropScope", "expressionPlan": { "source": "dropScope", "ast": { "kind": "id", "name": "dropScope" }, "dependencies": ["dropScope"] } }, { "kind": "attribute", "name": "data-accepts", "expression": "accepts", "expressionPlan": { "source": "accepts", "ast": { "kind": "id", "name": "accepts" }, "dependencies": ["accepts"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "row" }, { "kind": "literal", "name": "part", "value": "row" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "drag-handle" }, { "kind": "literal", "name": "part", "value": "drag-handle" }, { "kind": "literal", "name": "type", "value": "button" }], "children": [{ "kind": "element", "name": "svg", "attributes": [{ "kind": "literal", "name": "aria-hidden", "value": "true" }, { "kind": "literal", "name": "focusable", "value": "false" }, { "kind": "literal", "name": "viewBox", "value": "0 0 24 24" }, { "kind": "literal", "name": "fill", "value": "none" }, { "kind": "literal", "name": "stroke", "value": "currentColor" }, { "kind": "literal", "name": "stroke-width", "value": "2" }, { "kind": "literal", "name": "stroke-linecap", "value": "round" }, { "kind": "literal", "name": "stroke-linejoin", "value": "round" }], "children": [{ "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "9" }, { "kind": "literal", "name": "cy", "value": "12" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }, { "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "9" }, { "kind": "literal", "name": "cy", "value": "5" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }, { "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "9" }, { "kind": "literal", "name": "cy", "value": "19" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }, { "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "15" }, { "kind": "literal", "name": "cy", "value": "12" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }, { "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "15" }, { "kind": "literal", "name": "cy", "value": "5" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }, { "kind": "element", "name": "circle", "attributes": [{ "kind": "literal", "name": "cx", "value": "15" }, { "kind": "literal", "name": "cy", "value": "19" }, { "kind": "literal", "name": "r", "value": "1" }], "children": [] }] }], "flow": { "kind": "if", "test": "sortable and not disabled", "testPlan": { "source": "sortable and not disabled", "ast": { "kind": "binary", "op": "and", "left": { "kind": "id", "name": "sortable" }, "right": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "disabled" } } }, "dependencies": ["disabled", "sortable"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure" }, { "kind": "literal", "name": "part", "value": "disclosure" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "leading" }, { "kind": "literal", "name": "part", "value": "leading" }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }, { "kind": "literal", "name": "part", "value": "label" }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "actions" }, { "kind": "literal", "name": "part", "value": "actions" }], "children": [{ "kind": "slot", "fallback": [], "name": "actions" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "drop-indicator row-drop-indicator" }, { "kind": "literal", "name": "part", "value": "drop-indicator" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "children" }, { "kind": "literal", "name": "part", "value": "children" }, { "kind": "literal", "name": "role", "value": "group" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "drop-indicator subtree-drop-indicator" }, { "kind": "literal", "name": "part", "value": "drop-indicator" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, "declarations": [{ "kind": "state", "name": "internalExpanded", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "structuralLevel", "expression": { "source": "1", "ast": { "kind": "literal", "value": 1 }, "dependencies": [] } }, { "kind": "state", "name": "tabStop", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasChildren", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "expand", "type": "object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })", "bubbles": false, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiTreeItem(props) {
+  const { "accepts": prop0 = "", "container": prop1 = false, "disabled": prop2 = false, "dragType": prop3 = "item", "dropDepth": prop4, "dropScope": prop5 = "", "expanded": prop6 = false, "itemId": prop7 = "", "label": prop8 = "", "selected": prop9 = false, "sortable": prop10 = false, "subtreeDepth": prop11, onExpand, slots, children, ref, ...nativeProps } = props;
+  const root = useRef30(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "accepts": props["accepts"], "container": props["container"], "disabled": props["disabled"], "dragType": props["dragType"], "dropDepth": props["dropDepth"], "dropScope": props["dropScope"], "expanded": props["expanded"], "itemId": props["itemId"], "label": props["label"], "selected": props["selected"], "sortable": props["sortable"], "subtreeDepth": props["subtreeDepth"] };
+  useLayoutEffect30(() => root.current == null ? void 0 : attachLoomaComponent28(root.current, definition28, "ui-tree-item", componentProps), []);
+  useLayoutEffect30(() => {
+    if (root.current != null) updateComponentProps28(root.current, componentProps);
+  });
+  useLayoutEffect30(() => {
+    const node = root.current;
+    if (node == null || onExpand == null) return;
+    const listener0 = (event) => onExpand(event.detail, event);
+    node.addEventListener("expand", listener0);
+    return () => node.removeEventListener("expand", listener0);
+  }, [onExpand]);
+  return /* @__PURE__ */ jsxs16("div", { ...nativeProps, "data-component": "ui-tree-item", "data-component-root": "ui-tree-item", role: "treeitem", "data-drop-scope": prop5 ?? void 0, "data-accepts": prop0 ?? void 0, ref: setRoot, children: [
+    /* @__PURE__ */ jsxs16("div", { className: "row", part: "row", "data-component": "ui-tree-item", children: [
+      /* @__PURE__ */ jsx29("button", { className: "drag-handle", part: "drag-handle", type: "button", "data-component": "ui-tree-item", children: /* @__PURE__ */ jsxs16("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "data-component": "ui-tree-item", children: [
+        /* @__PURE__ */ jsx29("circle", { cx: "9", cy: "12", r: "1", "data-component": "ui-tree-item" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "9", cy: "5", r: "1", "data-component": "ui-tree-item" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "9", cy: "19", r: "1", "data-component": "ui-tree-item" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "15", cy: "12", r: "1", "data-component": "ui-tree-item" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "15", cy: "5", r: "1", "data-component": "ui-tree-item" }),
+        /* @__PURE__ */ jsx29("circle", { cx: "15", cy: "19", r: "1", "data-component": "ui-tree-item" })
+      ] }) }),
+      /* @__PURE__ */ jsx29("button", { className: "disclosure", part: "disclosure", type: "button", disabled: prop2 ?? void 0, "data-component": "ui-tree-item", children: /* @__PURE__ */ jsx29("span", { className: "disclosure-icon", "aria-hidden": "true", "data-component": "ui-tree-item" }) }),
+      /* @__PURE__ */ jsx29("span", { className: "leading", part: "leading", "data-component": "ui-tree-item", children: slots?.["leading"] ?? null }),
+      /* @__PURE__ */ jsx29("span", { className: "label", part: "label", "data-component": "ui-tree-item" }),
+      /* @__PURE__ */ jsx29("span", { className: "actions", part: "actions", "data-component": "ui-tree-item", children: slots?.["actions"] ?? null }),
+      /* @__PURE__ */ jsx29("span", { className: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true", "data-component": "ui-tree-item" })
+    ] }),
+    /* @__PURE__ */ jsx29("div", { className: "children", part: "children", role: "group", "data-component": "ui-tree-item", children: children ?? null }),
+    /* @__PURE__ */ jsx29("span", { className: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true", "data-component": "ui-tree-item" })
+  ] });
+}
+
+// src/generated/UiTree.tsx
+import { useLayoutEffect as useLayoutEffect31, useRef as useRef31 } from "react";
+import { attachLoomaComponent as attachLoomaComponent29, updateComponentProps as updateComponentProps29 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var definition29 = { ...{ "contract": { "tag": "ui-tree", "props": { "hoverExpandDelay": { "type": "number", "required": false, "target": { "attribute": "hoverexpanddelay" }, "default": 700 }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Tree" }, "maxDepth": { "type": "number", "required": false, "target": { "attribute": "maxdepth" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "tree" }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "event", "name": "reorder", "type": "object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "reorder-rejected", "type": "object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiTree(props) {
+  const { "hoverExpandDelay": prop0 = 700, "label": prop1 = "Tree", "maxDepth": prop2 = 0, onReorder, onReorderRejected, slots, children, ref, ...nativeProps } = props;
+  const root = useRef31(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "hoverExpandDelay": props["hoverExpandDelay"], "label": props["label"], "maxDepth": props["maxDepth"] };
+  useLayoutEffect31(() => root.current == null ? void 0 : attachLoomaComponent29(root.current, definition29, "ui-tree", componentProps), []);
+  useLayoutEffect31(() => {
+    if (root.current != null) updateComponentProps29(root.current, componentProps);
+  });
+  useLayoutEffect31(() => {
+    const node = root.current;
+    if (node == null || onReorder == null) return;
+    const listener0 = (event) => onReorder(event.detail, event);
+    node.addEventListener("reorder", listener0);
+    return () => node.removeEventListener("reorder", listener0);
+  }, [onReorder]);
+  useLayoutEffect31(() => {
+    const node = root.current;
+    if (node == null || onReorderRejected == null) return;
+    const listener1 = (event) => onReorderRejected(event.detail, event);
+    node.addEventListener("reorder-rejected", listener1);
+    return () => node.removeEventListener("reorder-rejected", listener1);
+  }, [onReorderRejected]);
+  return /* @__PURE__ */ jsx30("div", { ...nativeProps, "data-component": "ui-tree", "data-component-root": "ui-tree", role: "tree", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiCluster.tsx
+import { useLayoutEffect as useLayoutEffect32, useRef as useRef32 } from "react";
+import { manageGeneratedProps as manageGeneratedProps3, updateGeneratedProps as updateGeneratedProps3 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function UiCluster(props) {
+  const { "align": prop0, "gap": prop1, slots, children, ref, ...nativeProps } = props;
+  const root = useRef32(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "align": props["align"], "gap": props["gap"] };
+  useLayoutEffect32(() => root.current == null ? void 0 : manageGeneratedProps3(root.current, [
+    { name: "align", attribute: "data-align", value: props["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: props["gap"], type: ["xs", "s", "m", "l", "xl"], required: false }
+  ]), []);
+  useLayoutEffect32(() => {
+    if (root.current != null) updateGeneratedProps3(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx31("div", { ...nativeProps, "data-component": "ui-cluster", "data-component-root": "ui-cluster", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiContainer.tsx
+import { useLayoutEffect as useLayoutEffect33, useRef as useRef33 } from "react";
+import { manageGeneratedProps as manageGeneratedProps4, updateGeneratedProps as updateGeneratedProps4 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function UiContainer(props) {
+  const { "gutters": prop0, "measure": prop1, slots, children, ref, ...nativeProps } = props;
+  const root = useRef33(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "gutters": props["gutters"], "measure": props["measure"] };
+  useLayoutEffect33(() => root.current == null ? void 0 : manageGeneratedProps4(root.current, [
+    { name: "gutters", attribute: "data-gutters", value: props["gutters"], type: ["s", "m", "l"], required: false },
+    { name: "measure", attribute: "data-measure", value: props["measure"], type: ["narrow", "wide"], required: false }
+  ]), []);
+  useLayoutEffect33(() => {
+    if (root.current != null) updateGeneratedProps4(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx32("div", { ...nativeProps, "data-component": "ui-container", "data-component-root": "ui-container", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiGrid.tsx
+import { useLayoutEffect as useLayoutEffect34, useRef as useRef34 } from "react";
+import { manageGeneratedProps as manageGeneratedProps5, updateGeneratedProps as updateGeneratedProps5 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function UiGrid(props) {
+  const { "gap": prop0, "min": prop1, slots, children, ref, ...nativeProps } = props;
+  const root = useRef34(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "gap": props["gap"], "min": props["min"] };
+  useLayoutEffect34(() => root.current == null ? void 0 : manageGeneratedProps5(root.current, [
+    { name: "gap", attribute: "data-gap", value: props["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "min", attribute: "data-min", value: props["min"], type: ["sm", "md", "lg"], required: false }
+  ]), []);
+  useLayoutEffect34(() => {
+    if (root.current != null) updateGeneratedProps5(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx33("div", { ...nativeProps, "data-component": "ui-grid", "data-component-root": "ui-grid", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiReel.tsx
+import { useLayoutEffect as useLayoutEffect35, useRef as useRef35 } from "react";
+import { attachLoomaComponent as attachLoomaComponent30, updateComponentProps as updateComponentProps30 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var definition30 = { ...{ "contract": { "tag": "ui-reel", "props": { "gap": { "type": { "enum": ["xs", "s", "m", "l", "xl"] }, "required": false, "target": { "attribute": "gap" } }, "itemWidth": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "itemwidth" } }, "snap": { "type": { "enum": ["start", "center"] }, "required": false, "target": { "attribute": "snap" } } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiReel(props) {
+  const { "gap": prop0, "itemWidth": prop1, "snap": prop2, slots, children, ref, ...nativeProps } = props;
+  const root = useRef35(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "gap": props["gap"], "itemWidth": props["itemWidth"], "snap": props["snap"] };
+  useLayoutEffect35(() => root.current == null ? void 0 : attachLoomaComponent30(root.current, definition30, "ui-reel", componentProps), []);
+  useLayoutEffect35(() => {
+    if (root.current != null) updateComponentProps30(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx34("div", { ...nativeProps, "data-component": "ui-reel", "data-component-root": "ui-reel", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiSeparator.tsx
+import { useLayoutEffect as useLayoutEffect36, useRef as useRef36 } from "react";
+import { attachLoomaComponent as attachLoomaComponent31, updateComponentProps as updateComponentProps31 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var definition31 = { ...{ "contract": { "tag": "ui-separator", "props": { "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "orientation" }, "default": "horizontal" } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiSeparator(props) {
+  const { "orientation": prop0 = "horizontal", slots, children, ref, ...nativeProps } = props;
+  const root = useRef36(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "orientation": props["orientation"] };
+  useLayoutEffect36(() => root.current == null ? void 0 : attachLoomaComponent31(root.current, definition31, "ui-separator", componentProps), []);
+  useLayoutEffect36(() => {
+    if (root.current != null) updateComponentProps31(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx35("div", { ...nativeProps, "data-component": "ui-separator", "data-component-root": "ui-separator", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiSidebar.tsx
+import { useLayoutEffect as useLayoutEffect37, useRef as useRef37 } from "react";
+import { attachLoomaComponent as attachLoomaComponent32, updateComponentProps as updateComponentProps32 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var definition32 = { ...{ "contract": { "tag": "ui-sidebar", "props": { "breakpoint": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "breakpoint" }, "default": "md" }, "collapsed": { "type": "boolean", "required": false, "target": { "attribute": "collapsed" }, "default": false }, "maxWidth": { "type": "number", "required": false, "target": { "attribute": "maxwidth" }, "default": 480 }, "minWidth": { "type": "number", "required": false, "target": { "attribute": "minwidth" }, "default": 200 }, "resizable": { "type": "boolean", "required": false, "target": { "attribute": "resizable" }, "default": false }, "resizeLabel": { "type": "string", "required": false, "target": { "attribute": "resizelabel" }, "default": "Resize sidebar" }, "resizeStep": { "type": "number", "required": false, "target": { "attribute": "resizestep" }, "default": 16 }, "side": { "type": { "enum": ["start", "end"] }, "required": false, "target": { "attribute": "side" }, "default": "start" }, "width": { "type": "number", "required": false, "target": { "attribute": "width" }, "default": 0 } } }, "template": { "kind": "element", "name": "aside", "attributes": [{ "kind": "attribute", "name": "data-state-collapsed", "expression": "internalCollapsed", "expressionPlan": { "source": "internalCollapsed", "ast": { "kind": "id", "name": "internalCollapsed" }, "dependencies": ["internalCollapsed"] } }, { "kind": "attribute", "name": "data-state-drawer", "expression": "drawer", "expressionPlan": { "source": "drawer", "ast": { "kind": "id", "name": "drawer" }, "dependencies": ["drawer"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "sidebar__content" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalCollapsed", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "drawer", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "resize", "type": "object({ width: number, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "toggle", "type": "object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "aside", "choices": ["aside"] } }, source: { file: import.meta.url }, css: "" };
+function UiSidebar(props) {
+  const { "breakpoint": prop0 = "md", "collapsed": prop1 = false, "maxWidth": prop2 = 480, "minWidth": prop3 = 200, "resizable": prop4 = false, "resizeLabel": prop5 = "Resize sidebar", "resizeStep": prop6 = 16, "side": prop7 = "start", "width": prop8 = 0, onResize, onToggle, slots, children, ref, ...nativeProps } = props;
+  const root = useRef37(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "breakpoint": props["breakpoint"], "collapsed": props["collapsed"], "maxWidth": props["maxWidth"], "minWidth": props["minWidth"], "resizable": props["resizable"], "resizeLabel": props["resizeLabel"], "resizeStep": props["resizeStep"], "side": props["side"], "width": props["width"] };
+  useLayoutEffect37(() => root.current == null ? void 0 : attachLoomaComponent32(root.current, definition32, "ui-sidebar", componentProps), []);
+  useLayoutEffect37(() => {
+    if (root.current != null) updateComponentProps32(root.current, componentProps);
+  });
+  useLayoutEffect37(() => {
+    const node = root.current;
+    if (node == null || onResize == null) return;
+    const listener0 = (event) => onResize(event.detail, event);
+    node.addEventListener("resize", listener0);
+    return () => node.removeEventListener("resize", listener0);
+  }, [onResize]);
+  useLayoutEffect37(() => {
+    const node = root.current;
+    if (node == null || onToggle == null) return;
+    const listener1 = (event) => onToggle(event.detail, event);
+    node.addEventListener("toggle", listener1);
+    return () => node.removeEventListener("toggle", listener1);
+  }, [onToggle]);
+  return /* @__PURE__ */ jsx36("aside", { ...nativeProps, "data-component": "ui-sidebar", "data-component-root": "ui-sidebar", "data-state-collapsed": void 0, "data-state-drawer": void 0, ref: setRoot, children: /* @__PURE__ */ jsx36("div", { className: "sidebar__content", "data-component": "ui-sidebar", children: children ?? null }) });
+}
+
+// src/generated/UiStack.tsx
+import { useLayoutEffect as useLayoutEffect38, useRef as useRef38 } from "react";
+import { manageGeneratedProps as manageGeneratedProps6, updateGeneratedProps as updateGeneratedProps6 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx37 } from "react/jsx-runtime";
+function UiStack(props) {
+  const { "align": prop0, "gap": prop1, "justify": prop2, slots, children, ref, ...nativeProps } = props;
+  const root = useRef38(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "align": props["align"], "gap": props["gap"], "justify": props["justify"] };
+  useLayoutEffect38(() => root.current == null ? void 0 : manageGeneratedProps6(root.current, [
+    { name: "align", attribute: "data-align", value: props["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: props["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "justify", attribute: "data-justify", value: props["justify"], type: ["start", "center", "end", "between"], required: false }
+  ]), []);
+  useLayoutEffect38(() => {
+    if (root.current != null) updateGeneratedProps6(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx37("div", { ...nativeProps, "data-component": "ui-stack", "data-component-root": "ui-stack", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiSwitcher.tsx
+import { useLayoutEffect as useLayoutEffect39, useRef as useRef39 } from "react";
+import { manageGeneratedProps as manageGeneratedProps7, updateGeneratedProps as updateGeneratedProps7 } from "@threadlabs/looma/core/declarative-generated";
+import { jsx as jsx38 } from "react/jsx-runtime";
+function UiSwitcher(props) {
+  const { "align": prop0, "gap": prop1, "threshold": prop2, slots, children, ref, ...nativeProps } = props;
+  const root = useRef39(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "align": props["align"], "gap": props["gap"], "threshold": props["threshold"] };
+  useLayoutEffect39(() => root.current == null ? void 0 : manageGeneratedProps7(root.current, [
+    { name: "align", attribute: "data-align", value: props["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: props["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "threshold", attribute: "data-threshold", value: props["threshold"], type: ["xs", "sm", "md", "lg"], required: false }
+  ]), []);
+  useLayoutEffect39(() => {
+    if (root.current != null) updateGeneratedProps7(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx38("div", { ...nativeProps, "data-component": "ui-switcher", "data-component-root": "ui-switcher", ref: setRoot, children: children ?? null });
+}
+
+// src/generated/UiEditorInsertTableGrid.tsx
+import { useLayoutEffect as useLayoutEffect40, useRef as useRef40 } from "react";
+import { attachLoomaComponent as attachLoomaComponent33, updateComponentProps as updateComponentProps33 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var definition33 = { ...{ "contract": { "tag": "ui-editor-insert-table-grid", "props": { "headerRow": { "type": "boolean", "required": false, "target": { "attribute": "headerrow" }, "default": false }, "maxCols": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "maxcols" }, "default": 8 }, "maxRows": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "maxrows" }, "default": 8 }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "insert", "type": "object({ rows: integer, cols: integer, withHeaderRow: boolean })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorInsertTableGrid(props) {
+  const { "headerRow": prop0 = false, "maxCols": prop1 = 8, "maxRows": prop2 = 8, "open": prop3 = false, onInsert, slots, children, ref, ...nativeProps } = props;
+  const root = useRef40(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "headerRow": props["headerRow"], "maxCols": props["maxCols"], "maxRows": props["maxRows"], "open": props["open"] };
+  useLayoutEffect40(() => root.current == null ? void 0 : attachLoomaComponent33(root.current, definition33, "ui-editor-insert-table-grid", componentProps), []);
+  useLayoutEffect40(() => {
+    if (root.current != null) updateComponentProps33(root.current, componentProps);
+  });
+  useLayoutEffect40(() => {
+    const node = root.current;
+    if (node == null || onInsert == null) return;
+    const listener0 = (event) => onInsert(event.detail, event);
+    node.addEventListener("insert", listener0);
+    return () => node.removeEventListener("insert", listener0);
+  }, [onInsert]);
+  return /* @__PURE__ */ jsx39("div", { ...nativeProps, "data-component": "ui-editor-insert-table-grid", "data-component-root": "ui-editor-insert-table-grid", ref: setRoot });
+}
+
+// src/generated/UiEditorMentionMenu.tsx
+import { useLayoutEffect as useLayoutEffect41, useRef as useRef41 } from "react";
+import { attachLoomaComponent as attachLoomaComponent34, updateComponentProps as updateComponentProps34 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var definition34 = { ...{ "contract": { "tag": "ui-editor-mention-menu", "props": { "anchorRect": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "right", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "bottom", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "x", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "y", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "anchorrect" } }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "id", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "label", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "detail", "type": { "kind": "terminal", "name": "string" }, "optional": true }, { "name": "initials", "type": { "kind": "terminal", "name": "string" }, "optional": true }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "loading": { "type": "boolean", "required": false, "target": { "attribute": "loading" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "query": { "type": "string", "required": false, "target": { "attribute": "query" }, "default": "" }, "selectedIndex": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "selectedindex" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "highlight", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorMentionMenu(props) {
+  const { "anchorRect": prop0, "items": prop1, "loading": prop2 = false, "open": prop3 = false, "query": prop4 = "", "selectedIndex": prop5 = 0, onHighlight, onSelect, slots, children, ref, ...nativeProps } = props;
+  const root = useRef41(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "anchorRect": props["anchorRect"], "items": props["items"], "loading": props["loading"], "open": props["open"], "query": props["query"], "selectedIndex": props["selectedIndex"] };
+  useLayoutEffect41(() => root.current == null ? void 0 : attachLoomaComponent34(root.current, definition34, "ui-editor-mention-menu", componentProps), []);
+  useLayoutEffect41(() => {
+    if (root.current != null) updateComponentProps34(root.current, componentProps);
+  });
+  useLayoutEffect41(() => {
+    const node = root.current;
+    if (node == null || onHighlight == null) return;
+    const listener0 = (event) => onHighlight(event.detail, event);
+    node.addEventListener("highlight", listener0);
+    return () => node.removeEventListener("highlight", listener0);
+  }, [onHighlight]);
+  useLayoutEffect41(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener1 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener1);
+    return () => node.removeEventListener("select", listener1);
+  }, [onSelect]);
+  return /* @__PURE__ */ jsx40("div", { ...nativeProps, "data-component": "ui-editor-mention-menu", "data-component-root": "ui-editor-mention-menu", ref: setRoot });
+}
+
+// src/generated/UiEditorSlashMenu.tsx
+import { useLayoutEffect as useLayoutEffect42, useRef as useRef42 } from "react";
+import { attachLoomaComponent as attachLoomaComponent35, updateComponentProps as updateComponentProps35 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var definition35 = { ...{ "contract": { "tag": "ui-editor-slash-menu", "props": { "anchorRect": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "right", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "bottom", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "x", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "y", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "anchorrect" } }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "title", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "description", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "icon", "type": { "kind": "terminal", "name": "string" }, "optional": false }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "query": { "type": "string", "required": false, "target": { "attribute": "query" }, "default": "" }, "selectedIndex": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "selectedindex" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "highlight", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorSlashMenu(props) {
+  const { "anchorRect": prop0, "items": prop1, "open": prop2 = false, "query": prop3 = "", "selectedIndex": prop4 = 0, onHighlight, onSelect, slots, children, ref, ...nativeProps } = props;
+  const root = useRef42(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "anchorRect": props["anchorRect"], "items": props["items"], "open": props["open"], "query": props["query"], "selectedIndex": props["selectedIndex"] };
+  useLayoutEffect42(() => root.current == null ? void 0 : attachLoomaComponent35(root.current, definition35, "ui-editor-slash-menu", componentProps), []);
+  useLayoutEffect42(() => {
+    if (root.current != null) updateComponentProps35(root.current, componentProps);
+  });
+  useLayoutEffect42(() => {
+    const node = root.current;
+    if (node == null || onHighlight == null) return;
+    const listener0 = (event) => onHighlight(event.detail, event);
+    node.addEventListener("highlight", listener0);
+    return () => node.removeEventListener("highlight", listener0);
+  }, [onHighlight]);
+  useLayoutEffect42(() => {
+    const node = root.current;
+    if (node == null || onSelect == null) return;
+    const listener1 = (event) => onSelect(event.detail, event);
+    node.addEventListener("select", listener1);
+    return () => node.removeEventListener("select", listener1);
+  }, [onSelect]);
+  return /* @__PURE__ */ jsx41("div", { ...nativeProps, "data-component": "ui-editor-slash-menu", "data-component-root": "ui-editor-slash-menu", ref: setRoot });
+}
+
+// src/generated/UiEditorTableContextMenu.tsx
+import { useLayoutEffect as useLayoutEffect43, useRef as useRef43 } from "react";
+import { attachLoomaComponent as attachLoomaComponent36, updateComponentProps as updateComponentProps36 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var definition36 = { ...{ "contract": { "tag": "ui-editor-table-context-menu", "props": { "actions": { "type": { "kind": "list", "item": { "kind": "union", "members": [{ "kind": "keyword", "value": "align-left" }, { "kind": "keyword", "value": "align-center" }, { "kind": "keyword", "value": "align-right" }, { "kind": "keyword", "value": "background-none" }, { "kind": "keyword", "value": "background-gray" }, { "kind": "keyword", "value": "background-yellow" }, { "kind": "keyword", "value": "background-blue" }, { "kind": "keyword", "value": "background-green" }, { "kind": "keyword", "value": "background-red" }, { "kind": "keyword", "value": "add-row-before" }, { "kind": "keyword", "value": "add-row-after" }, { "kind": "keyword", "value": "add-column-before" }, { "kind": "keyword", "value": "add-column-after" }, { "kind": "keyword", "value": "clear-cells" }, { "kind": "keyword", "value": "merge-cells" }, { "kind": "keyword", "value": "split-cell" }, { "kind": "keyword", "value": "delete-row" }, { "kind": "keyword", "value": "delete-column" }, { "kind": "keyword", "value": "delete-table" }] } }, "required": false, "target": { "attribute": "actions" } }, "cellBackground": { "type": "string", "required": false, "target": { "attribute": "cellbackground" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorTableContextMenu(props) {
+  const { "actions": prop0, "cellBackground": prop1 = "", "open": prop2 = false, onAction, slots, children, ref, ...nativeProps } = props;
+  const root = useRef43(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "actions": props["actions"], "cellBackground": props["cellBackground"], "open": props["open"] };
+  useLayoutEffect43(() => root.current == null ? void 0 : attachLoomaComponent36(root.current, definition36, "ui-editor-table-context-menu", componentProps), []);
+  useLayoutEffect43(() => {
+    if (root.current != null) updateComponentProps36(root.current, componentProps);
+  });
+  useLayoutEffect43(() => {
+    const node = root.current;
+    if (node == null || onAction == null) return;
+    const listener0 = (event) => onAction(event.detail, event);
+    node.addEventListener("action", listener0);
+    return () => node.removeEventListener("action", listener0);
+  }, [onAction]);
+  return /* @__PURE__ */ jsx42("div", { ...nativeProps, "data-component": "ui-editor-table-context-menu", "data-component-root": "ui-editor-table-context-menu", ref: setRoot });
+}
+
+// src/generated/UiEditorTableOverlay.tsx
+import { useLayoutEffect as useLayoutEffect44, useRef as useRef44 } from "react";
+import { attachLoomaComponent as attachLoomaComponent37, updateComponentProps as updateComponentProps37 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var definition37 = { ...{ "contract": { "tag": "ui-editor-table-overlay", "props": { "geometry": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "rowBoundaries", "type": { "kind": "list", "item": { "kind": "terminal", "name": "number" } }, "optional": false }, { "name": "columnBoundaries", "type": { "kind": "list", "item": { "kind": "terminal", "name": "number" } }, "optional": false }, { "name": "activeCell", "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "rowIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }, { "name": "columnIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }], "open": false }, { "kind": "terminal", "name": "null" }] }, "optional": false }, { "name": "hoveredCell", "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "rowIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }, { "name": "columnIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }], "open": false }, { "kind": "terminal", "name": "null" }] }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "geometry" } }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string, boundaryIndex?: integer, rowIndex?: integer, columnIndex?: integer, anchor?: object({ left: number, top: number, right: number, bottom: number }) })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorTableOverlay(props) {
+  const { "geometry": prop0, "open": prop1 = false, onAction, slots, children, ref, ...nativeProps } = props;
+  const root = useRef44(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "geometry": props["geometry"], "open": props["open"] };
+  useLayoutEffect44(() => root.current == null ? void 0 : attachLoomaComponent37(root.current, definition37, "ui-editor-table-overlay", componentProps), []);
+  useLayoutEffect44(() => {
+    if (root.current != null) updateComponentProps37(root.current, componentProps);
+  });
+  useLayoutEffect44(() => {
+    const node = root.current;
+    if (node == null || onAction == null) return;
+    const listener0 = (event) => onAction(event.detail, event);
+    node.addEventListener("action", listener0);
+    return () => node.removeEventListener("action", listener0);
+  }, [onAction]);
+  return /* @__PURE__ */ jsx43("div", { ...nativeProps, "data-component": "ui-editor-table-overlay", "data-component-root": "ui-editor-table-overlay", ref: setRoot });
+}
+
+// src/generated/UiEditorTableToolbar.tsx
+import { useLayoutEffect as useLayoutEffect45, useRef as useRef45 } from "react";
+import { attachLoomaComponent as attachLoomaComponent38, updateComponentProps as updateComponentProps38 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var definition38 = { ...{ "contract": { "tag": "ui-editor-table-toolbar", "props": { "actions": { "type": { "kind": "list", "item": { "kind": "union", "members": [{ "kind": "keyword", "value": "align-left" }, { "kind": "keyword", "value": "align-center" }, { "kind": "keyword", "value": "align-right" }, { "kind": "keyword", "value": "background-none" }, { "kind": "keyword", "value": "background-gray" }, { "kind": "keyword", "value": "background-yellow" }, { "kind": "keyword", "value": "background-blue" }, { "kind": "keyword", "value": "background-green" }, { "kind": "keyword", "value": "background-red" }, { "kind": "keyword", "value": "add-row-before" }, { "kind": "keyword", "value": "add-row-after" }, { "kind": "keyword", "value": "add-column-before" }, { "kind": "keyword", "value": "add-column-after" }, { "kind": "keyword", "value": "clear-cells" }, { "kind": "keyword", "value": "merge-cells" }, { "kind": "keyword", "value": "split-cell" }, { "kind": "keyword", "value": "delete-row" }, { "kind": "keyword", "value": "delete-column" }, { "kind": "keyword", "value": "delete-table" }] } }, "required": false, "target": { "attribute": "actions" } }, "cellAlignment": { "type": { "enum": ["left", "center", "right"] }, "required": false, "target": { "attribute": "cellalignment" }, "default": "left" }, "cellBackground": { "type": "string", "required": false, "target": { "attribute": "cellbackground" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorTableToolbar(props) {
+  const { "actions": prop0, "cellAlignment": prop1 = "left", "cellBackground": prop2 = "", "open": prop3 = false, onAction, slots, children, ref, ...nativeProps } = props;
+  const root = useRef45(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = { "actions": props["actions"], "cellAlignment": props["cellAlignment"], "cellBackground": props["cellBackground"], "open": props["open"] };
+  useLayoutEffect45(() => root.current == null ? void 0 : attachLoomaComponent38(root.current, definition38, "ui-editor-table-toolbar", componentProps), []);
+  useLayoutEffect45(() => {
+    if (root.current != null) updateComponentProps38(root.current, componentProps);
+  });
+  useLayoutEffect45(() => {
+    const node = root.current;
+    if (node == null || onAction == null) return;
+    const listener0 = (event) => onAction(event.detail, event);
+    node.addEventListener("action", listener0);
+    return () => node.removeEventListener("action", listener0);
+  }, [onAction]);
+  return /* @__PURE__ */ jsx44("div", { ...nativeProps, "data-component": "ui-editor-table-toolbar", "data-component-root": "ui-editor-table-toolbar", ref: setRoot });
+}
+
+// src/generated/UiEditorToolbar.tsx
+import { useLayoutEffect as useLayoutEffect46, useRef as useRef46 } from "react";
+import { attachLoomaComponent as attachLoomaComponent39, updateComponentProps as updateComponentProps39 } from "@threadlabs/looma/core/declarative";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var definition39 = { ...{ "contract": { "tag": "ui-editor-toolbar", "props": {} }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function UiEditorToolbar(props) {
+  const { slots, children, ref, ...nativeProps } = props;
+  const root = useRef46(null);
+  const setRoot = (node) => {
+    root.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  };
+  const componentProps = {};
+  useLayoutEffect46(() => root.current == null ? void 0 : attachLoomaComponent39(root.current, definition39, "ui-editor-toolbar", componentProps), []);
+  useLayoutEffect46(() => {
+    if (root.current != null) updateComponentProps39(root.current, componentProps);
+  });
+  return /* @__PURE__ */ jsx45("div", { ...nativeProps, "data-component": "ui-editor-toolbar", "data-component-root": "ui-editor-toolbar", ref: setRoot, children: children ?? null });
+}
+
+// src/index.ts
+var ADAPTER_COMPONENT_TAG_MAP = {
+  Stack: "ui-stack",
+  Cluster: "ui-cluster",
+  Grid: "ui-grid",
+  Container: "ui-container",
+  Switcher: "ui-switcher",
+  Sidebar: "ui-sidebar",
+  Reel: "ui-reel",
+  Separator: "ui-separator",
+  Disclosure: "ui-disclosure",
+  Editable: "ui-editable",
+  Tabs: "ui-tabs",
+  Dialog: "ui-dialog",
+  Popover: "ui-popover",
+  Menu: "ui-menu",
+  MenuItem: "ui-menu-item",
+  ContextMenu: "ui-context-menu",
+  AffordanceScope: "ui-affordance-scope",
+  Button: "ui-button",
+  IconButton: "ui-icon-button",
+  Input: "ui-input",
+  Select: "ui-select",
+  Textarea: "ui-textarea",
+  FormField: "ui-form-field",
+  Tooltip: "ui-tooltip",
+  ToastRegion: "ui-toast-region",
+  Checkbox: "ui-checkbox",
+  Switch: "ui-switch",
+  RadioGroup: "ui-radio-group",
+  Radio: "ui-radio",
+  Badge: "ui-badge",
+  Callout: "ui-callout",
+  Avatar: "ui-avatar",
+  AvatarGroup: "ui-avatar-group",
+  SearchShell: "ui-search-shell",
+  SearchResultRow: "ui-search-result-row",
+  TopBar: "ui-top-bar",
+  Tree: "ui-tree",
+  TreeItem: "ui-tree-item",
+  Combobox: "ui-combobox",
+  EditorToolbar: "ui-editor-toolbar",
+  EditorSlashMenu: "ui-editor-slash-menu",
+  EditorMentionMenu: "ui-editor-mention-menu",
+  EditorTableContextMenu: "ui-editor-table-context-menu",
+  EditorTableToolbar: "ui-editor-table-toolbar",
+  EditorInsertTableGrid: "ui-editor-insert-table-grid",
+  EditorTableOverlay: "ui-editor-table-overlay"
+};
+var REACT_ADAPTER_NOTE = "Generated declarative adapter: renders a native root and attaches the framework-neutral Looma contract.";
+export {
+  ADAPTER_COMPONENT_TAG_MAP,
+  UiAffordanceScope as AffordanceScope,
+  UiAvatar as Avatar,
+  UiAvatarGroup as AvatarGroup,
+  UiBadge as Badge,
+  UiButton as Button,
+  UiCallout as Callout,
+  UiCheckbox as Checkbox,
+  UiCluster as Cluster,
+  UiCombobox as Combobox,
+  UiContainer as Container,
+  UiContextMenu as ContextMenu,
+  UiDialog as Dialog,
+  UiDisclosure as Disclosure,
+  UiEditable as Editable,
+  UiEditorInsertTableGrid as EditorInsertTableGrid,
+  UiEditorMentionMenu as EditorMentionMenu,
+  UiEditorSlashMenu as EditorSlashMenu,
+  UiEditorTableContextMenu as EditorTableContextMenu,
+  UiEditorTableOverlay as EditorTableOverlay,
+  UiEditorTableToolbar as EditorTableToolbar,
+  UiEditorToolbar as EditorToolbar,
+  UiFormField as FormField,
+  UiGrid as Grid,
+  UiIconButton as IconButton,
+  UiInput as Input,
+  UiMenu as Menu,
+  UiMenuItem as MenuItem,
+  UiPopover as Popover,
+  REACT_ADAPTER_NOTE,
+  UiRadio as Radio,
+  UiRadioGroup as RadioGroup,
+  UiReel as Reel,
+  UiSearchResultRow as SearchResultRow,
+  UiSearchShell as SearchShell,
+  UiSelect as Select,
+  UiSeparator as Separator,
+  UiSidebar as Sidebar,
+  UiStack as Stack,
+  UiSwitch as Switch,
+  UiSwitcher as Switcher,
+  UiTabs as Tabs,
+  UiTextarea as Textarea,
+  UiToastRegion as ToastRegion,
+  UiTooltip as Tooltip,
+  UiTopBar as TopBar,
+  UiTree as Tree,
+  UiTreeItem as TreeItem
+};