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

package/dist/app.css

@@ -118,4 +118,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './lib/index.ts';
-export type * from './lib/components/extra/types.ts';
+export * from "./lib/index.ts";
+export type * from "./lib/components/extra/types.ts";

package/dist/lib/components/extended/confirmation/confirmation-prompt.svelte

@@ -1,43 +1,78 @@
 <script lang="ts">
-	import { AlertDialog, buttonVariants } from '@tanglemedia/svelte-starter-ui-shadcn';
+	import { AlertDialog } from '@tanglemedia/svelte-starter-ui-shadcn';
+	import { cn } from '../../utils.js';
 	import { useConfirmationDialog } from './confirmation-state.svelte';
 
 	const dialog = useConfirmationDialog();
 
-	const { title, description, onClose, onCancel, onConfirm } = $derived(dialog.props);
+	const { title, description, confirmLabel, cancelLabel, variant, onClose, onCancel, onConfirm } =
+		$derived(dialog.props);
 
-	const close = (s: boolean) => {
-		dialog.hide();
-		if (onClose) {
-			onClose(s);
+	/** Prevents double-settle when dismiss handlers and AlertDialog close both run. */
+	let settled = $state(false);
+
+	$effect(() => {
+		if (dialog.open) {
+			settled = false;
+		}
+	});
+
+	/**
+	 * Closes the dialog and reports the user's choice once.
+	 */
+	const close = (s: boolean): void => {
+		if (settled) {
+			return;
 		}
-	};
 
-	// const handleOnClose = (s: boolean) => {
-	// 	close(s);
-	// };
+		settled = true;
+		dialog.hide();
+		onClose?.(s);
+	};
 
-	const handleOnConfirm = () => {
+	/**
+	 * Confirms the pending action and closes the dialog.
+	 */
+	const handleOnConfirm = (): void => {
 		onConfirm?.();
 		close(true);
 	};
-	const handleOnCancel = () => {
+
+	/**
+	 * Cancels the pending action and closes the dialog.
+	 */
+	const handleOnCancel = (): void => {
 		onCancel?.();
 		close(false);
 	};
 </script>
 
 <AlertDialog.Root bind:open={dialog.open}>
-	<AlertDialog.Content>
+	<AlertDialog.Content
+		class="sm:max-w-md"
+		interactOutsideBehavior="close"
+		onInteractOutside={handleOnCancel}
+		onEscapeKeydown={handleOnCancel}
+	>
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
 			<AlertDialog.Description>
 				{description}
 			</AlertDialog.Description>
 		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel onclick={handleOnCancel}>Cancel</AlertDialog.Cancel>
-			<AlertDialog.Action onclick={handleOnConfirm}>Continue</AlertDialog.Action>
+		<AlertDialog.Footer class="grid grid-cols-2 sm:flex-row sm:justify-stretch">
+			<AlertDialog.Cancel class="h-9 w-full min-w-0 sm:flex-1" onclick={handleOnCancel}>
+				{cancelLabel}
+			</AlertDialog.Cancel>
+			<AlertDialog.Action
+				class={cn(
+					'h-9 w-full min-w-0 sm:flex-1',
+					variant === 'destructive' && 'bg-destructive text-white hover:bg-destructive/90'
+				)}
+				onclick={handleOnConfirm}
+			>
+				{confirmLabel}
+			</AlertDialog.Action>
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.d.ts

@@ -1,16 +1,34 @@
+export type ConfirmationDialogVariant = "default" | "destructive";
 export type ConfirmationDialogProps = {
     title?: string;
     description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmationDialogVariant;
     onConfirm?: () => void;
     onCancel?: () => void;
     onClose?: (state: boolean) => void;
 };
+/**
+ * Builds the shared copy for deleting a module entity.
+ *
+ * @example
+ * deleteConfirmation("character")
+ * // { title: "Delete Character", description: "Are you sure you would like to delete Character?", ... }
+ */
+export declare function deleteConfirmation(item: string): Required<Pick<ConfirmationDialogProps, "title" | "description" | "confirmLabel" | "cancelLabel" | "variant">>;
+/**
+ * Shared confirmation dialog state used by `Confirmation.Provider`.
+ */
 export declare class ConfirmationDialogState {
     props: ConfirmationDialogProps;
     open: boolean;
     toggle(): void;
     show(): void;
     hide(): void;
+    /**
+     * Opens the confirmation dialog and resolves with the user's choice.
+     */
     confirm(props: Partial<ConfirmationDialogProps>): Promise<boolean>;
 }
 export declare function initConfirmationDialog(): void;

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.js

@@ -1,8 +1,50 @@
 import { getContext, setContext } from "svelte";
 const defaultProps = {
-    title: 'Are you sure?',
-    description: 'This action cannot be undone.'
+    title: "Are you sure?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Yes",
+    cancelLabel: "No",
+    variant: "default",
 };
+/**
+ * Title-cases entity labels used in delete confirmation copy.
+ *
+ * @example
+ * toTitleCaseLabel('chatbot') // 'Chatbot'
+ * toTitleCaseLabel('MCP server') // 'MCP Server'
+ */
+function toTitleCaseLabel(value) {
+    return value
+        .trim()
+        .split(/\s+/)
+        .map((word) => {
+        if (word === word.toUpperCase() && word.length > 1) {
+            return word;
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+        .join(" ");
+}
+/**
+ * Builds the shared copy for deleting a module entity.
+ *
+ * @example
+ * deleteConfirmation("character")
+ * // { title: "Delete Character", description: "Are you sure you would like to delete Character?", ... }
+ */
+export function deleteConfirmation(item) {
+    const label = toTitleCaseLabel(item);
+    return {
+        title: `Delete ${label}`,
+        description: `Are you sure you would like to delete ${label}?`,
+        confirmLabel: "Yes",
+        cancelLabel: "No",
+        variant: "destructive",
+    };
+}
+/**
+ * Shared confirmation dialog state used by `Confirmation.Provider`.
+ */
 export class ConfirmationDialogState {
     props = $state({ ...defaultProps });
     open = $state(false);
@@ -15,8 +57,11 @@ export class ConfirmationDialogState {
     hide() {
         this.open = false;
     }
+    /**
+     * Opens the confirmation dialog and resolves with the user's choice.
+     */
     async confirm(props) {
-        const p = { ...defaultProps, ...props, };
+        const p = { ...defaultProps, ...props };
         return new Promise((ok) => {
             this.show();
             const { onClose, ...rest } = p;
@@ -27,14 +72,14 @@ export class ConfirmationDialogState {
                         onClose(s);
                     }
                     ok(s);
-                }
+                },
             };
         });
     }
 }
 const ctxKey = `--confirmation-dialog`;
 export function initConfirmationDialog() {
-    setContext(Symbol.for(ctxKey), new ConfirmationDialogState);
+    setContext(Symbol.for(ctxKey), new ConfirmationDialogState());
 }
 export function getConfirmationDialog() {
     return getContext(Symbol.for(ctxKey));
@@ -42,7 +87,7 @@ export function getConfirmationDialog() {
 export function useConfirmationDialog() {
     const dialog = getConfirmationDialog();
     if (!dialog) {
-        throw Error('Dialog has not been initialized. Please make sure you have called to confirmation provider');
+        throw Error("Dialog has not been initialized. Please make sure you have called to confirmation provider");
     }
     return dialog;
 }

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.test.d.ts

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

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ConfirmationDialogState, deleteConfirmation, initConfirmationDialog, getConfirmationDialog, useConfirmationDialog, } from './confirmation-state.svelte.js';
+const { mockSetContext, mockGetContext } = vi.hoisted(() => ({
+    mockSetContext: vi.fn(),
+    mockGetContext: vi.fn(),
+}));
+vi.mock('svelte', async (ori) => {
+    const actual = await ori();
+    return { ...actual, setContext: mockSetContext, getContext: mockGetContext };
+});
+describe('ConfirmationDialogState', () => {
+    it('starts with open false and the default props', () => {
+        const state = new ConfirmationDialogState();
+        expect(state.open).toBe(false);
+        expect(state.props.title).toBe('Are you sure?');
+        expect(state.props.description).toBe('This action cannot be undone.');
+    });
+    it('show() sets open to true', () => {
+        const state = new ConfirmationDialogState();
+        state.show();
+        expect(state.open).toBe(true);
+    });
+    it('hide() sets open to false', () => {
+        const state = new ConfirmationDialogState();
+        state.show();
+        state.hide();
+        expect(state.open).toBe(false);
+    });
+    it('toggle() flips open between true and false', () => {
+        const state = new ConfirmationDialogState();
+        state.toggle();
+        expect(state.open).toBe(true);
+        state.toggle();
+        expect(state.open).toBe(false);
+    });
+    describe('confirm()', () => {
+        it('shows the dialog and merges the provided props', async () => {
+            const state = new ConfirmationDialogState();
+            state.confirm({ title: 'Delete?', description: 'Irreversible.' });
+            expect(state.open).toBe(true);
+            expect(state.props.title).toBe('Delete?');
+            expect(state.props.description).toBe('Irreversible.');
+        });
+        it('uses default title and description when props are omitted', async () => {
+            const state = new ConfirmationDialogState();
+            state.confirm({});
+            expect(state.props.title).toBe('Are you sure?');
+            expect(state.props.description).toBe('This action cannot be undone.');
+        });
+        it('resolves with true when onClose is called with true', async () => {
+            const state = new ConfirmationDialogState();
+            const promise = state.confirm({});
+            state.props.onClose?.(true);
+            await expect(promise).resolves.toBe(true);
+        });
+        it('resolves with false when onClose is called with false', async () => {
+            const state = new ConfirmationDialogState();
+            const promise = state.confirm({});
+            state.props.onClose?.(false);
+            await expect(promise).resolves.toBe(false);
+        });
+        it('invokes the provided onClose callback before resolving', async () => {
+            const onClose = vi.fn();
+            const state = new ConfirmationDialogState();
+            const promise = state.confirm({ onClose });
+            state.props.onClose?.(true);
+            await promise;
+            expect(onClose).toHaveBeenCalledWith(true);
+        });
+    });
+});
+describe('confirmation context helpers', () => {
+    beforeEach(() => {
+        mockSetContext.mockClear();
+        mockGetContext.mockClear();
+    });
+    it('initConfirmationDialog calls setContext with a ConfirmationDialogState instance', () => {
+        initConfirmationDialog();
+        expect(mockSetContext).toHaveBeenCalledOnce();
+        const [, instance] = mockSetContext.mock.calls[0];
+        expect(instance).toBeInstanceOf(ConfirmationDialogState);
+    });
+    it('getConfirmationDialog returns the value from getContext', () => {
+        const state = new ConfirmationDialogState();
+        mockGetContext.mockReturnValue(state);
+        expect(getConfirmationDialog()).toBe(state);
+        expect(mockGetContext).toHaveBeenCalledOnce();
+    });
+    it('useConfirmationDialog returns the dialog when context is initialized', () => {
+        const state = new ConfirmationDialogState();
+        mockGetContext.mockReturnValue(state);
+        expect(useConfirmationDialog()).toBe(state);
+    });
+    it('useConfirmationDialog throws when context has not been initialized', () => {
+        mockGetContext.mockReturnValue(undefined);
+        expect(() => useConfirmationDialog()).toThrowError('Dialog has not been initialized');
+    });
+});
+describe('deleteConfirmation', () => {
+    it('builds Title Case delete copy for a module entity', () => {
+        expect(deleteConfirmation('character')).toEqual({
+            title: 'Delete Character',
+            description: 'Are you sure you would like to delete Character?',
+            confirmLabel: 'Yes',
+            cancelLabel: 'No',
+            variant: 'destructive',
+        });
+    });
+    it('title-cases multi-word entity labels', () => {
+        expect(deleteConfirmation('input check').title).toBe('Delete Input Check');
+        expect(deleteConfirmation('MCP server').title).toBe('Delete MCP Server');
+        expect(deleteConfirmation('chatbot').title).toBe('Delete Chatbot');
+    });
+});

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

@@ -1,4 +1,4 @@
-import Provider from './confirmation-provider.svelte';
-import Prompt from './confirmation-prompt.svelte';
-import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
-export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };
+import Provider from "./confirmation-provider.svelte";
+import Prompt from "./confirmation-prompt.svelte";
+import { getConfirmationDialog, useConfirmationDialog, ConfirmationDialogState, deleteConfirmation } from "./confirmation-state.svelte";
+export { Provider, Provider as Root, Prompt, getConfirmationDialog, useConfirmationDialog, ConfirmationDialogState, deleteConfirmation, };

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

@@ -1,4 +1,4 @@
-import Provider from './confirmation-provider.svelte';
-import Prompt from './confirmation-prompt.svelte';
-import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
-export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };
+import Provider from "./confirmation-provider.svelte";
+import Prompt from "./confirmation-prompt.svelte";
+import { getConfirmationDialog, useConfirmationDialog, ConfirmationDialogState, deleteConfirmation, } from "./confirmation-state.svelte";
+export { Provider, Provider as Root, Prompt, getConfirmationDialog, useConfirmationDialog, ConfirmationDialogState, deleteConfirmation, };

package/dist/lib/components/extended/image-link/image-link.svelte.test.d.ts

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

package/dist/lib/components/extended/image-link/image-link.svelte.test.js

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import ImageLink from './image-link.svelte';
+describe('ImageLink', () => {
+    it('renders an anchor element', () => {
+        const { container } = render(ImageLink);
+        expect(container.querySelector('a')).toBeTruthy();
+    });
+    it('uses the provided href', () => {
+        const { container } = render(ImageLink, { props: { href: '/dashboard' } });
+        expect(container.querySelector('a')?.getAttribute('href')).toBe('/dashboard');
+    });
+    it('falls back to ## when no href is provided', () => {
+        const { container } = render(ImageLink);
+        expect(container.querySelector('a')?.getAttribute('href')).toBe('##');
+    });
+    it('renders a background image when src is provided', () => {
+        const { container } = render(ImageLink, { props: { src: '/hero.jpg' } });
+        const img = container.querySelector('img');
+        expect(img).toBeTruthy();
+        expect(img?.getAttribute('src')).toBe('/hero.jpg');
+    });
+    it('does not render an img element when src is absent', () => {
+        const { container } = render(ImageLink);
+        expect(container.querySelector('img')).toBeNull();
+    });
+});

package/dist/lib/components/extended/image-link/index.d.ts

@@ -1,2 +1,2 @@
-import Root from './image-link.svelte';
+import Root from "./image-link.svelte";
 export { Root, Root as ImageLink };

package/dist/lib/components/extended/image-link/index.js

@@ -1,2 +1,2 @@
-import Root from './image-link.svelte';
+import Root from "./image-link.svelte";
 export { Root, Root as ImageLink };

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

@@ -1,3 +1,8 @@
-export * as Skeletons from './skeletons/index.ts';
-export * as ImageLink from './image-link/index.ts';
-export * as Confirmation from './confirmation/index.ts';
+export * as Skeletons from "./skeletons/index.ts";
+export * as ImageLink from "./image-link/index.ts";
+export * as Confirmation from "./confirmation/index.ts";
+export * as Loaders from "./loaders/index.ts";
+export * as JsonViewer from "./json-viewer/index.ts";
+export * as InlineEdit from "./inline-edit/index.ts";
+export { InlineEditState } from "./inline-edit/index.ts";
+export type { InlineEditCommit, InlineEditNormalize, InlineEditStateOptions, InlineEditStatus, InlineEditValidate, } from "./inline-edit/index.ts";

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

@@ -1,3 +1,7 @@
 export * as Skeletons from "./skeletons/index.js";
 export * as ImageLink from "./image-link/index.js";
 export * as Confirmation from "./confirmation/index.js";
+export * as Loaders from "./loaders/index.js";
+export * as JsonViewer from "./json-viewer/index.js";
+export * as InlineEdit from "./inline-edit/index.js";
+export { InlineEditState } from "./inline-edit/index.js";

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

@@ -0,0 +1,9 @@
+import Display from "./inline-edit-display.svelte";
+import Error from "./inline-edit-error.svelte";
+import Input from "./inline-edit-input.svelte";
+import Root from "./inline-edit-root.svelte";
+import Status from "./inline-edit-status.svelte";
+export { Display, Error, Input, Root, Status };
+export { useInlineEditContext } from "./inline-edit.context.svelte.js";
+export { InlineEditState } from "./inline-edit-state.class.svelte.js";
+export type { InlineEditCommit, InlineEditNormalize, InlineEditStateOptions, InlineEditStatus, InlineEditValidate, } from "./inline-edit-state.class.svelte.js";

package/dist/lib/components/extended/inline-edit/index.js

@@ -0,0 +1,8 @@
+import Display from "./inline-edit-display.svelte";
+import Error from "./inline-edit-error.svelte";
+import Input from "./inline-edit-input.svelte";
+import Root from "./inline-edit-root.svelte";
+import Status from "./inline-edit-status.svelte";
+export { Display, Error, Input, Root, Status };
+export { useInlineEditContext } from "./inline-edit.context.svelte.js";
+export { InlineEditState } from "./inline-edit-state.class.svelte.js";

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

@@ -0,0 +1,74 @@
+<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 { HTMLButtonAttributes } from "svelte/elements";
+
+  type Props = WithElementRef<
+    Omit<HTMLButtonAttributes, "children">,
+    HTMLButtonElement
+  > & {
+    children?: Snippet<[ReturnType<typeof useInlineEditContext>]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    type = "button",
+    onclick,
+    "aria-label": ariaLabel,
+    "data-slot": dataSlot = "inline-edit-display",
+    ...restProps
+  }: Props = $props();
+
+  const state = useInlineEditContext();
+
+  /** Opens the editor after allowing consumers to intercept the display click. */
+  function handleClick(
+    event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
+  ): void {
+    onclick?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    void state.begin();
+  }
+
+  /** Exposes the display button through the optional bindable ref. */
+  function attachRef(node: HTMLButtonElement): () => void {
+    ref = node;
+
+    return () => {
+      if (ref === node) {
+        ref = null;
+      }
+    };
+  }
+</script>
+
+{#if !state.editing}
+  <button
+    {@attach attachRef}
+    {type}
+    data-slot={dataSlot}
+    data-status={state.status}
+    class={cn(
+      "focus-visible:ring-ring/50 hover:bg-muted/40 inline-flex min-w-0 items-center justify-start gap-2 rounded-md text-left outline-none focus-visible:ring-[3px]",
+      className,
+    )}
+    aria-label={ariaLabel ?? `Edit ${state.label}`}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if children}
+      {@render children(state)}
+    {:else}
+      <span class="min-w-0 truncate">{state.value}</span>
+    {/if}
+  </button>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type WithElementRef } from "../../utils.js";
+import { useInlineEditContext } from "./inline-edit.context.svelte.js";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type Props = WithElementRef<Omit<HTMLButtonAttributes, "children">, HTMLButtonElement> & {
+    children?: Snippet<[ReturnType<typeof useInlineEditContext>]>;
+};
+declare const InlineEditDisplay: import("svelte").Component<Props, {}, "ref">;
+type InlineEditDisplay = ReturnType<typeof InlineEditDisplay>;
+export default InlineEditDisplay;

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

@@ -0,0 +1,53 @@
+<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 Props = WithElementRef<
+    Omit<HTMLAttributes<HTMLSpanElement>, "children">,
+    HTMLSpanElement
+  > & {
+    children?: Snippet<[ReturnType<typeof useInlineEditContext>]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    "data-slot": dataSlot = "inline-edit-error",
+    ...restProps
+  }: Props = $props();
+
+  const state = useInlineEditContext();
+
+  /** Exposes the rendered error through the optional bindable ref. */
+  function attachRef(node: HTMLSpanElement): () => void {
+    ref = node;
+
+    return () => {
+      if (ref === node) {
+        ref = null;
+      }
+    };
+  }
+</script>
+
+{#if state.error}
+  <span
+    {@attach attachRef}
+    id={state.errorId}
+    data-slot={dataSlot}
+    class={cn("text-destructive text-sm font-normal", className)}
+    role="alert"
+    {...restProps}
+  >
+    {#if children}
+      {@render children(state)}
+    {:else}
+      {state.error}
+    {/if}
+  </span>
+{/if}

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

@@ -0,0 +1,10 @@
+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 Props = WithElementRef<Omit<HTMLAttributes<HTMLSpanElement>, "children">, HTMLSpanElement> & {
+    children?: Snippet<[ReturnType<typeof useInlineEditContext>]>;
+};
+declare const InlineEditError: import("svelte").Component<Props, {}, "ref">;
+type InlineEditError = ReturnType<typeof InlineEditError>;
+export default InlineEditError;