@glw907/cairn-cms 0.60.0 → 0.62.1

package/dist/components/MediaHeroField.svelte

@@ -33,346 +33,227 @@ its own <form>, illegal nested here, and a Name field a hero has no use for). Al
 save block; a decorative hero resolves alt to the empty string. The upload path mirrors the insert
 popover's runUpload but resolves to this field, not an editor placeholder.
 -->
-<script lang="ts">
-  import { getContext, tick, untrack } from 'svelte';
-  import { CSRF_CONTEXT_KEY } from './csrf-context.js';
-  import MediaPicker, { type MediaLibraryEntry, type MediaSelection } from './MediaPicker.svelte';
-  import {
-    ingestFile,
-    buildUploadRequest,
-    sendUpload,
-    ingestFailureKind,
-    failureCard,
-    proposedNameFor,
-    firstImageFile,
-  } from './client-ingest.js';
-  import { deserialize } from '$app/forms';
-  import { uploadOutcome, type UploadEnvelope } from './media-upload-outcome.js';
-  import { parseMediaToken } from '../media/reference.js';
-  import { publicPath } from '../media/naming.js';
-  import type { MediaEntry } from '../media/manifest.js';
-
-  interface Props {
-    /** The field descriptor: the form input name base and the visible label. */
-    field: { name: string; label: string };
-    /** The initial committed value, from `data.frontmatter[field.name]`. */
-    value?: { src: string; alt: string; caption?: string; decorative?: boolean };
-    /** Whether the initial hero is an explicit decorative choice (an empty alt that is not debt).
-     *  Defaults false; a fresh field with an empty alt reads as needs-alt. */
-    decorative?: boolean;
-    /** The merged committed-plus-uploaded media library, keyed by content hash. */
-    mediaLibrary: Record<string, MediaLibraryEntry>;
-    /** The concept the entry belongs to (the upload action's route param). */
-    conceptId: string;
-    /** The entry id (the upload action's route param). */
-    id: string;
-    /** Called with the server-owned record on a successful upload; the host merges it into the library
-     *  and the save field, the same wiring the insert popover uses. */
-    onuploaded: (record: MediaEntry) => void;
-    /** Called when the committed value changes (a confirm or a remove), so the host sets fieldsDirty.
-     *  The hidden-input writes do not fire the form's oninput, so the field signals dirty explicitly. */
-    ondirty: () => void;
-    /** Called once on mount and again whenever this hero's needs-alt status changes, with the current
-     *  signal (a non-decorative hero with an empty alt is needs-alt). The host sums this with the body
-     *  scanner's hits for the needs-alt notice. A frontmatter hero has no body offset, so it is
-     *  reported from the field state, never routed through the body scanner. */
-    onneedsaltchange?: (needsAlt: boolean) => void;
-  }
-
-  let {
-    field,
-    value,
-    decorative: decorativeInitial = false,
-    mediaLibrary,
-    conceptId,
-    id,
-    onuploaded,
-    ondirty,
-    onneedsaltchange,
-  }: Props = $props();
-
-  // The CSRF token getter from the admin context (AdminLayout provides it). Undefined outside the
-  // shell, where the empty token fails the guard's check, the intended fail-closed signal.
-  const csrf = getContext<(() => string) | undefined>(CSRF_CONTEXT_KEY);
-
-  // A stable id base for the dialog's labelled regions.
-  const uid = $props.id();
-  const titleId = `cairn-hero-title-${uid}`;
-  const altNoteId = `cairn-hero-alt-note-${uid}`;
-
-  // The committed value the hidden inputs bind to. Seeded once from the prop; "Use this image" and
-  // Remove own it thereafter (untrack marks the read a deliberate one-time seed, not a reactive
-  // miss). An empty src is the empty state. A save reloads the page, which remounts with the fresh
-  // prop, so a later prop change is out of scope.
-  let committedSrc = $state(untrack(() => value?.src ?? ''));
-  let committedAlt = $state(untrack(() => value?.alt ?? ''));
-  let committedCaption = $state(untrack(() => value?.caption ?? ''));
-  // Whether the committed hero is an explicit decorative choice (an empty alt that is not debt).
-  let committedDecorative = $state(untrack(() => decorativeInitial));
-
-  // The resting/empty split keys off whether a src is set.
-  const hasHero = $derived(committedSrc.trim() !== '');
-
-  /** Resolve a media: src to its library entry through the content hash. Null when the token does not
-   *  parse or the hash is not in the library. */
-  function entryForSrc(src: string): MediaLibraryEntry | null {
-    const ref = parseMediaToken(src);
-    if (!ref) return null;
-    return mediaLibrary[ref.hash] ?? null;
-  }
-
-  // The resting row's resolved entry, thumbnail, and display name.
-  const committedEntry = $derived(hasHero ? entryForSrc(committedSrc) : null);
-  const committedThumb = $derived(
-    committedEntry
-      ? publicPath(committedEntry.slug, committedEntry.hash, committedEntry.ext, 'slug')
-      : '',
-  );
-  const committedName = $derived(
-    committedEntry ? committedEntry.displayName || committedEntry.slug || committedEntry.hash : '',
-  );
-
-  // The resting alt-status: decorative is an explicit choice, an empty alt is needs-alt debt, and a
-  // non-empty alt is described.
-  type AltStatus = 'described' | 'needs-alt' | 'decorative';
-  const committedStatus = $derived<AltStatus>(
-    committedDecorative ? 'decorative' : committedAlt.trim() !== '' ? 'described' : 'needs-alt',
-  );
-
-  // Report this hero's needs-alt signal to the host: once on mount and again whenever the committed
-  // status changes. The host sums the signal with the body scanner's hits for the needs-alt notice.
-  // Only a set hero can be debt; an empty field (no src) reports false even though committedStatus
-  // reads 'needs-alt' by default.
-  const heroNeedsAlt = $derived(hasHero && committedStatus === 'needs-alt');
-  // Report the signal on mount and on every real change, but read the callback through untrack so a
-  // fresh callback identity (the host recreates the arrow on each of its own renders, which this very
-  // call triggers) does not re-run the effect and loop. The effect depends only on the signal value.
-  $effect(() => {
-    const signal = heroNeedsAlt;
-    untrack(() => onneedsaltchange?.(signal));
-  });
-
-  // ---- the dialog ----
-  // The dialog element and which view it shows. 'chooser' picks or uploads; 'placement' captures alt
-  // and caption for a chosen image; null means the working selection is not yet made.
-  let dialog = $state<HTMLDialogElement | null>(null);
-  type View = 'chooser' | 'placement';
-  let view = $state<View>('chooser');
-
-  // The working selection in the placement view: the chosen ref, its resolved thumbnail, the alt
-  // mode and text, and the caption. Seeded on a pick or a successful upload, copied to the committed
-  // value only on "Use this image".
-  let workRef = $state('');
-  let workThumb = $state('');
-  let workAltMode = $state<'describe' | 'decorative' | null>(null);
-  let workAltText = $state('');
-  let workCaption = $state('');
-
-  // The upload transient state, surfaced in the dialog while an uploaded file is decoded and stored.
-  type Upload = { kind: 'idle' } | { kind: 'uploading' } | { kind: 'failed'; message: string; retry: () => void };
-  let upload = $state<Upload>({ kind: 'idle' });
-
-  let fileInput = $state<HTMLInputElement | null>(null);
-  // The describe-mode alt text input, bound so the needs-alt remediation path (focusAlt) can land
-  // the author's focus directly on it.
-  let altInput = $state<HTMLInputElement | null>(null);
-
-  /** Open the dialog to the chooser. Editing a set hero still leads with the placement view seeded
-   *  from the committed value, so an author lands on the alt and caption they already wrote. */
-  function openDialog(initial: View) {
-    upload = { kind: 'idle' };
-    if (initial === 'placement' && hasHero) {
-      seedPlacementFromCommitted();
-      view = 'placement';
-    } else {
-      view = 'chooser';
-    }
-    dialog?.showModal();
+<script lang="ts">import { getContext, tick, untrack } from "svelte";
+import { CSRF_CONTEXT_KEY } from "./csrf-context.js";
+import MediaPicker, {} from "./MediaPicker.svelte";
+import {
+  ingestFile,
+  buildUploadRequest,
+  sendUpload,
+  ingestFailureKind,
+  failureCard,
+  proposedNameFor,
+  firstImageFile
+} from "./client-ingest.js";
+import { deserialize } from "$app/forms";
+import { uploadOutcome } from "./media-upload-outcome.js";
+import { parseMediaToken } from "../media/reference.js";
+import { publicPath } from "../media/naming.js";
+let {
+  field,
+  value,
+  decorative: decorativeInitial = false,
+  mediaLibrary,
+  conceptId,
+  id,
+  onuploaded,
+  ondirty,
+  onneedsaltchange
+} = $props();
+const csrf = getContext(CSRF_CONTEXT_KEY);
+const uid = $props.id();
+const titleId = `cairn-hero-title-${uid}`;
+const altNoteId = `cairn-hero-alt-note-${uid}`;
+let committedSrc = $state(untrack(() => value?.src ?? ""));
+let committedAlt = $state(untrack(() => value?.alt ?? ""));
+let committedCaption = $state(untrack(() => value?.caption ?? ""));
+let committedDecorative = $state(untrack(() => decorativeInitial));
+const hasHero = $derived(committedSrc.trim() !== "");
+function entryForSrc(src) {
+  const ref = parseMediaToken(src);
+  if (!ref) return null;
+  return mediaLibrary[ref.hash] ?? null;
+}
+const committedEntry = $derived(hasHero ? entryForSrc(committedSrc) : null);
+const committedThumb = $derived(
+  committedEntry ? publicPath(committedEntry.slug, committedEntry.hash, committedEntry.ext, "slug") : ""
+);
+const committedName = $derived(
+  committedEntry ? committedEntry.displayName || committedEntry.slug || committedEntry.hash : ""
+);
+const committedStatus = $derived(
+  committedDecorative ? "decorative" : committedAlt.trim() !== "" ? "described" : "needs-alt"
+);
+const heroNeedsAlt = $derived(hasHero && committedStatus === "needs-alt");
+$effect(() => {
+  const signal = heroNeedsAlt;
+  untrack(() => onneedsaltchange?.(signal));
+});
+let dialog = $state(null);
+let view = $state("chooser");
+let workRef = $state("");
+let workThumb = $state("");
+let workAltMode = $state(null);
+let workAltText = $state("");
+let workCaption = $state("");
+let upload = $state({ kind: "idle" });
+let fileInput = $state(null);
+let altInput = $state(null);
+function openDialog(initial) {
+  upload = { kind: "idle" };
+  if (initial === "placement" && hasHero) {
+    seedPlacementFromCommitted();
+    view = "placement";
+  } else {
+    view = "chooser";
   }
-
-  function closeDialog() {
-    dialog?.close();
-  }
-
-  /** The needs-alt remediation path the edit page's notice row calls: open the dialog to the
-   *  placement view seeded from the committed value, switch a non-decorative hero into describe mode
-   *  so the alt text input renders, and land focus on it. This is the "Add alt text" action, the
-   *  frontmatter counterpart to the body notice's select-range jump (a hero has no body offset, so it
-   *  focuses the field's own alt input rather than a source range). */
-  export async function focusAlt() {
-    openDialog('placement');
-    if (workAltMode !== 'decorative') {
-      workAltMode = 'describe';
-    }
-    await tick();
-    altInput?.focus();
+  dialog?.showModal();
+}
+function closeDialog() {
+  dialog?.close();
+}
+export async function focusAlt() {
+  openDialog("placement");
+  if (workAltMode !== "decorative") {
+    workAltMode = "describe";
   }
-
-  /** Seed the placement working state from the committed value (the Edit path). */
-  function seedPlacementFromCommitted() {
-    workRef = committedSrc;
-    workThumb = committedThumb;
-    workCaption = committedCaption;
-    if (committedDecorative) {
-      workAltMode = 'decorative';
-      workAltText = '';
-    } else if (committedAlt.trim() !== '') {
-      workAltMode = 'describe';
-      workAltText = committedAlt;
-    } else {
-      workAltMode = null;
-      workAltText = '';
-    }
+  await tick();
+  altInput?.focus();
+}
+function seedPlacementFromCommitted() {
+  workRef = committedSrc;
+  workThumb = committedThumb;
+  workCaption = committedCaption;
+  if (committedDecorative) {
+    workAltMode = "decorative";
+    workAltText = "";
+  } else if (committedAlt.trim() !== "") {
+    workAltMode = "describe";
+    workAltText = committedAlt;
+  } else {
+    workAltMode = null;
+    workAltText = "";
   }
-
-  /** Seed the placement working state from a picked library asset: the ref, the resolved thumbnail,
-   *  and the manifest alt prefilled into describe mode when non-empty. */
-  function onPick(sel: MediaSelection) {
-    workRef = sel.ref;
-    workThumb = publicPath(sel.entry.slug, sel.entry.hash, sel.entry.ext, 'slug');
-    workCaption = '';
-    if (sel.alt.trim() !== '') {
-      workAltMode = 'describe';
-      workAltText = sel.alt;
-    } else {
-      workAltMode = null;
-      workAltText = '';
-    }
-    upload = { kind: 'idle' };
-    view = 'placement';
+}
+function onPick(sel) {
+  workRef = sel.ref;
+  workThumb = publicPath(sel.entry.slug, sel.entry.hash, sel.entry.ext, "slug");
+  workCaption = "";
+  if (sel.alt.trim() !== "") {
+    workAltMode = "describe";
+    workAltText = sel.alt;
+  } else {
+    workAltMode = null;
+    workAltText = "";
   }
-
-  /** Confirm the working selection into the committed hidden inputs, mark dirty, and close. */
-  function confirm() {
-    committedSrc = workRef;
-    committedDecorative = workAltMode === 'decorative';
-    committedAlt = workAltMode === 'describe' ? workAltText.trim() : '';
-    committedCaption = workCaption.trim();
-    ondirty();
-    closeDialog();
+  upload = { kind: "idle" };
+  view = "placement";
+}
+function confirm() {
+  committedSrc = workRef;
+  committedDecorative = workAltMode === "decorative";
+  committedAlt = workAltMode === "describe" ? workAltText.trim() : "";
+  committedCaption = workCaption.trim();
+  ondirty();
+  closeDialog();
+}
+function remove() {
+  committedSrc = "";
+  committedAlt = "";
+  committedCaption = "";
+  committedDecorative = false;
+  ondirty();
+  closeDialog();
+}
+function replace() {
+  upload = { kind: "idle" };
+  view = "chooser";
+}
+async function runUpload(file) {
+  upload = { kind: "uploading" };
+  const fail = (message) => {
+    upload = { kind: "failed", message, retry: () => void runUpload(file) };
+  };
+  let ingested;
+  try {
+    ingested = await ingestFile(file);
+  } catch (err) {
+    fail(failureCard(ingestFailureKind(err)).message);
+    return;
   }
-
-  /** Remove the hero: clear the committed value, mark dirty, and return to the empty state. */
-  function remove() {
-    committedSrc = '';
-    committedAlt = '';
-    committedCaption = '';
-    committedDecorative = false;
-    ondirty();
-    closeDialog();
+  const { url, init } = buildUploadRequest({
+    conceptId,
+    id,
+    bytes: ingested.blob,
+    contentType: ingested.contentType,
+    csrf: csrf?.() ?? "",
+    filename: file.name,
+    // The hero alt is a frontmatter value set in the placement view, independent of the manifest
+    // alt, so the upload carries an empty manifest alt.
+    alt: "",
+    displayName: proposedNameFor(file.name) ?? stem(file.name),
+    width: ingested.width,
+    height: ingested.height
+  });
+  let res;
+  try {
+    res = await sendUpload(url, init);
+  } catch (err) {
+    fail(failureCard(ingestFailureKind(err)).message);
+    return;
   }
-
-  /** Go back to the chooser to replace the working image. */
-  function replace() {
-    upload = { kind: 'idle' };
-    view = 'chooser';
+  if (res.type === "opaqueredirect" || res.status === 0) {
+    fail("Your session has expired. Please sign in again to add an image.");
+    return;
   }
-
-  // ---- the upload path ----
-  // A chosen or dropped file routes here. Unlike the insert popover there is no editor body, so no
-  // placeholder and no open-risk-2 concern: the field shows a small loading state, and on success it
-  // seeds the placement view from the server record (empty alt to fill in).
-  async function runUpload(file: File) {
-    upload = { kind: 'uploading' };
-    const fail = (message: string) => {
-      upload = { kind: 'failed', message, retry: () => void runUpload(file) };
-    };
-
-    let ingested: Awaited<ReturnType<typeof ingestFile>>;
-    try {
-      ingested = await ingestFile(file);
-    } catch (err) {
-      fail(failureCard(ingestFailureKind(err)).message);
-      return;
-    }
-
-    const { url, init } = buildUploadRequest({
-      conceptId,
-      id,
-      bytes: ingested.blob,
-      contentType: ingested.contentType,
-      csrf: csrf?.() ?? '',
-      filename: file.name,
-      // The hero alt is a frontmatter value set in the placement view, independent of the manifest
-      // alt, so the upload carries an empty manifest alt.
-      alt: '',
-      displayName: proposedNameFor(file.name) ?? stem(file.name),
-      width: ingested.width,
-      height: ingested.height,
-    });
-
-    let res: Response;
-    try {
-      res = await sendUpload(url, init);
-    } catch (err) {
-      fail(failureCard(ingestFailureKind(err)).message);
-      return;
-    }
-
-    if (res.type === 'opaqueredirect' || res.status === 0) {
-      fail('Your session has expired. Please sign in again to add an image.');
-      return;
-    }
-
-    let outcome: ReturnType<typeof uploadOutcome>;
-    try {
-      outcome = uploadOutcome(deserialize(await res.text()) as UploadEnvelope);
-    } catch {
-      fail('The upload could not be completed. Please try again.');
-      return;
-    }
-    if (outcome.kind === 'session-expired') {
-      fail('Your session has expired. Please sign in again to add an image.');
-      return;
-    }
-    if (outcome.kind === 'failed') {
-      fail(
-        outcome.failure === 'generic'
-          ? 'The upload could not be completed. Please try again.'
-          : failureCard(outcome.failure).message,
-      );
-      return;
-    }
-
-    // Success: merge the record up so the library resolves the new reference, then land on the
-    // placement view seeded from the record with an empty alt to fill in.
-    onuploaded(outcome.record);
-    const r = outcome.record;
-    workRef = outcome.reference;
-    workThumb = publicPath(r.slug, r.hash, r.ext, 'slug');
-    workAltMode = null;
-    workAltText = '';
-    workCaption = '';
-    upload = { kind: 'idle' };
-    view = 'placement';
+  let outcome;
+  try {
+    outcome = uploadOutcome(deserialize(await res.text()));
+  } catch {
+    fail("The upload could not be completed. Please try again.");
+    return;
   }
-
-  /** The filename stem (extension dropped), the fallback display name for a generic filename. */
-  function stem(filename: string): string {
-    const dot = filename.lastIndexOf('.');
-    return (dot === -1 ? filename : filename.slice(0, dot)).trim() || filename;
+  if (outcome.kind === "session-expired") {
+    fail("Your session has expired. Please sign in again to add an image.");
+    return;
   }
-
-  function onChosenFile(e: Event) {
-    const input = e.currentTarget as HTMLInputElement;
-    const file = input.files?.[0];
-    if (file) void runUpload(file);
+  if (outcome.kind === "failed") {
+    fail(
+      outcome.failure === "generic" ? "The upload could not be completed. Please try again." : failureCard(outcome.failure).message
+    );
+    return;
   }
-
-  // The empty dropzone's drag-and-drop: a dropped image routes straight to the upload path, opening
-  // the dialog to the loading state. preventDefault stops the browser from navigating to the file.
-  function onDropzoneDrop(e: DragEvent) {
-    e.preventDefault();
-    const file = firstImageFile(e.dataTransfer ?? {});
-    if (file) {
-      view = 'chooser';
-      dialog?.showModal();
-      void runUpload(file);
-    }
-  }
-  function onDropzoneDragover(e: DragEvent) {
-    e.preventDefault();
+  onuploaded(outcome.record);
+  const r = outcome.record;
+  workRef = outcome.reference;
+  workThumb = publicPath(r.slug, r.hash, r.ext, "slug");
+  workAltMode = null;
+  workAltText = "";
+  workCaption = "";
+  upload = { kind: "idle" };
+  view = "placement";
+}
+function stem(filename) {
+  const dot = filename.lastIndexOf(".");
+  return (dot === -1 ? filename : filename.slice(0, dot)).trim() || filename;
+}
+function onChosenFile(e) {
+  const input = e.currentTarget;
+  const file = input.files?.[0];
+  if (file) void runUpload(file);
+}
+function onDropzoneDrop(e) {
+  e.preventDefault();
+  const file = firstImageFile(e.dataTransfer ?? {});
+  if (file) {
+    view = "chooser";
+    dialog?.showModal();
+    void runUpload(file);
   }
+}
+function onDropzoneDragover(e) {
+  e.preventDefault();
+}
 </script>
 
 <div class="flex flex-col gap-1">