@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,124 +0,0 @@
-'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

@@ -1,3 +0,0 @@
-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

@@ -1,118 +0,0 @@
-'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

@@ -1,164 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-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

@@ -1,158 +0,0 @@
-'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 };