@joewinke/jatui 0.1.24 → 0.1.26

package/dist/components/SidebarUserFooter.svelte

@@ -0,0 +1,34 @@
+<!--
+  SidebarUserFooter — avatar + name (links to account) + sign out button.
+  Placed at the bottom of app sidebar drawers (admin, facilitator, portal).
+  Used in JST template layouts.
+-->
+<script lang="ts">
+  import UserAvatar from './UserAvatar.svelte'
+
+  interface Props {
+    profile?: { full_name?: string | null; avatar_url?: string | null } | null
+    user?: { email?: string | null } | null
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string
+  }
+
+  let {
+    profile,
+    user,
+    accountHref = '/account',
+    signOutHref = '/account/sign_out',
+  }: Props = $props()
+
+  let displayName = $derived(profile?.full_name || user?.email || '?')
+</script>
+
+<div class="flex items-center gap-2 px-2 py-1">
+  <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
+    <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
+    <span class="truncate text-[0.9375rem]">{displayName}</span>
+  </a>
+  <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
+</div>

package/dist/components/SidebarUserFooter.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    profile?: {
+        full_name?: string | null;
+        avatar_url?: string | null;
+    } | null;
+    user?: {
+        email?: string | null;
+    } | null;
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string;
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string;
+}
+declare const SidebarUserFooter: import("svelte").Component<Props, {}, "">;
+type SidebarUserFooter = ReturnType<typeof SidebarUserFooter>;
+export default SidebarUserFooter;

package/dist/components/SignaturePad.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	/**
+	 * SignaturePad — Canvas-based digital signature capture with mouse and touch support.
+	 *
+	 * Exports `clear()` and `isEmpty()` methods. Outputs signature as base64 PNG data URL
+	 * via the bindable `signatureData` prop or `onSignatureChange` callback.
+	 */
+	import { onMount } from 'svelte';
+
+	let {
+		signatureData = $bindable(''),
+		onSignatureChange,
+		width = 400,
+		height = 150,
+		strokeColor = '',
+		strokeWidth = 2,
+		label = 'Signature',
+		required = false,
+		placeholder = 'Sign here',
+	}: {
+		signatureData?: string;
+		onSignatureChange?: (data: string) => void;
+		width?: number;
+		height?: number;
+		strokeColor?: string;
+		strokeWidth?: number;
+		label?: string;
+		required?: boolean;
+		placeholder?: string;
+	} = $props();
+
+	let canvas: HTMLCanvasElement;
+	let isDrawing = false;
+	let lastX = 0;
+	let lastY = 0;
+	let hasDrawn = $state(false);
+
+	onMount(() => {
+		if (!canvas) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		const resolvedStroke = strokeColor ||
+			getComputedStyle(canvas).getPropertyValue('--color-base-content').trim() ||
+			'oklch(0.21 0 0)';
+		ctx.strokeStyle = resolvedStroke;
+		ctx.lineWidth = strokeWidth;
+		ctx.lineCap = 'round';
+		ctx.lineJoin = 'round';
+
+		function getCoordinates(e: MouseEvent | TouchEvent) {
+			const rect = canvas.getBoundingClientRect();
+			const scaleX = canvas.width / rect.width;
+			const scaleY = canvas.height / rect.height;
+
+			if (e instanceof MouseEvent) {
+				return {
+					x: (e.clientX - rect.left) * scaleX,
+					y: (e.clientY - rect.top) * scaleY
+				};
+			} else {
+				return {
+					x: (e.touches[0].clientX - rect.left) * scaleX,
+					y: (e.touches[0].clientY - rect.top) * scaleY
+				};
+			}
+		}
+
+		function startDrawing(e: MouseEvent | TouchEvent) {
+			e.preventDefault();
+			isDrawing = true;
+			const coords = getCoordinates(e);
+			lastX = coords.x;
+			lastY = coords.y;
+		}
+
+		function draw(e: MouseEvent | TouchEvent) {
+			if (!isDrawing || !ctx) return;
+			e.preventDefault();
+
+			const coords = getCoordinates(e);
+			ctx.beginPath();
+			ctx.moveTo(lastX, lastY);
+			ctx.lineTo(coords.x, coords.y);
+			ctx.stroke();
+			lastX = coords.x;
+			lastY = coords.y;
+			hasDrawn = true;
+		}
+
+		function stopDrawing() {
+			if (isDrawing && hasDrawn) {
+				isDrawing = false;
+				signatureData = canvas.toDataURL();
+				onSignatureChange?.(signatureData);
+			}
+			isDrawing = false;
+		}
+
+		canvas.addEventListener('mousedown', startDrawing);
+		canvas.addEventListener('mousemove', draw);
+		canvas.addEventListener('mouseup', stopDrawing);
+		canvas.addEventListener('mouseleave', stopDrawing);
+
+		canvas.addEventListener('touchstart', startDrawing, { passive: false });
+		canvas.addEventListener('touchmove', draw, { passive: false });
+		canvas.addEventListener('touchend', stopDrawing);
+		canvas.addEventListener('touchcancel', stopDrawing);
+
+		return () => {
+			canvas.removeEventListener('mousedown', startDrawing);
+			canvas.removeEventListener('mousemove', draw);
+			canvas.removeEventListener('mouseup', stopDrawing);
+			canvas.removeEventListener('mouseleave', stopDrawing);
+			canvas.removeEventListener('touchstart', startDrawing);
+			canvas.removeEventListener('touchmove', draw);
+			canvas.removeEventListener('touchend', stopDrawing);
+			canvas.removeEventListener('touchcancel', stopDrawing);
+		};
+	});
+
+	export function clear() {
+		if (!canvas) return;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		signatureData = '';
+		hasDrawn = false;
+		onSignatureChange?.('');
+	}
+
+	export function isEmpty(): boolean {
+		return !hasDrawn || !signatureData;
+	}
+</script>
+
+<div class="signature-pad-container">
+	{#if label}
+		<div class="flex justify-between items-center mb-2">
+			<span class="text-sm text-base-content/70">
+				{label}
+				{#if required}
+					<span class="text-error">*</span>
+				{/if}
+			</span>
+			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
+				Clear
+			</button>
+		</div>
+	{/if}
+
+	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
+		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
+		<canvas
+			bind:this={canvas}
+			{width}
+			{height}
+			class="w-full touch-none cursor-crosshair"
+		></canvas>
+
+		{#if !hasDrawn}
+			<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+				<span class="text-base-content/30 text-sm">{placeholder}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	canvas {
+		display: block;
+	}
+</style>

package/dist/components/SignaturePad.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    signatureData?: string;
+    onSignatureChange?: (data: string) => void;
+    width?: number;
+    height?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+};
+declare const SignaturePad: import("svelte").Component<$$ComponentProps, {
+    clear: () => void;
+    isEmpty: () => boolean;
+}, "signatureData">;
+type SignaturePad = ReturnType<typeof SignaturePad>;
+export default SignaturePad;