@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/chunk-QROYYGWU.js

@@ -0,0 +1,52 @@
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { Badge } from './chunk-U6QYTMDB.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function StateBanner({
+  title,
+  detail,
+  badge,
+  icon,
+  action,
+  tone = "info",
+  urgency = "status",
+  copyLayout = "inline",
+  actionPlacement = "trailing",
+  presentation = "card",
+  dividerSides = "b",
+  className = "",
+  placeholder = false,
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-state-banner ${className}`.trim(),
+      "data-component": "state-banner",
+      "data-tone": tone,
+      "data-copy-layout": copyLayout,
+      "data-action-placement": actionPlacement,
+      "data-presentation": presentation,
+      "divider-sides": presentation === "strip" ? dividerSides || void 0 : void 0,
+      "data-placeholder": placeholder ? "true" : void 0,
+      role: urgency,
+      "aria-live": urgency === "alert" ? "assertive" : "polite",
+      "aria-busy": placeholder ? "true" : void 0,
+      slot,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(10) }) : title }),
+          badge && /* @__PURE__ */ jsx(Badge, { appearance: "solid", size: "compact", tone, children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) : badge }),
+          detail && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__detail", children: /* @__PURE__ */ jsx("span", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(16) }) : detail }) })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
+      ]
+    }
+  );
+}
+
+export { StateBanner };
+
+//# sourceMappingURL=chunk-QROYYGWU.js.map

package/dist/chunk-QROYYGWU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/state-banner/state-banner.tsx"],"names":[],"mappings":";;;;;AAuDO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,UAAA,GAAa,QAAA;AAAA,EACb,eAAA,GAAkB,UAAA;AAAA,EAClB,YAAA,GAAe,MAAA;AAAA,EACf,YAAA,GAAe,GAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,UAAA;AAAA,MAClB,uBAAA,EAAuB,eAAA;AAAA,MACvB,mBAAA,EAAmB,YAAA;AAAA,MACnB,eAAA,EACE,YAAA,KAAiB,OAAA,GAAU,YAAA,IAAgB,MAAA,GAAY,MAAA;AAAA,MAEzD,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EACtC,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-QROYYGWU.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport { Badge } from '../badge/badge.js';\nimport { Skeleton } from '../skeleton/skeleton.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n/** @deprecated Use SemanticTone. */\nexport type StateBannerTone = SemanticTone;\nexport type StateBannerUrgency = 'status' | 'alert';\nexport type StateBannerCopyLayout = 'inline' | 'stacked';\nexport type StateBannerActionPlacement = 'trailing' | 'below';\nexport type StateBannerPresentation = 'card' | 'strip';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: SemanticTone;\n  urgency?: StateBannerUrgency;\n  /** Keep the detail beside the title, or give it its own line. */\n  copyLayout?: StateBannerCopyLayout;\n  /**\n   * `trailing` (the default) puts the action beside the copy while the copy\n   * keeps its minimum readable width, and otherwise wraps it onto its own\n   * end-aligned trailing row, at any viewport or container width. `below`\n   * always gives the action that separate trailing row.\n   */\n  actionPlacement?: StateBannerActionPlacement;\n  /**\n   * `card` (the default) is an inset, rounded, fully bordered banner beside\n   * the affected work. `strip` is a full-width band at a layout edge, such as\n   * above a workspace: square corners, no inline margin, inline padding on the\n   * shared content-text column, and only the tone-colored `dividerSides` edges.\n   */\n  presentation?: StateBannerPresentation;\n  /**\n   * Physical tone-colored divider edges of a `strip`, in canonical\n   * top/right/bottom/left order. Defaults to the bottom edge; `''` draws none.\n   * A `card` keeps its full border and ignores this.\n   */\n  dividerSides?: Sides;\n  className?: string;\n  /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  copyLayout = 'inline',\n  actionPlacement = 'trailing',\n  presentation = 'card',\n  dividerSides = 'b',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-copy-layout={copyLayout}\n      data-action-placement={actionPlacement}\n      data-presentation={presentation}\n      divider-sides={\n        presentation === 'strip' ? dividerSides || undefined : undefined\n      }\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={tone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {detail && (\n          <span class=\"kui-state-banner__detail\">\n            <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/chunk-QYMJHS4K.js

@@ -0,0 +1,36 @@
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var columnTrackProtected = /* @__PURE__ */ new Set(["data-component", "data-layout"]);
+function ColumnTrack({
+  children,
+  layout = "scroll",
+  minColumnWidth,
+  peek,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const style = [
+    minColumnWidth === void 0 ? "" : `--_kui-column-track-min-width:${minColumnWidth}`,
+    peek === void 0 ? "" : `--_kui-column-track-peek:${peek}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...filterRootAttributes(rootAttributes, columnTrackProtected),
+      id,
+      class: `kui-column-track ${className}`.trim(),
+      "data-component": "column-track",
+      "data-layout": layout,
+      style: style || void 0,
+      slot,
+      children: /* @__PURE__ */ jsx("div", { class: "kui-column-track__columns", children })
+    }
+  );
+}
+
+export { ColumnTrack };
+
+//# sourceMappingURL=chunk-QYMJHS4K.js.map

package/dist/chunk-QYMJHS4K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/column-track/column-track.tsx"],"names":[],"mappings":";;;AAUA,IAAM,uCAAuB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,aAAa,CAAC,CAAA;AAiC/D,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,MAAA,GAAS,QAAA;AAAA,EACT,cAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,8BAAA,EAAiC,cAAc,CAAA,CAAA;AAAA,IACnD,IAAA,KAAS,MAAA,GAAY,EAAA,GAAK,CAAA,yBAAA,EAA4B,IAAI,CAAA;AAAA,GAC5D,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ","file":"chunk-QYMJHS4K.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** `scroll` keeps equal min-width columns; `paged` shows one near-full-width column per page. */\nexport type ColumnTrackLayout = 'scroll' | 'paged';\n\nconst columnTrackProtected = new Set(['data-component', 'data-layout']);\n\ntype ColumnTrackRootAttributes = StructuralRootAttributes &\n  Readonly<{ 'data-component'?: never; 'data-layout'?: never }>;\n\nexport interface ColumnTrackProps {\n  /** The columns, in order; each owns its own inset and scrolling. */\n  children: KerfUiContent;\n  /**\n   * `scroll` (default): equal columns that never shrink below\n   * `minColumnWidth`, so a narrow track scrolls sideways instead of crushing\n   * them. `paged`: each column is nearly the visible width, the next one peeks\n   * in, and scrolling snaps to column starts.\n   */\n  layout?: ColumnTrackLayout;\n  /** Narrowest a `scroll` column gets before the track scrolls; default 250px. */\n  minColumnWidth?: CssLength;\n  /** How much of the next column a `paged` track shows; default 24px. */\n  peek?: CssLength;\n  id?: string;\n  className?: string;\n  /** Safe `data-*`, `aria-*`, and structural `role` metadata on the scroller. */\n  rootAttributes?: ColumnTrackRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A horizontal track of columns (a kanban board): the track is the sideways\n * scroll owner and fills its parent's height; columns sit flush and own their\n * insets and vertical scrolling. Kerf owns the overflow, the paged snapping,\n * and reduced motion.\n */\nexport function ColumnTrack({\n  children,\n  layout = 'scroll',\n  minColumnWidth,\n  peek,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColumnTrackProps) {\n  const style = [\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-column-track-min-width:${minColumnWidth}`,\n    peek === undefined ? '' : `--_kui-column-track-peek:${peek}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <div\n      {...filterRootAttributes(rootAttributes, columnTrackProtected)}\n      id={id}\n      class={`kui-column-track ${className}`.trim()}\n      data-component=\"column-track\"\n      data-layout={layout}\n      style={style || undefined}\n      slot={slot}\n    >\n      <div class=\"kui-column-track__columns\">{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-RHD7RKGI.js

@@ -0,0 +1,176 @@
+import { PopupMenu } from './chunk-HQZYKJ56.js';
+import { listIconTilePresentation, withWordBreaks, nativeDraggable } from './chunk-ZNROKDSZ.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { remify, em } from './chunk-IQSRHXZR.js';
+import { filterDataAttributes, filterControlAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-icon-tile",
+  "data-icon-tile-tone",
+  "data-multiline",
+  "data-density",
+  "data-divider",
+  "data-busy",
+  "data-trailing-visibility",
+  "data-state",
+  "data-selected",
+  "data-pressed",
+  "data-dragging",
+  "data-drop-position"
+]);
+var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-kui-disabled"
+]);
+function ListActionRow({
+  label,
+  description,
+  status,
+  busy = false,
+  density = "standard",
+  divider = "none",
+  icon,
+  iconTile,
+  action,
+  itemId,
+  selected = false,
+  pressed,
+  accessibleLabel,
+  title,
+  multiline = false,
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  draggable,
+  dragging = false,
+  dropPosition,
+  trailingAction,
+  trailingActionLabel,
+  trailingActionIcon,
+  trailingActionDisabled = false,
+  trailingActionTitle,
+  trailingActionVisibility = "always",
+  trailingMenu,
+  className = "",
+  rootAttributes = {},
+  trailingActionAttributes = {},
+  slot
+}) {
+  const extensionRootAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  const extensionTrailingAttributes = filterControlAttributes(
+    trailingActionAttributes,
+    PROTECTED_TRAILING_DATA_ATTRIBUTES
+  );
+  const tile = icon ? listIconTilePresentation(iconTile, "list-action-row") : null;
+  const iconSize = tile?.tile ? 32 : 18;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...extensionRootAttributes,
+      class: `kui-list-action-row ${className}`.trim(),
+      "data-component": "list-action-row",
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-icon-tile": tile?.tile,
+      "data-icon-tile-tone": tile?.tone,
+      "data-multiline": multiline ? "true" : void 0,
+      "data-density": density,
+      "data-divider": divider,
+      "data-busy": busy ? "true" : void 0,
+      "data-trailing-visibility": trailingActionVisibility,
+      "data-state": state,
+      "data-selected": String(selected),
+      "data-pressed": pressed === void 0 ? void 0 : String(pressed),
+      "data-placeholder": placeholder ? "true" : void 0,
+      draggable: nativeDraggable(draggable, placeholder),
+      "data-dragging": dragging ? "true" : void 0,
+      "data-drop-position": dropPosition,
+      "aria-busy": placeholder || busy ? "true" : void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-list-action-row__primary",
+            title: placeholder ? void 0 : title,
+            disabled: disabled || placeholder,
+            tabindex: placeholder ? -1 : tabIndex,
+            "data-kui-disabled": disabled ? "true" : void 0,
+            "data-action": placeholder ? void 0 : action,
+            "data-item-id": itemId,
+            "aria-label": accessibleLabel,
+            "aria-current": selected ? "page" : void 0,
+            "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-list-action-row__icon",
+                  style: placeholder ? void 0 : tile?.style,
+                  children: placeholder ? /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      block: true,
+                      width: remify(iconSize),
+                      height: remify(iconSize)
+                    }
+                  ) : icon
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { class: "kui-list-action-row__label", children: [
+                /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(9) }) : multiline ? withWordBreaks(label) : label }),
+                description && /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__description", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(11) }) : description }),
+                (busy || status) && /* @__PURE__ */ jsxs("span", { class: "kui-list-action-row__status", children: [
+                  busy && /* @__PURE__ */ jsx(LoadingSpinner, {}),
+                  status && (placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(6) }) : status)
+                ] })
+              ] })
+            ]
+          }
+        ),
+        trailingMenu ? /* @__PURE__ */ jsx(
+          PopupMenu,
+          {
+            label: trailingMenu.label,
+            icon: trailingMenu.icon,
+            items: trailingMenu.items,
+            placement: trailingMenu.placement ?? "bottom-end",
+            caret: false,
+            disabled: Boolean(trailingMenu.disabled) || placeholder
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...extensionTrailingAttributes,
+            type: "button",
+            class: "kui-list-action-row__trailing-action",
+            "data-action": placeholder ? void 0 : trailingAction,
+            "data-item-id": itemId,
+            "aria-label": trailingActionLabel,
+            title: trailingActionTitle ?? trailingActionLabel,
+            disabled: trailingActionDisabled || placeholder || void 0,
+            "data-kui-disabled": trailingActionDisabled ? "true" : void 0,
+            children: trailingActionIcon
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ListActionRow };
+
+//# sourceMappingURL=chunk-RHD7RKGI.js.map

package/dist/chunk-RHD7RKGI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-action-row/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-RHD7RKGI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  type ListIconTile,\n  listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport {\n  PopupMenu,\n  type PopupMenuEntry,\n  type PopupMenuPlacement,\n} from '../../actions/popup-menu/popup-menu.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n  ListIconTile,\n  ListIconTileColor,\n  ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-icon-tile',\n  'data-icon-tile-tone',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-trailing-visibility',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n  'data-dragging',\n  'data-drop-position',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-kui-disabled',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-icon-tile'?: never;\n    'data-icon-tile-tone'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-trailing-visibility'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\n/** A trailing overflow `PopupMenu` rendered as the row's sibling trailing control. */\nexport interface ListActionRowTrailingMenu {\n  /** Accessible name of the icon-only menu trigger, such as `Actions for report.json`. */\n  label: string;\n  /** Decorative trigger icon, typically a `MoreHorizontal` `LucideIcon`. */\n  icon: SafeHtml;\n  /** The menu's commands, headings, and dividers; items dispatch their own `data-action`s. */\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-end`. */\n  placement?: PopupMenuPlacement;\n  disabled?: boolean;\n}\n\ninterface ListActionRowTrailingButtonProps {\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n  trailingMenu?: never;\n}\n\ninterface ListActionRowTrailingMenuProps {\n  /** A trailing overflow menu in place of the trailing button. Import `@kerfjs/ui/popup-menu/register` once. */\n  trailingMenu: ListActionRowTrailingMenu;\n  trailingAction?: never;\n  trailingActionLabel?: never;\n  trailingActionIcon?: never;\n  trailingActionDisabled?: never;\n  trailingActionTitle?: never;\n  trailingActionAttributes?: never;\n}\n\ninterface ListActionRowCommonProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  description?: string | SafeHtml;\n  status?: string | SafeHtml;\n  busy?: boolean;\n  /** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n  iconTile?: ListIconTile;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"` on the row root); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  trailingActionVisibility?: 'always' | 'interaction';\n  className?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */\nexport type ListActionRowProps = ListActionRowCommonProps &\n  (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);\n\nexport function ListActionRow({\n  label,\n  description,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  icon,\n  iconTile,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  trailingActionVisibility = 'always',\n  trailingMenu,\n  className = '',\n  rootAttributes = {},\n  trailingActionAttributes = {},\n  slot,\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n  const tile = icon\n    ? listIconTilePresentation(iconTile, 'list-action-row')\n    : null;\n  const iconSize = tile?.tile ? 32 : 18;\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-trailing-visibility={trailingActionVisibility}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-kui-disabled={disabled ? 'true' : undefined}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span\n            class=\"kui-list-action-row__icon\"\n            style={placeholder ? undefined : tile?.style}\n          >\n            {placeholder ? (\n              <Skeleton\n                block\n                width={remify(iconSize)}\n                height={remify(iconSize)}\n              />\n            ) : (\n              icon\n            )}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          <span class=\"kui-list-action-row__primary-label\">\n            {placeholder ? (\n              <Skeleton width={em(9)} />\n            ) : multiline ? (\n              withWordBreaks(label)\n            ) : (\n              label\n            )}\n          </span>\n          {description && (\n            <span class=\"kui-list-action-row__description\">\n              {placeholder ? <Skeleton width={em(11)} /> : description}\n            </span>\n          )}\n          {(busy || status) && (\n            <span class=\"kui-list-action-row__status\">\n              {/* The busy spinner is component-owned chrome drawn from a\n                  known prop, so a placeholder keeps it live; only the status\n                  text is a value and becomes a skeleton. */}\n              {busy && <LoadingSpinner />}\n              {status && (placeholder ? <Skeleton width={em(6)} /> : status)}\n            </span>\n          )}\n        </span>\n      </button>\n      {trailingMenu ? (\n        <PopupMenu\n          label={trailingMenu.label}\n          icon={trailingMenu.icon}\n          items={trailingMenu.items}\n          placement={trailingMenu.placement ?? 'bottom-end'}\n          caret={false}\n          disabled={Boolean(trailingMenu.disabled) || placeholder}\n        />\n      ) : (\n        <button\n          {...extensionTrailingAttributes}\n          type=\"button\"\n          class=\"kui-list-action-row__trailing-action\"\n          data-action={placeholder ? undefined : trailingAction}\n          data-item-id={itemId}\n          aria-label={trailingActionLabel}\n          title={trailingActionTitle ?? trailingActionLabel}\n          disabled={trailingActionDisabled || placeholder || undefined}\n          data-kui-disabled={trailingActionDisabled ? 'true' : undefined}\n        >\n          {trailingActionIcon}\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-S2XULQEK.js

@@ -0,0 +1,52 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var framedListProtected = /* @__PURE__ */ new Set(["data-component", "data-surface"]);
+var framedListRowProtected = /* @__PURE__ */ new Set(["data-component", "data-highlighted"]);
+function FramedList({
+  children,
+  label,
+  surface = "lowered",
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...filterDataAttributes(rootAttributes, framedListProtected),
+      id,
+      class: `kui-framed-list ${className}`.trim(),
+      "data-component": "framed-list",
+      "data-surface": surface,
+      role: "list",
+      "aria-label": label,
+      slot,
+      children
+    }
+  );
+}
+function FramedListRow({
+  children,
+  highlighted = false,
+  id,
+  className = "",
+  rootAttributes = {}
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...filterDataAttributes(rootAttributes, framedListRowProtected),
+      id,
+      class: `kui-framed-list__row ${className}`.trim(),
+      "data-component": "framed-list-row",
+      "data-highlighted": highlighted ? "true" : void 0,
+      children
+    }
+  );
+}
+
+export { FramedList, FramedListRow };
+
+//# sourceMappingURL=chunk-S2XULQEK.js.map

package/dist/chunk-S2XULQEK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/framed-list/framed-list.tsx"],"names":[],"mappings":";;;AAMA,IAAM,sCAAsB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,cAAc,CAAC,CAAA;AACtE,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,kBAAkB,CAAC,CAAA;AA+CtE,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,IAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAGO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB;AACnB,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,sBAAsB,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,iBAAA;AAAA,MACf,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAExC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S2XULQEK.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** The frame's fill: the lowered surface (as `ValueTable`), or the page surface. */\nexport type FramedListSurface = 'lowered' | 'base';\n\nconst framedListProtected = new Set(['data-component', 'data-surface']);\nconst framedListRowProtected = new Set(['data-component', 'data-highlighted']);\n\ntype FramedListRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-surface'?: never;\n  }\n>;\n\ntype FramedListRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-highlighted'?: never;\n  }\n>;\n\nexport interface FramedListProps {\n  /** `FramedListRow` children. */\n  children: KerfUiContent;\n  /** Accessible name for the list, when no heading names it. */\n  label?: string;\n  /** Frame fill; defaults to `lowered`, matching `ValueTable`. */\n  surface?: FramedListSurface;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedList-owned markers stay protected. */\n  rootAttributes?: FramedListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface FramedListRowProps {\n  /** Arbitrary row content: a `Row` of copy and controls, a keycap, … */\n  children: KerfUiContent;\n  /** Tint the row (the row being edited or the current item). */\n  highlighted?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedListRow-owned markers stay protected. */\n  rootAttributes?: FramedListRowRootAttributes;\n}\n\n/**\n * An inset-grouped list (the settings-list pattern): one rounded, bordered\n * frame with 1px dividers between rows of arbitrary content. `ValueTable` is\n * the same frame for label/value facts; this one takes any row content.\n */\nexport function FramedList({\n  children,\n  label,\n  surface = 'lowered',\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: FramedListProps) {\n  return (\n    <ul\n      {...filterDataAttributes(rootAttributes, framedListProtected)}\n      id={id}\n      class={`kui-framed-list ${className}`.trim()}\n      data-component=\"framed-list\"\n      data-surface={surface}\n      role=\"list\"\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </ul>\n  );\n}\n\n/** One row of a `FramedList`; it owns the row inset and the divider above it. */\nexport function FramedListRow({\n  children,\n  highlighted = false,\n  id,\n  className = '',\n  rootAttributes = {},\n}: FramedListRowProps) {\n  return (\n    <li\n      {...filterDataAttributes(rootAttributes, framedListRowProtected)}\n      id={id}\n      class={`kui-framed-list__row ${className}`.trim()}\n      data-component=\"framed-list-row\"\n      data-highlighted={highlighted ? 'true' : undefined}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/dist/{chunk-LPOMRC4C.js → chunk-S3ECMF23.js}

@@ -1,11 +1,15 @@
 import { jsx } from 'kerfjs/jsx-runtime';
 
-// src/floating-toolbar.tsx
+// src/components/actions/floating-toolbar/floating-toolbar.tsx
 function FloatingToolbar({
   children,
   label,
   position = "bottom-end",
-  className = ""
+  placement = "floating",
+  inset,
+  safeAreaInsets = false,
+  className = "",
+  slot
 }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -13,8 +17,12 @@ function FloatingToolbar({
       class: `kui-floating-toolbar ${className}`.trim(),
       "data-component": "floating-toolbar",
       "data-position": position,
+      "data-placement": placement,
+      "data-safe-area-insets": safeAreaInsets ? "true" : void 0,
       role: "toolbar",
       "aria-label": label,
+      style: inset ? `--kui-floating-toolbar-inset:${inset}` : void 0,
+      slot,
       children
     }
   );
@@ -22,4 +30,4 @@ function FloatingToolbar({
 
 export { FloatingToolbar };
 
-//# sourceMappingURL=chunk-LPOMRC4C.js.map
+//# sourceMappingURL=chunk-S3ECMF23.js.map

package/dist/chunk-S3ECMF23.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/floating-toolbar/floating-toolbar.tsx"],"names":[],"mappings":";;;AAkDO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,SAAA,GAAY,UAAA;AAAA,EACZ,KAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,gBAAA,EAAgB,SAAA;AAAA,MAChB,uBAAA,EAAuB,iBAAiB,MAAA,GAAS,MAAA;AAAA,MACjD,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAA,6BAAA,EAAgC,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,MACzD,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S3ECMF23.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n  /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n  children: KerfUiContent;\n  /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n  label: string;\n  /**\n   * Corner or edge it floats to inside its nearest positioned ancestor.\n   * Default: `'bottom-end'`.\n   */\n  position?: FloatingToolbarPosition;\n  /** Keep the toolbar in normal document flow instead of floating over content. */\n  placement?: 'floating' | 'inline';\n  /**\n   * Distance from the container edges named by `position`. Default:\n   * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a\n   * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the\n   * corner owns the inset there and sets it to zero.\n   */\n  inset?: CssLength;\n  /** Add device or layout-routed safe-area insets to the positioned edges. */\n  safeAreaInsets?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own\n * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. While one of those layouts has a\n * side overlay open over the toolbar's region (a Workbench rail overlay, a\n * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal\n * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the\n * accessibility tree — until the overlay closes. The app owns the controls\n * and their behavior — wire them with `delegate()` as usual. Set\n * `placement=\"inline\"` for normal flow when an owner already positions the\n * control; floating placement can add safe-area insets to its per-edge tokens.\n */\nexport function FloatingToolbar({\n  children,\n  label,\n  position = 'bottom-end',\n  placement = 'floating',\n  inset,\n  safeAreaInsets = false,\n  className = '',\n  slot,\n}: FloatingToolbarProps) {\n  return (\n    <div\n      class={`kui-floating-toolbar ${className}`.trim()}\n      data-component=\"floating-toolbar\"\n      data-position={position}\n      data-placement={placement}\n      data-safe-area-insets={safeAreaInsets ? 'true' : undefined}\n      role=\"toolbar\"\n      aria-label={label}\n      style={inset ? `--kui-floating-toolbar-inset:${inset}` : undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-S4Y3YTAI.js

@@ -0,0 +1,35 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var listInsetTextProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-sides"
+]);
+function ListInsetText({
+  children,
+  sides = "trbl",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    listInsetTextProtectedAttributes
+  );
+  const cls = `kui-list-inset-text ${className}`.trim();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: cls,
+      "data-component": "list-inset-text",
+      "data-sides": sides,
+      slot,
+      children
+    }
+  );
+}
+
+export { ListInsetText };
+
+//# sourceMappingURL=chunk-S4Y3YTAI.js.map

package/dist/chunk-S4Y3YTAI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-inset-text/list-inset-text.tsx"],"names":[],"mappings":";;;AAIA,IAAM,gCAAA,uBAAuC,GAAA,CAAI;AAAA,EAC/C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BM,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,GAAA,GAAM,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,iBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S4Y3YTAI.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\n\nconst listInsetTextProtectedAttributes = new Set([\n  'data-component',\n  'data-sides',\n]);\n\ntype ListInsetTextRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-sides'?: never;\n  }\n>;\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: KerfUiContent | string;\n  /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n  sides?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; component-owned structural attributes stay protected. */\n  rootAttributes?: ListInsetTextRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `sides=\"rl\"` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n  children,\n  sides = 'trbl',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListInsetTextProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listInsetTextProtectedAttributes,\n  );\n  const cls = `kui-list-inset-text ${className}`.trim();\n  return (\n    <div\n      {...safeRootAttributes}\n      class={cls}\n      data-component=\"list-inset-text\"\n      data-sides={sides}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-S4ZGTDSG.js

@@ -0,0 +1,18 @@
+// src/components/layout/workbench/internal/workbench-resize.ts
+var SLUGS = {
+  leftRail: "left-rail",
+  rightRail: "right-rail",
+  bottomDrawer: "bottom-drawer"
+};
+var workbenchRegionId = (id, panel) => `${id}-${SLUGS[panel]}`;
+var WORKBENCH_RESIZE_DEFAULTS = {
+  leftRail: { size: 280, min: 180, max: 480 },
+  rightRail: { size: 280, min: 180, max: 480 },
+  bottomDrawer: { size: 220, min: 120, max: 480 }
+};
+var WORKBENCH_MAIN_MIN_SIZE = 320;
+var WORKBENCH_MAIN_MIN_HEIGHT = 120;
+
+export { WORKBENCH_MAIN_MIN_HEIGHT, WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_RESIZE_DEFAULTS, workbenchRegionId };
+
+//# sourceMappingURL=chunk-S4ZGTDSG.js.map

package/dist/chunk-S4ZGTDSG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/workbench/internal/workbench-resize.ts"],"names":[],"mappings":";AAMA,IAAM,KAAA,GAA2C;AAAA,EAC/C,QAAA,EAAU,WAAA;AAAA,EACV,SAAA,EAAW,YAAA;AAAA,EACX,YAAA,EAAc;AAChB,CAAA;AAGO,IAAM,iBAAA,GAAoB,CAAC,EAAA,EAAY,KAAA,KAC5C,GAAG,EAAE,CAAA,CAAA,EAAI,KAAA,CAAM,KAAK,CAAC,CAAA;AAGhB,IAAM,yBAAA,GAGT;AAAA,EACF,UAAU,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC1C,WAAW,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC3C,cAAc,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA;AAC5C;AAOO,IAAM,uBAAA,GAA0B;AAOhC,IAAM,yBAAA,GAA4B","file":"chunk-S4ZGTDSG.js","sourcesContent":["// The resizable-panel contract shared by `Workbench` (which renders it) and\n// `wireWorkbench` (which drives it). Internal.\n\n/** A Workbench panel slot, named after its `WorkbenchProps` prop. */\nexport type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';\n\nconst SLUGS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left-rail',\n  rightRail: 'right-rail',\n  bottomDrawer: 'bottom-drawer',\n};\n\n/** The `data-region-id` a resizable panel carries, e.g. `studio-left-rail`. */\nexport const workbenchRegionId = (id: string, panel: WorkbenchPanelKey) =>\n  `${id}-${SLUGS[panel]}`;\n\n/** Default size and limits (px) for a panel whose `resizable` omits them. */\nexport const WORKBENCH_RESIZE_DEFAULTS: Record<\n  WorkbenchPanelKey,\n  { size: number; min: number; max: number }\n> = {\n  leftRail: { size: 280, min: 180, max: 480 },\n  rightRail: { size: 280, min: 180, max: 480 },\n  bottomDrawer: { size: 220, min: 120, max: 480 },\n};\n\n/**\n * Default minimum width (px) a Workbench keeps for its work area beside its\n * inline rails, fixed or resizable: resizable rails stop growing there, and\n * every inline rail shrinks proportionally when the container narrows.\n */\nexport const WORKBENCH_MAIN_MIN_SIZE = 320;\n\n/**\n * Default minimum height (px) a Workbench keeps for its work area above an\n * inline bottom drawer: a resizable drawer stops growing there, and the drawer\n * shrinks when the Workbench gets shorter.\n */\nexport const WORKBENCH_MAIN_MIN_HEIGHT = 120;\n"]}