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

package/src/app.css

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

package/src/index.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/src/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 '$lib/components/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/src/lib/components/extended/confirmation/confirmation-state.svelte.test.ts

@@ -0,0 +1,138 @@
+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<typeof import('svelte')>();
+  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/src/lib/components/extended/confirmation/confirmation-state.svelte.ts

@@ -1,18 +1,81 @@
 import { getContext, setContext } from "svelte";
 
+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;
+};
+
+const defaultProps: Required<
+  Pick<
+    ConfirmationDialogProps,
+    "title" | "description" | "confirmLabel" | "cancelLabel" | "variant"
+  >
+> = {
+  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: string): string {
+  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(" ");
 }
 
-const defaultProps = {
-  title: 'Are you sure?',
-  description: 'This action cannot be undone.'
+/**
+ * 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: string,
+): Required<
+  Pick<
+    ConfirmationDialogProps,
+    "title" | "description" | "confirmLabel" | "cancelLabel" | "variant"
+  >
+> {
+  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: ConfirmationDialogProps = $state({ ...defaultProps });
 
@@ -30,10 +93,13 @@ export class ConfirmationDialogState {
     this.open = false;
   }
 
-  async confirm(props: Partial<ConfirmationDialogProps>) {
-    const p = { ...defaultProps, ...props, }
+  /**
+   * Opens the confirmation dialog and resolves with the user's choice.
+   */
+  async confirm(props: Partial<ConfirmationDialogProps>): Promise<boolean> {
+    const p = { ...defaultProps, ...props };
 
-    return new Promise<boolean>((ok,) => {
+    return new Promise<boolean>((ok) => {
       this.show();
       const { onClose, ...rest } = p;
 
@@ -45,7 +111,7 @@ export class ConfirmationDialogState {
           }
 
           ok(s);
-        }
+        },
       };
     });
   }
@@ -54,7 +120,7 @@ export class ConfirmationDialogState {
 const ctxKey = `--confirmation-dialog`;
 
 export function initConfirmationDialog() {
-  setContext(Symbol.for(ctxKey), new ConfirmationDialogState);
+  setContext(Symbol.for(ctxKey), new ConfirmationDialogState());
 }
 
 export function getConfirmationDialog() {
@@ -65,8 +131,10 @@ 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/src/lib/components/extended/confirmation/index.ts

@@ -1,11 +1,18 @@
-import Provider from './confirmation-provider.svelte';
-import Prompt from './confirmation-prompt.svelte';
-import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
+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
-}
+  ConfirmationDialogState,
+  deleteConfirmation,
+};

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

@@ -0,0 +1,32 @@
+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/src/lib/components/extended/image-link/index.ts

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

package/src/lib/components/extended/index.ts

@@ -1,3 +1,14 @@
-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/src/lib/components/extended/inline-edit/index.ts

@@ -0,0 +1,16 @@
+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/src/lib/components/extended/inline-edit/inline-edit-display.svelte

@@ -0,0 +1,74 @@
+<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 { 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/src/lib/components/extended/inline-edit/inline-edit-error.svelte

@@ -0,0 +1,53 @@
+<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 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}