@viax.io/uxm 4.36.0

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

@@ -0,0 +1,187 @@
+"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_exports = {};
+__export(side_flexpane_exports, {
+  SideFlexpane: () => SideFlexpane
+});
+module.exports = __toCommonJS(side_flexpane_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("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+function SideFlexpane({
+  eyebrow,
+  title,
+  subtitle,
+  icon,
+  onClose,
+  onBack,
+  backLabel = "Back",
+  actions,
+  expandable = false,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  expandedWidth = 960,
+  footer,
+  children,
+  className,
+  defaultWidth: _defaultWidth = 380,
+  minWidth = 280,
+  maxWidth = 720,
+  resizable = true,
+  closeLabel = "Close",
+  resizeLabel = "Resize panel",
+  expandLabel = "Expand panel",
+  collapseLabel = "Collapse panel",
+  style,
+  ...rest
+}) {
+  const [width, setWidth] = (0, import_react.useState)(null);
+  const paneRef = (0, import_react.useRef)(null);
+  const dragging = (0, import_react.useRef)(false);
+  const startX = (0, import_react.useRef)(0);
+  const startW = (0, import_react.useRef)(0);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react.useState)(defaultExpanded);
+  const isExpandedControlled = controlledExpanded !== void 0;
+  const expanded = isExpandedControlled ? controlledExpanded : uncontrolledExpanded;
+  const toggleExpanded = () => {
+    const next = !expanded;
+    if (next && width === null) {
+      const current = paneRef.current?.offsetWidth;
+      if (current) setWidth(current);
+    }
+    onExpandedChange?.(next);
+    if (!isExpandedControlled) setUncontrolledExpanded(next);
+  };
+  const onResizeStart = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      startX.current = e.clientX;
+      startW.current = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;
+      const onMouseMove = (ev) => {
+        if (!dragging.current) return;
+        const delta = startX.current - ev.clientX;
+        setWidth(Math.min(maxWidth, Math.max(minWidth, startW.current + delta)));
+      };
+      const onMouseUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width, minWidth, maxWidth, _defaultWidth]
+  );
+  const onHandleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const step = e.shiftKey ? 50 : 10;
+      const base = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;
+      const next = e.key === "ArrowLeft" ? base + step : base - step;
+      setWidth(Math.min(maxWidth, Math.max(minWidth, next)));
+    },
+    [width, minWidth, maxWidth, _defaultWidth]
+  );
+  const inlineWidth = expanded ? Math.max(expandedWidth, width ?? 0) : resizable && width !== null ? width : void 0;
+  const showHandle = resizable && !expanded;
+  const hasTrailing = Boolean(actions) || expandable || Boolean(onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "aside",
+    {
+      ref: paneRef,
+      className: (0, import_helpers.cn)("uxm-side-flexpane", className),
+      style: {
+        ...inlineWidth !== void 0 ? { width: `${inlineWidth}px` } : void 0,
+        ...style
+      },
+      ...rest,
+      children: [
+        showHandle && // Handle sits flush with the inside-left edge — the pane root
+        // keeps `overflow: hidden` so it can't extend past the rounded
+        // corner anyway. 6px (`w-1.5`) is the same grab target as
+        // PropertiesPanel's resizer.
+        // WAI-ARIA windowsplitter pattern: `separator` IS interactive when
+        // it acts as a resize handle, with arrow-key support and a tab
+        // stop. eslint-plugin-jsx-a11y still treats `separator` as
+        // non-interactive across the board, so disable the two rules
+        // that fire on this otherwise-correct shape.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- role=separator resize handle is interactive per WAI-ARIA (focusable separator), the plugin does not model that
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            onMouseDown: onResizeStart,
+            onKeyDown: onHandleKeyDown,
+            tabIndex: 0,
+            "aria-label": resizeLabel,
+            role: "separator",
+            "aria-orientation": "vertical",
+            className: "uxm-side-flexpane__resize-handle",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-side-flexpane__resize-handle-bar" })
+          }
+        ),
+        onBack && // A `<button>`, not the `BackLink` atom: `BackLink` is an `<a href>`
+        // for navigation, whereas this fires an `onBack` action callback. The
+        // icon+label chrome is themed the same way (`--uxm-side-flexpane-back-*`
+        // mirrors BackLink's `--uxm-back-link-*`).
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: "uxm-side-flexpane__back", onClick: onBack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "arrow-left", size: 14, strokeWidth: 2, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: backLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "uxm-side-flexpane__header", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-side-flexpane__icon", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-side-flexpane__heading", children: [
+            eyebrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-side-flexpane__eyebrow", children: eyebrow }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "uxm-side-flexpane__title", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-side-flexpane__subtitle", children: subtitle })
+          ] }),
+          hasTrailing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-side-flexpane__actions", children: [
+            actions,
+            actions && (expandable || onClose) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-side-flexpane__actions-divider", "aria-hidden": "true" }),
+            expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon_button.IconButton,
+              {
+                "aria-label": expanded ? collapseLabel : expandLabel,
+                "aria-pressed": expanded,
+                onClick: toggleExpanded,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: expanded ? "chevron-right" : "chevron-left", size: 16 })
+              }
+            ),
+            onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_button.IconButton, { "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-side-flexpane__body", children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: "uxm-side-flexpane__footer", children: footer })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SideFlexpane
+});
+//# sourceMappingURL=side-flexpane.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/side-flexpane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nexport interface SideFlexpaneProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Small uppercase label above the title. */\n  eyebrow?: ReactNode;\n  /** Primary heading. */\n  title: ReactNode;\n  /** Secondary line under the title (e.g. a type / path). */\n  subtitle?: ReactNode;\n  /**\n   * Leading header visual, left of the title block — typically a tinted\n   * `<IconTile><Icon …/></IconTile>`. Kept a generic slot so the tint stays\n   * with the consumer (no baked-in category).\n   */\n  icon?: ReactNode;\n  /** Close (×) handler — renders the close button in the header. */\n  onClose?: () => void;\n  /**\n   * Back handler — when set, renders a top back-link bar (`← {backLabel}`)\n   * above the header. Distinct from `onClose`.\n   */\n  onBack?: () => void;\n  /** Label for the back-link bar. Defaults to `\"Back\"`. */\n  backLabel?: ReactNode;\n  /**\n   * Header action controls (typically `IconButton`s, e.g. a delete), placed in\n   * the trailing cluster before the expand/close controls.\n   */\n  actions?: ReactNode;\n  /** Show an expand/collapse toggle that widens the pane to `expandedWidth`. */\n  expandable?: boolean;\n  /** Initial expanded state for uncontrolled usage. Ignored when `expanded` is set. */\n  defaultExpanded?: boolean;\n  /** Controlled expanded state — pair with `onExpandedChange`. */\n  expanded?: boolean;\n  /** Fires with the next expanded state whenever the toggle is clicked. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Width in px while expanded. Defaults to 960 — deliberately above the\n   * `maxWidth` resize ceiling so \"Expand\" always grows the pane. Expanding\n   * never shrinks below the current width.\n   */\n  expandedWidth?: number;\n  footer?: ReactNode;\n  children?: ReactNode;\n  /** Initial width in px. Defaults to 380. */\n  defaultWidth?: number;\n  /** Min width in px when resizing. Defaults to 280. */\n  minWidth?: number;\n  /** Max width in px when resizing. Defaults to 720. */\n  maxWidth?: number;\n  /** Whether the drag handle is shown. Defaults to true. */\n  resizable?: boolean;\n  /** Accessible name for the close (×) button. Default `\"Close\"`. */\n  closeLabel?: string;\n  /** Accessible name for the drag handle. Default `\"Resize panel\"`. */\n  resizeLabel?: string;\n  /** Accessible name for the expand toggle while collapsed. Default `\"Expand panel\"`. */\n  expandLabel?: string;\n  /** Accessible name for the expand toggle while expanded. Default `\"Collapse panel\"`. */\n  collapseLabel?: string;\n}\n\nexport function SideFlexpane({\n  eyebrow,\n  title,\n  subtitle,\n  icon,\n  onClose,\n  onBack,\n  backLabel = 'Back',\n  actions,\n  expandable = false,\n  defaultExpanded = false,\n  expanded: controlledExpanded,\n  onExpandedChange,\n  expandedWidth = 960,\n  footer,\n  children,\n  className,\n  defaultWidth: _defaultWidth = 380,\n  minWidth = 280,\n  maxWidth = 720,\n  resizable = true,\n  closeLabel = 'Close',\n  resizeLabel = 'Resize panel',\n  expandLabel = 'Expand panel',\n  collapseLabel = 'Collapse panel',\n  style,\n  ...rest\n}: SideFlexpaneProps) {\n  // `width === null` means \"no inline override\" — the rendered width comes\n  // from CSS (the atom's own `width: 380px` rule, or any saved `width:`\n  // override the editor wrote to components.css from the `Width` knob).\n  // Once the user drags, we switch to an inline value that wins over CSS\n  // for the rest of the session; a page reload resets it back to null so\n  // the saved knob value wins again. The `_defaultWidth` prop is kept on\n  // the public API for forward compatibility but isn't read here — the\n  // CSS rule supplies the visual default.\n  const [width, setWidth] = useState<number | null>(null);\n  const paneRef = useRef<HTMLElement | null>(null);\n  const dragging = useRef(false);\n  const startX = useRef(0);\n  const startW = useRef(0);\n\n  // Expanded is a distinct \"maximized\" mode: it pins the pane to\n  // `expandedWidth` and hides the resize handle (so the two width mechanisms\n  // don't fight). Collapsing reverts to the prior dragged width / CSS\n  // default. Controlled/uncontrolled pair, like Disclosure.\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const isExpandedControlled = controlledExpanded !== undefined;\n  const expanded = isExpandedControlled ? controlledExpanded : uncontrolledExpanded;\n  const toggleExpanded = () => {\n    const next = !expanded;\n    // When expanding before any drag (`width === null`), snapshot the pane's\n    // current rendered width into state so the \"Expand grows, never shrinks\"\n    // guard in `inlineWidth` has a real baseline — otherwise it would compare\n    // against 0 and a small `expandedWidth` (or a saved width override above it)\n    // could shrink the pane. Reading the ref is safe here (event handler, not\n    // render). Snapshotting to the current width also keeps the collapse visual\n    // unchanged, since it equals what CSS was already resolving to.\n    if (next && width === null) {\n      const current = paneRef.current?.offsetWidth;\n      if (current) setWidth(current);\n    }\n    onExpandedChange?.(next);\n    if (!isExpandedControlled) setUncontrolledExpanded(next);\n  };\n\n  // Same drag pattern as PropertiesPanel: pin the start position, then\n  // compute deltas inside a document-level mousemove. The handle sits on\n  // the left edge — the panel docks to the right, so a leftward drag\n  // (decreasing clientX) grows the panel. We snapshot the current width\n  // from `offsetWidth` so the drag starts from whatever CSS resolved to\n  // (the saved knob value, the atom default, etc.) rather than the JS\n  // `defaultWidth` constant.\n  const onResizeStart = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n      startX.current = e.clientX;\n      startW.current =\n        paneRef.current?.offsetWidth ?? width ?? _defaultWidth;\n\n      const onMouseMove = (ev: MouseEvent) => {\n        if (!dragging.current) return;\n        const delta = startX.current - ev.clientX;\n        setWidth(Math.min(maxWidth, Math.max(minWidth, startW.current + delta)));\n      };\n\n      const onMouseUp = () => {\n        dragging.current = false;\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [width, minWidth, maxWidth, _defaultWidth],\n  );\n\n  // Keyboard resize so the handle is operable without a mouse — Arrow\n  // keys step the width, Shift accelerates. This both honours the\n  // WAI-ARIA `separator` pattern (a resize separator must be focusable\n  // and respond to arrows) and satisfies eslint-plugin-jsx-a11y's\n  // `no-noninteractive-element-interactions` rule.\n  const onHandleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;\n      e.preventDefault();\n      const step = e.shiftKey ? 50 : 10;\n      const base = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;\n      // Pane docks to the right: ArrowLeft grows, ArrowRight shrinks.\n      const next = e.key === 'ArrowLeft' ? base + step : base - step;\n      setWidth(Math.min(maxWidth, Math.max(minWidth, next)));\n    },\n    [width, minWidth, maxWidth, _defaultWidth],\n  );\n\n  // Expanded pins to `expandedWidth`, but never below the current width —\n  // \"Expand\" must grow, never shrink. `toggleExpanded` snapshots the pane's\n  // rendered width into `width` before this runs (even on the first, un-dragged\n  // expand), so the guard here has a real baseline instead of comparing to 0.\n  const inlineWidth = expanded\n    ? Math.max(expandedWidth, width ?? 0)\n    : resizable && width !== null\n      ? width\n      : undefined;\n  const showHandle = resizable && !expanded;\n  const hasTrailing = Boolean(actions) || expandable || Boolean(onClose);\n\n  return (\n    <aside\n      ref={paneRef}\n      className={cn('uxm-side-flexpane', className)}\n      // Consumer-provided `style` wins over the width we compute — that\n      // matches existing usage (user-panel / create-panel pass borderRadius\n      // and height overrides) and gives consumers a way to lock width if\n      // they don't want resize behaviour without flipping the flag.\n      style={{\n        ...(inlineWidth !== undefined ? { width: `${inlineWidth}px` } : undefined),\n        ...style,\n      }}\n      {...rest}\n    >\n      {showHandle && (\n        // Handle sits flush with the inside-left edge — the pane root\n        // keeps `overflow: hidden` so it can't extend past the rounded\n        // corner anyway. 6px (`w-1.5`) is the same grab target as\n        // PropertiesPanel's resizer.\n        // WAI-ARIA windowsplitter pattern: `separator` IS interactive when\n        // it acts as a resize handle, with arrow-key support and a tab\n        // stop. eslint-plugin-jsx-a11y still treats `separator` as\n        // non-interactive across the board, so disable the two rules\n        // that fire on this otherwise-correct shape.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- role=separator resize handle is interactive per WAI-ARIA (focusable separator), the plugin does not model that\n        <div\n          onMouseDown={onResizeStart}\n          onKeyDown={onHandleKeyDown}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- focusable separator needs a tab stop for keyboard resizing\n          tabIndex={0}\n          aria-label={resizeLabel}\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          className=\"uxm-side-flexpane__resize-handle\"\n        >\n          <div className=\"uxm-side-flexpane__resize-handle-bar\" />\n        </div>\n      )}\n      {onBack && (\n        // A `<button>`, not the `BackLink` atom: `BackLink` is an `<a href>`\n        // for navigation, whereas this fires an `onBack` action callback. The\n        // icon+label chrome is themed the same way (`--uxm-side-flexpane-back-*`\n        // mirrors BackLink's `--uxm-back-link-*`).\n        <button type=\"button\" className=\"uxm-side-flexpane__back\" onClick={onBack}>\n          <Icon glyph=\"arrow-left\" size={14} strokeWidth={2} aria-hidden=\"true\" />\n          <span>{backLabel}</span>\n        </button>\n      )}\n      <header className=\"uxm-side-flexpane__header\">\n        {icon && <span className=\"uxm-side-flexpane__icon\">{icon}</span>}\n        <div className=\"uxm-side-flexpane__heading\">\n          {eyebrow && <p className=\"uxm-side-flexpane__eyebrow\">{eyebrow}</p>}\n          <h3 className=\"uxm-side-flexpane__title\">{title}</h3>\n          {subtitle && <p className=\"uxm-side-flexpane__subtitle\">{subtitle}</p>}\n        </div>\n        {hasTrailing && (\n          <div className=\"uxm-side-flexpane__actions\">\n            {actions}\n            {actions && (expandable || onClose) && (\n              <span className=\"uxm-side-flexpane__actions-divider\" aria-hidden=\"true\" />\n            )}\n            {expandable && (\n              <IconButton\n                aria-label={expanded ? collapseLabel : expandLabel}\n                aria-pressed={expanded}\n                onClick={toggleExpanded}\n              >\n                <Icon glyph={expanded ? 'chevron-right' : 'chevron-left'} size={16} />\n              </IconButton>\n            )}\n            {onClose && (\n              <IconButton aria-label={closeLabel} onClick={onClose}>\n                <Icon glyph=\"close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n      </header>\n      <div className=\"uxm-side-flexpane__body\">{children}</div>\n      {footer && <footer className=\"uxm-side-flexpane__footer\">{footer}</footer>}\n    </aside>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/side-flexpane/side-flexpane.css

@@ -0,0 +1,134 @@
+@charset "UTF-8";
+/* ── side-flexpane ── */
+.uxm-side-flexpane {
+  background-color: var(--uxm-side-flexpane-background-color, var(--color-card));
+  border: 1px solid var(--uxm-side-flexpane-border-color, var(--color-border));
+  border-radius: var(--uxm-side-flexpane-border-radius, 8px);
+  box-shadow: var(--shadow-xl);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  width: var(--uxm-side-flexpane-width, 380px);
+  /* Back-link bar — a full-width row above the header. */
+}
+.uxm-side-flexpane__back {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--uxm-side-flexpane-border-color, var(--color-border));
+  color: var(--uxm-side-flexpane-back-color, var(--color-text-muted));
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: calc(13px * var(--type-scale, 1));
+  gap: 6px;
+  /* Deliberately more compact than the header/body: the back bar is a thin
+     nav strip, so its padding-y fallback is 10px vs the header's 12px. */
+  padding: var(--uxm-side-flexpane-padding-y, 10px) var(--uxm-side-flexpane-padding-x, 16px);
+  text-align: left;
+  width: 100%;
+}
+.uxm-side-flexpane__back:hover {
+  color: var(--uxm-side-flexpane-back-hover-color, var(--color-text));
+}
+.uxm-side-flexpane__back:focus-visible {
+  outline: 2px solid var(--uxm-side-flexpane-back-focus-ring-color, var(--color-accent));
+  outline-offset: -2px;
+}
+.uxm-side-flexpane__header {
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  gap: 10px;
+  padding: var(--uxm-side-flexpane-padding-y, 12px) var(--uxm-side-flexpane-padding-x, 16px);
+}
+.uxm-side-flexpane {
+  /* Leading header visual (consumer supplies a tinted IconTile / Icon). */
+}
+.uxm-side-flexpane__icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.uxm-side-flexpane__heading {
+  flex: 1;
+  min-width: 0;
+}
+.uxm-side-flexpane__eyebrow {
+  color: var(--uxm-side-flexpane-label-color, var(--color-text-muted));
+  font-size: calc(11px * var(--type-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  margin: 0;
+  text-transform: uppercase;
+}
+.uxm-side-flexpane__title {
+  color: var(--color-text);
+  font-size: calc(var(--uxm-side-flexpane-title-size, 15px) * var(--type-scale, 1));
+  font-weight: 600;
+  margin: 2px 0 0;
+  /* Title wraps (its original behaviour) rather than truncating — the
+     heading flexes, so a long title grows the header height instead of
+     clipping. The compact `__subtitle` below stays single-line. */
+  overflow-wrap: anywhere;
+}
+.uxm-side-flexpane__subtitle {
+  color: var(--uxm-side-flexpane-subtitle-color, var(--color-text-muted));
+  font-size: calc(12px * var(--type-scale, 1));
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uxm-side-flexpane {
+  /* Trailing header controls — custom actions, then expand/close. */
+}
+.uxm-side-flexpane__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+}
+.uxm-side-flexpane__actions-divider {
+  background-color: var(--uxm-side-flexpane-divider-color, var(--color-border));
+  height: 18px;
+  margin: 0 2px;
+  width: 1px;
+}
+.uxm-side-flexpane__body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--uxm-side-flexpane-padding-y, 16px) var(--uxm-side-flexpane-padding-x, 16px);
+}
+.uxm-side-flexpane__footer {
+  border-top: 1px solid var(--color-border);
+  padding: var(--uxm-side-flexpane-padding-y, 12px) var(--uxm-side-flexpane-padding-x, 16px);
+}
+.uxm-side-flexpane {
+  /* Resize handle — a thin grab strip flush with the inside-left edge.
+     Positioning/sizing/cursor match the previous Tailwind utilities
+     (`absolute z-20 left-0 top-0 bottom-0 w-1.5 cursor-col-resize`); the
+     inner bar re-tones on hover/active the same way `group-hover:` /
+     `group-active:` did. */
+}
+.uxm-side-flexpane__resize-handle {
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+}
+.uxm-side-flexpane__resize-handle-bar {
+  height: 100%;
+  width: 100%;
+  transition: background-color 0.15s;
+}
+.uxm-side-flexpane__resize-handle:hover .uxm-side-flexpane__resize-handle-bar {
+  background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
+}
+.uxm-side-flexpane__resize-handle:active .uxm-side-flexpane__resize-handle-bar {
+  background-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
+}

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

@@ -0,0 +1,63 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SideFlexpaneProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Small uppercase label above the title. */
+    eyebrow?: ReactNode;
+    /** Primary heading. */
+    title: ReactNode;
+    /** Secondary line under the title (e.g. a type / path). */
+    subtitle?: ReactNode;
+    /**
+     * Leading header visual, left of the title block — typically a tinted
+     * `<IconTile><Icon …/></IconTile>`. Kept a generic slot so the tint stays
+     * with the consumer (no baked-in category).
+     */
+    icon?: ReactNode;
+    /** Close (×) handler — renders the close button in the header. */
+    onClose?: () => void;
+    /**
+     * Back handler — when set, renders a top back-link bar (`← {backLabel}`)
+     * above the header. Distinct from `onClose`.
+     */
+    onBack?: () => void;
+    /** Label for the back-link bar. Defaults to `"Back"`. */
+    backLabel?: ReactNode;
+    /**
+     * Header action controls (typically `IconButton`s, e.g. a delete), placed in
+     * the trailing cluster before the expand/close controls.
+     */
+    actions?: ReactNode;
+    /** Show an expand/collapse toggle that widens the pane to `expandedWidth`. */
+    expandable?: boolean;
+    /** Initial expanded state for uncontrolled usage. Ignored when `expanded` is set. */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state — pair with `onExpandedChange`. */
+    expanded?: boolean;
+    /** Fires with the next expanded state whenever the toggle is clicked. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Width in px while expanded. Defaults to 960 — deliberately above the
+     * `maxWidth` resize ceiling so "Expand" always grows the pane. Expanding
+     * never shrinks below the current width.
+     */
+    expandedWidth?: number;
+    footer?: ReactNode;
+    children?: ReactNode;
+    /** Initial width in px. Defaults to 380. */
+    defaultWidth?: number;
+    /** Min width in px when resizing. Defaults to 280. */
+    minWidth?: number;
+    /** Max width in px when resizing. Defaults to 720. */
+    maxWidth?: number;
+    /** Whether the drag handle is shown. Defaults to true. */
+    resizable?: boolean;
+    /** Accessible name for the close (×) button. Default `"Close"`. */
+    closeLabel?: string;
+    /** Accessible name for the drag handle. Default `"Resize panel"`. */
+    resizeLabel?: string;
+    /** Accessible name for the expand toggle while collapsed. Default `"Expand panel"`. */
+    expandLabel?: string;
+    /** Accessible name for the expand toggle while expanded. Default `"Collapse panel"`. */
+    collapseLabel?: string;
+}
+export declare function SideFlexpane({ eyebrow, title, subtitle, icon, onClose, onBack, backLabel, actions, expandable, defaultExpanded, expanded: controlledExpanded, onExpandedChange, expandedWidth, footer, children, className, defaultWidth: _defaultWidth, minWidth, maxWidth, resizable, closeLabel, resizeLabel, expandLabel, collapseLabel, style, ...rest }: SideFlexpaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=side-flexpane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-flexpane.d.ts","sourceRoot":"","sources":["../../../src/ui/side-flexpane/side-flexpane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uBAAuB;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAkB,EAClB,OAAO,EACP,UAAkB,EAClB,eAAuB,EACvB,QAAQ,EAAE,kBAAkB,EAC5B,gBAAgB,EAChB,aAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,aAAmB,EACjC,QAAc,EACd,QAAc,EACd,SAAgB,EAChB,UAAoB,EACpB,WAA4B,EAC5B,WAA4B,EAC5B,aAAgC,EAChC,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA4LnB"}

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

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+function SideFlexpane({
+  eyebrow,
+  title,
+  subtitle,
+  icon,
+  onClose,
+  onBack,
+  backLabel = "Back",
+  actions,
+  expandable = false,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  expandedWidth = 960,
+  footer,
+  children,
+  className,
+  defaultWidth: _defaultWidth = 380,
+  minWidth = 280,
+  maxWidth = 720,
+  resizable = true,
+  closeLabel = "Close",
+  resizeLabel = "Resize panel",
+  expandLabel = "Expand panel",
+  collapseLabel = "Collapse panel",
+  style,
+  ...rest
+}) {
+  const [width, setWidth] = useState(null);
+  const paneRef = useRef(null);
+  const dragging = useRef(false);
+  const startX = useRef(0);
+  const startW = useRef(0);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpandedControlled = controlledExpanded !== void 0;
+  const expanded = isExpandedControlled ? controlledExpanded : uncontrolledExpanded;
+  const toggleExpanded = () => {
+    const next = !expanded;
+    if (next && width === null) {
+      const current = paneRef.current?.offsetWidth;
+      if (current) setWidth(current);
+    }
+    onExpandedChange?.(next);
+    if (!isExpandedControlled) setUncontrolledExpanded(next);
+  };
+  const onResizeStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      startX.current = e.clientX;
+      startW.current = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;
+      const onMouseMove = (ev) => {
+        if (!dragging.current) return;
+        const delta = startX.current - ev.clientX;
+        setWidth(Math.min(maxWidth, Math.max(minWidth, startW.current + delta)));
+      };
+      const onMouseUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width, minWidth, maxWidth, _defaultWidth]
+  );
+  const onHandleKeyDown = useCallback(
+    (e) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const step = e.shiftKey ? 50 : 10;
+      const base = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;
+      const next = e.key === "ArrowLeft" ? base + step : base - step;
+      setWidth(Math.min(maxWidth, Math.max(minWidth, next)));
+    },
+    [width, minWidth, maxWidth, _defaultWidth]
+  );
+  const inlineWidth = expanded ? Math.max(expandedWidth, width ?? 0) : resizable && width !== null ? width : void 0;
+  const showHandle = resizable && !expanded;
+  const hasTrailing = Boolean(actions) || expandable || Boolean(onClose);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: paneRef,
+      className: cn("uxm-side-flexpane", className),
+      style: {
+        ...inlineWidth !== void 0 ? { width: `${inlineWidth}px` } : void 0,
+        ...style
+      },
+      ...rest,
+      children: [
+        showHandle && // Handle sits flush with the inside-left edge — the pane root
+        // keeps `overflow: hidden` so it can't extend past the rounded
+        // corner anyway. 6px (`w-1.5`) is the same grab target as
+        // PropertiesPanel's resizer.
+        // WAI-ARIA windowsplitter pattern: `separator` IS interactive when
+        // it acts as a resize handle, with arrow-key support and a tab
+        // stop. eslint-plugin-jsx-a11y still treats `separator` as
+        // non-interactive across the board, so disable the two rules
+        // that fire on this otherwise-correct shape.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- role=separator resize handle is interactive per WAI-ARIA (focusable separator), the plugin does not model that
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseDown: onResizeStart,
+            onKeyDown: onHandleKeyDown,
+            tabIndex: 0,
+            "aria-label": resizeLabel,
+            role: "separator",
+            "aria-orientation": "vertical",
+            className: "uxm-side-flexpane__resize-handle",
+            children: /* @__PURE__ */ jsx("div", { className: "uxm-side-flexpane__resize-handle-bar" })
+          }
+        ),
+        onBack && // A `<button>`, not the `BackLink` atom: `BackLink` is an `<a href>`
+        // for navigation, whereas this fires an `onBack` action callback. The
+        // icon+label chrome is themed the same way (`--uxm-side-flexpane-back-*`
+        // mirrors BackLink's `--uxm-back-link-*`).
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "uxm-side-flexpane__back", onClick: onBack, children: [
+          /* @__PURE__ */ jsx(Icon, { glyph: "arrow-left", size: 14, strokeWidth: 2, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: backLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("header", { className: "uxm-side-flexpane__header", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "uxm-side-flexpane__icon", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "uxm-side-flexpane__heading", children: [
+            eyebrow && /* @__PURE__ */ jsx("p", { className: "uxm-side-flexpane__eyebrow", children: eyebrow }),
+            /* @__PURE__ */ jsx("h3", { className: "uxm-side-flexpane__title", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "uxm-side-flexpane__subtitle", children: subtitle })
+          ] }),
+          hasTrailing && /* @__PURE__ */ jsxs("div", { className: "uxm-side-flexpane__actions", children: [
+            actions,
+            actions && (expandable || onClose) && /* @__PURE__ */ jsx("span", { className: "uxm-side-flexpane__actions-divider", "aria-hidden": "true" }),
+            expandable && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": expanded ? collapseLabel : expandLabel,
+                "aria-pressed": expanded,
+                onClick: toggleExpanded,
+                children: /* @__PURE__ */ jsx(Icon, { glyph: expanded ? "chevron-right" : "chevron-left", size: 16 })
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { glyph: "close" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "uxm-side-flexpane__body", children }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "uxm-side-flexpane__footer", children: footer })
+      ]
+    }
+  );
+}
+export {
+  SideFlexpane
+};
+//# sourceMappingURL=side-flexpane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/side-flexpane/side-flexpane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nexport interface SideFlexpaneProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Small uppercase label above the title. */\n  eyebrow?: ReactNode;\n  /** Primary heading. */\n  title: ReactNode;\n  /** Secondary line under the title (e.g. a type / path). */\n  subtitle?: ReactNode;\n  /**\n   * Leading header visual, left of the title block — typically a tinted\n   * `<IconTile><Icon …/></IconTile>`. Kept a generic slot so the tint stays\n   * with the consumer (no baked-in category).\n   */\n  icon?: ReactNode;\n  /** Close (×) handler — renders the close button in the header. */\n  onClose?: () => void;\n  /**\n   * Back handler — when set, renders a top back-link bar (`← {backLabel}`)\n   * above the header. Distinct from `onClose`.\n   */\n  onBack?: () => void;\n  /** Label for the back-link bar. Defaults to `\"Back\"`. */\n  backLabel?: ReactNode;\n  /**\n   * Header action controls (typically `IconButton`s, e.g. a delete), placed in\n   * the trailing cluster before the expand/close controls.\n   */\n  actions?: ReactNode;\n  /** Show an expand/collapse toggle that widens the pane to `expandedWidth`. */\n  expandable?: boolean;\n  /** Initial expanded state for uncontrolled usage. Ignored when `expanded` is set. */\n  defaultExpanded?: boolean;\n  /** Controlled expanded state — pair with `onExpandedChange`. */\n  expanded?: boolean;\n  /** Fires with the next expanded state whenever the toggle is clicked. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Width in px while expanded. Defaults to 960 — deliberately above the\n   * `maxWidth` resize ceiling so \"Expand\" always grows the pane. Expanding\n   * never shrinks below the current width.\n   */\n  expandedWidth?: number;\n  footer?: ReactNode;\n  children?: ReactNode;\n  /** Initial width in px. Defaults to 380. */\n  defaultWidth?: number;\n  /** Min width in px when resizing. Defaults to 280. */\n  minWidth?: number;\n  /** Max width in px when resizing. Defaults to 720. */\n  maxWidth?: number;\n  /** Whether the drag handle is shown. Defaults to true. */\n  resizable?: boolean;\n  /** Accessible name for the close (×) button. Default `\"Close\"`. */\n  closeLabel?: string;\n  /** Accessible name for the drag handle. Default `\"Resize panel\"`. */\n  resizeLabel?: string;\n  /** Accessible name for the expand toggle while collapsed. Default `\"Expand panel\"`. */\n  expandLabel?: string;\n  /** Accessible name for the expand toggle while expanded. Default `\"Collapse panel\"`. */\n  collapseLabel?: string;\n}\n\nexport function SideFlexpane({\n  eyebrow,\n  title,\n  subtitle,\n  icon,\n  onClose,\n  onBack,\n  backLabel = 'Back',\n  actions,\n  expandable = false,\n  defaultExpanded = false,\n  expanded: controlledExpanded,\n  onExpandedChange,\n  expandedWidth = 960,\n  footer,\n  children,\n  className,\n  defaultWidth: _defaultWidth = 380,\n  minWidth = 280,\n  maxWidth = 720,\n  resizable = true,\n  closeLabel = 'Close',\n  resizeLabel = 'Resize panel',\n  expandLabel = 'Expand panel',\n  collapseLabel = 'Collapse panel',\n  style,\n  ...rest\n}: SideFlexpaneProps) {\n  // `width === null` means \"no inline override\" — the rendered width comes\n  // from CSS (the atom's own `width: 380px` rule, or any saved `width:`\n  // override the editor wrote to components.css from the `Width` knob).\n  // Once the user drags, we switch to an inline value that wins over CSS\n  // for the rest of the session; a page reload resets it back to null so\n  // the saved knob value wins again. The `_defaultWidth` prop is kept on\n  // the public API for forward compatibility but isn't read here — the\n  // CSS rule supplies the visual default.\n  const [width, setWidth] = useState<number | null>(null);\n  const paneRef = useRef<HTMLElement | null>(null);\n  const dragging = useRef(false);\n  const startX = useRef(0);\n  const startW = useRef(0);\n\n  // Expanded is a distinct \"maximized\" mode: it pins the pane to\n  // `expandedWidth` and hides the resize handle (so the two width mechanisms\n  // don't fight). Collapsing reverts to the prior dragged width / CSS\n  // default. Controlled/uncontrolled pair, like Disclosure.\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const isExpandedControlled = controlledExpanded !== undefined;\n  const expanded = isExpandedControlled ? controlledExpanded : uncontrolledExpanded;\n  const toggleExpanded = () => {\n    const next = !expanded;\n    // When expanding before any drag (`width === null`), snapshot the pane's\n    // current rendered width into state so the \"Expand grows, never shrinks\"\n    // guard in `inlineWidth` has a real baseline — otherwise it would compare\n    // against 0 and a small `expandedWidth` (or a saved width override above it)\n    // could shrink the pane. Reading the ref is safe here (event handler, not\n    // render). Snapshotting to the current width also keeps the collapse visual\n    // unchanged, since it equals what CSS was already resolving to.\n    if (next && width === null) {\n      const current = paneRef.current?.offsetWidth;\n      if (current) setWidth(current);\n    }\n    onExpandedChange?.(next);\n    if (!isExpandedControlled) setUncontrolledExpanded(next);\n  };\n\n  // Same drag pattern as PropertiesPanel: pin the start position, then\n  // compute deltas inside a document-level mousemove. The handle sits on\n  // the left edge — the panel docks to the right, so a leftward drag\n  // (decreasing clientX) grows the panel. We snapshot the current width\n  // from `offsetWidth` so the drag starts from whatever CSS resolved to\n  // (the saved knob value, the atom default, etc.) rather than the JS\n  // `defaultWidth` constant.\n  const onResizeStart = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n      startX.current = e.clientX;\n      startW.current =\n        paneRef.current?.offsetWidth ?? width ?? _defaultWidth;\n\n      const onMouseMove = (ev: MouseEvent) => {\n        if (!dragging.current) return;\n        const delta = startX.current - ev.clientX;\n        setWidth(Math.min(maxWidth, Math.max(minWidth, startW.current + delta)));\n      };\n\n      const onMouseUp = () => {\n        dragging.current = false;\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [width, minWidth, maxWidth, _defaultWidth],\n  );\n\n  // Keyboard resize so the handle is operable without a mouse — Arrow\n  // keys step the width, Shift accelerates. This both honours the\n  // WAI-ARIA `separator` pattern (a resize separator must be focusable\n  // and respond to arrows) and satisfies eslint-plugin-jsx-a11y's\n  // `no-noninteractive-element-interactions` rule.\n  const onHandleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;\n      e.preventDefault();\n      const step = e.shiftKey ? 50 : 10;\n      const base = paneRef.current?.offsetWidth ?? width ?? _defaultWidth;\n      // Pane docks to the right: ArrowLeft grows, ArrowRight shrinks.\n      const next = e.key === 'ArrowLeft' ? base + step : base - step;\n      setWidth(Math.min(maxWidth, Math.max(minWidth, next)));\n    },\n    [width, minWidth, maxWidth, _defaultWidth],\n  );\n\n  // Expanded pins to `expandedWidth`, but never below the current width —\n  // \"Expand\" must grow, never shrink. `toggleExpanded` snapshots the pane's\n  // rendered width into `width` before this runs (even on the first, un-dragged\n  // expand), so the guard here has a real baseline instead of comparing to 0.\n  const inlineWidth = expanded\n    ? Math.max(expandedWidth, width ?? 0)\n    : resizable && width !== null\n      ? width\n      : undefined;\n  const showHandle = resizable && !expanded;\n  const hasTrailing = Boolean(actions) || expandable || Boolean(onClose);\n\n  return (\n    <aside\n      ref={paneRef}\n      className={cn('uxm-side-flexpane', className)}\n      // Consumer-provided `style` wins over the width we compute — that\n      // matches existing usage (user-panel / create-panel pass borderRadius\n      // and height overrides) and gives consumers a way to lock width if\n      // they don't want resize behaviour without flipping the flag.\n      style={{\n        ...(inlineWidth !== undefined ? { width: `${inlineWidth}px` } : undefined),\n        ...style,\n      }}\n      {...rest}\n    >\n      {showHandle && (\n        // Handle sits flush with the inside-left edge — the pane root\n        // keeps `overflow: hidden` so it can't extend past the rounded\n        // corner anyway. 6px (`w-1.5`) is the same grab target as\n        // PropertiesPanel's resizer.\n        // WAI-ARIA windowsplitter pattern: `separator` IS interactive when\n        // it acts as a resize handle, with arrow-key support and a tab\n        // stop. eslint-plugin-jsx-a11y still treats `separator` as\n        // non-interactive across the board, so disable the two rules\n        // that fire on this otherwise-correct shape.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- role=separator resize handle is interactive per WAI-ARIA (focusable separator), the plugin does not model that\n        <div\n          onMouseDown={onResizeStart}\n          onKeyDown={onHandleKeyDown}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- focusable separator needs a tab stop for keyboard resizing\n          tabIndex={0}\n          aria-label={resizeLabel}\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          className=\"uxm-side-flexpane__resize-handle\"\n        >\n          <div className=\"uxm-side-flexpane__resize-handle-bar\" />\n        </div>\n      )}\n      {onBack && (\n        // A `<button>`, not the `BackLink` atom: `BackLink` is an `<a href>`\n        // for navigation, whereas this fires an `onBack` action callback. The\n        // icon+label chrome is themed the same way (`--uxm-side-flexpane-back-*`\n        // mirrors BackLink's `--uxm-back-link-*`).\n        <button type=\"button\" className=\"uxm-side-flexpane__back\" onClick={onBack}>\n          <Icon glyph=\"arrow-left\" size={14} strokeWidth={2} aria-hidden=\"true\" />\n          <span>{backLabel}</span>\n        </button>\n      )}\n      <header className=\"uxm-side-flexpane__header\">\n        {icon && <span className=\"uxm-side-flexpane__icon\">{icon}</span>}\n        <div className=\"uxm-side-flexpane__heading\">\n          {eyebrow && <p className=\"uxm-side-flexpane__eyebrow\">{eyebrow}</p>}\n          <h3 className=\"uxm-side-flexpane__title\">{title}</h3>\n          {subtitle && <p className=\"uxm-side-flexpane__subtitle\">{subtitle}</p>}\n        </div>\n        {hasTrailing && (\n          <div className=\"uxm-side-flexpane__actions\">\n            {actions}\n            {actions && (expandable || onClose) && (\n              <span className=\"uxm-side-flexpane__actions-divider\" aria-hidden=\"true\" />\n            )}\n            {expandable && (\n              <IconButton\n                aria-label={expanded ? collapseLabel : expandLabel}\n                aria-pressed={expanded}\n                onClick={toggleExpanded}\n              >\n                <Icon glyph={expanded ? 'chevron-right' : 'chevron-left'} size={16} />\n              </IconButton>\n            )}\n            {onClose && (\n              <IconButton aria-label={closeLabel} onClick={onClose}>\n                <Icon glyph=\"close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n      </header>\n      <div className=\"uxm-side-flexpane__body\">{children}</div>\n      {footer && <footer className=\"uxm-side-flexpane__footer\">{footer}</footer>}\n    </aside>\n  );\n}\n"],"mappings":"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","names":[]}