@threadlabs/looma 0.2.4 → 0.2.6

package/layout/index.js

@@ -1,408 +1,484 @@
-// src/index.ts
-var ORIENTATION_HORIZONTAL = "horizontal";
-var ORIENTATION_VERTICAL = "vertical";
-function normalizeOrientation(value) {
-  return value === ORIENTATION_VERTICAL ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/declarative-index.ts
+import { registerLoomaPackage } from "@threadlabs/looma/core/declarative";
+
+// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-reel.js
+var ui_reel_exports = {};
+__export(ui_reel_exports, {
+  default: () => controller
+});
+function controller(host) {
+  const element = host.element;
+  if (!element.hasAttribute("role")) element.setAttribute("role", "region");
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "0");
 }
-if (typeof HTMLElement !== "undefined") {
-  class UILayoutElement extends HTMLElement {
-    getPrimitiveAttribute(name) {
-      return this.getAttribute(name) ?? "";
-    }
-    setPrimitiveAttribute(name, value) {
-      const normalizedValue = value.trim();
-      if (normalizedValue.length === 0) {
-        this.removeAttribute(name);
-        return;
-      }
-      this.setAttribute(name, normalizedValue);
-    }
+
+// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-separator.js
+var ui_separator_exports = {};
+__export(ui_separator_exports, {
+  default: () => controller2
+});
+function controller2(host) {
+  const element = host.element;
+  const sync = () => {
+    if (!element.hasAttribute("role")) element.setAttribute("role", "separator");
+    if (element.getAttribute("role") === "separator") {
+      element.setAttribute("aria-orientation", host.state.orientation === "vertical" ? "vertical" : "horizontal");
+    } else {
+      element.removeAttribute("aria-orientation");
+    }
+  };
+  const stop = host.effect(sync);
+  const observer = new MutationObserver(sync);
+  observer.observe(element, { attributes: true, attributeFilter: ["role"] });
+  sync();
+  return () => {
+    stop();
+    observer.disconnect();
+  };
+}
+
+// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-sidebar.js
+var ui_sidebar_exports = {};
+__export(ui_sidebar_exports, {
+  default: () => controller3
+});
+function positive(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+function controller3(host) {
+  const element = host.element;
+  let resizeHandle;
+  let pointerAbort;
+  const bounds = () => {
+    const min = positive(host.state.minWidth, 176);
+    return { min, max: Math.max(min, positive(host.state.maxWidth, 480)), step: positive(host.state.resizeStep, 16) };
+  };
+  const defaultWidth = () => host.state.width === "narrow" ? 224 : host.state.width === "wide" ? 384 : 288;
+  const storageId = () => {
+    const key = String(host.state.storageKey ?? "").trim();
+    return key ? `looma:sidebar-width:${key}` : null;
+  };
+  const readStoredWidth = () => {
+    const key = storageId();
+    if (!key || typeof localStorage === "undefined") return null;
+    try {
+      const value = Number(localStorage.getItem(key));
+      return Number.isFinite(value) && value > 0 ? value : null;
+    } catch {
+      return null;
+    }
+  };
+  const persistWidth = (width) => {
+    const key = storageId();
+    if (!key || typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(key, String(width));
+    } catch {
+    }
+  };
+  const currentWidth = () => {
+    const inline = Number.parseFloat(element.style.getPropertyValue("--ui-sidebar-width"));
+    if (Number.isFinite(inline)) return inline;
+    const children = [...element.children].filter((child) => !child.hasAttribute("data-ui-sidebar-resizer"));
+    const region = host.state.side === "end" ? children.at(-1) : children[0];
+    return region?.getBoundingClientRect().width || defaultWidth();
+  };
+  const setWidth = (value, persist = false, trigger = "programmatic") => {
+    const { min, max } = bounds();
+    const width = Math.round(Math.max(min, Math.min(max, value)));
+    const previous = Number.parseFloat(element.style.getPropertyValue("--ui-sidebar-width"));
+    element.style.setProperty("--ui-sidebar-width", `${width}px`);
+    resizeHandle?.setAttribute("aria-valuemin", String(min));
+    resizeHandle?.setAttribute("aria-valuemax", String(max));
+    resizeHandle?.setAttribute("aria-valuenow", String(width));
+    if (persist && previous !== width) persistWidth(width);
+    if (!Number.isFinite(previous) || previous !== width) host.dispatch("resize", { width, trigger });
+  };
+  const onKeydown = (event) => {
+    const { min, max, step } = bounds();
+    let next = null;
+    if (event.key === "Home") next = min;
+    if (event.key === "End") next = max;
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const delta = event.key === "ArrowRight" ? step : -step;
+      next = currentWidth() + (host.state.side === "end" ? -delta : delta);
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setWidth(next, true, "keyboard");
+  };
+  const onPointerdown = (event) => {
+    if (event.button !== 0 || pointerAbort) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = currentWidth();
+    const multiplier = host.state.side === "end" ? -1 : 1;
+    pointerAbort = new AbortController();
+    const signal = pointerAbort.signal;
+    const finish = () => {
+      persistWidth(currentWidth());
+      pointerAbort?.abort();
+      pointerAbort = void 0;
+    };
+    window.addEventListener("pointermove", (move) => {
+      setWidth(startWidth + (move.clientX - startX) * multiplier, false, "pointer");
+    }, { signal });
+    window.addEventListener("pointerup", finish, { once: true, signal });
+    window.addEventListener("pointercancel", finish, { once: true, signal });
+  };
+  const removeHandle = () => {
+    pointerAbort?.abort();
+    pointerAbort = void 0;
+    resizeHandle?.remove();
+    resizeHandle = void 0;
+  };
+  const sync = () => {
+    if (!host.state.resizable) {
+      removeHandle();
+      return;
+    }
+    if (!resizeHandle) {
+      resizeHandle = document.createElement("div");
+      resizeHandle.setAttribute("data-ui-sidebar-resizer", "");
+      resizeHandle.setAttribute("data-ui-affordance", "resize");
+      resizeHandle.setAttribute("role", "separator");
+      resizeHandle.setAttribute("aria-orientation", "vertical");
+      resizeHandle.setAttribute("tabindex", "0");
+      const guide = document.createElement("span");
+      guide.setAttribute("data-ui-guide", "");
+      guide.setAttribute("aria-hidden", "true");
+      resizeHandle.append(guide);
+      resizeHandle.addEventListener("keydown", onKeydown);
+      resizeHandle.addEventListener("pointerdown", onPointerdown);
+      resizeHandle.addEventListener("dblclick", () => setWidth(defaultWidth(), true, "pointer"));
+      element.append(resizeHandle);
+      setWidth(readStoredWidth() ?? currentWidth());
+    }
+    resizeHandle.setAttribute("aria-label", String(host.state.resizeLabel || "Resize sidebar"));
+    setWidth(currentWidth());
+  };
+  const stop = host.effect(sync);
+  sync();
+  return () => {
+    stop();
+    removeHandle();
+  };
+}
+
+// ../../tools/migrate-html-next/generated/adoption/layout/registry.js
+var records = [
+  { tag: "ui-center", source: '<template component="ui-center" status="early" summary="Looma ui-center layout primitive.">\n  <defs>\n    <prop name="measure" type="narrow | wide">measure token.</prop>\n    <prop name="gutters" type="s | m | l">gutters token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-cluster", source: '<template component="ui-cluster" status="early" summary="Looma ui-cluster layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-grid", source: '<template component="ui-grid" status="early" summary="Looma ui-grid layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="min" type="sm | md | lg">min token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-inline", source: '<template component="ui-inline" status="early" summary="Looma ui-inline layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n    <prop name="wrap" type="wrap | nowrap">wrap token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-reel", source: '<template component="ui-reel" status="early" summary="Looma ui-reel layout primitive." controller="./controllers/ui-reel.js">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="itemWidth" type="sm | md | lg">itemWidth token.</prop>\n    <prop name="snap" type="start | center">snap token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_reel_exports },
+  { tag: "ui-separator", source: '<template component="ui-separator" status="early" summary="Looma ui-separator layout primitive." controller="./controllers/ui-separator.js">\n  <defs>\n    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_separator_exports },
+  { tag: "ui-sidebar", source: '<template component="ui-sidebar" status="early" summary="Looma ui-sidebar layout primitive." controller="./controllers/ui-sidebar.js">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="side" type="start | end" default="start">side token.</prop>\n    <prop name="width" type="narrow | default | wide" default="default">width token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="resizable" type="boolean" default="false">resizable token.</prop>\n    <prop name="storageKey" type="string">storageKey token.</prop>\n    <prop name="minWidth" type="number" default="176">minWidth token.</prop>\n    <prop name="maxWidth" type="number" default="480">maxWidth token.</prop>\n    <prop name="resizeStep" type="number" default="16">resizeStep token.</prop>\n    <prop name="resizeLabel" type="string" default="Resize sidebar">resizeLabel token.</prop>\n    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_sidebar_exports },
+  { tag: "ui-stack", source: '<template component="ui-stack" status="early" summary="Looma ui-stack layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-switcher", source: '<template component="ui-switcher" status="early" summary="Looma ui-switcher layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="threshold" type="xs | sm | md | lg">threshold token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 }
+];
+var styles = `/* Unlayered: box-model guarantees that remain safe for host composition. */
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]),
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *,
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::before,
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::after {
+  box-sizing: border-box;
+}
+
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {
+  /* Reveal Looma's component layer instead of reverting past it. */
+  all: revert-layer;
+  box-sizing: border-box;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-md);
+  color: var(--ui-text-primary);
+}
+
+:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"])[data-ui-inherit-typography] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
+  direction: inherit;
+  writing-mode: inherit;
+  text-orientation: inherit;
+  text-rendering: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+}
+
+@layer components {
+  :where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
   }
-  class UIStackElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "align", "justify"];
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get align() {
-      return this.getPrimitiveAttribute("align");
-    }
-    set align(value) {
-      this.setPrimitiveAttribute("align", value);
-    }
-    get justify() {
-      return this.getPrimitiveAttribute("justify");
-    }
-    set justify(value) {
-      this.setPrimitiveAttribute("justify", value);
-    }
+
+  [data-component-root~="ui-stack"] {
+    --ui-layout-gap: var(--ui-space-4, 1rem);
+    --ui-layout-align: stretch;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-layout-gap);
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
   }
-  class UIInlineElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "align", "justify", "wrap"];
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get align() {
-      return this.getPrimitiveAttribute("align");
-    }
-    set align(value) {
-      this.setPrimitiveAttribute("align", value);
-    }
-    get justify() {
-      return this.getPrimitiveAttribute("justify");
-    }
-    set justify(value) {
-      this.setPrimitiveAttribute("justify", value);
-    }
-    get wrap() {
-      return this.getPrimitiveAttribute("wrap");
-    }
-    set wrap(value) {
-      this.setPrimitiveAttribute("wrap", value);
-    }
+
+  [data-component-root~="ui-stack"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-stack"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-stack"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-stack"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }
+  [data-component-root~="ui-stack"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }
+  [data-component-root~="ui-stack"][data-align="start"] { --ui-layout-align: flex-start; }
+  [data-component-root~="ui-stack"][data-align="center"] { --ui-layout-align: center; }
+  [data-component-root~="ui-stack"][data-align="end"] { --ui-layout-align: flex-end; }
+  [data-component-root~="ui-stack"][data-justify="center"] { --ui-layout-justify: center; }
+  [data-component-root~="ui-stack"][data-justify="end"] { --ui-layout-justify: flex-end; }
+  [data-component-root~="ui-stack"][data-justify="between"] { --ui-layout-justify: space-between; }
+
+  [data-component-root~="ui-inline"],
+  [data-component-root~="ui-cluster"] {
+    --ui-layout-gap: var(--ui-space-3, 0.75rem);
+    --ui-layout-align: center;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
+    gap: var(--ui-layout-gap);
   }
-  class UIClusterElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "align", "justify"];
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get align() {
-      return this.getPrimitiveAttribute("align");
-    }
-    set align(value) {
-      this.setPrimitiveAttribute("align", value);
-    }
-    get justify() {
-      return this.getPrimitiveAttribute("justify");
-    }
-    set justify(value) {
-      this.setPrimitiveAttribute("justify", value);
-    }
+
+  [data-component-root~="ui-inline"][data-wrap="nowrap"] { flex-wrap: nowrap; }
+  [data-component-root~="ui-inline"][data-gap="xs"],
+  [data-component-root~="ui-cluster"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-inline"][data-gap="s"],
+  [data-component-root~="ui-cluster"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-inline"][data-gap="m"],
+  [data-component-root~="ui-cluster"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
+
+  [data-component-root~="ui-grid"] {
+    --ui-grid-gap: var(--ui-space-4, 1rem);
+    --ui-grid-min: 16rem;
+    display: grid;
+    gap: var(--ui-grid-gap);
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));
   }
-  class UIGridElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "min"];
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get min() {
-      return this.getPrimitiveAttribute("min");
-    }
-    set min(value) {
-      this.setPrimitiveAttribute("min", value);
-    }
+
+  [data-component-root~="ui-grid"][data-gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-grid"][data-gap="s"] { --ui-grid-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-grid"][data-gap="m"] { --ui-grid-gap: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-grid"][data-gap="l"] { --ui-grid-gap: var(--ui-space-5, 1.5rem); }
+  [data-component-root~="ui-grid"][data-min="sm"] { --ui-grid-min: 12rem; }
+  [data-component-root~="ui-grid"][data-min="md"] { --ui-grid-min: 16rem; }
+  [data-component-root~="ui-grid"][data-min="lg"] { --ui-grid-min: 20rem; }
+
+  [data-component-root~="ui-center"] {
+    --ui-center-measure: 65ch;
+    --ui-center-gutters: var(--ui-space-4, 1rem);
+    display: block;
+    inline-size: 100%;
+    max-inline-size: var(--ui-center-measure);
+    margin-inline: auto;
+    padding-inline: var(--ui-center-gutters);
   }
-  class UICenterElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["measure", "gutters"];
-    }
-    get measure() {
-      return this.getPrimitiveAttribute("measure");
-    }
-    set measure(value) {
-      this.setPrimitiveAttribute("measure", value);
-    }
-    get gutters() {
-      return this.getPrimitiveAttribute("gutters");
-    }
-    set gutters(value) {
-      this.setPrimitiveAttribute("gutters", value);
-    }
+
+  [data-component-root~="ui-center"][data-measure="narrow"] { --ui-center-measure: 45ch; }
+  [data-component-root~="ui-center"][data-measure="wide"] { --ui-center-measure: 80ch; }
+  [data-component-root~="ui-center"][data-gutters="s"] { --ui-center-gutters: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-center"][data-gutters="m"] { --ui-center-gutters: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-center"][data-gutters="l"] { --ui-center-gutters: var(--ui-space-5, 1.5rem); }
+
+  [data-component-root~="ui-switcher"] {
+    --ui-switcher-gap: var(--ui-space-4, 1rem);
+    --ui-switcher-threshold: 30rem;
+    --ui-switcher-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-switcher-gap);
+    align-items: var(--ui-switcher-align);
   }
-  class UISwitcherElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "threshold", "align"];
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get threshold() {
-      return this.getPrimitiveAttribute("threshold");
-    }
-    set threshold(value) {
-      this.setPrimitiveAttribute("threshold", value);
-    }
-    get align() {
-      return this.getPrimitiveAttribute("align");
-    }
-    set align(value) {
-      this.setPrimitiveAttribute("align", value);
-    }
+
+  [data-component-root~="ui-switcher"] > * {
+    min-inline-size: 0;
+    flex-grow: 1;
+    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);
   }
-  class UISidebarElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "side", "width", "align", "resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label"];
-    }
-    resizeHandle = null;
-    resizeAbort = null;
-    pointerAbort = null;
-    connectedCallback() {
-      this.syncResizable();
-    }
-    disconnectedCallback() {
-      this.resizeAbort?.abort();
-      this.resizeAbort = null;
-      this.pointerAbort?.abort();
-      this.pointerAbort = null;
-    }
-    attributeChangedCallback(name) {
-      if (["resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label", "side", "width"].includes(name)) {
-        this.syncResizable();
-      }
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get side() {
-      return this.getPrimitiveAttribute("side");
-    }
-    set side(value) {
-      this.setPrimitiveAttribute("side", value);
-    }
-    get width() {
-      return this.getPrimitiveAttribute("width");
-    }
-    set width(value) {
-      this.setPrimitiveAttribute("width", value);
-    }
-    get align() {
-      return this.getPrimitiveAttribute("align");
-    }
-    set align(value) {
-      this.setPrimitiveAttribute("align", value);
-    }
-    get resizable() {
-      return this.hasAttribute("resizable");
-    }
-    set resizable(value) {
-      this.toggleAttribute("resizable", value);
-    }
-    numericAttribute(name, fallback) {
-      const parsed = Number(this.getAttribute(name));
-      return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
-    }
-    bounds() {
-      const min = this.numericAttribute("min-width", 176);
-      const max = Math.max(min, this.numericAttribute("max-width", 480));
-      return { min, max, step: this.numericAttribute("resize-step", 16) };
-    }
-    defaultWidth() {
-      if (this.width === "narrow") return 224;
-      if (this.width === "wide") return 384;
-      return 288;
-    }
-    storageId() {
-      const key = this.getAttribute("storage-key")?.trim();
-      return key ? `looma:sidebar-width:${key}` : null;
-    }
-    readStoredWidth() {
-      const key = this.storageId();
-      if (!key || typeof localStorage === "undefined") return null;
-      try {
-        const parsed = Number(localStorage.getItem(key));
-        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
-      } catch {
-        return null;
-      }
-    }
-    persistWidth(width) {
-      const key = this.storageId();
-      if (!key || typeof localStorage === "undefined") return;
-      try {
-        localStorage.setItem(key, String(width));
-      } catch {
-      }
-    }
-    currentWidth() {
-      const inline = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
-      if (Number.isFinite(inline)) return inline;
-      const sideRegion = this.getAttribute("side") === "end" ? this.querySelector(":scope > :last-child:not([data-ui-sidebar-resizer])") : this.querySelector(":scope > :first-child:not([data-ui-sidebar-resizer])");
-      return sideRegion?.getBoundingClientRect().width || this.defaultWidth();
-    }
-    setWidth(value, persist = false, trigger = "programmatic") {
-      const { min, max } = this.bounds();
-      const width = Math.round(Math.max(min, Math.min(max, value)));
-      const previous = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
-      const changed = !Number.isFinite(previous) || previous !== width;
-      this.style.setProperty("--ui-sidebar-width", `${width}px`);
-      this.resizeHandle?.setAttribute("aria-valuemin", String(min));
-      this.resizeHandle?.setAttribute("aria-valuemax", String(max));
-      this.resizeHandle?.setAttribute("aria-valuenow", String(width));
-      if (persist && changed) this.persistWidth(width);
-      if (changed) {
-        this.dispatchEvent(new CustomEvent("resize", { detail: { width, trigger }, bubbles: true }));
-      }
-    }
-    syncResizable() {
-      if (!this.isConnected) return;
-      if (!this.resizable) {
-        this.resizeAbort?.abort();
-        this.resizeAbort = null;
-        this.pointerAbort?.abort();
-        this.pointerAbort = null;
-        this.resizeHandle?.remove();
-        this.resizeHandle = null;
-        return;
-      }
-      if (!this.resizeHandle) {
-        this.resizeHandle = document.createElement("div");
-        this.resizeHandle.setAttribute("data-ui-sidebar-resizer", "");
-        this.resizeHandle.setAttribute("data-ui-affordance", "resize");
-        this.resizeHandle.setAttribute("role", "separator");
-        this.resizeHandle.setAttribute("aria-orientation", "vertical");
-        this.resizeHandle.setAttribute("tabindex", "0");
-        const guide = document.createElement("span");
-        guide.setAttribute("data-ui-guide", "");
-        guide.setAttribute("aria-hidden", "true");
-        this.resizeHandle.append(guide);
-        this.append(this.resizeHandle);
-      }
-      this.resizeHandle.setAttribute("aria-label", this.getAttribute("resize-label") || "Resize sidebar");
-      this.resizeAbort?.abort();
-      this.resizeAbort = new AbortController();
-      const signal = this.resizeAbort.signal;
-      this.resizeHandle.addEventListener("keydown", (event) => this.onResizeKey(event), { signal });
-      this.resizeHandle.addEventListener("pointerdown", (event) => this.onResizePointer(event), { signal });
-      this.resizeHandle.addEventListener("dblclick", () => this.setWidth(this.defaultWidth(), true, "pointer"), { signal });
-      this.setWidth(this.readStoredWidth() ?? this.currentWidth());
-    }
-    onResizeKey(event) {
-      const { min, max, step } = this.bounds();
-      let next = null;
-      if (event.key === "Home") next = min;
-      if (event.key === "End") next = max;
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-        const physicalDelta = event.key === "ArrowRight" ? step : -step;
-        next = this.currentWidth() + (this.side === "end" ? -physicalDelta : physicalDelta);
-      }
-      if (next === null) return;
-      event.preventDefault();
-      this.setWidth(next, true, "keyboard");
-    }
-    onResizePointer(event) {
-      if (event.button !== 0 || this.pointerAbort) return;
-      event.preventDefault();
-      const startX = event.clientX;
-      const startWidth = this.currentWidth();
-      const multiplier = this.side === "end" ? -1 : 1;
-      const controller = new AbortController();
-      this.pointerAbort = controller;
-      const finish = () => {
-        this.persistWidth(this.currentWidth());
-        controller.abort();
-        this.pointerAbort = null;
-      };
-      window.addEventListener("pointermove", (moveEvent) => {
-        this.setWidth(startWidth + (moveEvent.clientX - startX) * multiplier, false, "pointer");
-      }, { signal: controller.signal });
-      window.addEventListener("pointerup", finish, { once: true, signal: controller.signal });
-      window.addEventListener("pointercancel", finish, { once: true, signal: controller.signal });
-    }
+
+  [data-component-root~="ui-switcher"][data-gap="xs"] { --ui-switcher-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-switcher"][data-gap="s"] { --ui-switcher-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-switcher"][data-gap="m"] { --ui-switcher-gap: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-switcher"][data-gap="l"] { --ui-switcher-gap: var(--ui-space-5, 1.5rem); }
+  [data-component-root~="ui-switcher"][data-threshold="xs"] { --ui-switcher-threshold: 20rem; }
+  [data-component-root~="ui-switcher"][data-threshold="sm"] { --ui-switcher-threshold: 30rem; }
+  [data-component-root~="ui-switcher"][data-threshold="md"] { --ui-switcher-threshold: 45rem; }
+  [data-component-root~="ui-switcher"][data-threshold="lg"] { --ui-switcher-threshold: 60rem; }
+  [data-component-root~="ui-switcher"][data-align="start"] { --ui-switcher-align: flex-start; }
+  [data-component-root~="ui-switcher"][data-align="center"] { --ui-switcher-align: center; }
+  [data-component-root~="ui-switcher"][data-align="end"] { --ui-switcher-align: flex-end; }
+
+  [data-component-root~="ui-sidebar"] {
+    --ui-sidebar-gap: var(--ui-space-4, 1rem);
+    --ui-sidebar-width: 18rem;
+    --ui-sidebar-content-min: 50%;
+    --ui-sidebar-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-sidebar-gap);
+    align-items: var(--ui-sidebar-align);
   }
-  class UIReelElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["gap", "item-width", "snap"];
-    }
-    connectedCallback() {
-      if (!this.hasAttribute("role")) this.setAttribute("role", "region");
-      if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
-    }
-    get gap() {
-      return this.getPrimitiveAttribute("gap");
-    }
-    set gap(value) {
-      this.setPrimitiveAttribute("gap", value);
-    }
-    get itemWidth() {
-      return this.getPrimitiveAttribute("item-width");
-    }
-    set itemWidth(value) {
-      this.setPrimitiveAttribute("item-width", value);
-    }
-    get snap() {
-      return this.getPrimitiveAttribute("snap");
-    }
-    set snap(value) {
-      this.setPrimitiveAttribute("snap", value);
-    }
+
+  [data-component-root~="ui-sidebar"] > :not([data-ui-sidebar-resizer]) { min-inline-size: 0; }
+  [data-component-root~="ui-sidebar"] > :first-child {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
   }
-  class UISeparatorElement extends UILayoutElement {
-    static get observedAttributes() {
-      return ["orientation", "role"];
-    }
-    connectedCallback() {
-      this.ensureDefaults();
-    }
-    get orientation() {
-      return normalizeOrientation(this.getAttribute("orientation"));
-    }
-    set orientation(value) {
-      const normalizedValue = normalizeOrientation(value);
-      this.setPrimitiveAttribute("orientation", normalizedValue);
-      this.syncOrientationAria();
-    }
-    attributeChangedCallback(name) {
-      if (name === "orientation" || name === "role") {
-        this.syncOrientationAria();
-      }
-    }
-    ensureDefaults() {
-      if (!this.hasAttribute("role")) {
-        this.setAttribute("role", "separator");
-      }
-      this.syncOrientationAria();
-    }
-    syncOrientationAria() {
-      if (this.getAttribute("role") !== "separator") {
-        this.removeAttribute("aria-orientation");
-        return;
-      }
-      this.setAttribute("aria-orientation", this.orientation);
-    }
+  [data-component-root~="ui-sidebar"] > :last-child:not([data-ui-sidebar-resizer]),
+  [data-component-root~="ui-sidebar"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
   }
-  const definitions = [
-    ["ui-stack", UIStackElement],
-    ["ui-inline", UIInlineElement],
-    ["ui-cluster", UIClusterElement],
-    ["ui-grid", UIGridElement],
-    ["ui-center", UICenterElement],
-    ["ui-switcher", UISwitcherElement],
-    ["ui-sidebar", UISidebarElement],
-    ["ui-reel", UIReelElement],
-    ["ui-separator", UISeparatorElement]
-  ];
-  for (const [tag, constructor] of definitions) {
-    if (!customElements.get(tag)) {
-      customElements.define(tag, constructor);
-    }
+  [data-component-root~="ui-sidebar"][data-side="end"] > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
+  }
+  [data-component-root~="ui-sidebar"][data-side="end"] > :last-child:not([data-ui-sidebar-resizer]),
+  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
+    min-inline-size: 0;
+  }
+  [data-component-root~="ui-sidebar"][data-gap="xs"] { --ui-sidebar-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-sidebar"][data-gap="s"] { --ui-sidebar-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-sidebar"][data-gap="m"] { --ui-sidebar-gap: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-sidebar"][data-gap="l"] { --ui-sidebar-gap: var(--ui-space-5, 1.5rem); }
+  [data-component-root~="ui-sidebar"][data-width="narrow"] { --ui-sidebar-width: 14rem; }
+  [data-component-root~="ui-sidebar"][data-width="wide"] { --ui-sidebar-width: 24rem; }
+  [data-component-root~="ui-sidebar"][data-align="start"] { --ui-sidebar-align: flex-start; }
+  [data-component-root~="ui-sidebar"][data-align="center"] { --ui-sidebar-align: center; }
+  [data-component-root~="ui-sidebar"][data-align="end"] { --ui-sidebar-align: flex-end; }
+  [data-component-root~="ui-sidebar"][data-resizable='true'] {
+    position: relative;
+    flex-wrap: nowrap;
+  }
+  [data-component-root~="ui-sidebar"][data-resizable='true'] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 1 1 0;
+  }
+  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-start: var(--ui-sidebar-width);
+    inline-size: 8px;
+    min-inline-size: 8px;
+    transform: translateX(-50%);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  [data-component-root~="ui-sidebar"][data-side="end"] > [data-ui-sidebar-resizer] {
+    inset-inline-start: auto;
+    inset-inline-end: var(--ui-sidebar-width);
+    transform: translateX(50%);
+  }
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 3px;
+    inline-size: 2px;
+    background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
+    opacity: var(--ui-affordance-guide-opacity, 0.42);
+    transition:
+      background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+      opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+  }
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] > [data-ui-guide] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 6px;
+    block-size: 22px;
+    border: 1px solid var(--ui-border-strong, #c8c8c4);
+    border-radius: var(--ui-radius-round, 999px);
+    background: var(--ui-surface-elevated, #fff);
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    pointer-events: none;
+  }
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:hover::after,
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:focus-visible::after {
+    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
+    opacity: 1;
+  }
+  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:is(:hover, :focus-visible) > [data-ui-guide] {
+    opacity: 1;
+  }
+
+  [data-component-root~="ui-reel"] {
+    --ui-reel-gap: var(--ui-space-4, 1rem);
+    --ui-reel-item-width: auto;
+    display: flex;
+    inline-size: 100%;
+    gap: var(--ui-reel-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [data-component-root~="ui-reel"] > * {
+    min-inline-size: 0;
+    flex: 0 0 var(--ui-reel-item-width);
+  }
+  [data-component-root~="ui-reel"][data-gap="xs"] { --ui-reel-gap: var(--ui-space-2, 0.5rem); }
+  [data-component-root~="ui-reel"][data-gap="s"] { --ui-reel-gap: var(--ui-space-3, 0.75rem); }
+  [data-component-root~="ui-reel"][data-gap="m"] { --ui-reel-gap: var(--ui-space-4, 1rem); }
+  [data-component-root~="ui-reel"][data-gap="l"] { --ui-reel-gap: var(--ui-space-5, 1.5rem); }
+  [data-component-root~="ui-reel"][data-item-width="sm"] { --ui-reel-item-width: 12rem; }
+  [data-component-root~="ui-reel"][data-item-width="md"] { --ui-reel-item-width: 16rem; }
+  [data-component-root~="ui-reel"][data-item-width="lg"] { --ui-reel-item-width: 20rem; }
+  [data-component-root~="ui-reel"][data-snap="start"],
+  [data-component-root~="ui-reel"][data-snap="center"] { scroll-snap-type: inline mandatory; }
+  [data-component-root~="ui-reel"][data-snap="start"] > * { scroll-snap-align: start; }
+  [data-component-root~="ui-reel"][data-snap="center"] > * { scroll-snap-align: center; }
+
+  [data-component-root~="ui-separator"] {
+    --ui-separator-color: var(--ui-border-default, #d0d5dd);
+    --ui-separator-space: var(--ui-space-4, 1rem);
+    display: block;
+    margin: 0;
+    border: 0;
+    border-block-start: 1px solid var(--ui-separator-color);
+    padding: 0;
+  }
+
+  [data-component-root~="ui-separator"][data-orientation="vertical"] {
+    inline-size: 1px;
+    block-size: 100%;
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--ui-separator-color);
   }
 }
-function registerLayoutPrimitives() {
-}
-export {
-  registerLayoutPrimitives
-};
+`;
+
+// src/declarative-index.ts
+registerLoomaPackage("layout", records, styles);