@eifi1/ui-kit 0.22.0 → 0.23.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-inbox.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  Ban,\n  Bug,\n  CheckCircle2,\n  CloudUpload,\n  Eye,\n  HelpCircle,\n  Inbox,\n  Lightbulb,\n  MoreHorizontal,\n  OctagonAlert,\n  PauseCircle,\n  Wrench,\n} from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, Textarea } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { FeedbackAttachmentField } from \"./feedback-attachment\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\n/**\n * The feedback **inbox**, as the parts two apps were each writing separately.\n *\n * `feedback-dialog.tsx` next door is the other half — the form somebody files a\n * report with — and the split between them is the same one: this owns the\n * *vocabulary*, the *policy* about how a report moves, and the *look*; the app\n * owns the data, the API and every string.\n *\n * It exists because both apps had grown their own copy. Keksdose's is the one\n * this is lifted from, comments and all, because it is the one that had been\n * argued with users for a year — the glyph per status, the two sizes of the\n * status control, what a row offers from where it currently stands. Steering\n * Design's was thinner in every one of those places and read as a different\n * product for no reason anyone chose.\n *\n * **What is deliberately NOT here.** The two apps store a report differently and\n * are meant to: one keeps the reporter's context in a JSON column and the\n * screenshot in an object store, the other keeps a `page_path` and the bytes in\n * the row. So there is no `Feedback` type in this file and nothing here takes\n * one. Every component takes the values it draws, and the detail panel is a\n * *shell* the app fills — which is what lets each keep the shape that suits it\n * without either of them inventing a second look for a status pill.\n */\n\n/** The seven states a report can be in.\n *\n *  Shared value for value across both apps on purpose: it is what lets one habit,\n *  and one agent prompt, work on either repo. Four are a chain and three sit off\n *  it — see {@link visibleFeedbackStatuses} for what that buys. */\nexport type FeedbackStatus =\n  | \"OPEN\"\n  | \"IN_PROGRESS\"\n  | \"IN_EVALUATION\"\n  | \"NEEDS_LIVE_TEST\"\n  | \"POSTPONED\"\n  | \"DONE\"\n  | \"WONT_DO\";\n\n/** What a report is about. `CRASH` is filed by an error boundary and never\n *  chosen, which is exactly why it is loud below and absent from every picker. */\nexport type FeedbackCategory = \"CRASH\" | \"BUG\" | \"IDEA\" | \"QUESTION\" | \"OTHER\";\n\n/**\n * A glyph and a tone per status.\n *\n * Colour alone is not a label — two of these sit a hue apart, and a consumer who\n * moves `--brand` can park it beside any of the others — so every status carries\n * its own shape as well. Declaration order is chain order, and\n * {@link FEEDBACK_STATUS_ORDER} is derived from it rather than restated, because\n * a restated list cannot be checked for exhaustiveness: an eighth status would\n * break the build here and leave a literal seven long.\n */\nexport const FEEDBACK_STATUS_META: Record<\n  FeedbackStatus,\n  { icon: LucideIcon; activeBg: string; activeText: string }\n> = {\n  OPEN: {\n    icon: Inbox,\n    activeBg: \"bg-[var(--bg-active)]\",\n    activeText: \"text-[var(--text-primary)]\",\n  },\n  IN_PROGRESS: {\n    icon: Wrench,\n    activeBg: \"bg-[var(--warning-bg)]\",\n    activeText: \"text-[var(--warning)]\",\n  },\n  // Where solved work is parked, waiting on the person who reported it. Its own\n  // colour, because \"somebody has to check this\" is a state you want to find by\n  // scanning rather than by reading.\n  IN_EVALUATION: {\n    icon: Eye,\n    activeBg: \"bg-[var(--info-bg)]\",\n    activeText: \"text-[var(--info)]\",\n  },\n  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it\n  // reads as \"waiting on something\" rather than as a done or a refusal, and it\n  // follows whatever the consumer's brand is instead of pinning an indigo island\n  // beside it.\n  NEEDS_LIVE_TEST: {\n    icon: CloudUpload,\n    activeBg: \"bg-[var(--brand-bg)]\",\n    activeText: \"text-[var(--brand-muted)]\",\n  },\n  // Parked on purpose. Muted, not `--danger`: it is not a refusal.\n  POSTPONED: {\n    icon: PauseCircle,\n    activeBg: \"bg-[var(--bg-active)]\",\n    activeText: \"text-[var(--text-secondary)]\",\n  },\n  // The one status with nowhere to move to: the vocabulary has a brand, an info, a\n  // warning and a danger, and nothing that means \"succeeded\". Deliberately NOT\n  // borrowed from a family that means something else — `--status-synced` is a\n  // FIELD's trip to the database rather than an outcome, and tokens.css says so in\n  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which\n  // is why both carry a glyph and neither leans on colour alone.\n  DONE: {\n    icon: CheckCircle2,\n    activeBg: \"bg-[var(--success-bg)]\",\n    activeText: \"text-[var(--success)]\",\n  },\n  WONT_DO: {\n    icon: Ban,\n    activeBg: \"bg-[var(--danger-bg)]\",\n    activeText: \"text-[var(--danger)]\",\n  },\n};\n\n/** Chain order, then the three off it. The order a picker offers, and the rank a\n *  status column sorts by — so a list sorted by status reads as a queue rather\n *  than as an alphabet. */\nexport const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META) as FeedbackStatus[];\n\n/** States that sit OFF the linear chain: reachable from anywhere, leading\n *  nowhere by themselves. `WONT_DO` has always worked this way; `POSTPONED`\n *  (\"not now\") and `NEEDS_LIVE_TEST` (\"resolved, but only provable on a deployed\n *  build\") are the same shape — a row can be parked or handed to the next deploy\n *  from any point, and comes back to the chain when somebody picks a real state\n *  for it.\n *\n *  Kept out of the forward chain deliberately: putting them in it would mean an\n *  \"advance\" gesture could park an item, and every row would have to pass\n *  through them to reach `DONE`. */\nconst OFF_CHAIN: FeedbackStatus[] = [\"NEEDS_LIVE_TEST\", \"POSTPONED\", \"WONT_DO\"];\n\nconst FORWARD_CHAIN: FeedbackStatus[] = [\"OPEN\", \"IN_PROGRESS\", \"IN_EVALUATION\", \"DONE\"];\n\n/** The next status along the chain, or null at the end (or off it, as `WONT_DO`\n *  is). What a swipe-to-advance gesture commits. */\nexport function nextFeedbackStatus(current: FeedbackStatus): FeedbackStatus | null {\n  const at = FORWARD_CHAIN.indexOf(current);\n  return at !== -1 && at < FORWARD_CHAIN.length - 1 ? FORWARD_CHAIN[at + 1] : null;\n}\n\n/**\n * The steps that make sense from where a row currently stands.\n *\n * For the compact control in a table cell: it is a glanceable triage affordance,\n * and a row of seven icons in a cell is noise. One step forward, one step back\n * (so an item can be sent back for rework), and any of the three off-chain\n * verdicts — which is what makes those usable as verdicts at all.\n *\n * The two parking states are not dead ends: each offers the step that resumes\n * work and the ones that close it, but deliberately **not each other** —\n * \"postponed\" and \"waiting on a deploy\" are different answers to different\n * questions, and a row moving between them directly is a re-triage, which starts\n * by picking the work back up.\n */\nexport function visibleFeedbackStatuses(current: FeedbackStatus): FeedbackStatus[] {\n  const set = new Set<FeedbackStatus>([current]);\n  const at = FORWARD_CHAIN.indexOf(current);\n  if (at !== -1) {\n    if (at < FORWARD_CHAIN.length - 1) set.add(FORWARD_CHAIN[at + 1]);\n    if (at > 0) set.add(FORWARD_CHAIN[at - 1]);\n    for (const off of OFF_CHAIN) set.add(off);\n  } else if (current !== \"WONT_DO\") {\n    set.add(\"IN_PROGRESS\");\n    set.add(\"DONE\");\n    set.add(\"WONT_DO\");\n  }\n  // WONT_DO falls through with nothing added: it stays terminal, reopened by a\n  // note from its author rather than by a status pill.\n  return FEEDBACK_STATUS_ORDER.filter((status) => set.has(status));\n}\n\n/**\n * Every status, in chain order — what an EXPANDED row offers.\n *\n * {@link visibleFeedbackStatuses} narrows the choice to the steps that make\n * sense from where a row is, which is right for a table cell. Once the row is\n * open in front of you, that same narrowing turns every non-adjacent move into a\n * walk: OPEN to DONE meant three round trips, and WONT_DO could not be left at\n * all except through a rework note.\n *\n * Takes a `current` it does not use, so the two policies read as one pair at the\n * call sites and a future rule (\"terminal rows still cannot jump to X\") has a\n * place to live.\n */\nexport function selectableFeedbackStatuses(_current: FeedbackStatus): FeedbackStatus[] {\n  return [...FEEDBACK_STATUS_ORDER];\n}\n\n/**\n * Per-category badge treatment, the counterpart to the status meta above.\n *\n * A category cell that is one grey pill holding the raw enum makes a CRASH —\n * filed automatically, by somebody staring at a broken page right now — read\n * exactly like a QUESTION, and sit unnoticed in the queue. `--danger` plus its own\n * glyph is what makes that impossible; the hand-filed categories stay\n * deliberately quiet so that the loud one means something.\n *\n * Declaration order is triage order, CRASH first.\n */\nexport const FEEDBACK_CATEGORY_META: Record<\n  FeedbackCategory,\n  { icon: LucideIcon; badgeBg: string; badgeText: string }\n> = {\n  CRASH: {\n    icon: OctagonAlert,\n    badgeBg: \"bg-[var(--danger-bg)]\",\n    badgeText: \"text-[var(--danger)]\",\n  },\n  BUG: {\n    icon: Bug,\n    badgeBg: \"bg-[var(--warning-bg)]\",\n    badgeText: \"text-[var(--warning)]\",\n  },\n  IDEA: {\n    icon: Lightbulb,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n  QUESTION: {\n    icon: HelpCircle,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n  OTHER: {\n    icon: MoreHorizontal,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n};\n\n/** Triage order, CRASH first — also a category column's sort key and the option\n *  order in its filter. Sorting by the raw enum is alphabetical, which parks\n *  CRASH between BUG and IDEA. */\nexport const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META) as FeedbackCategory[];\n\n/** A category's rank for a column sort. Anything this build has never heard of —\n *  an older client against a newer API — sorts LAST rather than to `indexOf`'s\n *  −1, which would rank it above CRASH. */\nexport function feedbackCategoryRank(category: FeedbackCategory): number {\n  const at = FEEDBACK_CATEGORY_ORDER.indexOf(category);\n  return at === -1 ? FEEDBACK_CATEGORY_ORDER.length : at;\n}\n\n/**\n * The category as a badge.\n *\n * Falls back to OTHER's treatment for a category this build has never heard of,\n * so an older client against a newer API degrades to a readable neutral pill\n * instead of throwing on `meta.icon` — a crash report must not be able to cause\n * one. The *label* is the caller's, and for the same reason it needs the same\n * guard: pass what OTHER is called if you cannot name the value you were given.\n */\nexport function FeedbackCategoryBadge({\n  category,\n  label,\n  compact = false,\n  className,\n}: {\n  category: FeedbackCategory;\n  label: ReactNode;\n  compact?: boolean;\n  className?: string;\n}) {\n  // Annotated `| undefined` because the Record's index signature promises a hit\n  // for every FeedbackCategory, and at runtime the API can hand us one that is not.\n  const known: (typeof FEEDBACK_CATEGORY_META)[\"OTHER\"] | undefined = FEEDBACK_CATEGORY_META[category];\n  const meta = known ?? FEEDBACK_CATEGORY_META.OTHER;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded font-medium\",\n        compact ? \"px-1.5 py-0.5 text-[11px]\" : \"px-2 py-0.5 text-xs\",\n        meta.badgeBg,\n        meta.badgeText,\n        className,\n      )}\n    >\n      <Icon className={compact ? \"size-3\" : \"size-3.5\"} aria-hidden />\n      {label}\n    </span>\n  );\n}\n\n/** Where a report stands, as a badge — for the places that only *report* the\n *  status rather than offering to change it. */\nexport function FeedbackStatusBadge({\n  status,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  label: ReactNode;\n  className?: string;\n}) {\n  const meta = FEEDBACK_STATUS_META[status] ?? FEEDBACK_STATUS_META.OPEN;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium\",\n        meta.activeBg,\n        meta.activeText,\n        className,\n      )}\n    >\n      <Icon className=\"size-3\" aria-hidden />\n      {label}\n    </span>\n  );\n}\n\n/**\n * A row of statuses to switch a report to — either a table column's icon row or\n * an expanded panel's labelled pills.\n *\n * One component for both, because everything except the class strings is the\n * same decision: which one is current, and when the buttons are disabled. Two\n * copies had already drifted — only the icon variant carried `aria-label` and\n * `aria-pressed`, so the pill row was unlabelled for a screen reader.\n *\n * WHICH statuses to offer is the caller's, not this component's:\n * {@link visibleFeedbackStatuses} for a compact column,\n * {@link selectableFeedbackStatuses} for an expanded row. Passing the list keeps\n * that policy readable at the two call sites instead of hiding it behind\n * `variant`.\n */\nexport function FeedbackStatusTransitions({\n  status,\n  statuses,\n  canEdit,\n  onPick,\n  variant,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  statuses: FeedbackStatus[];\n  canEdit: boolean;\n  onPick: (status: FeedbackStatus) => void;\n  variant: \"icon\" | \"pill\";\n  /** What each status is called, translated by the app. */\n  label: (status: FeedbackStatus) => string;\n  className?: string;\n}) {\n  return (\n    // Not a control: it only stops clicks on the buttons inside from bubbling to\n    // the row. The buttons are the keyboard path, and Enter/Space on them fires\n    // their own click, which lands here the same way.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- propagation guard around real buttons\n    <div\n      className={cn(variant === \"icon\" ? \"flex items-center gap-0.5\" : \"flex flex-wrap gap-1.5\", className)}\n      // A status control inside a clickable row must not also open the row.\n      onClick={(event) => event.stopPropagation()}\n    >\n      {statuses.map((value) => {\n        const meta = FEEDBACK_STATUS_META[value];\n        const Icon = meta.icon;\n        const active = status === value;\n        const name = label(value);\n        const button = (\n          <button\n            key={value}\n            type=\"button\"\n            disabled={!canEdit || active}\n            onClick={() => onPick(value)}\n            aria-label={name}\n            aria-pressed={active}\n            className={cn(\n              \"transition-colors\",\n              variant === \"icon\"\n                ? cn(\n                    \"flex size-7 items-center justify-center rounded\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText)\n                      : \"text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n                  )\n                : cn(\n                    \"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText, \"border-transparent\")\n                      : \"border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)]\",\n                  ),\n              // Both stay unclickable, but only the read-only case is DIMMED: the\n              // current status is the one thing in the row that has to be legible\n              // at a glance, and among seven pills a faded active one reads as\n              // \"unavailable\" rather than as \"this is where the row stands\".\n              (!canEdit || active) && \"cursor-default\",\n              !canEdit && \"opacity-60\",\n            )}\n          >\n            <Icon className={variant === \"icon\" ? \"size-4\" : \"size-3.5\"} aria-hidden />\n            {variant === \"pill\" && name}\n          </button>\n        );\n        // The icon row has no visible label, so it needs the tooltip; the pills\n        // carry theirs inline.\n        //\n        // ⚠️ ABOVE, and portalled (Keksdose live #339). `side=\"bottom\"` put the bubble\n        // straight over the NEXT ROW's icons — in a queue you triage by running down it\n        // with the pointer, that is the row you are about to reach, and it was covered\n        // every time you paused on one. Above covers the row you have just left instead.\n        //\n        // `portal` is not cosmetic here. An absolutely-positioned bubble is clipped by\n        // any ancestor that scrolls — this cell lives inside the DataTable's own\n        // scroller — and it cannot flip: `placeTooltip` is what moves the bubble below\n        // the icon for the FIRST row, where there is no room above it, instead of\n        // painting it off the top of the list.\n        return variant === \"icon\" ? (\n          <Tooltip key={value} label={name} side=\"top\" portal>\n            {button}\n          </Tooltip>\n        ) : (\n          button\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * A textarea and its two buttons — for an outcome, for a note sent back with a\n * report, for a body being corrected.\n *\n * One component because all three are the same gesture: a draft that is not\n * committed until it is saved. Ctrl/⌘+Enter submits, which is the same shortcut\n * the compose dialog next door uses, so the habit carries across the feature.\n *\n * ## `initial` seeds the draft; it does not own it (changed 2026-09-22)\n *\n * This used to re-seed from `initial` in an effect, and that effect threw away\n * whatever was in the box — **and the picture attached to it** — every time the\n * prop arrived with a different value. `initial` is normally the saved note, so\n * the list refreshing under the editor, or the owner re-deriving the same string,\n * was enough: a triager halfway through a reply, with a screenshot picked out,\n * lost both and got the saved text back with no way to undo it.\n *\n * A draft belongs to the thing being edited, so switching to a different note is a\n * different editor — say so with a `key`:\n *\n * ```tsx\n * <FeedbackNoteEditor key={note.id} initial={note.body} … />\n * ```\n *\n * Where the id is not in hand at the call site, pass {@link resetKey} instead and\n * the editor re-seeds when THAT changes. Either way the decision is the caller's,\n * which is the point: the editor cannot tell a new subject from a new render.\n */\nexport function FeedbackNoteEditor({\n  initial,\n  pending,\n  onSave,\n  onCancel,\n  saveLabel,\n  cancelLabel,\n  placeholder,\n  rows = 3,\n  attachment,\n  resetKey,\n}: {\n  initial: string;\n  pending: boolean;\n  onSave: (value: string, attachment?: File | null) => void;\n  onCancel: () => void;\n  saveLabel: ReactNode;\n  cancelLabel: ReactNode;\n  /** A line above the field saying what to write, not an in-field placeholder:\n   *  a hint that disappears the moment somebody starts typing is a hint that is\n   *  gone exactly when it is being followed. */\n  placeholder?: ReactNode;\n  rows?: number;\n  /** Offer a picture with the note (Steering Design feedback #128). Omitted,\n   *  the editor is exactly the text box it always was — which is what the\n   *  *outcome* editor beside it wants, since an outcome is the answer rather\n   *  than the evidence. */\n  attachment?: FeedbackNoteAttachment;\n  /** Change this to say \"the editor is now editing something ELSE\", and the draft\n   *  and its attachment are dropped and re-seeded from `initial`. For call sites\n   *  that cannot put a `key` on the editor (see the note above). Leave it out and\n   *  the draft is never thrown away behind the user's back. */\n  resetKey?: string | number;\n}) {\n  const [draft, setDraft] = useState(initial);\n  const [file, setFile] = useState<File | null>(null);\n  // Adjusted during render rather than in an effect: an effect would paint the old\n  // draft first and then replace it, and — far worse — it is a second definition of\n  // when a draft dies that the caller cannot see. React re-runs this component\n  // immediately, before anything is committed to the screen.\n  const [seededFor, setSeededFor] = useState(resetKey);\n  if (resetKey !== seededFor) {\n    setSeededFor(resetKey);\n    setDraft(initial);\n    setFile(null);\n  }\n  // The editor's own root, which is where a paste made in the text box bubbles\n  // to: the attachment field below is the box's sibling, so a paste in the box\n  // never passes through the field's own subtree. It listens here instead\n  // (Steering Design feedback #140).\n  const root = useRef<HTMLDivElement>(null);\n  const submit = () => onSave(draft, file);\n  return (\n    // Not a control: a delegated Ctrl/Cmd+Enter shortcut for the textarea inside,\n    // which is what holds focus. The save button is the non-shortcut path.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- delegated keyboard shortcut for the focused field\n    <div\n      ref={root}\n      className=\"space-y-2\"\n      onKeyDown={(event) => {\n        if ((event.ctrlKey || event.metaKey) && event.key === \"Enter\" && !pending) {\n          event.preventDefault();\n          submit();\n        }\n      }}\n    >\n      {placeholder && <p className=\"text-xs text-[var(--text-muted)]\">{placeholder}</p>}\n      <Textarea rows={rows} value={draft} onChange={(event) => setDraft(event.target.value)} />\n      {attachment && (\n        <FeedbackAttachmentField\n          value={file}\n          onChange={setFile}\n          labels={attachment.labels}\n          accept={attachment.accept}\n          maxBytes={attachment.maxBytes}\n          onError={attachment.onError}\n          onCaptureScreenshot={attachment.onCaptureScreenshot}\n          // Within THIS editor's subtree, not on `document`: the editor sits\n          // inline on a page that has other fields, so a paste made in one of\n          // them is meant for that one. The textarea above is where the caret\n          // already is, and it is the field's sibling — so the field is told\n          // to listen on their common parent, where the paste bubbles to.\n          pasteFrom={root}\n        />\n      )}\n      <div className=\"flex justify-end gap-2\">\n        <Button variant=\"ghost\" onClick={onCancel}>\n          {cancelLabel}\n        </Button>\n        <Button variant=\"brand\" disabled={pending} onClick={submit}>\n          {saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** What {@link FeedbackNoteEditor} needs in order to offer a picture with the\n *  note: the same four things {@link FeedbackAttachmentField} takes, so the\n *  reply path is held to the app's own limits rather than to the defaults. */\nexport interface FeedbackNoteAttachment {\n  labels: FeedbackAttachmentLabels;\n  accept?: string[];\n  maxBytes?: number;\n  onError?: (kind: \"type\" | \"size\") => void;\n  onCaptureScreenshot?: () => Promise<File | null>;\n}\n\n/**\n * One labelled block of an opened report.\n *\n * The detail panel is a stack of these, and it is a stack rather than a\n * component with fixed fields on purpose: the two apps keep a report's context\n * and its screenshot in genuinely different places, and a shell that insisted on\n * both would force one of them to invent a shape it does not have. What is\n * shared is what a section *looks* like — and that is all that made the two\n * panels read as different products.\n */\nexport function FeedbackDetailSection({\n  title,\n  action,\n  children,\n}: {\n  title: ReactNode;\n  /** Something on the title's own line — an edit button, a resolved-at date. */\n  action?: ReactNode;\n  children: ReactNode;\n}) {\n  return (\n    <div>\n      <div className=\"mb-1 flex items-center justify-between gap-2\">\n        <div className=\"text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          {title}\n        </div>\n        {action}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/** The stack a detail panel is. Here so the spacing between sections is decided\n *  once rather than by whichever app was written second. */\nexport function FeedbackDetail({ children }: { children: ReactNode }) {\n  return <div className=\"space-y-3 text-sm\">{children}</div>;\n}\n\n/** Prose inside a section — a body, an outcome, a note.\n *\n *  `whitespace-pre-wrap` is the whole component: a report is written in\n *  paragraphs, and a note appended to it later is separated by blank lines that\n *  carry the entire \"this arrived after the answer\" reading. */\nexport function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {\n  if (!children) return <p className=\"text-[var(--text-placeholder)]\">{empty ?? \"—\"}</p>;\n  return (\n    <p className=\"whitespace-pre-wrap text-[var(--text-secondary)]\">{children}</p>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-inbox.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  Ban,\n  Bug,\n  CheckCircle2,\n  CloudUpload,\n  Eye,\n  HelpCircle,\n  Inbox,\n  Lightbulb,\n  MoreHorizontal,\n  OctagonAlert,\n  PauseCircle,\n  Wrench,\n} from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, Textarea } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { FeedbackAttachmentField, type FeedbackAttachmentErrorInfo } from \"./feedback-attachment\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\n/**\n * The feedback **inbox**, as the parts two apps were each writing separately.\n *\n * `feedback-dialog.tsx` next door is the other half — the form somebody files a\n * report with — and the split between them is the same one: this owns the\n * *vocabulary*, the *policy* about how a report moves, and the *look*; the app\n * owns the data, the API and every string.\n *\n * It exists because both apps had grown their own copy. Keksdose's is the one\n * this is lifted from, comments and all, because it is the one that had been\n * argued with users for a year — the glyph per status, the two sizes of the\n * status control, what a row offers from where it currently stands. Steering\n * Design's was thinner in every one of those places and read as a different\n * product for no reason anyone chose.\n *\n * **What is deliberately NOT here.** The two apps store a report differently and\n * are meant to: one keeps the reporter's context in a JSON column and the\n * screenshot in an object store, the other keeps a `page_path` and the bytes in\n * the row. So there is no `Feedback` type in this file and nothing here takes\n * one. Every component takes the values it draws, and the detail panel is a\n * *shell* the app fills — which is what lets each keep the shape that suits it\n * without either of them inventing a second look for a status pill.\n */\n\n/** The seven states a report can be in.\n *\n *  Shared value for value across both apps on purpose: it is what lets one habit,\n *  and one agent prompt, work on either repo. Four are a chain and three sit off\n *  it — see {@link visibleFeedbackStatuses} for what that buys. */\nexport type FeedbackStatus =\n  | \"OPEN\"\n  | \"IN_PROGRESS\"\n  | \"IN_EVALUATION\"\n  | \"NEEDS_LIVE_TEST\"\n  | \"POSTPONED\"\n  | \"DONE\"\n  | \"WONT_DO\";\n\n/** What a report is about. `CRASH` is filed by an error boundary and never\n *  chosen, which is exactly why it is loud below and absent from every picker. */\nexport type FeedbackCategory = \"CRASH\" | \"BUG\" | \"IDEA\" | \"QUESTION\" | \"OTHER\";\n\n/**\n * A glyph and a tone per status.\n *\n * Colour alone is not a label — two of these sit a hue apart, and a consumer who\n * moves `--brand` can park it beside any of the others — so every status carries\n * its own shape as well. Declaration order is chain order, and\n * {@link FEEDBACK_STATUS_ORDER} is derived from it rather than restated, because\n * a restated list cannot be checked for exhaustiveness: an eighth status would\n * break the build here and leave a literal seven long.\n */\nexport const FEEDBACK_STATUS_META: Record<\n  FeedbackStatus,\n  { icon: LucideIcon; activeBg: string; activeText: string }\n> = {\n  OPEN: {\n    icon: Inbox,\n    activeBg: \"bg-[var(--bg-active)]\",\n    activeText: \"text-[var(--text-primary)]\",\n  },\n  IN_PROGRESS: {\n    icon: Wrench,\n    activeBg: \"bg-[var(--warning-bg)]\",\n    activeText: \"text-[var(--warning)]\",\n  },\n  // Where solved work is parked, waiting on the person who reported it. Its own\n  // colour, because \"somebody has to check this\" is a state you want to find by\n  // scanning rather than by reading.\n  IN_EVALUATION: {\n    icon: Eye,\n    activeBg: \"bg-[var(--info-bg)]\",\n    activeText: \"text-[var(--info)]\",\n  },\n  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it\n  // reads as \"waiting on something\" rather than as a done or a refusal, and it\n  // follows whatever the consumer's brand is instead of pinning an indigo island\n  // beside it.\n  NEEDS_LIVE_TEST: {\n    icon: CloudUpload,\n    activeBg: \"bg-[var(--brand-bg)]\",\n    activeText: \"text-[var(--brand-muted)]\",\n  },\n  // Parked on purpose. Muted, not `--danger`: it is not a refusal.\n  POSTPONED: {\n    icon: PauseCircle,\n    activeBg: \"bg-[var(--bg-active)]\",\n    activeText: \"text-[var(--text-secondary)]\",\n  },\n  // The one status with nowhere to move to: the vocabulary has a brand, an info, a\n  // warning and a danger, and nothing that means \"succeeded\". Deliberately NOT\n  // borrowed from a family that means something else — `--status-synced` is a\n  // FIELD's trip to the database rather than an outcome, and tokens.css says so in\n  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which\n  // is why both carry a glyph and neither leans on colour alone.\n  DONE: {\n    icon: CheckCircle2,\n    activeBg: \"bg-[var(--success-bg)]\",\n    activeText: \"text-[var(--success)]\",\n  },\n  WONT_DO: {\n    icon: Ban,\n    activeBg: \"bg-[var(--danger-bg)]\",\n    activeText: \"text-[var(--danger)]\",\n  },\n};\n\n/** Chain order, then the three off it. The order a picker offers, and the rank a\n *  status column sorts by — so a list sorted by status reads as a queue rather\n *  than as an alphabet. */\nexport const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META) as FeedbackStatus[];\n\n/** States that sit OFF the linear chain: reachable from anywhere, leading\n *  nowhere by themselves. `WONT_DO` has always worked this way; `POSTPONED`\n *  (\"not now\") and `NEEDS_LIVE_TEST` (\"resolved, but only provable on a deployed\n *  build\") are the same shape — a row can be parked or handed to the next deploy\n *  from any point, and comes back to the chain when somebody picks a real state\n *  for it.\n *\n *  Kept out of the forward chain deliberately: putting them in it would mean an\n *  \"advance\" gesture could park an item, and every row would have to pass\n *  through them to reach `DONE`. */\nconst OFF_CHAIN: FeedbackStatus[] = [\"NEEDS_LIVE_TEST\", \"POSTPONED\", \"WONT_DO\"];\n\nconst FORWARD_CHAIN: FeedbackStatus[] = [\"OPEN\", \"IN_PROGRESS\", \"IN_EVALUATION\", \"DONE\"];\n\n/** The next status along the chain, or null at the end (or off it, as `WONT_DO`\n *  is). What a swipe-to-advance gesture commits. */\nexport function nextFeedbackStatus(current: FeedbackStatus): FeedbackStatus | null {\n  const at = FORWARD_CHAIN.indexOf(current);\n  return at !== -1 && at < FORWARD_CHAIN.length - 1 ? FORWARD_CHAIN[at + 1] : null;\n}\n\n/**\n * The steps that make sense from where a row currently stands.\n *\n * For the compact control in a table cell: it is a glanceable triage affordance,\n * and a row of seven icons in a cell is noise. One step forward, one step back\n * (so an item can be sent back for rework), and any of the three off-chain\n * verdicts — which is what makes those usable as verdicts at all.\n *\n * The two parking states are not dead ends: each offers the step that resumes\n * work and the ones that close it, but deliberately **not each other** —\n * \"postponed\" and \"waiting on a deploy\" are different answers to different\n * questions, and a row moving between them directly is a re-triage, which starts\n * by picking the work back up.\n */\nexport function visibleFeedbackStatuses(current: FeedbackStatus): FeedbackStatus[] {\n  const set = new Set<FeedbackStatus>([current]);\n  const at = FORWARD_CHAIN.indexOf(current);\n  if (at !== -1) {\n    if (at < FORWARD_CHAIN.length - 1) set.add(FORWARD_CHAIN[at + 1]);\n    if (at > 0) set.add(FORWARD_CHAIN[at - 1]);\n    for (const off of OFF_CHAIN) set.add(off);\n  } else if (current !== \"WONT_DO\") {\n    set.add(\"IN_PROGRESS\");\n    set.add(\"DONE\");\n    set.add(\"WONT_DO\");\n  }\n  // WONT_DO falls through with nothing added: it stays terminal, reopened by a\n  // note from its author rather than by a status pill.\n  return FEEDBACK_STATUS_ORDER.filter((status) => set.has(status));\n}\n\n/**\n * Every status, in chain order — what an EXPANDED row offers.\n *\n * {@link visibleFeedbackStatuses} narrows the choice to the steps that make\n * sense from where a row is, which is right for a table cell. Once the row is\n * open in front of you, that same narrowing turns every non-adjacent move into a\n * walk: OPEN to DONE meant three round trips, and WONT_DO could not be left at\n * all except through a rework note.\n *\n * Takes a `current` it does not use, so the two policies read as one pair at the\n * call sites and a future rule (\"terminal rows still cannot jump to X\") has a\n * place to live.\n */\nexport function selectableFeedbackStatuses(_current: FeedbackStatus): FeedbackStatus[] {\n  return [...FEEDBACK_STATUS_ORDER];\n}\n\n/**\n * Per-category badge treatment, the counterpart to the status meta above.\n *\n * A category cell that is one grey pill holding the raw enum makes a CRASH —\n * filed automatically, by somebody staring at a broken page right now — read\n * exactly like a QUESTION, and sit unnoticed in the queue. `--danger` plus its own\n * glyph is what makes that impossible; the hand-filed categories stay\n * deliberately quiet so that the loud one means something.\n *\n * Declaration order is triage order, CRASH first.\n */\nexport const FEEDBACK_CATEGORY_META: Record<\n  FeedbackCategory,\n  { icon: LucideIcon; badgeBg: string; badgeText: string }\n> = {\n  CRASH: {\n    icon: OctagonAlert,\n    badgeBg: \"bg-[var(--danger-bg)]\",\n    badgeText: \"text-[var(--danger)]\",\n  },\n  BUG: {\n    icon: Bug,\n    badgeBg: \"bg-[var(--warning-bg)]\",\n    badgeText: \"text-[var(--warning)]\",\n  },\n  IDEA: {\n    icon: Lightbulb,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n  QUESTION: {\n    icon: HelpCircle,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n  OTHER: {\n    icon: MoreHorizontal,\n    badgeBg: \"bg-[var(--bg-surface-2)]\",\n    badgeText: \"text-[var(--text-secondary)]\",\n  },\n};\n\n/** Triage order, CRASH first — also a category column's sort key and the option\n *  order in its filter. Sorting by the raw enum is alphabetical, which parks\n *  CRASH between BUG and IDEA. */\nexport const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META) as FeedbackCategory[];\n\n/** A category's rank for a column sort. Anything this build has never heard of —\n *  an older client against a newer API — sorts LAST rather than to `indexOf`'s\n *  −1, which would rank it above CRASH. */\nexport function feedbackCategoryRank(category: FeedbackCategory): number {\n  const at = FEEDBACK_CATEGORY_ORDER.indexOf(category);\n  return at === -1 ? FEEDBACK_CATEGORY_ORDER.length : at;\n}\n\n/**\n * The category as a badge.\n *\n * Falls back to OTHER's treatment for a category this build has never heard of,\n * so an older client against a newer API degrades to a readable neutral pill\n * instead of throwing on `meta.icon` — a crash report must not be able to cause\n * one. The *label* is the caller's, and for the same reason it needs the same\n * guard: pass what OTHER is called if you cannot name the value you were given.\n */\nexport function FeedbackCategoryBadge({\n  category,\n  label,\n  compact = false,\n  className,\n}: {\n  category: FeedbackCategory;\n  label: ReactNode;\n  compact?: boolean;\n  className?: string;\n}) {\n  // Annotated `| undefined` because the Record's index signature promises a hit\n  // for every FeedbackCategory, and at runtime the API can hand us one that is not.\n  const known: (typeof FEEDBACK_CATEGORY_META)[\"OTHER\"] | undefined = FEEDBACK_CATEGORY_META[category];\n  const meta = known ?? FEEDBACK_CATEGORY_META.OTHER;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded font-medium\",\n        compact ? \"px-1.5 py-0.5 text-[11px]\" : \"px-2 py-0.5 text-xs\",\n        meta.badgeBg,\n        meta.badgeText,\n        className,\n      )}\n    >\n      <Icon className={compact ? \"size-3\" : \"size-3.5\"} aria-hidden />\n      {label}\n    </span>\n  );\n}\n\n/** Where a report stands, as a badge — for the places that only *report* the\n *  status rather than offering to change it. */\nexport function FeedbackStatusBadge({\n  status,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  label: ReactNode;\n  className?: string;\n}) {\n  const meta = FEEDBACK_STATUS_META[status] ?? FEEDBACK_STATUS_META.OPEN;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium\",\n        meta.activeBg,\n        meta.activeText,\n        className,\n      )}\n    >\n      <Icon className=\"size-3\" aria-hidden />\n      {label}\n    </span>\n  );\n}\n\n/**\n * A row of statuses to switch a report to — either a table column's icon row or\n * an expanded panel's labelled pills.\n *\n * One component for both, because everything except the class strings is the\n * same decision: which one is current, and when the buttons are disabled. Two\n * copies had already drifted — only the icon variant carried `aria-label` and\n * `aria-pressed`, so the pill row was unlabelled for a screen reader.\n *\n * WHICH statuses to offer is the caller's, not this component's:\n * {@link visibleFeedbackStatuses} for a compact column,\n * {@link selectableFeedbackStatuses} for an expanded row. Passing the list keeps\n * that policy readable at the two call sites instead of hiding it behind\n * `variant`.\n */\nexport function FeedbackStatusTransitions({\n  status,\n  statuses,\n  canEdit,\n  onPick,\n  variant,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  statuses: FeedbackStatus[];\n  canEdit: boolean;\n  onPick: (status: FeedbackStatus) => void;\n  variant: \"icon\" | \"pill\";\n  /** What each status is called, translated by the app. */\n  label: (status: FeedbackStatus) => string;\n  className?: string;\n}) {\n  return (\n    // Not a control: it only stops clicks on the buttons inside from bubbling to\n    // the row. The buttons are the keyboard path, and Enter/Space on them fires\n    // their own click, which lands here the same way.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- propagation guard around real buttons\n    <div\n      className={cn(variant === \"icon\" ? \"flex items-center gap-0.5\" : \"flex flex-wrap gap-1.5\", className)}\n      // A status control inside a clickable row must not also open the row.\n      onClick={(event) => event.stopPropagation()}\n    >\n      {statuses.map((value) => {\n        const meta = FEEDBACK_STATUS_META[value];\n        const Icon = meta.icon;\n        const active = status === value;\n        const name = label(value);\n        const button = (\n          <button\n            key={value}\n            type=\"button\"\n            disabled={!canEdit || active}\n            onClick={() => onPick(value)}\n            aria-label={name}\n            aria-pressed={active}\n            className={cn(\n              \"transition-colors\",\n              variant === \"icon\"\n                ? cn(\n                    \"flex size-7 items-center justify-center rounded\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText)\n                      : \"text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n                  )\n                : cn(\n                    \"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText, \"border-transparent\")\n                      : \"border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)]\",\n                  ),\n              // Both stay unclickable, but only the read-only case is DIMMED: the\n              // current status is the one thing in the row that has to be legible\n              // at a glance, and among seven pills a faded active one reads as\n              // \"unavailable\" rather than as \"this is where the row stands\".\n              (!canEdit || active) && \"cursor-default\",\n              !canEdit && \"opacity-60\",\n            )}\n          >\n            <Icon className={variant === \"icon\" ? \"size-4\" : \"size-3.5\"} aria-hidden />\n            {variant === \"pill\" && name}\n          </button>\n        );\n        // The icon row has no visible label, so it needs the tooltip; the pills\n        // carry theirs inline.\n        //\n        // ⚠️ ABOVE, and portalled (Keksdose live #339). `side=\"bottom\"` put the bubble\n        // straight over the NEXT ROW's icons — in a queue you triage by running down it\n        // with the pointer, that is the row you are about to reach, and it was covered\n        // every time you paused on one. Above covers the row you have just left instead.\n        //\n        // `portal` is not cosmetic here. An absolutely-positioned bubble is clipped by\n        // any ancestor that scrolls — this cell lives inside the DataTable's own\n        // scroller — and it cannot flip: `placeTooltip` is what moves the bubble below\n        // the icon for the FIRST row, where there is no room above it, instead of\n        // painting it off the top of the list.\n        return variant === \"icon\" ? (\n          <Tooltip key={value} label={name} side=\"top\" portal>\n            {button}\n          </Tooltip>\n        ) : (\n          button\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * A textarea and its two buttons — for an outcome, for a note sent back with a\n * report, for a body being corrected.\n *\n * One component because all three are the same gesture: a draft that is not\n * committed until it is saved. Ctrl/⌘+Enter submits, which is the same shortcut\n * the compose dialog next door uses, so the habit carries across the feature.\n *\n * ## `initial` seeds the draft; it does not own it (changed 2026-09-22)\n *\n * This used to re-seed from `initial` in an effect, and that effect threw away\n * whatever was in the box — **and the picture attached to it** — every time the\n * prop arrived with a different value. `initial` is normally the saved note, so\n * the list refreshing under the editor, or the owner re-deriving the same string,\n * was enough: a triager halfway through a reply, with a screenshot picked out,\n * lost both and got the saved text back with no way to undo it.\n *\n * A draft belongs to the thing being edited, so switching to a different note is a\n * different editor — say so with a `key`:\n *\n * ```tsx\n * <FeedbackNoteEditor key={note.id} initial={note.body} … />\n * ```\n *\n * Where the id is not in hand at the call site, pass {@link resetKey} instead and\n * the editor re-seeds when THAT changes. Either way the decision is the caller's,\n * which is the point: the editor cannot tell a new subject from a new render.\n */\nexport function FeedbackNoteEditor({\n  initial,\n  pending,\n  onSave,\n  onCancel,\n  saveLabel,\n  cancelLabel,\n  placeholder,\n  rows = 3,\n  attachment,\n  resetKey,\n}: {\n  initial: string;\n  pending: boolean;\n  onSave: (value: string, attachment?: File | null) => void;\n  onCancel: () => void;\n  saveLabel: ReactNode;\n  cancelLabel: ReactNode;\n  /** A line above the field saying what to write, not an in-field placeholder:\n   *  a hint that disappears the moment somebody starts typing is a hint that is\n   *  gone exactly when it is being followed. */\n  placeholder?: ReactNode;\n  rows?: number;\n  /** Offer a picture with the note (Steering Design feedback #128). Omitted,\n   *  the editor is exactly the text box it always was — which is what the\n   *  *outcome* editor beside it wants, since an outcome is the answer rather\n   *  than the evidence. */\n  attachment?: FeedbackNoteAttachment;\n  /** Change this to say \"the editor is now editing something ELSE\", and the draft\n   *  and its attachment are dropped and re-seeded from `initial`. For call sites\n   *  that cannot put a `key` on the editor (see the note above). Leave it out and\n   *  the draft is never thrown away behind the user's back. */\n  resetKey?: string | number;\n}) {\n  const [draft, setDraft] = useState(initial);\n  const [file, setFile] = useState<File | null>(null);\n  // Adjusted during render rather than in an effect: an effect would paint the old\n  // draft first and then replace it, and — far worse — it is a second definition of\n  // when a draft dies that the caller cannot see. React re-runs this component\n  // immediately, before anything is committed to the screen.\n  const [seededFor, setSeededFor] = useState(resetKey);\n  if (resetKey !== seededFor) {\n    setSeededFor(resetKey);\n    setDraft(initial);\n    setFile(null);\n  }\n  // The editor's own root, which is where a paste made in the text box bubbles\n  // to: the attachment field below is the box's sibling, so a paste in the box\n  // never passes through the field's own subtree. It listens here instead\n  // (Steering Design feedback #140).\n  const root = useRef<HTMLDivElement>(null);\n  const submit = () => onSave(draft, file);\n  return (\n    // Not a control: a delegated Ctrl/Cmd+Enter shortcut for the textarea inside,\n    // which is what holds focus. The save button is the non-shortcut path.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- delegated keyboard shortcut for the focused field\n    <div\n      ref={root}\n      className=\"space-y-2\"\n      onKeyDown={(event) => {\n        if ((event.ctrlKey || event.metaKey) && event.key === \"Enter\" && !pending) {\n          event.preventDefault();\n          submit();\n        }\n      }}\n    >\n      {placeholder && <p className=\"text-xs text-[var(--text-muted)]\">{placeholder}</p>}\n      <Textarea rows={rows} value={draft} onChange={(event) => setDraft(event.target.value)} />\n      {attachment && (\n        <FeedbackAttachmentField\n          value={file}\n          onChange={setFile}\n          labels={attachment.labels}\n          accept={attachment.accept}\n          maxBytes={attachment.maxBytes}\n          onError={attachment.onError}\n          onCaptureScreenshot={attachment.onCaptureScreenshot}\n          // Within THIS editor's subtree, not on `document`: the editor sits\n          // inline on a page that has other fields, so a paste made in one of\n          // them is meant for that one. The textarea above is where the caret\n          // already is, and it is the field's sibling — so the field is told\n          // to listen on their common parent, where the paste bubbles to.\n          pasteFrom={root}\n        />\n      )}\n      <div className=\"flex justify-end gap-2\">\n        <Button variant=\"ghost\" onClick={onCancel}>\n          {cancelLabel}\n        </Button>\n        <Button variant=\"brand\" disabled={pending} onClick={submit}>\n          {saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** What {@link FeedbackNoteEditor} needs in order to offer a picture with the\n *  note: the same four things {@link FeedbackAttachmentField} takes, so the\n *  reply path is held to the app's own limits rather than to the defaults. */\nexport interface FeedbackNoteAttachment {\n  labels: FeedbackAttachmentLabels;\n  accept?: string[];\n  maxBytes?: number;\n  /** `info` (0.23.0) names the refused file and the limit. */\n  onError?: (kind: \"type\" | \"size\", info: FeedbackAttachmentErrorInfo) => void;\n  onCaptureScreenshot?: () => Promise<File | null>;\n}\n\n/**\n * One labelled block of an opened report.\n *\n * The detail panel is a stack of these, and it is a stack rather than a\n * component with fixed fields on purpose: the two apps keep a report's context\n * and its screenshot in genuinely different places, and a shell that insisted on\n * both would force one of them to invent a shape it does not have. What is\n * shared is what a section *looks* like — and that is all that made the two\n * panels read as different products.\n */\nexport function FeedbackDetailSection({\n  title,\n  action,\n  children,\n}: {\n  title: ReactNode;\n  /** Something on the title's own line — an edit button, a resolved-at date. */\n  action?: ReactNode;\n  children: ReactNode;\n}) {\n  return (\n    <div>\n      <div className=\"mb-1 flex items-center justify-between gap-2\">\n        <div className=\"text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          {title}\n        </div>\n        {action}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/** The stack a detail panel is. Here so the spacing between sections is decided\n *  once rather than by whichever app was written second. */\nexport function FeedbackDetail({ children }: { children: ReactNode }) {\n  return <div className=\"space-y-3 text-sm\">{children}</div>;\n}\n\n/** Prose inside a section — a body, an outcome, a note.\n *\n *  `whitespace-pre-wrap` is the whole component: a report is written in\n *  paragraphs, and a note appended to it later is separated by blank lines that\n *  carry the entire \"this arrived after the answer\" reading. */\nexport function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {\n  if (!children) return <p className=\"text-[var(--text-placeholder)]\">{empty ?? \"—\"}</p>;\n  return (\n    <p className=\"whitespace-pre-wrap text-[var(--text-secondary)]\">{children}</p>\n  );\n}\n"],"mappings":";AA6RI,SASE,KATF;AA7RJ,SAAS,QAAQ,gBAAgB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AACnB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,eAAe;AACxB,SAAS,+BAAiE;AAuDnE,MAAM,uBAGT;AAAA,EACF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAIA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAKO,MAAM,wBAAwB,OAAO,KAAK,oBAAoB;AAYrE,MAAM,YAA8B,CAAC,mBAAmB,aAAa,SAAS;AAE9E,MAAM,gBAAkC,CAAC,QAAQ,eAAe,iBAAiB,MAAM;AAIhF,SAAS,mBAAmB,SAAgD;AACjF,QAAM,KAAK,cAAc,QAAQ,OAAO;AACxC,SAAO,OAAO,MAAM,KAAK,cAAc,SAAS,IAAI,cAAc,KAAK,CAAC,IAAI;AAC9E;AAgBO,SAAS,wBAAwB,SAA2C;AACjF,QAAM,MAAM,oBAAI,IAAoB,CAAC,OAAO,CAAC;AAC7C,QAAM,KAAK,cAAc,QAAQ,OAAO;AACxC,MAAI,OAAO,IAAI;AACb,QAAI,KAAK,cAAc,SAAS,EAAG,KAAI,IAAI,cAAc,KAAK,CAAC,CAAC;AAChE,QAAI,KAAK,EAAG,KAAI,IAAI,cAAc,KAAK,CAAC,CAAC;AACzC,eAAW,OAAO,UAAW,KAAI,IAAI,GAAG;AAAA,EAC1C,WAAW,YAAY,WAAW;AAChC,QAAI,IAAI,aAAa;AACrB,QAAI,IAAI,MAAM;AACd,QAAI,IAAI,SAAS;AAAA,EACnB;AAGA,SAAO,sBAAsB,OAAO,CAAC,WAAW,IAAI,IAAI,MAAM,CAAC;AACjE;AAeO,SAAS,2BAA2B,UAA4C;AACrF,SAAO,CAAC,GAAG,qBAAqB;AAClC;AAaO,MAAM,yBAGT;AAAA,EACF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAKO,MAAM,0BAA0B,OAAO,KAAK,sBAAsB;AAKlE,SAAS,qBAAqB,UAAoC;AACvE,QAAM,KAAK,wBAAwB,QAAQ,QAAQ;AACnD,SAAO,OAAO,KAAK,wBAAwB,SAAS;AACtD;AAWO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAKG;AAGD,QAAM,QAA8D,uBAAuB,QAAQ;AACnG,QAAM,OAAO,SAAS,uBAAuB;AAC7C,QAAM,OAAO,KAAK;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,8BAA8B;AAAA,QACxC,KAAK;AAAA,QACL,KAAK;AAAA,QACL;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,QAAK,WAAW,UAAU,WAAW,YAAY,eAAW,MAAC;AAAA,QAC7D;AAAA;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OAAO,qBAAqB,MAAM,KAAK,qBAAqB;AAClE,QAAM,OAAO,KAAK;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK;AAAA,QACL,KAAK;AAAA,QACL;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,QAAK,WAAU,UAAS,eAAW,MAAC;AAAA,QACpC;AAAA;AAAA;AAAA,EACH;AAEJ;AAiBO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,YAAY,SAAS,8BAA8B,0BAA0B,SAAS;AAAA,QAEpG,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,QAEzC,mBAAS,IAAI,CAAC,UAAU;AACvB,gBAAM,OAAO,qBAAqB,KAAK;AACvC,gBAAM,OAAO,KAAK;AAClB,gBAAM,SAAS,WAAW;AAC1B,gBAAM,OAAO,MAAM,KAAK;AACxB,gBAAM,SACJ;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,UAAU,CAAC,WAAW;AAAA,cACtB,SAAS,MAAM,OAAO,KAAK;AAAA,cAC3B,cAAY;AAAA,cACZ,gBAAc;AAAA,cACd,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,SACR;AAAA,kBACE;AAAA,kBACA,SACI,GAAG,KAAK,UAAU,KAAK,UAAU,IACjC;AAAA,gBACN,IACA;AAAA,kBACE;AAAA,kBACA,SACI,GAAG,KAAK,UAAU,KAAK,YAAY,oBAAoB,IACvD;AAAA,gBACN;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKH,CAAC,WAAW,WAAW;AAAA,gBACxB,CAAC,WAAW;AAAA,cACd;AAAA,cAEA;AAAA,oCAAC,QAAK,WAAW,YAAY,SAAS,WAAW,YAAY,eAAW,MAAC;AAAA,gBACxE,YAAY,UAAU;AAAA;AAAA;AAAA,YA9BlB;AAAA,UA+BP;AAeF,iBAAO,YAAY,SACjB,oBAAC,WAAoB,OAAO,MAAM,MAAK,OAAM,QAAM,MAChD,oBADW,KAEd,IAEA;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA;AAEJ;AA8BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAsBG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,OAAO;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,IAAI;AAKlD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,QAAQ;AACnD,MAAI,aAAa,WAAW;AAC1B,iBAAa,QAAQ;AACrB,aAAS,OAAO;AAChB,YAAQ,IAAI;AAAA,EACd;AAKA,QAAM,OAAO,OAAuB,IAAI;AACxC,QAAM,SAAS,MAAM,OAAO,OAAO,IAAI;AACvC;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW,CAAC,UAAU;AACpB,eAAK,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,WAAW,CAAC,SAAS;AACzE,kBAAM,eAAe;AACrB,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,QAEC;AAAA,yBAAe,oBAAC,OAAE,WAAU,oCAAoC,uBAAY;AAAA,UAC7E,oBAAC,YAAS,MAAY,OAAO,OAAO,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UACtF,cACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,QAAQ,WAAW;AAAA,cACnB,QAAQ,WAAW;AAAA,cACnB,UAAU,WAAW;AAAA,cACrB,SAAS,WAAW;AAAA,cACpB,qBAAqB,WAAW;AAAA,cAMhC,WAAW;AAAA;AAAA,UACb;AAAA,UAEF,qBAAC,SAAI,WAAU,0BACb;AAAA,gCAAC,UAAO,SAAQ,SAAQ,SAAS,UAC9B,uBACH;AAAA,YACA,oBAAC,UAAO,SAAQ,SAAQ,UAAU,SAAS,SAAS,QACjD,qBACH;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA;AAEJ;AAwBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,qBAAC,SACC;AAAA,yBAAC,SAAI,WAAU,gDACb;AAAA,0BAAC,SAAI,WAAU,wEACZ,iBACH;AAAA,MACC;AAAA,OACH;AAAA,IACC;AAAA,KACH;AAEJ;AAIO,SAAS,eAAe,EAAE,SAAS,GAA4B;AACpE,SAAO,oBAAC,SAAI,WAAU,qBAAqB,UAAS;AACtD;AAOO,SAAS,cAAc,EAAE,UAAU,MAAM,GAA6C;AAC3F,MAAI,CAAC,SAAU,QAAO,oBAAC,OAAE,WAAU,kCAAkC,mBAAS,UAAI;AAClF,SACE,oBAAC,OAAE,WAAU,oDAAoD,UAAS;AAE9E;","names":[]}

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

@@ -1,288 +1,69 @@
-import { k as FeedbackAttachmentLabels } from '../feedback-attachment-NhUm7Zga.js';
-import { FeedbackNoteAttachment } from './feedback-inbox.js';
-import * as react from 'react';
-import { ReactNode, Ref } from 'react';
+import 'react';
+export { z as ChatComposer, D as ChatComposerHandle, E as ChatComposerLabels, F as ChatComposerProps, a3 as DEFAULT_FEEDBACK_COMPOSER_LABELS, a4 as DEFAULT_FEEDBACK_THREAD_LABELS, ax as FeedbackComposer, ay as FeedbackComposerAttachment, az as FeedbackComposerHandle, aA as FeedbackComposerLabels, aB as FeedbackComposerProps, aC as FeedbackThread, aD as FeedbackThreadAttachment, aE as FeedbackThreadEvent, aF as FeedbackThreadItem, aG as FeedbackThreadLabels, aH as FeedbackThreadMessage, aI as FeedbackThreadProps } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import './feedback-inbox.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.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.
- *
- * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation
- * read the chat way: status lines between the messages ("Closed automatically",
- * "Reopened"), a day line where the date changes, clock times under it, Enter to send
- * and several files uploaded ahead of the send. Each of those is an opt-in here
- * (`kind: "event"`, `daySeparators`, `timeFormat="clock"`, `sendOn="enter"`,
- * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.
- */
-/** 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;
-    /** The shortcut line under `sendOn="enter"` (keksdose G5): Enter sends, so say how a
-     *  new line is made. */
-    sendHintEnter: 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 {
-    /** Leave out, or `"message"`. `"event"` is a {@link FeedbackThreadEvent}. */
-    kind?: "message";
-    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;
-}
-/**
- * A line in the thread that nobody wrote — "Closed automatically", "Marked as
- * resolved", "Reopened" — drawn centred and muted with its time, no author, no side,
- * no bubble.
- *
- * keksdose G4: its support chat interleaves these with the messages, and as a message
- * they came out as a bubble from nobody at the start side, which reads as the member
- * having said "resolved". Word it for the READER, as with `own`: the app knows whether
- * "you reopened it" or "Anna reopened it" is true for the person looking.
- *
- * The text is the app's, not somebody's words about their data, so it is NOT tagged
- * `data-private`; one that names a person can wrap the name in its own
- * `<span data-private>` (`body` is a node for that reason).
- */
-interface FeedbackThreadEvent {
-    kind: "event";
-    id: string | number;
-    /** A `Date`, an ISO string or epoch ms. */
-    createdAt: Date | string | number;
-    body: ReactNode;
-}
-/** One row of a {@link FeedbackThread}: a message, or an event line between them. */
-type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;
-interface FeedbackThreadProps {
-    /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */
-    messages: readonly FeedbackThreadItem[];
-    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;
-    /**
-     * How a row's time reads. `"relative"` (default): "5 minutes ago", a date past six
-     * days — right for a report's comments, read days apart. `"clock"`: the time of day
-     * in the locale ("14:05", "2:05 PM") — the chat look, keksdose G4; pair it with
-     * `daySeparators`, which say which day that clock time is on. Either way the full
-     * date and time is in the Tooltip.
-     */
-    timeFormat?: "relative" | "clock";
-    /**
-     * A centred day line before the first row and wherever the next row is on another
-     * calendar day (the device's zone): "Today", "Yesterday", else the date — keksdose
-     * G4. "Today" / "Yesterday" are `Intl.RelativeTimeFormat`'s own words in the kit
-     * locale, so there is no label to translate. Default false.
-     */
-    daySeparators?: boolean;
-    /** "Now" for the relative times and the day lines — 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, timeFormat, daySeparators, 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).
-     *
-     * `attachment` is the built-in field's one picture. Files the host uploaded ahead
-     * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be
-     * `""` when `canSend` let an attachments-only message go.
-     */
-    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;
-    /**
-     * The host's own attach control, in the row with Send where the built-in field sits
-     * (after it, if both are on) — keksdose G5: its support chat uploads up to N files
-     * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.
-     * The slot is the host's picker plus the chips of what is uploaded; the upload, the
-     * refs and clearing them once `onSend` resolves stay with the host. Pair it with
-     * `canSend`.
-     */
-    attachmentSlot?: ReactNode;
-    /**
-     * Whether Send is enabled, over the composer's own rule (some text in the box) —
-     * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
-     * with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
-     * an upload is still running holds even a written reply back. Left out, the text
-     * decides. `pending` blocks a send either way.
-     */
-    canSend?: boolean;
-    /**
-     * Which key sends. `"mod-enter"` (default): Ctrl/⌘+Enter, the report dialog's and
-     * note editor's shortcut, with plain Enter a new line — feedback is written in
-     * paragraphs. `"enter"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a
-     * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition
-     * (Japanese, Chinese input) is the IME's, never a send.
-     */
-    sendOn?: "mod-enter" | "enter";
-    /** 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;
-    /**
-     * `"sm"` for a narrow host — keksdose's assistant launcher, a small floating panel
-     * (0.22): a small Send button, and the send hint ("Enter to send, Shift + Enter for a
-     * new line") hidden from view but kept as the box's description, so a keyboard or
-     * screen-reader user still learns the shortcut. Default `"md"`.
-     */
-    size?: "md" | "sm";
-    /**
-     * On the composer's root — the box, or the `disabledReason` line in its place —
-     * with any `data-*` attribute beside it (keksdose K17). keksdose's assistant tour
-     * points at the chat box with `[data-tour="assistant-ask"]`, and a composer that
-     * dropped every attribute it was not told about left the anchor nowhere: the
-     * assistant kept its hand-built box rather than lose the tour step.
-     */
-    id?: string;
-    /** `data-*` attributes for the root, as `id` — a tour anchor, a test id. */
-    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
-}
-/**
- * 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 — which `sendOn="enter"` is for (keksdose G5).
- */
-declare function FeedbackComposer({ onSend, pending, attachment, attachmentSlot, canSend: canSendProp, sendOn, disabledReason, rows, placeholder, value, onValueChange, ref, labels: labelsProp, className, id, size, ...rest }: FeedbackComposerProps): react.JSX.Element;
-/**
- * {@link FeedbackComposer} under a name that is not about feedback (keksdose K17).
- *
- * The component was never feedback-specific: a textarea, an optional picture or a
- * host's upload slot, Send, `sendOn="enter"` for the chat way. keksdose's assistant
- * and support chat are chats, not reports, and an import of `FeedbackComposer` there
- * reads as a mistake to the next person. The same function, not a wrapper, so the
- * two names cannot drift.
- */
-declare const ChatComposer: typeof FeedbackComposer;
-/** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
-type ChatComposerProps = FeedbackComposerProps;
-/** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */
-type ChatComposerHandle = FeedbackComposerHandle;
-/** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
- *  namespace of the provider. */
-type ChatComposerLabels = FeedbackComposerLabels;
-
-export { ChatComposer, type ChatComposerHandle, type ChatComposerLabels, type ChatComposerProps, DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, type FeedbackComposerAttachment, type FeedbackComposerHandle, type FeedbackComposerLabels, type FeedbackComposerProps, FeedbackThread, type FeedbackThreadAttachment, type FeedbackThreadEvent, type FeedbackThreadItem, type FeedbackThreadLabels, type FeedbackThreadMessage, type FeedbackThreadProps };
+import '../components/field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../components/account-settings-labels.js';
+import '../components/floating-panel.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/signed-amount.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/progress-bar.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../hooks/use-authed-src.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../components/legal.js';
+import '../components/account-chips.js';
+import '../lib/format.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';

package/dist/feedback/feedback-thread.js

@@ -237,6 +237,9 @@ function FeedbackComposer({
   sendOn = "mod-enter",
   disabledReason,
   rows = 3,
+  maxLength,
+  showCount,
+  countLabels,
   placeholder,
   value,
   onValueChange,
@@ -294,7 +297,8 @@ function FeedbackComposer({
   if (disabledReason != null && disabledReason !== false) {
     return /* @__PURE__ */ jsx("p", { ...rootAttributes, className: cn("text-xs text-[var(--text-muted)]", className), children: disabledReason });
   }
-  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;
+  const tooLong = maxLength !== void 0 && draft.length > maxLength;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -314,6 +318,9 @@ function FeedbackComposer({
         dir: "auto",
         "aria-label": labels.field,
         "aria-describedby": size === "sm" ? hintId : void 0,
+        maxLength,
+        ...showCount !== void 0 ? { showCount } : null,
+        countLabels,
         ref: box,
         placeholder: placeholder ?? labels.placeholder,
         value: draft,