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

package/dist/lib/components/extended/inline-edit/inline-edit-state.class.svelte.test.js

@@ -0,0 +1,115 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { InlineEditState } from "./inline-edit-state.class.svelte.js";
+afterEach(() => {
+    vi.useRealTimers();
+});
+describe("InlineEditState", () => {
+    it("normalizes a draft and stores the canonical committed value", async () => {
+        let value = "Original";
+        const onCommit = vi.fn(async () => "Canonical title");
+        const state = new InlineEditState({
+            id: "title",
+            getLabel: () => "Title",
+            getValue: () => value,
+            setValue: (nextValue) => {
+                value = nextValue;
+            },
+            onCommit,
+            normalize: (nextValue) => nextValue.trim(),
+        });
+        await state.begin();
+        state.setDraft("  Updated title  ");
+        await state.commit();
+        expect(onCommit).toHaveBeenCalledWith("Updated title");
+        expect(value).toBe("Canonical title");
+        expect(state.value).toBe("Canonical title");
+        expect(state.editing).toBe(false);
+        expect(state.status).toBe("saved");
+        state.destroy();
+    });
+    it("commits a supplied value for programmatic input addons", async () => {
+        let value = "Original";
+        const onCommit = vi.fn(async (nextValue) => nextValue);
+        const state = new InlineEditState({
+            id: "title",
+            getLabel: () => "Title",
+            getValue: () => value,
+            setValue: (nextValue) => {
+                value = nextValue;
+            },
+            onCommit,
+        });
+        await state.begin();
+        await state.commit("Generated title");
+        expect(onCommit).toHaveBeenCalledWith("Generated title");
+        expect(value).toBe("Generated title");
+        expect(state.draft).toBe("Generated title");
+        expect(state.editing).toBe(false);
+        state.destroy();
+    });
+    it("keeps the editor open when validation fails", async () => {
+        let value = "Original";
+        const onCommit = vi.fn(async () => undefined);
+        const state = new InlineEditState({
+            id: "title",
+            getLabel: () => "Title",
+            getValue: () => value,
+            setValue: (nextValue) => {
+                value = nextValue;
+            },
+            onCommit,
+            validate: (nextValue) => (nextValue ? null : "Title is required"),
+        });
+        await state.begin();
+        state.draft = "";
+        await state.commit();
+        expect(state.error).toBe("Title is required");
+        expect(state.editing).toBe(true);
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+    it("ignores duplicate commits while persistence is pending", async () => {
+        let value = "Original";
+        let resolveCommit = () => undefined;
+        const pendingCommit = new Promise((resolve) => {
+            resolveCommit = resolve;
+        });
+        const onCommit = vi.fn(() => pendingCommit);
+        const state = new InlineEditState({
+            id: "title",
+            getLabel: () => "Title",
+            getValue: () => value,
+            setValue: (nextValue) => {
+                value = nextValue;
+            },
+            onCommit,
+        });
+        await state.begin();
+        state.draft = "Updated";
+        const firstCommit = state.commit();
+        await state.commit();
+        expect(onCommit).toHaveBeenCalledOnce();
+        resolveCommit("Updated");
+        await firstCommit;
+        state.destroy();
+    });
+    it("clears saved feedback after the configured duration", async () => {
+        vi.useFakeTimers();
+        let value = "Original";
+        const state = new InlineEditState({
+            id: "title",
+            getLabel: () => "Title",
+            getValue: () => value,
+            setValue: (nextValue) => {
+                value = nextValue;
+            },
+            onCommit: async (nextValue) => nextValue,
+            getSuccessDuration: () => 1500,
+        });
+        await state.begin();
+        state.draft = "Updated";
+        await state.commit();
+        expect(state.status).toBe("saved");
+        await vi.advanceTimersByTimeAsync(1500);
+        expect(state.status).toBe("idle");
+    });
+});

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "../../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/dist/lib/components/extended/inline-edit/inline-edit-status.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type WithElementRef } from "../../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;
+};
+declare const InlineEditStatus: import("svelte").Component<Props, {}, "ref">;
+type InlineEditStatus = ReturnType<typeof InlineEditStatus>;
+export default InlineEditStatus;

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

@@ -0,0 +1,5 @@
+import type { InlineEditState } from "./inline-edit-state.class.svelte.js";
+/** Registers inline-edit state for the current compound component tree. */
+export declare function setInlineEditContext(state: InlineEditState): InlineEditState;
+/** Returns the inline-edit state owned by the nearest root component. */
+export declare function useInlineEditContext(): InlineEditState;

package/dist/lib/components/extended/inline-edit/inline-edit.context.svelte.js

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

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;