@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/feedback/feedback-thread.d.ts

@@ -0,0 +1,133 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { FeedbackNoteAttachment } from './feedback-inbox.js';
+import { FeedbackAttachmentLabels } from './feedback-dialog.js';
+import 'lucide-react';
+
+/**
+ * The conversation under a report: who said what, when, with what attached — and the
+ * box to answer in.
+ *
+ * Both apps had written it by hand. kastlan's feedback page grew a comment list of
+ * bordered boxes with `slate-*` literals (feedback-page.tsx, "keksdose left this
+ * unbuilt"), and keksdose built the same thing a second time for support
+ * (support-thread.tsx) with sides, bubbles and a composer that clears only what it
+ * sent. This is that second one, generalised: the kit owns the look and the
+ * behaviour, the app owns the data, the upload and every word it does not share.
+ *
+ * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes
+ * against a user id: whose message sits at the END side depends on who is reading,
+ * and only the app knows that (keksdose's support thread labelled a member's question
+ * "Du" in the admin panel the first time round, by reading the wrong field).
+ *
+ * **Redaction.** A thread is somebody's words about their own data — exactly what a
+ * host's demo / screen-share mode blurs. Bodies, authors and attachments carry
+ * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless
+ * `redact={false}`.
+ *
+ * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's
+ * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir="auto"`, so a
+ * Hebrew reply in an English thread (or the reverse) lays out as its own language.
+ */
+/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */
+interface FeedbackThreadLabels {
+    /** Accessible name of the message list. */
+    thread: string;
+    empty: string;
+    loading: string;
+    /** Author line of an `own` message that has no `author` of its own. */
+    you: string;
+    /** The badge beside a `staff` author. */
+    staff: string;
+    /** Accessible name of a message's attachment list. */
+    attachments: string;
+}
+declare const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels;
+/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'
+ *  words are `feedbackAttachment`'s, shared with the dialog and the note editor. */
+interface FeedbackComposerLabels {
+    /** Accessible name of the text box. */
+    field: string;
+    placeholder: string;
+    send: string;
+    /** The shortcut line, given the platform's modifier ("Ctrl" or "⌘"). */
+    sendHint: (modifier: string) => string;
+}
+declare const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels;
+interface FeedbackThreadAttachment {
+    id?: string | number;
+    name: string;
+    /** Where to open it. Left out, the attachment is listed by name only. */
+    url?: string;
+    /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */
+    type?: string;
+    /** Bytes, shown beside a non-image. */
+    size?: number;
+}
+interface FeedbackThreadMessage {
+    id: string | number;
+    /** Who wrote it. Left out on an `own` message, it reads "You". */
+    author?: ReactNode;
+    /** A `Date`, an ISO string or epoch ms. */
+    createdAt: Date | string | number;
+    body: string;
+    attachments?: readonly FeedbackThreadAttachment[];
+    /** Written by whoever is reading: sits at the end side, in the brand tint. */
+    own?: boolean;
+    /** Written by the team rather than a user: gets the "Staff" badge. */
+    staff?: boolean;
+}
+interface FeedbackThreadProps {
+    messages: readonly FeedbackThreadMessage[];
+    loading?: boolean;
+    /** Replaces the default "No comments yet". */
+    empty?: ReactNode;
+    /**
+     * Draw one attachment yourself — for files behind auth, which a plain `<img src>`
+     * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail
+     * link for an image with a `url`, a file link otherwise.
+     */
+    renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;
+    /** Tag bodies, authors and attachments `data-private`. Default true. */
+    redact?: boolean;
+    /** "Now" for the relative times — pin it in tests and stories. Default: the clock. */
+    now?: Date | number;
+    /** Overrides the provider's locale for the times. */
+    locale?: string;
+    labels?: Partial<FeedbackThreadLabels>;
+    className?: string;
+}
+declare function FeedbackThread({ messages, loading, empty, renderAttachment, redact, now, locale: localeProp, labels: labelsProp, className, }: FeedbackThreadProps): react.JSX.Element;
+/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
+ *  labels optional, since the field reads `feedbackAttachment` from the provider. */
+type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels"> & {
+    labels?: Partial<FeedbackAttachmentLabels>;
+};
+interface FeedbackComposerProps {
+    /**
+     * Send the comment. Return the promise: the box clears when it RESOLVES, and only of
+     * what was sent — text typed while it was in flight stays. A rejection keeps
+     * everything for a retry (surface the error yourself; the composer stays quiet).
+     */
+    onSend: (body: string, attachment: File | null) => void | Promise<unknown>;
+    /** The send is in flight: a spinner on the button and no second send. */
+    pending?: boolean;
+    /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).
+     *  `true` for the defaults. Left out, the composer is text only. */
+    attachment?: boolean | FeedbackComposerAttachment;
+    /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
+     *  reader. */
+    disabledReason?: ReactNode;
+    rows?: number;
+    labels?: Partial<FeedbackComposerLabels>;
+    className?: string;
+}
+/**
+ * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,
+ * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor
+ * use, so the habit carries across the feature. Plain Enter is a new line: feedback is
+ * written in paragraphs, unlike a chat.
+ */
+declare function FeedbackComposer({ onSend, pending, attachment, disabledReason, rows, labels: labelsProp, className, }: FeedbackComposerProps): react.JSX.Element;
+
+export { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, type FeedbackComposerAttachment, type FeedbackComposerLabels, type FeedbackComposerProps, FeedbackThread, type FeedbackThreadAttachment, type FeedbackThreadLabels, type FeedbackThreadMessage, type FeedbackThreadProps };

package/dist/feedback/feedback-thread.js

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Paperclip, Send } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button, EmptyState, Spinner, Textarea } from "../components/ui.js";
+import { Skeleton } from "../components/skeleton.js";
+import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { FeedbackAttachmentField } from "./feedback-attachment.js";
+const DEFAULT_FEEDBACK_THREAD_LABELS = {
+  thread: "Comments",
+  empty: "No comments yet",
+  loading: "Loading comments\u2026",
+  you: "You",
+  staff: "Staff",
+  attachments: "Attachments"
+};
+const DEFAULT_FEEDBACK_COMPOSER_LABELS = {
+  field: "Write a comment",
+  placeholder: "Write a comment\u2026",
+  send: "Send",
+  sendHint: (modifier) => `${modifier} + Enter to send`
+};
+function FeedbackThread({
+  messages,
+  loading = false,
+  empty,
+  renderAttachment,
+  redact = true,
+  now,
+  locale: localeProp,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useKitLabels("feedbackThread", DEFAULT_FEEDBACK_THREAD_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const file = useKitFileLabels();
+  const priv = redact ? "" : void 0;
+  const clock = useMinuteClock(now === void 0);
+  const reference = now === void 0 ? clock : +now;
+  if (loading && messages.length === 0) {
+    return /* @__PURE__ */ jsx(Skeleton, { lines: 3, label: labels.loading, className });
+  }
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "inline",
+        size: "sm",
+        title: empty ?? labels.empty,
+        className: cn("justify-start", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("ol", { "aria-label": labels.thread, "aria-busy": loading || void 0, className: cn("space-y-3", className), children: messages.map((message) => {
+    const date = toDate(message.createdAt);
+    const author = message.author ?? (message.own ? labels.you : null);
+    const attachments = message.attachments ?? [];
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: cn("flex", message.own ? "justify-end" : "justify-start"),
+        "data-own": message.own ? "" : void 0,
+        children: /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: cn(
+              "max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm",
+              message.own ? "rounded-ee-sm bg-[var(--brand-bg)]" : "rounded-es-sm bg-[var(--bg-surface-2)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("header", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-[var(--text-muted)]", children: [
+                author != null && /* @__PURE__ */ jsx("span", { "data-private": priv, className: "font-medium text-[var(--text-secondary)]", children: author }),
+                message.staff && /* @__PURE__ */ jsx("span", { className: "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--text-secondary)]", children: labels.staff }),
+                date && /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    dateTime: date.toISOString(),
+                    title: new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date),
+                    className: "tabular-nums",
+                    children: formatRelativeTime(date, reference, locale)
+                  }
+                )
+              ] }),
+              message.body && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-private": priv,
+                  dir: "auto",
+                  className: "whitespace-pre-wrap break-words text-start text-[var(--text-primary)]",
+                  children: message.body
+                }
+              ),
+              attachments.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": labels.attachments, "data-private": priv, className: "mt-2 flex flex-wrap gap-2", children: attachments.map((attachment, index) => /* @__PURE__ */ jsx("li", { className: "min-w-0", children: renderAttachment ? renderAttachment(attachment, message) : /* @__PURE__ */ jsx(DefaultAttachment, { attachment, size: file.size }) }, attachment.id ?? `${index}-${attachment.name}`)) })
+            ]
+          }
+        )
+      },
+      message.id
+    );
+  }) });
+}
+function DefaultAttachment({
+  attachment,
+  size
+}) {
+  const { name, url, type } = attachment;
+  if (url && type?.startsWith("image/")) {
+    return /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt: name,
+        loading: "lazy",
+        className: "h-20 w-20 rounded border border-[var(--border)] object-cover"
+      }
+    ) });
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+    attachment.size !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--text-muted)]", children: size(attachment.size) })
+  ] });
+  const chip = "inline-flex max-w-full items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)]";
+  return url ? /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(chip, "hover:bg-[var(--bg-hover)]"), children: content }) : /* @__PURE__ */ jsx("span", { className: chip, children: content });
+}
+function useMinuteClock(active) {
+  const [time, setTime] = useState(() => Date.now());
+  useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => setTime(Date.now()), 6e4);
+    return () => clearInterval(id);
+  }, [active]);
+  return time;
+}
+function toDate(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+const MINUTE = 6e4;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+function formatRelativeTime(date, now, locale) {
+  const diff = date.getTime() - now;
+  const abs = Math.abs(diff);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  if (abs < 45e3) return rtf.format(0, "second");
+  if (abs < 45 * MINUTE) return rtf.format(Math.round(diff / MINUTE), "minute");
+  if (abs < 22 * HOUR) return rtf.format(Math.round(diff / HOUR), "hour");
+  if (abs < 7 * DAY) return rtf.format(Math.round(diff / DAY), "day");
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+const noSubscribe = () => () => {
+};
+const isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+function FeedbackComposer({
+  onSend,
+  pending = false,
+  attachment,
+  disabledReason,
+  rows = 3,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  const [draft, setDraft] = useState("");
+  const [file, setFile] = useState(null);
+  const root = useRef(null);
+  const modifier = useSyncExternalStore(
+    noSubscribe,
+    () => isApple() ? "\u2318" : "Ctrl",
+    () => "Ctrl"
+  );
+  if (disabledReason != null && disabledReason !== false) {
+    return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[var(--text-muted)]", className), children: disabledReason });
+  }
+  const canSend = draft.trim().length > 0 && !pending;
+  const send = () => {
+    if (!canSend) return;
+    const sentDraft = draft;
+    const sentFile = file;
+    Promise.resolve(onSend(draft.trim(), file)).then(() => {
+      setDraft((current) => current === sentDraft ? "" : current);
+      setFile((current) => current === sentFile ? null : current);
+    }).catch(() => {
+    });
+  };
+  const config = attachment === true ? {} : attachment || null;
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows,
+        dir: "auto",
+        "aria-label": labels.field,
+        placeholder: labels.placeholder,
+        value: draft,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            event.preventDefault();
+            send();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [
+      config ? /* @__PURE__ */ jsx(
+        FeedbackAttachmentField,
+        {
+          value: file,
+          onChange: setFile,
+          labels: config.labels,
+          accept: config.accept,
+          maxBytes: config.maxBytes,
+          onError: config.onError,
+          onCaptureScreenshot: config.onCaptureScreenshot,
+          pasteFrom: root
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("div", { className: "ms-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-placeholder)]", children: labels.sendHint(modifier) }),
+        /* @__PURE__ */ jsxs(Button, { onClick: send, disabled: !canSend, "aria-busy": pending || void 0, children: [
+          pending ? /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }) : /* @__PURE__ */ jsx(Send, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true }),
+          labels.send
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DEFAULT_FEEDBACK_COMPOSER_LABELS,
+  DEFAULT_FEEDBACK_THREAD_LABELS,
+  FeedbackComposer,
+  FeedbackThread
+};
+//# sourceMappingURL=feedback-thread.js.map

package/dist/feedback/feedback-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/feedback-thread.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Paperclip, Send } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, EmptyState, Spinner, Textarea } from \"../components/ui\";\nimport { Skeleton } from \"../components/skeleton\";\nimport { useKitFileLabels, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { FeedbackAttachmentField } from \"./feedback-attachment\";\nimport type { FeedbackNoteAttachment } from \"./feedback-inbox\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\n/**\n * The conversation under a report: who said what, when, with what attached — and the\n * box to answer in.\n *\n * Both apps had written it by hand. kastlan's feedback page grew a comment list of\n * bordered boxes with `slate-*` literals (feedback-page.tsx, \"keksdose left this\n * unbuilt\"), and keksdose built the same thing a second time for support\n * (support-thread.tsx) with sides, bubbles and a composer that clears only what it\n * sent. This is that second one, generalised: the kit owns the look and the\n * behaviour, the app owns the data, the upload and every word it does not share.\n *\n * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes\n * against a user id: whose message sits at the END side depends on who is reading,\n * and only the app knows that (keksdose's support thread labelled a member's question\n * \"Du\" in the admin panel the first time round, by reading the wrong field).\n *\n * **Redaction.** A thread is somebody's words about their own data — exactly what a\n * host's demo / screen-share mode blurs. Bodies, authors and attachments carry\n * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless\n * `redact={false}`.\n *\n * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's\n * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir=\"auto\"`, so a\n * Hebrew reply in an English thread (or the reverse) lays out as its own language.\n */\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\n/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */\nexport interface FeedbackThreadLabels {\n  /** Accessible name of the message list. */\n  thread: string;\n  empty: string;\n  loading: string;\n  /** Author line of an `own` message that has no `author` of its own. */\n  you: string;\n  /** The badge beside a `staff` author. */\n  staff: string;\n  /** Accessible name of a message's attachment list. */\n  attachments: string;\n}\n\nexport const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels = {\n  thread: \"Comments\",\n  empty: \"No comments yet\",\n  loading: \"Loading comments…\",\n  you: \"You\",\n  staff: \"Staff\",\n  attachments: \"Attachments\",\n};\n\n/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'\n *  words are `feedbackAttachment`'s, shared with the dialog and the note editor. */\nexport interface FeedbackComposerLabels {\n  /** Accessible name of the text box. */\n  field: string;\n  placeholder: string;\n  send: string;\n  /** The shortcut line, given the platform's modifier (\"Ctrl\" or \"⌘\"). */\n  sendHint: (modifier: string) => string;\n}\n\nexport const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels = {\n  field: \"Write a comment\",\n  placeholder: \"Write a comment…\",\n  send: \"Send\",\n  sendHint: (modifier) => `${modifier} + Enter to send`,\n};\n\n/* ── Thread ───────────────────────────────────────────────────────────────── */\n\nexport interface FeedbackThreadAttachment {\n  id?: string | number;\n  name: string;\n  /** Where to open it. Left out, the attachment is listed by name only. */\n  url?: string;\n  /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */\n  type?: string;\n  /** Bytes, shown beside a non-image. */\n  size?: number;\n}\n\nexport interface FeedbackThreadMessage {\n  id: string | number;\n  /** Who wrote it. Left out on an `own` message, it reads \"You\". */\n  author?: ReactNode;\n  /** A `Date`, an ISO string or epoch ms. */\n  createdAt: Date | string | number;\n  body: string;\n  attachments?: readonly FeedbackThreadAttachment[];\n  /** Written by whoever is reading: sits at the end side, in the brand tint. */\n  own?: boolean;\n  /** Written by the team rather than a user: gets the \"Staff\" badge. */\n  staff?: boolean;\n}\n\nexport interface FeedbackThreadProps {\n  messages: readonly FeedbackThreadMessage[];\n  loading?: boolean;\n  /** Replaces the default \"No comments yet\". */\n  empty?: ReactNode;\n  /**\n   * Draw one attachment yourself — for files behind auth, which a plain `<img src>`\n   * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail\n   * link for an image with a `url`, a file link otherwise.\n   */\n  renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;\n  /** Tag bodies, authors and attachments `data-private`. Default true. */\n  redact?: boolean;\n  /** \"Now\" for the relative times — pin it in tests and stories. Default: the clock. */\n  now?: Date | number;\n  /** Overrides the provider's locale for the times. */\n  locale?: string;\n  labels?: Partial<FeedbackThreadLabels>;\n  className?: string;\n}\n\nexport function FeedbackThread({\n  messages,\n  loading = false,\n  empty,\n  renderAttachment,\n  redact = true,\n  now,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n}: FeedbackThreadProps) {\n  const labels = useKitLabels(\"feedbackThread\", DEFAULT_FEEDBACK_THREAD_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const file = useKitFileLabels();\n  const priv = redact ? \"\" : undefined;\n  const clock = useMinuteClock(now === undefined);\n  const reference = now === undefined ? clock : +now;\n\n  if (loading && messages.length === 0) {\n    return <Skeleton lines={3} label={labels.loading} className={className} />;\n  }\n  if (messages.length === 0) {\n    return (\n      <EmptyState\n        variant=\"inline\"\n        size=\"sm\"\n        title={empty ?? labels.empty}\n        className={cn(\"justify-start\", className)}\n      />\n    );\n  }\n\n  return (\n    <ol aria-label={labels.thread} aria-busy={loading || undefined} className={cn(\"space-y-3\", className)}>\n      {messages.map((message) => {\n        const date = toDate(message.createdAt);\n        const author = message.author ?? (message.own ? labels.you : null);\n        const attachments = message.attachments ?? [];\n        return (\n          <li\n            key={message.id}\n            className={cn(\"flex\", message.own ? \"justify-end\" : \"justify-start\")}\n            data-own={message.own ? \"\" : undefined}\n          >\n            <article\n              className={cn(\n                \"max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm\",\n                message.own\n                  ? \"rounded-ee-sm bg-[var(--brand-bg)]\"\n                  : \"rounded-es-sm bg-[var(--bg-surface-2)]\",\n              )}\n            >\n              <header className=\"mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-[var(--text-muted)]\">\n                {author != null && (\n                  <span data-private={priv} className=\"font-medium text-[var(--text-secondary)]\">\n                    {author}\n                  </span>\n                )}\n                {message.staff && (\n                  <span className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--text-secondary)]\">\n                    {labels.staff}\n                  </span>\n                )}\n                {date && (\n                  <time\n                    dateTime={date.toISOString()}\n                    title={new Intl.DateTimeFormat(locale, { dateStyle: \"full\", timeStyle: \"short\" }).format(date)}\n                    className=\"tabular-nums\"\n                  >\n                    {formatRelativeTime(date, reference, locale)}\n                  </time>\n                )}\n              </header>\n              {message.body && (\n                <p\n                  data-private={priv}\n                  dir=\"auto\"\n                  className=\"whitespace-pre-wrap break-words text-start text-[var(--text-primary)]\"\n                >\n                  {message.body}\n                </p>\n              )}\n              {attachments.length > 0 && (\n                <ul aria-label={labels.attachments} data-private={priv} className=\"mt-2 flex flex-wrap gap-2\">\n                  {attachments.map((attachment, index) => (\n                    <li key={attachment.id ?? `${index}-${attachment.name}`} className=\"min-w-0\">\n                      {renderAttachment ? (\n                        renderAttachment(attachment, message)\n                      ) : (\n                        <DefaultAttachment attachment={attachment} size={file.size} />\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </article>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n\nfunction DefaultAttachment({\n  attachment,\n  size,\n}: {\n  attachment: FeedbackThreadAttachment;\n  size: (bytes: number) => string;\n}) {\n  const { name, url, type } = attachment;\n  if (url && type?.startsWith(\"image/\")) {\n    return (\n      <a href={url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        <img\n          src={url}\n          alt={name}\n          loading=\"lazy\"\n          className=\"h-20 w-20 rounded border border-[var(--border)] object-cover\"\n        />\n      </a>\n    );\n  }\n  const content = (\n    <>\n      <Paperclip className=\"size-3.5 shrink-0\" aria-hidden />\n      <span className=\"truncate\">{name}</span>\n      {attachment.size !== undefined && (\n        <span className=\"shrink-0 text-[var(--text-muted)]\">{size(attachment.size)}</span>\n      )}\n    </>\n  );\n  const chip =\n    \"inline-flex max-w-full items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)]\";\n  return url ? (\n    <a href={url} target=\"_blank\" rel=\"noopener noreferrer\" className={cn(chip, \"hover:bg-[var(--bg-hover)]\")}>\n      {content}\n    </a>\n  ) : (\n    <span className={chip}>{content}</span>\n  );\n}\n\n/** The time, refreshed once a minute while `active`, so \"2 minutes ago\" does not stay\n *  \"just now\" on a page left open. Read in state rather than in render, which must be\n *  pure. */\nfunction useMinuteClock(active: boolean): number {\n  const [time, setTime] = useState(() => Date.now());\n  useEffect(() => {\n    if (!active) return;\n    const id = setInterval(() => setTime(Date.now()), 60_000);\n    return () => clearInterval(id);\n  }, [active]);\n  return time;\n}\n\nfunction toDate(value: Date | string | number): Date | null {\n  const date = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\nconst MINUTE = 60_000;\nconst HOUR = 60 * MINUTE;\nconst DAY = 24 * HOUR;\n\n/**\n * \"just now\", \"5 minutes ago\", \"yesterday\", \"3 days ago\" — `Intl.RelativeTimeFormat`\n * in `locale`, so the grammar is the language's. Past a week it is a date: \"12 days\n * ago\" makes the reader do arithmetic that the date already did. The full date and\n * time are on the `<time>`'s title.\n */\nfunction formatRelativeTime(date: Date, now: number, locale: string | undefined): string {\n  const diff = date.getTime() - now;\n  const abs = Math.abs(diff);\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\n  if (abs < 45_000) return rtf.format(0, \"second\");\n  if (abs < 45 * MINUTE) return rtf.format(Math.round(diff / MINUTE), \"minute\");\n  if (abs < 22 * HOUR) return rtf.format(Math.round(diff / HOUR), \"hour\");\n  if (abs < 7 * DAY) return rtf.format(Math.round(diff / DAY), \"day\");\n  return new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(date);\n}\n\n/* ── Composer ─────────────────────────────────────────────────────────────── */\n\n/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the\n *  labels optional, since the field reads `feedbackAttachment` from the provider. */\nexport type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, \"labels\"> & {\n  labels?: Partial<FeedbackAttachmentLabels>;\n};\n\nexport interface FeedbackComposerProps {\n  /**\n   * Send the comment. Return the promise: the box clears when it RESOLVES, and only of\n   * what was sent — text typed while it was in flight stays. A rejection keeps\n   * everything for a retry (surface the error yourself; the composer stays quiet).\n   */\n  onSend: (body: string, attachment: File | null) => void | Promise<unknown>;\n  /** The send is in flight: a spinner on the button and no second send. */\n  pending?: boolean;\n  /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).\n   *  `true` for the defaults. Left out, the composer is text only. */\n  attachment?: boolean | FeedbackComposerAttachment;\n  /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this\n   *  reader. */\n  disabledReason?: ReactNode;\n  rows?: number;\n  labels?: Partial<FeedbackComposerLabels>;\n  className?: string;\n}\n\nconst noSubscribe = () => () => {};\nconst isApple = () =>\n  typeof navigator !== \"undefined\" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);\n\n/**\n * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,\n * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor\n * use, so the habit carries across the feature. Plain Enter is a new line: feedback is\n * written in paragraphs, unlike a chat.\n */\nexport function FeedbackComposer({\n  onSend,\n  pending = false,\n  attachment,\n  disabledReason,\n  rows = 3,\n  labels: labelsProp,\n  className,\n}: FeedbackComposerProps) {\n  const labels = useKitLabels(\"feedbackComposer\", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);\n  const [draft, setDraft] = useState(\"\");\n  const [file, setFile] = useState<File | null>(null);\n  const root = useRef<HTMLDivElement>(null);\n  // The server snapshot is \"Ctrl\"; the client corrects it after hydration.\n  const modifier = useSyncExternalStore(\n    noSubscribe,\n    () => (isApple() ? \"⌘\" : \"Ctrl\"),\n    () => \"Ctrl\",\n  );\n\n  if (disabledReason != null && disabledReason !== false) {\n    return <p className={cn(\"text-xs text-[var(--text-muted)]\", className)}>{disabledReason}</p>;\n  }\n\n  const canSend = draft.trim().length > 0 && !pending;\n  const send = () => {\n    if (!canSend) return;\n    const sentDraft = draft;\n    const sentFile = file;\n    Promise.resolve(onSend(draft.trim(), file))\n      .then(() => {\n        setDraft((current) => (current === sentDraft ? \"\" : current));\n        setFile((current) => (current === sentFile ? null : current));\n      })\n      .catch(() => {});\n  };\n\n  const config = attachment === true ? {} : attachment || null;\n\n  return (\n    <div ref={root} className={cn(\"space-y-2\", className)}>\n      <Textarea\n        rows={rows}\n        dir=\"auto\"\n        aria-label={labels.field}\n        placeholder={labels.placeholder}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if ((event.ctrlKey || event.metaKey) && event.key === \"Enter\") {\n            event.preventDefault();\n            send();\n          }\n        }}\n      />\n      <div className=\"flex flex-wrap items-end justify-between gap-2\">\n        {config ? (\n          <FeedbackAttachmentField\n            value={file}\n            onChange={setFile}\n            labels={config.labels}\n            accept={config.accept}\n            maxBytes={config.maxBytes}\n            onError={config.onError}\n            onCaptureScreenshot={config.onCaptureScreenshot}\n            // The box is this field's sibling; a paste in it bubbles to `root`.\n            pasteFrom={root}\n          />\n        ) : (\n          <span />\n        )}\n        <div className=\"ms-auto flex items-center gap-2\">\n          <span className=\"text-xs text-[var(--text-placeholder)]\">{labels.sendHint(modifier)}</span>\n          <Button onClick={send} disabled={!canSend} aria-busy={pending || undefined}>\n            {pending ? (\n              <Spinner label={null} className=\"size-4\" />\n            ) : (\n              <Send className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n            )}\n            {labels.send}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/feedback.d.ts

@@ -1,5 +1,6 @@
 export { DEFAULT_ATTACHMENT_ACCEPT, DEFAULT_FEEDBACK_ATTACHMENT_LABELS, DEFAULT_MAX_ATTACHMENT_BYTES, FeedbackAttachmentField, FeedbackAttachmentFieldLabels, pastedName } from './feedback/feedback-attachment.js';
-export { FeedbackAttachmentLabels, FeedbackCategoryOption, FeedbackDialog, FeedbackDialogLabels, FeedbackSubmission } from './feedback/feedback-dialog.js';
+export { DEFAULT_FEEDBACK_DIALOG_LABELS, FeedbackAttachmentLabels, FeedbackCategoryOption, FeedbackDialog, FeedbackDialogLabels, FeedbackDialogTextLabels, FeedbackSubmission } from './feedback/feedback-dialog.js';
 export { FEEDBACK_CATEGORY_META, FEEDBACK_CATEGORY_ORDER, FEEDBACK_STATUS_META, FEEDBACK_STATUS_ORDER, FeedbackCategory, FeedbackCategoryBadge, FeedbackDetail, FeedbackDetailSection, FeedbackNoteAttachment, FeedbackNoteEditor, FeedbackProse, FeedbackStatus, FeedbackStatusBadge, FeedbackStatusTransitions, feedbackCategoryRank, nextFeedbackStatus, selectableFeedbackStatuses, visibleFeedbackStatuses } from './feedback/feedback-inbox.js';
+export { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, FeedbackComposerAttachment, FeedbackComposerLabels, FeedbackComposerProps, FeedbackThread, FeedbackThreadAttachment, FeedbackThreadLabels, FeedbackThreadMessage, FeedbackThreadProps } from './feedback/feedback-thread.js';
 import 'react';
 import 'lucide-react';

package/dist/feedback.js

@@ -2,4 +2,5 @@
 export * from "./feedback/feedback-attachment.js";
 export * from "./feedback/feedback-dialog.js";
 export * from "./feedback/feedback-inbox.js";
+export * from "./feedback/feedback-thread.js";
 //# sourceMappingURL=feedback.js.map

package/dist/feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/feedback.ts"],"sourcesContent":["// `@eifi1/ui-kit/feedback` — the report form and the parts an inbox is built from.\n//\n// A re-slicing of the main barrel, not a new API. The kit owns the status vocabulary,\n// the transition policy and the look; each app still wires its own API, columns,\n// strings and permissions — see the note at the top of feedback/feedback-inbox.tsx.\nexport * from \"./feedback/feedback-attachment\";\nexport * from \"./feedback/feedback-dialog\";\nexport * from \"./feedback/feedback-inbox\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/feedback.ts"],"sourcesContent":["// `@eifi1/ui-kit/feedback` — the report form and the parts an inbox is built from.\n//\n// A re-slicing of the main barrel, not a new API. The kit owns the status vocabulary,\n// the transition policy and the look; each app still wires its own API, columns,\n// strings and permissions — see the note at the top of feedback/feedback-inbox.tsx.\nexport * from \"./feedback/feedback-attachment\";\nexport * from \"./feedback/feedback-dialog\";\nexport * from \"./feedback/feedback-inbox\";\nexport * from \"./feedback/feedback-thread\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/hooks/use-authed-src.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Fetch a file with the app's own credentials and hand back an object URL for it.
+ *
+ * A plain `<img src="/api/v1/…">` cannot carry a Bearer token, so the browser gets a
+ * 401 and the image — and any "open it" link built on the same path — fails. Both apps
+ * solved this once each, by hand: kastlan's `shared/components/authed-image.tsx` (ported
+ * from keksdose) and its `useDocumentBlobUrl` for floor plans. This is that code, once,
+ * with the two things neither copy did: a loading/error state a caller can render, and
+ * an abort when the URL changes mid-flight (a stale response used to overwrite the new
+ * one's object URL — and leak the old one, since nothing revoked it).
+ *
+ * The kit does no auth of its own: the caller hands over a {@link AuthedFetcher} — its
+ * axios client, its `fetch` with the header — and the kit only manages the blob's life:
+ *
+ *   - created when the bytes arrive,
+ *   - revoked when the URL changes, the fetcher reports an error, or the component
+ *     unmounts — so a long gallery session does not accumulate blobs,
+ *   - never exposed as a token-bearing URL: the object URL is `blob:` and local.
+ */
+/**
+ * The app's authenticated GET. Resolve to the file's bytes: a `Blob` (axios with
+ * `responseType: "blob"`), or a `Response` (plain `fetch`), whose `ok` is checked here.
+ *
+ * Honour `signal` if you can — a thumbnail scrolled past, or a lightbox paged on, then
+ * stops downloading. Ignoring it is safe; the result of a superseded call is discarded
+ * either way.
+ */
+type AuthedFetcher = (url: string, init: {
+    signal: AbortSignal;
+}) => Promise<Blob | Response>;
+/** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.
+ *  `error`: the fetch failed (see `error`). */
+type AuthedSrcStatus = "idle" | "loading" | "ready" | "error";
+interface UseAuthedSrcOptions {
+    /**
+     * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and
+     * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the
+     * image grid, the lightbox) has one code path for public and protected images.
+     */
+    fetcher?: AuthedFetcher | null;
+    /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */
+    enabled?: boolean;
+}
+interface UseAuthedSrcResult {
+    /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */
+    src: string | null;
+    status: AuthedSrcStatus;
+    /** What the fetcher threw, when `status` is `error`. */
+    error: unknown;
+    /** The blob's MIME type, once fetched (`""` when the server sent none). `undefined`
+     *  without a fetcher — nothing was fetched to ask. Lets a caller that does not know
+     *  whether a URL is an image or a PDF find out. */
+    type: string | undefined;
+    /** Fetch again — after an `error`, or to pick up a changed file at the same URL. */
+    retry: () => void;
+}
+/**
+ * `useAuthedSrc(url, { fetcher })` — see the module note.
+ *
+ * ```tsx
+ * const fetcher: AuthedFetcher = (url, { signal }) =>
+ *   apiClient.get(url, { responseType: "blob", signal }).then((r) => r.data);
+ * const { src, status } = useAuthedSrc(photo.file_path, { fetcher });
+ * ```
+ *
+ * The fetcher is read through a ref, so an inline arrow does not refetch on every
+ * render; a change of `url` (or `retry`) does.
+ */
+declare function useAuthedSrc(url: string | null | undefined, { fetcher, enabled }?: UseAuthedSrcOptions): UseAuthedSrcResult;
+
+export { type AuthedFetcher, type AuthedSrcStatus, type UseAuthedSrcOptions, type UseAuthedSrcResult, useAuthedSrc };

package/dist/hooks/use-authed-src.js

@@ -0,0 +1,63 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+async function toBlob(res) {
+  if (typeof Response !== "undefined" && res instanceof Response) {
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.blob();
+  }
+  return res;
+}
+function useAuthedSrc(url, { fetcher, enabled = true } = {}) {
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+  const hasFetcher = !!fetcher;
+  const [attempt, setAttempt] = useState(0);
+  const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;
+  const [state, setState] = useState({
+    key: null,
+    src: null,
+    status: "idle",
+    error: void 0,
+    type: void 0
+  });
+  useEffect(() => {
+    const fetchFn = fetcherRef.current;
+    if (!key || !url || !fetchFn) return;
+    const controller = new AbortController();
+    let created = null;
+    let active = true;
+    let settled = false;
+    fetchFn(url, { signal: controller.signal }).then(toBlob).then((blob) => {
+      settled = true;
+      if (!active) return;
+      created = URL.createObjectURL(blob);
+      setState({ key, src: created, status: "ready", error: void 0, type: blob.type });
+    }).catch((error) => {
+      settled = true;
+      if (!active) return;
+      setState({ key, src: null, status: "error", error, type: void 0 });
+    });
+    return () => {
+      active = false;
+      if (!settled) controller.abort();
+      if (created) URL.revokeObjectURL(created);
+    };
+  }, [key, url]);
+  const retry = useCallback(() => setAttempt((n) => n + 1), []);
+  if (!url || !enabled) {
+    return { src: null, status: "idle", error: void 0, type: void 0, retry };
+  }
+  if (!hasFetcher) {
+    return { src: url, status: "ready", error: void 0, type: void 0, retry };
+  }
+  if (state.key !== key) {
+    return { src: null, status: "loading", error: void 0, type: void 0, retry };
+  }
+  return { src: state.src, status: state.status, error: state.error, type: state.type, retry };
+}
+export {
+  useAuthedSrc
+};
+//# sourceMappingURL=use-authed-src.js.map

package/dist/hooks/use-authed-src.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-authed-src.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/**\n * Fetch a file with the app's own credentials and hand back an object URL for it.\n *\n * A plain `<img src=\"/api/v1/…\">` cannot carry a Bearer token, so the browser gets a\n * 401 and the image — and any \"open it\" link built on the same path — fails. Both apps\n * solved this once each, by hand: kastlan's `shared/components/authed-image.tsx` (ported\n * from keksdose) and its `useDocumentBlobUrl` for floor plans. This is that code, once,\n * with the two things neither copy did: a loading/error state a caller can render, and\n * an abort when the URL changes mid-flight (a stale response used to overwrite the new\n * one's object URL — and leak the old one, since nothing revoked it).\n *\n * The kit does no auth of its own: the caller hands over a {@link AuthedFetcher} — its\n * axios client, its `fetch` with the header — and the kit only manages the blob's life:\n *\n *   - created when the bytes arrive,\n *   - revoked when the URL changes, the fetcher reports an error, or the component\n *     unmounts — so a long gallery session does not accumulate blobs,\n *   - never exposed as a token-bearing URL: the object URL is `blob:` and local.\n */\n\n/**\n * The app's authenticated GET. Resolve to the file's bytes: a `Blob` (axios with\n * `responseType: \"blob\"`), or a `Response` (plain `fetch`), whose `ok` is checked here.\n *\n * Honour `signal` if you can — a thumbnail scrolled past, or a lightbox paged on, then\n * stops downloading. Ignoring it is safe; the result of a superseded call is discarded\n * either way.\n */\nexport type AuthedFetcher = (url: string, init: { signal: AbortSignal }) => Promise<Blob | Response>;\n\n/** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.\n *  `error`: the fetch failed (see `error`). */\nexport type AuthedSrcStatus = \"idle\" | \"loading\" | \"ready\" | \"error\";\n\nexport interface UseAuthedSrcOptions {\n  /**\n   * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and\n   * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the\n   * image grid, the lightbox) has one code path for public and protected images.\n   */\n  fetcher?: AuthedFetcher | null;\n  /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */\n  enabled?: boolean;\n}\n\nexport interface UseAuthedSrcResult {\n  /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */\n  src: string | null;\n  status: AuthedSrcStatus;\n  /** What the fetcher threw, when `status` is `error`. */\n  error: unknown;\n  /** The blob's MIME type, once fetched (`\"\"` when the server sent none). `undefined`\n   *  without a fetcher — nothing was fetched to ask. Lets a caller that does not know\n   *  whether a URL is an image or a PDF find out. */\n  type: string | undefined;\n  /** Fetch again — after an `error`, or to pick up a changed file at the same URL. */\n  retry: () => void;\n}\n\ninterface State {\n  /** Which request this state belongs to — see the effect. */\n  key: string | null;\n  src: string | null;\n  status: AuthedSrcStatus;\n  error: unknown;\n  type: string | undefined;\n}\n\nasync function toBlob(res: Blob | Response): Promise<Blob> {\n  if (typeof Response !== \"undefined\" && res instanceof Response) {\n    if (!res.ok) throw new Error(`HTTP ${res.status}`);\n    return res.blob();\n  }\n  return res as Blob;\n}\n\n/**\n * `useAuthedSrc(url, { fetcher })` — see the module note.\n *\n * ```tsx\n * const fetcher: AuthedFetcher = (url, { signal }) =>\n *   apiClient.get(url, { responseType: \"blob\", signal }).then((r) => r.data);\n * const { src, status } = useAuthedSrc(photo.file_path, { fetcher });\n * ```\n *\n * The fetcher is read through a ref, so an inline arrow does not refetch on every\n * render; a change of `url` (or `retry`) does.\n */\nexport function useAuthedSrc(\n  url: string | null | undefined,\n  { fetcher, enabled = true }: UseAuthedSrcOptions = {},\n): UseAuthedSrcResult {\n  const fetcherRef = useRef(fetcher);\n  useEffect(() => {\n    fetcherRef.current = fetcher;\n  });\n  const hasFetcher = !!fetcher;\n  const [attempt, setAttempt] = useState(0);\n  const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;\n  const [state, setState] = useState<State>({\n    key: null,\n    src: null,\n    status: \"idle\",\n    error: undefined,\n    type: undefined,\n  });\n\n  useEffect(() => {\n    const fetchFn = fetcherRef.current;\n    if (!key || !url || !fetchFn) return;\n    const controller = new AbortController();\n    let created: string | null = null;\n    let active = true;\n    // Settled: the response is in (or failed). Aborting then would signal a request\n    // that is long over — a fetcher that listens for `abort` (to log, to cancel a\n    // retry it scheduled, to count cancellations) would see a cancellation that\n    // never happened on every URL change and unmount.\n    let settled = false;\n    // No \"loading\" state is set here: a key the state does not describe yet already\n    // reads as loading (see the end of the hook).\n    fetchFn(url, { signal: controller.signal })\n      .then(toBlob)\n      .then((blob) => {\n        settled = true;\n        if (!active) return;\n        created = URL.createObjectURL(blob);\n        setState({ key, src: created, status: \"ready\", error: undefined, type: blob.type });\n      })\n      .catch((error: unknown) => {\n        settled = true;\n        if (!active) return;\n        setState({ key, src: null, status: \"error\", error, type: undefined });\n      });\n    return () => {\n      // `active` first: an in-flight response that lands after this must neither set\n      // state on an unmounted component nor create a blob nobody will revoke.\n      active = false;\n      // Only a request still in flight is aborted; `active` above is the stale-response\n      // guard either way.\n      if (!settled) controller.abort();\n      if (created) URL.revokeObjectURL(created);\n    };\n  }, [key, url]);\n\n  const retry = useCallback(() => setAttempt((n) => n + 1), []);\n\n  if (!url || !enabled) {\n    return { src: null, status: \"idle\", error: undefined, type: undefined, retry };\n  }\n  if (!hasFetcher) {\n    return { src: url, status: \"ready\", error: undefined, type: undefined, retry };\n  }\n  // Until the effect for THIS key has run, the state still describes the previous URL\n  // — a render in between must not show the old picture under the new name.\n  if (state.key !== key) {\n    return { src: null, status: \"loading\", error: undefined, type: undefined, retry };\n  }\n  return { src: state.src, status: state.status, error: state.error, type: state.type, retry };\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAsEzD,eAAe,OAAO,KAAqC;AACzD,MAAI,OAAO,aAAa,eAAe,eAAe,UAAU;AAC9D,QAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,QAAQ,IAAI,MAAM,EAAE;AACjD,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,SAAO;AACT;AAcO,SAAS,aACd,KACA,EAAE,SAAS,UAAU,KAAK,IAAyB,CAAC,GAChC;AACpB,QAAM,aAAa,OAAO,OAAO;AACjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AACxC,QAAM,MAAM,OAAO,WAAW,aAAa,GAAG,OAAO,IAAI,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB;AAAA,IACxC,KAAK;AAAA,IACL,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAS;AAC9B,UAAM,aAAa,IAAI,gBAAgB;AACvC,QAAI,UAAyB;AAC7B,QAAI,SAAS;AAKb,QAAI,UAAU;AAGd,YAAQ,KAAK,EAAE,QAAQ,WAAW,OAAO,CAAC,EACvC,KAAK,MAAM,EACX,KAAK,CAAC,SAAS;AACd,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,gBAAU,IAAI,gBAAgB,IAAI;AAClC,eAAS,EAAE,KAAK,KAAK,SAAS,QAAQ,SAAS,OAAO,QAAW,MAAM,KAAK,KAAK,CAAC;AAAA,IACpF,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,gBAAU;AACV,UAAI,CAAC,OAAQ;AACb,eAAS,EAAE,KAAK,KAAK,MAAM,QAAQ,SAAS,OAAO,MAAM,OAAU,CAAC;AAAA,IACtE,CAAC;AACH,WAAO,MAAM;AAGX,eAAS;AAGT,UAAI,CAAC,QAAS,YAAW,MAAM;AAC/B,UAAI,QAAS,KAAI,gBAAgB,OAAO;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,KAAK,GAAG,CAAC;AAEb,QAAM,QAAQ,YAAY,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5D,MAAI,CAAC,OAAO,CAAC,SAAS;AACpB,WAAO,EAAE,KAAK,MAAM,QAAQ,QAAQ,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AACA,MAAI,CAAC,YAAY;AACf,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAC/E;AAGA,MAAI,MAAM,QAAQ,KAAK;AACrB,WAAO,EAAE,KAAK,MAAM,QAAQ,WAAW,OAAO,QAAW,MAAM,QAAW,MAAM;AAAA,EAClF;AACA,SAAO,EAAE,KAAK,MAAM,KAAK,QAAQ,MAAM,QAAQ,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM;AAC7F;","names":[]}