@dbcdk/react-components 0.0.181 → 0.0.183

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -0,0 +1,175 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var usePersistentState = require('../../hooks/usePersistentState');
+var tokenizeXml = require('./tokenizeXml');
+var styles = require('./XmlViewer.module.css');
+var Button = require('../button/Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const TOKEN_CLASS = {
+  tagName: styles__default.default.tagName,
+  attrName: styles__default.default.attrName,
+  attrValue: styles__default.default.attrValue,
+  comment: styles__default.default.comment,
+  cdata: styles__default.default.cdata,
+  declaration: styles__default.default.declaration,
+  doctype: styles__default.default.doctype,
+  punctuation: styles__default.default.punctuation,
+  text: void 0
+};
+function XmlViewer({
+  xml,
+  size = "md",
+  appearance = "dark",
+  storageKey,
+  borderless = false
+}) {
+  const tokens = react.useMemo(() => tokenizeXml.tokenizeXml(xml), [xml]);
+  const codeRef = react.useRef(null);
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
+    initialValue: "highlighted",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "highlighted" || stored === "raw"
+  });
+  const { value: wrap, setValue: setWrap } = usePersistentState.usePersistentState({
+    initialValue: true,
+    storageKey: storageKey ? `${storageKey}:wrap` : void 0,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const handleCopy = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
+    });
+  };
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : ""].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Popover.Popover,
+              {
+                matchTriggerWidth: false,
+                minWidth: "200px",
+                trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.Button,
+                  {
+                    variant: "inline",
+                    "aria-label": "Flere handlinger",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen ? true : false,
+                    onClick: toggle,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                  }
+                ),
+                children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setWrap((value) => !value);
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TextWrap, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: wrap ? "Ombryd ikke tekst" : "Ombryd tekst" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode((mode) => mode === "raw" ? "highlighted" : "raw");
+                        close();
+                      },
+                      children: [
+                        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: viewMode === "raw" ? "Vis med farver" : "Vis raw" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentAppearance((value) => value === "dark" ? "light" : "dark");
+                        close();
+                      },
+                      children: [
+                        currentAppearance === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleCopy();
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardCopy, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Kopi\xE9r XML" })
+                      ]
+                    }
+                  ) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            className: [styles__default.default.codePane, styles__default.default[size], wrap ? styles__default.default.wrap : styles__default.default.noWrap].join(" "),
+            tabIndex: 0,
+            onDoubleClick: handleDoubleClick,
+            children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+              const tokenClassName = TOKEN_CLASS[token.type];
+              return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.XmlViewer = XmlViewer;

package/dist/components/xml-viewer/XmlViewer.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+export type XmlViewerAppearance = 'dark' | 'light';
+export interface XmlViewerProps {
+    xml: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
+    appearance?: XmlViewerAppearance;
+    /**
+     * When set, the user's appearance/view-mode/wrap choices are persisted to
+     * localStorage under `${storageKey}:appearance` etc.
+     */
+    storageKey?: string;
+    /**
+     * Removes the outer border, shadow and corner radius, so the viewer sits
+     * flush in a container that already provides its own framing (e.g. a
+     * modal).
+     */
+    borderless?: boolean;
+}
+export declare function XmlViewer({ xml, size, appearance, storageKey, borderless, }: XmlViewerProps): JSX.Element;

package/dist/components/xml-viewer/XmlViewer.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import { tokenizeXml } from './tokenizeXml';
+import styles from './XmlViewer.module.css';
+import { Button } from '../button/Button';
+
+const TOKEN_CLASS = {
+  tagName: styles.tagName,
+  attrName: styles.attrName,
+  attrValue: styles.attrValue,
+  comment: styles.comment,
+  cdata: styles.cdata,
+  declaration: styles.declaration,
+  doctype: styles.doctype,
+  punctuation: styles.punctuation,
+  text: void 0
+};
+function XmlViewer({
+  xml,
+  size = "md",
+  appearance = "dark",
+  storageKey,
+  borderless = false
+}) {
+  const tokens = useMemo(() => tokenizeXml(xml), [xml]);
+  const codeRef = useRef(null);
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState({
+    initialValue: "highlighted",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "highlighted" || stored === "raw"
+  });
+  const { value: wrap, setValue: setWrap } = usePersistentState({
+    initialValue: true,
+    storageKey: storageKey ? `${storageKey}:wrap` : void 0,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const handleCopy = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
+    });
+  };
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: [styles.viewer, borderless ? styles.borderless : ""].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: /* @__PURE__ */ jsx(
+              Popover,
+              {
+                matchTriggerWidth: false,
+                minWidth: "200px",
+                trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "inline",
+                    "aria-label": "Flere handlinger",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen ? true : false,
+                    onClick: toggle,
+                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                  }
+                ),
+                children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setWrap((value) => !value);
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(TextWrap, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: wrap ? "Ombryd ikke tekst" : "Ombryd tekst" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode((mode) => mode === "raw" ? "highlighted" : "raw");
+                        close();
+                      },
+                      children: [
+                        viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Code2, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis med farver" : "Vis raw" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentAppearance((value) => value === "dark" ? "light" : "dark");
+                        close();
+                      },
+                      children: [
+                        currentAppearance === "dark" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleCopy();
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r XML" })
+                      ]
+                    }
+                  ) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: [styles.codePane, styles[size], wrap ? styles.wrap : styles.noWrap].join(" "),
+            tabIndex: 0,
+            onDoubleClick: handleDoubleClick,
+            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+              const tokenClassName = TOKEN_CLASS[token.type];
+              return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { XmlViewer };

package/dist/components/xml-viewer/XmlViewer.module.css

@@ -0,0 +1,109 @@
+.viewer {
+  --xml-pane-bg: var(--color-bg-inverse);
+  --xml-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
+  --xml-pane-text: var(--color-fg-inverse);
+
+  --xml-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
+  --xml-attr-name: color-mix(in oklab, var(--color-fg-inverse) 50%, var(--color-syntax-accent) 50%);
+  --xml-attr-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
+  --xml-comment: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+  --xml-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
+
+  position: relative;
+  background: var(--xml-pane-bg);
+  border: var(--border-width-thin) solid var(--xml-pane-border);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-mono);
+}
+
+.viewer[data-appearance='light'] {
+  --xml-pane-bg: var(--color-bg-surface);
+  --xml-pane-border: var(--color-border-subtle);
+  --xml-pane-text: var(--color-fg-default);
+
+  --xml-tag: var(--color-link);
+  --xml-attr-name: color-mix(in oklab, var(--color-fg-default) 55%, var(--color-link) 45%);
+  --xml-attr-value: var(--color-status-success-fg);
+  --xml-comment: var(--color-fg-muted);
+  --xml-punctuation: var(--color-fg-subtle);
+
+  box-shadow: var(--shadow-xs);
+}
+
+.viewer.borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.toolbar {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 1;
+}
+
+.codePane {
+  margin: 0;
+  padding: var(--spacing-sm);
+  overflow: auto;
+  color: var(--xml-pane-text);
+  font-family: inherit;
+  line-height: 1.35;
+}
+
+.wrap {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.noWrap {
+  white-space: pre;
+}
+
+.xs,
+.sm {
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  font-size: var(--font-size-base);
+}
+
+.tagName {
+  color: var(--xml-tag);
+  font-weight: var(--font-weight-medium);
+}
+
+.attrName {
+  color: var(--xml-attr-name);
+}
+
+.attrValue {
+  color: var(--xml-attr-value);
+}
+
+.comment {
+  color: var(--xml-comment);
+  font-style: italic;
+}
+
+.cdata {
+  color: var(--xml-attr-value);
+  opacity: 0.85;
+}
+
+.declaration,
+.doctype {
+  color: var(--xml-comment);
+  font-style: italic;
+}
+
+.punctuation {
+  color: var(--xml-punctuation);
+}

package/dist/components/xml-viewer/tokenizeXml.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const CHUNK_PATTERN = /(<!--[\s\S]*?-->)|(<!\[CDATA\[[\s\S]*?\]\]>)|(<!DOCTYPE[\s\S]*?>)|(<\?[\s\S]*?\?>)|(<\/?[a-zA-Z_:][\s\S]*?>)|([^<]+)/g;
+const ATTR_PATTERN = /([^\s=/>]+)(\s*=\s*)("[^"]*"|'[^']*')/g;
+function tokenizeTag(raw) {
+  var _a;
+  const isClosing = raw.startsWith("</");
+  const isSelfClosing = raw.endsWith("/>");
+  const openLength = isClosing ? 2 : 1;
+  const closeLength = isSelfClosing ? 2 : 1;
+  const inner = raw.slice(openLength, raw.length - closeLength);
+  const tokens = [{ type: "punctuation", value: raw.slice(0, openLength) }];
+  const nameMatch = /^[^\s/>]+/.exec(inner);
+  const name = (_a = nameMatch == null ? void 0 : nameMatch[0]) != null ? _a : "";
+  if (name) tokens.push({ type: "tagName", value: name });
+  let lastIndex = name.length;
+  ATTR_PATTERN.lastIndex = lastIndex;
+  let match;
+  while (match = ATTR_PATTERN.exec(inner)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "punctuation", value: inner.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "attrName", value: match[1] });
+    tokens.push({ type: "punctuation", value: match[2] });
+    tokens.push({ type: "attrValue", value: match[3] });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < inner.length) {
+    tokens.push({ type: "punctuation", value: inner.slice(lastIndex) });
+  }
+  tokens.push({ type: "punctuation", value: raw.slice(raw.length - closeLength) });
+  return tokens;
+}
+function tokenizeXml(source) {
+  const tokens = [];
+  CHUNK_PATTERN.lastIndex = 0;
+  let match;
+  while (match = CHUNK_PATTERN.exec(source)) {
+    const [, comment, cdata, doctype, declaration, tag, text] = match;
+    if (comment) tokens.push({ type: "comment", value: comment });
+    else if (cdata) tokens.push({ type: "cdata", value: cdata });
+    else if (doctype) tokens.push({ type: "doctype", value: doctype });
+    else if (declaration) tokens.push({ type: "declaration", value: declaration });
+    else if (tag) tokens.push(...tokenizeTag(tag));
+    else if (text) tokens.push({ type: "text", value: text });
+  }
+  return tokens;
+}
+
+exports.tokenizeXml = tokenizeXml;

package/dist/components/xml-viewer/tokenizeXml.d.ts

@@ -0,0 +1,12 @@
+export type XmlTokenType = 'tagName' | 'attrName' | 'attrValue' | 'text' | 'comment' | 'cdata' | 'declaration' | 'doctype' | 'punctuation';
+export interface XmlToken {
+    type: XmlTokenType;
+    value: string;
+}
+/**
+ * Tokenizes an XML string for syntax highlighting without parsing it into a
+ * DOM. Preserves the source exactly - concatenating every token's `value`
+ * reproduces the input - so malformed or partial XML still highlights
+ * whatever it recognizes instead of failing outright.
+ */
+export declare function tokenizeXml(source: string): XmlToken[];

package/dist/components/xml-viewer/tokenizeXml.js

@@ -0,0 +1,48 @@
+const CHUNK_PATTERN = /(<!--[\s\S]*?-->)|(<!\[CDATA\[[\s\S]*?\]\]>)|(<!DOCTYPE[\s\S]*?>)|(<\?[\s\S]*?\?>)|(<\/?[a-zA-Z_:][\s\S]*?>)|([^<]+)/g;
+const ATTR_PATTERN = /([^\s=/>]+)(\s*=\s*)("[^"]*"|'[^']*')/g;
+function tokenizeTag(raw) {
+  var _a;
+  const isClosing = raw.startsWith("</");
+  const isSelfClosing = raw.endsWith("/>");
+  const openLength = isClosing ? 2 : 1;
+  const closeLength = isSelfClosing ? 2 : 1;
+  const inner = raw.slice(openLength, raw.length - closeLength);
+  const tokens = [{ type: "punctuation", value: raw.slice(0, openLength) }];
+  const nameMatch = /^[^\s/>]+/.exec(inner);
+  const name = (_a = nameMatch == null ? void 0 : nameMatch[0]) != null ? _a : "";
+  if (name) tokens.push({ type: "tagName", value: name });
+  let lastIndex = name.length;
+  ATTR_PATTERN.lastIndex = lastIndex;
+  let match;
+  while (match = ATTR_PATTERN.exec(inner)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "punctuation", value: inner.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "attrName", value: match[1] });
+    tokens.push({ type: "punctuation", value: match[2] });
+    tokens.push({ type: "attrValue", value: match[3] });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < inner.length) {
+    tokens.push({ type: "punctuation", value: inner.slice(lastIndex) });
+  }
+  tokens.push({ type: "punctuation", value: raw.slice(raw.length - closeLength) });
+  return tokens;
+}
+function tokenizeXml(source) {
+  const tokens = [];
+  CHUNK_PATTERN.lastIndex = 0;
+  let match;
+  while (match = CHUNK_PATTERN.exec(source)) {
+    const [, comment, cdata, doctype, declaration, tag, text] = match;
+    if (comment) tokens.push({ type: "comment", value: comment });
+    else if (cdata) tokens.push({ type: "cdata", value: cdata });
+    else if (doctype) tokens.push({ type: "doctype", value: doctype });
+    else if (declaration) tokens.push({ type: "declaration", value: declaration });
+    else if (tag) tokens.push(...tokenizeTag(tag));
+    else if (text) tokens.push({ type: "text", value: text });
+  }
+  return tokens;
+}
+
+export { tokenizeXml };

package/dist/index.cjs

@@ -43,6 +43,7 @@ var MediaCard = require('./components/media-card/MediaCard');
 var HighlightedText = require('./components/highlighted-text/HighlightedText');
 var ButtonSelect = require('./components/button-select/ButtonSelect');
 var Sidebar = require('./components/sidebar/Sidebar');
+var TreeView = require('./components/tree-view/TreeView');
 var SplitButton = require('./components/split-button/SplitButton');
 var ChipMultiToggle = require('./components/filtering/chip-multi-toggle/ChipMultiToggle');
 var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
@@ -307,6 +308,12 @@ Object.keys(Sidebar).forEach(function (k) {
 		get: function () { return Sidebar[k]; }
 	});
 });
+Object.keys(TreeView).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TreeView[k]; }
+	});
+});
 Object.keys(SplitButton).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -39,6 +39,7 @@
 @import './components/inline-status/InlineStatus.module.css';
 @import './components/json-viewer/JsonViewer.module.css';
 @import './components/lightbox/Lightbox.module.css';
+@import './components/line-viewer/LineViewer.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
@@ -72,4 +73,6 @@
 @import './components/table/components/empty-state/EmptyState.module.css';
 @import './components/tabs/Tabs.module.css';
 @import './components/toast/Toast.module.css';
+@import './components/tree-view/TreeView.module.css';
 @import './components/user-display/UserDisplay.module.css';
+@import './components/xml-viewer/XmlViewer.module.css';

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
 export * from './components/button-select/ButtonSelect';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';
 export * from './components/button-select/ButtonSelect';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';