@dbcdk/react-components 0.0.195 → 0.0.196

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

@@ -0,0 +1,121 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useVirtualizer, measureElement } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+import { JsonRow } from './JsonRow';
+import styles from './JsonViewer.module.css';
+import { JsonViewerShell } from './JsonViewerShell';
+import { useJsonViewerState } from './useJsonViewerState';
+import { flattenVisibleTree } from './utils';
+
+const ESTIMATED_ROW_HEIGHT = 32;
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  defaultViewMode = "tree",
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  emptySearchText = "Ingen matchende noder fundet.",
+  className,
+  maxHeight,
+  appearance = "dark",
+  deleted = false,
+  storageKey,
+  borderless = false
+}) {
+  const state = useJsonViewerState({
+    value,
+    defaultExpandedDepth,
+    expandAll,
+    defaultViewMode,
+    searchDebounceMs,
+    appearance,
+    storageKey
+  });
+  const treePaneRef = useRef(null);
+  const measuredHeightsRef = useRef(/* @__PURE__ */ new Map());
+  const measuredHeightSumRef = useRef(0);
+  const rows = flattenVisibleTree(
+    state.safeValue,
+    state.expandedNodeIds,
+    state.matches,
+    state.normalizedQuery
+  );
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => treePaneRef.current,
+    estimateSize: () => {
+      const measuredCount = measuredHeightsRef.current.size;
+      return measuredCount > 0 ? measuredHeightSumRef.current / measuredCount : ESTIMATED_ROW_HEIGHT;
+    },
+    getItemKey: (index) => rows[index].nodeId,
+    overscan: 12,
+    measureElement: (element, entry, instance) => {
+      var _a, _b;
+      const height = measureElement(element, entry, instance);
+      const nodeId = (_a = rows[instance.indexFromElement(element)]) == null ? void 0 : _a.nodeId;
+      if (nodeId) {
+        const previous = (_b = measuredHeightsRef.current.get(nodeId)) != null ? _b : 0;
+        measuredHeightSumRef.current += height - previous;
+        measuredHeightsRef.current.set(nodeId, height);
+      }
+      return height;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    JsonViewerShell,
+    {
+      state,
+      helperText,
+      searchPlaceholder,
+      emptySearchText,
+      className,
+      maxHeight,
+      borderless,
+      deleted,
+      treePaneRef,
+      children: /* @__PURE__ */ jsx("div", { style: { height: virtualizer.getTotalSize(), position: "relative", width: "100%" }, children: virtualizer.getVirtualItems().map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            className: styles.node,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              // Matches the 1px `gap` the non-virtualized `.node`/`.children`
+              // rules put between rows - flex gap doesn't apply here since
+              // rows are absolutely positioned rather than flex siblings.
+              paddingBottom: "1px",
+              transform: `translateY(${virtualRow.start}px)`,
+              ["--json-indent"]: row.depth
+            },
+            children: /* @__PURE__ */ jsx(
+              JsonRow,
+              {
+                nodeId: row.nodeId,
+                keyName: row.keyName,
+                value: row.value,
+                query: state.normalizedQuery,
+                match: row.match,
+                isExpanded: row.isExpanded,
+                copied: state.copiedId === row.nodeId,
+                onToggleNode: state.handleToggleNode,
+                onCopy: state.handleCopy
+              }
+            )
+          },
+          row.nodeId
+        );
+      }) })
+    }
+  );
+}
+
+export { JsonViewer };

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

@@ -49,3 +49,30 @@ export type JsonNodeProps = {
     copiedId: string | null;
     onCopy: (nodeId: string, rawValue: string) => void;
 };
+/**
+ * Presentational, non-recursive rendering of a single row (key/value or
+ * container header + optional search path hint). Shared by the recursive
+ * `JsonNode` tree and any flat/virtualized renderer - everything it needs is
+ * passed as already-resolved values (no Set/Map), so it can be wrapped in
+ * `React.memo` with a plain shallow comparison.
+ */
+export type JsonRowProps = {
+    nodeId: string;
+    keyName?: string;
+    value: JsonValue;
+    query: string;
+    match: SearchMatch | undefined;
+    isExpanded: boolean;
+    copied: boolean;
+    onToggleNode: (nodeId: string) => void;
+    onCopy: (nodeId: string, rawValue: string) => void;
+};
+/** One visible row produced by `flattenVisibleTree`, in document order. */
+export type FlatJsonRow = {
+    nodeId: string;
+    keyName?: string;
+    value: JsonValue;
+    depth: number;
+    match: SearchMatch | undefined;
+    isExpanded: boolean;
+};

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

@@ -0,0 +1,111 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var usePersistentState = require('../../hooks/usePersistentState');
+var clipboard_utils = require('../../utils/clipboard.utils');
+var useClipboardStatus = require('./useClipboardStatus');
+var utils = require('./utils');
+
+const COPY_ALL_ID = "__json-viewer-copy-all__";
+function useJsonViewerState({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  defaultViewMode = "tree",
+  searchDebounceMs = 800,
+  appearance = "dark",
+  storageKey
+}) {
+  const [queryInput, setQueryInput] = react.useState("");
+  const [query, setQuery] = react.useState("");
+  const normalizedQuery = utils.normalizeSearch(query);
+  const inputId = react.useId();
+  const { copiedId, setCopiedId } = useClipboardStatus.useClipboardStatus();
+  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: defaultViewMode,
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "tree" || stored === "raw"
+  });
+  const handleToggleAppearance = () => {
+    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
+  };
+  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 rawJson = react.useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
+  const handleCopy = react.useCallback(
+    async (nodeId, rawValue) => {
+      const success = await clipboard_utils.copyToClipboard(rawValue);
+      setCopiedId(success ? nodeId : null);
+    },
+    [setCopiedId]
+  );
+  const handleToggleNode = react.useCallback((nodeId) => {
+    setExpandedNodeIds((current) => {
+      const next = new Set(current);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
+  const handleExpandAll = () => {
+    setExpandedNodeIds(new Set(allExpandableNodeIds));
+  };
+  const handleCollapseAll = () => {
+    setExpandedNodeIds(/* @__PURE__ */ new Set());
+  };
+  return {
+    queryInput,
+    setQueryInput,
+    query,
+    setQuery,
+    normalizedQuery,
+    inputId,
+    copiedId,
+    currentAppearance,
+    handleToggleAppearance,
+    viewMode,
+    setViewMode,
+    safeValue,
+    matches,
+    expandedNodeIds,
+    hasResults,
+    rawJson,
+    handleCopy,
+    handleCopyAll,
+    handleExpandAll,
+    handleCollapseAll,
+    handleToggleNode
+  };
+}
+
+exports.COPY_ALL_ID = COPY_ALL_ID;
+exports.useJsonViewerState = useJsonViewerState;

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

@@ -0,0 +1,42 @@
+import type { JsonViewerAppearance, JsonViewerProps, JsonViewerViewMode } from './types';
+export declare const COPY_ALL_ID = "__json-viewer-copy-all__";
+export type { JsonViewerViewMode };
+export type JsonViewerState = ReturnType<typeof useJsonViewerState>;
+export type UseJsonViewerStateProps = Pick<JsonViewerProps, 'value' | 'defaultExpandedDepth' | 'expandAll' | 'defaultViewMode' | 'searchDebounceMs' | 'appearance' | 'storageKey'>;
+/**
+ * All state and derived data shared by every JsonViewer flavor (the default
+ * recursive tree, and any virtualized variant) - toolbar/search/appearance
+ * state, expand tracking, and the memoized JSON parsing/search-match/raw-text
+ * derivations. Kept dependency-free (no @tanstack/react-virtual import) so it
+ * can be used from the main bundle without pulling in optional peer deps.
+ */
+export declare function useJsonViewerState({ value, defaultExpandedDepth, expandAll, defaultViewMode, searchDebounceMs, appearance, storageKey, }: UseJsonViewerStateProps): {
+    queryInput: string;
+    setQueryInput: import("react").Dispatch<import("react").SetStateAction<string>>;
+    query: string;
+    setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    normalizedQuery: string;
+    inputId: string;
+    copiedId: string | null;
+    currentAppearance: JsonViewerAppearance;
+    handleToggleAppearance: () => void;
+    viewMode: JsonViewerViewMode;
+    setViewMode: import("react").Dispatch<import("react").SetStateAction<JsonViewerViewMode>>;
+    safeValue: string | number | boolean | import("./types").JsonValue[] | {
+        [key: string]: import("./types").JsonValue;
+    } | {
+        unsupported: {
+            besked: string;
+            modtagetType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+        };
+    } | null;
+    matches: Map<any, any>;
+    expandedNodeIds: Set<string>;
+    hasResults: boolean;
+    rawJson: string;
+    handleCopy: (nodeId: string, rawValue: string) => Promise<void>;
+    handleCopyAll: () => Promise<void>;
+    handleExpandAll: () => void;
+    handleCollapseAll: () => void;
+    handleToggleNode: (nodeId: string) => void;
+};

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

@@ -0,0 +1,108 @@
+'use client';
+import { useState, useId, useEffect, useMemo, useCallback } from 'react';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import { copyToClipboard } from '../../utils/clipboard.utils';
+import { useClipboardStatus } from './useClipboardStatus';
+import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
+
+const COPY_ALL_ID = "__json-viewer-copy-all__";
+function useJsonViewerState({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  defaultViewMode = "tree",
+  searchDebounceMs = 800,
+  appearance = "dark",
+  storageKey
+}) {
+  const [queryInput, setQueryInput] = useState("");
+  const [query, setQuery] = useState("");
+  const normalizedQuery = normalizeSearch(query);
+  const inputId = useId();
+  const { copiedId, setCopiedId } = useClipboardStatus();
+  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: defaultViewMode,
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "tree" || stored === "raw"
+  });
+  const handleToggleAppearance = () => {
+    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
+  };
+  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 rawJson = useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
+  const handleCopy = useCallback(
+    async (nodeId, rawValue) => {
+      const success = await copyToClipboard(rawValue);
+      setCopiedId(success ? nodeId : null);
+    },
+    [setCopiedId]
+  );
+  const handleToggleNode = useCallback((nodeId) => {
+    setExpandedNodeIds((current) => {
+      const next = new Set(current);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
+  const handleExpandAll = () => {
+    setExpandedNodeIds(new Set(allExpandableNodeIds));
+  };
+  const handleCollapseAll = () => {
+    setExpandedNodeIds(/* @__PURE__ */ new Set());
+  };
+  return {
+    queryInput,
+    setQueryInput,
+    query,
+    setQuery,
+    normalizedQuery,
+    inputId,
+    copiedId,
+    currentAppearance,
+    handleToggleAppearance,
+    viewMode,
+    setViewMode,
+    safeValue,
+    matches,
+    expandedNodeIds,
+    hasResults,
+    rawJson,
+    handleCopy,
+    handleCopyAll,
+    handleExpandAll,
+    handleCollapseAll,
+    handleToggleNode
+  };
+}
+
+export { COPY_ALL_ID, useJsonViewerState };

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

@@ -85,6 +85,13 @@ function collectSearchMatches(value, query, path = [], key) {
   visit(value, path, key);
   return matches;
 }
+function resolveNodeVisibility(nodeId, value, query, match, expandedNodeIds) {
+  const isContainer = isJsonArray(value) || isJsonObject(value);
+  const shouldRender = query ? Boolean(match) : true;
+  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  const isExpanded = isContainer && Boolean(query || forceOpen || expandedNodeIds.has(nodeId));
+  return { isContainer, shouldRender, isExpanded };
+}
 function collectExpandableNodeIds(value, path = []) {
   if (!isJsonArray(value) && !isJsonObject(value)) return [];
   const nodeId = getNodeId(path);
@@ -109,11 +116,39 @@ function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll,
   );
   return includeNode ? [nodeId, ...nested] : nested;
 }
+function flattenVisibleTree(value, expandedNodeIds, matches, query, path = [], keyName, depth = 0) {
+  const nodeId = getNodeId(path);
+  const match = matches.get(nodeId);
+  const { isContainer, shouldRender, isExpanded } = resolveNodeVisibility(
+    nodeId,
+    value,
+    query,
+    match,
+    expandedNodeIds
+  );
+  if (!shouldRender) return [];
+  const row = { nodeId, keyName, value, depth, match, isExpanded };
+  if (!isContainer || !isExpanded) return [row];
+  const childEntries = isJsonArray(value) ? value.map((item, index) => [String(index), item]) : isJsonObject(value) ? Object.entries(value) : [];
+  const childRows = childEntries.flatMap(
+    ([childKey, childValue]) => flattenVisibleTree(
+      childValue,
+      expandedNodeIds,
+      matches,
+      query,
+      [...path, childKey],
+      isJsonArray(value) ? `[${childKey}]` : childKey,
+      depth + 1
+    )
+  );
+  return [row, ...childRows];
+}
 
 exports.capitalize = capitalize;
 exports.collectExpandableNodeIds = collectExpandableNodeIds;
 exports.collectInitiallyExpandedNodeIds = collectInitiallyExpandedNodeIds;
 exports.collectSearchMatches = collectSearchMatches;
+exports.flattenVisibleTree = flattenVisibleTree;
 exports.formatPrimitive = formatPrimitive;
 exports.getNodeId = getNodeId;
 exports.getPathLabel = getPathLabel;
@@ -124,3 +159,4 @@ exports.isJsonArray = isJsonArray;
 exports.isJsonObject = isJsonObject;
 exports.isJsonValue = isJsonValue;
 exports.normalizeSearch = normalizeSearch;
+exports.resolveNodeVisibility = resolveNodeVisibility;

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

@@ -1,4 +1,4 @@
-import type { JsonValue, JsonPrimitive, PrimitiveKind, SearchMatch } from './types';
+import type { FlatJsonRow, 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;
@@ -13,5 +13,25 @@ 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>;
+/**
+ * Whether a node is a container, should render at all (given an active
+ * search), and is currently expanded. Shared by the recursive `JsonNode` tree
+ * and `flattenVisibleTree` (used by virtualized renderers) so both walkers
+ * make identical decisions instead of duplicating - and potentially
+ * drifting on - this logic.
+ */
+export declare function resolveNodeVisibility(nodeId: string, value: JsonValue, query: string, match: SearchMatch | undefined, expandedNodeIds: Set<string>): {
+    isContainer: boolean;
+    shouldRender: boolean;
+    isExpanded: boolean;
+};
 export declare function collectExpandableNodeIds(value: JsonValue, path?: string[]): string[];
 export declare function collectInitiallyExpandedNodeIds(value: JsonValue, defaultExpandedDepth: number, expandAll: boolean, depth?: number, path?: string[]): string[];
+/**
+ * Walks the tree once and produces exactly the rows a recursive renderer
+ * would show, in document order - for a flat/virtualized renderer that needs
+ * a linear list up front instead of deciding per-node during a recursive
+ * render. Uses the same `resolveNodeVisibility` decisions as `JsonNode`, so
+ * the two stay behaviorally identical.
+ */
+export declare function flattenVisibleTree(value: JsonValue, expandedNodeIds: Set<string>, matches: Map<string, SearchMatch>, query: string, path?: string[], keyName?: string, depth?: number): FlatJsonRow[];

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

@@ -83,6 +83,13 @@ function collectSearchMatches(value, query, path = [], key) {
   visit(value, path, key);
   return matches;
 }
+function resolveNodeVisibility(nodeId, value, query, match, expandedNodeIds) {
+  const isContainer = isJsonArray(value) || isJsonObject(value);
+  const shouldRender = query ? Boolean(match) : true;
+  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  const isExpanded = isContainer && Boolean(query || forceOpen || expandedNodeIds.has(nodeId));
+  return { isContainer, shouldRender, isExpanded };
+}
 function collectExpandableNodeIds(value, path = []) {
   if (!isJsonArray(value) && !isJsonObject(value)) return [];
   const nodeId = getNodeId(path);
@@ -107,5 +114,32 @@ function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll,
   );
   return includeNode ? [nodeId, ...nested] : nested;
 }
+function flattenVisibleTree(value, expandedNodeIds, matches, query, path = [], keyName, depth = 0) {
+  const nodeId = getNodeId(path);
+  const match = matches.get(nodeId);
+  const { isContainer, shouldRender, isExpanded } = resolveNodeVisibility(
+    nodeId,
+    value,
+    query,
+    match,
+    expandedNodeIds
+  );
+  if (!shouldRender) return [];
+  const row = { nodeId, keyName, value, depth, match, isExpanded };
+  if (!isContainer || !isExpanded) return [row];
+  const childEntries = isJsonArray(value) ? value.map((item, index) => [String(index), item]) : isJsonObject(value) ? Object.entries(value) : [];
+  const childRows = childEntries.flatMap(
+    ([childKey, childValue]) => flattenVisibleTree(
+      childValue,
+      expandedNodeIds,
+      matches,
+      query,
+      [...path, childKey],
+      isJsonArray(value) ? `[${childKey}]` : childKey,
+      depth + 1
+    )
+  );
+  return [row, ...childRows];
+}
 
-export { capitalize, collectExpandableNodeIds, collectInitiallyExpandedNodeIds, collectSearchMatches, formatPrimitive, getNodeId, getPathLabel, getPrimitiveRawValue, getSummary, getValueType, isJsonArray, isJsonObject, isJsonValue, normalizeSearch };
+export { capitalize, collectExpandableNodeIds, collectInitiallyExpandedNodeIds, collectSearchMatches, flattenVisibleTree, formatPrimitive, getNodeId, getPathLabel, getPrimitiveRawValue, getSummary, getValueType, isJsonArray, isJsonObject, isJsonValue, normalizeSearch, resolveNodeVisibility };

package/dist/components/lightbox/Lightbox.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
-var client = require('../../client');
+var MetaBar = require('../../components/meta-bar/MetaBar');
 var Popover = require('../../components/popover/Popover');
 var styles = require('./Lightbox.module.css');
 var Button = require('../button/Button');
@@ -135,7 +135,7 @@ function Lightbox({
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailFooter, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMeta, children: /* @__PURE__ */ jsxRuntime.jsx(
-            client.MetaBar,
+            MetaBar.MetaBar,
             {
               items: [
                 { value: item.height != null ? `H:${item.height}px` : "-" },

package/dist/components/lightbox/Lightbox.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import { type MetaItem } from '../../client';
+import { type MetaItem } from '../../components/meta-bar/MetaBar';
 export type LightboxItem = {
     thumbnail: ReactNode;
     preview?: ReactNode;

package/dist/components/lightbox/Lightbox.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Download, X, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 import { useRef, useState, useEffect, useCallback } from 'react';
-import { MetaBar } from '../../client';
+import { MetaBar } from '../../components/meta-bar/MetaBar';
 import { Popover } from '../../components/popover/Popover';
 import styles from './Lightbox.module.css';
 import { Button } from '../button/Button';

package/dist/components/menu/Menu.cjs

@@ -192,13 +192,7 @@ const MenuCheckItem = React__namespace.forwardRef(
     className,
     ...liProps
   }, ref) => {
-    const isSelected = checked;
-    const interactiveClass = [
-      styles__default.default.interactiveChild,
-      styles__default.default.item,
-      active ? styles__default.default.active : "",
-      isSelected ? styles__default.default.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles__default.default.interactiveChild, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
@@ -212,7 +206,6 @@ const MenuCheckItem = React__namespace.forwardRef(
             ref: interactiveRef,
             role: interactiveProps == null ? void 0 : interactiveProps.role,
             tabIndex: -1,
-            "aria-selected": isSelected || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,
@@ -265,12 +258,7 @@ const MenuRadioItem = React__namespace.forwardRef(
     ...liProps
   }, ref) => {
     var _a, _b;
-    const interactiveClass = [
-      styles__default.default.interactiveChild,
-      styles__default.default.item,
-      active ? styles__default.default.active : "",
-      checked ? styles__default.default.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles__default.default.interactiveChild, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
@@ -285,7 +273,6 @@ const MenuRadioItem = React__namespace.forwardRef(
             role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
             tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
             "aria-checked": checked || void 0,
-            "aria-selected": checked || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,
@@ -343,13 +330,7 @@ const MenuSwitchItem = React__namespace.forwardRef(
     className,
     ...liProps
   }, ref) => {
-    const isSelected = checked;
-    const interactiveClass = [
-      styles__default.default.interactiveChild,
-      styles__default.default.item,
-      active ? styles__default.default.active : "",
-      isSelected ? styles__default.default.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles__default.default.interactiveChild, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
@@ -363,7 +344,6 @@ const MenuSwitchItem = React__namespace.forwardRef(
             ref: interactiveRef,
             role: interactiveProps == null ? void 0 : interactiveProps.role,
             tabIndex: -1,
-            "aria-selected": isSelected || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,