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

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;

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Button } from "../../ui/button";
+	import { cn } from "../../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>

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

@@ -0,0 +1,9 @@
+import type { ClassValue } from "clsx";
+type Props = {
+    value: unknown;
+    showComma?: boolean;
+    class?: ClassValue;
+};
+declare const JsonViewerValue: import("svelte").Component<Props, {}, "">;
+type JsonViewerValue = ReturnType<typeof JsonViewerValue>;
+export default JsonViewerValue;

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	import JsonViewerPanel from "./json-viewer-panel.svelte";
+	import {
+		getJsonViewerCopyText,
+		normalizeJsonViewerData,
+		resolveJsonViewerTruncation,
+	} from "./json-viewer.utils.js";
+
+	import type { JsonViewerProps } from "./json-viewer.types.js";
+
+	let {
+		data,
+		class: className,
+		truncation = undefined,
+		showLineNumbers = true,
+		showColorIndent = false,
+		collapseOn = "click",
+		defaultExpanded = false,
+		title = null,
+		toolbarClass,
+		toolbarTitleClass,
+		toolbarActionsClass,
+		toolbarButtonClass,
+		toolbarExpandButtonClass,
+		toolbarCollapseButtonClass,
+		toolbarCopyButtonClass,
+		toolbarSeparatorClass,
+		toolbarActions,
+		...restProps
+	}: JsonViewerProps = $props();
+
+	const normalizedData = $derived(normalizeJsonViewerData(data));
+	const resolvedTruncation = $derived(resolveJsonViewerTruncation(truncation));
+	const copyText = $derived(getJsonViewerCopyText(data));
+	const viewerKey = $derived(
+		JSON.stringify([
+			typeof defaultExpanded === "number" ? `depth:${defaultExpanded}` : defaultExpanded,
+			copyText,
+		]),
+	);
+</script>
+
+<div
+	data-slot="json-viewer"
+	class={cn(
+		"bg-secondary/10 dark:bg-muted/50 text-foreground relative flex w-full flex-col rounded-lg border font-mono text-[13px] leading-6",
+		className,
+	)}
+	{...restProps}
+>
+	{#key viewerKey}
+		<JsonViewerPanel
+			data={normalizedData}
+			{copyText}
+			truncation={resolvedTruncation}
+			{showLineNumbers}
+			{showColorIndent}
+			{collapseOn}
+			{defaultExpanded}
+			{title}
+			{toolbarClass}
+			{toolbarTitleClass}
+			{toolbarActionsClass}
+			{toolbarButtonClass}
+			{toolbarExpandButtonClass}
+			{toolbarCollapseButtonClass}
+			{toolbarCopyButtonClass}
+			{toolbarSeparatorClass}
+			{toolbarActions}
+		/>
+	{/key}
+</div>

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

@@ -0,0 +1,4 @@
+import type { JsonViewerProps } from "./json-viewer.types.js";
+declare const JsonViewer: import("svelte").Component<JsonViewerProps, {}, "">;
+type JsonViewer = ReturnType<typeof JsonViewer>;
+export default JsonViewer;

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

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { ClassValue } from "clsx";
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithoutChildren } from "../../utils.js";
+export type JsonViewerCollapseOn = "click" | "doubleClick";
+export type JsonViewerDataType = "string" | "number" | "boolean" | "null" | "object" | "array" | "unknown";
+export type JsonViewerPathState = Record<string, boolean>;
+export type JsonViewerTruncationSettings = {
+    enabled: boolean;
+    itemsPerArray: number;
+};
+export type JsonViewerTruncation = Partial<JsonViewerTruncationSettings>;
+export type JsonViewerToolbarActionsSnippetProps = {
+    copyText: string;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+export type JsonViewerProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> & {
+    data: unknown;
+    class?: ClassValue;
+    truncation?: JsonViewerTruncation;
+    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]>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,59 @@
+import type { JsonViewerDataType, JsonViewerPathState, JsonViewerTruncation, JsonViewerTruncationSettings } from "./json-viewer.types.js";
+export declare const DEFAULT_JSON_VIEWER_TRUNCATION: JsonViewerTruncationSettings;
+export declare const JSON_VIEWER_INDENT_CLASSES: readonly ["border-red-300/60 dark:border-red-700/60", "border-yellow-300/60 dark:border-yellow-700/60", "border-green-300/60 dark:border-green-700/60", "border-blue-300/60 dark:border-blue-700/60", "border-purple-300/60 dark:border-purple-700/60"];
+/**
+ * Resolves the public truncation prop into a complete settings object.
+ */
+export declare function resolveJsonViewerTruncation(truncation?: JsonViewerTruncation): JsonViewerTruncationSettings;
+/**
+ * Normalizes incoming data so JSON strings render as structured values when possible.
+ */
+export declare function normalizeJsonViewerData(data: unknown): unknown;
+/**
+ * Builds the copyable text representation for the viewer toolbar.
+ */
+export declare function getJsonViewerCopyText(data: unknown): string;
+/**
+ * Safely stringifies viewer data for display or clipboard use.
+ */
+export declare function stringifyJsonViewerValue(value: unknown): string;
+/**
+ * Returns the display data type for a JSON value.
+ */
+export declare function getJsonViewerDataType(value: unknown): JsonViewerDataType;
+/**
+ * Returns whether the supplied value renders as an expandable collection.
+ */
+export declare function isJsonViewerCollection(value: unknown): boolean;
+/**
+ * Creates the initial expansion map for the requested default depth.
+ */
+export declare function createJsonViewerExpandedPaths(data: unknown, defaultExpanded: boolean | number): JsonViewerPathState;
+/**
+ * Generates an expansion map for every collection path up to the requested depth.
+ */
+export declare function generateJsonViewerExpandedPaths(data: unknown, maxDepth?: number, currentDepth?: number, currentPath?: string): JsonViewerPathState;
+/**
+ * Counts the currently visible logical lines in the rendered JSON tree.
+ */
+export declare function calculateJsonViewerVisibleLineCount(data: unknown, expandedPaths: JsonViewerPathState, revealedPaths: JsonViewerPathState, truncation: JsonViewerTruncationSettings, path?: string): number;
+/**
+ * Returns the color class used for scalar values.
+ */
+export declare function getJsonViewerTypeClass(type: JsonViewerDataType): string;
+/**
+ * Detects date-like strings and unix timestamps for inline relative hints.
+ */
+export declare function detectJsonViewerDate(value: unknown): Date | null;
+/**
+ * Formats a date as a lightweight relative time label.
+ */
+export declare function formatJsonViewerRelativeTime(date: Date): string;
+/**
+ * Returns whether a string should render as an external link.
+ */
+export declare function isJsonViewerUrl(value: string): boolean;
+/**
+ * Returns whether a string should render with a color swatch.
+ */
+export declare function isJsonViewerColor(value: string): boolean;