@joewinke/jatui 0.38.5 → 0.39.0

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;