@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.60

package/dist/chunk-2G2ZJQYK.js

@@ -0,0 +1,152 @@
+// src/css-values.ts
+var uiColorNames = [
+  "brand-border-loud",
+  "brand-border-normal",
+  "brand-border-quiet",
+  "brand-fill-loud",
+  "brand-fill-normal",
+  "brand-fill-quiet",
+  "brand-on-fill",
+  "brand-on-loud",
+  "brand-on-normal",
+  "brand-on-quiet",
+  "danger-border-loud",
+  "danger-border-normal",
+  "danger-border-quiet",
+  "danger-fill-loud",
+  "danger-fill-normal",
+  "danger-fill-quiet",
+  "danger-on-fill",
+  "danger-on-loud",
+  "danger-on-normal",
+  "danger-on-quiet",
+  "neutral-border-loud",
+  "neutral-border-normal",
+  "neutral-border-quiet",
+  "neutral-fill-loud",
+  "neutral-fill-normal",
+  "neutral-fill-quiet",
+  "neutral-on-loud",
+  "neutral-on-normal",
+  "neutral-on-quiet",
+  "pop-border-loud",
+  "pop-border-normal",
+  "pop-border-quiet",
+  "pop-fill-loud",
+  "pop-fill-normal",
+  "pop-fill-quiet",
+  "pop-on-fill",
+  "pop-on-loud",
+  "pop-on-normal",
+  "pop-on-quiet",
+  "success-border-loud",
+  "success-border-normal",
+  "success-border-quiet",
+  "success-fill-loud",
+  "success-fill-normal",
+  "success-fill-quiet",
+  "success-on-fill",
+  "success-on-loud",
+  "success-on-normal",
+  "success-on-quiet",
+  "surface",
+  "surface-lowered",
+  "surface-raised",
+  "text",
+  "text-link",
+  "text-quiet",
+  "warning-border-loud",
+  "warning-border-normal",
+  "warning-border-quiet",
+  "warning-fill-loud",
+  "warning-fill-normal",
+  "warning-fill-quiet",
+  "warning-on-fill",
+  "warning-on-loud",
+  "warning-on-normal",
+  "warning-on-quiet"
+];
+var spaceVariables = {
+  none: "--kui-space-none",
+  "2xs": "--kui-space-2xs",
+  xs: "--kui-space-xs",
+  s: "--kui-space-s",
+  m: "--kui-space-m",
+  l: "--kui-space-l",
+  xl: "--kui-space-xl"
+};
+function serializeNumber(value, helper) {
+  if (!Number.isFinite(value))
+    throw new RangeError(`${helper}() requires a finite number.`);
+  return String(Object.is(value, -0) ? 0 : value);
+}
+function serializeNonnegativeNumber(value, helper) {
+  const serialized = serializeNumber(value, helper);
+  if (value < 0)
+    throw new RangeError(`${helper}() requires nonnegative flex factors.`);
+  return serialized;
+}
+function validateCustomPropertyName(name, helper, example) {
+  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))
+    throw new TypeError(
+      `${helper}() requires an ASCII custom property name such as ${example}.`
+    );
+}
+function dimension(value, unit, helper) {
+  return `${serializeNumber(value, helper)}${unit}`;
+}
+function px(value) {
+  return dimension(value, "px", "px");
+}
+function rem(value) {
+  return dimension(value, "rem", "rem");
+}
+function remify(value) {
+  return rem(value / 16);
+}
+function em(value) {
+  return dimension(value, "em", "em");
+}
+function pct(value) {
+  return dimension(value, "%", "pct");
+}
+function space(name) {
+  const variable = spaceVariables[name];
+  if (variable === void 0)
+    throw new RangeError(
+      `space() received unknown spacing name ${String(name)}.`
+    );
+  return `var(${variable})`;
+}
+function lengthVar(name, fallback) {
+  validateCustomPropertyName(name, "lengthVar", "--app-gap");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function plus(first, second, ...rest) {
+  return [first, second, ...rest].join(" + ");
+}
+function calc(expression) {
+  return `calc(${expression})`;
+}
+function flex(grow, shrink = 1, basis = "auto") {
+  return `${serializeNonnegativeNumber(grow, "flex")} ${serializeNonnegativeNumber(shrink, "flex")} ${basis}`;
+}
+function uiColor(name) {
+  if (!uiColorNames.includes(name))
+    throw new RangeError(
+      `uiColor() received unknown color name ${String(name)}.`
+    );
+  return `var(--kui-color-${name})`;
+}
+function colorVar(name, fallback) {
+  validateCustomPropertyName(name, "colorVar", "--app-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function foregroundColorVar(name, fallback) {
+  validateCustomPropertyName(name, "foregroundColorVar", "--app-icon-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
+
+//# sourceMappingURL=chunk-2G2ZJQYK.js.map

package/dist/chunk-2G2ZJQYK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/css-values.ts"],"names":[],"mappings":"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","file":"chunk-2G2ZJQYK.js","sourcesContent":["declare const cssValueBrand: unique symbol;\ndeclare const cssLengthBrand: unique symbol;\ndeclare const cssLengthExpressionBrand: unique symbol;\ndeclare const cssFlexBrand: unique symbol;\ndeclare const cssColorBrand: unique symbol;\ndeclare const cssForegroundColorBrand: unique symbol;\n\n/**\n * A complete typed CSS value minted by a property-specific Kerf UI builder.\n *\n * This brand is an authoring correctness aid, not a sanitizer or security\n * boundary. Prefer the narrower property grammar, such as {@link CssLength},\n * whenever one is available.\n */\nexport type CssValue = string & {\n  readonly [cssValueBrand]: 'CssValue';\n};\n\n/**\n * A complete CSS length-percentage value suitable for dimension-valued UI\n * props. Despite the concise name, percentages are intentionally included.\n */\nexport type CssLength = CssValue & {\n  readonly [cssLengthBrand]: 'CssLength';\n};\n\n/**\n * An incomplete arithmetic expression. Wrap it with {@link calc} before\n * passing it to a prop that accepts {@link CssLength}.\n */\nexport type CssLengthExpression = string & {\n  readonly [cssLengthExpressionBrand]: 'CssLengthExpression';\n};\n\n/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */\nexport type CssFlex = CssValue & {\n  readonly [cssFlexBrand]: 'CssFlex';\n};\n\n/** A complete CSS color value. It is not interchangeable with a length. */\nexport type CssColor = CssValue & {\n  readonly [cssColorBrand]: 'CssColor';\n};\n\n/**\n * A complete CSS color meant to paint a foreground: text or an icon drawn over\n * a surface. Mint it with {@link uiColor} and a foreground token name\n * ({@link UiForegroundColorName}) or with {@link foregroundColorVar}. It is a\n * {@link CssColor}, but a plain `CssColor` is not a foreground color: fill,\n * border, and surface tokens are pale backgrounds that leave a foreground\n * nearly invisible.\n */\nexport type CssForegroundColor = CssColor & {\n  readonly [cssForegroundColorBrand]: 'CssForegroundColor';\n};\n\nexport type CssFlexKeyword = 'none' | 'auto' | 'initial';\nexport type CssFlexBasis =\n  | CssLength\n  | 'auto'\n  | 'content'\n  | 'min-content'\n  | 'max-content'\n  | 'fit-content';\nexport type CssSizeKeyword =\n  'auto' | 'min-content' | 'max-content' | 'fit-content';\n/** A complete width/height value accepted by dimension-valued UI props. */\nexport type CssSize = CssLength | CssSizeKeyword;\n\nconst uiColorNames = [\n  'brand-border-loud',\n  'brand-border-normal',\n  'brand-border-quiet',\n  'brand-fill-loud',\n  'brand-fill-normal',\n  'brand-fill-quiet',\n  'brand-on-fill',\n  'brand-on-loud',\n  'brand-on-normal',\n  'brand-on-quiet',\n  'danger-border-loud',\n  'danger-border-normal',\n  'danger-border-quiet',\n  'danger-fill-loud',\n  'danger-fill-normal',\n  'danger-fill-quiet',\n  'danger-on-fill',\n  'danger-on-loud',\n  'danger-on-normal',\n  'danger-on-quiet',\n  'neutral-border-loud',\n  'neutral-border-normal',\n  'neutral-border-quiet',\n  'neutral-fill-loud',\n  'neutral-fill-normal',\n  'neutral-fill-quiet',\n  'neutral-on-loud',\n  'neutral-on-normal',\n  'neutral-on-quiet',\n  'pop-border-loud',\n  'pop-border-normal',\n  'pop-border-quiet',\n  'pop-fill-loud',\n  'pop-fill-normal',\n  'pop-fill-quiet',\n  'pop-on-fill',\n  'pop-on-loud',\n  'pop-on-normal',\n  'pop-on-quiet',\n  'success-border-loud',\n  'success-border-normal',\n  'success-border-quiet',\n  'success-fill-loud',\n  'success-fill-normal',\n  'success-fill-quiet',\n  'success-on-fill',\n  'success-on-loud',\n  'success-on-normal',\n  'success-on-quiet',\n  'surface',\n  'surface-lowered',\n  'surface-raised',\n  'text',\n  'text-link',\n  'text-quiet',\n  'warning-border-loud',\n  'warning-border-normal',\n  'warning-border-quiet',\n  'warning-fill-loud',\n  'warning-fill-normal',\n  'warning-fill-quiet',\n  'warning-on-fill',\n  'warning-on-loud',\n  'warning-on-normal',\n  'warning-on-quiet',\n] as const;\n\n/** Names of the public `--kui-color-*` semantic tokens. */\nexport type UiColorName = (typeof uiColorNames)[number];\n\n/** The semantic tokens that paint a foreground: the `*-on-*` and text roles. */\nexport type UiForegroundColorName = Extract<\n  UiColorName,\n  `${string}-on-${string}` | 'text' | 'text-quiet' | 'text-link'\n>;\n\n/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */\nexport type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst spaceVariables = {\n  none: '--kui-space-none',\n  '2xs': '--kui-space-2xs',\n  xs: '--kui-space-xs',\n  s: '--kui-space-s',\n  m: '--kui-space-m',\n  l: '--kui-space-l',\n  xl: '--kui-space-xl',\n} as const satisfies Record<UiSpaceName, string>;\n\nfunction serializeNumber(value: number, helper: string): string {\n  if (!Number.isFinite(value))\n    throw new RangeError(`${helper}() requires a finite number.`);\n  return String(Object.is(value, -0) ? 0 : value);\n}\n\nfunction serializeNonnegativeNumber(value: number, helper: string): string {\n  const serialized = serializeNumber(value, helper);\n  if (value < 0)\n    throw new RangeError(`${helper}() requires nonnegative flex factors.`);\n  return serialized;\n}\n\nfunction validateCustomPropertyName(\n  name: string,\n  helper: string,\n  example: string,\n): void {\n  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))\n    throw new TypeError(\n      `${helper}() requires an ASCII custom property name such as ${example}.`,\n    );\n}\n\nfunction dimension(value: number, unit: string, helper: string): CssLength {\n  return `${serializeNumber(value, helper)}${unit}` as CssLength;\n}\n\n/** Create a complete pixel length. */\nexport function px(value: number): CssLength {\n  return dimension(value, 'px', 'px');\n}\n\n/** Create a complete root-font-relative length. */\nexport function rem(value: number): CssLength {\n  return dimension(value, 'rem', 'rem');\n}\n\n/** Converts a pixel value into rem units by dividing by 16. */\nexport function remify(value: number): CssLength {\n  return rem(value / 16);\n}\n\n/** Create a complete current-font-relative length. */\nexport function em(value: number): CssLength {\n  return dimension(value, 'em', 'em');\n}\n\n/** Create a complete percentage length. */\nexport function pct(value: number): CssLength {\n  return dimension(value, '%', 'pct');\n}\n\n/** Resolve a Kerf UI spacing step to its public custom property. */\nexport function space(name: UiSpaceName): CssLength {\n  const variable = spaceVariables[name];\n  if (variable === undefined)\n    throw new RangeError(\n      `space() received unknown spacing name ${String(name)}.`,\n    );\n  return `var(${variable})` as CssLength;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a CSS\n * length-percentage. The deliberately narrow name grammar keeps this helper\n * from becoming an arbitrary CSS-string constructor.\n */\nexport function lengthVar(\n  name: `--${string}`,\n  fallback?: CssLength,\n): CssLength {\n  validateCustomPropertyName(name, 'lengthVar', '--app-gap');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssLength;\n}\n\n/** Combine two or more complete lengths into a non-standalone sum. */\nexport function plus(\n  first: CssLength,\n  second: CssLength,\n  ...rest: readonly CssLength[]\n): CssLengthExpression {\n  return [first, second, ...rest].join(' + ') as CssLengthExpression;\n}\n\n/** Turn a typed length expression into a complete CSS `calc()` value. */\nexport function calc(expression: CssLengthExpression): CssLength {\n  return `calc(${expression})` as CssLength;\n}\n\n/** Build a complete, structured CSS flex shorthand. */\nexport function flex(\n  grow: number,\n  shrink = 1,\n  basis: CssFlexBasis = 'auto',\n): CssFlex {\n  return `${serializeNonnegativeNumber(grow, 'flex')} ${serializeNonnegativeNumber(shrink, 'flex')} ${basis}` as CssFlex;\n}\n\n/**\n * The brand {@link uiColor} returns for a token name: a\n * {@link CssForegroundColor} for a foreground token, otherwise a plain\n * {@link CssColor}.\n */\nexport type UiColor<Name extends UiColorName> =\n  Name extends UiForegroundColorName ? CssForegroundColor : CssColor;\n\n/**\n * Resolve a public Kerf UI semantic color token. A foreground token name\n * (`success-on-quiet`, `text-quiet`, …) returns a {@link CssForegroundColor};\n * any other token returns a plain {@link CssColor}.\n */\nexport function uiColor<Name extends UiColorName>(name: Name): UiColor<Name> {\n  if (!(uiColorNames as readonly string[]).includes(name))\n    throw new RangeError(\n      `uiColor() received unknown color name ${String(name)}.`,\n    );\n  return `var(--kui-color-${name})` as UiColor<Name>;\n}\n\n/** Reference an application-owned custom property whose contract is a color. */\nexport function colorVar(name: `--${string}`, fallback?: CssColor): CssColor {\n  validateCustomPropertyName(name, 'colorVar', '--app-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssColor;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a\n * foreground color (text or an icon over a surface). Use it where a prop\n * accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.\n */\nexport function foregroundColorVar(\n  name: `--${string}`,\n  fallback?: CssForegroundColor,\n): CssForegroundColor {\n  validateCustomPropertyName(name, 'foregroundColorVar', '--app-icon-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssForegroundColor;\n}\n"]}

package/dist/chunk-2OXQHM7I.js

@@ -0,0 +1,418 @@
+import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-PSHUSWQH.js';
+import { clampRegionSize, ResizeGrip } from './chunk-KLJKU6ZL.js';
+import { List } from './chunk-NAPE7WUS.js';
+import { FloatingToolbar } from './chunk-I3Q7KKYM.js';
+import { composedPanelBody, relocatedPanelGroups } from './chunk-T57AXDFM.js';
+import { Toolbar } from './chunk-MERWRTBG.js';
+import { Pane } from './chunk-EZVNC4J6.js';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var SIDES = {
+  leftRail: "left",
+  rightRail: "right",
+  bottomDrawer: "bottom"
+};
+var toggleAttributes = (workbenchId, key) => ({
+  "data-workbench-toggle": SIDES[key],
+  // Keyed, so the morph removes a toggle that leaves a toolbar instead of
+  // reusing its (possibly focused) button for a different control.
+  "data-key": `${workbenchRegionId(workbenchId, key)}-toggle`,
+  "aria-controls": workbenchRegionId(workbenchId, key)
+});
+function relocatedGroups(workbenchId, key, panel) {
+  return relocatedPanelGroups(
+    panel?.toolbar,
+    SIDES[key],
+    Boolean(panel?.collapsed),
+    toggleAttributes(workbenchId, key)
+  );
+}
+function panelBody(workbenchId, key, panel) {
+  const toolbar = panel.toolbar;
+  if (!toolbar) return panel.content;
+  return composedPanelBody({
+    toolbar,
+    side: SIDES[key],
+    collapsed: Boolean(panel.collapsed),
+    attributes: toggleAttributes(workbenchId, key),
+    pane: panel.pane,
+    footer: panel.footer,
+    content: panel.content
+  });
+}
+function chromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function mainBody({
+  workbenchId,
+  main,
+  mainToolbar,
+  mainHeader,
+  mainFooter,
+  mainBottomToolbar,
+  mainHeaderPlacement = "fixed",
+  mainFooterPlacement = "fixed",
+  mainPane,
+  mainHeaderList,
+  mainFooterList,
+  leftRail,
+  rightRail,
+  bottomDrawer
+}) {
+  if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)
+    return main;
+  const left = relocatedGroups(workbenchId, "leftRail", leftRail);
+  const right = relocatedGroups(workbenchId, "rightRail", rightRail);
+  const drawer = mainBottomToolbar ? relocatedGroups(workbenchId, "bottomDrawer", bottomDrawer) : [];
+  const header = !mainToolbar && !mainHeader ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+    mainToolbar ? /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        label: mainToolbar.label,
+        dividerSides: mainToolbar.dividerSides,
+        centerAlign: mainToolbar.centerAlign,
+        responsive: mainToolbar.responsive,
+        responsiveAt: mainToolbar.responsiveAt,
+        safeAreaEdges: mainToolbar.safeAreaEdges,
+        leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+          left,
+          mainToolbar.title,
+          mainToolbar.leading
+        ] }),
+        center: mainToolbar.center,
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+          mainToolbar.trailing,
+          right
+        ] })
+      }
+    ) : null,
+    mainHeader ? chromeList(mainHeader, mainHeaderList) : null
+  ] });
+  const footer = !mainFooter && !mainBottomToolbar ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+    mainFooter ? chromeList(mainFooter, mainFooterList) : null,
+    mainBottomToolbar ? /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        label: mainBottomToolbar.label,
+        dividerSides: mainBottomToolbar.dividerSides,
+        centerAlign: mainBottomToolbar.centerAlign,
+        responsive: mainBottomToolbar.responsive,
+        responsiveAt: mainBottomToolbar.responsiveAt,
+        safeAreaEdges: mainBottomToolbar.safeAreaEdges,
+        leading: mainBottomToolbar.leading,
+        center: mainBottomToolbar.center,
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+          mainBottomToolbar.trailing,
+          drawer
+        ] })
+      }
+    ) : null
+  ] });
+  const scrollHeader = mainHeaderPlacement === "scroll";
+  const scrollFooter = mainFooterPlacement === "scroll";
+  return /* @__PURE__ */ jsx(
+    Pane,
+    {
+      header: scrollHeader ? void 0 : header,
+      footer: scrollFooter ? void 0 : footer,
+      chromePlacement: mainHeaderPlacement === "auto" || mainFooterPlacement === "auto" ? "auto" : "fixed",
+      contentElement: mainPane?.contentElement,
+      contentLabel: mainPane?.contentLabel,
+      separators: mainPane?.separators,
+      safeAreaEdges: mainPane?.safeAreaEdges,
+      chromeDividers: mainPane?.chromeDividers,
+      children: scrollHeader || scrollFooter ? (
+        // Chrome that scrolls joins the content in one gapless column that
+        // fills the scroller, so it scrolls away with the content.
+        /* @__PURE__ */ jsxs(List, { flex: true, children: [
+          scrollHeader ? header : null,
+          main,
+          scrollFooter ? footer : null
+        ] })
+      ) : main
+    }
+  );
+}
+function floatingRestore(workbenchId, key, panel, hasTargetToolbar) {
+  if (hasTargetToolbar) return void 0;
+  const groups = relocatedGroups(workbenchId, key, panel);
+  if (groups.length === 0) return void 0;
+  return /* @__PURE__ */ jsx(
+    FloatingToolbar,
+    {
+      label: panel.toolbar.label,
+      position: panel.restorePosition ?? (key === "leftRail" ? "bottom-start" : "bottom-end"),
+      children: groups
+    }
+  );
+}
+var EDGES = {
+  leftRail: "end",
+  rightRail: "start",
+  bottomDrawer: "start"
+};
+var DEFAULT_LABELS = {
+  leftRail: "left rail",
+  rightRail: "right rail",
+  bottomDrawer: "bottom drawer"
+};
+function resolveResize(id, key, panel) {
+  if (!panel.resizable) return void 0;
+  const defaults = WORKBENCH_RESIZE_DEFAULTS[key];
+  const limits = panel.resizable === true ? {} : panel.resizable;
+  const min = limits.min ?? defaults.min;
+  const max = Math.max(min, limits.max ?? defaults.max);
+  return {
+    regionId: workbenchRegionId(id, key),
+    axis: key === "bottomDrawer" ? "vertical" : "horizontal",
+    edge: EDGES[key],
+    size: clampRegionSize(panel.size ?? defaults.size, min, max),
+    min,
+    max
+  };
+}
+var resizeAttributes = (resize) => resize ? {
+  "data-resizable": "true",
+  "data-region-id": resize.regionId,
+  "data-axis": resize.axis,
+  "data-edge": resize.edge
+} : {};
+function panelStyle(panel, resize, sizeProperty) {
+  if (resize) return `--kui-resizable-region-size:${resize.size}px`;
+  return panel.size ? `${sizeProperty}: ${panel.size}px` : void 0;
+}
+function PanelHandle({
+  panel,
+  resize,
+  label
+}) {
+  const inert = Boolean(panel.collapsed) || (panel.presentation ?? "inline") !== "inline";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__handle",
+      role: "separator",
+      tabindex: inert ? "-1" : "0",
+      "aria-label": `Resize ${label}`,
+      "aria-orientation": resize.axis === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuemin": resize.min,
+      "aria-valuemax": resize.max,
+      "aria-valuenow": resize.size,
+      "aria-hidden": inert ? "true" : void 0,
+      "data-kui-resize-handle": true,
+      "data-region-id": resize.regionId,
+      children: /* @__PURE__ */ jsx("span", { class: "kui-workbench__handle-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ResizeGrip, { axis: resize.axis }) })
+    }
+  );
+}
+function hiddenFromAccessibility(panel) {
+  return panel.collapsed || panel.presentation === "hidden" ? "true" : void 0;
+}
+var responsiveAt = (at) => at === "never" ? void 0 : at;
+function Rail({
+  id,
+  side,
+  panel
+}) {
+  const key = side === "left" ? "leftRail" : "rightRail";
+  const resize = resolveResize(id, key, panel);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      id: workbenchRegionId(id, key),
+      class: `kui-workbench__rail kui-workbench__rail--${side}`,
+      "data-workbench-rail": side,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": responsiveAt(
+        panel.responsiveOverlayAt ?? "narrow"
+      ),
+      "data-compact-overlay": panel.compactOverlay ?? "inset",
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-rail-width"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            "data-workbench-panel-content": true,
+            inert: Boolean(panel.collapsed),
+            children: panelBody(id, key, panel)
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS[key]
+          }
+        )
+      ]
+    }
+  );
+}
+function Drawer({ id, panel }) {
+  const resize = resolveResize(id, "bottomDrawer", panel);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: workbenchRegionId(id, "bottomDrawer"),
+      class: "kui-workbench__drawer",
+      "data-workbench-drawer": true,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": responsiveAt(panel.responsiveOverlayAt),
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-drawer-height"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            "data-workbench-panel-content": true,
+            inert: Boolean(panel.collapsed),
+            children: panelBody(id, "bottomDrawer", panel)
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS.bottomDrawer
+          }
+        )
+      ]
+    }
+  );
+}
+function restore(panel, side, position, generated) {
+  const control = panel?.restoreControl ?? generated;
+  if (!panel?.collapsed || !control || panel.presentation === "hidden")
+    return "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__restore",
+      "data-panel": side,
+      "data-position": panel.restorePosition ?? position,
+      children: control
+    }
+  );
+}
+function Workbench({
+  id,
+  label,
+  main,
+  leftRail,
+  rightRail,
+  bottomDrawer,
+  mainToolbar,
+  mainHeader,
+  mainFooter,
+  mainBottomToolbar,
+  mainHeaderPlacement,
+  mainFooterPlacement,
+  mainPane,
+  mainHeaderList,
+  mainFooterList,
+  mainMinSize = WORKBENCH_MAIN_MIN_SIZE,
+  mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,
+  className = "",
+  slot
+}) {
+  const px = (value) => Math.max(0, Math.round(value));
+  const mainMin = leftRail || rightRail ? px(mainMinSize) : void 0;
+  const mainMinBlock = bottomDrawer ? px(mainMinHeight) : void 0;
+  const style = [
+    mainMin === void 0 ? "" : `--_kui-workbench-main-min-width:${mainMin}px`,
+    mainMinBlock === void 0 ? "" : `--_kui-workbench-main-min-height:${mainMinBlock}px`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-workbench ${className}`.trim(),
+      id,
+      "data-component": "workbench",
+      "data-main-min-size": mainMin === void 0 ? void 0 : String(mainMin),
+      "data-main-min-height": mainMinBlock === void 0 ? void 0 : String(mainMinBlock),
+      style: style || void 0,
+      "aria-label": label,
+      slot,
+      children: [
+        leftRail && /* @__PURE__ */ jsx(Rail, { id, side: "left", panel: leftRail }),
+        restore(
+          leftRail,
+          "left",
+          "bottom-start",
+          floatingRestore(id, "leftRail", leftRail, Boolean(mainToolbar))
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "kui-workbench__center", children: [
+          /* @__PURE__ */ jsx("div", { class: "kui-workbench__main", "data-workbench-main": true, children: mainBody({
+            workbenchId: id,
+            main,
+            mainToolbar,
+            mainHeader,
+            mainFooter,
+            mainBottomToolbar,
+            mainHeaderPlacement,
+            mainFooterPlacement,
+            mainPane,
+            mainHeaderList,
+            mainFooterList,
+            leftRail,
+            rightRail,
+            bottomDrawer
+          }) }),
+          bottomDrawer && /* @__PURE__ */ jsx(Drawer, { id, panel: bottomDrawer }),
+          restore(
+            bottomDrawer,
+            "bottom",
+            "bottom-end",
+            floatingRestore(
+              id,
+              "bottomDrawer",
+              bottomDrawer,
+              Boolean(mainBottomToolbar)
+            )
+          )
+        ] }),
+        rightRail && /* @__PURE__ */ jsx(Rail, { id, side: "right", panel: rightRail }),
+        restore(
+          rightRail,
+          "right",
+          "bottom-end",
+          floatingRestore(id, "rightRail", rightRail, Boolean(mainToolbar))
+        )
+      ]
+    }
+  );
+}
+
+export { Workbench };
+
+//# sourceMappingURL=chunk-2OXQHM7I.js.map