@threadlabs/looma 0.4.0 → 0.5.0

package/layout/index.cjs

@@ -1,356 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/declarative-index.ts
-var declarative_index_exports = {};
-module.exports = __toCommonJS(declarative_index_exports);
-var import_declarative = require("@threadlabs/looma/core/declarative");
-
-// src/declarative/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");
-}
-
-// src/declarative/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();
-  };
-}
-
-// src/declarative/components/controllers/ui-sidebar.js
-var ui_sidebar_exports = {};
-__export(ui_sidebar_exports, {
-  default: () => controller3
-});
-var BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
-function positive(value, fallback) {
-  const number = Number(value);
-  return Number.isFinite(number) && number > 0 ? number : fallback;
-}
-function controller3(host) {
-  const element = host.element;
-  const document = element.ownerDocument;
-  const view = document.defaultView;
-  let resizeHandle;
-  let pointerAbort;
-  let media;
-  let lastCollapsed = Boolean(host.state.collapsed);
-  let lastWidth = Number(host.state.width) || 0;
-  host.state.internalCollapsed = lastCollapsed;
-  host.state.drawer = false;
-  const bounds = () => {
-    const min = positive(host.state.minWidth, 200);
-    return { min, max: Math.max(min, positive(host.state.maxWidth, 480)), step: positive(host.state.resizeStep, 16) };
-  };
-  const currentWidth = () => element.getBoundingClientRect().width || 280;
-  const setWidth = (value, trigger = "programmatic") => {
-    const { min, max } = bounds();
-    const width = Math.round(Math.max(min, Math.min(max, value)));
-    const previous = Number.parseFloat(element.style.getPropertyValue("--_sidebar-width"));
-    element.style.setProperty("--_sidebar-width", `${width}px`);
-    resizeHandle?.setAttribute("aria-valuemin", String(min));
-    resizeHandle?.setAttribute("aria-valuemax", String(max));
-    resizeHandle?.setAttribute("aria-valuenow", String(width));
-    if (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, "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 = () => {
-      pointerAbort?.abort();
-      pointerAbort = void 0;
-    };
-    view.addEventListener("pointermove", (move) => {
-      setWidth(startWidth + (move.clientX - startX) * multiplier, "pointer");
-    }, { signal });
-    view.addEventListener("pointerup", finish, { once: true, signal });
-    view.addEventListener("pointercancel", finish, { once: true, signal });
-  };
-  const removeHandle = () => {
-    pointerAbort?.abort();
-    pointerAbort = void 0;
-    resizeHandle?.remove();
-    resizeHandle = void 0;
-  };
-  const syncHandle = () => {
-    if (!host.state.resizable || host.state.drawer || host.state.internalCollapsed) {
-      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", () => {
-        element.style.removeProperty("--_sidebar-width");
-        setWidth(currentWidth(), "pointer");
-      });
-      element.append(resizeHandle);
-    }
-    resizeHandle.setAttribute("aria-label", String(host.state.resizeLabel || "Resize sidebar"));
-    const { min, max } = bounds();
-    resizeHandle.setAttribute("aria-valuemin", String(min));
-    resizeHandle.setAttribute("aria-valuemax", String(max));
-    resizeHandle.setAttribute("aria-valuenow", String(Math.round(currentWidth())));
-  };
-  const applyMode = () => {
-    const drawer = media?.matches ?? false;
-    if (drawer === host.state.drawer) return;
-    host.state.drawer = drawer;
-    if (drawer) {
-      element.setAttribute("popover", "auto");
-    } else {
-      if (element.matches(":popover-open")) element.hidePopover();
-      element.removeAttribute("popover");
-    }
-    syncHandle();
-  };
-  const watchBreakpoint = () => {
-    media?.removeEventListener("change", applyMode);
-    if (typeof view.matchMedia !== "function") return;
-    const width = BREAKPOINTS[host.state.breakpoint] ?? BREAKPOINTS.md;
-    media = view.matchMedia(`(width < ${width})`);
-    media.addEventListener("change", applyMode);
-    applyMode();
-  };
-  const toggle = (trigger) => {
-    if (host.state.drawer) {
-      element.togglePopover();
-      return;
-    }
-    host.state.internalCollapsed = !host.state.internalCollapsed;
-    syncHandle();
-    host.dispatch("toggle", { open: !host.state.internalCollapsed, mode: "docked", trigger });
-  };
-  const triggerOf = (source) => source?.matches?.(":focus-visible") ? "keyboard" : "pointer";
-  const onCommand = (event) => {
-    if (event.command !== "--toggle") return;
-    toggle(triggerOf(event.source));
-  };
-  const invokerCommands = typeof view.HTMLButtonElement?.prototype === "object" && "commandForElement" in view.HTMLButtonElement.prototype;
-  const onDocumentClick = (event) => {
-    const invoker = event.target.closest?.("[commandfor][command='--toggle']");
-    if (!invoker || !element.id || invoker.getAttribute("commandfor") !== element.id) return;
-    toggle(triggerOf(invoker));
-  };
-  const onPopoverToggle = (event) => {
-    if (!host.state.drawer) return;
-    host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
-  };
-  const apply = () => {
-    const collapsed = Boolean(host.state.collapsed);
-    if (collapsed !== lastCollapsed) {
-      lastCollapsed = collapsed;
-      host.state.internalCollapsed = collapsed;
-    }
-    const width = Number(host.state.width) || 0;
-    if (width !== lastWidth) {
-      lastWidth = width;
-      if (width > 0) setWidth(width);
-      else element.style.removeProperty("--_sidebar-width");
-    }
-    syncHandle();
-  };
-  element.addEventListener("command", onCommand);
-  element.addEventListener("toggle", onPopoverToggle);
-  if (!invokerCommands) document.addEventListener("click", onDocumentClick);
-  if (lastWidth > 0) setWidth(lastWidth);
-  watchBreakpoint();
-  let lastBreakpoint = host.state.breakpoint;
-  const stop = host.effect(() => {
-    if (host.state.breakpoint !== lastBreakpoint) {
-      lastBreakpoint = host.state.breakpoint;
-      watchBreakpoint();
-    }
-    apply();
-  });
-  apply();
-  return () => {
-    stop();
-    removeHandle();
-    media?.removeEventListener("change", applyMode);
-    element.removeEventListener("command", onCommand);
-    element.removeEventListener("toggle", onPopoverToggle);
-    document.removeEventListener("click", onDocumentClick);
-  };
-}
-
-// src/declarative/registry.js
-var records = [
-  { tag: "ui-cluster", source: '<template component="ui-cluster" status="early" summary="Wrapping row of items with consistent gaps, for tags, buttons, and other content that flows onto new lines.">\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  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
-  { tag: "ui-container", source: '<template component="ui-container" status="early" summary="Looma ui-container 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-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-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="An application sidebar panel: resizable and collapsible when docked, an off-canvas drawer on narrow screens." controller="./controllers/ui-sidebar.js">
-  <defs>
-    <prop name="side" type="start | end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
-    <prop name="width" type="number" default="0">Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.</prop>
-    <prop name="minWidth" type="number" default="200">The narrowest width the resize handle allows, in pixels.</prop>
-    <prop name="maxWidth" type="number" default="480">The widest width the resize handle allows, in pixels.</prop>
-    <prop name="resizable" type="boolean" default="false">Adds a resize handle on the inner edge (drag, or arrow keys, Home, and End).</prop>
-    <prop name="resizeStep" type="number" default="16">Arrow-key resize step in pixels.</prop>
-    <prop name="resizeLabel" type="string" default="Resize sidebar">Accessible name of the resize handle.</prop>
-    <prop name="collapsed" type="boolean" default="false">Whether the docked sidebar is collapsed.</prop>
-    <prop name="breakpoint" type="sm | md | lg" default="md">Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.</prop>
-    <state name="internalCollapsed" :value="false"></state>
-    <state name="drawer" :value="false"></state>
-    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="toggle" type="object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })"></event>
-  </defs>
-  <aside :data-state-collapsed="internalCollapsed" :data-state-drawer="drawer"><div class="sidebar__content"><slot></slot></div></aside>
-  <style>:scope {
-  --_sidebar-default-width: 280px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex: none;
-  inline-size: var(--_sidebar-width, var(--ui-sidebar-width, var(--_sidebar-default-width)));
-  max-inline-size: 100%;
-  min-block-size: 0;
-  background: var(--ui-sidebar-surface, var(--ui-surface-default));
-  border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
-}
-
-:scope[data-side='end'] {
-  border-inline-end: 0;
-  border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
-}
-
-.sidebar__content {
-  flex: 1;
-  min-block-size: 0;
-  overflow: auto;
-}
-
-/* Collapsed while docked. */
-:scope:is([data-state-collapsed=''], [data-state-collapsed='true']):not([popover]) {
-  display: none;
-}
-
-/* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-:scope[popover] {
-  position: fixed;
-  inset-block: 0;
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  margin: 0;
-  padding: 0;
-  inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, var(--_sidebar-default-width))), 85vw);
-  max-block-size: none;
-  block-size: 100dvh;
-  border-block: 0;
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  transform: translateX(0);
-  transition:
-    transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
-    display var(--ui-motion-base, 0.2s) allow-discrete,
-    overlay var(--ui-motion-base, 0.2s) allow-discrete;
-}
-
-/* The author display above would otherwise override the UA rule that hides a closed popover. */
-:scope[popover]:not(:popover-open) {
-  display: none;
-  transform: translateX(-100%);
-}
-
-:scope[popover][data-side='end'] {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
-
-:scope[popover][data-side='end']:not(:popover-open) {
-  transform: translateX(100%);
-}
-
-@starting-style {
-  :scope[popover]:popover-open { transform: translateX(-100%); }
-  :scope[popover][data-side='end']:popover-open { transform: translateX(100%); }
-}
-
-:scope[popover]::backdrop {
-  background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :scope[popover] { transition: none; }
-}
-</style>
-</template>
-`, 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 = '/*\n * Keep the box model outside `@layer components`: these are composition\n * guarantees for authored light-DOM children, not themeable component styles.\n */\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]),\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *,\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::before,\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::after {\n  box-sizing: border-box;\n}\n\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {\n  /* `revert-layer` exposes `@layer components`; `revert` would skip the author layer entirely. */\n  all: revert-layer;\n  box-sizing: border-box;\n  font-family: var(--ui-font-family-sans);\n  font-size: var(--ui-font-size-md);\n  line-height: var(--ui-line-height-md);\n  color: var(--ui-text-primary);\n}\n\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"])[data-ui-inherit-typography] {\n  /* Consumers opt into surrounding prose styles; isolated component defaults remain the safe default. */\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: inherit;\n  color: inherit;\n  direction: inherit;\n  writing-mode: inherit;\n  text-orientation: inherit;\n  text-rendering: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n}\n\n@layer components {\n  :where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {\n    min-inline-size: 0;\n    max-inline-size: 100%;\n    margin: 0;\n  }\n\n  [data-component-root~="ui-stack"] {\n    --ui-layout-gap: var(--ui-space-4, 1rem);\n    --ui-layout-align: stretch;\n    --ui-layout-justify: flex-start;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ui-layout-gap);\n    align-items: var(--ui-layout-align);\n    justify-content: var(--ui-layout-justify);\n  }\n\n  [data-component-root~="ui-stack"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-stack"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-stack"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-stack"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-stack"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }\n  [data-component-root~="ui-stack"][data-align="start"] { --ui-layout-align: flex-start; }\n  [data-component-root~="ui-stack"][data-align="center"] { --ui-layout-align: center; }\n  [data-component-root~="ui-stack"][data-align="end"] { --ui-layout-align: flex-end; }\n  [data-component-root~="ui-stack"][data-justify="center"] { --ui-layout-justify: center; }\n  [data-component-root~="ui-stack"][data-justify="end"] { --ui-layout-justify: flex-end; }\n  [data-component-root~="ui-stack"][data-justify="between"] { --ui-layout-justify: space-between; }\n\n  [data-component-root~="ui-cluster"] {\n    --ui-layout-gap: var(--ui-space-3, 0.75rem);\n    --ui-layout-align: center;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: var(--ui-layout-align);\n    gap: var(--ui-layout-gap);\n  }\n\n  [data-component-root~="ui-cluster"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-cluster"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-cluster"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-cluster"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-cluster"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }\n  [data-component-root~="ui-cluster"][data-align="start"] { --ui-layout-align: flex-start; }\n  [data-component-root~="ui-cluster"][data-align="center"] { --ui-layout-align: center; }\n  [data-component-root~="ui-cluster"][data-align="end"] { --ui-layout-align: flex-end; }\n  [data-component-root~="ui-cluster"][data-align="stretch"] { --ui-layout-align: stretch; }\n\n  [data-component-root~="ui-grid"] {\n    --ui-grid-gap: var(--ui-space-4, 1rem);\n    --ui-grid-min: 12rem;\n    display: grid;\n    gap: var(--ui-grid-gap);\n    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));\n  }\n\n  [data-component-root~="ui-grid"][data-gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-grid"][data-gap="s"] { --ui-grid-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-grid"][data-gap="m"] { --ui-grid-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-grid"][data-gap="l"] { --ui-grid-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-grid"][data-min="sm"] { --ui-grid-min: 12rem; }\n  [data-component-root~="ui-grid"][data-min="md"] { --ui-grid-min: 16rem; }\n  [data-component-root~="ui-grid"][data-min="lg"] { --ui-grid-min: 20rem; }\n\n  [data-component-root~="ui-container"] {\n    --ui-container-measure: 65ch;\n    --ui-container-gutters: var(--ui-space-4, 1rem);\n    display: block;\n    inline-size: 100%;\n    max-inline-size: var(--ui-container-measure);\n    margin-inline: auto;\n    padding-inline: var(--ui-container-gutters);\n  }\n\n  [data-component-root~="ui-container"][data-measure="narrow"] { --ui-container-measure: 45ch; }\n  [data-component-root~="ui-container"][data-measure="wide"] { --ui-container-measure: 80ch; }\n  [data-component-root~="ui-container"][data-gutters="s"] { --ui-container-gutters: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-container"][data-gutters="m"] { --ui-container-gutters: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-container"][data-gutters="l"] { --ui-container-gutters: var(--ui-space-5, 1.5rem); }\n\n  [data-component-root~="ui-switcher"] {\n    --ui-switcher-gap: var(--ui-space-4, 1rem);\n    --ui-switcher-threshold: 30rem;\n    --ui-switcher-align: stretch;\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ui-switcher-gap);\n    align-items: var(--ui-switcher-align);\n  }\n\n  [data-component-root~="ui-switcher"] > * {\n    min-inline-size: 0;\n    flex-grow: 1;\n    /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */\n    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);\n  }\n\n  [data-component-root~="ui-switcher"][data-gap="xs"] { --ui-switcher-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-switcher"][data-gap="s"] { --ui-switcher-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-switcher"][data-gap="m"] { --ui-switcher-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-switcher"][data-gap="l"] { --ui-switcher-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-switcher"][data-threshold="xs"] { --ui-switcher-threshold: 20rem; }\n  [data-component-root~="ui-switcher"][data-threshold="sm"] { --ui-switcher-threshold: 30rem; }\n  [data-component-root~="ui-switcher"][data-threshold="md"] { --ui-switcher-threshold: 45rem; }\n  [data-component-root~="ui-switcher"][data-threshold="lg"] { --ui-switcher-threshold: 60rem; }\n  [data-component-root~="ui-switcher"][data-align="start"] { --ui-switcher-align: flex-start; }\n  [data-component-root~="ui-switcher"][data-align="center"] { --ui-switcher-align: center; }\n  [data-component-root~="ui-switcher"][data-align="end"] { --ui-switcher-align: flex-end; }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] {\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n    /* On the panel\'s inner edge: the end edge of a start sidebar. */\n    inset-inline-end: 0;\n    inline-size: 8px;\n    min-inline-size: 8px;\n    transform: translateX(50%);\n    cursor: col-resize;\n    touch-action: none;\n    outline: none;\n  }\n  [data-component-root~="ui-sidebar"][data-side="end"] > [data-ui-sidebar-resizer] {\n    inset-inline-end: auto;\n    inset-inline-start: 0;\n    transform: translateX(-50%);\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]::after {\n    content: "";\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 3px;\n    inline-size: 2px;\n    background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);\n    opacity: var(--ui-affordance-guide-opacity, 0.42);\n    transition:\n      background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),\n      opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] > [data-ui-guide] {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    inline-size: 6px;\n    block-size: 22px;\n    border: 1px solid var(--ui-border-strong, #c8c8c4);\n    border-radius: var(--ui-radius-round, 999px);\n    background: var(--ui-surface-elevated, #fff);\n    opacity: 0;\n    transform: translate(-50%, -50%);\n    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);\n    pointer-events: none;\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:hover::after,\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:focus-visible::after {\n    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));\n    opacity: 1;\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:is(:hover, :focus-visible) > [data-ui-guide] {\n    opacity: 1;\n  }\n\n  [data-component-root~="ui-reel"] {\n    --ui-reel-gap: var(--ui-space-4, 1rem);\n    --ui-reel-item-width: auto;\n    display: flex;\n    inline-size: 100%;\n    gap: var(--ui-reel-gap);\n    overflow-x: auto;\n    overflow-y: hidden;\n    overscroll-behavior-inline: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  [data-component-root~="ui-reel"] > * {\n    min-inline-size: 0;\n    flex: 0 0 var(--ui-reel-item-width);\n  }\n  [data-component-root~="ui-reel"][data-gap="xs"] { --ui-reel-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-reel"][data-gap="s"] { --ui-reel-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-reel"][data-gap="m"] { --ui-reel-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-reel"][data-gap="l"] { --ui-reel-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-reel"][data-item-width="sm"] { --ui-reel-item-width: 12rem; }\n  [data-component-root~="ui-reel"][data-item-width="md"] { --ui-reel-item-width: 16rem; }\n  [data-component-root~="ui-reel"][data-item-width="lg"] { --ui-reel-item-width: 20rem; }\n  [data-component-root~="ui-reel"][data-snap="start"],\n  [data-component-root~="ui-reel"][data-snap="center"] { scroll-snap-type: inline mandatory; }\n  [data-component-root~="ui-reel"][data-snap="start"] > * { scroll-snap-align: start; }\n  [data-component-root~="ui-reel"][data-snap="center"] > * { scroll-snap-align: center; }\n\n  [data-component-root~="ui-separator"] {\n    --ui-separator-color: var(--ui-border-default, #d0d5dd);\n    --ui-separator-space: var(--ui-space-4, 1rem);\n    display: block;\n    margin: 0;\n    border: 0;\n    border-block-start: 1px solid var(--ui-separator-color);\n    padding: 0;\n  }\n\n  [data-component-root~="ui-separator"][data-orientation="vertical"] {\n    inline-size: 1px;\n    block-size: 100%;\n    border-block-start: 0;\n    border-inline-start: 1px solid var(--ui-separator-color);\n  }\n}\n';
-
-// src/declarative-index.ts
-(0, import_declarative.registerLoomaPackage)("layout", records, styles);

package/layout/index.d.cts

@@ -1,18 +0,0 @@
-/**
- * Origin of a sidebar width transition.
- * The trigger is stable across native HTML and framework adapters, allowing an
- * application to persist or announce user changes without treating initial
- * programmatic synchronization as input.
- */
-type SidebarResizeTrigger = "keyboard" | "pointer" | "programmatic";
-/**
- * Effective, clamped sidebar width after a transition.
- * Consumers should use this value rather than remeasure during the event; it is
- * already normalized against the component's min/max contract.
- */
-interface SidebarResizeDetail {
-    width: number;
-    trigger: SidebarResizeTrigger;
-}
-
-export type { SidebarResizeDetail, SidebarResizeTrigger };

package/layout/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * Origin of a sidebar width transition.
- * The trigger is stable across native HTML and framework adapters, allowing an
- * application to persist or announce user changes without treating initial
- * programmatic synchronization as input.
- */
-type SidebarResizeTrigger = "keyboard" | "pointer" | "programmatic";
-/**
- * Effective, clamped sidebar width after a transition.
- * Consumers should use this value rather than remeasure during the event; it is
- * already normalized against the component's min/max contract.
- */
-interface SidebarResizeDetail {
-    width: number;
-    trigger: SidebarResizeTrigger;
-}
-
-export type { SidebarResizeDetail, SidebarResizeTrigger };