@joewinke/jatui 0.1.24 → 0.1.26

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

@@ -0,0 +1,32 @@
+import type { Comment, CommentCallbacks, CommentEntityType } from '../types/comments';
+interface Props {
+    entityType: CommentEntityType;
+    entityId: string;
+    /** Used for own-comment ownership checks (edit/delete). */
+    currentUserId: string;
+    /** false = portal mode (client-only, no internal toggle). Default true. */
+    staffView?: boolean;
+    /**
+     * When false, the staff internal/client visibility toggle is hidden,
+     * every new comment is forced to 'internal', and the per-comment
+     * visibility badge is suppressed. Use for entities that are never
+     * portal-exposed (e.g. internal tasks). Default true (no change to
+     * existing staff threads). Ignored when staffView is false.
+     */
+    allowClientVisibility?: boolean;
+    /** Allow edit/delete of other people's comments (team owner/admin). */
+    isAdmin?: boolean;
+    /** Initial top-level comments (typically from a server load). */
+    comments?: Comment[];
+    /** Total top-level comments matching the visibility filter (for paging). */
+    total?: number;
+    /** Show the skeleton loading state instead of the thread. */
+    loading?: boolean;
+    callbacks: CommentCallbacks;
+    placeholder?: string;
+    emptyText?: string;
+    class?: string;
+}
+declare const CommentThread: import("svelte").Component<Props, {}, "">;
+type CommentThread = ReturnType<typeof CommentThread>;
+export default CommentThread;

package/dist/components/ConfirmDialog.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import { tick } from 'svelte';
+	import { getPending, confirmDialog, cancelDialog } from '../stores/confirmDialog.svelte';
+
+	const pending = $derived(getPending());
+	const opts = $derived(pending?.options ?? null);
+	const visible = $derived(pending !== null);
+
+	// Countdown state
+	let remaining = $state(0);
+	let total = $state(0);
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+	let cancelRef = $state<HTMLButtonElement | null>(null);
+
+	$effect(() => {
+		if (!visible || !opts) {
+			if (intervalId) { clearInterval(intervalId); intervalId = null; }
+			remaining = 0;
+			total = 0;
+			return;
+		}
+
+		const ms = opts.timeoutMs ?? 8000;
+		if (ms > 0) {
+			total = ms;
+			remaining = ms;
+			intervalId = setInterval(() => {
+				remaining -= 60;
+				if (remaining <= 0) {
+					remaining = 0;
+					clearInterval(intervalId!);
+					intervalId = null;
+					cancelDialog();
+				}
+			}, 60);
+		} else {
+			total = 0;
+			remaining = 0;
+		}
+
+		// Focus the cancel button (safe default for destructive actions)
+		tick().then(() => cancelRef?.focus());
+
+		return () => {
+			if (intervalId) { clearInterval(intervalId); intervalId = null; }
+		};
+	});
+
+	const pct = $derived(total > 0 ? (remaining / total) * 100 : 0);
+	const secs = $derived(total > 0 ? Math.ceil(remaining / 1000) : 0);
+	const isDanger = $derived(opts?.danger !== false); // default true
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!visible) return;
+		if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); cancelDialog(); }
+		if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); confirmDialog(); }
+	}
+
+	$effect(() => {
+		window.addEventListener('keydown', handleKeydown, true);
+		return () => window.removeEventListener('keydown', handleKeydown, true);
+	});
+</script>
+
+{#if visible && opts}
+	<!-- Scrim -->
+	<div
+		class="cd-scrim"
+		transition:fade={{ duration: 120 }}
+		role="presentation"
+		onclick={cancelDialog}
+	></div>
+
+	<!-- Dialog -->
+	<div
+		class="cd-wrap"
+		role="alertdialog"
+		aria-modal="true"
+		aria-label="{opts.title}. {isDanger ? 'Destructive action.' : ''} Press Enter to confirm or Escape to cancel."
+		in:fly={{ y: -20, duration: 200, easing: cubicOut }}
+		out:fade={{ duration: 120 }}
+	>
+		<div class="cd-box" class:cd-danger={isDanger}>
+			<!-- Icon + title -->
+			<div class="cd-header">
+				<div class="cd-icon" class:cd-icon-danger={isDanger}>
+					{#if isDanger}
+						<!-- Terminal/skull icon for destructive actions -->
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="2" y="3" width="20" height="14" rx="2"/>
+							<path d="M8 21h8M12 17v4"/>
+							<path d="M9 8l2 2-2 2M13 12h2"/>
+						</svg>
+					{:else}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="12" cy="12" r="10"/>
+							<line x1="12" y1="8" x2="12" y2="12"/>
+							<line x1="12" y1="16" x2="12.01" y2="16"/>
+						</svg>
+					{/if}
+				</div>
+				<div class="cd-title-group">
+					<h3 class="cd-title">{opts.title}</h3>
+					{#if opts.body}
+						<p class="cd-body">{opts.body}</p>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Actions -->
+			<div class="cd-actions">
+				<button
+					bind:this={cancelRef}
+					type="button"
+					class="cd-btn cd-btn-cancel"
+					onclick={cancelDialog}
+				>
+					<kbd class="cd-kbd">Esc</kbd>
+					<span>{opts.cancelLabel ?? 'Cancel'}</span>
+				</button>
+
+				<button
+					type="button"
+					class="cd-btn cd-btn-confirm"
+					class:cd-btn-danger={isDanger}
+					onclick={confirmDialog}
+				>
+					<kbd class="cd-kbd">{isDanger ? '⏎' : 'Enter'}</kbd>
+					<span>{opts.confirmLabel ?? (isDanger ? 'Confirm' : 'OK')}</span>
+				</button>
+
+				{#if total > 0}
+					<span class="cd-timer" aria-live="off">{secs}s</span>
+				{/if}
+			</div>
+
+			<!-- Progress bar (drains to 0; auto-cancels at 0) -->
+			{#if total > 0}
+				<div class="cd-progress" aria-hidden="true">
+					<div class="cd-progress-fill" class:cd-progress-danger={isDanger} style="width: {pct}%"></div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.cd-scrim {
+		position: fixed;
+		inset: 0;
+		background: oklch(0 0 0 / 0.45);
+		z-index: 9990;
+		backdrop-filter: blur(2px);
+	}
+
+	.cd-wrap {
+		position: fixed;
+		top: 5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9991;
+		pointer-events: auto;
+		width: max-content;
+		max-width: min(92vw, 460px);
+	}
+
+	.cd-box {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		padding: 1rem 1.125rem 0.625rem;
+		background: color-mix(in oklch, var(--color-base-100) 98%, transparent);
+		border: 1px solid var(--color-base-300);
+		border-radius: 0.875rem;
+		box-shadow:
+			0 20px 60px oklch(0 0 0 / 0.55),
+			0 0 0 1px color-mix(in oklch, var(--color-base-300) 50%, transparent);
+		backdrop-filter: blur(16px);
+	}
+
+	.cd-box.cd-danger {
+		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		box-shadow:
+			0 20px 60px oklch(0 0 0 / 0.6),
+			0 0 0 1px color-mix(in oklch, var(--color-error) 25%, transparent),
+			0 0 30px color-mix(in oklch, var(--color-error) 12%, transparent);
+	}
+
+	.cd-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.875rem;
+	}
+
+	.cd-icon {
+		flex-shrink: 0;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in oklch, var(--color-info) 35%, transparent);
+		border: 1px solid color-mix(in oklch, var(--color-info) 40%, transparent);
+		color: var(--color-info);
+	}
+
+	.cd-icon svg {
+		width: 1.125rem;
+		height: 1.125rem;
+	}
+
+	.cd-icon.cd-icon-danger {
+		background: color-mix(in oklch, var(--color-error) 35%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 40%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-title-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.cd-title {
+		margin: 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+		line-height: 1.3;
+	}
+
+	.cd-body {
+		margin: 0;
+		font-size: 0.8rem;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		line-height: 1.5;
+	}
+
+	.cd-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-top: 0.125rem;
+	}
+
+	.cd-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.3125rem 0.75rem;
+		font-size: 0.8rem;
+		font-weight: 500;
+		border-radius: 0.5rem;
+		border: 1px solid transparent;
+		background: transparent;
+		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+		cursor: pointer;
+		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
+		white-space: nowrap;
+	}
+
+	.cd-btn:hover {
+		background: var(--color-base-200);
+		border-color: var(--color-base-300);
+	}
+
+	.cd-btn-cancel:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.cd-btn-confirm {
+		background: color-mix(in oklch, var(--color-base-300) 60%, transparent);
+		border-color: var(--color-base-300);
+	}
+
+	.cd-btn-confirm:hover {
+		background: var(--color-base-200);
+		border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+	}
+
+	.cd-btn-danger {
+		background: color-mix(in oklch, var(--color-error) 45%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-btn-danger:hover {
+		background: color-mix(in oklch, var(--color-error) 65%, transparent);
+		border-color: color-mix(in oklch, var(--color-error) 70%, transparent);
+		color: var(--color-error-content);
+	}
+
+	.cd-btn-confirm:focus-visible,
+	.cd-btn-danger:focus-visible {
+		outline: 2px solid var(--color-error);
+		outline-offset: 2px;
+	}
+
+	.cd-kbd {
+		font-family: ui-monospace, monospace;
+		font-size: 0.65rem;
+		padding: 0.0625rem 0.3125rem;
+		background: var(--color-base-200);
+		border: 1px solid var(--color-base-300);
+		border-bottom-width: 2px;
+		border-radius: 0.25rem;
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		line-height: 1.6;
+	}
+
+	.cd-timer {
+		margin-left: auto;
+		font-family: ui-monospace, monospace;
+		font-size: 0.7rem;
+		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		font-variant-numeric: tabular-nums;
+		min-width: 2ch;
+		text-align: right;
+	}
+
+	.cd-progress {
+		height: 2px;
+		background: var(--color-base-200);
+		border-radius: 999px;
+		overflow: hidden;
+	}
+
+	.cd-progress-fill {
+		height: 100%;
+		background: linear-gradient(90deg, var(--color-info), var(--color-info));
+		border-radius: 999px;
+		transition: width 60ms linear;
+	}
+
+	.cd-progress-fill.cd-progress-danger {
+		background: linear-gradient(90deg, var(--color-error), var(--color-error));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cd-progress-fill { transition: none; }
+	}
+</style>

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

@@ -0,0 +1,3 @@
+declare const ConfirmDialog: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/ConfirmModal.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { fly, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+
+  let {
+    open = $bindable(true),
+    title = "Confirm Action",
+    message = "Are you sure you want to proceed?",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    confirmButtonClass = "btn-primary",
+    isLoading = false,
+    iconClass = "text-warning",
+    onconfirm,
+    oncancel,
+  } = $props<{
+    open?: boolean
+    title?: string
+    message?: string
+    confirmText?: string
+    cancelText?: string
+    confirmButtonClass?: string
+    isLoading?: boolean
+    iconClass?: string
+    onconfirm?: () => void
+    oncancel?: () => void
+  }>()
+
+  // Respect prefers-reduced-motion: skip the entrance/exit transitions.
+  const reducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+  // Focus management: move focus into the dialog on open, trap Tab within it,
+  // and restore focus to the trigger on close. Escape is handled window-level
+  // so it works regardless of which control inside the box currently has focus.
+  let modalBox = $state<HTMLElement | null>(null)
+  let previousFocus: HTMLElement | null = null
+
+  const FOCUSABLE =
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+  $effect(() => {
+    if (typeof document === 'undefined') return
+    if (open) {
+      previousFocus = document.activeElement as HTMLElement
+      requestAnimationFrame(() => {
+        if (modalBox?.contains(document.activeElement)) return
+        const first = modalBox?.querySelector<HTMLElement>(FOCUSABLE)
+        ;(first ?? modalBox)?.focus()
+      })
+    } else if (previousFocus) {
+      previousFocus.focus?.()
+      previousFocus = null
+    }
+  })
+
+  function confirm() {
+    onconfirm?.()
+  }
+
+  function cancel() {
+    open = false
+    oncancel?.()
+  }
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (open && e.key === 'Escape') {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      cancel()
+    }
+  }
+
+  function trapTab(e: KeyboardEvent) {
+    if (e.key !== 'Tab' || !modalBox) return
+    const f = Array.from(modalBox.querySelectorAll<HTMLElement>(FOCUSABLE))
+    if (f.length === 0) return
+    const first = f[0]
+    const last = f[f.length - 1]
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+{#if open}
+<div class="modal modal-open" transition:fade={{ duration: reducedMotion ? 0 : 200 }}>
+  <div
+    bind:this={modalBox}
+    class="modal-box max-w-md"
+    role="dialog"
+    aria-modal="true"
+    aria-label={title}
+    tabindex="-1"
+    onkeydown={trapTab}
+    in:fly={{ y: reducedMotion ? 0 : 10, duration: reducedMotion ? 0 : 220, easing: cubicOut }}
+    out:fade={{ duration: reducedMotion ? 0 : 150 }}
+  >
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="font-semibold">{title}</h3>
+      <button class="btn btn-ghost btn-sm" onclick={cancel} aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+
+    <div class="py-4">
+      <div class="flex justify-center mb-4">
+        <div class="p-4 rounded-full bg-base-200">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={iconClass}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+        </div>
+      </div>
+
+      <p class="text-center mb-6">{message}</p>
+
+      <div class="flex gap-2">
+        <button type="button" class="btn btn-outline flex-1" onclick={cancel} disabled={isLoading}>
+          {cancelText}
+        </button>
+        <button type="button" class={`btn ${confirmButtonClass} flex-1`} onclick={confirm} disabled={isLoading}>
+          {#if isLoading}
+            <span class="loading loading-spinner loading-xs"></span>
+            Processing...
+          {:else}
+            {confirmText}
+          {/if}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="modal-backdrop" onclick={cancel}></div>
+</div>
+{/if}

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmButtonClass?: string;
+    isLoading?: boolean;
+    iconClass?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+};
+declare const ConfirmModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmModal = ReturnType<typeof ConfirmModal>;
+export default ConfirmModal;