@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,124 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var HighlightedText = require('../../components/highlighted-text/HighlightedText');
+var styles = require('./JsonViewer.module.css');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonNode({
+  keyName,
+  path,
+  value,
+  depth,
+  defaultExpandedDepth,
+  query,
+  matches,
+  expandedNodeIds,
+  onToggleNode,
+  copiedId,
+  onCopy
+}) {
+  const nodeId = utils.getNodeId(path);
+  const nodeType = utils.getValueType(value);
+  const match = matches.get(nodeId);
+  const shouldRender = query ? Boolean(match) : true;
+  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  if (!shouldRender) return null;
+  if (nodeType !== "array" && nodeType !== "object") {
+    const primitive = value;
+    const valueLabel = utils.formatPrimitive(primitive);
+    const rawValue = utils.getPrimitiveRawValue(primitive);
+    const copied = copiedId === nodeId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: styles__default.default.node,
+        style: { ["--json-indent"]: depth },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.valueButton,
+              onClick: () => onCopy(nodeId, rawValue),
+              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+                  keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: [styles__default.default.value, styles__default.default[`value${utils.capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: valueLabel, query }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.copyState, "aria-live": "polite", children: [
+                  copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+                ] })
+              ]
+            }
+          ) }),
+          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null
+        ]
+      }
+    );
+  }
+  const entries = utils.isJsonArray(value) ? value.map((item, index) => [String(index), item]) : utils.isJsonObject(value) ? Object.entries(value) : [];
+  const summary = utils.getSummary(value);
+  const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles__default.default.node,
+      style: { ["--json-indent"]: depth },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.toggle,
+            onClick: () => onToggleNode(nodeId),
+            "aria-expanded": expanded,
+            children: [
+              expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+                keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "[" : "{" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.summary, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: summary, query }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "]" : "}" })
+              ] })
+            ]
+          }
+        ) }),
+        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null,
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsxRuntime.jsx(
+          JsonNode,
+          {
+            keyName: utils.isJsonArray(value) ? `[${childKey}]` : childKey,
+            path: [...path, childKey],
+            value: childValue,
+            depth: depth + 1,
+            defaultExpandedDepth,
+            query,
+            matches,
+            expandedNodeIds,
+            onToggleNode,
+            copiedId,
+            onCopy
+          },
+          `${nodeId}-${childKey}`
+        )) }) : null
+      ]
+    }
+  );
+}
+
+exports.JsonNode = JsonNode;

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,118 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check, Copy, ChevronDown, ChevronRight } from 'lucide-react';
+import { HighlightedText } from '../../components/highlighted-text/HighlightedText';
+import styles from './JsonViewer.module.css';
+import { getNodeId, getValueType, formatPrimitive, getPrimitiveRawValue, capitalize, getPathLabel, isJsonArray, isJsonObject, getSummary } from './utils';
+
+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 ? 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 /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.node,
+        style: { ["--json-indent"]: depth },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles.valueButton,
+              onClick: () => onCopy(nodeId, rawValue),
+              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+                  keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+                    /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+                    /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+                  /* @__PURE__ */ jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsx(HighlightedText, { text: valueLabel, query }) })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [
+                  copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+                ] })
+              ]
+            }
+          ) }),
+          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), 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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.node,
+      style: { ["--json-indent"]: depth },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles.toggle,
+            onClick: () => onToggleNode(nodeId),
+            "aria-expanded": expanded,
+            children: [
+              expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+                keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+                  /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+                ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "[" : "{" }),
+                /* @__PURE__ */ jsx("span", { className: styles.summary, children: /* @__PURE__ */ jsx(HighlightedText, { text: summary, query }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "]" : "}" })
+              ] })
+            ]
+          }
+        ) }),
+        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), query }) }) : null,
+        expanded ? /* @__PURE__ */ jsx("div", { className: styles.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            keyName: isJsonArray(value) ? `[${childKey}]` : childKey,
+            path: [...path, childKey],
+            value: childValue,
+            depth: depth + 1,
+            defaultExpandedDepth,
+            query,
+            matches,
+            expandedNodeIds,
+            onToggleNode,
+            copiedId,
+            onCopy
+          },
+          `${nodeId}-${childKey}`
+        )) }) : null
+      ]
+    }
+  );
+}
+
+export { JsonNode };

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

@@ -0,0 +1,164 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var JsonNode = require('./JsonNode');
+var styles = require('./JsonViewer.module.css');
+var useClipboardStatus = require('./useClipboardStatus');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  emptySearchText = "Ingen matchende noder fundet.",
+  className,
+  maxHeight
+}) {
+  const [queryInput, setQueryInput] = react.useState("");
+  const [query, setQuery] = react.useState("");
+  const normalizedQuery = utils.normalizeSearch(query);
+  const inputId = react.useId();
+  const { copiedId, setCopiedId } = useClipboardStatus.useClipboardStatus();
+  react.useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setQuery(queryInput);
+    }, searchDebounceMs);
+    return () => window.clearTimeout(timeoutId);
+  }, [queryInput, searchDebounceMs]);
+  const safeValue = react.useMemo(() => {
+    if (utils.isJsonValue(value)) return value;
+    return {
+      unsupported: {
+        besked: "Den angivne v\xE6rdi kan ikke vises som JSON",
+        modtagetType: typeof value
+      }
+    };
+  }, [value]);
+  const matches = react.useMemo(
+    () => normalizedQuery ? utils.collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
+    [normalizedQuery, safeValue]
+  );
+  const allExpandableNodeIds = react.useMemo(() => utils.collectExpandableNodeIds(safeValue), [safeValue]);
+  const [expandedNodeIds, setExpandedNodeIds] = react.useState(
+    () => new Set(utils.collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
+  );
+  const hasResults = normalizedQuery ? matches.size > 0 : true;
+  const handleCopy = async (nodeId, rawValue) => {
+    try {
+      await navigator.clipboard.writeText(rawValue);
+      setCopiedId(nodeId);
+    } catch {
+      setCopiedId(null);
+    }
+  };
+  const handleExpandAll = () => {
+    setExpandedNodeIds(new Set(allExpandableNodeIds));
+  };
+  const handleCollapseAll = () => {
+    setExpandedNodeIds(/* @__PURE__ */ new Set());
+  };
+  const handleToggleNode = (nodeId) => {
+    setExpandedNodeIds((current) => {
+      const next = new Set(current);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: [styles__default.default.viewer, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles__default.default.searchField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: styles__default.default.searchIcon, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: inputId,
+              type: "search",
+              value: queryInput,
+              onChange: (event) => setQueryInput(event.target.value),
+              placeholder: searchPlaceholder,
+              className: styles__default.default.searchInput
+            }
+          ),
+          queryInput ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.clearButton,
+              "aria-label": "Ryd s\xF8gning",
+              onClick: () => {
+                setQueryInput("");
+                setQuery("");
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.actions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.toolbarButton,
+              onClick: handleExpandAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle ud"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.toolbarButton,
+              onClick: handleCollapseAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle sammen"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.metaRow, children: [
+        helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helperText, children: helperText }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: styles__default.default.treePane,
+        role: "tree",
+        "aria-label": "JSON-visning",
+        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+        children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
+          JsonNode.JsonNode,
+          {
+            keyName: void 0,
+            path: [],
+            value: safeValue,
+            depth: 0,
+            defaultExpandedDepth,
+            query: normalizedQuery,
+            matches,
+            expandedNodeIds,
+            onToggleNode: handleToggleNode,
+            copiedId,
+            onCopy: handleCopy
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
+      }
+    )
+  ] });
+}
+
+exports.JsonViewer = JsonViewer;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+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

@@ -0,0 +1,158 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Search, X } from 'lucide-react';
+import { useState, useId, useEffect, useMemo } from 'react';
+import { JsonNode } from './JsonNode';
+import styles from './JsonViewer.module.css';
+import { useClipboardStatus } from './useClipboardStatus';
+import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
+
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  emptySearchText = "Ingen matchende noder fundet.",
+  className,
+  maxHeight
+}) {
+  const [queryInput, setQueryInput] = useState("");
+  const [query, setQuery] = useState("");
+  const normalizedQuery = normalizeSearch(query);
+  const inputId = useId();
+  const { copiedId, setCopiedId } = useClipboardStatus();
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setQuery(queryInput);
+    }, searchDebounceMs);
+    return () => window.clearTimeout(timeoutId);
+  }, [queryInput, searchDebounceMs]);
+  const safeValue = useMemo(() => {
+    if (isJsonValue(value)) return value;
+    return {
+      unsupported: {
+        besked: "Den angivne v\xE6rdi kan ikke vises som JSON",
+        modtagetType: typeof value
+      }
+    };
+  }, [value]);
+  const matches = useMemo(
+    () => normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
+    [normalizedQuery, safeValue]
+  );
+  const allExpandableNodeIds = useMemo(() => collectExpandableNodeIds(safeValue), [safeValue]);
+  const [expandedNodeIds, setExpandedNodeIds] = useState(
+    () => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
+  );
+  const hasResults = normalizedQuery ? matches.size > 0 : true;
+  const handleCopy = async (nodeId, rawValue) => {
+    try {
+      await navigator.clipboard.writeText(rawValue);
+      setCopiedId(nodeId);
+    } catch {
+      setCopiedId(null);
+    }
+  };
+  const handleExpandAll = () => {
+    setExpandedNodeIds(new Set(allExpandableNodeIds));
+  };
+  const handleCollapseAll = () => {
+    setExpandedNodeIds(/* @__PURE__ */ new Set());
+  };
+  const handleToggleNode = (nodeId) => {
+    setExpandedNodeIds((current) => {
+      const next = new Set(current);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
+          /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "search",
+              value: queryInput,
+              onChange: (event) => setQueryInput(event.target.value),
+              placeholder: searchPlaceholder,
+              className: styles.searchInput
+            }
+          ),
+          queryInput ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.clearButton,
+              "aria-label": "Ryd s\xF8gning",
+              onClick: () => {
+                setQueryInput("");
+                setQuery("");
+              },
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.toolbarButton,
+              onClick: handleExpandAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle ud"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.toolbarButton,
+              onClick: handleCollapseAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle sammen"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+        helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", { className: styles.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.treePane,
+        role: "tree",
+        "aria-label": "JSON-visning",
+        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+        children: hasResults ? /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            keyName: void 0,
+            path: [],
+            value: safeValue,
+            depth: 0,
+            defaultExpandedDepth,
+            query: normalizedQuery,
+            matches,
+            expandedNodeIds,
+            onToggleNode: handleToggleNode,
+            copiedId,
+            onCopy: handleCopy
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
+      }
+    )
+  ] });
+}
+
+export { JsonViewer };