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

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;

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

@@ -0,0 +1,235 @@
+export const DEFAULT_JSON_VIEWER_TRUNCATION = {
+    enabled: true,
+    itemsPerArray: 5,
+};
+export const JSON_VIEWER_INDENT_CLASSES = [
+    "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 function resolveJsonViewerTruncation(truncation) {
+    return {
+        enabled: truncation?.enabled ?? DEFAULT_JSON_VIEWER_TRUNCATION.enabled,
+        itemsPerArray: truncation?.itemsPerArray ?? DEFAULT_JSON_VIEWER_TRUNCATION.itemsPerArray,
+    };
+}
+/**
+ * Normalizes incoming data so JSON strings render as structured values when possible.
+ */
+export function normalizeJsonViewerData(data) {
+    if (typeof data !== "string") {
+        return data;
+    }
+    const trimmed = data.trim();
+    if (!trimmed) {
+        return data;
+    }
+    try {
+        return JSON.parse(data);
+    }
+    catch {
+        return data;
+    }
+}
+/**
+ * Builds the copyable text representation for the viewer toolbar.
+ */
+export function getJsonViewerCopyText(data) {
+    const normalized = normalizeJsonViewerData(data);
+    if (typeof data === "string" && normalized === data) {
+        return data;
+    }
+    return stringifyJsonViewerValue(normalized);
+}
+/**
+ * Safely stringifies viewer data for display or clipboard use.
+ */
+export function stringifyJsonViewerValue(value) {
+    try {
+        const result = JSON.stringify(value, null, 2);
+        return result ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * Returns the display data type for a JSON value.
+ */
+export function getJsonViewerDataType(value) {
+    if (value === null) {
+        return "null";
+    }
+    if (Array.isArray(value)) {
+        return "array";
+    }
+    const type = typeof value;
+    if (type === "string" || type === "number" || type === "boolean" || type === "object") {
+        return type;
+    }
+    return "unknown";
+}
+/**
+ * Returns whether the supplied value renders as an expandable collection.
+ */
+export function isJsonViewerCollection(value) {
+    const type = getJsonViewerDataType(value);
+    return type === "object" || type === "array";
+}
+/**
+ * Creates the initial expansion map for the requested default depth.
+ */
+export function createJsonViewerExpandedPaths(data, defaultExpanded) {
+    if (!isJsonViewerCollection(data)) {
+        return {};
+    }
+    if (defaultExpanded === true) {
+        return generateJsonViewerExpandedPaths(data);
+    }
+    if (typeof defaultExpanded === "number") {
+        return generateJsonViewerExpandedPaths(data, defaultExpanded);
+    }
+    return { root: true };
+}
+/**
+ * Generates an expansion map for every collection path up to the requested depth.
+ */
+export function generateJsonViewerExpandedPaths(data, maxDepth = Number.POSITIVE_INFINITY, currentDepth = 0, currentPath = "root") {
+    const paths = {};
+    if (!isJsonViewerCollection(data) || currentDepth > maxDepth) {
+        return paths;
+    }
+    paths[currentPath] = true;
+    if (Array.isArray(data)) {
+        data.forEach((value, index) => {
+            Object.assign(paths, generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}[${index}]`));
+        });
+        return paths;
+    }
+    Object.entries(data).forEach(([key, value]) => {
+        Object.assign(paths, generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}.${key}`));
+    });
+    return paths;
+}
+/**
+ * Counts the currently visible logical lines in the rendered JSON tree.
+ */
+export function calculateJsonViewerVisibleLineCount(data, expandedPaths, revealedPaths, truncation, path = "root") {
+    const type = getJsonViewerDataType(data);
+    if (type === "object") {
+        if (!expandedPaths[path]) {
+            return 1;
+        }
+        const entries = Object.entries(data);
+        if (entries.length === 0) {
+            return 2;
+        }
+        return (2 +
+            entries.reduce((count, [key, value]) => {
+                return (count +
+                    calculateJsonViewerVisibleLineCount(value, expandedPaths, revealedPaths, truncation, `${path}.${key}`));
+            }, 0));
+    }
+    if (type === "array") {
+        if (!expandedPaths[path]) {
+            return 1;
+        }
+        const items = data;
+        if (items.length === 0) {
+            return 2;
+        }
+        const showAll = Boolean(revealedPaths[path]);
+        const visibleItems = truncation.enabled && !showAll && items.length > truncation.itemsPerArray
+            ? items.slice(0, truncation.itemsPerArray)
+            : items;
+        const hiddenLine = visibleItems.length < items.length ? 1 : 0;
+        return (2 +
+            hiddenLine +
+            visibleItems.reduce((count, value, index) => {
+                return (count +
+                    calculateJsonViewerVisibleLineCount(value, expandedPaths, revealedPaths, truncation, `${path}[${index}]`));
+            }, 0));
+    }
+    return 1;
+}
+/**
+ * Returns the color class used for scalar values.
+ */
+export function getJsonViewerTypeClass(type) {
+    switch (type) {
+        case "string":
+            return "text-green-600 dark:text-green-400";
+        case "number":
+            return "text-orange-600 dark:text-orange-400";
+        case "boolean":
+            return "text-blue-600 dark:text-blue-400";
+        case "null":
+            return "text-muted-foreground";
+        default:
+            return "";
+    }
+}
+/**
+ * Detects date-like strings and unix timestamps for inline relative hints.
+ */
+export function detectJsonViewerDate(value) {
+    if (typeof value === "string") {
+        if (!/^\d{4}-\d{2}-\d{2}/.test(value)) {
+            return null;
+        }
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    if (typeof value === "number") {
+        if (value >= 946684800 && value <= 4102444800) {
+            return new Date(value * 1000);
+        }
+        if (value >= 946684800000 && value <= 4102444800000) {
+            return new Date(value);
+        }
+    }
+    return null;
+}
+/**
+ * Formats a date as a lightweight relative time label.
+ */
+export function formatJsonViewerRelativeTime(date) {
+    const diffInSeconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (Math.abs(diffInSeconds) < 60) {
+        return "just now";
+    }
+    const intervals = {
+        year: 31_536_000,
+        month: 2_592_000,
+        week: 604_800,
+        day: 86_400,
+        hour: 3_600,
+        minute: 60,
+    };
+    for (const [unit, seconds] of Object.entries(intervals)) {
+        const amount = Math.floor(Math.abs(diffInSeconds) / seconds);
+        if (amount < 1) {
+            continue;
+        }
+        const suffix = diffInSeconds > 0 ? "ago" : "from now";
+        return `${amount} ${unit}${amount === 1 ? "" : "s"} ${suffix}`;
+    }
+    return "just now";
+}
+/**
+ * Returns whether a string should render as an external link.
+ */
+export function isJsonViewerUrl(value) {
+    return /^https?:\/\//.test(value);
+}
+/**
+ * Returns whether a string should render with a color swatch.
+ */
+export function isJsonViewerColor(value) {
+    return /^#([0-9a-f]{3}){1,2}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value);
+}

package/dist/lib/components/extended/loaders/index.d.ts

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

package/dist/lib/components/extended/loaders/index.js

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

package/dist/lib/components/extended/loaders/loader-message.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import * as Item from '../../ui/item/index.js';
+  import type {
+    ItemSize,
+    ItemVariant,
+  } from '../../ui/item/item.svelte';
+  import { Spinner } from '../../ui/spinner/index.js';
+  import { cn, type WithElementRef } from '../../utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+  } & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    child,
+    title = 'Loading',
+    description = 'Come back in a few minutes',
+    class: cls,
+    ...rest
+  }: Props = $props();
+
+  const mergedProps = $derived({
+    class: cn('flex w-full flex-col gap-4', cls),
+    'data-slot': 'loader-message',
+    ...rest,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {#if mergedProps.children}
+      {@render mergedProps.children?.()}
+    {:else}
+      <Item.Root variant="muted">
+        <Item.Media>
+          <Spinner />
+        </Item.Media>
+        <Item.Content>
+          <Item.Header>
+            {#if typeof title === 'string'}
+              {title}
+            {:else}
+              {@render title?.()}
+            {/if}
+          </Item.Header>
+          <Item.Description>
+            {#if typeof description === 'string'}
+              {description}
+            {:else}
+              {@render description?.()}
+            {/if}
+          </Item.Description>
+        </Item.Content>
+      </Item.Root>
+    {/if}
+  </div>
+{/if}
+
+<!-- <div
+  class={cn('rounded-xl bg-linear-to-r from-muted/40 via-muted/30 to-muted/10 p-4', cls)}
+  {...rest}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex h-10 w-10 items-center justify-center rounded-sm bg-primary/10">
+      <RefreshCw class="size-5 animate-spin" />
+    </div>
+    <div class="flex flex-col text-sm leading-tight">
+      <span class="font-medium text-foreground">{title}</span>
+      <span class="text-muted-foreground">{description}</span>
+    </div>
+  </div>
+</div> -->

package/dist/lib/components/extended/loaders/loader-message.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ItemSize, ItemVariant } from '../../ui/item/item.svelte';
+import { type WithElementRef } from '../../utils';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+} & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+};
+declare const LoaderMessage: import("svelte").Component<Props, {}, "ref">;
+type LoaderMessage = ReturnType<typeof LoaderMessage>;
+export default LoaderMessage;

package/dist/lib/components/extended/loaders/loader-message.svelte.test.d.ts

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