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

package/src/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/src/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/src/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 "$lib/components/ui/button";
+	import { cn } from "$lib/components/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/src/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/src/lib/components/extended/json-viewer/json-viewer-toolbar.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { CopyButton } from "$lib/components/extra/copy-button";
+	import { Button } from "$lib/components/ui/button";
+	import { Separator } from "$lib/components/ui/separator";
+	import { cn } from "$lib/components/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/src/lib/components/extended/json-viewer/json-viewer-value.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import { cn } from "$lib/components/utils.js";
+	import {
+		detectJsonViewerDate,
+		formatJsonViewerRelativeTime,
+		getJsonViewerDataType,
+		getJsonViewerTypeClass,
+		isJsonViewerColor,
+		isJsonViewerUrl,
+	} from "./json-viewer.utils.js";
+
+	import type { ClassValue } from "clsx";
+
+	type Props = {
+		value: unknown;
+		showComma?: boolean;
+		class?: ClassValue;
+	};
+
+	let { value, showComma = false, class: className }: Props = $props();
+
+	let expanded = $state(false);
+
+	const dataType = $derived(getJsonViewerDataType(value));
+	const dateValue = $derived(detectJsonViewerDate(value));
+	const typeClass = $derived(getJsonViewerTypeClass(dataType));
+	const stringValue = $derived(typeof value === "string" ? value : "");
+	const isColorValue = $derived(typeof value === "string" && isJsonViewerColor(value));
+	const isUrlValue = $derived(typeof value === "string" && isJsonViewerUrl(value));
+	const isLongValue = $derived(typeof value === "string" && value.length > 50);
+	const isVeryLongValue = $derived(typeof value === "string" && value.length > 180);
+
+	/**
+	 * Toggles the expanded state for long scalar values.
+	 */
+	function toggleExpanded(): void {
+		expanded = !expanded;
+	}
+</script>
+
+<span data-slot="json-viewer-value">
+	{#if dataType === "string"}
+		{#if isColorValue}
+			<span class={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}>
+				<span class="h-3 w-3 shrink-0 rounded-[2px] border border-white/20" style={`background-color: ${stringValue};`}></span>
+				<span class={typeClass}>'{stringValue}'</span>
+			</span>
+		{:else if isUrlValue}
+			<span class="inline-flex flex-col items-start gap-1">
+				<a
+					href={stringValue}
+					target="_blank"
+					rel="noopener noreferrer"
+					class={cn(
+						typeClass,
+						isLongValue ? "whitespace-pre-wrap break-all" : "whitespace-nowrap",
+						"hover:text-blue-600 dark:hover:text-blue-400 hover:underline",
+						!expanded && isVeryLongValue && "line-clamp-3",
+						className,
+					)}
+					onclick={(event) => {
+						event.stopPropagation();
+					}}
+				>
+					'{stringValue}'
+				</a>
+				{#if isVeryLongValue}
+					<Button
+						size="sm"
+						variant="link"
+						class="text-muted-foreground hover:text-foreground h-auto px-0 text-xs"
+						onclick={(event) => {
+							event.stopPropagation();
+							toggleExpanded();
+						}}
+					>
+						{expanded ? "Show less" : "Show more"}
+					</Button>
+				{/if}
+			</span>
+		{:else if isVeryLongValue}
+			<span class="inline-flex flex-col items-start gap-1">
+				<span
+					class={cn(
+						typeClass,
+						"whitespace-pre-wrap break-all",
+						!expanded && "line-clamp-3",
+						className,
+					)}
+				>
+					'{stringValue}'
+				</span>
+				<Button
+					size="sm"
+					variant="link"
+					class="text-muted-foreground hover:text-foreground h-auto px-0 text-xs"
+					onclick={toggleExpanded}
+				>
+					{expanded ? "Show less" : "Show more"}
+				</Button>
+			</span>
+		{:else}
+			<span
+				class={cn(
+					typeClass,
+					isLongValue ? "whitespace-pre-wrap break-all" : "whitespace-nowrap",
+					className,
+				)}
+			>
+				'{stringValue}'
+			</span>
+		{/if}
+	{:else if dataType === "null"}
+		<span class={cn(typeClass, "whitespace-nowrap", className)}>null</span>
+	{:else}
+		<span class={cn(typeClass, "whitespace-nowrap", className)}>{String(value)}</span>
+	{/if}
+
+	{#if dateValue && dataType !== "object" && dataType !== "array"}
+		<span class="text-muted-foreground/70 ml-2 text-xs italic select-none">
+			// {formatJsonViewerRelativeTime(dateValue)}
+		</span>
+	{/if}
+
+	{#if showComma}
+		<span class="text-muted-foreground">,</span>
+	{/if}
+</span>