@igstack/app-catalog-frontend-core 6.9.0 → 6.10.0

package/dist/esm/modules/appCatalog/ui/detail/CommunityInput.js

@@ -0,0 +1,328 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { X, Paperclip } from "lucide-react";
+import React__default from "react";
+import { useTRPC } from "../../../../api/infra/trpc.js";
+import { cn } from "../../../../lib/utils.js";
+import { Button } from "../../../../ui/button.js";
+import { readDraft, readAttachments, writeDraft, writeAttachments, attachmentUrl } from "./communityDraft.js";
+import { formatCommunityError } from "./communityError.js";
+const MAX_HEIGHT = 200;
+const FLASH_MS = 900;
+const MAX_ATTACHMENTS = 3;
+const UPLOAD_URL = "/api/feedback-attachments/upload";
+const isImage = (file) => file.type.startsWith("image/");
+async function upload(files) {
+  const form = new FormData();
+  for (const file of files) form.append("image", file);
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: "POST",
+      body: form,
+      // The visitor cookie is the identity the upload is recorded against, and
+      // it is httpOnly — so it has to ride along explicitly.
+      credentials: "same-origin"
+    });
+    const payload = await response.json().catch(() => null);
+    const field = (key) => typeof payload === "object" && payload !== null ? payload[key] : void 0;
+    const ids = field("ids");
+    if (response.ok && Array.isArray(ids)) return ids.map(String);
+    const reported = field("error");
+    return typeof reported === "string" ? reported : "Could not attach that image";
+  } catch {
+    return "Could not attach that image";
+  }
+}
+function CommunityInput({
+  appSlug,
+  appName,
+  ref
+}) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const [text, setText] = React__default.useState(() => readDraft(appSlug));
+  const [images, setImages] = React__default.useState(
+    () => readAttachments(appSlug)
+  );
+  const [sent, setSent] = React__default.useState(false);
+  const [sends, setSends] = React__default.useState(0);
+  const [uploading, setUploading] = React__default.useState(false);
+  const [uploadError, setUploadError] = React__default.useState(null);
+  const [dragging, setDragging] = React__default.useState(false);
+  const inFlightRef = React__default.useRef(false);
+  const dragDepthRef = React__default.useRef(0);
+  const draftGenRef = React__default.useRef(0);
+  const [height, setHeight] = React__default.useState(40);
+  const fieldRef = React__default.useRef(null);
+  const mirrorRef = React__default.useRef(null);
+  const fileRef = React__default.useRef(null);
+  const formRef = React__default.useRef(null);
+  const flashTimerRef = React__default.useRef(void 0);
+  const [isCoarse, setIsCoarse] = React__default.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(pointer: coarse)").matches;
+  });
+  React__default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const handler = () => setIsCoarse(mq.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  React__default.useEffect(() => writeDraft(appSlug, text), [appSlug, text]);
+  React__default.useEffect(() => writeAttachments(appSlug, images), [appSlug, images]);
+  React__default.useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = fieldRef.current) == null ? void 0 : _a.focus();
+      const form = formRef.current;
+      if (!form) return;
+      form.classList.remove("is-flash");
+      void form.offsetWidth;
+      form.classList.add("is-flash");
+      clearTimeout(flashTimerRef.current);
+      flashTimerRef.current = setTimeout(
+        () => form.classList.remove("is-flash"),
+        FLASH_MS
+      );
+    }
+  }));
+  React__default.useEffect(() => () => clearTimeout(flashTimerRef.current), []);
+  const add = useMutation(
+    trpc.feedback.add.mutationOptions({
+      onSuccess: () => {
+        setText("");
+        setImages([]);
+        setUploadError(null);
+        setSent(true);
+        setSends((n) => n + 1);
+        void queryClient.invalidateQueries({
+          queryKey: trpc.feedback.list.queryKey({ resourceSlug: appSlug })
+        });
+      }
+    })
+  );
+  React__default.useEffect(() => {
+    var _a;
+    if (sends) (_a = fieldRef.current) == null ? void 0 : _a.focus();
+  }, [sends]);
+  const typing = text.trim() !== "";
+  const canSend = typing || images.length > 0;
+  const fit = React__default.useCallback(() => {
+    const field = fieldRef.current;
+    const mirror = mirrorRef.current;
+    if (!field || !mirror) return;
+    mirror.style.width = `${field.offsetWidth}px`;
+    mirror.value = text || " ";
+    const styles = window.getComputedStyle(field);
+    const lineHeight = parseFloat(styles.lineHeight);
+    const paddingTop = parseFloat(styles.paddingTop);
+    const paddingBottom = parseFloat(styles.paddingBottom);
+    const borderTop = parseFloat(styles.borderTopWidth);
+    const borderBottom = parseFloat(styles.borderBottomWidth);
+    const oneLine = lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+    setHeight(Math.min(Math.max(mirror.scrollHeight + 2, oneLine), MAX_HEIGHT));
+  }, [text]);
+  React__default.useLayoutEffect(fit, [fit]);
+  React__default.useEffect(() => {
+    const field = fieldRef.current;
+    if (!field || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(field);
+    return () => observer.disconnect();
+  }, [fit]);
+  const attach = async (picked) => {
+    const files = picked.filter(isImage);
+    if (files.length === 0 || inFlightRef.current) return;
+    const room = MAX_ATTACHMENTS - images.length;
+    if (room <= 0) {
+      setUploadError(`Up to ${MAX_ATTACHMENTS} images`);
+      return;
+    }
+    setUploadError(null);
+    inFlightRef.current = true;
+    setUploading(true);
+    const startGen = draftGenRef.current;
+    const result = await upload(files.slice(0, room));
+    inFlightRef.current = false;
+    setUploading(false);
+    if (draftGenRef.current !== startGen) return;
+    if (typeof result === "string") {
+      setUploadError(result);
+      return;
+    }
+    const newImages = result.map((id, i) => {
+      var _a;
+      return {
+        id,
+        name: ((_a = files[i]) == null ? void 0 : _a.name) ?? "image"
+      };
+    });
+    setImages((current) => {
+      const updated = [...current, ...newImages].slice(0, MAX_ATTACHMENTS);
+      writeAttachments(appSlug, updated);
+      return updated;
+    });
+    if (files.length > room)
+      setUploadError(`Only the first ${room} were attached`);
+  };
+  const carriesFiles = (e) => [...e.dataTransfer.types].includes("Files");
+  const submit = () => {
+    if (!canSend || add.isPending || uploading) return;
+    const body = text.trim();
+    add.mutate({
+      resourceSlug: appSlug,
+      ...body ? { body } : {},
+      ...images.length > 0 ? { attachmentIds: images.map((i) => i.id) } : {}
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: "know-more",
+      "data-drop": dragging || void 0,
+      onSubmit: (e) => {
+        e.preventDefault();
+        submit();
+      },
+      onDragEnter: (e) => {
+        if (!carriesFiles(e)) return;
+        dragDepthRef.current += 1;
+        setDragging(true);
+      },
+      onDragOver: (e) => {
+        if (carriesFiles(e)) e.preventDefault();
+      },
+      onDragLeave: (e) => {
+        if (!carriesFiles(e)) return;
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (dragDepthRef.current === 0) setDragging(false);
+      },
+      onDrop: (e) => {
+        if (!carriesFiles(e)) return;
+        e.preventDefault();
+        dragDepthRef.current = 0;
+        setDragging(false);
+        void attach([...e.dataTransfer.files]);
+      },
+      children: [
+        images.length > 0 && /* @__PURE__ */ jsx("ul", { className: "know-more-thumbs", children: images.map((image) => /* @__PURE__ */ jsxs("li", { className: "know-more-thumb", children: [
+          /* @__PURE__ */ jsx("img", { src: attachmentUrl(image.id), alt: image.name }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${image.name}`,
+              onClick: () => setImages(
+                (current) => current.filter((i) => i.id !== image.id)
+              ),
+              children: /* @__PURE__ */ jsx(X, { className: "size-2.5" })
+            }
+          )
+        ] }, image.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "know-more-field", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "know-more-clip",
+              "aria-label": "Attach a screenshot",
+              title: "Attach a screenshot",
+              "aria-busy": uploading || void 0,
+              disabled: uploading || images.length >= MAX_ATTACHMENTS,
+              onClick: () => {
+                var _a;
+                return (_a = fileRef.current) == null ? void 0 : _a.click();
+              },
+              children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: "image/*",
+              multiple: true,
+              tabIndex: -1,
+              "aria-hidden": true,
+              className: "sr-only",
+              onChange: (e) => {
+                void attach([...e.target.files ?? []]);
+                e.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: fieldRef,
+              rows: 1,
+              value: text,
+              "aria-label": `Know more about ${appName}?`,
+              placeholder: isCoarse ? "Add a fact, a fix or a question" : "Add a fact, a fix or a question — press Enter",
+              style: {
+                height,
+                overflowY: height >= MAX_HEIGHT ? "auto" : "hidden"
+              },
+              onChange: (e) => {
+                setText(e.target.value);
+                setSent(false);
+                if (add.isError) add.reset();
+              },
+              onPaste: (e) => {
+                const files = [...e.clipboardData.files].filter(isImage);
+                if (files.length === 0) return;
+                e.preventDefault();
+                void attach(files);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+                  submit();
+                }
+                if (e.key === "Escape" && !e.nativeEvent.isComposing && (text !== "" || images.length > 0)) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  draftGenRef.current += 1;
+                  setText("");
+                  setImages([]);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              size: "sm",
+              className: "know-more-send",
+              disabled: !canSend || add.isPending || uploading,
+              children: "Send"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: mirrorRef,
+              rows: 1,
+              readOnly: true,
+              tabIndex: -1,
+              "aria-hidden": true,
+              className: "know-more-mirror"
+            }
+          )
+        ] }),
+        !isCoarse && /* @__PURE__ */ jsx("p", { className: cn("know-more-hint", typing && "is-on"), children: "Enter sends · Shift+Enter new line · Esc clears · paste or drop a screenshot" }),
+        /* @__PURE__ */ jsx("p", { className: "know-more-attaching", "aria-live": "polite", children: uploading ? "Attaching…" : "" }),
+        (add.isError || uploadError) && /* @__PURE__ */ jsx("p", { role: "alert", className: "know-more-error", children: add.isError ? `Could not send: ${formatCommunityError(add.error)}. Your note is still here.` : uploadError }),
+        /* @__PURE__ */ jsx("p", { role: "status", className: cn("know-more-sent", sent && "is-on"), children: sent ? "Thanks — sent. It shows below." : "" })
+      ]
+    }
+  );
+}
+export {
+  CommunityInput
+};
+//# sourceMappingURL=CommunityInput.js.map

package/dist/esm/modules/appCatalog/ui/detail/CommunityInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityInput.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/CommunityInput.tsx"],"sourcesContent":["import { useMutation, useQueryClient } from '@tanstack/react-query'\nimport { Paperclip, X } from 'lucide-react'\nimport React from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { cn } from '~/lib/utils'\nimport { Button } from '~/ui/button'\nimport {\n  attachmentUrl,\n  readAttachments,\n  readDraft,\n  writeAttachments,\n  writeDraft,\n} from './communityDraft'\nimport type { PendingImage } from './communityDraft'\nimport { formatCommunityError } from './communityError'\n\nconst MAX_HEIGHT = 200\n\n/** How long the Share highlight stays on the field, ms. */\nconst FLASH_MS = 900\n\n/** Mirrors the server's cap, which refuses anything above it regardless. */\nconst MAX_ATTACHMENTS = 3\n\nconst UPLOAD_URL = '/api/feedback-attachments/upload'\n\n/** What the card holds on to, so \"Share what you know\" can point at the field. */\nexport interface CommunityInputHandle {\n  /** Focuses the field and highlights it briefly. Re-triggers on every call. */\n  focus: () => void\n}\n\nconst isImage = (file: File) => file.type.startsWith('image/')\n\n/**\n * Upload on pick, not on send: the person sees whether their screenshot\n * arrived while they can still do something about it, and Send stays one fast\n * request that cannot half-fail with images in flight.\n */\nasync function upload(files: File[]): Promise<string[] | string> {\n  const form = new FormData()\n  for (const file of files) form.append('image', file)\n  try {\n    const response = await fetch(UPLOAD_URL, {\n      method: 'POST',\n      body: form,\n      // The visitor cookie is the identity the upload is recorded against, and\n      // it is httpOnly — so it has to ride along explicitly.\n      credentials: 'same-origin',\n    })\n    const payload: unknown = await response.json().catch(() => null)\n    const field = (key: string): unknown =>\n      typeof payload === 'object' && payload !== null\n        ? (payload as Record<string, unknown>)[key]\n        : undefined\n    const ids = field('ids')\n    if (response.ok && Array.isArray(ids)) return ids.map(String)\n    const reported = field('error')\n    return typeof reported === 'string'\n      ? reported\n      : 'Could not attach that image'\n  } catch {\n    return 'Could not attach that image'\n  }\n}\n\n/**\n * The card's one ask for more information, at the top of Behind this card:\n * one line with Send beside it, grey until there is something to send. The\n * field grows as the text wraps. Screenshots come in through the\n * paperclip, paste or drop, and a screenshot alone is a valid note.\n */\nexport function CommunityInput({\n  appSlug,\n  appName,\n  ref,\n}: {\n  appSlug: string\n  appName: string\n  ref?: React.Ref<CommunityInputHandle>\n}) {\n  const trpc = useTRPC()\n  const queryClient = useQueryClient()\n  // Seeded from storage so a draft survives the tab panel unmounting under it.\n  const [text, setText] = React.useState(() => readDraft(appSlug))\n  const [images, setImages] = React.useState<PendingImage[]>(() =>\n    readAttachments(appSlug),\n  )\n  const [sent, setSent] = React.useState(false)\n  // Counts successful sends, so a click on Send hands focus back every time.\n  const [sends, setSends] = React.useState(0)\n  const [uploading, setUploading] = React.useState(false)\n  const [uploadError, setUploadError] = React.useState<string | null>(null)\n  const [dragging, setDragging] = React.useState(false)\n  // The guard events read, set synchronously: `uploading` only updates on the\n  // next render, so a second paste or drop in the same tick would slip past it.\n  const inFlightRef = React.useRef(false)\n  const dragDepthRef = React.useRef(0)\n  // Cleared draft stays cleared: Esc increments this; the upload checks it\n  // on completion so an in-flight upload does not re-add its image.\n  const draftGenRef = React.useRef(0)\n  const [height, setHeight] = React.useState(40)\n  const fieldRef = React.useRef<HTMLTextAreaElement>(null)\n  // A hidden twin measures the height the text needs, so the real field can\n  // animate to it. Setting `height: auto` on the real one snaps instead.\n  const mirrorRef = React.useRef<HTMLTextAreaElement>(null)\n  const fileRef = React.useRef<HTMLInputElement>(null)\n  const formRef = React.useRef<HTMLFormElement>(null)\n  const flashTimerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  // Detect coarse pointer (touch) to adjust placeholder and hide keyboard hints.\n  const [isCoarse, setIsCoarse] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(pointer: coarse)').matches\n  })\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mq = window.matchMedia('(pointer: coarse)')\n    const handler = () => setIsCoarse(mq.matches)\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  React.useEffect(() => writeDraft(appSlug, text), [appSlug, text])\n  React.useEffect(() => writeAttachments(appSlug, images), [appSlug, images])\n\n  // The class goes on the form, whose className React never rewrites, and\n  // is removed and re-added with a reflow between so a second call restarts\n  // the highlight instead of merely extending it.\n  React.useImperativeHandle(ref, () => ({\n    focus: () => {\n      fieldRef.current?.focus()\n      const form = formRef.current\n      if (!form) return\n      form.classList.remove('is-flash')\n      void form.offsetWidth\n      form.classList.add('is-flash')\n      clearTimeout(flashTimerRef.current)\n      flashTimerRef.current = setTimeout(\n        () => form.classList.remove('is-flash'),\n        FLASH_MS,\n      )\n    },\n  }))\n  React.useEffect(() => () => clearTimeout(flashTimerRef.current), [])\n\n  const add = useMutation(\n    trpc.feedback.add.mutationOptions({\n      onSuccess: () => {\n        setText('')\n        setImages([])\n        setUploadError(null)\n        setSent(true)\n        setSends((n) => n + 1)\n        void queryClient.invalidateQueries({\n          queryKey: trpc.feedback.list.queryKey({ resourceSlug: appSlug }),\n        })\n      },\n    }),\n  )\n\n  // Focus stays in the field so the next Tab doesn't walk the grid behind the scrim.\n  React.useEffect(() => {\n    if (sends) fieldRef.current?.focus()\n  }, [sends])\n\n  const typing = text.trim() !== ''\n  const canSend = typing || images.length > 0\n\n  const fit = React.useCallback(() => {\n    const field = fieldRef.current\n    const mirror = mirrorRef.current\n    if (!field || !mirror) return\n    mirror.style.width = `${field.offsetWidth}px`\n    mirror.value = text || ' '\n    // Compute ONE_LINE from the actual field styles (varies by viewport width).\n    const styles = window.getComputedStyle(field)\n    const lineHeight = parseFloat(styles.lineHeight)\n    const paddingTop = parseFloat(styles.paddingTop)\n    const paddingBottom = parseFloat(styles.paddingBottom)\n    const borderTop = parseFloat(styles.borderTopWidth)\n    const borderBottom = parseFloat(styles.borderBottomWidth)\n    const oneLine =\n      lineHeight + paddingTop + paddingBottom + borderTop + borderBottom\n    // +2: scrollHeight excludes the border, the box height includes it.\n    setHeight(Math.min(Math.max(mirror.scrollHeight + 2, oneLine), MAX_HEIGHT))\n  }, [text])\n  React.useLayoutEffect(fit, [fit])\n  React.useEffect(() => {\n    const field = fieldRef.current\n    if (!field || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(fit)\n    observer.observe(field)\n    return () => observer.disconnect()\n  }, [fit])\n\n  /**\n   * One upload at a time: a paste or drop while one is in flight is ignored,\n   * and the \"Attaching…\" line says why. The updater clamps as well, so the\n   * draft can never hold more than the server accepts on send.\n   */\n  const attach = async (picked: File[]) => {\n    const files = picked.filter(isImage)\n    if (files.length === 0 || inFlightRef.current) return\n    const room = MAX_ATTACHMENTS - images.length\n    if (room <= 0) {\n      setUploadError(`Up to ${MAX_ATTACHMENTS} images`)\n      return\n    }\n    setUploadError(null)\n    inFlightRef.current = true\n    setUploading(true)\n    const startGen = draftGenRef.current\n    const result = await upload(files.slice(0, room))\n    inFlightRef.current = false\n    setUploading(false)\n    // Draft was cleared (Esc) while upload was in flight: stay cleared.\n    if (draftGenRef.current !== startGen) return\n    if (typeof result === 'string') {\n      setUploadError(result)\n      return\n    }\n    const newImages = result.map((id, i) => ({\n      id,\n      name: files[i]?.name ?? 'image',\n    }))\n    // Merge into both state and persisted draft so unmount restores it.\n    setImages((current) => {\n      const updated = [...current, ...newImages].slice(0, MAX_ATTACHMENTS)\n      writeAttachments(appSlug, updated)\n      return updated\n    })\n    if (files.length > room)\n      setUploadError(`Only the first ${room} were attached`)\n  }\n\n  /** Only a drag carrying files is ours; dragged text still drops into the field. */\n  const carriesFiles = (e: React.DragEvent) =>\n    [...e.dataTransfer.types].includes('Files')\n\n  const submit = () => {\n    if (!canSend || add.isPending || uploading) return\n    const body = text.trim()\n    add.mutate({\n      resourceSlug: appSlug,\n      ...(body ? { body } : {}),\n      ...(images.length > 0 ? { attachmentIds: images.map((i) => i.id) } : {}),\n    })\n  }\n\n  return (\n    <form\n      ref={formRef}\n      // State rides on data attributes: the className stays static so the\n      // imperative `is-flash` below survives a re-render.\n      className=\"know-more\"\n      data-drop={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault()\n        submit()\n      }}\n      onDragEnter={(e) => {\n        if (!carriesFiles(e)) return\n        dragDepthRef.current += 1\n        setDragging(true)\n      }}\n      onDragOver={(e) => {\n        // Accepting the drop is what lets it fire.\n        if (carriesFiles(e)) e.preventDefault()\n      }}\n      onDragLeave={(e) => {\n        if (!carriesFiles(e)) return\n        // Every child the drag crosses fires its own enter and leave, so only\n        // the last leave means the drag left the form.\n        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)\n        if (dragDepthRef.current === 0) setDragging(false)\n      }}\n      onDrop={(e) => {\n        if (!carriesFiles(e)) return\n        e.preventDefault()\n        dragDepthRef.current = 0\n        setDragging(false)\n        void attach([...e.dataTransfer.files])\n      }}\n    >\n      {images.length > 0 && (\n        <ul className=\"know-more-thumbs\">\n          {images.map((image) => (\n            <li key={image.id} className=\"know-more-thumb\">\n              <img src={attachmentUrl(image.id)} alt={image.name} />\n              <button\n                type=\"button\"\n                aria-label={`Remove ${image.name}`}\n                onClick={() =>\n                  setImages((current) =>\n                    current.filter((i) => i.id !== image.id),\n                  )\n                }\n              >\n                <X className=\"size-2.5\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <div className=\"know-more-field\">\n        <button\n          type=\"button\"\n          className=\"know-more-clip\"\n          aria-label=\"Attach a screenshot\"\n          title=\"Attach a screenshot\"\n          aria-busy={uploading || undefined}\n          disabled={uploading || images.length >= MAX_ATTACHMENTS}\n          onClick={() => fileRef.current?.click()}\n        >\n          <Paperclip className=\"size-4\" />\n        </button>\n        <input\n          ref={fileRef}\n          type=\"file\"\n          accept=\"image/*\"\n          multiple\n          tabIndex={-1}\n          aria-hidden\n          className=\"sr-only\"\n          onChange={(e) => {\n            void attach([...(e.target.files ?? [])])\n            // Cleared so picking the SAME file again still fires a change.\n            e.target.value = ''\n          }}\n        />\n        <textarea\n          ref={fieldRef}\n          rows={1}\n          value={text}\n          aria-label={`Know more about ${appName}?`}\n          placeholder={\n            isCoarse\n              ? 'Add a fact, a fix or a question'\n              : 'Add a fact, a fix or a question — press Enter'\n          }\n          style={{\n            height,\n            overflowY: height >= MAX_HEIGHT ? 'auto' : 'hidden',\n          }}\n          onChange={(e) => {\n            setText(e.target.value)\n            setSent(false)\n            if (add.isError) add.reset()\n          }}\n          onPaste={(e) => {\n            const files = [...e.clipboardData.files].filter(isImage)\n            if (files.length === 0) return\n            e.preventDefault()\n            void attach(files)\n          }}\n          onKeyDown={(e) => {\n            if (\n              e.key === 'Enter' &&\n              !e.shiftKey &&\n              !e.nativeEvent.isComposing\n            ) {\n              e.preventDefault()\n              submit()\n            }\n            // Esc clears a draft, and only a draft: with nothing typed or\n            // attached it must reach the card's layer so the card still closes.\n            if (\n              e.key === 'Escape' &&\n              !e.nativeEvent.isComposing &&\n              (text !== '' || images.length > 0)\n            ) {\n              e.preventDefault()\n              e.stopPropagation()\n              draftGenRef.current += 1\n              setText('')\n              setImages([])\n            }\n          }}\n        />\n        <Button\n          type=\"submit\"\n          size=\"sm\"\n          className=\"know-more-send\"\n          disabled={!canSend || add.isPending || uploading}\n        >\n          Send\n        </Button>\n        <textarea\n          ref={mirrorRef}\n          rows={1}\n          readOnly\n          tabIndex={-1}\n          aria-hidden\n          className=\"know-more-mirror\"\n        />\n      </div>\n      {!isCoarse && (\n        <p className={cn('know-more-hint', typing && 'is-on')}>\n          Enter sends · Shift+Enter new line · Esc clears · paste or drop a\n          screenshot\n        </p>\n      )}\n      <p className=\"know-more-attaching\" aria-live=\"polite\">\n        {uploading ? 'Attaching…' : ''}\n      </p>\n      {(add.isError || uploadError) && (\n        <p role=\"alert\" className=\"know-more-error\">\n          {add.isError\n            ? `Could not send: ${formatCommunityError(add.error)}. Your note is still here.`\n            : uploadError}\n        </p>\n      )}\n      <p role=\"status\" className={cn('know-more-sent', sent && 'is-on')}>\n        {sent ? 'Thanks — sent. It shows below.' : ''}\n      </p>\n    </form>\n  )\n}\n"],"names":["React"],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/detail/CommunitySection.d.ts

@@ -0,0 +1,15 @@
+import { Claim } from '@igstack/app-catalog-backend-core';
+import { default as React } from 'react';
+import { CommunityInputHandle } from './CommunityInput.js';
+export type CommunitySectionHandle = CommunityInputHandle;
+/**
+ * The top of Behind this card: one input that takes words and screenshots,
+ * then "Comments" with its help, then everything already said about the entry
+ * as one feed.
+ */
+export declare function CommunitySection({ appSlug, appName, claims, ref, }: {
+    appSlug: string;
+    appName: string;
+    claims?: Claim[];
+    ref?: React.Ref<CommunitySectionHandle>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/detail/CommunitySection.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { CommentsFeed } from "./CommentsFeed.js";
+import { CommentsHelp } from "./CommentsHelp.js";
+import { CommunityInput } from "./CommunityInput.js";
+const NO_CLAIMS = [];
+function CommunitySection({
+  appSlug,
+  appName,
+  claims = NO_CLAIMS,
+  ref
+}) {
+  const headingId = React__default.useId();
+  return /* @__PURE__ */ jsxs("section", { className: "behind-group", children: [
+    /* @__PURE__ */ jsx(CommunityInput, { ref, appSlug, appName }),
+    /* @__PURE__ */ jsxs("div", { className: "comments-head", children: [
+      /* @__PURE__ */ jsx("h2", { id: headingId, className: "behind-group__title", children: "Comments" }),
+      /* @__PURE__ */ jsx(CommentsHelp, { appSlug, appName })
+    ] }),
+    /* @__PURE__ */ jsx(CommentsFeed, { appSlug, claims, labelledBy: headingId })
+  ] });
+}
+export {
+  CommunitySection
+};
+//# sourceMappingURL=CommunitySection.js.map

package/dist/esm/modules/appCatalog/ui/detail/CommunitySection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunitySection.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/CommunitySection.tsx"],"sourcesContent":["import type { Claim } from '@igstack/app-catalog-backend-core'\nimport React from 'react'\nimport { CommentsFeed } from './CommentsFeed'\nimport { CommentsHelp } from './CommentsHelp'\nimport { CommunityInput } from './CommunityInput'\nimport type { CommunityInputHandle } from './CommunityInput'\n\nexport type CommunitySectionHandle = CommunityInputHandle\n\nconst NO_CLAIMS: Claim[] = []\n\n/**\n * The top of Behind this card: one input that takes words and screenshots,\n * then \"Comments\" with its help, then everything already said about the entry\n * as one feed.\n */\nexport function CommunitySection({\n  appSlug,\n  appName,\n  claims = NO_CLAIMS,\n  ref,\n}: {\n  appSlug: string\n  appName: string\n  claims?: Claim[]\n  ref?: React.Ref<CommunitySectionHandle>\n}) {\n  const headingId = React.useId()\n  return (\n    <section className=\"behind-group\">\n      <CommunityInput ref={ref} appSlug={appSlug} appName={appName} />\n      <div className=\"comments-head\">\n        <h2 id={headingId} className=\"behind-group__title\">\n          Comments\n        </h2>\n        <CommentsHelp appSlug={appSlug} appName={appName} />\n      </div>\n      <CommentsFeed appSlug={appSlug} claims={claims} labelledBy={headingId} />\n    </section>\n  )\n}\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,YAAqB,CAAA;AAOpB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,GAKG;AACD,QAAM,YAAYA,eAAM,MAAA;AACxB,SACE,qBAAC,WAAA,EAAQ,WAAU,gBACjB,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,KAAU,SAAkB,QAAA,CAAkB;AAAA,IAC9D,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,IAAI,WAAW,WAAU,uBAAsB,UAAA,YAEnD;AAAA,MACA,oBAAC,cAAA,EAAa,SAAkB,QAAA,CAAkB;AAAA,IAAA,GACpD;AAAA,IACA,oBAAC,cAAA,EAAa,SAAkB,QAAgB,YAAY,UAAA,CAAW;AAAA,EAAA,GACzE;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/detail/DetailTabs.d.ts

@@ -29,28 +29,10 @@ export interface DetailTab {
  * Panels mount only while active, which also resets their internal state on
  * the way out — the same choice the card makes when it navigates between apps.
  */
-export declare function DetailTabs({ tabs, forcedTab, requestTab, requestNonce, band, bandClassName, }: {
+export declare function DetailTabs({ tabs, forcedTab, band, bandClassName, trailing, }: {
     tabs: DetailTab[];
     /** Overrides `?tab=` while set. */
     forcedTab?: string;
-    /**
-     * A one-shot "please show this tab" from outside the strip — the band's
-     * "Suggest a change" uses it.
-     *
-     * It has to come through here rather than the caller writing `?tab=` itself:
-     * `useUrlSyncedState` keeps its own `useState` seeded once from the URL and only
-     * ever pushes state OUT to the URL, so a second instance writing the same key
-     * does not update this one. The two then fight — the strip's next render sees the
-     * URL disagreeing with its own state and navigates back over it.
-     */
-    requestTab?: string;
-    /**
-     * Bumped by the caller every time it asks again. Without it a repeat request is
-     * indistinguishable from the same standing value, so the effect below does not
-     * re-fire and the second ask does nothing — which is what made the band's
-     * button work exactly once per card.
-     */
-    requestNonce?: number;
     /**
      * Identity and actions, shown ABOVE the strip and inside the same tinted
      * surface. Owned here rather than by the caller because the band and the
@@ -61,4 +43,11 @@ export declare function DetailTabs({ tabs, forcedTab, requestTab, requestNonce,
     band?: React.ReactNode;
     /** Cancels the dialog's own padding so the tint reaches the card's edges. */
     bandClassName?: string;
+    /**
+     * Shown at the right end of the strip, outside the tablist so it is not
+     * announced as a tab. Handed `select` because the strip owns the active tab:
+     * a caller writing `?tab=` itself would fight `useUrlSyncedState`, which keeps
+     * its own state and only pushes it out to the url.
+     */
+    trailing?: (select: (id: string) => void) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/detail/DetailTabs.js

@@ -5,10 +5,9 @@ import { useUrlSyncedState } from "../../hooks/useUrlSyncedState.js";
 function DetailTabs({
   tabs,
   forcedTab,
-  requestTab,
-  requestNonce,
   band,
-  bandClassName
+  bandClassName,
+  trailing
 }) {
   var _a;
   const defaultTabId = (_a = tabs[0]) == null ? void 0 : _a.id;
@@ -18,22 +17,36 @@ function DetailTabs({
     encode: (value) => value && value !== defaultTabId ? value : void 0
   });
   const ids = tabs.map((t) => t.id);
-  const RETIRED = { metadata: "documentation" };
+  const RETIRED = {
+    metadata: "documentation",
+    notes: "behind"
+  };
+  const ABSENT = {
+    documentation: "behind"
+  };
   const [userChose, setUserChose] = React__default.useState(false);
-  React__default.useEffect(() => {
-    if (!requestTab) return;
-    setUserChose(true);
-    setUrlTab(requestTab);
-  }, [requestTab, requestNonce, setUrlTab]);
   const [lastForced, setLastForced] = React__default.useState(forcedTab);
   if (forcedTab !== lastForced) {
     setLastForced(forcedTab);
     if (lastForced && !forcedTab && !userChose) setUrlTab(lastForced);
   }
   const asked = userChose || !forcedTab ? urlTab : forcedTab;
-  const requested = RETIRED[asked] ?? asked;
+  const retired = RETIRED[asked] ?? asked;
+  const requested = ids.includes(retired) ? retired : ABSENT[retired] ?? retired;
   const activeId = ids.includes(requested) ? requested : ids[0] ?? "";
   const active = tabs.find((t) => t.id === activeId);
+  const select = (id) => {
+    setUserChose(true);
+    setUrlTab(id);
+    requestAnimationFrame(() => {
+      const tabElement = document.getElementById(`detail-tab-${id}`);
+      tabElement == null ? void 0 : tabElement.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    });
+  };
   const onKeyDown = (event) => {
     var _a2;
     const delta = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
@@ -42,39 +55,38 @@ function DetailTabs({
     const from = ids.indexOf(activeId);
     const next = ids[(from + delta + ids.length) % ids.length];
     if (!next) return;
-    setUserChose(true);
-    setUrlTab(next);
+    select(next);
     (_a2 = document.getElementById(`detail-tab-${next}`)) == null ? void 0 : _a2.focus();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: cn("detail-band", bandClassName), children: [
       band,
-      /* @__PURE__ */ jsx("div", { role: "tablist", className: "detail-tabs mt-5", onKeyDown, children: tabs.map((tab) => {
-        const selected = tab.id === activeId;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            id: `detail-tab-${tab.id}`,
-            "aria-selected": selected,
-            "aria-controls": `detail-panel-${tab.id}`,
-            tabIndex: selected ? 0 : -1,
-            "aria-label": tab.ariaLabel,
-            className: "detail-tab",
-            onClick: () => {
-              setUserChose(true);
-              setUrlTab(tab.id);
+      /* @__PURE__ */ jsxs("div", { className: "detail-tabs-row mt-5", children: [
+        /* @__PURE__ */ jsx("div", { role: "tablist", className: "detail-tabs", onKeyDown, children: tabs.map((tab) => {
+          const selected = tab.id === activeId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: `detail-tab-${tab.id}`,
+              "aria-selected": selected,
+              "aria-controls": `detail-panel-${tab.id}`,
+              tabIndex: selected ? 0 : -1,
+              "aria-label": tab.ariaLabel,
+              className: "detail-tab",
+              onClick: () => select(tab.id),
+              children: [
+                tab.label,
+                tab.chip && /* @__PURE__ */ jsx("span", { className: "detail-tab__chip", children: tab.chip }),
+                tab.dot && /* @__PURE__ */ jsx("span", { className: "detail-tab__dot", "aria-hidden": "true" })
+              ]
             },
-            children: [
-              tab.label,
-              tab.chip && /* @__PURE__ */ jsx("span", { className: "detail-tab__chip", children: tab.chip }),
-              tab.dot && /* @__PURE__ */ jsx("span", { className: "detail-tab__dot", "aria-hidden": "true" })
-            ]
-          },
-          tab.id
-        );
-      }) })
+            tab.id
+          );
+        }) }),
+        trailing && /* @__PURE__ */ jsx("div", { className: "detail-tabs-trailing", children: trailing(select) })
+      ] })
     ] }),
     active && /* @__PURE__ */ jsx(
       "div",