@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

package/dist/lib/components/extended/json-viewer/index.d.ts

@@ -0,0 +1,6 @@
+import Content from "./json-viewer-content.svelte";
+import LineNumbers from "./json-viewer-line-numbers.svelte";
+import Root from "./json-viewer.svelte";
+import Toolbar from "./json-viewer-toolbar.svelte";
+export type * from "./json-viewer.types.js";
+export { Root, Content, Toolbar, LineNumbers, Root as JsonViewer, Content as JsonViewerContent, Toolbar as JsonViewerToolbar, LineNumbers as JsonViewerLineNumbers, };

package/dist/lib/components/extended/json-viewer/index.js

@@ -0,0 +1,7 @@
+import Content from "./json-viewer-content.svelte";
+import LineNumbers from "./json-viewer-line-numbers.svelte";
+import Root from "./json-viewer.svelte";
+import Toolbar from "./json-viewer-toolbar.svelte";
+export { Root, Content, Toolbar, LineNumbers, 
+//
+Root as JsonViewer, Content as JsonViewerContent, Toolbar as JsonViewerToolbar, LineNumbers as JsonViewerLineNumbers, };

package/dist/lib/components/extended/json-viewer/json-viewer-content.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import JsonViewerLineNumbers from "./json-viewer-line-numbers.svelte";
+	import JsonViewerNode from "./json-viewer-node.svelte";
+
+	import type {
+		JsonViewerCollapseOn,
+		JsonViewerPathState,
+		JsonViewerTruncationSettings,
+	} from "./json-viewer.types.js";
+
+	type Props = {
+		data: unknown;
+		lineCount: number;
+		expandedPaths: JsonViewerPathState;
+		revealedPaths: JsonViewerPathState;
+		truncation: JsonViewerTruncationSettings;
+		showLineNumbers?: boolean;
+		showColorIndent?: boolean;
+		collapseOn?: JsonViewerCollapseOn;
+		onToggleExpanded: (path: string) => void;
+		onToggleRevealed: (path: string) => void;
+	};
+
+	let {
+		data,
+		lineCount,
+		expandedPaths,
+		revealedPaths,
+		truncation,
+		showLineNumbers = true,
+		showColorIndent = false,
+		collapseOn = "click",
+		onToggleExpanded,
+		onToggleRevealed,
+	}: Props = $props();
+</script>
+
+<div data-slot="json-viewer-content" class="w-full flex-1 overflow-auto p-4 pt-0">
+	<pre class="flex select-text">{#if showLineNumbers}<JsonViewerLineNumbers count={lineCount} />{/if}<code
+			data-slot="json-viewer-code"
+			class="block min-w-0 flex-1 text-left"
+		><JsonViewerNode
+				data={data}
+				path="root"
+				{expandedPaths}
+				{revealedPaths}
+				{truncation}
+				{showColorIndent}
+				{collapseOn}
+				onToggleExpanded={onToggleExpanded}
+				onToggleRevealed={onToggleRevealed}
+			/></code
+	></pre>
+</div>

package/dist/lib/components/extended/json-viewer/json-viewer-content.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { JsonViewerCollapseOn, JsonViewerPathState, JsonViewerTruncationSettings } from "./json-viewer.types.js";
+type Props = {
+    data: unknown;
+    lineCount: number;
+    expandedPaths: JsonViewerPathState;
+    revealedPaths: JsonViewerPathState;
+    truncation: JsonViewerTruncationSettings;
+    showLineNumbers?: boolean;
+    showColorIndent?: boolean;
+    collapseOn?: JsonViewerCollapseOn;
+    onToggleExpanded: (path: string) => void;
+    onToggleRevealed: (path: string) => void;
+};
+declare const JsonViewerContent: import("svelte").Component<Props, {}, "">;
+type JsonViewerContent = ReturnType<typeof JsonViewerContent>;
+export default JsonViewerContent;

package/dist/lib/components/extended/json-viewer/json-viewer-line-numbers.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	type Props = {
+		count: number;
+	};
+
+	let { count }: Props = $props();
+</script>
+
+<div
+	data-slot="json-viewer-line-numbers"
+	class="text-muted-foreground mr-4 hidden flex-col border-r pr-4 text-right select-none sm:flex"
+>
+	{#each Array.from({ length: count }) as _, index (index)}
+		<div class="h-6 text-xs leading-6 tabular-nums opacity-50">{index + 1}</div>
+	{/each}
+</div>

package/dist/lib/components/extended/json-viewer/json-viewer-line-numbers.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    count: number;
+};
+declare const JsonViewerLineNumbers: import("svelte").Component<Props, {}, "">;
+type JsonViewerLineNumbers = ReturnType<typeof JsonViewerLineNumbers>;
+export default JsonViewerLineNumbers;

package/dist/lib/components/extended/json-viewer/json-viewer-node.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+	import { Button } from "../../ui/button";
+	import { cn } from "../../utils.js";
+
+	import JsonViewerValue from "./json-viewer-value.svelte";
+	import Self from "./json-viewer-node.svelte";
+	import {
+		getJsonViewerDataType,
+		isJsonViewerCollection,
+		JSON_VIEWER_INDENT_CLASSES,
+	} from "./json-viewer.utils.js";
+
+	import type {
+		JsonViewerCollapseOn,
+		JsonViewerPathState,
+		JsonViewerTruncationSettings,
+	} from "./json-viewer.types.js";
+
+	type Props = {
+		data: unknown;
+		path: string;
+		level?: number;
+		objectKey?: string;
+		showComma?: boolean;
+		expandedPaths: JsonViewerPathState;
+		revealedPaths: JsonViewerPathState;
+		truncation: JsonViewerTruncationSettings;
+		showColorIndent?: boolean;
+		collapseOn?: JsonViewerCollapseOn;
+		onToggleExpanded: (path: string) => void;
+		onToggleRevealed: (path: string) => void;
+	};
+
+	let {
+		data,
+		path,
+		level = 0,
+		objectKey,
+		showComma = false,
+		expandedPaths,
+		revealedPaths,
+		truncation,
+		showColorIndent = false,
+		collapseOn = "click",
+		onToggleExpanded,
+		onToggleRevealed,
+	}: Props = $props();
+
+	const dataType = $derived(getJsonViewerDataType(data));
+	const isObject = $derived(dataType === "object");
+	const isArray = $derived(dataType === "array");
+	const isOpen = $derived(Boolean(expandedPaths[path]));
+	const entries = $derived(isObject ? Object.entries(data as Record<string, unknown>) : []);
+	const items = $derived(isArray ? (data as unknown[]) : []);
+	const canToggleReveal = $derived(
+		isArray && truncation.enabled && items.length > truncation.itemsPerArray,
+	);
+	const isRevealed = $derived(Boolean(revealedPaths[path]));
+	const visibleItems = $derived(
+		canToggleReveal && !isRevealed ? items.slice(0, truncation.itemsPerArray) : items,
+	);
+
+	/**
+	 * Toggles the current collection node.
+	 */
+	function toggleNode(): void {
+		onToggleExpanded(path);
+	}
+
+	/**
+	 * Toggles whether a truncated array shows all items.
+	 */
+	function toggleReveal(): void {
+		onToggleRevealed(path);
+	}
+
+	/**
+	 * Applies click-based toggling when configured for the current node.
+	 */
+	function handleTriggerClick(): void {
+		if (collapseOn === "click") {
+			toggleNode();
+		}
+	}
+
+	/**
+	 * Applies double-click toggling when configured for the current node.
+	 */
+	function handleTriggerDoubleClick(): void {
+		if (collapseOn === "doubleClick") {
+			toggleNode();
+		}
+	}
+
+	/**
+	 * Keeps collection nodes keyboard-toggleable regardless of pointer mode.
+	 */
+	function handleTriggerKeydown(event: KeyboardEvent): void {
+		if (event.key !== "Enter" && event.key !== " ") {
+			return;
+		}
+
+		event.preventDefault();
+		toggleNode();
+	}
+</script>
+
+{#if isObject}
+	<button
+		type="button"
+		data-slot="json-viewer-node-trigger"
+		class={cn(
+			"inline-flex h-6 w-full items-center rounded-sm px-1 text-left leading-6 select-none",
+			isOpen ? "hover:bg-muted-foreground/15" : "hover:bg-muted-foreground/10",
+			"-ml-1 cursor-pointer",
+		)}
+		onclick={handleTriggerClick}
+		ondblclick={handleTriggerDoubleClick}
+		onkeydown={handleTriggerKeydown}
+	>
+		{#if objectKey}
+			<span class="text-purple-600 dark:text-purple-400 inline-flex items-center font-medium">
+				'{objectKey}'
+				<span class="text-muted-foreground mx-1">: </span>
+			</span>
+		{/if}
+
+		<ChevronRightIcon class={cn("text-muted-foreground h-4 w-4 shrink-0 transition-transform", isOpen && "rotate-90")} />
+		<span class="text-muted-foreground">&#123;</span>
+
+		{#if !isOpen}
+			<span class="text-muted-foreground">...</span>
+			<span class="text-muted-foreground">&#125; ({entries.length} {entries.length === 1 ? "item" : "items"})</span>
+			{#if showComma}
+				<span class="text-muted-foreground">,</span>
+			{/if}
+		{/if}
+	</button>
+
+	{#if isOpen}<div
+			data-slot="json-viewer-node-content"
+			class={cn(
+				"pl-5",
+				entries.length > 0 &&
+					(showColorIndent
+						? JSON_VIEWER_INDENT_CLASSES[level % JSON_VIEWER_INDENT_CLASSES.length]
+						: "border-l border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.1)]"),
+			)}
+		>{#each entries as [key, value], index (`${path}.${key}`)}
+				{@const childPath = `${path}.${key}`}
+				{@const childIsCollection = isJsonViewerCollection(value)}
+				<div
+					class={cn(
+						"group rounded-md",
+						!childIsCollection && "flex min-h-6 items-start",
+						!childIsCollection && "hover:bg-muted-foreground/10",
+					)}
+				>
+					{#if childIsCollection}
+						<Self
+							data={value}
+							path={childPath}
+							level={level + 1}
+							objectKey={key}
+							showComma={index < entries.length - 1}
+							{expandedPaths}
+							{revealedPaths}
+							{truncation}
+							{showColorIndent}
+							{collapseOn}
+							onToggleExpanded={onToggleExpanded}
+							onToggleRevealed={onToggleRevealed}
+						/>
+					{:else}
+						<span class="text-purple-600 dark:text-purple-400 inline-flex items-center font-medium">'{key}'</span>
+						<span class="text-muted-foreground">: </span>
+						<JsonViewerValue value={value} showComma={index < entries.length - 1} />
+					{/if}
+				</div>{/each}</div
+		><div><span class="text-muted-foreground">&#125;</span>{#if showComma}<span
+					class="text-muted-foreground"
+				>,</span>{/if}</div>{/if}
+{:else if isArray}
+	<button
+		type="button"
+		data-slot="json-viewer-node-trigger"
+		class={cn(
+			"inline-flex h-6 w-full items-center rounded-sm px-1 text-left leading-6 select-none",
+			isOpen ? "hover:bg-muted-foreground/15" : "hover:bg-muted-foreground/10",
+			"-ml-1 cursor-pointer",
+		)}
+		onclick={handleTriggerClick}
+		ondblclick={handleTriggerDoubleClick}
+		onkeydown={handleTriggerKeydown}
+	>
+		{#if objectKey}
+			<span class="text-purple-600 dark:text-purple-400 inline-flex items-center font-medium">
+				'{objectKey}'
+				<span class="text-muted-foreground mx-1">: </span>
+			</span>
+		{/if}
+
+		<ChevronRightIcon class={cn("text-muted-foreground h-4 w-4 shrink-0 transition-transform", isOpen && "rotate-90")} />
+		<span class="text-muted-foreground">[</span>
+
+		{#if !isOpen}
+			<span class="text-muted-foreground">...</span>
+			<span class="text-muted-foreground">] ({items.length} {items.length === 1 ? "item" : "items"})</span>
+			{#if showComma}
+				<span class="text-muted-foreground">,</span>
+			{/if}
+		{/if}
+	</button>
+
+	{#if isOpen}<div
+			data-slot="json-viewer-node-content"
+			class={cn(
+				"pl-5",
+				items.length > 0 &&
+					(showColorIndent
+						? JSON_VIEWER_INDENT_CLASSES[level % JSON_VIEWER_INDENT_CLASSES.length]
+						: "border-l border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.1)]"),
+			)}
+		>{#each visibleItems as value, index (`${path}[${index}]`)}
+				{@const childPath = `${path}[${index}]`}
+				{@const childIsCollection = isJsonViewerCollection(value)}
+				<div
+					class={cn(
+						"group rounded-md",
+						!childIsCollection && "flex min-h-6 items-start hover:bg-muted-foreground/10",
+					)}
+				>
+					{#if childIsCollection}
+						<Self
+							data={value}
+							path={childPath}
+							level={level + 1}
+							showComma={index < items.length - 1}
+							{expandedPaths}
+							{revealedPaths}
+							{truncation}
+							{showColorIndent}
+							{collapseOn}
+							onToggleExpanded={onToggleExpanded}
+							onToggleRevealed={onToggleRevealed}
+						/>
+					{:else}
+						<JsonViewerValue value={value} showComma={index < items.length - 1} />
+					{/if}
+				</div>{/each}{#if canToggleReveal}<div class="pl-5">
+					<Button
+						size="sm"
+						variant="secondary"
+						class="bg-secondary/30 text-muted-foreground hover:bg-secondary/50 hover:text-foreground mt-1 h-auto px-2 py-0.5 text-xs"
+						onclick={toggleReveal}
+					>
+						{#if isRevealed}
+							Show Less
+						{:else}
+							Show {items.length - truncation.itemsPerArray} more items...
+						{/if}
+					</Button>
+				</div>{/if}</div
+		><div><span class="text-muted-foreground">]</span>{#if showComma}<span
+					class="text-muted-foreground"
+				>,</span>{/if}</div>{/if}
+{:else}
+	<JsonViewerValue value={data} {showComma} />
+{/if}

package/dist/lib/components/extended/json-viewer/json-viewer-node.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { JsonViewerCollapseOn, JsonViewerPathState, JsonViewerTruncationSettings } from "./json-viewer.types.js";
+type Props = {
+    data: unknown;
+    path: string;
+    level?: number;
+    objectKey?: string;
+    showComma?: boolean;
+    expandedPaths: JsonViewerPathState;
+    revealedPaths: JsonViewerPathState;
+    truncation: JsonViewerTruncationSettings;
+    showColorIndent?: boolean;
+    collapseOn?: JsonViewerCollapseOn;
+    onToggleExpanded: (path: string) => void;
+    onToggleRevealed: (path: string) => void;
+};
+declare const JsonViewerNode: import("svelte").Component<Props, {}, "">;
+type JsonViewerNode = ReturnType<typeof JsonViewerNode>;
+export default JsonViewerNode;

package/dist/lib/components/extended/json-viewer/json-viewer-panel.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import JsonViewerContent from "./json-viewer-content.svelte";
+	import JsonViewerToolbar from "./json-viewer-toolbar.svelte";
+	import {
+		calculateJsonViewerVisibleLineCount,
+		createJsonViewerExpandedPaths,
+		generateJsonViewerExpandedPaths,
+	} from "./json-viewer.utils.js";
+
+	import type {
+		JsonViewerCollapseOn,
+		JsonViewerPathState,
+		JsonViewerTruncationSettings,
+		JsonViewerToolbarActionsSnippetProps,
+	} from "./json-viewer.types.js";
+	import type { ClassValue } from "clsx";
+	import type { Snippet } from "svelte";
+
+	type Props = {
+		data: unknown;
+		copyText: string;
+		truncation: JsonViewerTruncationSettings;
+		showLineNumbers?: boolean;
+		showColorIndent?: boolean;
+		collapseOn?: JsonViewerCollapseOn;
+		defaultExpanded?: boolean | number;
+		title?: string | null;
+		toolbarClass?: ClassValue;
+		toolbarTitleClass?: ClassValue;
+		toolbarActionsClass?: ClassValue;
+		toolbarButtonClass?: ClassValue;
+		toolbarExpandButtonClass?: ClassValue;
+		toolbarCollapseButtonClass?: ClassValue;
+		toolbarCopyButtonClass?: ClassValue;
+		toolbarSeparatorClass?: ClassValue;
+		toolbarActions?: Snippet<[JsonViewerToolbarActionsSnippetProps]>;
+	};
+
+	let {
+		data,
+		copyText,
+		truncation,
+		showLineNumbers = true,
+		showColorIndent = false,
+		collapseOn = "click",
+		defaultExpanded = false,
+		title = null,
+		toolbarClass,
+		toolbarTitleClass,
+		toolbarActionsClass,
+		toolbarButtonClass,
+		toolbarExpandButtonClass,
+		toolbarCollapseButtonClass,
+		toolbarCopyButtonClass,
+		toolbarSeparatorClass,
+		toolbarActions,
+	}: Props = $props();
+
+	/**
+	 * Builds the initial expansion state for the current panel mount.
+	 */
+	function getInitialExpandedPaths(): JsonViewerPathState {
+		return createJsonViewerExpandedPaths(data, defaultExpanded);
+	}
+
+	const initialRevealedPaths: JsonViewerPathState = {};
+
+	let expandedPaths = $state<JsonViewerPathState>(getInitialExpandedPaths());
+	let revealedPaths = $state<JsonViewerPathState>(initialRevealedPaths);
+
+	const lineCount = $derived(
+		calculateJsonViewerVisibleLineCount(data, expandedPaths, revealedPaths, truncation),
+	);
+
+	/**
+	 * Toggles a collection path between expanded and collapsed.
+	 */
+	function toggleExpanded(path: string): void {
+		expandedPaths[path] = !expandedPaths[path];
+	}
+
+	/**
+	 * Toggles whether a truncated array shows all items for a path.
+	 */
+	function toggleRevealed(path: string): void {
+		revealedPaths[path] = !revealedPaths[path];
+	}
+
+	/**
+	 * Expands every collection node in the current data tree.
+	 */
+	function expandAll(): void {
+		expandedPaths = generateJsonViewerExpandedPaths(data);
+	}
+
+	/**
+	 * Collapses every collection node, including the root.
+	 */
+	function collapseAll(): void {
+		expandedPaths = {};
+	}
+</script>
+
+<JsonViewerToolbar
+	{copyText}
+	{title}
+	class={toolbarClass}
+	titleClass={toolbarTitleClass}
+	actionsClass={toolbarActionsClass}
+	buttonClass={toolbarButtonClass}
+	expandButtonClass={toolbarExpandButtonClass}
+	collapseButtonClass={toolbarCollapseButtonClass}
+	copyButtonClass={toolbarCopyButtonClass}
+	separatorClass={toolbarSeparatorClass}
+	actions={toolbarActions}
+	onExpandAll={expandAll}
+	onCollapseAll={collapseAll}
+/>
+
+<JsonViewerContent
+	{data}
+	{lineCount}
+	{expandedPaths}
+	{revealedPaths}
+	{truncation}
+	{showLineNumbers}
+	{showColorIndent}
+	{collapseOn}
+	onToggleExpanded={toggleExpanded}
+	onToggleRevealed={toggleRevealed}
+/>

package/dist/lib/components/extended/json-viewer/json-viewer-panel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { JsonViewerCollapseOn, JsonViewerTruncationSettings, JsonViewerToolbarActionsSnippetProps } from "./json-viewer.types.js";
+import type { ClassValue } from "clsx";
+import type { Snippet } from "svelte";
+type Props = {
+    data: unknown;
+    copyText: string;
+    truncation: JsonViewerTruncationSettings;
+    showLineNumbers?: boolean;
+    showColorIndent?: boolean;
+    collapseOn?: JsonViewerCollapseOn;
+    defaultExpanded?: boolean | number;
+    title?: string | null;
+    toolbarClass?: ClassValue;
+    toolbarTitleClass?: ClassValue;
+    toolbarActionsClass?: ClassValue;
+    toolbarButtonClass?: ClassValue;
+    toolbarExpandButtonClass?: ClassValue;
+    toolbarCollapseButtonClass?: ClassValue;
+    toolbarCopyButtonClass?: ClassValue;
+    toolbarSeparatorClass?: ClassValue;
+    toolbarActions?: Snippet<[JsonViewerToolbarActionsSnippetProps]>;
+};
+declare const JsonViewerPanel: import("svelte").Component<Props, {}, "">;
+type JsonViewerPanel = ReturnType<typeof JsonViewerPanel>;
+export default JsonViewerPanel;

package/dist/lib/components/extended/json-viewer/json-viewer-toolbar.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { CopyButton } from "../../extra/copy-button";
+	import { Button } from "../../ui/button";
+	import { Separator } from "../../ui/separator";
+	import { cn } from "../../utils.js";
+
+	import type { ClassValue } from "clsx";
+	import type { Snippet } from "svelte";
+
+	import type { JsonViewerToolbarActionsSnippetProps } from "./json-viewer.types.js";
+
+	type Props = {
+		copyText: string;
+		title?: string | null;
+		class?: ClassValue;
+		titleClass?: ClassValue;
+		actionsClass?: ClassValue;
+		buttonClass?: ClassValue;
+		expandButtonClass?: ClassValue;
+		collapseButtonClass?: ClassValue;
+		copyButtonClass?: ClassValue;
+		separatorClass?: ClassValue;
+		actions?: Snippet<[JsonViewerToolbarActionsSnippetProps]>;
+		onExpandAll: () => void;
+		onCollapseAll: () => void;
+	};
+
+	let {
+		copyText,
+		title = null,
+		class: className,
+		titleClass,
+		actionsClass,
+		buttonClass,
+		expandButtonClass,
+		collapseButtonClass,
+		copyButtonClass,
+		separatorClass,
+		actions,
+		onExpandAll,
+		onCollapseAll,
+	}: Props = $props();
+</script>
+
+<div
+	data-slot="json-viewer-toolbar"
+	class={cn("flex items-center justify-between gap-2 p-2", className)}
+>
+	{#if title}
+		<div class={cn("text-muted-foreground px-2 text-xs font-medium", titleClass)}>{title}</div>
+	{:else}
+		<div></div>
+	{/if}
+
+	<div class={cn("bg-muted/50 flex items-center overflow-hidden rounded-md border", actionsClass)}>
+		{#if actions}
+			{@render actions({ copyText, onExpandAll, onCollapseAll })}
+		{:else}
+			<Button
+				size="sm"
+				variant="ghost"
+				class={cn("h-7 rounded-none px-2 text-xs", buttonClass, expandButtonClass)}
+				onclick={onExpandAll}
+			>
+				Expand All
+			</Button>
+			<Separator class={cn("h-4", separatorClass)} orientation="vertical" />
+			<Button
+				size="sm"
+				variant="ghost"
+				class={cn("h-7 rounded-none px-2 text-xs", buttonClass, collapseButtonClass)}
+				onclick={onCollapseAll}
+			>
+				Collapse All
+			</Button>
+			<Separator class={cn("h-4", separatorClass)} orientation="vertical" />
+			<CopyButton
+				tabindex={0}
+				text={copyText}
+				class={cn(
+					"text-foreground hover:bg-muted h-7 w-7 rounded-none bg-transparent",
+					buttonClass,
+					copyButtonClass,
+				)}
+			/>
+		{/if}
+	</div>
+</div>

package/dist/lib/components/extended/json-viewer/json-viewer-toolbar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ClassValue } from "clsx";
+import type { Snippet } from "svelte";
+import type { JsonViewerToolbarActionsSnippetProps } from "./json-viewer.types.js";
+type Props = {
+    copyText: string;
+    title?: string | null;
+    class?: ClassValue;
+    titleClass?: ClassValue;
+    actionsClass?: ClassValue;
+    buttonClass?: ClassValue;
+    expandButtonClass?: ClassValue;
+    collapseButtonClass?: ClassValue;
+    copyButtonClass?: ClassValue;
+    separatorClass?: ClassValue;
+    actions?: Snippet<[JsonViewerToolbarActionsSnippetProps]>;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+declare const JsonViewerToolbar: import("svelte").Component<Props, {}, "">;
+type JsonViewerToolbar = ReturnType<typeof JsonViewerToolbar>;
+export default JsonViewerToolbar;