@dbcdk/react-components 0.0.18 → 0.0.20

package/dist/components/button/Button.module.css

@@ -1,7 +1,3 @@
-/* ==========================================================================
- * BASE BUTTON
- * ======================================================================= */
-
 .button {
   display: inline-flex;
   align-items: center;
@@ -226,6 +222,14 @@
   border-color: var(--color-border-selected);
 }
 
+.inline.active {
+  color: var(--button-bg-primary);
+}
+
 .active:hover {
   background-color: var(--button-bg-primary-hover);
 }
+
+.inline.active:hover {
+  color: var(--button-bg-primary-hover);
+}

package/dist/components/code-block/CodeBlock.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextWrap } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import styles from './CodeBlock.module.css';
+import { Button } from '../button/Button';
 import { CopyButton } from '../copy-button/CopyButton';
 const looksLikeStackFrame = (line) => {
     const t = line.trim();
@@ -16,24 +19,30 @@ export function CodeBlock({ code, children, copyButton, copyText, size = 'md', s
     var _a;
     const text = typeof code === 'string' ? code : undefined;
     const copy = (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : '';
-    // If children are provided, render them as-is (no line processing).
     const hasChildren = children !== undefined && children !== null;
-    // Smart rendering only when we have plain text + no children.
-    const lines = smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null;
-    return (_jsxs("pre", { className: [styles.container, styles[size], wrap ? styles.wrap : styles.noWrap].join(' '), tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { shape: "round", variant: "inline", text: copy }) })), _jsx("code", { className: styles.code, children: hasChildren
-                    ? children
-                    : lines
-                        ? lines.map((line, i) => {
-                            const isFirst = i === 0;
-                            const isFrame = looksLikeStackFrame(line);
-                            const cls = [
-                                styles.line,
-                                isFirst ? styles.lineFirst : '',
-                                isFrame ? styles.lineFrame : '',
-                            ]
-                                .filter(Boolean)
-                                .join(' ');
-                            return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
-                        })
-                        : text })] }));
+    const [isWrapped, setIsWrapped] = useState(wrap);
+    const lines = useMemo(() => (smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null), [smart, hasChildren, text]);
+    return (_jsxs("div", { className: [
+            styles.wrapper,
+            styles[size],
+            isWrapped ? styles.wrap : styles.noWrap,
+            copyButton ? styles.hasActions : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [copyButton && (_jsxs("span", { className: styles.actions, "aria-hidden": false, children: [_jsx(Button, { type: "button", variant: "inline", size: "sm", shape: "round", onClick: () => setIsWrapped(v => !v), "aria-pressed": isWrapped, active: isWrapped, title: isWrapped ? 'Ombryd ikke tekst' : 'Ombryd tekst', children: _jsx(TextWrap, { size: 16 }) }), _jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })] })), _jsx("pre", { className: styles.container, tabIndex: 0, children: _jsx("code", { className: styles.code, children: hasChildren
+                        ? children
+                        : lines
+                            ? lines.map((line, i) => {
+                                const isFirst = i === 0;
+                                const isFrame = looksLikeStackFrame(line);
+                                const cls = [
+                                    styles.line,
+                                    isFirst ? styles.lineFirst : '',
+                                    isFrame ? styles.lineFrame : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ');
+                                return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
+                            })
+                            : text }) })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,79 +1,80 @@
+.wrapper {
+  position: relative;
+  --code-actions-h: var(--component-size-sm);
+  --code-actions-inset: var(--spacing-xs);
+}
+
+/* <pre> */
 .container {
   position: relative;
   margin-block: 0;
-
-  background: var(--color-bg-contextual-subtle);
-  border: var(--border-width-thin) solid var(--color-border-default);
+  background: var(--color-bg-surface-strong);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xs);
-
   padding: var(--spacing-sm);
-  padding-inline-end: calc(var(--spacing-sm) + 40px);
-
   font-family: var(--font-family-mono);
-  line-height: var(--line-height-relaxed);
-
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  line-height: 1.35;
+  overflow: auto;
   scrollbar-gutter: stable;
-}
 
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
+  display: flex;
+  align-items: center;
 }
 
-.container.sm {
+/* Sizes */
+.sm .container {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
-.container.sm .code {
+.sm .code {
   font-size: var(--font-size-xs);
 }
 
-.container.md .code {
+.md .code {
   font-size: var(--font-size-sm);
 }
 
-.container.lg .code {
+.lg .code {
   font-size: var(--font-size-base);
 }
 
-.code {
-  display: block;
-  margin: 0;
-  font-family: var(--font-family-mono);
-  color: var(--color-fg-default);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: normal; /* <- not break-all */
+.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* Copy button stays overlayed; does not affect layout */
-.copyButton {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--spacing-xs);
-  z-index: 2;
+.sm.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
+}
 
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast) var(--ease-standard);
+.md.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-.container:hover .copyButton,
-.container:focus-within .copyButton {
-  opacity: 1;
-  pointer-events: auto;
+.lg.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* --- New: wrap control --- */
+/* Focus ring */
+.wrapper:focus-within .container {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
+}
+
+/* <code> */
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  color: var(--color-fg-default);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Wrapping modes */
 .wrap .code {
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   word-break: normal;
 }
 
@@ -83,9 +84,31 @@
   word-break: normal;
 }
 
-/* --- New: per-line styling (for smart mode) --- */
+.actions {
+  position: absolute;
+  top: var(--code-actions-inset);
+  right: var(--code-actions-inset);
+  z-index: 3;
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-surface) 70%, transparent);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.wrapper:hover .actions,
+.wrapper:focus-within .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .line {
-  display: inline; /* keep selection/copy behavior natural */
+  display: inline;
 }
 
 .lineFirst {
@@ -94,27 +117,6 @@
   color: var(--color-fg-default);
 }
 
-/* Common stack frames are “noise”; deemphasize without hiding */
 .lineFrame {
   color: var(--color-fg-subtle);
 }
-
-/* Optional: make the container a bit denser for logs */
-.container {
-  /* keep your existing properties ... */
-
-  /* Easy win: stacktraces feel less tall */
-  line-height: 1.35; /* instead of relaxed */
-}
-
-/* Optional: differentiate the code area slightly from surrounding UI */
-.container {
-  background: var(--color-bg-surface-strong); /* a touch more neutral than contextual */
-  border-color: var(--color-border-subtle);
-}
-
-/* Keep focus ring behavior */
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
-}

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX, ReactNode } from 'react';
-type Variant = 'default' | 'primary' | 'outlined' | 'success';
+type Variant = 'default' | 'primary' | 'outlined' | 'success' | 'info';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
     checked?: boolean;

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -66,6 +66,13 @@
   &:not(:hover) {
     border-color: transparent;
   }
+}
+
+.info.checked {
+  background-color: var(--color-status-info);
+  &:not(:hover) {
+    border-color: transparent;
+  }
 
   .icon {
     color: var(--color-fg-on-brand);

package/dist/components/overlay/modal/Modal.d.ts

@@ -19,5 +19,6 @@ export type ModalProps = {
     severity?: Severity;
     disableContentSpacing?: boolean;
     dataCy?: string;
+    width?: number | string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -5,7 +5,7 @@ import { useEffect, useId, useRef } from 'react';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './Modal.module.css';
-export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
     const titleId = useId();
     const dialogRef = useRef(null);
     const lastActiveElementRef = useRef(null);
@@ -30,7 +30,6 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
                 const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
                 const focusable = dialog.querySelectorAll(focusableSelectors);
                 if (focusable.length > 0) {
-                    // Prefer focusing the first input/select/textarea if present
                     const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
                     preferred.focus();
                 }
@@ -68,13 +67,11 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
         document.addEventListener('keydown', handleKeyDown);
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
-            // Restore focus only when closing (true -> false) happens elsewhere
-            // so we do it when modal unmounts while open.
             if (lastActiveElementRef.current) {
                 lastActiveElementRef.current.focus();
             }
         };
-    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    }, [isOpen]);
     if (!isOpen)
         return null;
     const handleOverlayClick = () => {
@@ -88,5 +85,8 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
-    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+    const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
+                ? { ['--modal-width']: resolvedWidth }
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
 }

package/dist/components/overlay/modal/Modal.module.css

@@ -2,62 +2,87 @@
   position: fixed;
   inset: 0;
   background: var(--overlay-scrim);
+
   display: flex;
-  align-items: flex-start;
   justify-content: center;
-  padding-top: clamp(var(--spacing-md), 12vh, 24vh);
-  padding-bottom: var(--spacing-md);
+
+  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
   z-index: var(--z-backdrop-modal);
+
+  /* Overlay can scroll if modal is taller than viewport */
   overflow-y: auto;
 }
 
+/* Default width can be overridden by --modal-width from props */
 .modal {
+  --modal-width: 700px;
+
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
-  min-width: 320px;
-  max-width: 700px;
-  max-height: calc(100vh - (2 * var(--spacing-md)));
-  display: flex;
-  flex-direction: column;
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
-  min-width: 500px;
-  z-index: var(--z-modal);
   color: var(--color-fg-default);
-}
+  z-index: var(--z-modal);
+
+  /* Responsive width: never exceed viewport */
+  width: min(
+    var(--modal-width),
+    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
+  );
+  min-width: 320px;
+
+  /* Critical: prevent “below bottom of screen”
+     Prefer svh on mobile; fallback to vh. */
+  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+
+  display: flex;
+  flex-direction: column;
 
-/* Slightly more relaxed on small screens */
-@media (max-width: var(--bp-sm)) {
-  .modal {
-    width: calc(100% - 2 * var(--spacing-md));
-    max-width: 100%;
-  }
+  /* If you want it slightly lower than top padding, keep it aligned start */
+  align-self: flex-start;
+
+  /* Helps on iOS when address bar changes */
+  overscroll-behavior: contain;
 }
 
+/* Header/footer pinned; body scrolls */
 .header {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding: var(--spacing-md);
   padding-bottom: 0;
+
+  /* Keeps header readable if body scrolls underneath */
+  flex: 0 0 auto;
 }
 
 .body {
-  overflow-y: auto;
+  flex: 1 1 auto;
+  overflow: auto;
+
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   color: var(--color-fg-muted);
+
   padding: var(--spacing-md);
+  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
 }
 
 .footer {
+  flex: 0 0 auto;
+
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-xs);
-  padding-top: 0;
+
   padding: var(--spacing-md);
+  padding-top: 0;
 }
 
 .icon {
@@ -65,3 +90,11 @@
   align-items: center;
   justify-content: center;
 }
+
+.contentSpacing .body > :first-child {
+  margin-top: 0;
+}
+
+.contentSpacing .body > :last-child {
+  margin-bottom: 0;
+}

package/dist/components/sidebar/providers/SidebarProvider.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
 import * as React from 'react';
-import { NavBarItem } from '../../../components/nav-bar/NavBar';
+import type { NavBarItem } from '../../../components/nav-bar/NavBar';
 export type SidebarContextValue = {
     defaultExpanded: boolean | null;
     expandedItems: Set<string>;

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -2,24 +2,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
+/**
+ * Production notes:
+ * - No console logging.
+ * - Auto-expands the correct expandable chain for the active link (including when the active link
+ *   points to the expandable parent itself).
+ * - Normalizes hrefs (trailing slashes) so comparisons are stable.
+ */
 const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
 const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
-const findParentItem = (navItem, items, prevPath = '') => {
-    for (const currentItem of items) {
-        // Groups don't contribute to the href path; they just wrap children
-        const nextPath = hasHref(currentItem) ? `${prevPath}.${currentItem.href}` : prevPath;
-        if (hasChildren(currentItem)) {
-            // Direct child match
-            if (currentItem.children.some(child => hasHref(child) && child.href === navItem)) {
-                return nextPath;
+const normalizeHref = (href) => {
+    if (!href)
+        return href;
+    // strip trailing slashes except root
+    return href.length > 1 ? href.replace(/\/+$/, '') : href;
+};
+/**
+ * Returns the chain of "expandable parents" (hrefs) that contain `targetHref`.
+ *
+ * Behavior:
+ * - If targetHref matches an expandable parent item itself, the chain includes it.
+ * - If targetHref matches a leaf under expandables, the chain includes expandable ancestors.
+ *
+ * Expandable parent definition:
+ * - any node with children AND an href
+ * (If you want to restrict this to a specific type, update isExpandableParent.)
+ */
+const findExpandableParentChain = (targetHref, items) => {
+    var _a;
+    const target = normalizeHref(targetHref);
+    const dfs = (nodes, parentExpandables) => {
+        for (const node of nodes) {
+            const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
+            const isExpandableParent = hasChildren(node) && hasHref(node);
+            const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
+            // Match this node
+            if (nodeHref === target) {
+                return isExpandableParent ? nextParents : parentExpandables;
+            }
+            // Recurse into children
+            if (hasChildren(node)) {
+                const found = dfs(node.children, nextParents);
+                if (found)
+                    return found;
             }
-            // Recurse
-            const path = findParentItem(navItem, currentItem.children, nextPath);
-            if (path)
-                return path;
         }
-    }
-    return '';
+        return null;
+    };
+    return (_a = dfs(items, [])) !== null && _a !== void 0 ? _a : [];
 };
 const SidebarContext = createContext({
     defaultExpanded: null,
@@ -46,10 +76,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     const [activeQuery, setActiveQuery] = useState('');
     const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
     const [activeHref, setActiveHref] = useState('');
-    // expandedItems is now the single source of truth for "open groups"
-    // (it includes both auto-expanded parents and user-expanded groups)
+    // expandedItems is the source of truth for "open groups"
     const [expandedItems, setExpandedItems] = useState(new Set());
-    // Track items in a ref to avoid effect loops if parent recreates the items array every render
+    // Keep latest items without creating effect loops if parent recreates the array
     const itemsRef = useRef(items);
     useEffect(() => {
         itemsRef.current = items;
@@ -60,40 +89,41 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);
     const expandItem = useCallback((href) => {
+        const h = normalizeHref(href);
         setExpandedItems(prev => {
-            if (prev.has(href))
+            if (prev.has(h))
                 return prev;
             const next = new Set(prev);
-            next.add(href);
+            next.add(h);
             return next;
         });
     }, []);
     const collapseItem = useCallback((href) => {
+        const h = normalizeHref(href);
         setExpandedItems(prev => {
-            if (!prev.has(href))
+            if (!prev.has(h))
                 return prev;
             const next = new Set(prev);
-            next.delete(href);
+            next.delete(h);
             return next;
         });
     }, []);
-    const isExpanded = useCallback((href) => expandedItems.has(href), [expandedItems]);
-    // Auto-expand: when active link changes, ensure its parent chain is expanded.
-    // IMPORTANT: guard so we only set state when we actually add something.
+    const isExpanded = useCallback((href) => expandedItems.has(normalizeHref(href)), [expandedItems]);
+    // Auto-expand: when active link changes, ensure its expandable parent chain is expanded.
     useEffect(() => {
         if (!activeHref)
             return;
         const currentItems = itemsRef.current;
-        const path = findParentItem(activeHref, currentItems);
-        const parents = path.split('.').filter(Boolean);
+        const parents = findExpandableParentChain(activeHref, currentItems);
         if (parents.length === 0)
             return;
         setExpandedItems(prev => {
             let changed = false;
             const next = new Set(prev);
             for (const p of parents) {
-                if (!next.has(p)) {
-                    next.add(p);
+                const norm = normalizeHref(p);
+                if (!next.has(norm)) {
+                    next.add(norm);
                     changed = true;
                 }
             }
@@ -110,8 +140,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             })
             : items;
     }, [items, activeQuery]);
-    // Searching should expand all, but do not fight the user forever.
-    // We just set defaultExpanded=true, and individual components can honor it.
+    // Searching should expand all.
     useEffect(() => {
         if (activeQuery)
             triggerExpandAll();
@@ -128,7 +157,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
                 window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value));
             }
             catch {
-                console.error('Failed to persist sidebar collapsed state');
+                // ignore persist failures
             }
             return;
         }
@@ -141,9 +170,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             }
         }
         catch {
-            console.error('Failed to parse sidebar collapsed state from storage');
+            // ignore parse failures
         }
-        // Nothing stored → responsive default (but we do NOT persist this automatic choice)
+        // Nothing stored -> responsive default (do NOT persist automatic choice)
         setSidebarCollapsed(currentBreakpoint === 'small');
     }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
     const persistCollapsed = useCallback((collapsed) => {
@@ -153,7 +182,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
         }
         catch {
-            console.error('Failed to persist sidebar collapsed state');
+            // ignore persist failures
         }
     }, []);
     // Only persist user-triggered changes
@@ -163,7 +192,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     }, [persistCollapsed]);
     // Resize behavior:
     // - only apply auto-collapse when breakpoint changes
-    // - do NOT persist the automatic change (only user actions persist)
+    // - do NOT persist automatic changes (only user actions persist)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;