@dbcdk/react-components 0.0.80 → 0.0.82

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare function HighlightedText({ text, query }: {
+    text: string;
+    query: string;
+}): ReactNode;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { getHighlightedSegments } from '../../utils/text/get-highlighted-segments';
+export function HighlightedText({ text, query }) {
+    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`)) : (_jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)));
+}

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

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { JsonNodeProps } from './types';
+export declare function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, copiedId, onCopy, }: JsonNodeProps): JSX.Element | null;

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

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronRight, Copy } from 'lucide-react';
+import { capitalize, formatPrimitive, getNodeId, getPathLabel, getPrimitiveRawValue, getSummary, getValueType, isJsonArray, isJsonObject, } from './utils';
+import { HighlightedText } from './HighlightedText';
+import styles from './JsonViewer.module.css';
+export function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, 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;
+    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(HighlightedText, { 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(HighlightedText, { 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(HighlightedText, { 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 : expandedNodeIds.has(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.toggle, onClick: () => onToggleNode(nodeId), "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(HighlightedText, { 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(HighlightedText, { 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(HighlightedText, { 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, expandedNodeIds: expandedNodeIds, onToggleNode: onToggleNode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
+}

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

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

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

@@ -1,145 +1,12 @@
 '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 { getHighlightedSegments } from '../../utils/text/get-highlighted-segments';
+import { Search, X } from 'lucide-react';
+import { useEffect, useId, useMemo, useState } from 'react';
+import { JsonNode } from './JsonNode';
 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 HighlightText({ text, query }) {
-    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: "dbc-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';
-}
-function collectExpandableNodeIds(value, path = []) {
-    if (!isJsonArray(value) && !isJsonObject(value))
-        return [];
-    const nodeId = getNodeId(path);
-    const childEntries = isJsonArray(value)
-        ? value.map((item, index) => [String(index), item])
-        : Object.entries(value);
-    return [
-        nodeId,
-        ...childEntries.flatMap(([childKey, childValue]) => collectExpandableNodeIds(childValue, [...path, childKey])),
-    ];
-}
-function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll, depth = 0, path = []) {
-    if (!isJsonArray(value) && !isJsonObject(value))
-        return [];
-    const nodeId = getNodeId(path);
-    const childEntries = isJsonArray(value)
-        ? value.map((item, index) => [String(index), item])
-        : Object.entries(value);
-    const includeNode = expandAll || depth < defaultExpandedDepth;
-    const nested = childEntries.flatMap(([childKey, childValue]) => collectInitiallyExpandedNodeIds(childValue, defaultExpandedDepth, expandAll, depth + 1, [
-        ...path,
-        childKey,
-    ]));
-    return includeNode ? [nodeId, ...nested] : nested;
-}
-export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 180, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, maxHeight, }) {
+import { useClipboardStatus } from './useClipboardStatus';
+import { collectExpandableNodeIds, collectInitiallyExpandedNodeIds, collectSearchMatches, isJsonValue, normalizeSearch, } from './utils';
+export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 800, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, maxHeight, }) {
     const [queryInput, setQueryInput] = useState('');
     const [query, setQuery] = useState('');
     const normalizedQuery = normalizeSearch(query);
@@ -199,30 +66,3 @@ export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false,
                     ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
                     : undefined, children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: handleToggleNode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
 }
-function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, 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;
-    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 : expandedNodeIds.has(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.toggle, onClick: () => onToggleNode(nodeId), "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, expandedNodeIds: expandedNodeIds, onToggleNode: onToggleNode, 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

@@ -7,13 +7,13 @@
   --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-highlight: color-mix(in oklab, var(--color-brand) 68%, var(--color-syntax-accent) 32%);
   --color-highlight-bg: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
   --color-highlight-fg: var(--color-fg-inverse);
-  --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-key: color-mix(in oklab, var(--color-fg-inverse) 88%, var(--color-syntax-accent) 12%);
+  --json-pane-string: color-mix(in oklab, var(--color-syntax-string) 78%, white 22%);
+  --json-pane-number: color-mix(in oklab, var(--color-syntax-number) 76%, white 24%);
+  --json-pane-boolean: color-mix(in oklab, var(--color-syntax-boolean) 74%, white 26%);
   --json-pane-null: color-mix(in oklab, var(--color-fg-inverse) 54%, transparent);
 
   display: flex;
@@ -313,7 +313,7 @@
 .valueButton[title='Kopieret'] .copyState {
   opacity: 1;
   transform: translateX(0);
-  color: color-mix(in oklab, var(--dbc-green-300) 78%, white 22%);
+  color: color-mix(in oklab, var(--color-syntax-string) 78%, white 22%);
 }
 
 .emptyState {

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

@@ -0,0 +1,33 @@
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type PrimitiveKind = 'string' | 'number' | 'boolean' | 'null';
+export type SearchMatch = {
+    self: boolean;
+    descendant: boolean;
+};
+export interface JsonViewerProps {
+    value: unknown;
+    defaultExpandedDepth?: number;
+    expandAll?: boolean;
+    searchDebounceMs?: number;
+    helperText?: string;
+    searchPlaceholder?: string;
+    emptySearchText?: string;
+    className?: string;
+    maxHeight?: number | string;
+}
+export type JsonNodeProps = {
+    keyName?: string;
+    path: string[];
+    value: JsonValue;
+    depth: number;
+    defaultExpandedDepth: number;
+    query: string;
+    matches: Map<string, SearchMatch>;
+    expandedNodeIds: Set<string>;
+    onToggleNode: (nodeId: string) => void;
+    copiedId: string | null;
+    onCopy: (nodeId: string, rawValue: string) => void;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export declare function useClipboardStatus(): {
+    copiedId: string | null;
+    setCopiedId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};

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

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export 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 };
+}

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

@@ -0,0 +1,17 @@
+import type { JsonValue, JsonPrimitive, PrimitiveKind, SearchMatch } from './types';
+export declare function isJsonArray(value: JsonValue): value is JsonValue[];
+export declare function isJsonObject(value: JsonValue): value is {
+    [key: string]: JsonValue;
+};
+export declare function isJsonValue(value: unknown): value is JsonValue;
+export declare function getValueType(value: unknown): PrimitiveKind | 'array' | 'object';
+export declare function formatPrimitive(value: JsonPrimitive): string;
+export declare function getPrimitiveRawValue(value: JsonPrimitive): string;
+export declare function getSummary(value: JsonValue): string;
+export declare function getNodeId(path: string[]): string;
+export declare function getPathLabel(path: string[]): string;
+export declare function normalizeSearch(value: string): string;
+export declare function capitalize(value: string): string;
+export declare function collectSearchMatches(value: JsonValue, query: string, path?: string[], key?: string): Map<string, SearchMatch>;
+export declare function collectExpandableNodeIds(value: JsonValue, path?: string[]): string[];
+export declare function collectInitiallyExpandedNodeIds(value: JsonValue, defaultExpandedDepth: number, expandAll: boolean, depth?: number, path?: string[]): string[];

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

@@ -0,0 +1,125 @@
+export function isJsonArray(value) {
+    return Array.isArray(value);
+}
+export function isJsonObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+export 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 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';
+}
+export function formatPrimitive(value) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    return String(value);
+}
+export function getPrimitiveRawValue(value) {
+    if (value === null)
+        return 'null';
+    return String(value);
+}
+export 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'}`;
+}
+export function getNodeId(path) {
+    return path.length === 0 ? '$' : `$.${path.join('.')}`;
+}
+export function getPathLabel(path) {
+    return getNodeId(path);
+}
+export function normalizeSearch(value) {
+    return value.trim().toLowerCase();
+}
+export function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function valueToSearchString(value) {
+    return value === null ? 'null' : String(value).toLowerCase();
+}
+export 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;
+}
+export function collectExpandableNodeIds(value, path = []) {
+    if (!isJsonArray(value) && !isJsonObject(value))
+        return [];
+    const nodeId = getNodeId(path);
+    const childEntries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : Object.entries(value);
+    return [
+        nodeId,
+        ...childEntries.flatMap(([childKey, childValue]) => collectExpandableNodeIds(childValue, [...path, childKey])),
+    ];
+}
+export function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll, depth = 0, path = []) {
+    if (!isJsonArray(value) && !isJsonObject(value))
+        return [];
+    const nodeId = getNodeId(path);
+    const childEntries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : Object.entries(value);
+    const includeNode = expandAll || depth < defaultExpandedDepth;
+    const nested = childEntries.flatMap(([childKey, childValue]) => collectInitiallyExpandedNodeIds(childValue, defaultExpandedDepth, expandAll, depth + 1, [
+        ...path,
+        childKey,
+    ]));
+    return includeNode ? [nodeId, ...nested] : nested;
+}

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

@@ -2,13 +2,6 @@
 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 normalizeHref = (href) => {
@@ -86,24 +79,23 @@ export function SidebarProvider({ children, items, initialQuery, initialCollapse
     useEffect(() => {
         itemsRef.current = items;
     }, [items]);
-    const [isSidebarCollapsed, setSidebarCollapsed] = useState(() => {
-        if (typeof window === 'undefined')
-            return initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false;
-        if (initialSidebarCollapsed !== undefined) {
-            return initialSidebarCollapsed;
-        }
+    const [isSidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false);
+    // Runs once after hydration — safe to read localStorage and window.innerWidth here.
+    useEffect(() => {
+        if (initialSidebarCollapsed !== undefined)
+            return;
         try {
             const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
             if (stored !== null) {
-                const parsed = JSON.parse(stored);
-                return Boolean(parsed);
+                setSidebarCollapsed(Boolean(JSON.parse(stored))); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR-safe initial read
+                return;
             }
         }
         catch {
             // ignore parse failures
         }
-        return getBreakpoint(window.innerWidth) === 'small';
-    });
+        setSidebarCollapsed(getBreakpoint(window.innerWidth) === 'small');
+    }, []); // intentionally empty — only runs once after first mount
     const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);

package/dist/styles/styles.css

@@ -26,11 +26,6 @@
   box-sizing: border-box;
 }
 
-html,
-body {
-  scrollbar-gutter: stable both-edges;
-}
-
 body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);

package/dist/styles/themes/dbc/dark.css

@@ -137,6 +137,12 @@ html[data-theme='dark'] {
   --color-focus-ring: var(--dbc-blue-300);
   --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
 
+  /* Syntax (JSON viewer) */
+  --color-syntax-accent: var(--dbc-blue-300);
+  --color-syntax-string: var(--dbc-green-300);
+  --color-syntax-number: var(--dbc-amber-400);
+  --color-syntax-boolean: var(--dbc-pink-500);
+
   /* ==========================================================================
    * COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
    * ======================================================================= */

package/dist/styles/themes/dbc/light.css

@@ -137,6 +137,12 @@ html[data-theme='light'] {
   --color-focus-ring: var(--dbc-blue-300);
   --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
 
+  /* Syntax (JSON viewer) */
+  --color-syntax-accent: var(--dbc-blue-300);
+  --color-syntax-string: var(--dbc-green-300);
+  --color-syntax-number: var(--dbc-amber-400);
+  --color-syntax-boolean: var(--dbc-pink-500);
+
   /* ==========================================================================
    * COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
    * ======================================================================= */

package/dist/styles.css

@@ -26,11 +26,6 @@
   box-sizing: border-box;
 }
 
-html,
-body {
-  scrollbar-gutter: stable both-edges;
-}
-
 body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",