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

package/src/lib/components/extended/inline-edit/inline-edit-status.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/components/utils.js";
+
+  import { useInlineEditContext } from "./inline-edit.context.svelte.js";
+
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type InlineEditContext = ReturnType<typeof useInlineEditContext>;
+
+  type Props = WithElementRef<
+    Omit<HTMLAttributes<HTMLSpanElement>, "children">,
+    HTMLSpanElement
+  > & {
+    idle?: Snippet<[InlineEditContext]>;
+    saving?: Snippet<[InlineEditContext]>;
+    saved?: Snippet<[InlineEditContext]>;
+    savingLabel?: string;
+    savedLabel?: string;
+  };
+
+  let {
+    ref = $bindable(null),
+    idle,
+    saving,
+    saved,
+    savingLabel = "Saving",
+    savedLabel = "Saved",
+    class: className,
+    "data-slot": dataSlot = "inline-edit-status",
+    ...restProps
+  }: Props = $props();
+
+  const state = useInlineEditContext();
+
+  /** Exposes the status wrapper through the optional bindable ref. */
+  function attachRef(node: HTMLSpanElement): () => void {
+    ref = node;
+
+    return () => {
+      if (ref === node) {
+        ref = null;
+      }
+    };
+  }
+</script>
+
+<span
+  {@attach attachRef}
+  data-slot={dataSlot}
+  data-status={state.status}
+  class={cn("contents", className)}
+  {...restProps}
+>
+  {#if state.status === "saving"}
+    {@render saving?.(state)}
+    <span class="sr-only" role="status" aria-live="polite">{savingLabel}</span>
+  {:else if state.status === "saved"}
+    {@render saved?.(state)}
+    <span class="sr-only" role="status" aria-live="polite">{savedLabel}</span>
+  {:else}
+    {@render idle?.(state)}
+  {/if}
+</span>

package/src/lib/components/extended/inline-edit/inline-edit.context.svelte.ts

@@ -0,0 +1,23 @@
+import { getContext, setContext } from "svelte";
+
+import type { InlineEditState } from "./inline-edit-state.class.svelte.js";
+
+const INLINE_EDIT_CONTEXT = Symbol.for("scn-inline-edit");
+
+/** Registers inline-edit state for the current compound component tree. */
+export function setInlineEditContext(state: InlineEditState): InlineEditState {
+  return setContext(INLINE_EDIT_CONTEXT, state);
+}
+
+/** Returns the inline-edit state owned by the nearest root component. */
+export function useInlineEditContext(): InlineEditState {
+  const state = getContext<InlineEditState | undefined>(INLINE_EDIT_CONTEXT);
+
+  if (!state) {
+    throw new Error(
+      "InlineEdit components must be used inside InlineEdit.Root",
+    );
+  }
+
+  return state;
+}

package/src/lib/components/extended/json-viewer/index.ts

@@ -0,0 +1,18 @@
+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/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>