@viax.io/uxm 4.36.0

package/dist/ui/segment-row/segment-row-preview.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { DemoRowActions } from "../../previews/demo-row-actions.js";
+import { SegmentRow } from "../../ui/index.js";
+function SegmentRowPreview({ styles, variants }) {
+  const expanded = variants.state !== "collapsed";
+  const vars = {
+    "--uxm-segment-row-padding-x": `${styles.paddingX}px`,
+    "--uxm-segment-row-padding-y": `${styles.paddingY}px`,
+    "--uxm-segment-row-gap": `${styles.gap}px`,
+    "--uxm-segment-row-drag-color": styles.dragColor,
+    "--uxm-segment-row-drag-hover-color": styles.dragHoverColor,
+    "--uxm-segment-row-chevron-color": styles.chevronColor,
+    "--uxm-segment-row-chevron-size": `${styles.chevronSize}px`,
+    "--uxm-segment-row-accent-color": styles.accentColor,
+    "--uxm-segment-row-accent-width": `${styles.accentWidth}px`,
+    "--uxm-segment-row-accent-radius": `${styles.accentRadius}px`,
+    "--uxm-segment-row-title-color": styles.titleColor,
+    "--uxm-segment-row-title-size": `${styles.titleSize}px`,
+    // Left UNSET while the knob sits at its registry default (600), so the
+    // atom's own `var(--uxm-…, var(--brand-heading-weight, 600))` chain can
+    // reach the brand token — projecting the default would pin the first
+    // fallback slot and make the brand heading weight look inert here while
+    // every other heading surface responds. An explicit override is projected
+    // and wins, exactly as the published CSS behaves (the properties panel
+    // drops an override the moment it equals the default, so "value ===
+    // default" is a sound "untouched" signal).
+    // `Number(...)` so a persisted string "600" counts as untouched too.
+    "--uxm-segment-row-title-weight": Number(styles.titleWeight) === 600 ? void 0 : styles.titleWeight,
+    "--uxm-segment-row-count-bg": styles.countBg,
+    "--uxm-segment-row-count-color": styles.countColor,
+    "--uxm-segment-row-count-size": `${styles.countSize}px`,
+    "--uxm-segment-row-count-padding-x": `${styles.countPaddingX}px`,
+    "--uxm-segment-row-count-padding-y": `${styles.countPaddingY}px`,
+    "--uxm-segment-row-count-radius": `${styles.countRadius}px`,
+    "--uxm-segment-row-row-hover-bg": styles.rowHoverBg,
+    "--uxm-segment-row-row-hover-radius": `${styles.rowHoverRadius}px`
+  };
+  return /* @__PURE__ */ jsx("div", { style: { width: 480 }, children: /* @__PURE__ */ jsx(
+    SegmentRow,
+    {
+      name: "Practice Information",
+      count: 6,
+      dragHandle: true,
+      defaultOpen: expanded,
+      actions: DemoRowActions,
+      style: vars
+    },
+    expanded ? "expanded" : "collapsed"
+  ) });
+}
+export {
+  SegmentRowPreview
+};
+//# sourceMappingURL=segment-row-preview.js.map

package/dist/ui/segment-row/segment-row-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/segment-row-preview.tsx"],"sourcesContent":["import { DemoRowActions } from '@/previews/demo-row-actions';\nimport type { PreviewProps } from '@/previews/types';\nimport { SegmentRow } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Preview renders the real shipped `<SegmentRow>` atom, projecting each\n * registry knob onto its `--uxm-segment-row-*` custom property so the studio\n * controls drive the component directly.\n */\nexport function SegmentRowPreview({ styles, variants }: PreviewProps) {\n  const expanded = (variants.state as string) !== 'collapsed';\n\n  const vars = {\n    '--uxm-segment-row-padding-x': `${styles.paddingX}px`,\n    '--uxm-segment-row-padding-y': `${styles.paddingY}px`,\n    '--uxm-segment-row-gap': `${styles.gap}px`,\n    '--uxm-segment-row-drag-color': styles.dragColor,\n    '--uxm-segment-row-drag-hover-color': styles.dragHoverColor,\n    '--uxm-segment-row-chevron-color': styles.chevronColor,\n    '--uxm-segment-row-chevron-size': `${styles.chevronSize}px`,\n    '--uxm-segment-row-accent-color': styles.accentColor,\n    '--uxm-segment-row-accent-width': `${styles.accentWidth}px`,\n    '--uxm-segment-row-accent-radius': `${styles.accentRadius}px`,\n    '--uxm-segment-row-title-color': styles.titleColor,\n    '--uxm-segment-row-title-size': `${styles.titleSize}px`,\n    // Left UNSET while the knob sits at its registry default (600), so the\n    // atom's own `var(--uxm-…, var(--brand-heading-weight, 600))` chain can\n    // reach the brand token — projecting the default would pin the first\n    // fallback slot and make the brand heading weight look inert here while\n    // every other heading surface responds. An explicit override is projected\n    // and wins, exactly as the published CSS behaves (the properties panel\n    // drops an override the moment it equals the default, so \"value ===\n    // default\" is a sound \"untouched\" signal).\n    // `Number(...)` so a persisted string \"600\" counts as untouched too.\n    '--uxm-segment-row-title-weight':\n      Number(styles.titleWeight) === 600 ? undefined : styles.titleWeight,\n    '--uxm-segment-row-count-bg': styles.countBg,\n    '--uxm-segment-row-count-color': styles.countColor,\n    '--uxm-segment-row-count-size': `${styles.countSize}px`,\n    '--uxm-segment-row-count-padding-x': `${styles.countPaddingX}px`,\n    '--uxm-segment-row-count-padding-y': `${styles.countPaddingY}px`,\n    '--uxm-segment-row-count-radius': `${styles.countRadius}px`,\n    '--uxm-segment-row-row-hover-bg': styles.rowHoverBg,\n    '--uxm-segment-row-row-hover-radius': `${styles.rowHoverRadius}px`,\n  } as CSSProperties;\n\n  return (\n    <div style={{ width: 480 }}>\n      <SegmentRow\n        key={expanded ? 'expanded' : 'collapsed'}\n        name=\"Practice Information\"\n        count={6}\n        dragHandle\n        defaultOpen={expanded}\n        actions={DemoRowActions}\n        style={vars}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAkDM;AAlDN,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AASpB,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,WAAY,SAAS,UAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,sCAAsC,OAAO;AAAA,IAC7C,mCAAmC,OAAO;AAAA,IAC1C,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,GAAG,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnD,kCACE,OAAO,OAAO,WAAW,MAAM,MAAM,SAAY,OAAO;AAAA,IAC1D,8BAA8B,OAAO;AAAA,IACrC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,qCAAqC,GAAG,OAAO,aAAa;AAAA,IAC5D,qCAAqC,GAAG,OAAO,aAAa;AAAA,IAC5D,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,GAAG,OAAO,cAAc;AAAA,EAChE;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MAEC,MAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAU;AAAA,MACV,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA;AAAA,IANF,WAAW,aAAa;AAAA,EAO/B,GACF;AAEJ;","names":[]}

package/dist/ui/segment-row/segment-row.cjs

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var segment_row_exports = {};
+__export(segment_row_exports, {
+  SegmentRow: () => SegmentRow
+});
+module.exports = __toCommonJS(segment_row_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+function SegmentRow({
+  name,
+  count,
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+  bodyId,
+  dragHandle = false,
+  actions,
+  className,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const toggle = () => {
+    const next = !open;
+    onOpenChange?.(next);
+    if (!isControlled) setUncontrolledOpen(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-segment-row", open && "uxm-segment-row--open", className), ...rest, children: [
+    dragHandle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-segment-row__drag", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "drag-handle", size: 14 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-segment-row__accent", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "uxm-segment-row__toggle",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-segment-row__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "chevron-right", size: 14, strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-segment-row__title", children: name }),
+          count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-segment-row__count", children: [
+            count,
+            " item",
+            count === 1 ? "" : "s"
+          ] })
+        ]
+      }
+    ),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-segment-row__actions", children: actions })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentRow
+});
+//# sourceMappingURL=segment-row.cjs.map

package/dist/ui/segment-row/segment-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/segment-row.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface SegmentRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Segment title (primary text). */\n  name: ReactNode;\n  /** Item count — renders a trailing \"N items\" badge. Omit for no badge. */\n  count?: number;\n  /** Controlled expanded state (drives chevron direction). When omitted the row manages its own. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled usage. Ignored when `open` is set. Default `true`. */\n  defaultOpen?: boolean;\n  /**\n   * Fires with the next expanded state whenever the title toggle is clicked.\n   * Matches the `open`/`defaultOpen`/`onOpenChange` triad used by `Disclosure`\n   * and `ExplorerSection`.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `id` of the region this row toggles — set it to the `bodyId` you pass to the\n   * paired `SegmentCard`, and the toggle button gets `aria-controls`, restoring\n   * the disclosure→region link the monolithic `SegmentTreeRow` used to wire.\n   */\n  bodyId?: string;\n  /** Show a leading drag-handle affordance (visual only; wire your own DnD). */\n  dragHandle?: boolean;\n  /**\n   * Trailing action controls (typically `IconButton`s), revealed on row hover\n   * or keyboard focus, after the count badge. Kept outside the toggle button so\n   * the action buttons aren't nested inside a button.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * Header row of a configuration segment: an optional drag handle, an accent\n * line, an expand chevron, the segment name, and a count badge. The same row\n * is used at every depth — nesting/indent is owned by the wrapping\n * `SegmentCard`, not this row.\n *\n * Every colour/dimension reads a `--uxm-segment-row-*` custom property (with a\n * token fallback) so the UXM studio knobs re-theme it.\n */\nexport function SegmentRow({\n  name,\n  count,\n  open: controlledOpen,\n  defaultOpen = true,\n  onOpenChange,\n  bodyId,\n  dragHandle = false,\n  actions,\n  className,\n  ...rest\n}: SegmentRowProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const toggle = () => {\n    const next = !open;\n    onOpenChange?.(next);\n    if (!isControlled) setUncontrolledOpen(next);\n  };\n\n  return (\n    <div className={cn('uxm-segment-row', open && 'uxm-segment-row--open', className)} {...rest}>\n      {dragHandle && (\n        <span className=\"uxm-segment-row__drag\" aria-hidden=\"true\">\n          <Icon glyph=\"drag-handle\" size={14} />\n        </span>\n      )}\n      <span className=\"uxm-segment-row__accent\" aria-hidden=\"true\" />\n      <button\n        type=\"button\"\n        className=\"uxm-segment-row__toggle\"\n        aria-expanded={open}\n        aria-controls={bodyId}\n        onClick={toggle}\n      >\n        <span className=\"uxm-segment-row__chevron\" aria-hidden=\"true\">\n          <Icon glyph=\"chevron-right\" size={14} strokeWidth={2} />\n        </span>\n        <span className=\"uxm-segment-row__title\">{name}</span>\n        {count !== undefined && (\n          <span className=\"uxm-segment-row__count\">\n            {count} item{count === 1 ? '' : 's'}\n          </span>\n        )}\n      </button>\n      {actions && <span className=\"uxm-segment-row__actions\">{actions}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyEU;AAzEV,mBAAyB;AAEzB,qBAAmB;AACnB,kBAAqB;AA4Cd,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,WAAW;AACpE,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,mBAAe,IAAI;AACnB,QAAI,CAAC,aAAc,qBAAoB,IAAI;AAAA,EAC7C;AAEA,SACE,6CAAC,SAAI,eAAW,mBAAG,mBAAmB,QAAQ,yBAAyB,SAAS,GAAI,GAAG,MACpF;AAAA,kBACC,4CAAC,UAAK,WAAU,yBAAwB,eAAY,QAClD,sDAAC,oBAAK,OAAM,eAAc,MAAM,IAAI,GACtC;AAAA,IAEF,4CAAC,UAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA,IAC7D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,SAAS;AAAA,QAET;AAAA,sDAAC,UAAK,WAAU,4BAA2B,eAAY,QACrD,sDAAC,oBAAK,OAAM,iBAAgB,MAAM,IAAI,aAAa,GAAG,GACxD;AAAA,UACA,4CAAC,UAAK,WAAU,0BAA0B,gBAAK;AAAA,UAC9C,UAAU,UACT,6CAAC,UAAK,WAAU,0BACb;AAAA;AAAA,YAAM;AAAA,YAAM,UAAU,IAAI,KAAK;AAAA,aAClC;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,WAAW,4CAAC,UAAK,WAAU,4BAA4B,mBAAQ;AAAA,KAClE;AAEJ;","names":[]}

package/dist/ui/segment-row/segment-row.css

@@ -0,0 +1,114 @@
+@charset "UTF-8";
+/* ── segment-row ── */
+.uxm-segment-row {
+  align-items: stretch;
+  border-radius: var(--uxm-segment-row-row-hover-radius, 12px);
+  display: flex;
+  gap: var(--uxm-segment-row-gap, 8px);
+  padding: var(--uxm-segment-row-padding-y, 20px) var(--uxm-segment-row-padding-x, 16px);
+  user-select: none;
+}
+.uxm-segment-row:hover {
+  background-color: var(--uxm-segment-row-row-hover-bg, color-mix(in srgb, var(--color-text) 4%, transparent));
+}
+.uxm-segment-row__drag {
+  align-items: center;
+  align-self: center;
+  color: var(--uxm-segment-row-drag-color, var(--color-text-subtle));
+  cursor: grab;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  width: 16px;
+}
+.uxm-segment-row__drag:hover {
+  color: var(--uxm-segment-row-drag-hover-color, var(--color-text-muted));
+}
+.uxm-segment-row__accent {
+  align-self: stretch;
+  background-color: var(--uxm-segment-row-accent-color, var(--color-accent-bold));
+  border-radius: var(--uxm-segment-row-accent-radius, 2px);
+  flex-shrink: 0;
+  width: var(--uxm-segment-row-accent-width, 4px);
+}
+.uxm-segment-row__toggle {
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  font: inherit;
+  gap: var(--uxm-segment-row-gap, 8px);
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  text-align: left;
+}
+.uxm-segment-row__toggle:focus-visible {
+  border-radius: 6px;
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.uxm-segment-row__chevron {
+  align-items: center;
+  color: var(--uxm-segment-row-chevron-color, var(--color-text-muted));
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-segment-row-chevron-size, 16px);
+  justify-content: center;
+  transition: transform 0.15s ease;
+  width: var(--uxm-segment-row-chevron-size, 16px);
+}
+.uxm-segment-row--open .uxm-segment-row__chevron {
+  transform: rotate(90deg);
+}
+.uxm-segment-row__title {
+  color: var(--uxm-segment-row-title-color, var(--color-text));
+  flex: 1;
+  font-family: var(--uxm-segment-row-title-font, var(--type-section-title-font, var(--brand-heading-font, inherit)));
+  font-size: calc(var(--uxm-segment-row-title-size, 16px) * var(--type-section-title-scale, 1) * var(--type-scale, 1));
+  font-weight: var(--uxm-segment-row-title-weight, var(--type-section-title-weight, var(--brand-heading-weight, 600)));
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uxm-segment-row__count {
+  background-color: var(--uxm-segment-row-count-bg, var(--color-surface-alt));
+  border-radius: var(--uxm-segment-row-count-radius, 999px);
+  color: var(--uxm-segment-row-count-color, var(--color-text-muted));
+  flex-shrink: 0;
+  font-size: calc(var(--uxm-segment-row-count-size, 12px) * var(--type-scale, 1));
+  font-variant-numeric: tabular-nums;
+  padding: var(--uxm-segment-row-count-padding-y, 2px) var(--uxm-segment-row-count-padding-x, 10px);
+}
+.uxm-segment-row {
+  /* Trailing action controls — collapsed when idle, revealed on hover/focus.
+     On touch (no hover) they stay visible. */
+}
+.uxm-segment-row__actions {
+  align-items: center;
+  align-self: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition: max-width 0.15s ease, opacity 0.15s ease;
+}
+.uxm-segment-row:hover .uxm-segment-row__actions, .uxm-segment-row:focus-within .uxm-segment-row__actions {
+  max-width: 12rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  .uxm-segment-row__actions {
+    max-width: 12rem;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

package/dist/ui/segment-row/segment-row.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SegmentRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Segment title (primary text). */
+    name: ReactNode;
+    /** Item count — renders a trailing "N items" badge. Omit for no badge. */
+    count?: number;
+    /** Controlled expanded state (drives chevron direction). When omitted the row manages its own. */
+    open?: boolean;
+    /** Initial expanded state for uncontrolled usage. Ignored when `open` is set. Default `true`. */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the next expanded state whenever the title toggle is clicked.
+     * Matches the `open`/`defaultOpen`/`onOpenChange` triad used by `Disclosure`
+     * and `ExplorerSection`.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `id` of the region this row toggles — set it to the `bodyId` you pass to the
+     * paired `SegmentCard`, and the toggle button gets `aria-controls`, restoring
+     * the disclosure→region link the monolithic `SegmentTreeRow` used to wire.
+     */
+    bodyId?: string;
+    /** Show a leading drag-handle affordance (visual only; wire your own DnD). */
+    dragHandle?: boolean;
+    /**
+     * Trailing action controls (typically `IconButton`s), revealed on row hover
+     * or keyboard focus, after the count badge. Kept outside the toggle button so
+     * the action buttons aren't nested inside a button.
+     */
+    actions?: ReactNode;
+}
+/**
+ * Header row of a configuration segment: an optional drag handle, an accent
+ * line, an expand chevron, the segment name, and a count badge. The same row
+ * is used at every depth — nesting/indent is owned by the wrapping
+ * `SegmentCard`, not this row.
+ *
+ * Every colour/dimension reads a `--uxm-segment-row-*` custom property (with a
+ * token fallback) so the UXM studio knobs re-theme it.
+ */
+export declare function SegmentRow({ name, count, open: controlledOpen, defaultOpen, onOpenChange, bodyId, dragHandle, actions, className, ...rest }: SegmentRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=segment-row.d.ts.map

package/dist/ui/segment-row/segment-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-row.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-row/segment-row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,oCAAoC;IACpC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,IAAI,EAAE,cAAc,EACpB,WAAkB,EAClB,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,2CAuCjB"}

package/dist/ui/segment-row/segment-row.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/icon/index.js";
+function SegmentRow({
+  name,
+  count,
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+  bodyId,
+  dragHandle = false,
+  actions,
+  className,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const toggle = () => {
+    const next = !open;
+    onOpenChange?.(next);
+    if (!isControlled) setUncontrolledOpen(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-segment-row", open && "uxm-segment-row--open", className), ...rest, children: [
+    dragHandle && /* @__PURE__ */ jsx("span", { className: "uxm-segment-row__drag", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "drag-handle", size: 14 }) }),
+    /* @__PURE__ */ jsx("span", { className: "uxm-segment-row__accent", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "uxm-segment-row__toggle",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uxm-segment-row__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-right", size: 14, strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsx("span", { className: "uxm-segment-row__title", children: name }),
+          count !== void 0 && /* @__PURE__ */ jsxs("span", { className: "uxm-segment-row__count", children: [
+            count,
+            " item",
+            count === 1 ? "" : "s"
+          ] })
+        ]
+      }
+    ),
+    actions && /* @__PURE__ */ jsx("span", { className: "uxm-segment-row__actions", children: actions })
+  ] });
+}
+export {
+  SegmentRow
+};
+//# sourceMappingURL=segment-row.js.map

package/dist/ui/segment-row/segment-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/segment-row.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface SegmentRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Segment title (primary text). */\n  name: ReactNode;\n  /** Item count — renders a trailing \"N items\" badge. Omit for no badge. */\n  count?: number;\n  /** Controlled expanded state (drives chevron direction). When omitted the row manages its own. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled usage. Ignored when `open` is set. Default `true`. */\n  defaultOpen?: boolean;\n  /**\n   * Fires with the next expanded state whenever the title toggle is clicked.\n   * Matches the `open`/`defaultOpen`/`onOpenChange` triad used by `Disclosure`\n   * and `ExplorerSection`.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `id` of the region this row toggles — set it to the `bodyId` you pass to the\n   * paired `SegmentCard`, and the toggle button gets `aria-controls`, restoring\n   * the disclosure→region link the monolithic `SegmentTreeRow` used to wire.\n   */\n  bodyId?: string;\n  /** Show a leading drag-handle affordance (visual only; wire your own DnD). */\n  dragHandle?: boolean;\n  /**\n   * Trailing action controls (typically `IconButton`s), revealed on row hover\n   * or keyboard focus, after the count badge. Kept outside the toggle button so\n   * the action buttons aren't nested inside a button.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * Header row of a configuration segment: an optional drag handle, an accent\n * line, an expand chevron, the segment name, and a count badge. The same row\n * is used at every depth — nesting/indent is owned by the wrapping\n * `SegmentCard`, not this row.\n *\n * Every colour/dimension reads a `--uxm-segment-row-*` custom property (with a\n * token fallback) so the UXM studio knobs re-theme it.\n */\nexport function SegmentRow({\n  name,\n  count,\n  open: controlledOpen,\n  defaultOpen = true,\n  onOpenChange,\n  bodyId,\n  dragHandle = false,\n  actions,\n  className,\n  ...rest\n}: SegmentRowProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const toggle = () => {\n    const next = !open;\n    onOpenChange?.(next);\n    if (!isControlled) setUncontrolledOpen(next);\n  };\n\n  return (\n    <div className={cn('uxm-segment-row', open && 'uxm-segment-row--open', className)} {...rest}>\n      {dragHandle && (\n        <span className=\"uxm-segment-row__drag\" aria-hidden=\"true\">\n          <Icon glyph=\"drag-handle\" size={14} />\n        </span>\n      )}\n      <span className=\"uxm-segment-row__accent\" aria-hidden=\"true\" />\n      <button\n        type=\"button\"\n        className=\"uxm-segment-row__toggle\"\n        aria-expanded={open}\n        aria-controls={bodyId}\n        onClick={toggle}\n      >\n        <span className=\"uxm-segment-row__chevron\" aria-hidden=\"true\">\n          <Icon glyph=\"chevron-right\" size={14} strokeWidth={2} />\n        </span>\n        <span className=\"uxm-segment-row__title\">{name}</span>\n        {count !== undefined && (\n          <span className=\"uxm-segment-row__count\">\n            {count} item{count === 1 ? '' : 's'}\n          </span>\n        )}\n      </button>\n      {actions && <span className=\"uxm-segment-row__actions\">{actions}</span>}\n    </div>\n  );\n}\n"],"mappings":"AAyEU,cAgBA,YAhBA;AAzEV,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,YAAY;AA4Cd,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,WAAW;AACpE,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,mBAAe,IAAI;AACnB,QAAI,CAAC,aAAc,qBAAoB,IAAI;AAAA,EAC7C;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,mBAAmB,QAAQ,yBAAyB,SAAS,GAAI,GAAG,MACpF;AAAA,kBACC,oBAAC,UAAK,WAAU,yBAAwB,eAAY,QAClD,8BAAC,QAAK,OAAM,eAAc,MAAM,IAAI,GACtC;AAAA,IAEF,oBAAC,UAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA,IAC7D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,SAAS;AAAA,QAET;AAAA,8BAAC,UAAK,WAAU,4BAA2B,eAAY,QACrD,8BAAC,QAAK,OAAM,iBAAgB,MAAM,IAAI,aAAa,GAAG,GACxD;AAAA,UACA,oBAAC,UAAK,WAAU,0BAA0B,gBAAK;AAAA,UAC9C,UAAU,UACT,qBAAC,UAAK,WAAU,0BACb;AAAA;AAAA,YAAM;AAAA,YAAM,UAAU,IAAI,KAAK;AAAA,aAClC;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,WAAW,oBAAC,UAAK,WAAU,4BAA4B,mBAAQ;AAAA,KAClE;AAEJ;","names":[]}

package/dist/ui/side-flexpane/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var side_flexpane_exports = {};
+module.exports = __toCommonJS(side_flexpane_exports);
+__reExport(side_flexpane_exports, require("./side-flexpane.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./side-flexpane.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/side-flexpane/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/index.ts"],"sourcesContent":["export * from './side-flexpane';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kCAAc,4BAAd;","names":[]}

package/dist/ui/side-flexpane/index.d.ts

@@ -0,0 +1,2 @@
+export * from './side-flexpane.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/side-flexpane/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/side-flexpane/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/ui/side-flexpane/index.js

@@ -0,0 +1,2 @@
+export * from "./side-flexpane.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/side-flexpane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/index.ts"],"sourcesContent":["export * from './side-flexpane';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/side-flexpane/side-flexpane-preview.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var side_flexpane_preview_exports = {};
+__export(side_flexpane_preview_exports, {
+  SideFlexpanePreview: () => SideFlexpanePreview
+});
+module.exports = __toCommonJS(side_flexpane_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function SideFlexpanePreview({ styles }) {
+  const vars = {
+    "--uxm-side-flexpane-width": `${styles.width}px`,
+    "--uxm-side-flexpane-background-color": styles.backgroundColor,
+    "--uxm-side-flexpane-border-color": styles.borderColor,
+    "--uxm-side-flexpane-border-radius": `${styles.borderRadius}px`,
+    "--uxm-side-flexpane-padding-x": `${styles.paddingX}px`,
+    "--uxm-side-flexpane-padding-y": `${styles.paddingY}px`,
+    "--uxm-side-flexpane-title-size": `${styles.titleSize}px`,
+    "--uxm-side-flexpane-label-color": styles.labelColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", height: 420 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.SideFlexpane,
+    {
+      style: vars,
+      eyebrow: "Edit",
+      title: "Participants",
+      subtitle: "Business Interaction \xB7 4 fields",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.IconTile, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "user", size: 18 }) }),
+      backLabel: "All segments",
+      onBack: () => {
+      },
+      expandable: true,
+      actions: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.IconButton, { "aria-label": "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "trash", size: 16 }) }),
+      onClose: () => {
+      },
+      footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonTertiary, { style: { flex: 1 }, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonPrimary, { style: { flex: 1 }, children: "Save" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "var(--color-text-muted)", margin: 0, lineHeight: 1.5 }, children: "Panel body \u2014 scrolls independently of the header and footer. The left edge stays drag-resizable; the expand toggle maximises the pane to its expanded width." })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SideFlexpanePreview
+});
+//# sourceMappingURL=side-flexpane-preview.cjs.map

package/dist/ui/side-flexpane/side-flexpane-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/side-flexpane-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ButtonPrimary, ButtonTertiary, Icon, IconButton, IconTile, SideFlexpane } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Preview renders the real shipped `<SideFlexpane>` atom, projecting each\n * registry knob onto its `--uxm-side-flexpane-*` custom property. It exercises\n * the extended surface — leading icon, subtitle, back-link, header actions,\n * and the expand toggle — while the left edge stays drag-resizable.\n */\nexport function SideFlexpanePreview({ styles }: PreviewProps) {\n  const vars = {\n    '--uxm-side-flexpane-width': `${styles.width}px`,\n    '--uxm-side-flexpane-background-color': styles.backgroundColor,\n    '--uxm-side-flexpane-border-color': styles.borderColor,\n    '--uxm-side-flexpane-border-radius': `${styles.borderRadius}px`,\n    '--uxm-side-flexpane-padding-x': `${styles.paddingX}px`,\n    '--uxm-side-flexpane-padding-y': `${styles.paddingY}px`,\n    '--uxm-side-flexpane-title-size': `${styles.titleSize}px`,\n    '--uxm-side-flexpane-label-color': styles.labelColor,\n  } as CSSProperties;\n\n  return (\n    <div style={{ display: 'flex', height: 420 }}>\n      <SideFlexpane\n        style={vars}\n        eyebrow=\"Edit\"\n        title=\"Participants\"\n        subtitle=\"Business Interaction · 4 fields\"\n        icon={\n          <IconTile>\n            <Icon glyph=\"user\" size={18} />\n          </IconTile>\n        }\n        backLabel=\"All segments\"\n        onBack={() => {}}\n        expandable\n        actions={\n          <IconButton aria-label=\"Delete\">\n            <Icon glyph=\"trash\" size={16} />\n          </IconButton>\n        }\n        onClose={() => {}}\n        footer={\n          <div style={{ display: 'flex', gap: 8 }}>\n            <ButtonTertiary style={{ flex: 1 }}>Cancel</ButtonTertiary>\n            <ButtonPrimary style={{ flex: 1 }}>Save</ButtonPrimary>\n          </div>\n        }\n      >\n        <p style={{ fontSize: 13, color: 'var(--color-text-muted)', margin: 0, lineHeight: 1.5 }}>\n          Panel body — scrolls independently of the header and footer. The left edge stays\n          drag-resizable; the expand toggle maximises the pane to its expanded width.\n        </p>\n      </SideFlexpane>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCY;AA/BZ,gBAAwF;AAUjF,SAAS,oBAAoB,EAAE,OAAO,GAAiB;AAC5D,QAAM,OAAO;AAAA,IACX,6BAA6B,GAAG,OAAO,KAAK;AAAA,IAC5C,wCAAwC,OAAO;AAAA,IAC/C,oCAAoC,OAAO;AAAA,IAC3C,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,iCAAiC,GAAG,OAAO,QAAQ;AAAA,IACnD,iCAAiC,GAAG,OAAO,QAAQ;AAAA,IACnD,kCAAkC,GAAG,OAAO,SAAS;AAAA,IACrD,mCAAmC,OAAO;AAAA,EAC5C;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,QAAQ,IAAI,GACzC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,UAAS;AAAA,MACT,MACE,4CAAC,sBACC,sDAAC,kBAAK,OAAM,QAAO,MAAM,IAAI,GAC/B;AAAA,MAEF,WAAU;AAAA,MACV,QAAQ,MAAM;AAAA,MAAC;AAAA,MACf,YAAU;AAAA,MACV,SACE,4CAAC,wBAAW,cAAW,UACrB,sDAAC,kBAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,MAEF,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,QACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,EAAE,GACpC;AAAA,oDAAC,4BAAe,OAAO,EAAE,MAAM,EAAE,GAAG,oBAAM;AAAA,QAC1C,4CAAC,2BAAc,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAI;AAAA,SACzC;AAAA,MAGF,sDAAC,OAAE,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,QAAQ,GAAG,YAAY,IAAI,GAAG,+KAG1F;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/ui/side-flexpane/side-flexpane-preview.d.ts

@@ -0,0 +1,9 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Preview renders the real shipped `<SideFlexpane>` atom, projecting each
+ * registry knob onto its `--uxm-side-flexpane-*` custom property. It exercises
+ * the extended surface — leading icon, subtitle, back-link, header actions,
+ * and the expand toggle — while the left edge stays drag-resizable.
+ */
+export declare function SideFlexpanePreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=side-flexpane-preview.d.ts.map

package/dist/ui/side-flexpane/side-flexpane-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-flexpane-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/side-flexpane/side-flexpane-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKrD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CA+C3D"}

package/dist/ui/side-flexpane/side-flexpane-preview.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonPrimary, ButtonTertiary, Icon, IconButton, IconTile, SideFlexpane } from "../../ui/index.js";
+function SideFlexpanePreview({ styles }) {
+  const vars = {
+    "--uxm-side-flexpane-width": `${styles.width}px`,
+    "--uxm-side-flexpane-background-color": styles.backgroundColor,
+    "--uxm-side-flexpane-border-color": styles.borderColor,
+    "--uxm-side-flexpane-border-radius": `${styles.borderRadius}px`,
+    "--uxm-side-flexpane-padding-x": `${styles.paddingX}px`,
+    "--uxm-side-flexpane-padding-y": `${styles.paddingY}px`,
+    "--uxm-side-flexpane-title-size": `${styles.titleSize}px`,
+    "--uxm-side-flexpane-label-color": styles.labelColor
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", height: 420 }, children: /* @__PURE__ */ jsx(
+    SideFlexpane,
+    {
+      style: vars,
+      eyebrow: "Edit",
+      title: "Participants",
+      subtitle: "Business Interaction \xB7 4 fields",
+      icon: /* @__PURE__ */ jsx(IconTile, { children: /* @__PURE__ */ jsx(Icon, { glyph: "user", size: 18 }) }),
+      backLabel: "All segments",
+      onBack: () => {
+      },
+      expandable: true,
+      actions: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Delete", children: /* @__PURE__ */ jsx(Icon, { glyph: "trash", size: 16 }) }),
+      onClose: () => {
+      },
+      footer: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(ButtonTertiary, { style: { flex: 1 }, children: "Cancel" }),
+        /* @__PURE__ */ jsx(ButtonPrimary, { style: { flex: 1 }, children: "Save" })
+      ] }),
+      children: /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--color-text-muted)", margin: 0, lineHeight: 1.5 }, children: "Panel body \u2014 scrolls independently of the header and footer. The left edge stays drag-resizable; the expand toggle maximises the pane to its expanded width." })
+    }
+  ) });
+}
+export {
+  SideFlexpanePreview
+};
+//# sourceMappingURL=side-flexpane-preview.js.map

package/dist/ui/side-flexpane/side-flexpane-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/side-flexpane-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ButtonPrimary, ButtonTertiary, Icon, IconButton, IconTile, SideFlexpane } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Preview renders the real shipped `<SideFlexpane>` atom, projecting each\n * registry knob onto its `--uxm-side-flexpane-*` custom property. It exercises\n * the extended surface — leading icon, subtitle, back-link, header actions,\n * and the expand toggle — while the left edge stays drag-resizable.\n */\nexport function SideFlexpanePreview({ styles }: PreviewProps) {\n  const vars = {\n    '--uxm-side-flexpane-width': `${styles.width}px`,\n    '--uxm-side-flexpane-background-color': styles.backgroundColor,\n    '--uxm-side-flexpane-border-color': styles.borderColor,\n    '--uxm-side-flexpane-border-radius': `${styles.borderRadius}px`,\n    '--uxm-side-flexpane-padding-x': `${styles.paddingX}px`,\n    '--uxm-side-flexpane-padding-y': `${styles.paddingY}px`,\n    '--uxm-side-flexpane-title-size': `${styles.titleSize}px`,\n    '--uxm-side-flexpane-label-color': styles.labelColor,\n  } as CSSProperties;\n\n  return (\n    <div style={{ display: 'flex', height: 420 }}>\n      <SideFlexpane\n        style={vars}\n        eyebrow=\"Edit\"\n        title=\"Participants\"\n        subtitle=\"Business Interaction · 4 fields\"\n        icon={\n          <IconTile>\n            <Icon glyph=\"user\" size={18} />\n          </IconTile>\n        }\n        backLabel=\"All segments\"\n        onBack={() => {}}\n        expandable\n        actions={\n          <IconButton aria-label=\"Delete\">\n            <Icon glyph=\"trash\" size={16} />\n          </IconButton>\n        }\n        onClose={() => {}}\n        footer={\n          <div style={{ display: 'flex', gap: 8 }}>\n            <ButtonTertiary style={{ flex: 1 }}>Cancel</ButtonTertiary>\n            <ButtonPrimary style={{ flex: 1 }}>Save</ButtonPrimary>\n          </div>\n        }\n      >\n        <p style={{ fontSize: 13, color: 'var(--color-text-muted)', margin: 0, lineHeight: 1.5 }}>\n          Panel body — scrolls independently of the header and footer. The left edge stays\n          drag-resizable; the expand toggle maximises the pane to its expanded width.\n        </p>\n      </SideFlexpane>\n    </div>\n  );\n}\n"],"mappings":"AAgCY,cAaF,YAbE;AA/BZ,SAAS,eAAe,gBAAgB,MAAM,YAAY,UAAU,oBAAoB;AAUjF,SAAS,oBAAoB,EAAE,OAAO,GAAiB;AAC5D,QAAM,OAAO;AAAA,IACX,6BAA6B,GAAG,OAAO,KAAK;AAAA,IAC5C,wCAAwC,OAAO;AAAA,IAC/C,oCAAoC,OAAO;AAAA,IAC3C,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,iCAAiC,GAAG,OAAO,QAAQ;AAAA,IACnD,iCAAiC,GAAG,OAAO,QAAQ;AAAA,IACnD,kCAAkC,GAAG,OAAO,SAAS;AAAA,IACrD,mCAAmC,OAAO;AAAA,EAC5C;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,QAAQ,IAAI,GACzC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,UAAS;AAAA,MACT,MACE,oBAAC,YACC,8BAAC,QAAK,OAAM,QAAO,MAAM,IAAI,GAC/B;AAAA,MAEF,WAAU;AAAA,MACV,QAAQ,MAAM;AAAA,MAAC;AAAA,MACf,YAAU;AAAA,MACV,SACE,oBAAC,cAAW,cAAW,UACrB,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,MAEF,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,QACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,EAAE,GACpC;AAAA,4BAAC,kBAAe,OAAO,EAAE,MAAM,EAAE,GAAG,oBAAM;AAAA,QAC1C,oBAAC,iBAAc,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAI;AAAA,SACzC;AAAA,MAGF,8BAAC,OAAE,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,QAAQ,GAAG,YAAY,IAAI,GAAG,+KAG1F;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}