@qoretechnologies/reqore 0.76.0-pr.673.g960750c → 0.76.0

package/dist/components/NavRail/index.cjs

@@ -1,666 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqoreNavRail = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var polished_1 = require("polished");
-var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
-var sizes_1 = require("../../constants/sizes.cjs");
-var colors_1 = require("../../helpers/colors.cjs");
-var styled_1 = require("../../helpers/styled.cjs");
-var utils_1 = require("../../helpers/utils.cjs");
-var useReqoreContext_1 = require("../../hooks/useReqoreContext.cjs");
-var useScrollFade_1 = require("../../hooks/useScrollFade.cjs");
-var useTheme_1 = require("../../hooks/useTheme.cjs");
-var styles_1 = require("../../styles.cjs");
-var Button_1 = __importDefault(require("../Button/index.cjs"));
-var ControlGroup_1 = __importDefault(require("../ControlGroup/index.cjs"));
-var Effect_1 = require("../Effect/index.cjs");
-var Menu_1 = __importDefault(require("../Menu/index.cjs"));
-var item_1 = __importDefault(require("../Menu/item.cjs"));
-var Popover_1 = require("../Popover/index.cjs");
-var Spacer_1 = require("../Spacer/index.cjs");
-var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider.cjs"));
-// ── Styled surface ────────────────────────────────────────────────────────────
-/**
- * `box-shadow` rules for a surface that paints shadow layers of its own (the
- * raised highlight, the active group's ring) AND may carry an effect glow. The
- * later `box-shadow` declaration would win — a raised rail could never cast a
- * glow or drop shadow — so the two are composed into one, under the glow's own
- * trigger state when it has one.
- */
-var withGlow = function (theme, effect, own) {
-    var base = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: ", ";\n  "], ["\n    box-shadow: ", ";\n  "])), own);
-    if (!(effect === null || effect === void 0 ? void 0 : effect.glow)) {
-        return base;
-    }
-    var both = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-shadow: ", ", ", ";\n  "], ["\n    box-shadow: ", ", ", ";\n  "])), (0, Effect_1.getGlowBoxShadow)(theme, effect.glow), own);
-    switch (effect.glow.when) {
-        case 'hover':
-            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n        &:hover {\n          ", "\n        }\n      "], ["\n        ", "\n        &:hover {\n          ", "\n        }\n      "])), base, both);
-        case 'focus':
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n        &:focus {\n          ", "\n        }\n      "], ["\n        ", "\n        &:focus {\n          ", "\n        }\n      "])), base, both);
-        case 'active':
-            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", "\n        &:active {\n          ", "\n        }\n      "], ["\n        ", "\n        &:active {\n          ", "\n        }\n      "])), base, both);
-        default:
-            return both;
-    }
-};
-var NavRailSurface = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate `fit-content` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate \\`fit-content\\` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"])), function (_a) {
-    var $gap = _a.$gap;
-    return $gap;
-}, function (_a) {
-    var $padding = _a.$padding;
-    return $padding;
-}, function (_a) {
-    var $pill = _a.$pill, $radius = _a.$radius;
-    return ($pill ? '9999px' : "".concat($radius, "px"));
-}, function (_a) {
-    var theme = _a.theme, $transparent = _a.$transparent, $opacity = _a.$opacity, $bgLightness = _a.$bgLightness;
-    return $transparent
-        ? 'transparent'
-        : (0, polished_1.rgba)((0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), $bgLightness), $opacity);
-}, function (_a) {
-    var $flat = _a.$flat, theme = _a.theme, $borderLightness = _a.$borderLightness;
-    return $flat
-        ? 'none'
-        : "1px solid ".concat((0, polished_1.rgba)((0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), $borderLightness), 0.7));
-}, function (_a) {
-    var $blur = _a.$blur, $opacity = _a.$opacity;
-    return $blur && $opacity < 1 && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      backdrop-filter: blur(", "px);\n    "], ["\n      backdrop-filter: blur(", "px);\n    "])), $blur);
-}, function (_a) {
-    var $raised = _a.$raised, $flat = _a.$flat, effect = _a.effect, theme = _a.theme;
-    return $raised && $flat && withGlow(theme, effect, styles_1.RAISED_SHADOWS);
-}, function (_a) {
-    var $floating = _a.$floating, $position = _a.$position, $offset = _a.$offset;
-    return $floating &&
-        $position !== 'static' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "], ["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "])), $position, $offset);
-}, function (_a) {
-    var $maxHeight = _a.$maxHeight, $floating = _a.$floating, $position = _a.$position;
-    return $maxHeight && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      box-sizing: border-box;\n      max-height: ", ";\n    "], ["\n      box-sizing: border-box;\n      max-height: ", ";\n    "])), $floating && $position !== 'static'
-        ? "min(".concat($maxHeight, ", calc(100% - 8px))")
-        : $maxHeight);
-}, function (_a) {
-    var $revealMode = _a.$revealMode, $shown = _a.$shown, $restOpacity = _a.$restOpacity;
-    return $revealMode && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "], ["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "])), $shown ? 1 : $restOpacity, $shown || $restOpacity > 0 ? 'auto' : 'none');
-});
-// The active page's "expanded" container. Built on StyledEffect so an
-// `activeEffect` gradient paints it (like the outer rail); the intent tint is
-// the fallback when no gradient is given.
-var ActiveGroupSurface = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"])), function (_a) {
-    var $gap = _a.$gap;
-    return $gap;
-}, function (_a) {
-    var $padBottom = _a.$padBottom;
-    return $padBottom;
-}, function (_a) {
-    var $radiusTop = _a.$radiusTop, $radiusBottom = _a.$radiusBottom;
-    return "".concat($radiusTop, "px ").concat($radiusTop, "px ").concat($radiusBottom, "px ").concat($radiusBottom, "px");
-}, function (_a) {
-    var $tint = _a.$tint;
-    return $tint && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), $tint);
-}, function (_a) {
-    var $ring = _a.$ring, effect = _a.effect, theme = _a.theme;
-    return withGlow(theme, effect, "inset 0 0 0 1px ".concat($ring));
-}, function (_a) {
-    var $labelled = _a.$labelled;
-    return $labelled && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
-});
-/* The scroll region of the rail. Inert unless the rail is expanded: no overflow
-   (so a mark's glow can still bleed past its edge), no visible fades, no
-   layout of its own — the marks sit exactly where they did.
-
-   Expanded, the wrapper carries the vignette: overlay gradients on THIS
-   element rather than inside the scroll box, where they would scroll away with
-   the marks. Which edges fade is a measurement carried by classes (see
-   `useScrollFade` for why it is never state). The fades reach into the rail's
-   padding — the box below bleeds by the same amount — so the vignette spans the
-   surface edge to edge, and they take the surface's inner radius so the corners
-   never poke out of the pill. `pointer-events: none` keeps them from swallowing
-   a click on the mark beneath. */
-var NavRailScroll = styled_components_1.default.div.withConfig({
-    // A control group hands every non-intrinsic child its own props; none of them
-    // belong on this div.
-    shouldForwardProp: (0, styled_1.omitStyleProps)('size', 'intent', 'fluid', 'fixed', 'fill', 'flat', 'minimal', 'stack', 'spaceBetween', 'customTheme'),
-})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n\n  /* A labelled rail's marks span the column, so the region must too. */\n  ", "\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    height: ", "px;\n    pointer-events: none;\n    z-index: 2;\n    opacity: 0;\n    transition: opacity 0.15s ease-out;\n  }\n\n  &::before {\n    top: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to bottom,\n      ", ",\n      ", "\n    );\n  }\n\n  &::after {\n    bottom: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to top,\n      ", ",\n      ", "\n    );\n  }\n\n  &.reqore-nav-rail-fade-top::before {\n    opacity: 1;\n  }\n\n  &.reqore-nav-rail-fade-bottom::after {\n    opacity: 1;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n\n  /* A labelled rail's marks span the column, so the region must too. */\n  ", "\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    height: ", "px;\n    pointer-events: none;\n    z-index: 2;\n    opacity: 0;\n    transition: opacity 0.15s ease-out;\n  }\n\n  &::before {\n    top: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to bottom,\n      ", ",\n      ", "\n    );\n  }\n\n  &::after {\n    bottom: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to top,\n      ", ",\n      ", "\n    );\n  }\n\n  &.reqore-nav-rail-fade-top::before {\n    opacity: 1;\n  }\n\n  &.reqore-nav-rail-fade-bottom::after {\n    opacity: 1;\n  }\n"])), function (_a) {
-    var $scrollable = _a.$scrollable;
-    return $scrollable && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      flex: 1 1 auto;\n    "], ["\n      flex: 1 1 auto;\n    "])));
-}, function (_a) {
-    var $labelled = _a.$labelled;
-    return $labelled && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
-}, function (_a) {
-    var $bleed = _a.$bleed;
-    return -$bleed;
-}, function (_a) {
-    var $bleed = _a.$bleed;
-    return -$bleed;
-}, function (_a) {
-    var $fadeSize = _a.$fadeSize;
-    return $fadeSize;
-}, function (_a) {
-    var $fadeRadius = _a.$fadeRadius;
-    return "".concat($fadeRadius, "px ").concat($fadeRadius, "px 0 0");
-}, function (_a) {
-    var $fadeFrom = _a.$fadeFrom;
-    return $fadeFrom;
-}, function (_a) {
-    var $fadeTo = _a.$fadeTo;
-    return $fadeTo;
-}, function (_a) {
-    var $fadeRadius = _a.$fadeRadius;
-    return "0 0 ".concat($fadeRadius, "px ").concat($fadeRadius, "px");
-}, function (_a) {
-    var $fadeFrom = _a.$fadeFrom;
-    return $fadeFrom;
-}, function (_a) {
-    var $fadeTo = _a.$fadeTo;
-    return $fadeTo;
-});
-/* The box that actually scrolls. The scrollbar is hidden on purpose: the
-   vignette IS the affordance, and a native bar is wider than the gap between
-   marks. Wheel, trackpad, touch and keyboard still scroll it. The negative
-   margin / padding pair widens the clip box into the rail's padding without
-   moving the marks, so a glow or raised shadow is clipped at the surface, not
-   at the mark. */
-var NavRailScrollBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"])), function (_a) {
-    var $scrollable = _a.$scrollable, $bleed = _a.$bleed;
-    return $scrollable && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "], ["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "])), -$bleed, $bleed);
-});
-// Hoisted so the memo'd control group / spacer children see stable objects.
-var EXPANDED_GROUP_STYLE = { minHeight: 0, flex: '1 1 auto' };
-// A labelled rail aligns its column to the leading edge (so fluid marks can
-// stretch); a divider has a fixed width and must be re-centred by hand.
-var LABELLED_DIVIDER_STYLE = { alignSelf: 'center' };
-// ── Helpers ─────────────────────────────────────────────────────────────────
-/** Keep the active item inside the shown window, folding the rest to overflow. */
-function splitAroundActive(list, activeId, max) {
-    if (max >= list.length || max <= 0)
-        return { shown: list, hidden: [] };
-    var activeIdx = Math.max(0, list.findIndex(function (x) { return x.id === activeId; }));
-    var start = activeIdx >= max ? activeIdx - max + 1 : 0;
-    var shown = list.slice(start, start + max);
-    var ids = new Set(shown.map(function (x) { return x.id; }));
-    return { shown: shown, hidden: list.filter(function (x) { return !ids.has(x.id); }) };
-}
-/** Measure the positioned ancestor's height (for overflow budgeting). */
-function useAncestorHeight(enabled, maxHeight, ref) {
-    var _a = (0, react_1.useState)(maxHeight), height = _a[0], setHeight = _a[1];
-    (0, react_1.useEffect)(function () {
-        if (typeof maxHeight === 'number') {
-            setHeight(maxHeight);
-            return undefined;
-        }
-        if (!enabled || !ref.current)
-            return undefined;
-        var parent = ref.current.offsetParent;
-        if (!parent)
-            return undefined;
-        var update = function () { return setHeight(parent.clientHeight); };
-        var ro = new ResizeObserver(update);
-        ro.observe(parent);
-        update();
-        return function () { return ro.disconnect(); };
-    }, [enabled, maxHeight, ref]);
-    return height;
-}
-var resolvePadding = function (padded, size) {
-    if (padded === false)
-        return 0;
-    if (padded === undefined || padded === true)
-        return sizes_1.HALF_PADDING_FROM_SIZE[size];
-    return sizes_1.HALF_PADDING_FROM_SIZE[padded];
-};
-var NavRailOverflow = (0, react_1.memo)(function (_a) {
-    var items = _a.items, size = _a.size, placement = _a.placement, ariaLabel = _a.ariaLabel, _b = _a.tooltipSuffix, tooltipSuffix = _b === void 0 ? 'more' : _b, labelled = _a.labelled, onSelect = _a.onSelect, onOpenChange = _a.onOpenChange;
-    // Memoised so the memo'd ReqorePopover/ReqoreMenuItem children get stable
-    // props (no new object/closure per render).
-    var componentProps = (0, react_1.useMemo)(function () { return ({
-        icon: 'More2Line',
-        size: size,
-        flat: true,
-        minimal: true,
-        circle: !labelled,
-        pill: !!labelled,
-        fluid: !!labelled,
-        raised: true,
-        'aria-label': ariaLabel,
-        className: 'reqore-nav-rail-overflow',
-        tooltip: labelled ? undefined : { content: "".concat(items.length, " ").concat(tooltipSuffix), placement: placement },
-        label: labelled ? "".concat(items.length, " ").concat(tooltipSuffix) : undefined,
-    }); }, [size, ariaLabel, placement, items.length, tooltipSuffix, labelled]);
-    var handleItemClick = (0, react_1.useCallback)(function (_event, itemId) {
-        if (itemId)
-            onSelect(itemId);
-    }, [onSelect]);
-    // Height-capped so a long overflow list (many hidden pages) never runs off
-    // the viewport — sensible on mobile too (70vh, never past 480px); it scrolls
-    // past that (ReqoreMenu is overflow-y:auto).
-    var content = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsx)(Menu_1.default, { rounded: true, padded: true, width: '210px', maxHeight: 'min(70vh, 480px)', children: items.map(function (it) { return ((0, jsx_runtime_1.jsx)(item_1.default, { itemId: it.id, icon: it.icon, selected: it.active, intent: it.active ? 'info' : undefined, onClick: handleItemClick, children: it.label }, it.id)); }) })); }, [items, handleItemClick]);
-    return ((0, jsx_runtime_1.jsx)(Popover_1.ReqorePopover, { component: Button_1.default, componentProps: componentProps, 
-        // The trigger IS the mark: rendered directly, not boxed in the popover's
-        // wrapper span — that span would be the flex child in the mark's place
-        // (so a labelled, fluid trigger could never stretch to the rail's width)
-        // and its overflow:hidden would clip the mark's raised shadow.
-        isReqoreComponent: true, handler: 'click', placement: placement, closeOnInsideClick: true, noArrow: true, noWrapper: true, onToggleChange: onOpenChange, content: content }));
-});
-// The one overflow affordance of an `expandable` rail. Shaped like a mark
-// (circle, or a fluid pill on a labelled rail) so it reads as part of the
-// column, with a chevron pointing the way the rail will grow.
-var NavRailExpandToggle = (0, react_1.memo)(function (_a) {
-    var expanded = _a.expanded, hiddenCount = _a.hiddenCount, size = _a.size, tipSide = _a.tipSide, labelled = _a.labelled, expandLabel = _a.expandLabel, collapseLabel = _a.collapseLabel, tooltipSuffix = _a.tooltipSuffix, onToggle = _a.onToggle;
-    var text = expanded ? collapseLabel : "".concat(hiddenCount, " ").concat(tooltipSuffix);
-    var tooltip = (0, react_1.useMemo)(function () { return ({ content: text, placement: tipSide }); }, [text, tipSide]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { icon: expanded ? 'ArrowUpSLine' : 'ArrowDownSLine', size: size, flat: true, minimal: true, raised: true, circle: !labelled, pill: !!labelled, fluid: !!labelled, "aria-label": expanded ? collapseLabel : expandLabel, "aria-expanded": expanded, className: 'reqore-nav-rail-expand', tooltip: labelled ? undefined : tooltip, label: labelled ? text : undefined, onClick: onToggle }));
-});
-// One circular mark. Kept as its own memo'd component so its `tooltip` object
-// and `onClick` closure are stabilised (useMemo/useCallback) rather than created
-// inline in a `.map()` and passed to the memo'd ReqoreButton every render.
-var NavRailMark = (0, react_1.memo)(function (_a) {
-    var id = _a.id, label = _a.label, icon = _a.icon, iconImage = _a.iconImage, size = _a.size, intent = _a.intent, effect = _a.effect, disabled = _a.disabled, active = _a.active, labelled = _a.labelled, tipSide = _a.tipSide, className = _a.className, ariaCurrent = _a.ariaCurrent, onSelect = _a.onSelect, buttonProps = _a.buttonProps;
-    var tooltip = (0, react_1.useMemo)(function () { return ({ content: label, placement: tipSide }); }, [label, tipSide]);
-    var handleClick = (0, react_1.useCallback)(function () { return onSelect(id); }, [onSelect, id]);
-    // An image mark renders through the button's left-icon slot; merge with any
-    // caller-supplied leftIconProps so `iconImage` and `props.leftIconProps`
-    // coexist (the image wins the `image` key).
-    var leftIconProps = (0, react_1.useMemo)(function () {
-        return iconImage
-            ? __assign(__assign({}, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIconProps), { image: iconImage }) : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIconProps;
-    }, [iconImage, buttonProps]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default
-    // Escape hatch first, so the rail's own structural / behavioural props
-    // below always win (the mark can be tuned but never broken).
-    , __assign({}, buttonProps, { circle: !labelled, pill: labelled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.pill), fluid: labelled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.fluid), size: size, icon: icon, leftIconProps: leftIconProps, flat: true, 
-        // Active marks fill in (solid + the `active` highlight) so they lift out
-        // of the rail / the active group's surface; resting marks stay minimal.
-        minimal: !active, active: active, raised: true, disabled: disabled, intent: intent, effect: effect, className: className, "aria-label": label, "aria-current": ariaCurrent, tooltip: labelled ? undefined : tooltip, label: labelled ? label : undefined, onClick: handleClick })));
-});
-// ── Component ─────────────────────────────────────────────────────────────────
-/**
- * A compact navigation rail: a thin column of circular marks for primary
- * destinations, with the active destination's sub-items nested directly beneath
- * it in a distinct sub-capsule. Overflow folds into a `⋮` flyout — or, with
- * `expandable`, behind a toggle that grows the rail in place (capped, then
- * scrolling behind a vignette). It can pin to a gutter and rest dimmed until
- * approached (or, for mobile, stay hidden and appear only while scrolling); its
- * sub-items can drive and follow page scroll via `scrollSpy` + `scrollTargetId`;
- * and `showLabels` widens it into a labelled rail — always, or after the pointer
- * has rested on it for a moment.
- */
-exports.ReqoreNavRail = (0, react_1.memo)(function (_a) {
-    var _b, _c, _d;
-    var items = _a.items, activeId = _a.activeId, activeSubId = _a.activeSubId, defaultActiveId = _a.defaultActiveId, defaultActiveSubId = _a.defaultActiveSubId, onItemClick = _a.onItemClick, onSubClick = _a.onSubClick, _e = _a.position, position = _e === void 0 ? 'left' : _e, floating = _a.floating, idleReveal = _a.idleReveal, _f = _a.idleOpacity, idleOpacity = _f === void 0 ? 0.34 : _f, revealOnScroll = _a.revealOnScroll, _g = _a.scrollHideDelay, scrollHideDelay = _g === void 0 ? 1100 : _g, _h = _a.offset, offset = _h === void 0 ? 14 : _h, scrollContainer = _a.scrollContainer, scrollSpy = _a.scrollSpy, maxHeight = _a.maxHeight, maxItems = _a.maxItems, expandable = _a.expandable, expanded = _a.expanded, _j = _a.defaultExpanded, defaultExpanded = _j === void 0 ? false : _j, onExpandedChange = _a.onExpandedChange, _k = _a.expandedMaxHeight, expandedMaxHeight = _k === void 0 ? '95vh' : _k, fadeColor = _a.fadeColor, showLabels = _a.showLabels, _l = _a.showLabelsDelay, showLabelsDelay = _l === void 0 ? 1500 : _l, _m = _a.size, size = _m === void 0 ? 'small' : _m, intent = _a.intent, effect = _a.effect, activeEffect = _a.activeEffect, _o = _a.flat, flat = _o === void 0 ? false : _o, minimal = _a.minimal, transparent = _a.transparent, _p = _a.rounded, rounded = _p === void 0 ? true : _p, radiusSize = _a.radiusSize, _q = _a.padded, padded = _q === void 0 ? true : _q, raised = _a.raised, _r = _a.opacity, opacity = _r === void 0 ? 1 : _r, _s = _a.blur, blur = _s === void 0 ? 4 : _s, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, header = _a.header, footer = _a.footer, className = _a.className, style = _a.style, _t = _a.moreItemsLabel, moreItemsLabel = _t === void 0 ? 'More items' : _t, _u = _a.moreSectionsLabel, moreSectionsLabel = _u === void 0 ? 'More sections' : _u, _v = _a.overflowTooltipSuffix, overflowTooltipSuffix = _v === void 0 ? 'more' : _v, _w = _a.activeGroupAriaLabelSuffix, activeGroupAriaLabelSuffix = _w === void 0 ? 'sections' : _w, _x = _a.expandLabel, expandLabel = _x === void 0 ? 'Show all items' : _x, _y = _a.collapseLabel, collapseLabel = _y === void 0 ? 'Show fewer items' : _y;
-    // NB: `intent` is deliberately NOT fed to the theme here — it must not
-    // recolour the whole rail surface; it only drives the active accent + the
-    // active group's tint (see `activeIntent` / `renderActiveGroup`).
-    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, undefined, undefined, inheritCustomTheme);
-    var isHoverCapable = (0, useReqoreContext_1.useReqoreProperty)('isHoverCapable');
-    var subSize = (0, utils_1.getOneLessSize)(size);
-    var tipSide = position === 'right' ? 'left' : 'right';
-    var activeIntent = intent !== null && intent !== void 0 ? intent : 'info';
-    var isTransparent = !!(transparent || minimal);
-    var isFlat = !!(flat || minimal);
-    var _z = (0, react_1.useState)(defaultActiveId !== null && defaultActiveId !== void 0 ? defaultActiveId : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.id), internalId = _z[0], setInternalId = _z[1];
-    var activeItemId = activeId !== null && activeId !== void 0 ? activeId : internalId;
-    var activeItem = (0, react_1.useMemo)(function () { return items.find(function (i) { return i.id === activeItemId; }); }, [items, activeItemId]);
-    var subItems = (0, react_1.useMemo)(function () { var _a; return (_a = activeItem === null || activeItem === void 0 ? void 0 : activeItem.items) !== null && _a !== void 0 ? _a : []; }, [activeItem]);
-    var _0 = (0, react_1.useState)(defaultActiveSubId), internalSubId = _0[0], setInternalSubId = _0[1];
-    var activeSubItemId = (_c = activeSubId !== null && activeSubId !== void 0 ? activeSubId : internalSubId) !== null && _c !== void 0 ? _c : (_d = subItems[0]) === null || _d === void 0 ? void 0 : _d.id;
-    var _1 = (0, react_1.useState)(defaultExpanded), internalExpanded = _1[0], setInternalExpanded = _1[1];
-    var isExpanded = !!expandable && (expanded !== null && expanded !== void 0 ? expanded : internalExpanded);
-    var toggleExpanded = (0, react_1.useCallback)(function () {
-        var next = !(expanded !== null && expanded !== void 0 ? expanded : internalExpanded);
-        if (expanded === undefined)
-            setInternalExpanded(next);
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
-    }, [expanded, internalExpanded, onExpandedChange]);
-    // Labels on a dwell are a pointer nicety: on a touch screen there is no
-    // hover to rest in, so the rail stays icon-only (with its tooltips and
-    // overflow names) rather than half-working. `isHoverCapable` defaults to
-    // capable where the query cannot be evaluated.
-    var hoverLabels = showLabels === 'hover' && isHoverCapable !== false;
-    var _2 = (0, react_1.useState)(false), dwellLabels = _2[0], setDwellLabels = _2[1];
-    var labelled = showLabels === true || (hoverLabels && dwellLabels);
-    // What the header / footer are told, so a control can follow the marks.
-    var slotState = (0, react_1.useMemo)(function () { return ({ labelled: labelled, expanded: isExpanded, size: size }); }, [labelled, isExpanded, size]);
-    var renderSlot = function (slot) {
-        return typeof slot === 'function' ? slot(slotState) : slot;
-    };
-    var _3 = (0, react_1.useState)(false), hovered = _3[0], setHovered = _3[1];
-    var _4 = (0, react_1.useState)(false), scrolling = _4[0], setScrolling = _4[1];
-    var _5 = (0, react_1.useState)(0), openMenus = _5[0], setOpenMenus = _5[1];
-    var onMenuToggle = (0, react_1.useCallback)(function (open) { return setOpenMenus(function (c) { return Math.max(0, c + (open ? 1 : -1)); }); }, []);
-    // Read by the native pointer handlers below, which are bound once.
-    var hoveredRef = (0, react_1.useRef)(false);
-    var openMenusRef = (0, react_1.useRef)(0);
-    var railRef = (0, react_1.useRef)(null);
-    var budgetOn = !!floating || typeof maxHeight === 'number';
-    var availHeight = useAncestorHeight(budgetOn, maxHeight, railRef);
-    // Idle-reveal hover and the label dwell use NATIVE mouseenter/leave on the
-    // rail element, not React's — React routes enter/leave through the React
-    // tree, so a portalled child (a mark's tooltip) counts as "inside" and the
-    // leave never fires when a tooltip is up. Native DOM events use real subtree
-    // containment instead.
-    (0, react_1.useEffect)(function () {
-        if (!idleReveal && !hoverLabels)
-            return undefined;
-        var el = railRef.current;
-        if (!el)
-            return undefined;
-        var dwell;
-        var enter = function () {
-            hoveredRef.current = true;
-            if (idleReveal)
-                setHovered(true);
-            if (hoverLabels) {
-                clearTimeout(dwell);
-                dwell = setTimeout(function () { return setDwellLabels(true); }, showLabelsDelay);
-            }
-        };
-        var leave = function () {
-            hoveredRef.current = false;
-            clearTimeout(dwell);
-            if (idleReveal)
-                setHovered(false);
-            // While a flyout opened from the rail is up the pointer is in the menu,
-            // and narrowing the rail would move the menu's anchor: keep the labels
-            // until the menu closes (see the effect on `openMenus`).
-            if (hoverLabels && openMenusRef.current === 0)
-                setDwellLabels(false);
-        };
-        el.addEventListener('mouseenter', enter);
-        el.addEventListener('mouseleave', leave);
-        return function () {
-            clearTimeout(dwell);
-            el.removeEventListener('mouseenter', enter);
-            el.removeEventListener('mouseleave', leave);
-        };
-    }, [idleReveal, hoverLabels, showLabelsDelay]);
-    // The last menu closing with the pointer already gone is the deferred
-    // "leave" from above.
-    (0, react_1.useEffect)(function () {
-        openMenusRef.current = openMenus;
-        if (openMenus === 0 && !hoveredRef.current)
-            setDwellLabels(false);
-    }, [openMenus]);
-    // Budget marks to the height; sections get ~40% (min 2), pages the rest.
-    var markH = sizes_1.SIZE_TO_PX[size] + sizes_1.GAP_FROM_SIZE[size];
-    var reserve = markH * 2 + 44; // header/footer/sub-capsule chrome
-    var slots = availHeight === undefined
-        ? Number.POSITIVE_INFINITY
-        : Math.max(4, Math.floor((availHeight - reserve) / markH));
-    var subMax = Number.isFinite(slots)
-        ? Math.min(subItems.length, Math.max(2, Math.round(slots * 0.4)))
-        : subItems.length;
-    var itemMax = Number.isFinite(slots) ? Math.max(2, slots - subMax) : items.length;
-    if (itemMax > items.length) {
-        itemMax = items.length;
-        subMax = Number.isFinite(slots)
-            ? Math.min(subItems.length, Math.max(2, slots - itemMax))
-            : subItems.length;
-    }
-    // Hard count cap: the lower of the height budget and `maxItems` wins, so a
-    // short viewport can still show fewer than the cap.
-    if (typeof maxItems === 'number') {
-        itemMax = Math.min(itemMax, Math.max(1, Math.floor(maxItems)));
-    }
-    // What a COLLAPSED rail shows is always computed: expanded shows everything,
-    // and the toggle is offered only when collapsing would actually fold
-    // something — so an expanded rail nothing would hide never offers a "show
-    // fewer" that changes nothing.
-    var collapsedItems = splitAroundActive(items, activeItemId, itemMax);
-    var collapsedSubs = splitAroundActive(subItems, activeSubItemId, subMax);
-    var hiddenWhenCollapsed = collapsedItems.hidden.length + collapsedSubs.hidden.length;
-    var _6 = isExpanded
-        ? { shown: items, hidden: [] }
-        : collapsedItems, itemsShown = _6.shown, itemsHidden = _6.hidden;
-    var _7 = isExpanded
-        ? { shown: subItems, hidden: [] }
-        : collapsedSubs, subsShown = _7.shown, subsHidden = _7.hidden;
-    var activeAt = itemsShown.findIndex(function (i) { return i.id === activeItemId; });
-    var before = activeAt >= 0 ? itemsShown.slice(0, activeAt) : itemsShown; // before active
-    var after = activeAt >= 0 ? itemsShown.slice(activeAt + 1) : []; // after active
-    var selectItem = (0, react_1.useCallback)(function (item) {
-        var _a;
-        if (item.disabled)
-            return;
-        if (activeId === undefined) {
-            setInternalId(item.id);
-            setInternalSubId(undefined);
-        }
-        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.id, item);
-    }, [activeId, onItemClick]);
-    var selectSub = (0, react_1.useCallback)(function (sub) {
-        var _a, _b;
-        if (sub.disabled)
-            return;
-        if (sub.scrollTargetId) {
-            (_a = document
-                .getElementById(sub.scrollTargetId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-        if (activeSubId === undefined)
-            setInternalSubId(sub.id);
-        (_b = sub.onClick) === null || _b === void 0 ? void 0 : _b.call(sub);
-        onSubClick === null || onSubClick === void 0 ? void 0 : onSubClick(sub.id, sub);
-    }, [activeSubId, onSubClick]);
-    // Stable id-based select callbacks so the memo'd mark / overflow children
-    // don't receive a fresh closure each render.
-    var onItemSelect = (0, react_1.useCallback)(function (id) {
-        var item = items.find(function (i) { return i.id === id; });
-        if (item)
-            selectItem(item);
-    }, [items, selectItem]);
-    var onSubSelect = (0, react_1.useCallback)(function (id) {
-        var sub = subItems.find(function (s) { return s.id === id; });
-        if (sub)
-            selectSub(sub);
-    }, [subItems, selectSub]);
-    // Scroll-spy: as the user scrolls, highlight the last section whose top has
-    // passed a threshold below the container's top (when the sub-item isn't
-    // controlled). A plain scroll listener + getBoundingClientRect is used
-    // rather than IntersectionObserver, whose callback only reports the entries
-    // that *changed* — unreliable for "which section is current right now".
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (!scrollSpy || activeSubId !== undefined)
-            return undefined;
-        var targeted = subItems.filter(function (s) { return s.scrollTargetId; });
-        if (!targeted.length)
-            return undefined;
-        var container = (_a = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current) !== null && _a !== void 0 ? _a : null;
-        var scrollTarget = container !== null && container !== void 0 ? container : window;
-        var compute = function () {
-            var containerTop = container ? container.getBoundingClientRect().top : 0;
-            var viewport = container ? container.clientHeight : window.innerHeight;
-            var threshold = containerTop + Math.min(viewport * 0.3, 140);
-            var current = targeted[0].id;
-            for (var _i = 0, targeted_1 = targeted; _i < targeted_1.length; _i++) {
-                var s = targeted_1[_i];
-                var el = document.getElementById(s.scrollTargetId);
-                if (!el)
-                    continue;
-                if (el.getBoundingClientRect().top <= threshold)
-                    current = s.id;
-                else
-                    break;
-            }
-            setInternalSubId(current);
-        };
-        compute();
-        scrollTarget.addEventListener('scroll', compute, { passive: true });
-        return function () { return scrollTarget.removeEventListener('scroll', compute); };
-    }, [scrollSpy, activeSubId, subItems, scrollContainer]);
-    // Reveal-on-scroll (mobile): show while scrolling, hide after a quiet delay.
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (!revealOnScroll)
-            return undefined;
-        var target = (_a = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current) !== null && _a !== void 0 ? _a : window;
-        var timer;
-        var onScroll = function () {
-            setScrolling(true);
-            clearTimeout(timer);
-            timer = setTimeout(function () { return setScrolling(false); }, scrollHideDelay);
-        };
-        target.addEventListener('scroll', onScroll, { passive: true });
-        return function () {
-            target.removeEventListener('scroll', onScroll);
-            clearTimeout(timer);
-        };
-    }, [revealOnScroll, scrollContainer, scrollHideDelay]);
-    // The vignette follows the scroll box's edges; off (classes cleared) while
-    // the rail is collapsed and nothing scrolls.
-    var scrollWrapRef = (0, react_1.useRef)(null);
-    var scrollBoxRef = (0, react_1.useRef)(null);
-    (0, useScrollFade_1.useScrollFade)({
-        scrollRef: scrollBoxRef,
-        targetRef: scrollWrapRef,
-        axis: 'y',
-        enabled: isExpanded,
-        startClassName: 'reqore-nav-rail-fade-top',
-        endClassName: 'reqore-nav-rail-fade-bottom',
-    });
-    var revealMode = !!idleReveal || !!revealOnScroll;
-    var shown = revealOnScroll
-        ? scrolling || openMenus > 0
-        : idleReveal
-            ? hovered || openMenus > 0
-            : true;
-    var restOpacity = revealOnScroll ? 0 : idleOpacity;
-    var pill = rounded && !radiusSize;
-    var radius = (0, sizes_1.resolveRadius)(size, radiusSize);
-    var pad = resolvePadding(padded, size);
-    // A labelled rail is wide: a 9999px radius would round its caps into
-    // semicircles. Keep the curvature of the icon-only pill instead, so the
-    // rail reads as the same object, just wider.
-    var pillRadius = Math.round(sizes_1.SIZE_TO_PX[size] / 2 + pad + 1);
-    var surfacePill = pill && !labelled;
-    var surfaceRadius = pill && labelled ? pillRadius : radius;
-    // The fade dissolves the marks into the rail's own surface (or, on a
-    // transparent rail, into the page behind it).
-    var fadeBase = fadeColor !== null && fadeColor !== void 0 ? fadeColor : (isTransparent
-        ? (0, colors_1.getMainBackgroundColor)(theme)
-        : (0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), 0.02));
-    var fadeFrom = (0, polished_1.rgba)(fadeBase, isTransparent ? 1 : opacity);
-    var fadeTo = (0, polished_1.rgba)(fadeBase, 0);
-    var expandedCap = isExpanded
-        ? typeof expandedMaxHeight === 'number'
-            ? "".concat(expandedMaxHeight, "px")
-            : expandedMaxHeight
-        : undefined;
-    // Labelled marks are fluid pills that must span the column, so the column
-    // aligns to its leading edge instead of centring (and handing every child
-    // the auto side-margins that would keep it at its own width).
-    var columnAlign = labelled ? 'flex-start' : 'center';
-    var renderItem = function (item) {
-        var _a, _b;
-        var active = item.id === activeItemId;
-        return ((0, jsx_runtime_1.jsx)(NavRailMark, { id: item.id, label: item.label, icon: item.icon, iconImage: item.iconImage, size: size, disabled: item.disabled, active: active, labelled: labelled, 
-            // A per-item effect (a "special" mark) wins and always paints; else the
-            // active mark takes the shared activeEffect, inactive marks none.
-            effect: (_a = item.effect) !== null && _a !== void 0 ? _a : (active ? activeEffect : undefined), intent: active ? (_b = item.intent) !== null && _b !== void 0 ? _b : activeIntent : item.intent, className: 'reqore-nav-rail-item', ariaCurrent: active ? 'page' : undefined, tipSide: tipSide, onSelect: onItemSelect, buttonProps: item.props }, item.id));
-    };
-    // A neutral separator drawn after a mark (item.dividerAfter) to give groups
-    // of items breathing room: extra vertical space (≈2.5× the mark gap), with a
-    // short centred line (`withLine`) so the break reads as intentional, or just
-    // the space (`'space'`) for a quieter break. Untinted; the rail never widens.
-    var renderDivider = function (key, withLine) { return ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { 
-        // A line-less break needs a touch more space to register on its own.
-        height: Math.round(sizes_1.GAP_FROM_SIZE[size] * (withLine ? 2.5 : 3.5)), width: "".concat(Math.round(sizes_1.SIZE_TO_PX[size] * 0.66), "px"), lineSize: withLine ? 'small' : 'none', style: labelled ? LABELLED_DIVIDER_STYLE : undefined }, "".concat(key, "-divider"))); };
-    // A primary mark plus its optional trailing divider (React flattens the
-    // returned array; every child carries a key). `'space'` draws no line.
-    var renderPrimary = function (item) {
-        return item.dividerAfter
-            ? [renderItem(item), renderDivider(item.id, item.dividerAfter !== 'space')]
-            : renderItem(item);
-    };
-    var renderSub = function (sub) {
-        var _a;
-        var active = sub.id === activeSubItemId;
-        return ((0, jsx_runtime_1.jsx)(NavRailMark, { id: sub.id, label: sub.label, icon: sub.icon, iconImage: sub.iconImage, size: subSize, disabled: sub.disabled, active: active, labelled: labelled, effect: active ? activeEffect : undefined, intent: active ? (_a = sub.intent) !== null && _a !== void 0 ? _a : activeIntent : sub.intent, className: 'reqore-nav-rail-subitem', ariaCurrent: active ? 'location' : undefined, tipSide: tipSide, onSelect: onSubSelect, buttonProps: sub.props }, sub.id));
-    };
-    // The active page's mark "expands" into the sub-rail: its own icon, a line
-    // separator, then its section marks — all inside one grouped container.
-    var renderActiveGroup = function (item) {
-        var _a, _b;
-        if (!subsShown.length)
-            return renderItem(item);
-        // Tint the wrapping container with the active mark's own intent colour so
-        // the sub-rail reads as one coloured "you are here" unit.
-        var groupColor = (0, colors_1.getColorFromMaybeString)(theme, (_a = item.intent) !== null && _a !== void 0 ? _a : activeIntent);
-        // One mark wide (inset-shadow "border", no horizontal padding) so the rail
-        // never changes width; the top mark sits flush in the pill cap and a little
-        // bottom padding keeps the last section off the edge.
-        return ((0, jsx_runtime_1.jsxs)(ActiveGroupSurface, { as: 'div', effect: activeEffect, role: 'group', "aria-label": "".concat(item.label, " ").concat(activeGroupAriaLabelSuffix), className: 'reqore-nav-rail-active', theme: theme, "$gap": sizes_1.GAP_FROM_SIZE[subSize], "$padBottom": 2, "$radiusTop": pill ? Math.round(sizes_1.SIZE_TO_PX[size] / 2) : radius, "$radiusBottom": pill ? Math.round(sizes_1.SIZE_TO_PX[subSize] / 2) : radius, "$ring": (0, polished_1.rgba)(groupColor, 0.42), "$tint": (activeEffect === null || activeEffect === void 0 ? void 0 : activeEffect.gradient) ? undefined : (0, polished_1.rgba)(groupColor, 0.16), "$labelled": labelled, children: [renderItem(item), (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { height: sizes_1.GAP_FROM_SIZE[size], width: "".concat(Math.round(sizes_1.SIZE_TO_PX[subSize] * 0.5), "px"), lineSize: 'tiny', intent: (_b = item.intent) !== null && _b !== void 0 ? _b : activeIntent }), subsShown.map(renderSub), !expandable && subsHidden.length ? ((0, jsx_runtime_1.jsx)(NavRailOverflow, { items: subsHidden.map(function (s) { return ({
-                        id: s.id,
-                        label: s.label,
-                        icon: s.icon,
-                        active: s.id === activeSubItemId,
-                    }); }), size: subSize, placement: tipSide, ariaLabel: moreSectionsLabel, tooltipSuffix: overflowTooltipSuffix, labelled: labelled, onSelect: onSubSelect, onOpenChange: onMenuToggle })) : null] }, item.id));
-    };
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { theme: theme, customTheme: customTheme, children: (0, jsx_runtime_1.jsx)(NavRailSurface, { as: 'nav', ref: railRef, effect: effect, role: 'navigation', className: [
-                className,
-                'reqore-nav-rail',
-                labelled && 'reqore-nav-rail-labelled',
-                isExpanded && 'reqore-nav-rail-expanded',
-            ]
-                .filter(Boolean)
-                .join(' '), style: style, theme: theme, "$gap": sizes_1.GAP_FROM_SIZE[size], "$padding": pad, "$radius": surfaceRadius, "$pill": surfacePill, "$flat": isFlat, "$raised": !!raised, "$transparent": isTransparent, "$opacity": opacity, "$blur": blur, "$bgLightness": 0.02, "$borderLightness": 0.14, "$position": position, "$floating": floating, "$offset": offset, "$revealMode": revealMode, "$shown": shown, "$restOpacity": restOpacity, "$maxHeight": expandedCap, children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, gapSize: size, horizontalAlign: columnAlign, 
-                // Expanded, the column must be allowed to shrink so the scroll
-                // region inside it (not the header / toggle / footer) takes the cut.
-                style: isExpanded ? EXPANDED_GROUP_STYLE : undefined, children: [renderSlot(header), (0, jsx_runtime_1.jsx)(NavRailScroll, { ref: scrollWrapRef, className: 'reqore-nav-rail-scroll', "$fadeFrom": fadeFrom, "$fadeTo": fadeTo, "$fadeSize": sizes_1.SIZE_TO_PX[size], "$fadeRadius": pill ? Math.round(sizes_1.SIZE_TO_PX[size] / 2) + pad : Math.max(0, radius - 1), "$bleed": pad, "$scrollable": isExpanded, "$labelled": labelled, children: (0, jsx_runtime_1.jsx)(NavRailScrollBox, { ref: scrollBoxRef, className: 'reqore-nav-rail-scroll-box', "$scrollable": isExpanded, "$bleed": pad, children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, gapSize: size, horizontalAlign: columnAlign, children: [before.map(renderPrimary), activeAt >= 0 && activeItem ? renderActiveGroup(activeItem) : null, after.map(renderPrimary), !expandable && itemsHidden.length ? ((0, jsx_runtime_1.jsx)(NavRailOverflow, { items: itemsHidden.map(function (i) { return ({ id: i.id, label: i.label, icon: i.icon }); }), size: size, placement: tipSide, ariaLabel: moreItemsLabel, tooltipSuffix: overflowTooltipSuffix, labelled: labelled, onSelect: onItemSelect, onOpenChange: onMenuToggle })) : null] }) }) }), expandable && hiddenWhenCollapsed > 0 ? ((0, jsx_runtime_1.jsx)(NavRailExpandToggle, { expanded: isExpanded, hiddenCount: hiddenWhenCollapsed, size: size, tipSide: tipSide, labelled: labelled, expandLabel: expandLabel, collapseLabel: collapseLabel, tooltipSuffix: overflowTooltipSuffix, onToggle: toggleExpanded })) : null, renderSlot(footer)] }) }) }));
-});
-exports.default = exports.ReqoreNavRail;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
-//# sourceMappingURL=index.cjs.map