+
+
+ );
+}
+
+export const SyntaxHighlightingToggle: Story = {
+ render: (args) =>
+
+ );
+}
+
+export const Controlled: Story = {
+ render: (args) =>
+ Characters: {value.length} | Lines: {value.split('\n').length}
+
+
+
+ );
+}
+
+export const RuntimeSchemaRegistration: Story = {
+ render: (args) =>
+ Runtime Schema Loading
+
+
+ Simulates per-cluster schema loading. Schemas are fetched lazily and registered at runtime.
+ Each schema matches a structured filename:{' '}
+
+
+ <plugin>/<connectionId>/<group>::<version>::<resource>.yaml
+
+ {k8sSchemas.map((entry) => (
+
+ ))}
+ {loadedCount > 0 && (
+
+ )}
+
+
+
+ {k8sSchemas.map((entry) => (
+
+ ))}
+
+
+
+ file: {gvrFilename(activeGvr)}
+
+
+ Loaded: {schemaStatusLabel()}
+
+
+
+ Ln {cursor.lineNumber}, Col {cursor.column}
+
+ {diagnosticsList.length === 0
+ ? 'No problems'
+ : `${diagnosticsList.filter(d => d.severity === 'error').length} errors, ${diagnosticsList.filter(d => d.severity === 'warning').length} warnings`}
+
+
+
+ {/* Problems panel */}
+ {diagnosticsList.length > 0 && (
+
+ {diagnosticsList.map((d, i) => (
+
+ )}
+
+ [{d.severity}] Ln {d.startLineNumber}:{d.startColumn} — {d.message}
+ {d.source && ({d.source})}
+
+ ))}
+
+
+ );
+}
+
+export const OnMountCallback: Story = {
+ render: (args) =>
+ Uses
+ onMount to register a custom completion provider via raw Monaco API.
+
+ {log.map((entry, i) => (
+
+ {entry}
+ ))}
+
+
+
+ );
+ },
+);
+
+CodeEditor.displayName = 'CodeEditor';
diff --git a/packages/editors/src/components/code-editor/index.ts b/packages/editors/src/components/code-editor/index.ts
new file mode 100644
index 0000000..c65fb66
--- /dev/null
+++ b/packages/editors/src/components/code-editor/index.ts
@@ -0,0 +1,9 @@
+export { CodeEditor } from './CodeEditor';
+export type {
+ CodeEditorProps,
+ CodeEditorHandle,
+ EditorDiagnostic,
+ DiagnosticSeverity,
+ CursorPosition,
+ EditorDebugState,
+} from './CodeEditor';
diff --git a/packages/editors/src/components/command-palette/CommandPalette.module.css b/packages/editors/src/components/command-palette/CommandPalette.module.css
new file mode 100644
index 0000000..d8765ed
--- /dev/null
+++ b/packages/editors/src/components/command-palette/CommandPalette.module.css
@@ -0,0 +1,31 @@
+.Overlay {
+ position: fixed;
+ inset: 0;
+ z-index: var(--ov-z-modal, 1000);
+ display: flex;
+ justify-content: center;
+ padding-top: 20vh;
+ background: var(--ov-color-overlay-bg, rgba(0, 0, 0, 0.4));
+}
+
+.Root {
+ width: min(600px, 90vw);
+ max-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ background: var(--ov-color-quickpick-bg, var(--ov-color-bg-surface));
+ border: 1px solid var(--ov-color-quickpick-border, var(--ov-color-border-default));
+ border-radius: var(--ov-radius-md, 8px);
+ box-shadow: var(--ov-color-quickpick-shadow, 0 8px 32px rgba(0, 0, 0, 0.4));
+ overflow: hidden;
+}
+
+/* CommandList fills the palette; its results scroll within the palette's max-height. */
+.CommandList {
+ min-height: 0;
+ flex: 1 1 auto;
+}
+
+.Results {
+ max-block-size: none;
+}
diff --git a/packages/editors/src/components/command-palette/CommandPalette.stories.tsx b/packages/editors/src/components/command-palette/CommandPalette.stories.tsx
new file mode 100644
index 0000000..5901a6d
--- /dev/null
+++ b/packages/editors/src/components/command-palette/CommandPalette.stories.tsx
@@ -0,0 +1,251 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CommandPalette, type CommandItem, type CommandPaletteProps } from './CommandPalette';
+
+const sampleCommands: CommandItem[] = [
+ { id: 'new-file', label: 'New File', shortcut: 'Ctrl+N', group: 'File' },
+ { id: 'open-file', label: 'Open File', shortcut: 'Ctrl+O', group: 'File' },
+ { id: 'save', label: 'Save', shortcut: 'Ctrl+S', group: 'File' },
+ { id: 'save-as', label: 'Save As…', shortcut: 'Ctrl+Shift+S', group: 'File' },
+ { id: 'close-tab', label: 'Close Tab', shortcut: 'Ctrl+W', group: 'File' },
+ { id: 'find', label: 'Find', shortcut: 'Ctrl+F', group: 'Edit' },
+ { id: 'replace', label: 'Replace', shortcut: 'Ctrl+H', group: 'Edit' },
+ { id: 'undo', label: 'Undo', shortcut: 'Ctrl+Z', group: 'Edit' },
+ { id: 'redo', label: 'Redo', shortcut: 'Ctrl+Shift+Z', group: 'Edit' },
+ { id: 'find-files', label: 'Find in Files', shortcut: 'Ctrl+Shift+F', group: 'Search' },
+ { id: 'toggle-terminal', label: 'Toggle Terminal', shortcut: 'Ctrl+`', group: 'View' },
+ { id: 'toggle-sidebar', label: 'Toggle Sidebar', shortcut: 'Ctrl+B', group: 'View' },
+ { id: 'zoom-in', label: 'Zoom In', shortcut: 'Ctrl++', group: 'View' },
+ { id: 'zoom-out', label: 'Zoom Out', shortcut: 'Ctrl+-', group: 'View' },
+ { id: 'git-commit', label: 'Git: Commit', group: 'Source Control' },
+ { id: 'git-push', label: 'Git: Push', group: 'Source Control' },
+ { id: 'git-pull', label: 'Git: Pull', group: 'Source Control' },
+ { id: 'git-stash', label: 'Git: Stash Changes', group: 'Source Control' },
+];
+
+const meta: Meta
+
+ {lastSelected && (
+ setOpen(false)}
+ onSelect={(cmd) => {
+ setLastSelected(cmd.label);
+ setOpen(false);
+ }}
+ />
+
+ );
+}
+
+export const Playground: Story = {
+ render: (args) => Last selected: {lastSelected}
+ )} +
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const WithManyCommands: Story = {
+ render: (args) =>
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const WithDescriptions: Story = {
+ render: (args) =>
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const WithDisabledCommands: Story = {
+ render: (args) =>
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const EmptyCommands: Story = {
+ render: (args) =>
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const UngroupedCommands: Story = {
+ render: (args) =>
+
+ setOpen(false)}
+ onSelect={() => setOpen(false)}
+ />
+
+ );
+}
+
+export const CustomPlaceholder: Story = {
+ render: (args) =>
+ {group &&
+ ))
+ ) : null;
+
+ return (
+ {group}
}
+ {groupItems.map((item: CommandItem) => {
+ const idx = flatIndex++;
+ return renderItem(item, {
+ key: itemKey(item),
+ isActive: idx === activeIndex,
+ isDisabled: false,
+ });
+ })}
+
+ {React.Children.map(children, (child: React.ReactNode) => {
+ if (!React.isValidElement(child)) return child;
+ const displayName = (child.type as { displayName?: string })?.displayName;
+ if (displayName === 'CommandList.Input') return child;
+ if (displayName === 'CommandList.Results') {
+ const childProps = child.props as Record;
+ return resultsContent ? (
+
+ {resultsContent}
+ ) : null;
+ }
+ if (displayName === 'CommandList.Empty') {
+ return filtered.length === 0 ? child : null;
+ }
+ return child;
+ })}
+
+ {children as React.ReactNode}
+
+ );
+ }
+ MockItem.displayName = 'CommandList.Item';
+
+ function MockItemIcon({ children, ...props }: Record{children as React.ReactNode}
;
+ }
+ MockEmpty.displayName = 'CommandList.Empty';
+
+ function MockLoading({ children, ...props }: Record{children as React.ReactNode}
;
+ }
+ MockLoading.displayName = 'CommandList.Loading';
+
+ const CommandList = Object.assign(MockRoot, {
+ Root: MockRoot,
+ Input: MockInput,
+ Results: MockResults,
+ Item: MockItem,
+ ItemIcon: MockItemIcon,
+ ItemLabel: MockItemLabel,
+ ItemDescription: MockItemDescription,
+ ItemShortcut: MockItemShortcut,
+ Empty: MockEmpty,
+ Loading: MockLoading,
+ });
+
+ return { CommandList };
+});
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const commands: CommandItem[] = [
+ { id: 'open', label: 'Open File', shortcut: 'Ctrl+O', group: 'File' },
+ { id: 'save', label: 'Save File', shortcut: 'Ctrl+S', group: 'File' },
+ { id: 'find', label: 'Find in Files', shortcut: 'Ctrl+Shift+F', group: 'Search' },
+ {
+ id: 'terminal',
+ label: 'Toggle Terminal',
+ shortcut: 'Ctrl+`',
+ group: 'View',
+ description: 'Show or hide the integrated terminal',
+ },
+ { id: 'disabled', label: 'Disabled Command', disabled: true },
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('CommandPalette', () => {
+ const defaultProps = {
+ open: true,
+ onClose: vi.fn(),
+ commands,
+ onSelect: vi.fn(),
+ };
+
+ it('renders when open', () => {
+ render( {
+ if (e.key === 'Escape') onClose();
+ }}
+ data-testid="command-palette-overlay"
+ >
+
+ );
+ },
+);
+
+CommandPalette.displayName = 'CommandPalette';
diff --git a/packages/editors/src/components/command-palette/index.ts b/packages/editors/src/components/command-palette/index.ts
new file mode 100644
index 0000000..9c3711c
--- /dev/null
+++ b/packages/editors/src/components/command-palette/index.ts
@@ -0,0 +1,2 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandItem } from './CommandPalette';
diff --git a/packages/editors/src/components/diff-viewer/DiffViewer.module.css b/packages/editors/src/components/diff-viewer/DiffViewer.module.css
new file mode 100644
index 0000000..932d145
--- /dev/null
+++ b/packages/editors/src/components/diff-viewer/DiffViewer.module.css
@@ -0,0 +1,18 @@
+.Root {
+ position: relative;
+ overflow: hidden;
+ border-radius: var(--ov-radius-sm, 4px);
+ border: 1px solid var(--ov-color-editor-border, var(--ov-color-border-default));
+ background: var(--ov-color-editor-bg, var(--ov-color-bg-surface));
+}
+
+.Loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ color: var(--ov-color-fg-muted);
+ font-family: var(--ov-font-family-sans, sans-serif);
+ font-size: var(--ov-font-size-sm, 13px);
+}
diff --git a/packages/editors/src/components/diff-viewer/DiffViewer.stories.tsx b/packages/editors/src/components/diff-viewer/DiffViewer.stories.tsx
new file mode 100644
index 0000000..707789c
--- /dev/null
+++ b/packages/editors/src/components/diff-viewer/DiffViewer.stories.tsx
@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DiffViewer } from './DiffViewer';
+
+const original = `function greet(name) {
+ console.log("Hello, " + name);
+ return true;
+}`;
+
+const modified = `function greet(name: string) {
+ console.log(\`Hello, \${name}\`);
+ return name.length > 0;
+}`;
+
+const meta: Meta e.stopPropagation()}
+ onKeyDown={(e) => e.stopPropagation()}
+ role="dialog"
+ aria-modal="true"
+ aria-label="Command palette"
+ data-testid="command-palette"
+ >
+ cmd.id}
+ renderItem={(cmd, meta) => (
+
+ {cmd.icon && (
+ {cmd.icon}
+ )}
+ {cmd.label}
+ {cmd.description && (
+
+ {cmd.description}
+
+ )}
+ {cmd.shortcut && (
+
+ {cmd.shortcut}
+
+ )}
+
+ )}
+ filterFn={(cmd, query) =>
+ fuzzyMatch(cmd.label, query) ||
+ (cmd.description ? fuzzyMatch(cmd.description, query) : false) ||
+ (cmd.group ? fuzzyMatch(cmd.group, query) : false)
+ }
+ groupBy={(cmd) => cmd.group || ''}
+ onAction={(_key, cmd) => {
+ onSelect(cmd);
+ onClose();
+ }}
+ onDismiss={onClose}
+ placeholder={placeholder}
+ density="compact"
+ >
+
+ No matching commands
+
+
+
+
+
+
+ );
+});
+
+DiffViewer.displayName = 'DiffViewer';
diff --git a/packages/editors/src/components/diff-viewer/index.ts b/packages/editors/src/components/diff-viewer/index.ts
new file mode 100644
index 0000000..4e96330
--- /dev/null
+++ b/packages/editors/src/components/diff-viewer/index.ts
@@ -0,0 +1,2 @@
+export { DiffViewer } from './DiffViewer';
+export type { DiffViewerProps, DiffMode } from './DiffViewer';
diff --git a/packages/editors/src/components/index.ts b/packages/editors/src/components/index.ts
new file mode 100644
index 0000000..c843fac
--- /dev/null
+++ b/packages/editors/src/components/index.ts
@@ -0,0 +1,30 @@
+export { CodeEditor } from './code-editor';
+export type {
+ CodeEditorProps,
+ CodeEditorHandle,
+ EditorDiagnostic,
+ DiagnosticSeverity,
+ CursorPosition,
+ EditorDebugState,
+} from './code-editor';
+
+export { DiffViewer } from './diff-viewer';
+export type { DiffViewerProps, DiffMode } from './diff-viewer';
+
+export { Terminal } from './terminal';
+export type {
+ TerminalProps,
+ TerminalHandle,
+ TerminalSignal,
+ TerminalSearchOptions,
+ TerminalErrorInfo,
+} from './terminal';
+
+export { MarkdownPreview } from './markdown-preview';
+export type { MarkdownPreviewProps } from './markdown-preview';
+
+export { CommandPalette } from './command-palette';
+export type { CommandPaletteProps, CommandItem } from './command-palette';
+
+export { ObjectInspector } from './object-inspector';
+export type { ObjectInspectorProps, InspectorFormat } from './object-inspector';
diff --git a/packages/editors/src/components/markdown-preview/MarkdownPreview.module.css b/packages/editors/src/components/markdown-preview/MarkdownPreview.module.css
new file mode 100644
index 0000000..8479f43
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/MarkdownPreview.module.css
@@ -0,0 +1,99 @@
+.Root {
+ color: var(--ov-color-editor-fg, var(--ov-color-fg-default));
+ font-family: var(--ov-font-family-sans, sans-serif);
+ font-size: var(--ov-font-size-md, 14px);
+ line-height: var(--ov-line-height-md, 1.6);
+ padding: var(--ov-space-3, 12px);
+ overflow-y: auto;
+}
+
+.Root h1,
+.Root h2,
+.Root h3,
+.Root h4,
+.Root h5,
+.Root h6 {
+ color: var(--ov-color-fg-default);
+ font-weight: var(--ov-font-weight-bold, 600);
+ margin-top: var(--ov-space-4, 16px);
+ margin-bottom: var(--ov-space-2, 8px);
+}
+
+.Root h1 {
+ font-size: var(--ov-font-size-2xl, 24px);
+ border-bottom: 1px solid var(--ov-color-border-default);
+ padding-bottom: var(--ov-space-2, 8px);
+}
+
+.Root h2 {
+ font-size: var(--ov-font-size-xl, 20px);
+ border-bottom: 1px solid var(--ov-color-border-default);
+ padding-bottom: var(--ov-space-1, 4px);
+}
+
+.Root h3 {
+ font-size: var(--ov-font-size-lg, 16px);
+}
+
+.Root p {
+ margin-top: 0;
+ margin-bottom: var(--ov-space-3, 12px);
+}
+
+.Root ul,
+.Root ol {
+ margin-top: 0;
+ margin-bottom: var(--ov-space-3, 12px);
+ padding-left: var(--ov-space-5, 24px);
+}
+
+.Root li {
+ margin-bottom: var(--ov-space-1, 4px);
+}
+
+.Root figure {
+ margin: 0 0 var(--ov-space-3, 12px) 0;
+}
+
+/* Strip bottom margin from last paragraph inside blockquotes */
+.Root blockquote > p:last-child {
+ margin-bottom: 0;
+}
+
+/* Blockquote spacing between siblings */
+.Root blockquote {
+ margin-bottom: var(--ov-space-3, 12px);
+}
+
+/* Task list checkboxes — keep inline with text */
+.Root :global(.ov-md-checkbox) {
+ display: inline-grid;
+ width: auto;
+ vertical-align: middle;
+ margin-right: var(--ov-space-1, 4px);
+}
+
+/* Task list items should not show bullet */
+.Root li:has(> :global(.ov-md-checkbox)) {
+ list-style: none;
+}
+
+.Root img {
+ max-width: 100%;
+ height: auto;
+ border-radius: var(--ov-radius-sm, 4px);
+}
+
+/* Accordion spacing for details/summary blocks */
+.Root [data-ov-component='accordion'] {
+ margin-bottom: var(--ov-space-3, 12px);
+}
+
+.Loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--ov-space-4, 16px);
+ color: var(--ov-color-fg-muted);
+ font-size: var(--ov-font-size-sm, 13px);
+}
diff --git a/packages/editors/src/components/markdown-preview/MarkdownPreview.stories.tsx b/packages/editors/src/components/markdown-preview/MarkdownPreview.stories.tsx
new file mode 100644
index 0000000..521ec7f
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/MarkdownPreview.stories.tsx
@@ -0,0 +1,469 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarkdownPreview } from './MarkdownPreview';
+
+/** Checked-in SVG assets for offline/deterministic stories. */
+import placeholderSvg from './assets/placeholder.svg';
+import badgeBuildSvg from './assets/badge-build.svg';
+import badgeCoverageSvg from './assets/badge-coverage.svg';
+import badgeLicenseSvg from './assets/badge-license.svg';
+import badgeVersionSvg from './assets/badge-version.svg';
+import badgePrsSvg from './assets/badge-prs.svg';
+
+const richMarkdown = `# Omniview Platform Guide
+
+Welcome to the **Omniview** platform. This document exercises every markdown surface supported by the preview component.
+
+## Inline Formatting
+
+Regular text with **bold**, *italic*, ~~strikethrough~~, and **_bold italic_** combined. Here is some \`inline code\` and a [link to the docs](https://docs.omniview.dev).
+
+## Headings
+
+### Third-level heading
+#### Fourth-level heading
+##### Fifth-level heading
+###### Sixth-level heading
+
+## Lists
+
+### Unordered
+
+- Cluster management
+- Resource monitoring
+ - CPU & memory
+ - Disk I/O
+ - Read throughput
+ - Write throughput
+- Alerting & notifications
+
+### Ordered
+
+1. Connect to the cluster
+2. Select a namespace
+3. Choose a resource type
+ 1. Pods
+ 2. Services
+ 3. Deployments
+
+### Task List
+
+- [x] Set up project structure
+- [x] Implement CodeEditor component
+- [x] Implement DiffViewer component
+- [ ] Add integration tests
+- [ ] Performance benchmarks
+- [ ] Release v0.1.0
+
+## Code Blocks
+
+A quick shell command:
+
+\`\`\`bash
+kubectl get pods -n production --sort-by='.status.startTime'
+\`\`\`
+
+TypeScript with syntax highlighting:
+
+\`\`\`typescript
+import { createClient } from './api/client';
+
+const client = createClient();
+
+interface PodListResponse {
+ items: Array<{
+ metadata: { name: string; namespace: string };
+ status: { phase: 'Running' | 'Pending' | 'Failed' };
+ }>;
+}
+
+export async function fetchPods(namespace: string): Promise
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj
+
+
+Click to expand — deployment notes
+ +The v2.0 release requires a database migration. Run the following **before** deploying: + +\`\`\`bash +pnpm db:migrate --env production +\`\`\` + +After migration, verify with \`pnpm db:status\`. + +
+
+
+### Badges & Shields
+
+
+
+
+
+
+### Inline HTML elements
+
+This paragraph has strong, emphasis, Architecture decision records
+ +- **ADR-001** — Use Monaco Editor for code editing +- **ADR-002** — Use xterm.js for terminal emulation +- **ADR-003** — Monorepo with pnpm workspaces + +inline code, and a link.
+
+### Definition list (via HTML)
+
+-
+
- Kubernetes +
- An open-source container orchestration platform. +
- Helm +
- A package manager for Kubernetes. +
+ Omniview — A unified platform for Kubernetes management +
+ +
+
+
+
+
+
+
+
+## License
+
+MIT — see LICENSE for details.`,
+ allowHtml: true,
+ },
+};
diff --git a/packages/editors/src/components/markdown-preview/MarkdownPreview.test.tsx b/packages/editors/src/components/markdown-preview/MarkdownPreview.test.tsx
new file mode 100644
index 0000000..d41d2c6
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/MarkdownPreview.test.tsx
@@ -0,0 +1,199 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MarkdownPreview } from './MarkdownPreview';
+
+// Mock remark/rehype plugins
+vi.mock('remark-gfm', () => ({
+ __esModule: true,
+ default: () => {},
+}));
+
+vi.mock('rehype-raw', () => ({
+ __esModule: true,
+ default: () => {},
+}));
+
+vi.mock('rehype-sanitize', () => ({
+ __esModule: true,
+ default: () => {},
+ defaultSchema: { tagNames: [], attributes: {} },
+}));
+
+// Mock base-ui components as simple pass-throughs
+vi.mock('@omniview/base-ui', () => ({
+ CodeBlock: ({ children, language }: { children: string; language?: string }) => (
+ Development setup
+ +\`\`\`bash +git clone https://github.com/omniviewdev/omniview.git +cd omniview +pnpm install +pnpm dev +\`\`\` + +
+ {children}
+
+ ),
+ Code: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ Table: {
+ Root: ({ children }: { children: React.ReactNode }) => (
+ {children}+ ), + Separator: () =>
, + Checkbox: Object.assign( + ({ checked }: { checked?: boolean }) => ( + + ), + { + Root: ({ children }: { children: React.ReactNode }) => {children}, + Control: ({ children }: { children: React.ReactNode }) => {children}, + Indicator: () => , + }, + ), + Accordion: Object.assign( + ({ children }: { children: React.ReactNode }) => ( +
{children}
+ ),
+ {
+ Item: ({ children, title }: { children: React.ReactNode; title: string }) => (
+
+ {children}
+
+ ),
+ },
+ ),
+}));
+
+// Mock react-markdown
+vi.mock('react-markdown', () => ({
+ __esModule: true,
+ default: ({
+ children,
+ skipHtml,
+ remarkPlugins,
+ rehypePlugins,
+ components,
+ }: {
+ children: string;
+ skipHtml?: boolean;
+ remarkPlugins?: unknown[];
+ rehypePlugins?: unknown[];
+ components?: Record 0)}
+ data-has-rehype-plugins={String(Array.isArray(rehypePlugins) && rehypePlugins.length > 0)}
+ data-component-keys={components ? Object.keys(components).sort().join(',') : ''}
+ >
+ {children}
+
+ ),
+}));
+
+describe('MarkdownPreview', () => {
+ it('renders the preview container', () => {
+ render(/ that uses useId() for a stable, deterministic ID. */
+function DetailsAccordion({ summaryText, children }: { summaryText: string; children: ReactNode[] }) {
+ const id = useId();
+ const itemId = `md-details-${id}`;
+ return (
+
that uses useId() for a stable, deterministic ID. */
+function DetailsAccordion({ summaryText, children }: { summaryText: string; children: ReactNode[] }) {
+ const id = useId();
+ const itemId = `md-details-${id}`;
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+/** Stable component overrides for react-markdown */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MdProps = Record;
+
+const markdownComponents: Record> = {
+ // Code blocks & inline code
+ pre: ({ children }: MdProps) => <>{children},
+ code: ({ className, children }: MdProps) => {
+ const match = /language-([^\s]+)/.exec(className ?? '');
+ const text = String(children).replace(/\n$/, '');
+ // Fenced blocks: has language class OR contains newlines (multiline = block)
+ if (match || text.includes('\n')) {
+ return (
+
+ {text}
+
+ );
+ }
+ return {children};
+ },
+
+ // Tables
+ table: ({ children }: MdProps) => (
+
+ {children}
+
+ ),
+ thead: ({ children }: MdProps) => {children} ,
+ tbody: ({ children }: MdProps) => {children} ,
+ tr: ({ children }: MdProps) => {children} ,
+ th: ({ children, style }: MdProps) => (
+ {children}
+ ),
+ td: ({ children, style }: MdProps) => (
+ {children}
+ ),
+
+ // Links
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ a: ({ children, href, node, ...rest }: MdProps) => (
+
+ {children}
+
+ ),
+
+ // Blockquotes
+ blockquote: ({ children }: MdProps) => {children}
,
+
+ // Horizontal rules
+ hr: () => {body} ;
+ },
+ // Mark summary so details can filter it out; text is extracted from hast node
+ summary: ({ children }: MdProps) => (
+ {children}
+ ),
+
+ // Task list checkboxes — use compound parts for inline rendering
+ input: ({ type, checked, disabled }: MdProps) => {
+ if (type === 'checkbox') {
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ },
+};
+
+export const MarkdownPreview = forwardRef(
+ function MarkdownPreview({ content, allowHtml = false, className, ...props }, ref) {
+ return (
+
+
+ Loading…
+
+ }
+ >
+
+ {content}
+
+ );
+}
diff --git a/packages/editors/src/components/markdown-preview/assets/badge-build.svg b/packages/editors/src/components/markdown-preview/assets/badge-build.svg
new file mode 100644
index 0000000..1680019
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/badge-build.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/assets/badge-coverage.svg b/packages/editors/src/components/markdown-preview/assets/badge-coverage.svg
new file mode 100644
index 0000000..47a23c5
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/badge-coverage.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/assets/badge-license.svg b/packages/editors/src/components/markdown-preview/assets/badge-license.svg
new file mode 100644
index 0000000..d8c673f
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/badge-license.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/assets/badge-prs.svg b/packages/editors/src/components/markdown-preview/assets/badge-prs.svg
new file mode 100644
index 0000000..0ff3316
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/badge-prs.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/assets/badge-version.svg b/packages/editors/src/components/markdown-preview/assets/badge-version.svg
new file mode 100644
index 0000000..f1999cb
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/badge-version.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/assets/placeholder.svg b/packages/editors/src/components/markdown-preview/assets/placeholder.svg
new file mode 100644
index 0000000..73f0dda
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/assets/placeholder.svg
@@ -0,0 +1 @@
+
diff --git a/packages/editors/src/components/markdown-preview/index.ts b/packages/editors/src/components/markdown-preview/index.ts
new file mode 100644
index 0000000..84bb173
--- /dev/null
+++ b/packages/editors/src/components/markdown-preview/index.ts
@@ -0,0 +1,2 @@
+export { MarkdownPreview } from './MarkdownPreview';
+export type { MarkdownPreviewProps } from './MarkdownPreview';
diff --git a/packages/editors/src/components/object-inspector/ObjectInspector.module.css b/packages/editors/src/components/object-inspector/ObjectInspector.module.css
new file mode 100644
index 0000000..4c4bd53
--- /dev/null
+++ b/packages/editors/src/components/object-inspector/ObjectInspector.module.css
@@ -0,0 +1,135 @@
+.Root {
+ font-family: var(--ov-font-family-mono, monospace);
+ font-size: var(--ov-font-size-sm, 13px);
+ line-height: 1.5;
+ color: var(--ov-color-editor-fg, var(--ov-color-fg-default));
+ background: var(--ov-color-editor-bg, var(--ov-color-bg-surface));
+ border: 1px solid var(--ov-color-editor-border, var(--ov-color-border-default));
+ border-radius: var(--ov-radius-sm, 4px);
+ overflow: auto;
+}
+
+.Toolbar {
+ display: flex;
+ align-items: center;
+ gap: var(--ov-space-2, 8px);
+ padding: var(--ov-space-2, 8px);
+ border-bottom: 1px solid var(--ov-color-border-default);
+}
+
+.SearchInput {
+ flex: 1;
+ padding: var(--ov-space-1, 4px) var(--ov-space-2, 8px);
+ background: var(--ov-color-input-bg, transparent);
+ color: var(--ov-color-input-fg, var(--ov-color-fg-default));
+ border: 1px solid var(--ov-color-input-border, var(--ov-color-border-default));
+ border-radius: var(--ov-radius-sm, 4px);
+ font-family: inherit;
+ font-size: inherit;
+ outline: none;
+}
+
+.SearchInput::placeholder {
+ color: var(--ov-color-input-placeholder, var(--ov-color-fg-muted));
+}
+
+.SearchInput:focus-visible {
+ outline: 2px solid var(--ov-color-border-focus, var(--ov-color-fg-accent, #007fd4));
+ outline-offset: -1px;
+}
+
+.CopyButton {
+ padding: var(--ov-space-1, 4px) var(--ov-space-2, 8px);
+ background: var(--ov-color-button-secondary-bg, var(--ov-color-bg-subtle));
+ color: var(--ov-color-button-secondary-fg, var(--ov-color-fg-default));
+ border: 1px solid var(--ov-color-border-default);
+ border-radius: var(--ov-radius-sm, 4px);
+ font-size: var(--ov-font-size-xs, 11px);
+ cursor: pointer;
+}
+
+.CopyButton:hover {
+ background: var(--ov-color-button-secondary-hover-bg, var(--ov-color-bg-subtle));
+}
+
+.Tree {
+ padding: var(--ov-space-2, 8px);
+}
+
+.Node {
+ /* container for tree node */
+}
+
+.Row {
+ display: flex;
+ align-items: center;
+ padding: 1px 0;
+ cursor: default;
+ white-space: nowrap;
+}
+
+.Row:hover {
+ background: var(--ov-color-list-hover-bg, var(--ov-color-bg-subtle));
+}
+
+.RowHighlight {
+ background: var(--ov-color-editor-find-match-bg, rgba(255, 255, 0, 0.15));
+}
+
+.Chevron {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ font-size: 10px;
+ color: var(--ov-color-fg-muted);
+ transition: transform var(--ov-duration-fast, 100ms) var(--ov-ease-standard, ease);
+ cursor: pointer;
+}
+
+.ChevronExpanded {
+ transform: rotate(90deg);
+}
+
+.ChevronSpacer {
+ display: inline-block;
+ width: 16px;
+ flex-shrink: 0;
+}
+
+.Key {
+ color: var(--ov-syntax-property, var(--ov-color-fg-default));
+}
+
+.Colon {
+ color: var(--ov-syntax-punctuation, var(--ov-color-fg-muted));
+}
+
+.Value[data-type='string'] {
+ color: var(--ov-syntax-string, var(--ov-color-fg-accent, currentColor));
+}
+
+.Value[data-type='number'] {
+ color: var(--ov-syntax-number, var(--ov-color-fg-success, currentColor));
+}
+
+.Value[data-type='boolean'] {
+ color: var(--ov-syntax-keyword, var(--ov-color-fg-info, currentColor));
+}
+
+.Value[data-type='null'],
+.Value[data-type='undefined'] {
+ color: var(--ov-syntax-keyword, var(--ov-color-fg-info, currentColor));
+ font-style: italic;
+}
+
+.Preview {
+ color: var(--ov-color-fg-muted);
+ font-style: italic;
+}
+
+.Comma {
+ color: var(--ov-syntax-punctuation, var(--ov-color-fg-muted));
+}
diff --git a/packages/editors/src/components/object-inspector/ObjectInspector.stories.tsx b/packages/editors/src/components/object-inspector/ObjectInspector.stories.tsx
new file mode 100644
index 0000000..94a1378
--- /dev/null
+++ b/packages/editors/src/components/object-inspector/ObjectInspector.stories.tsx
@@ -0,0 +1,266 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ObjectInspector } from './ObjectInspector';
+
+const sampleData = {
+ apiVersion: 'v1',
+ kind: 'Pod',
+ metadata: {
+ name: 'my-pod',
+ namespace: 'default',
+ labels: {
+ app: 'web',
+ version: 'v1.2.3',
+ },
+ annotations: {
+ 'kubectl.kubernetes.io/last-applied-configuration': '...',
+ },
+ creationTimestamp: '2024-01-15T10:30:00Z',
+ uid: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ },
+ spec: {
+ containers: [
+ {
+ name: 'web',
+ image: 'nginx:latest',
+ ports: [{ containerPort: 80, protocol: 'TCP' }],
+ env: [
+ { name: 'NODE_ENV', value: 'production' },
+ { name: 'PORT', value: '8080' },
+ ],
+ resources: {
+ limits: { cpu: '500m', memory: '128Mi' },
+ requests: { cpu: '100m', memory: '64Mi' },
+ },
+ },
+ {
+ name: 'sidecar',
+ image: 'envoy:v1.28',
+ ports: [{ containerPort: 9901 }],
+ },
+ ],
+ restartPolicy: 'Always',
+ serviceAccountName: 'default',
+ nodeName: 'worker-node-1',
+ },
+ status: {
+ phase: 'Running',
+ conditions: [
+ { type: 'Ready', status: true, lastTransitionTime: '2024-01-15T10:31:00Z' },
+ { type: 'PodScheduled', status: true, lastTransitionTime: '2024-01-15T10:30:00Z' },
+ { type: 'ContainersReady', status: true, lastTransitionTime: '2024-01-15T10:31:00Z' },
+ { type: 'Initialized', status: true, lastTransitionTime: '2024-01-15T10:30:05Z' },
+ ],
+ containerStatuses: [
+ {
+ name: 'web',
+ ready: true,
+ restartCount: 0,
+ state: { running: { startedAt: '2024-01-15T10:30:30Z' } },
+ },
+ {
+ name: 'sidecar',
+ ready: true,
+ restartCount: 2,
+ state: { running: { startedAt: '2024-01-15T10:30:45Z' } },
+ },
+ ],
+ startTime: '2024-01-15T10:30:00Z',
+ podIP: '10.244.0.5',
+ hostIP: '192.168.1.100',
+ },
+};
+
+const meta: Meta = {
+ title: 'Editors/ObjectInspector',
+ component: ObjectInspector,
+ tags: ['autodocs'],
+ args: {
+ data: sampleData,
+ defaultExpanded: 2,
+ },
+ argTypes: {
+ format: { control: 'radio', options: ['json', 'yaml'] },
+ defaultExpanded: { control: { type: 'range', min: 0, max: 5, step: 1 } },
+ searchable: { control: 'boolean' },
+ copyable: { control: 'boolean' },
+ },
+ decorators: [
+ (Story) => (
+
+ ;
+
+export const Playground: Story = {};
+
+export const FullyExpanded: Story = {
+ args: {
+ defaultExpanded: true,
+ },
+};
+
+export const Collapsed: Story = {
+ args: {
+ defaultExpanded: 0,
+ },
+};
+
+export const WithSearch: Story = {
+ args: {
+ searchable: true,
+ defaultExpanded: true,
+ },
+};
+
+export const WithCopy: Story = {
+ args: {
+ copyable: true,
+ },
+};
+
+export const WithSearchAndCopy: Story = {
+ args: {
+ searchable: true,
+ copyable: true,
+ defaultExpanded: true,
+ },
+};
+
+export const YamlFormat: Story = {
+ args: {
+ format: 'yaml',
+ copyable: true,
+ },
+};
+
+export const SimpleArray: Story = {
+ args: {
+ data: ['hello', 42, true, null, { nested: 'value' }],
+ defaultExpanded: true,
+ },
+};
+
+/** Demonstrates handling of all primitive types. */
+export const PrimitiveTypes: Story = {
+ args: {
+ data: {
+ string: 'hello world',
+ number: 42,
+ float: 3.14159,
+ booleanTrue: true,
+ booleanFalse: false,
+ nullValue: null,
+ emptyString: '',
+ zero: 0,
+ negativeNumber: -100,
+ largeNumber: 9007199254740991,
+ },
+ defaultExpanded: true,
+ },
+};
+
+/** Deeply nested data structure. */
+export const DeepNesting: Story = {
+ args: {
+ data: {
+ level1: {
+ level2: {
+ level3: {
+ level4: {
+ level5: {
+ level6: {
+ value: 'deeply nested',
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ defaultExpanded: 3,
+ },
+};
+
+/** Circular reference handling — should display [Circular] instead of crashing. */
+export const CircularReference: Story = {
+ args: (() => {
+ const obj: Record = {
+ name: 'root',
+ children: [
+ { name: 'child-1', type: 'leaf' },
+ { name: 'child-2', type: 'leaf' },
+ ],
+ };
+ obj.self = obj;
+ (obj.children as Record[])[0]!.parent = obj;
+ return { data: obj, defaultExpanded: true };
+ })(),
+};
+
+/** Empty object and array edge cases. */
+export const EmptyContainers: Story = {
+ args: {
+ data: {
+ emptyObject: {},
+ emptyArray: [],
+ nonEmpty: { key: 'value' },
+ nonEmptyArray: [1, 2],
+ },
+ defaultExpanded: true,
+ },
+};
+
+/** Large flat object with many properties. */
+export const ManyProperties: Story = {
+ args: {
+ data: Object.fromEntries(
+ Array.from({ length: 50 }, (_, i) => [`property_${i + 1}`, `value_${i + 1}`]),
+ ),
+ defaultExpanded: true,
+ },
+};
+
+/** Complex Kubernetes service list response. */
+export const KubernetesServiceList: Story = {
+ args: {
+ data: {
+ apiVersion: 'v1',
+ kind: 'ServiceList',
+ items: [
+ {
+ metadata: { name: 'kubernetes', namespace: 'default' },
+ spec: {
+ type: 'ClusterIP',
+ clusterIP: '10.96.0.1',
+ ports: [{ port: 443, targetPort: 6443, protocol: 'TCP' }],
+ },
+ },
+ {
+ metadata: { name: 'web-frontend', namespace: 'production' },
+ spec: {
+ type: 'LoadBalancer',
+ clusterIP: '10.96.1.50',
+ ports: [
+ { name: 'http', port: 80, targetPort: 8080, protocol: 'TCP' },
+ { name: 'https', port: 443, targetPort: 8443, protocol: 'TCP' },
+ ],
+ selector: { app: 'web', tier: 'frontend' },
+ },
+ status: {
+ loadBalancer: {
+ ingress: [{ ip: '203.0.113.50' }],
+ },
+ },
+ },
+ ],
+ },
+ defaultExpanded: 2,
+ searchable: true,
+ copyable: true,
+ },
+};
diff --git a/packages/editors/src/components/object-inspector/ObjectInspector.test.tsx b/packages/editors/src/components/object-inspector/ObjectInspector.test.tsx
new file mode 100644
index 0000000..873b9a4
--- /dev/null
+++ b/packages/editors/src/components/object-inspector/ObjectInspector.test.tsx
@@ -0,0 +1,128 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ObjectInspector } from './ObjectInspector';
+
+const testData = {
+ name: 'test',
+ count: 42,
+ active: true,
+ items: ['a', 'b'],
+ nested: {
+ key: 'value',
+ },
+ nothing: null,
+};
+
+describe('ObjectInspector', () => {
+ it('renders the inspector container', () => {
+ render(;
+ render( = { name: 'test' };
+ circular.self = circular;
+ // Should not throw or infinite loop
+ expect(() => render( {
+ data: unknown;
+ format?: InspectorFormat;
+ defaultExpanded?: boolean | number;
+ searchable?: boolean;
+ copyable?: boolean;
+}
+
+function cn(...parts: Array): string {
+ return parts.filter(Boolean).join(' ');
+}
+
+function getType(value: unknown): string {
+ if (value === null) return 'null';
+ if (value === undefined) return 'undefined';
+ if (Array.isArray(value)) return 'array';
+ return typeof value;
+}
+
+function formatValue(value: unknown): string {
+ if (value === null) return 'null';
+ if (value === undefined) return 'undefined';
+ if (typeof value === 'string') return JSON.stringify(value);
+ if (typeof value === 'boolean') return String(value);
+ if (typeof value === 'number') return String(value);
+ return String(value);
+}
+
+function shouldExpand(defaultExpanded: boolean | number, depth: number): boolean {
+ if (typeof defaultExpanded === 'boolean') return defaultExpanded;
+ return depth < defaultExpanded;
+}
+
+function matchesSearch(key: string, value: unknown, query: string): boolean {
+ const q = query.toLowerCase();
+ if (key.toLowerCase().includes(q)) return true;
+ if (typeof value === 'string' && value.toLowerCase().includes(q)) return true;
+ if (typeof value === 'number' && String(value).includes(q)) return true;
+ if (typeof value === 'boolean' && String(value).includes(q)) return true;
+ return false;
+}
+
+/** Check if a value is a non-null object that can be tracked by WeakSet. */
+function isObjectRef(value: unknown): value is object {
+ return value !== null && (typeof value === 'object' || typeof value === 'function');
+}
+
+/** Subset of WeakSet used for ancestor tracking (read-only checks). */
+interface AncestorSet {
+ has(value: object): boolean;
+}
+
+/**
+ * Check if any descendant of `value` matches `query`. Results are cached
+ * per object+query in `cache` to avoid O(n²) re-scanning from each TreeNode.
+ */
+function subtreeMatches(
+ value: unknown,
+ query: string,
+ ancestors: AncestorSet,
+ cache: WeakMap,
+): boolean {
+ if (!query) return false;
+ const type = getType(value);
+ if (type !== 'object' && type !== 'array') return false;
+ if (value === null || value === undefined) return false;
+ if (isObjectRef(value) && ancestors.has(value)) return false;
+
+ // Return cached result if available
+ if (isObjectRef(value) && cache.has(value)) return cache.get(value)!;
+
+ const childAncestors: AncestorSet = {
+ has: (v: object) => v === value || ancestors.has(v),
+ };
+ let result = false;
+ for (const [k, v] of Object.entries(value as Record)) {
+ if (matchesSearch(k, v, query) || subtreeMatches(v, query, childAncestors, cache)) {
+ result = true;
+ break;
+ }
+ }
+
+ if (isObjectRef(value)) cache.set(value, result);
+ return result;
+}
+
+interface TreeNodeProps {
+ nodeKey: string;
+ value: unknown;
+ depth: number;
+ defaultExpanded: boolean | number;
+ searchQuery: string;
+ isLast: boolean;
+ /** Ancestor object references for circular reference detection. */
+ ancestors: AncestorSet;
+ /** Per-query cache for subtreeMatches results (shared across all nodes). */
+ searchCache: WeakMap;
+}
+
+function TreeNode({
+ nodeKey,
+ value,
+ depth,
+ defaultExpanded,
+ searchQuery,
+ isLast,
+ ancestors,
+ searchCache,
+}: TreeNodeProps) {
+ const type = getType(value);
+ const isExpandable = type === 'object' || type === 'array';
+
+ // Detect circular references by checking if this value is already an ancestor
+ const isCircular = isExpandable && isObjectRef(value) && ancestors.has(value);
+
+ const [expanded, setExpanded] = useState(
+ () => isExpandable && !isCircular && shouldExpand(defaultExpanded, depth),
+ );
+
+ // Track whether the node was force-expanded by search so we can restore
+ // the exact pre-search state when the search is cleared.
+ const searchExpandedRef = useRef(false);
+ const preSearchExpandedRef = useRef(false);
+
+ // Auto-expand when search matches a descendant
+ const hasDescendantMatch = useMemo(
+ () => searchQuery ? subtreeMatches(value, searchQuery, ancestors, searchCache) : false,
+ [searchQuery, value, ancestors, searchCache],
+ );
+
+ // Force expand when search finds matches in descendants
+ useEffect(() => {
+ if (searchQuery && hasDescendantMatch && isExpandable && !isCircular && !expanded) {
+ // Only snapshot pre-search state the first time we force-open
+ if (!searchExpandedRef.current) {
+ preSearchExpandedRef.current = expanded;
+ }
+ searchExpandedRef.current = true;
+ setExpanded(true);
+ }
+ // Restore pre-search state when search clears OR node stops matching
+ if (searchExpandedRef.current && (!searchQuery || !hasDescendantMatch)) {
+ searchExpandedRef.current = false;
+ setExpanded(preSearchExpandedRef.current);
+ }
+ }, [searchQuery, hasDescendantMatch, isExpandable, isCircular, expanded]);
+
+ // Create a new ancestors set that includes this value for children.
+ // WeakSet doesn't support iteration, so we use a duck-typed wrapper
+ // that checks both the parent set and the current value.
+ const childAncestors = useMemo(() => {
+ if (!isExpandable || !isObjectRef(value) || isCircular) return ancestors;
+ return {
+ has: (v: object) => v === value || ancestors.has(v),
+ };
+ }, [isExpandable, value, isCircular, ancestors]);
+
+ const entries = useMemo(() => {
+ if (!isExpandable || value === null || value === undefined || isCircular) return [];
+ return Object.entries(value as Record);
+ }, [isExpandable, value, isCircular]);
+
+ const toggle = useCallback(() => {
+ if (isExpandable && !isCircular) setExpanded((prev) => !prev);
+ }, [isExpandable, isCircular]);
+
+ const isHighlighted = searchQuery && matchesSearch(nodeKey, value, searchQuery);
+
+ const preview = isCircular
+ ? '[Circular]'
+ : isExpandable
+ ? type === 'array'
+ ? `Array(${(value as unknown[]).length})`
+ : `{${entries.length}}`
+ : null;
+
+ return (
+
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ toggle();
+ }
+ }}
+ tabIndex={0}
+ role="treeitem"
+ aria-expanded={isExpandable && !isCircular ? expanded : undefined}
+ data-testid={`inspector-node-${nodeKey}`}
+ >
+ {isExpandable && !isCircular ? (
+ ▸
+ ) : (
+
+ )}
+ {nodeKey}
+ :
+ {isExpandable ? (
+ {preview}
+ ) : (
+
+ {formatValue(value)}
+
+ )}
+ {!isLast && !expanded && ,}
+
+ {expanded &&
+ entries.map(([k, v], i) => (
+
{children};
+ },
+
+ // Tables
+ table: ({ children }: MdProps) => (
+ {children}, + + // Horizontal rules + hr: () =>
+
+ Loading…
+
+ }
+ >
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj
+
+ );
+}
+
+/** Shared empty WeakSet used as the initial ancestors set. */
+const EMPTY_ANCESTORS: AncestorSet = new WeakSet {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ toggle();
+ }
+ }}
+ tabIndex={0}
+ role="treeitem"
+ aria-expanded={isExpandable && !isCircular ? expanded : undefined}
+ data-testid={`inspector-node-${nodeKey}`}
+ >
+ {isExpandable && !isCircular ? (
+ ▸
+ ) : (
+
+ )}
+ {nodeKey}
+ :
+ {isExpandable ? (
+ {preview}
+ ) : (
+
+ {formatValue(value)}
+
+ )}
+ {!isLast && !expanded && ,}
+
+ {expanded &&
+ entries.map(([k, v], i) => (
+