@dbcdk/react-components 0.0.67 → 0.0.68

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+export interface JsonViewerProps {
+    value: unknown;
+    defaultExpandedDepth?: number;
+    expandAll?: boolean;
+    helperText?: string;
+    searchPlaceholder?: string;
+    emptySearchText?: string;
+    className?: string;
+}
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, helperText, searchPlaceholder, emptySearchText, className, }: JsonViewerProps): JSX.Element;

package/dist/components/json-viewer/JsonViewer.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronRight, Copy, Search, X } from 'lucide-react';
+import { Fragment, useEffect, useId, useMemo, useState } from 'react';
+import styles from './JsonViewer.module.css';
+function isJsonArray(value) {
+    return Array.isArray(value);
+}
+function isJsonObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function getValueType(value) {
+    if (value === null)
+        return 'null';
+    if (Array.isArray(value))
+        return 'array';
+    if (typeof value === 'object')
+        return 'object';
+    if (typeof value === 'string')
+        return 'string';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    return 'string';
+}
+function formatPrimitive(value) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    return String(value);
+}
+function getPrimitiveRawValue(value) {
+    if (value === null)
+        return 'null';
+    return String(value);
+}
+function getSummary(value) {
+    if (isJsonArray(value)) {
+        return `${value.length} element${value.length === 1 ? '' : 'er'}`;
+    }
+    if (!isJsonObject(value))
+        return '0 felter';
+    const count = Object.keys(value).length;
+    return `${count} felt${count === 1 ? '' : 'er'}`;
+}
+function getNodeId(path) {
+    return path.length === 0 ? '$' : `$.${path.join('.')}`;
+}
+function getPathLabel(path) {
+    return getNodeId(path);
+}
+function normalizeSearch(value) {
+    return value.trim().toLowerCase();
+}
+function valueToSearchString(value) {
+    return value === null ? 'null' : String(value).toLowerCase();
+}
+function collectSearchMatches(value, query, path = [], key) {
+    const matches = new Map();
+    const visit = (current, currentPath, currentKey) => {
+        const nodeId = getNodeId(currentPath);
+        const pathLabel = getPathLabel(currentPath).toLowerCase();
+        const keyLabel = (currentKey !== null && currentKey !== void 0 ? currentKey : '').toLowerCase();
+        let self = keyLabel.includes(query) || pathLabel.includes(query);
+        let descendant = false;
+        if (isJsonArray(current)) {
+            current.forEach((item, index) => {
+                const childMatches = visit(item, [...currentPath, String(index)], String(index));
+                descendant = descendant || childMatches;
+            });
+        }
+        else if (isJsonObject(current)) {
+            Object.entries(current).forEach(([childKey, childValue]) => {
+                const childMatches = visit(childValue, [...currentPath, childKey], childKey);
+                descendant = descendant || childMatches;
+            });
+        }
+        else {
+            self = self || valueToSearchString(current).includes(query);
+        }
+        const any = self || descendant;
+        if (any) {
+            matches.set(nodeId, { self, descendant });
+        }
+        return any;
+    };
+    visit(value, path, key);
+    return matches;
+}
+function getHighlightedSegments(text, query) {
+    if (!query)
+        return [{ text, matched: false }];
+    const lower = text.toLowerCase();
+    const segments = [];
+    let start = 0;
+    while (start < text.length) {
+        const index = lower.indexOf(query, start);
+        if (index === -1) {
+            segments.push({ text: text.slice(start), matched: false });
+            break;
+        }
+        if (index > start) {
+            segments.push({ text: text.slice(start, index), matched: false });
+        }
+        segments.push({ text: text.slice(index, index + query.length), matched: true });
+        start = index + query.length;
+    }
+    return segments.length > 0 ? segments : [{ text, matched: false }];
+}
+function HighlightText({ text, query }) {
+    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: styles.highlight, children: segment.text }, `${segment.text}-${index}`)) : (_jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)));
+}
+function useClipboardStatus() {
+    const [copiedId, setCopiedId] = useState(null);
+    useEffect(() => {
+        if (!copiedId)
+            return;
+        const timer = window.setTimeout(() => setCopiedId(null), 1400);
+        return () => window.clearTimeout(timer);
+    }, [copiedId]);
+    return { copiedId, setCopiedId };
+}
+function isJsonValue(value) {
+    if (value === null)
+        return true;
+    if (Array.isArray(value))
+        return value.every(isJsonValue);
+    if (typeof value === 'object') {
+        return Object.values(value).every(isJsonValue);
+    }
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+}
+export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, }) {
+    const [query, setQuery] = useState('');
+    const [globalExpandMode, setGlobalExpandMode] = useState(expandAll ? 'expanded' : 'default');
+    const normalizedQuery = normalizeSearch(query);
+    const inputId = useId();
+    const { copiedId, setCopiedId } = useClipboardStatus();
+    const safeValue = useMemo(() => {
+        if (isJsonValue(value))
+            return value;
+        return {
+            unsupported: {
+                besked: 'Den angivne værdi kan ikke vises som JSON',
+                modtagetType: typeof value,
+            },
+        };
+    }, [value]);
+    const matches = useMemo(() => (normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : new Map()), [normalizedQuery, safeValue]);
+    const hasResults = normalizedQuery ? matches.size > 0 : true;
+    const handleCopy = async (nodeId, rawValue) => {
+        try {
+            await navigator.clipboard.writeText(rawValue);
+            setCopiedId(nodeId);
+        }
+        catch {
+            setCopiedId(null);
+        }
+    };
+    return (_jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarTop, children: [_jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [_jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }), _jsx("input", { id: inputId, type: "search", value: query, onChange: event => setQuery(event.target.value), placeholder: searchPlaceholder, className: styles.searchInput }), query ? (_jsx("button", { type: "button", className: styles.clearButton, "aria-label": "Ryd s\u00F8gning", onClick: () => setQuery(''), children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('expanded'), disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('collapsed'), disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
+                                    ? `${matches.size} matchende node${matches.size === 1 ? '' : 'r'}`
+                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
+}
+function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, globalExpandMode, copiedId, onCopy, }) {
+    const nodeId = getNodeId(path);
+    const nodeType = getValueType(value);
+    const match = matches.get(nodeId);
+    const shouldRender = query ? Boolean(match) : true;
+    const forceOpen = query ? Boolean(match === null || match === void 0 ? void 0 : match.descendant) : false;
+    const [isExpanded, setIsExpanded] = useState(() => depth < defaultExpandedDepth);
+    if (!shouldRender)
+        return null;
+    if (nodeType !== 'array' && nodeType !== 'object') {
+        const primitive = value;
+        const valueLabel = formatPrimitive(primitive);
+        const rawValue = getPrimitiveRawValue(primitive);
+        const copied = copiedId === nodeId;
+        return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.valueButton, onClick: () => onCopy(nodeId, rawValue), title: copied ? 'Kopieret' : 'Kopiér værdi', children: [_jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(' '), children: _jsx(HighlightText, { text: valueLabel, query: query }) })] }), _jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), _jsx("span", { children: copied ? 'Kopieret' : 'Kopiér' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null] }));
+    }
+    const entries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : isJsonObject(value)
+            ? Object.entries(value)
+            : [];
+    const summary = getSummary(value);
+    const expanded = query || forceOpen
+        ? true
+        : globalExpandMode === 'expanded'
+            ? true
+            : globalExpandMode === 'collapsed'
+                ? false
+                : isExpanded;
+    return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.toggle, onClick: () => setIsExpanded(current => !current), "aria-expanded": expanded, children: [expanded ? _jsx(ChevronDown, { "aria-hidden": "true" }) : _jsx(ChevronRight, { "aria-hidden": "true" }), _jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? '[' : '{' }), _jsx("span", { className: styles.summary, children: _jsx(HighlightText, { text: summary, query: query }) }), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? ']' : '}' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null, expanded ? (_jsx("div", { className: styles.children, role: depth === 0 ? 'group' : undefined, children: entries.map(([childKey, childValue]) => (_jsx(JsonNode, { keyName: isJsonArray(value) ? `[${childKey}]` : childKey, path: [...path, childKey], value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, query: query, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
+}
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}

package/dist/components/json-viewer/JsonViewer.module.css

@@ -0,0 +1,359 @@
+.viewer {
+  --json-pane-bg:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-bg-inverse) 96%, white 4%),
+      color-mix(in oklab, var(--color-bg-inverse) 92%, black 8%)
+    );
+  --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 14%, transparent);
+  --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 24%, transparent);
+  --json-pane-text: var(--color-fg-inverse);
+  --json-pane-muted: color-mix(in oklab, var(--color-fg-inverse) 64%, transparent);
+  --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
+  --json-pane-hover: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
+  --json-pane-selected: color-mix(in oklab, var(--color-brand) 24%, transparent);
+  --json-pane-highlight: color-mix(in oklab, var(--color-brand) 68%, var(--dbc-blue-300) 32%);
+  --json-pane-key: color-mix(in oklab, var(--color-fg-inverse) 88%, var(--dbc-blue-300) 12%);
+  --json-pane-string: color-mix(in oklab, var(--dbc-green-300) 78%, white 22%);
+  --json-pane-number: color-mix(in oklab, var(--dbc-amber-400) 76%, white 24%);
+  --json-pane-boolean: color-mix(in oklab, var(--dbc-pink-500) 74%, white 26%);
+  --json-pane-null: color-mix(in oklab, var(--color-fg-inverse) 54%, transparent);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  background: var(--json-pane-bg);
+  color: var(--json-pane-text);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-sm);
+  font-family: var(--font-family-mono);
+}
+
+.toolbar {
+  display: grid;
+  gap: var(--spacing-xs);
+}
+
+.toolbarTop {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.searchField {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: var(--component-size-md);
+  padding-inline: var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-inverse) 85%, var(--color-bg-surface) 15%);
+}
+
+.searchField:focus-within {
+  border-color: var(--json-pane-border-strong);
+  box-shadow: var(--focus-ring);
+}
+
+.searchIcon,
+.clearButton svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: var(--json-pane-subtle);
+}
+
+.searchInput {
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--component-size-md);
+  background: transparent;
+  border: 0;
+  color: var(--json-pane-text);
+  font: inherit;
+  outline: none;
+}
+
+.searchInput::placeholder {
+  color: var(--json-pane-subtle);
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--component-size-xs);
+  block-size: var(--component-size-xs);
+  border: 0;
+  border-radius: var(--border-radius-round);
+  background: transparent;
+  cursor: pointer;
+}
+
+.clearButton:hover {
+  background: var(--json-pane-hover);
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  font-size: var(--font-size-xs);
+  color: var(--json-pane-muted);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.toolbarButton {
+  min-block-size: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-md);
+  background: color-mix(in oklab, var(--color-bg-inverse) 82%, var(--color-bg-surface) 18%);
+  color: var(--json-pane-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.toolbarButton:hover:not(:disabled) {
+  background: var(--json-pane-hover);
+}
+
+.toolbarButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toolbarButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.helperText,
+.statusText {
+  min-inline-size: 0;
+}
+
+.treePane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  border: var(--border-width-thin) solid var(--json-pane-border);
+  border-radius: var(--border-radius-lg);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-bg-inverse) 89%, white 11%),
+      color-mix(in oklab, var(--color-bg-inverse) 94%, black 6%)
+    );
+  padding: var(--spacing-sm);
+  overflow: auto;
+}
+
+.node {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.row,
+.pathHint {
+  padding-left: calc(var(--json-indent) * var(--spacing-md));
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  min-inline-size: 0;
+  border-radius: var(--border-radius-md);
+}
+
+.row[data-match='true'] {
+  background: linear-gradient(90deg, var(--json-pane-selected), transparent 70%);
+}
+
+.toggle,
+.valueButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-inline-size: 0;
+  inline-size: 100%;
+  padding-block: 6px;
+  padding-inline: var(--spacing-xs);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-md);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.toggle {
+  justify-content: flex-start;
+}
+
+.valueButton {
+  justify-content: flex-start;
+}
+
+.toggle:hover,
+.valueButton:hover {
+  background: var(--json-pane-hover);
+}
+
+.toggle:focus-visible,
+.valueButton:focus-visible,
+.clearButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toggle svg,
+.copyState svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  flex: 0 0 auto;
+}
+
+.rowLabel {
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  gap: 6px;
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.keyChunk {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.rootLabel,
+.key {
+  color: var(--json-pane-key);
+  font-weight: var(--font-weight-medium);
+}
+
+.punctuation,
+.bracket {
+  color: var(--json-pane-subtle);
+}
+
+.summary,
+.pathHint {
+  color: var(--json-pane-muted);
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  position: relative;
+}
+
+.children::before {
+  content: '';
+  position: absolute;
+  left: calc(var(--spacing-md) - 2px);
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in oklab, var(--color-fg-inverse) 10%, transparent);
+  pointer-events: none;
+}
+
+.value {
+  min-inline-size: 0;
+  flex: 0 1 auto;
+  word-break: break-word;
+}
+
+.valueString {
+  color: var(--json-pane-string);
+}
+
+.valueNumber {
+  color: var(--json-pane-number);
+}
+
+.valueBoolean {
+  color: var(--json-pane-boolean);
+}
+
+.valueNull {
+  color: var(--json-pane-null);
+}
+
+.copyState {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  margin-left: auto;
+  color: var(--json-pane-subtle);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateX(4px);
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    transform var(--transition-fast) var(--ease-standard);
+}
+
+.valueButton:hover .copyState,
+.valueButton:focus-visible .copyState,
+.valueButton:focus-within .copyState {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.valueButton[title='Kopieret'] .copyState {
+  opacity: 1;
+  transform: translateX(0);
+  color: color-mix(in oklab, var(--dbc-green-300) 78%, white 22%);
+}
+
+.highlight {
+  color: var(--color-fg-inverse);
+  background: color-mix(in oklab, var(--json-pane-highlight) 78%, transparent);
+  border-radius: var(--border-radius-sm);
+  padding-inline: 0.1em;
+}
+
+.emptyState {
+  padding: var(--spacing-md);
+  color: var(--json-pane-muted);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .toolbarTop {
+    grid-template-columns: 1fr;
+  }
+
+  .actions {
+    flex-wrap: wrap;
+  }
+
+  .metaRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .copyState span {
+    display: none;
+  }
+}

package/dist/components/menu/Menu.d.ts

@@ -11,6 +11,9 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     gap?: boolean;
 }
 export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
+export interface MenuHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
@@ -46,4 +49,5 @@ export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.Ref
     CheckItem: React.ForwardRefExoticComponent<MenuCheckItemProps & React.RefAttributes<HTMLLIElement>>;
     RadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLLIElement>>;
     Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+    Header: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLLIElement>>;
 };

package/dist/components/menu/Menu.js

@@ -137,9 +137,12 @@ const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label,
 MenuRadioItem.displayName = 'Menu.RadioItem';
 const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
 MenuSeparator.displayName = 'Menu.Separator';
+const MenuHeader = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("li", { ref: ref, role: "presentation", "aria-hidden": "true", className: [styles.header, className].filter(Boolean).join(' '), ...props, children: children })));
+MenuHeader.displayName = 'Menu.Header';
 export const Menu = Object.assign(MenuBase, {
     Item: MenuItem,
     CheckItem: MenuCheckItem,
     RadioItem: MenuRadioItem,
     Separator: MenuSeparator,
+    Header: MenuHeader,
 });

package/dist/components/menu/Menu.module.css

@@ -174,6 +174,19 @@
   border-radius: 999px;
 }
 
+.header {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: default;
+  user-select: none;
+}
+
 /* Gap between items */
 .gap {
   gap: var(--spacing-xs);

package/dist/components/page-layout/PageLayout.module.css

@@ -43,6 +43,18 @@
   -webkit-overflow-scrolling: touch;
 }
 
+/* In document-scrolling vertical layouts, keep the sidebar pinned to the viewport
+   and let it manage its own scroll independently of body scrolling. */
+.documentScrolling.vertical .sidebar {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  block-size: 100vh;
+  block-size: 100dvh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* In horizontal orientation, sidebar becomes a top block if used */
 .horizontal .sidebar {
   grid-column: 1 / -1;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -41,9 +41,10 @@ function removeStoredWidth(key) {
 }
 export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    const initialStoredWidth = typeof window !== 'undefined' && storageKey ? readStoredWidth(storageKey) : null;
-    const [sidebarWidth, setSidebarWidth] = useState(() => initialStoredWidth !== null && initialStoredWidth !== void 0 ? initialStoredWidth : defaultWidth);
-    const [manualWidth, setManualWidth] = useState(() => initialStoredWidth);
+    // Always start from defaultWidth so server and client render identical HTML.
+    // localStorage is read in a useEffect after hydration to avoid SSR mismatch.
+    const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+    const [manualWidth, setManualWidth] = useState(null);
     const [isResizing, setIsResizing] = useState(false);
     const [ariaMaxWidth, setAriaMaxWidth] = useState(undefined);
     const containerRef = useRef(null);
@@ -61,6 +62,16 @@ export function SidebarContainer({ logo, productLogo, activeLink, version, hideS
             : Infinity;
         return Math.max(minWidth, viewportWidth - minWidth);
     }, [minWidth]);
+    // Read stored width after hydration — never during render to avoid SSR mismatch.
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        const stored = readStoredWidth(storageKey);
+        if (stored === null)
+            return;
+        setManualWidth(stored);
+        setSidebarWidth(stored);
+    }, [storageKey]);
     useEffect(() => {
         if (!storageKey)
             return;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export * from './components/split-pane/SplitPane';
 export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
+export * from './components/json-viewer/JsonViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/dist/index.js

@@ -46,6 +46,7 @@ export * from './components/split-pane/SplitPane';
 export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
+export * from './components/json-viewer/JsonViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -57,7 +57,7 @@
     "version-packages": "changeset version",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "pack:local": "rimraf ./*.tgz && npm run build && npm pack",
-    "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts"
+    "postbuild": "node scripts/postbuild.mjs"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",