@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/chunk-3XPGJUUQ.js

@@ -0,0 +1,37 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/surfaces/sunken-panel/sunken-panel.tsx
+function SunkenPanel({
+  children,
+  ariaLabel,
+  shape = "rounded",
+  flex = false,
+  fill = false,
+  tabIndex,
+  outlined = false,
+  className = "",
+  slot
+}) {
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-sunken-panel ${className}`.trim(),
+      "data-component": "sunken-panel",
+      "data-shape": shape,
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-outlined": outlined ? "true" : void 0,
+      style: flexValue ? `--_kui-sunken-panel-flex:${flexValue}` : void 0,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      tabindex: tabIndex,
+      slot,
+      children
+    }
+  );
+}
+
+export { SunkenPanel };
+
+//# sourceMappingURL=chunk-3XPGJUUQ.js.map

package/dist/chunk-3XPGJUUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/sunken-panel/sunken-panel.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,KAAA,EAAO,SAAA,GAAY,CAAA,yBAAA,EAA4B,SAAS,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,IAAA,EAAM,YAAY,QAAA,GAAW,MAAA;AAAA,MAC7B,YAAA,EAAY,SAAA;AAAA,MACZ,QAAA,EAAU,QAAA;AAAA,MACV,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-3XPGJUUQ.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type {\n  CssFlex,\n  CssFlexKeyword,\n} from '../../../shared/styles/css-values.js';\n\nexport type SunkenPanelShape = 'rounded' | 'square';\n\nexport interface SunkenPanelProps {\n  children?: KerfUiContent;\n  /** Optional accessible landmark name for a distinct application region. */\n  ariaLabel?: string;\n  /** Corner shape: a rounded rectangle (default) or square corners. */\n  shape?: SunkenPanelShape;\n  /** Grow or shrink within a flex parent, using Grid's typed flex contract. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /** Fill a parent with a definite height; use flex inside a flex layout. */\n  fill?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A lowered application surface with one compact inset and a vertical content\n * stack. The panel owns its background and padding; children own their own\n * borders and internal geometry.\n */\nexport function SunkenPanel({\n  children,\n  ariaLabel,\n  shape = 'rounded',\n  flex = false,\n  fill = false,\n  tabIndex,\n  outlined = false,\n  className = '',\n  slot,\n}: SunkenPanelProps) {\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  return (\n    <div\n      class={`kui-sunken-panel ${className}`.trim()}\n      data-component=\"sunken-panel\"\n      data-shape={shape}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-outlined={outlined ? 'true' : undefined}\n      style={flexValue ? `--_kui-sunken-panel-flex:${flexValue}` : undefined}\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n      tabindex={tabIndex}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-4Y4L5YEI.js

@@ -0,0 +1,66 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/field-label/field-label.tsx
+function FieldLabel({
+  children,
+  class: classValue = "",
+  className = "",
+  ...attributes
+}) {
+  const classes = ["kui-text__field-label", classValue, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...attributes, class: classes, "data-component": "field-label", children });
+}
+function Text({
+  variant: Variant = "p",
+  tone = "default",
+  color,
+  size = "default",
+  font = "default",
+  border = "transparent",
+  flush = false,
+  controlMargins = "",
+  lineHeight = "default",
+  wrap = "normal",
+  maxLines,
+  children,
+  class: classValue = "",
+  className = "",
+  style,
+  ...attributes
+}) {
+  if (maxLines !== void 0 && (!Number.isSafeInteger(maxLines) || maxLines < 1 || wrap === "nowrap" || wrap === "truncate"))
+    throw new RangeError(
+      "Text maxLines requires a positive integer and wrapping"
+    );
+  const classes = ["kui-text", classValue, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Variant,
+    {
+      ...attributes,
+      class: classes,
+      "data-component": "text",
+      "data-tone": tone,
+      "data-size": size,
+      "data-font": font,
+      "data-border": border,
+      "data-control-margins": controlMargins || void 0,
+      "data-flush": flush ? "true" : void 0,
+      "data-line-height": lineHeight === "tight" ? "tight" : void 0,
+      "data-wrap": wrap === "normal" ? void 0 : wrap,
+      "data-max-lines": maxLines === void 0 ? void 0 : String(maxLines),
+      style: color === void 0 ? style : `${style === void 0 || style === null ? "" : `${style};`}color:${color}`,
+      children: maxLines === void 0 ? children : /* @__PURE__ */ jsx(
+        "span",
+        {
+          class: "kui-text__clamp",
+          style: `--_kui-text-max-lines:${maxLines}`,
+          children
+        }
+      )
+    }
+  );
+}
+
+export { FieldLabel, Text };
+
+//# sourceMappingURL=chunk-4Y4L5YEI.js.map

package/dist/chunk-4Y4L5YEI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/field-label/field-label.tsx","../src/components/typography/text/text.tsx"],"names":["jsx"],"mappings":";;;AAYO,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA,OAAO,UAAA,GAAa,EAAA;AAAA,EACpB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,GAAU,CAAC,uBAAA,EAAyB,UAAA,EAAY,SAAS,EAC5D,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EAAY,OAAO,OAAA,EAAS,gBAAA,EAAe,eACjD,QAAA,EACH,CAAA;AAEJ;AC4CO,SAAS,IAAA,CAAK;AAAA,EACnB,SAAS,OAAA,GAAU,GAAA;AAAA,EACnB,IAAA,GAAO,SAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,aAAA;AAAA,EACT,KAAA,GAAQ,KAAA;AAAA,EACR,cAAA,GAAiB,EAAA;AAAA,EACjB,UAAA,GAAa,SAAA;AAAA,EACb,IAAA,GAAO,QAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAO,UAAA,GAAa,EAAA;AAAA,EACpB,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,IACE,QAAA,KAAa,MAAA,KACZ,CAAC,MAAA,CAAO,aAAA,CAAc,QAAQ,CAAA,IAC7B,QAAA,GAAW,CAAA,IACX,IAAA,KAAS,QAAA,IACT,IAAA,KAAS,UAAA,CAAA;AAEX,IAAA,MAAM,IAAI,UAAA;AAAA,MACR;AAAA,KACF;AACF,EAAA,MAAM,OAAA,GAAU,CAAC,UAAA,EAAY,UAAA,EAAY,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC5E,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,KAAA,EAAO,OAAA;AAAA,MACP,gBAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,wBAAsB,cAAA,IAAkB,MAAA;AAAA,MACxC,YAAA,EAAY,QAAQ,MAAA,GAAS,MAAA;AAAA,MAC7B,kBAAA,EAAkB,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,MAAA;AAAA,MACrD,WAAA,EAAW,IAAA,KAAS,QAAA,GAAW,MAAA,GAAY,IAAA;AAAA,MAC3C,gBAAA,EAAgB,QAAA,KAAa,MAAA,GAAY,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,MACpE,KAAA,EACE,KAAA,KAAU,MAAA,GACN,KAAA,GACA,GAAG,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,GAAO,EAAA,GAAK,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,SAAS,KAAK,CAAA,CAAA;AAAA,MAG9E,QAAA,EAAA,QAAA,KAAa,MAAA,GACZ,QAAA,mBAEAA,GAAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,iBAAA;AAAA,UACN,KAAA,EAAO,yBAAyB,QAAQ,CAAA,CAAA;AAAA,UAEvC;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ","file":"chunk-4Y4L5YEI.js","sourcesContent":["import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nexport type FieldLabelProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  children: string;\n  class?: string;\n  className?: string;\n};\n\n/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */\nexport function FieldLabel({\n  children,\n  class: classValue = '',\n  className = '',\n  ...attributes\n}: FieldLabelProps) {\n  const classes = ['kui-text__field-label', classValue, className]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div {...attributes} class={classes} data-component=\"field-label\">\n      {children}\n    </div>\n  );\n}\n","import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\n\nexport {\n  FieldLabel,\n  type FieldLabelProps,\n} from '../../forms/field-label/field-label.js';\n\nexport type TextVariant =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\nexport type TextTone = 'default' | 'quiet' | 'danger';\nexport type TextSize = 'compact' | 'default' | 'large' | 'xlarge';\nexport type TextFont = 'default' | 'monospace';\nexport type TextBorder = 'transparent' | 'none';\nexport type TextLineHeight = 'default' | 'tight';\nexport type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';\n\nexport type TextContent =\n  KerfUiContent | string | number | readonly TextContent[];\n\ntype TextCommonProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */\n  variant?: TextVariant;\n  /** Semantic foreground treatment. Defaults to the inherited foreground. */\n  tone?: TextTone;\n  /** Foreground color; overrides tone when supplied, or inherits when omitted. */\n  color?: CssForegroundColor;\n  /** Text sizing independent of the native semantic element. */\n  size?: TextSize;\n  /** Font family independent of the native semantic element. */\n  font?: TextFont;\n  /** Transparent alignment border or no border when embedded in owner chrome. */\n  border?: TextBorder;\n  /** Add the shared control gutter outside selected physical edges. */\n  controlMargins?: Sides;\n  /** Remove the block variant's item padding and border in compact content. */\n  flush?: boolean;\n  /** Use compact leading for short dialog or metadata copy. */\n  lineHeight?: TextLineHeight;\n  children: TextContent;\n  class?: string;\n  className?: string;\n};\n\nexport type TextProps = TextCommonProps &\n  (\n    | {\n        /** Wrap normally or break long unbroken strings. Defaults to normal. */\n        wrap?: 'normal' | 'anywhere';\n        /** Cap wrapped text to this positive number of lines. */\n        maxLines?: number;\n      }\n    | {\n        /** Keep one line, with or without an ellipsis. */\n        wrap: 'nowrap' | 'truncate';\n        maxLines?: never;\n      }\n  );\n\n/**\n * Semantic heading, paragraph, or inline text. Block variants use the standard\n * content-item padding; `span` adds no box geometry.\n * All ordinary native heading/paragraph attributes pass through to the element.\n */\nexport function Text({\n  variant: Variant = 'p',\n  tone = 'default',\n  color,\n  size = 'default',\n  font = 'default',\n  border = 'transparent',\n  flush = false,\n  controlMargins = '',\n  lineHeight = 'default',\n  wrap = 'normal',\n  maxLines,\n  children,\n  class: classValue = '',\n  className = '',\n  style,\n  ...attributes\n}: TextProps) {\n  if (\n    maxLines !== undefined &&\n    (!Number.isSafeInteger(maxLines) ||\n      maxLines < 1 ||\n      wrap === 'nowrap' ||\n      wrap === 'truncate')\n  )\n    throw new RangeError(\n      'Text maxLines requires a positive integer and wrapping',\n    );\n  const classes = ['kui-text', classValue, className].filter(Boolean).join(' ');\n  return (\n    <Variant\n      {...attributes}\n      class={classes}\n      data-component=\"text\"\n      data-tone={tone}\n      data-size={size}\n      data-font={font}\n      data-border={border}\n      data-control-margins={controlMargins || undefined}\n      data-flush={flush ? 'true' : undefined}\n      data-line-height={lineHeight === 'tight' ? 'tight' : undefined}\n      data-wrap={wrap === 'normal' ? undefined : wrap}\n      data-max-lines={maxLines === undefined ? undefined : String(maxLines)}\n      style={\n        color === undefined\n          ? style\n          : `${style === undefined || style === null ? '' : `${style};`}color:${color}`\n      }\n    >\n      {maxLines === undefined ? (\n        children\n      ) : (\n        <span\n          class=\"kui-text__clamp\"\n          style={`--_kui-text-max-lines:${maxLines}`}\n        >\n          {children}\n        </span>\n      )}\n    </Variant>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-5BZBIRQG.js

@@ -0,0 +1,452 @@
+import { wireResizeHandles } from './chunk-CEJ5FK6G.js';
+import { workbenchRegionId } from './chunk-S4ZGTDSG.js';
+import { effect } from 'kerfjs';
+
+var PANEL_SELECTORS = {
+  leftRail: ':scope > [data-workbench-rail="left"]',
+  rightRail: ':scope > [data-workbench-rail="right"]',
+  bottomDrawer: ":scope > .kui-workbench__center > [data-workbench-drawer]"
+};
+var RESTORE_PANELS = {
+  leftRail: "left",
+  rightRail: "right",
+  bottomDrawer: "bottom"
+};
+var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var focusables = (element) => [...element.querySelectorAll(FOCUSABLE)].filter(
+  (control) => typeof control.checkVisibility !== "function" || control.checkVisibility()
+);
+function wireWorkbenchOverlays(root, findWorkbench, panels, exclusive = false) {
+  const ownerDocument = root.ownerDocument;
+  const disposers = [];
+  const openOrder = [];
+  const openers = /* @__PURE__ */ new Map();
+  let pressedFocus;
+  let activated;
+  const panelElement = (panel) => findWorkbench()?.querySelector(PANEL_SELECTORS[panel.key]) ?? null;
+  const responsive = (element) => element.dataset.presentation === "inline" && element.hasAttribute("data-responsive-overlay-at") && globalThis.getComputedStyle(element).position === "absolute";
+  const overlaid = (element) => element.dataset.presentation === "overlay" || responsive(element);
+  const restoreTarget = (panel, element) => {
+    const opener = openers.get(panel);
+    if (opener?.isConnected && !element?.contains(opener) && !panels.some(
+      (other) => other.collapsed.peek() && panelElement(other)?.contains(opener)
+    ))
+      return opener;
+    const side = RESTORE_PANELS[panel.key];
+    const restore = findWorkbench()?.querySelector(
+      `.kui-workbench__restore[data-panel="${side}"]`
+    )?.querySelector(FOCUSABLE);
+    return restore ?? (element ? controller(element) : void 0);
+  };
+  const controller = (element) => {
+    const ids = new Set(
+      [element, ...element.querySelectorAll("[id]")].map((node) => node.id)
+    );
+    ids.delete("");
+    return [
+      ...ownerDocument.querySelectorAll("[aria-controls]")
+    ].find(
+      (control) => !element.contains(control) && control.matches(FOCUSABLE) && control.getAttribute("aria-controls").split(/\s+/).some((id) => ids.has(id))
+    );
+  };
+  const namesPanel = (control, id) => control.getAttribute("aria-controls").split(/\s+/).includes(id);
+  const controlInside = (element) => [...element.querySelectorAll("[aria-controls]")].find(
+    (control) => control.matches(FOCUSABLE) && namesPanel(control, element.id)
+  );
+  const rescueFocus = (panel) => {
+    const element = panelElement(panel);
+    const target = restoreTarget(panel, element);
+    if (target) {
+      target.focus();
+      return;
+    }
+    globalThis.queueMicrotask(() => {
+      if (!panel.collapsed.peek()) return;
+      const later = restoreTarget(panel, panelElement(panel));
+      const active = ownerDocument.activeElement;
+      if (later) later.focus();
+      else if (active instanceof HTMLElement && element?.contains(active))
+        active.blur();
+    });
+  };
+  const adapt = (panel, element, collapsed) => {
+    if (panel.collapsed.peek() === collapsed) return;
+    const stranded = collapsed && element.contains(ownerDocument.activeElement);
+    panel.collapsed.value = collapsed;
+    const content = element.querySelector(
+      ":scope > .kui-workbench__panel-content"
+    );
+    content.style.transition = "none";
+    void globalThis.getComputedStyle(content).transform;
+    content.removeAttribute("style");
+    if (stranded && element.contains(ownerDocument.activeElement))
+      rescueFocus(panel);
+  };
+  const inlineState = /* @__PURE__ */ new Map();
+  const sync = () => {
+    const workbench = findWorkbench();
+    let width;
+    for (const panel of panels) {
+      const element = panelElement(panel);
+      if (!element) continue;
+      const at = Number(element.dataset.responsiveOverlayAt);
+      const customActive = element.dataset.responsiveOverlayAt !== void 0 && Number.isFinite(at) && at > 0 && element.dataset.presentation === "inline" && (width ??= workbench.getBoundingClientRect().width) <= at;
+      if (customActive) {
+        if (element.dataset.responsiveOverlayActive !== "true")
+          element.dataset.responsiveOverlayActive = "true";
+      } else if (element.hasAttribute("data-responsive-overlay-active"))
+        element.removeAttribute("data-responsive-overlay-active");
+      const active2 = responsive(element);
+      if (active2 && !inlineState.has(panel)) {
+        inlineState.set(panel, panel.collapsed.peek());
+        adapt(panel, element, true);
+      } else if (!active2 && inlineState.has(panel)) {
+        const remembered = inlineState.get(panel);
+        inlineState.delete(panel);
+        adapt(panel, element, remembered);
+      }
+      const rendered = panelElement(panel);
+      if (rendered && customActive && rendered.dataset.responsiveOverlayActive !== "true")
+        rendered.dataset.responsiveOverlayActive = "true";
+    }
+    if (!workbench) return;
+    const active = (key) => {
+      const element = workbench.querySelector(
+        PANEL_SELECTORS[key]
+      );
+      return element?.dataset.responsiveOverlayActive === "true" ? element : null;
+    };
+    const left = active("leftRail");
+    const right = active("rightRail");
+    const drawer = active("bottomDrawer");
+    const railOpen = [left, right].some(
+      (element) => element && element.dataset.collapsed !== "true"
+    );
+    const markers = [
+      left && "left",
+      right && "right",
+      drawer && "drawer",
+      railOpen && "rail-open",
+      (railOpen || drawer && drawer.dataset.collapsed !== "true") && "open"
+    ].filter(Boolean).join(" ");
+    if (markers) {
+      if (workbench.dataset.numericOverlays !== markers)
+        workbench.dataset.numericOverlays = markers;
+    } else if (workbench.hasAttribute("data-numeric-overlays"))
+      workbench.removeAttribute("data-numeric-overlays");
+  };
+  let observed = null;
+  const resizeObserver = typeof globalThis.ResizeObserver === "function" ? new globalThis.ResizeObserver(() => sync()) : void 0;
+  const track = () => {
+    const workbench = findWorkbench();
+    if (workbench === observed) return false;
+    if (observed) resizeObserver?.unobserve(observed);
+    observed = workbench;
+    if (workbench) resizeObserver?.observe(workbench);
+    return true;
+  };
+  const mutationObserver = new MutationObserver((records) => {
+    if (track() || records.some((record) => record.type === "attributes"))
+      sync();
+  });
+  mutationObserver.observe(root, {
+    attributes: true,
+    attributeFilter: [
+      "data-presentation",
+      "data-responsive-overlay-at",
+      "data-responsive-overlay-active",
+      "data-collapsed"
+    ],
+    childList: true,
+    subtree: true
+  });
+  const remProbe = ownerDocument.createElement("div");
+  remProbe.setAttribute("aria-hidden", "true");
+  remProbe.style.cssText = "position:absolute;width:1rem;height:0;overflow:hidden;visibility:hidden;pointer-events:none";
+  if (resizeObserver) {
+    ownerDocument.body.append(remProbe);
+    resizeObserver.observe(remProbe);
+  }
+  disposers.push(() => {
+    mutationObserver.disconnect();
+    resizeObserver?.disconnect();
+    remProbe.remove();
+  });
+  track();
+  sync();
+  for (const panel of panels) {
+    let previous = panel.collapsed.peek();
+    if (!previous) openOrder.push(panel);
+    disposers.push(
+      effect(() => {
+        const collapsed = panel.collapsed.value;
+        if (collapsed === previous) return;
+        previous = collapsed;
+        const index = openOrder.indexOf(panel);
+        if (index >= 0) openOrder.splice(index, 1);
+        if (collapsed) {
+          const active2 = ownerDocument.activeElement;
+          const element2 = panelElement(panel);
+          if (element2?.contains(active2) || // The panel's own control closed it (focused or not), so hand
+          // focus to the control that reopens it.
+          activated !== void 0 && element2?.contains(activated) || pressedFocus === panel && (active2 === null || active2 === ownerDocument.body))
+            rescueFocus(panel);
+          return;
+        }
+        openOrder.push(panel);
+        const element = panelElement(panel);
+        const active = ownerDocument.activeElement;
+        if (active instanceof HTMLElement && active !== ownerDocument.body && !element?.contains(active))
+          openers.set(panel, active);
+        else openers.delete(panel);
+        const toggle = openers.get(panel) ?? (activated && element && namesPanel(activated, element.id) ? activated : void 0);
+        if (toggle) {
+          const handOff = (frames) => {
+            const focused = ownerDocument.activeElement;
+            if (panel.collapsed.peek()) return;
+            if (toggle.isConnected) {
+              if (toggle === focused && frames > 0)
+                globalThis.requestAnimationFrame(() => handOff(frames - 1));
+              return;
+            }
+            if (focused !== null && focused !== ownerDocument.body) return;
+            const current = panelElement(panel);
+            if (current) controlInside(current)?.focus({ preventScroll: true });
+          };
+          globalThis.queueMicrotask(() => handOff(5));
+        }
+        if (!element || !overlaid(element)) return;
+        if (exclusive) {
+          for (const [other] of openOverlays())
+            if (other !== panel) other.collapsed.value = true;
+        }
+        (focusables(element)[0] ?? element).focus({ preventScroll: true });
+      })
+    );
+  }
+  const openOverlays = () => openOrder.flatMap((panel) => {
+    const element = panelElement(panel);
+    return !panel.collapsed.peek() && element && overlaid(element) ? [[panel, element]] : [];
+  });
+  const inAllowedPortal = (panel, path) => {
+    const keepOpenOn = panel.keepOpenOn;
+    return Boolean(
+      keepOpenOn && path.some((target) => target instanceof Node && keepOpenOn(target))
+    );
+  };
+  const onKeydown = (event) => {
+    if (event.key !== "Escape" && event.key !== "Tab" || event.defaultPrevented)
+      return;
+    const open = openOverlays();
+    if (open.length === 0) return;
+    if (open.some(([panel2]) => inAllowedPortal(panel2, event.composedPath())))
+      return;
+    const active = ownerDocument.activeElement;
+    const [panel, element] = open.find(([, candidate]) => candidate.contains(active)) ?? open[open.length - 1];
+    if (event.key === "Escape") {
+      event.preventDefault();
+      panel.collapsed.value = true;
+      return;
+    }
+    const items = focusables(element);
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    const inside2 = element.contains(active);
+    if (event.shiftKey && (!inside2 || active === first)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && (!inside2 || active === last)) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  let pressed = [];
+  const inside = (panel, element, path) => path.includes(element) || inAllowedPortal(panel, path);
+  const onPointerdown = (event) => {
+    const path = event.composedPath();
+    pressed = openOverlays().filter(([panel, element]) => !inside(panel, element, path)).map(([panel]) => panel);
+    const active = ownerDocument.activeElement;
+    pressedFocus = panels.find((panel) => {
+      if (panel.collapsed.peek()) return false;
+      const element = panelElement(panel);
+      return !!element && path.includes(element) && element.contains(active);
+    });
+  };
+  const onFocusin = () => {
+    pressedFocus = void 0;
+  };
+  const onClick = (event) => {
+    const candidates = pressed;
+    pressed = [];
+    const path = event.composedPath();
+    for (const [panel, element] of openOverlays())
+      if (candidates.includes(panel) && !inside(panel, element, path))
+        panel.collapsed.value = true;
+  };
+  const onActivate = (event) => {
+    const target = event.target;
+    const control = target instanceof Element ? target.closest("[aria-controls]") : null;
+    if (!control) return;
+    activated = control;
+    globalThis.requestAnimationFrame(
+      () => globalThis.requestAnimationFrame(() => {
+        if (activated === control) activated = void 0;
+      })
+    );
+  };
+  ownerDocument.addEventListener("keydown", onKeydown);
+  ownerDocument.addEventListener("pointerdown", onPointerdown, true);
+  ownerDocument.addEventListener("click", onActivate, true);
+  ownerDocument.addEventListener("click", onClick);
+  ownerDocument.addEventListener("focusin", onFocusin, true);
+  disposers.push(() => {
+    ownerDocument.removeEventListener("keydown", onKeydown);
+    ownerDocument.removeEventListener("pointerdown", onPointerdown, true);
+    ownerDocument.removeEventListener("click", onActivate, true);
+    ownerDocument.removeEventListener("click", onClick);
+    ownerDocument.removeEventListener("focusin", onFocusin, true);
+  });
+  return () => {
+    for (const dispose of disposers.splice(0)) dispose();
+    for (const panel of panels)
+      panelElement(panel)?.removeAttribute("data-responsive-overlay-active");
+    for (const [panel, remembered] of inlineState) {
+      const element = panelElement(panel);
+      if (element) adapt(panel, element, remembered);
+      else panel.collapsed.value = remembered;
+    }
+    inlineState.clear();
+  };
+}
+
+// src/components/layout/workbench/wiring/wire-workbench.ts
+function defaultStorage() {
+  try {
+    return globalThis.localStorage ?? void 0;
+  } catch {
+    return void 0;
+  }
+}
+function storedSize(text) {
+  if (text === null) return void 0;
+  const size = Number(text);
+  return Number.isFinite(size) && size > 0 ? Math.round(size) : void 0;
+}
+var quoted = (value) => `"${value.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+var px = (value) => Number.parseFloat(value) || 0;
+var mainRoomLimit = (region, { max }) => {
+  const horizontal = region.dataset.axis === "horizontal";
+  const container = region.parentElement;
+  const workbench = horizontal ? container : container?.parentElement;
+  const mainMin = Number(
+    horizontal ? workbench?.dataset.mainMinSize : workbench?.dataset.mainMinHeight
+  );
+  if (!container || !(mainMin > 0)) return max;
+  const box = container.getBoundingClientRect();
+  const room = horizontal ? box.width : box.height;
+  if (room <= 0) return max;
+  let others = 0;
+  if (horizontal)
+    for (const rail of container.children) {
+      if (rail === region || !rail.matches(".kui-workbench__rail") || globalThis.getComputedStyle(rail).position === "absolute")
+        continue;
+      others += rail.getBoundingClientRect().width;
+    }
+  const style = globalThis.getComputedStyle(region);
+  const size = px(region.style.getPropertyValue("--kui-resizable-region-size"));
+  const border = style.boxSizing === "border-box" ? 0 : horizontal ? px(style.borderInlineStartWidth) + px(style.borderInlineEndWidth) : px(style.borderBlockStartWidth) + px(style.borderBlockEndWidth);
+  const extent = px(style.flexBasis) - size + border;
+  return Math.floor(room - Math.min(mainMin, room) - others - extent);
+};
+function wireWorkbench(root, {
+  id,
+  panels,
+  deviceClass,
+  storage = defaultStorage(),
+  step,
+  largeStep,
+  onResize,
+  dismissOverlays = true,
+  exclusiveOverlays = true
+}) {
+  const keys = Object.keys(panels);
+  const entries = keys.flatMap((key) => {
+    const size = panels[key]?.size;
+    return size ? [
+      {
+        key,
+        size,
+        storageKey: panels[key].storageKey,
+        regionId: workbenchRegionId(id, key)
+      }
+    ] : [];
+  });
+  const byRegion = new Map(entries.map((entry) => [entry.regionId, entry]));
+  const disposers = [];
+  for (const { size, storageKey } of entries) {
+    if (!storageKey || !storage) continue;
+    const seed = storedSize(storage.getItem(storageKey));
+    if (seed !== void 0) size.value = seed;
+    disposers.push(
+      effect(() => {
+        storage.setItem(storageKey, String(size.value));
+      })
+    );
+  }
+  const selector = entries.map(
+    ({ regionId }) => `[data-resizable="true"][data-region-id=${quoted(regionId)}]`
+  ).join(", ");
+  const start = () => wireResizeHandles(
+    root,
+    {
+      step,
+      largeStep,
+      onCommit: ({ id: regionId, size, source }) => {
+        const entry = byRegion.get(regionId);
+        entry.size.value = size;
+        onResize?.({ panel: entry.key, size, source });
+      }
+    },
+    selector,
+    mainRoomLimit
+  );
+  let stopResize;
+  if (selector) {
+    if (deviceClass) {
+      disposers.push(
+        effect(() => {
+          const compact = deviceClass.value.compact;
+          stopResize?.();
+          stopResize = compact ? void 0 : start();
+        })
+      );
+    } else {
+      stopResize = start();
+    }
+  }
+  const overlayPanels = keys.flatMap((key) => {
+    const collapsed = panels[key]?.collapsed;
+    return collapsed ? [{ key, collapsed, keepOpenOn: panels[key]?.keepOpenOn }] : [];
+  });
+  if (dismissOverlays && overlayPanels.length > 0) {
+    const selector2 = `[data-component="workbench"][id=${quoted(id)}]`;
+    disposers.push(
+      wireWorkbenchOverlays(
+        root,
+        () => root.matches(selector2) ? root : root.querySelector(selector2),
+        overlayPanels,
+        exclusiveOverlays
+      )
+    );
+  }
+  return () => {
+    stopResize?.();
+    stopResize = void 0;
+    for (const dispose of disposers.splice(0)) dispose();
+  };
+}
+
+export { wireWorkbench };
+
+//# sourceMappingURL=chunk-5BZBIRQG.js.map