@eifi1/ui-kit 0.11.0 → 0.13.0

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

@@ -0,0 +1,173 @@
+import * as react from 'react';
+import { ReactNode, Ref } 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;
+    /**
+     * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
+     * support ticket is asked something else ("Reply to Anna…") than a member adding to
+     * their own report, and one provider-wide label cannot say both.
+     */
+    placeholder?: string;
+    /**
+     * The draft, controlled — for a host that keeps it itself (saves it per ticket,
+     * prefills a template). Left out, the composer keeps its own. Either way a send
+     * that resolves clears only what was sent: controlled, that is an
+     * `onValueChange("")` the host receives like any keystroke, and only if the draft
+     * is still the one that went out.
+     */
+    value?: string;
+    /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the
+     *  clear after a send. Required to change a controlled `value`. */
+    onValueChange?: (value: string) => void;
+    /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply
+     *  chips) or focus the box. */
+    ref?: Ref<FeedbackComposerHandle>;
+    labels?: Partial<FeedbackComposerLabels>;
+    className?: string;
+}
+/**
+ * What a {@link FeedbackComposer} `ref` holds.
+ *
+ * keksdose F9: the support admin answers the same five questions all day and wants
+ * chips above the box ("Thanks, fixed in the next release") that drop their text in
+ * where the caret is. A controlled `value` alone cannot do that well — the host sees
+ * the string, not the caret, so it could only append — so the composer, which owns
+ * the textarea, does the splice.
+ */
+interface FeedbackComposerHandle {
+    /**
+     * Insert `text` at the caret, replacing any selection (the caret the box last had:
+     * a click on a chip blurs it, and the selection survives the blur), then focus the
+     * box with the caret after the inserted text so the reply can go on. Nothing is
+     * added around it — put a space or a newline in `text` if the reply needs one. A
+     * no-op while `disabledReason` replaces the box.
+     */
+    insertText: (text: string) => void;
+    focus: () => void;
+}
+/**
+ * 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, placeholder, value, onValueChange, ref, labels: labelsProp, className, }: FeedbackComposerProps): react.JSX.Element;
+
+export { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, type FeedbackComposerAttachment, type FeedbackComposerHandle, type FeedbackComposerLabels, type FeedbackComposerProps, FeedbackThread, type FeedbackThreadAttachment, type FeedbackThreadLabels, type FeedbackThreadMessage, type FeedbackThreadProps };

package/dist/feedback/feedback-thread.js

@@ -0,0 +1,264 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Paperclip, Send } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { formatRelativeTime } from "../lib/format.js";
+import { Button, EmptyState, Spinner, Textarea } from "../components/ui.js";
+import { Skeleton } from "../components/skeleton.js";
+import { Tooltip } from "../components/tooltip.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 && // The kit's Tooltip, not a native title: one tooltip look app-wide
+                // (keksdose F0 / dev#523).
+                /* @__PURE__ */ jsx(Tooltip, { label: new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date), children: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: "tabular-nums", children: formatRelativeTime(date, {
+                  now: reference,
+                  locale,
+                  // Past the kit's day steps it is a date: "2 weeks ago" makes
+                  // the reader do arithmetic the date already did.
+                  absoluteAfterDays: 6.5
+                }) }) })
+              ] }),
+              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 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,
+  placeholder,
+  value,
+  onValueChange,
+  ref,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  const [ownDraft, setOwnDraft] = useState("");
+  const controlled = value !== void 0;
+  const draft = controlled ? value : ownDraft;
+  const [file, setFile] = useState(null);
+  const root = useRef(null);
+  const box = useRef(null);
+  const latest = useRef(draft);
+  useLayoutEffect(() => {
+    latest.current = draft;
+  });
+  const caret = useRef(null);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (caret.current === null || !el) return;
+    el.focus();
+    el.setSelectionRange(caret.current, caret.current);
+    caret.current = null;
+  });
+  const setDraft = (next) => {
+    latest.current = next;
+    if (!controlled) setOwnDraft(next);
+    onValueChange?.(next);
+  };
+  useImperativeHandle(ref, () => ({
+    insertText: (text) => {
+      const el = box.current;
+      if (!el) return;
+      const current = latest.current;
+      const pending2 = caret.current;
+      const start = Math.min(pending2 ?? el.selectionStart ?? current.length, current.length);
+      const end = pending2 ?? Math.max(start, Math.min(el.selectionEnd ?? start, current.length));
+      caret.current = start + text.length;
+      setDraft(current.slice(0, start) + text + current.slice(end));
+    },
+    focus: () => box.current?.focus()
+  }));
+  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(() => {
+      if (latest.current === sentDraft) setDraft("");
+      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,
+        ref: box,
+        placeholder: 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, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { Paperclip, Send } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatRelativeTime } from \"../lib/format\";\nimport { Button, EmptyState, Spinner, Textarea } from \"../components/ui\";\nimport { Skeleton } from \"../components/skeleton\";\nimport { Tooltip } from \"../components/tooltip\";\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                  // The kit's Tooltip, not a native title: one tooltip look app-wide\n                  // (keksdose F0 / dev#523).\n                  <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: \"full\", timeStyle: \"short\" }).format(date)}>\n                    <time dateTime={date.toISOString()} className=\"tabular-nums\">\n                      {formatRelativeTime(date, {\n                        now: reference,\n                        locale,\n                        // Past the kit's day steps it is a date: \"2 weeks ago\" makes\n                        // the reader do arithmetic the date already did.\n                        absoluteAfterDays: 6.5,\n                      })}\n                    </time>\n                  </Tooltip>\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\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  /**\n   * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a\n   * support ticket is asked something else (\"Reply to Anna…\") than a member adding to\n   * their own report, and one provider-wide label cannot say both.\n   */\n  placeholder?: string;\n  /**\n   * The draft, controlled — for a host that keeps it itself (saves it per ticket,\n   * prefills a template). Left out, the composer keeps its own. Either way a send\n   * that resolves clears only what was sent: controlled, that is an\n   * `onValueChange(\"\")` the host receives like any keystroke, and only if the draft\n   * is still the one that went out.\n   */\n  value?: string;\n  /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the\n   *  clear after a send. Required to change a controlled `value`. */\n  onValueChange?: (value: string) => void;\n  /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply\n   *  chips) or focus the box. */\n  ref?: Ref<FeedbackComposerHandle>;\n  labels?: Partial<FeedbackComposerLabels>;\n  className?: string;\n}\n\n/**\n * What a {@link FeedbackComposer} `ref` holds.\n *\n * keksdose F9: the support admin answers the same five questions all day and wants\n * chips above the box (\"Thanks, fixed in the next release\") that drop their text in\n * where the caret is. A controlled `value` alone cannot do that well — the host sees\n * the string, not the caret, so it could only append — so the composer, which owns\n * the textarea, does the splice.\n */\nexport interface FeedbackComposerHandle {\n  /**\n   * Insert `text` at the caret, replacing any selection (the caret the box last had:\n   * a click on a chip blurs it, and the selection survives the blur), then focus the\n   * box with the caret after the inserted text so the reply can go on. Nothing is\n   * added around it — put a space or a newline in `text` if the reply needs one. A\n   * no-op while `disabledReason` replaces the box.\n   */\n  insertText: (text: string) => void;\n  focus: () => void;\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  placeholder,\n  value,\n  onValueChange,\n  ref,\n  labels: labelsProp,\n  className,\n}: FeedbackComposerProps) {\n  const labels = useKitLabels(\"feedbackComposer\", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);\n  const [ownDraft, setOwnDraft] = useState(\"\");\n  const controlled = value !== undefined;\n  const draft = controlled ? value : ownDraft;\n  const [file, setFile] = useState<File | null>(null);\n  const root = useRef<HTMLDivElement>(null);\n  const box = useRef<HTMLTextAreaElement>(null);\n  // The draft as of the last commit. The send's `.then` and `insertText` run after\n  // renders their closure did not see — text typed while the send was in flight, a\n  // second chip clicked before the first one's render — and must not act on a stale\n  // string (for a controlled draft there is no updater function to lean on).\n  const latest = useRef(draft);\n  useLayoutEffect(() => {\n    latest.current = draft;\n  });\n  // Where the caret goes once an inserted text has rendered.\n  const caret = useRef<number | null>(null);\n  useLayoutEffect(() => {\n    const el = box.current;\n    if (caret.current === null || !el) return;\n    el.focus();\n    el.setSelectionRange(caret.current, caret.current);\n    caret.current = null;\n  });\n\n  const setDraft = (next: string) => {\n    latest.current = next;\n    if (!controlled) setOwnDraft(next);\n    onValueChange?.(next);\n  };\n\n  useImperativeHandle(ref, () => ({\n    insertText: (text) => {\n      const el = box.current;\n      if (!el) return;\n      const current = latest.current;\n      // A second insert before the first has rendered goes after the first, not at the\n      // textarea's not-yet-moved caret. Otherwise the textarea's selection, which may\n      // be past the end of a controlled value the host has just shortened: clamp it.\n      const pending = caret.current;\n      const start = Math.min(pending ?? el.selectionStart ?? current.length, current.length);\n      const end = pending ?? Math.max(start, Math.min(el.selectionEnd ?? start, current.length));\n      caret.current = start + text.length;\n      setDraft(current.slice(0, start) + text + current.slice(end));\n    },\n    focus: () => box.current?.focus(),\n  }));\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        if (latest.current === sentDraft) setDraft(\"\");\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        ref={box}\n        placeholder={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":["pending"]}

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, FeedbackComposerHandle, 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