@joewinke/jatui 0.38.6 → 0.40.0

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

@@ -0,0 +1,46 @@
+export type IconButtonVariant = 'ghost' | 'outline' | 'soft' | 'primary' | 'secondary' | 'error' | 'overlay';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+     * IconButton — an icon-only button with a REQUIRED accessible name.
+     *
+     * The square/circle `btn` that consumers hand-write hundreds of times
+     * (`btn btn-sm btn-circle btn-ghost` + an inline svg + an aria-label that is
+     * sometimes forgotten). `label` is required by the types, becomes the
+     * aria-label, and — with `tooltip` — the hover/focus hint too.
+     *
+     *   <IconButton label="Edit" onclick={edit}><PencilIcon size={16} /></IconButton>
+     *   <IconButton label="Pin" pressed={pinned} tooltip onclick={toggle}>…</IconButton>
+     *   <IconButton label="Open" href="/x" shape="circle" variant="outline">…</IconButton>
+     *
+     * `variant="overlay"` is light-on-dark translucent chrome for controls that
+     * sit over media (lightboxes, video stages) where a ghost button vanishes.
+     *
+     * Idea from BoardUI's icon-button (MIT); written fresh for Svelte 5 + jatui
+     * tokens.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type TooltipOptions } from '../actions/tooltip';
+interface Props extends Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'class' | 'onclick' | 'children' | 'aria-label'> {
+    /** Accessible name — required. Rendered as aria-label (and the tooltip text). */
+    label: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    shape?: 'square' | 'circle';
+    /** Render an `<a>` instead of a `<button>`. */
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    /** Toggle semantics — renders aria-pressed and the pressed surface. */
+    pressed?: boolean;
+    /** Show a tooltip: `true` uses `label`; a string shows that text instead (e.g. with a shortcut). */
+    tooltip?: boolean | string;
+    tooltipPlacement?: TooltipOptions['placement'];
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    /** The icon. Size it to the button (16px for sm/md is the house default). */
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/LinkButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	/**
+	 * LinkButton — a text action that looks like a link: no box, underline on
+	 * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+	 * pick by what it DOES (navigates vs acts), not by how it looks.
+	 *
+	 *   <LinkButton onclick={resend}>Resend code</LinkButton>
+	 *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+	 *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+	 *
+	 * `external` opens a new tab with rel="noopener noreferrer" and tells
+	 * screen-reader users so. Idea from BoardUI's link-button (MIT).
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		/** Ink: inherit the surrounding text, primary accent, muted, or error. */
+		tone?: 'inherit' | 'primary' | 'muted' | 'error';
+		size?: 'xs' | 'sm' | 'md';
+		/** Underline: on hover/focus only (default) or always. */
+		underline?: 'hover' | 'always';
+		/** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+		external?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	}
+
+	let {
+		href,
+		tone = 'primary',
+		size = 'sm',
+		underline = 'hover',
+		external = false,
+		type = 'button',
+		disabled = false,
+		class: className = '',
+		onclick,
+		children,
+		...rest
+	}: Props = $props();
+
+	const TONE = {
+		inherit: '',
+		primary: 'link-primary',
+		muted: 'jatui-link-btn--muted',
+		error: 'link-error'
+	} as const;
+	const SIZE = { xs: 'text-xs', sm: 'text-sm', md: 'text-base' } as const;
+
+	const classes = $derived(
+		[
+			'link jatui-link-btn',
+			underline === 'hover' ? 'link-hover' : '',
+			TONE[tone] ?? '',
+			SIZE[size] ?? '',
+			disabled ? 'jatui-link-btn--disabled' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+{#if href && !disabled}
+	<a
+		{...rest}
+		{href}
+		class={classes}
+		target={external ? '_blank' : rest.target as string | undefined}
+		rel={external ? 'noopener noreferrer' : rest.rel as string | undefined}
+		{onclick}
+	>
+		{#if children}{@render children()}{/if}
+		{#if external}<span class="sr-only"> (opens in a new tab)</span>{/if}
+	</a>
+{:else}
+	<button {...rest} {type} {disabled} class={classes} {onclick}>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}
+
+<style>
+	.jatui-link-btn {
+		display: inline;
+		padding: 0;
+		background: none;
+		border: 0;
+		font-weight: 500;
+		text-underline-offset: 0.2em;
+		cursor: pointer;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		transition: color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-link-btn:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+		text-decoration-line: underline;
+	}
+	.jatui-link-btn--muted {
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+	}
+	.jatui-link-btn--muted:hover {
+		color: var(--color-base-content);
+	}
+	.jatui-link-btn--disabled,
+	.jatui-link-btn:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		text-decoration: none;
+	}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+     * LinkButton — a text action that looks like a link: no box, underline on
+     * hover/focus. Renders `<a>` when given `href`, otherwise a `<button>` —
+     * pick by what it DOES (navigates vs acts), not by how it looks.
+     *
+     *   <LinkButton onclick={resend}>Resend code</LinkButton>
+     *   <LinkButton href="/docs" tone="primary">Read the docs</LinkButton>
+     *   <LinkButton href="https://x.dev" external>Changelog</LinkButton>
+     *
+     * `external` opens a new tab with rel="noopener noreferrer" and tells
+     * screen-reader users so. Idea from BoardUI's link-button (MIT).
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    /** Ink: inherit the surrounding text, primary accent, muted, or error. */
+    tone?: 'inherit' | 'primary' | 'muted' | 'error';
+    size?: 'xs' | 'sm' | 'md';
+    /** Underline: on hover/focus only (default) or always. */
+    underline?: 'hover' | 'always';
+    /** Open in a new tab (adds rel=noopener and an SR-only "(opens in a new tab)"). */
+    external?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/MediaExplorer.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  /**
+   * MediaExplorer — a two-pane source browser shell for files, images, or any
+   * per-source collection. The LEFT RAIL lists the sources (grouped, keyboard
+   * navigable); the RIGHT PANE renders whatever the host shows for the active
+   * source via the `pane` snippet. MediaExplorer owns the shell only — it is
+   * deliberately decoupled from any backend, media type, or selection model:
+   * the host keeps its own selection state in the pane and the footer.
+   *
+   *   <MediaExplorer {sources} bind:activeId title="Add references" onClose={...}>
+   *     {#snippet pane(source)}
+   *       <MyBrowser source={source.id} />
+   *     {/snippet}
+   *     {#snippet footer()}…{/snippet}
+   *   </MediaExplorer>
+   *
+   * Rail keyboard contract: the rail is one tab stop (roving tabindex).
+   * ArrowUp/ArrowDown/Home/End move between enabled sources and ACTIVATE them
+   * (the pane follows focus — arrowing through sources is the browsing gesture,
+   * no Enter needed). Click activates. Disabled sources are skipped; their
+   * `hint` explains why (rendered as the row's title).
+   *
+   * Dialog conventions follow Modal.svelte: native <dialog>, focus moved in on
+   * open and restored on close, Escape + backdrop close, body scroll locked,
+   * reduced-motion skips the entrance transitions.
+   */
+  import { fade, fly } from "svelte/transition"
+  import { cubicOut } from "svelte/easing"
+  import type { Snippet } from "svelte"
+
+  export interface ExplorerSource {
+    /** Stable source id, e.g. "refs", "out", "catalogs/costume". */
+    id: string
+    /** Rail label. */
+    label: string
+    /** Small mono suffix after the label, e.g. "refs/". */
+    hint?: string
+    /** Right-aligned count badge. */
+    badge?: string | number
+    /** Rail section heading; ungrouped sources render above every group. */
+    group?: string
+    /** Not clickable and skipped by the arrows; `hint` should say why. */
+    disabled?: boolean
+  }
+
+  interface Props {
+    sources: ExplorerSource[]
+    /** The active source id. Falls back to the first enabled source when unset or stale. */
+    activeId?: string
+    title: string
+    onClose: () => void
+    /** Content of the active source. */
+    pane: Snippet<[ExplorerSource]>
+    /** Rendered beside the title (filters, view toggles). */
+    toolbar?: Snippet
+    /** Below the pane (selection counts, actions). */
+    footer?: Snippet
+    /** Accessible label for the rail. Default "Sources". */
+    railLabel?: string
+    /** Accessible label for the pane column. Default "Contents". */
+    paneLabel?: string
+    /** Max width of the dialog as a CSS length. Default "72rem". */
+    maxWidth?: string
+  }
+
+  let {
+    sources,
+    activeId = $bindable(),
+    title,
+    onClose,
+    pane,
+    toolbar,
+    footer,
+    railLabel = "Sources",
+    paneLabel = "Contents",
+    maxWidth = "72rem",
+  }: Props = $props()
+
+  const enabled = $derived(sources.filter((s) => !s.disabled))
+
+  // An unset or stale activeId falls to the first enabled source, so a caller
+  // can bind a plain variable and read it back.
+  const active = $derived(sources.find((s) => s.id === activeId) ?? enabled[0])
+  $effect(() => {
+    if (active && active.id !== activeId) activeId = active.id
+  })
+
+  // Rail sections: ungrouped first, then groups in first-seen order.
+  const sections = $derived.by(() => {
+    const ungrouped = sources.filter((s) => !s.group)
+    const groups: { name: string; sources: ExplorerSource[] }[] = []
+    for (const s of sources) {
+      if (!s.group) continue
+      let g = groups.find((x) => x.name === s.group)
+      if (!g) groups.push((g = { name: s.group, sources: [] }))
+      g.sources.push(s)
+    }
+    return [...(ungrouped.length ? [{ name: "", sources: ungrouped }] : []), ...groups]
+  })
+
+  function activate(s: ExplorerSource) {
+    if (s.disabled) return
+    activeId = s.id
+  }
+
+  // Roving tabindex: one tab stop, arrows both move and activate.
+  let railEl = $state<HTMLElement | null>(null)
+  let dialogEl = $state<HTMLDialogElement | null>(null)
+  let previousFocus: HTMLElement | null = null
+
+  const reducedMotion =
+    typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+
+  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
+    previousFocus = document.activeElement as HTMLElement
+    document.body.style.overflow = "hidden"
+    requestAnimationFrame(() => dialogEl?.focus())
+    return () => {
+      document.body.style.overflow = ""
+      previousFocus?.focus?.()
+      previousFocus = null
+    }
+  })
+
+  function focusRow(id: string) {
+    railEl?.querySelector<HTMLElement>(`[data-source-id="${CSS.escape(id)}"]`)?.focus()
+  }
+  function onRailKey(e: KeyboardEvent) {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return
+    e.preventDefault()
+    if (!enabled.length) return
+    const i = enabled.findIndex((s) => s.id === active?.id)
+    const next =
+      e.key === "Home" ? 0 : e.key === "End" ? enabled.length - 1 : (i + (e.key === "ArrowDown" ? 1 : enabled.length - 1)) % enabled.length
+    const target = enabled[next]!
+    activate(target)
+    focusRow(target.id)
+  }
+  function onDialogKey(e: KeyboardEvent) {
+    if (e.key !== "Escape") return
+    e.preventDefault()
+    e.stopPropagation()
+    onClose()
+  }
+  function trapFocus(e: KeyboardEvent) {
+    if (e.key !== "Tab" || !dialogEl) return
+    const focusable = dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE)
+    if (!focusable.length) return
+    const first = focusable[0]!
+    const last = focusable[focusable.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={onDialogKey} />
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={dialogEl}
+  class="modal"
+  aria-modal="true"
+  aria-label={title}
+  open
+  tabindex="-1"
+  onkeydown={(e) => {
+    trapFocus(e)
+  }}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="modal-backdrop"
+    onclick={(e) => {
+      // Only a direct click on the backdrop closes; clicks inside the sheet bubble
+      // here and must not (same guard as Modal.svelte).
+      if (e.target === e.currentTarget) onClose()
+    }}
+    transition:fade={{ duration: reducedMotion ? 0 : 150 }}
+  >
+    <div
+      class="bg-base-100 text-base-content relative mx-auto my-auto flex max-h-[92vh] flex-col rounded-lg shadow-2xl"
+      style="width: min(calc(100% - 2rem), {maxWidth})"
+      in:fly={{ y: reducedMotion ? 0 : 12, duration: reducedMotion ? 0 : 200, easing: cubicOut }}
+      out:fade={{ duration: reducedMotion ? 0 : 120 }}
+    >
+      <header class="flex items-center gap-3 px-4 pt-4 pb-2">
+        <h2 class="text-lg font-semibold">{title}</h2>
+        <span class="min-w-0 flex-1"></span>
+        {@render toolbar?.()}
+        <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={onClose} aria-label="Close">✕</button>
+      </header>
+      <div class="grid min-h-0 flex-1 sm:grid-cols-[13rem_1fr]" style="height: min(70vh, 620px)">
+        <nav class="border-base-content/10 overflow-y-auto border-r pr-1" aria-label={railLabel}>
+          <div
+            class="flex flex-col gap-0.5 py-1"
+            role="tablist"
+            aria-orientation="vertical"
+            aria-label={railLabel}
+            bind:this={railEl}
+            onkeydown={onRailKey}
+          >
+            {#each sections as section (section.name)}
+              {#if section.name}
+                <p class="text-base-content/50 mt-2 px-2 text-[10px] font-semibold tracking-widest uppercase">{section.name}</p>
+              {/if}
+              {#each section.sources as s (s.id)}
+                <button
+                  data-source-id={s.id}
+                  role="tab"
+                  aria-selected={active?.id === s.id}
+                  tabindex={active?.id === s.id ? 0 : -1}
+                  disabled={s.disabled}
+                  title={s.disabled ? s.hint : undefined}
+                  class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm
+                    {active?.id === s.id ? 'bg-base-content/10 font-semibold' : 'hover:bg-base-content/5'}
+                    {s.disabled ? 'opacity-50' : ''}"
+                  onclick={() => activate(s)}
+                >
+                  <span class="min-w-0 flex-1 truncate">{s.label}</span>
+                  {#if s.hint}<span class="text-base-content/40 shrink-0 font-mono text-[10px]">{s.hint}</span>{/if}
+                  {#if s.badge !== undefined}<span class="text-base-content/50 shrink-0 font-mono text-[10px] tnum">{s.badge}</span>{/if}
+                </button>
+              {/each}
+            {/each}
+          </div>
+        </nav>
+        <section class="min-h-0 overflow-y-auto p-4" aria-label={paneLabel}>
+          {#if active}
+            {@render pane(active)}
+          {/if}
+        </section>
+      </div>
+      {#if footer}
+        <div class="border-base-content/10 flex flex-wrap items-center gap-2 border-t px-4 py-3">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+</dialog>

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

@@ -0,0 +1,37 @@
+import type { Snippet } from "svelte";
+export interface ExplorerSource {
+    /** Stable source id, e.g. "refs", "out", "catalogs/costume". */
+    id: string;
+    /** Rail label. */
+    label: string;
+    /** Small mono suffix after the label, e.g. "refs/". */
+    hint?: string;
+    /** Right-aligned count badge. */
+    badge?: string | number;
+    /** Rail section heading; ungrouped sources render above every group. */
+    group?: string;
+    /** Not clickable and skipped by the arrows; `hint` should say why. */
+    disabled?: boolean;
+}
+interface Props {
+    sources: ExplorerSource[];
+    /** The active source id. Falls back to the first enabled source when unset or stale. */
+    activeId?: string;
+    title: string;
+    onClose: () => void;
+    /** Content of the active source. */
+    pane: Snippet<[ExplorerSource]>;
+    /** Rendered beside the title (filters, view toggles). */
+    toolbar?: Snippet;
+    /** Below the pane (selection counts, actions). */
+    footer?: Snippet;
+    /** Accessible label for the rail. Default "Sources". */
+    railLabel?: string;
+    /** Accessible label for the pane column. Default "Contents". */
+    paneLabel?: string;
+    /** Max width of the dialog as a CSS length. Default "72rem". */
+    maxWidth?: string;
+}
+declare const MediaExplorer: import("svelte").Component<Props, {}, "activeId">;
+type MediaExplorer = ReturnType<typeof MediaExplorer>;
+export default MediaExplorer;

package/dist/components/MediaLightbox.svelte

@@ -24,6 +24,7 @@
 	 *   ]} initialIndex={0} onClose={close} />
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { fade } from 'svelte/transition';
 
 	export type MediaItem = {
@@ -175,9 +176,7 @@
 				>
 					Download
 				</a>
-				<button type="button" class="mlb-btn mlb-close" onclick={close} aria-label="Close">
-					×
-				</button>
+				<CloseButton label="Close" variant="overlay" shape="square" onclick={close} />
 			</div>
 		</div>
 
@@ -288,10 +287,6 @@
 	.mlb-btn:hover {
 		background: oklch(1 0 0 / 0.2);
 	}
-	.mlb-close {
-		font-size: 1.25rem;
-		line-height: 1;
-	}
 	.mlb-nav {
 		position: absolute;
 		top: 50%;

package/dist/components/Modal.svelte

@@ -6,6 +6,7 @@
 	 * Converted from Svelte 4 to Svelte 5 runes.
 	 */
 
+	import CloseButton from './CloseButton.svelte';
 	import { onMount, untrack } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import { fly, fade } from 'svelte/transition';
@@ -241,16 +242,7 @@
 						{/if}
 
 						{#if showCloseButton && dismissible}
-							<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={close} aria-label="Close modal">
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
-							</button>
+							<CloseButton label="Close modal" onclick={close} />
 						{/if}
 					</div>
 				{/if}