@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/wizard-stepper.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 function WizardStepper({
@@ -7,14 +8,14 @@ function WizardStepper({
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 text-xs", "aria-label": ariaLabel, children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-    i > 0 && /* @__PURE__ */ jsx("span", { className: "w-4 border-t border-slate-300 dark:border-slate-600" }),
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "w-4 border-t border-[var(--border)]" }),
     /* @__PURE__ */ jsx(
       "span",
       {
         "aria-current": step.key === current ? "step" : void 0,
         className: cn(
           "rounded-full px-2 py-0.5",
-          i === currentIndex ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-medium" : i < currentIndex ? "text-slate-700 dark:text-slate-200" : "text-slate-400 dark:text-slate-500"
+          i === currentIndex ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium" : i < currentIndex ? "text-[var(--text-secondary)]" : "text-[var(--text-placeholder)]"
         ),
         children: step.label
       }

package/dist/components/wizard-stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/wizard-stepper.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Compact step indicator for the import wizards. Past steps are plain, the\n * current one is highlighted, future ones muted. */\nexport function WizardStepper({\n  steps,\n  current,\n  ariaLabel,\n}: {\n  steps: { key: string; label: string }[];\n  current: string;\n  ariaLabel?: string;\n}) {\n  const currentIndex = steps.findIndex((s) => s.key === current);\n  return (\n    <ol className=\"flex items-center gap-1 text-xs\" aria-label={ariaLabel}>\n      {steps.map((step, i) => (\n        <li key={step.key} className=\"flex items-center gap-1\">\n          {i > 0 && <span className=\"w-4 border-t border-slate-300 dark:border-slate-600\" />}\n          <span\n            aria-current={step.key === current ? \"step\" : undefined}\n            className={cn(\n              \"rounded-full px-2 py-0.5\",\n              i === currentIndex\n                ? \"bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-medium\"\n                : i < currentIndex\n                  ? \"text-slate-700 dark:text-slate-200\"\n                  : \"text-slate-400 dark:text-slate-500\",\n            )}\n          >\n            {step.label}\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":"AAiBQ,SACY,KADZ;AAjBR,SAAS,UAAU;AAIZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO;AAC7D,SACE,oBAAC,QAAG,WAAU,mCAAkC,cAAY,WACzD,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAkB,WAAU,2BAC1B;AAAA,QAAI,KAAK,oBAAC,UAAK,WAAU,uDAAsD;AAAA,IAChF;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,KAAK,QAAQ,UAAU,SAAS;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eACF,8EACA,IAAI,eACF,uCACA;AAAA,QACR;AAAA,QAEC,eAAK;AAAA;AAAA,IACR;AAAA,OAdO,KAAK,GAed,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/wizard-stepper.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Compact step indicator for the import wizards. Past steps are plain, the\n * current one is highlighted, future ones muted. */\nexport function WizardStepper({\n  steps,\n  current,\n  ariaLabel,\n}: {\n  steps: { key: string; label: string }[];\n  current: string;\n  ariaLabel?: string;\n}) {\n  const currentIndex = steps.findIndex((s) => s.key === current);\n  return (\n    <ol className=\"flex items-center gap-1 text-xs\" aria-label={ariaLabel}>\n      {steps.map((step, i) => (\n        <li key={step.key} className=\"flex items-center gap-1\">\n          {i > 0 && <span className=\"w-4 border-t border-[var(--border)]\" />}\n          <span\n            aria-current={step.key === current ? \"step\" : undefined}\n            className={cn(\n              \"rounded-full px-2 py-0.5\",\n              i === currentIndex\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium\"\n                : i < currentIndex\n                  ? \"text-[var(--text-secondary)]\"\n                  : \"text-[var(--text-placeholder)]\",\n            )}\n          >\n            {step.label}\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";AAiBQ,SACY,KADZ;AAjBR,SAAS,UAAU;AAIZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO;AAC7D,SACE,oBAAC,QAAG,WAAU,mCAAkC,cAAY,WACzD,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAkB,WAAU,2BAC1B;AAAA,QAAI,KAAK,oBAAC,UAAK,WAAU,uCAAsC;AAAA,IAChE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,KAAK,QAAQ,UAAU,SAAS;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eACF,kEACA,IAAI,eACF,iCACA;AAAA,QACR;AAAA,QAEC,eAAK;AAAA;AAAA,IACR;AAAA,OAdO,KAAK,GAed,CACD,GACH;AAEJ;","names":[]}

package/dist/{data-table-filters-aXyf0Xub.d.ts → data-table-filters-DM1auUfH.d.ts}

@@ -145,13 +145,29 @@ interface DataTableProps<T> {
         isSelectable?: (row: T) => boolean;
         isSelected: (row: T) => boolean;
         onToggle: (row: T, checked: boolean) => void;
+        /**
+         * Commit a whole Shift+click range in ONE call (audit 2026-09-22).
+         *
+         * Optional and purely additive: without it the range is still walked row by
+         * row, exactly as before. With it, an owner holding a `Set` copies that Set
+         * once instead of once per row — a 400-row range was 400 `onToggle` calls,
+         * 400 Set copies and 400 renders of this table, all to reach a state the
+         * owner could have reached in one.
+         *
+         * `rows` is already filtered by `isSelectable` and is in the order the table
+         * is showing, so it can be applied as-is.
+         */
+        onToggleMany?: (rows: T[], checked: boolean) => void;
         allSelected: boolean;
         someSelected: boolean;
         onToggleAll: (checked: boolean) => void;
     };
-    /** User-facing strings (English defaults); pass translated overrides. */
+    /** User-facing strings (English defaults); pass translated overrides. Merged over
+     *  `dataTable` from `<UiKitProvider labels>`, so a call site only states what
+     *  differs for THIS table — typically `table`, its accessible name. */
     labels?: Partial<DataTableLabels>;
-    /** BCP-47 locale for the date-filter picker. Defaults to "en". */
+    /** BCP-47 locale for the date filter's calendar and the pager's numbers. Falls
+     *  back to `<UiKitProvider locale>`, then to the runtime's default. */
     locale?: string;
     /** localStorage namespace prefix for `storageKey` persistence. Defaults to
      *  "hbui-table:"; pass your app's own prefix to keep a stable namespace. */
@@ -204,7 +220,7 @@ interface DataTableProps<T> {
 }
 type FilterState = Record<string, FilterValue>;
 
-declare function DataTable<T>({ rows, columns, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale, storageKeyPrefix, mobileExpandAsDialog, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T>({ rows, columns, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, }: DataTableProps<T>): react.JSX.Element;
 
 /** How a column is filtered. `text`/`select`/`date`/`number` each read a value
  *  off the row and compare it against the user's {@link FilterValue}. */
@@ -246,8 +262,14 @@ type FilterValue = {
 declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
 /** Whether a filter value is actually narrowing anything (vs its empty default). */
 declare function isFilterActive(v: FilterValue | undefined): boolean;
-/** Whether `row` passes column `col`'s filter given the user's `state`. */
-declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue): boolean;
+/**
+ * Whether `row` passes column `col`'s filter given the user's `state`.
+ *
+ * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
+ * root rules, under which a Turkish user typing "istanbul" does not find "İSTANBUL";
+ * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
+ */
+declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean;
 /** The empty filter state for a column's filter type. */
 declare function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue;
 /** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */

package/dist/data-table.d.ts

@@ -0,0 +1,7 @@
+export { DEFAULT_DATA_TABLE_LABELS, DataTableLabels, missingDataTableLabels, resolveDataTableLabels } from './components/data-table-labels.js';
+export { SortDir, SortState, decodeSorts, encodeSorts, nextSorts, normalizeSorts } from './components/data-table-sort.js';
+export { C as ColumnFilter, D as DataTable, a as DataTableColumn, b as DataTableProps, F as FilterState, c as FilterValue, S as ServerPagination, d as decodeFilterValue, e as decodeFilterValueOfType, f as defaultFilterState, g as encodeFilterValue, i as isFilterActive, r as resolveFilter, h as rowMatches } from './data-table-filters-DM1auUfH.js';
+export { PAGE_SIZE_OPTIONS, Pagination } from './components/data-table-pagination.js';
+export { FilterPopover } from './components/data-table-filter-popover.js';
+import 'react';
+import './components/swipeable-row.js';

package/dist/data-table.js

@@ -0,0 +1,12 @@
+"use client";
+export * from "./components/data-table-labels.js";
+export * from "./components/data-table-sort.js";
+export * from "./components/data-table-filters.js";
+export * from "./components/data-table-pagination.js";
+import { FilterPopover } from "./components/data-table-filter-popover.js";
+import { DataTable } from "./components/data-table.js";
+export {
+  DataTable,
+  FilterPopover
+};
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data-table.ts"],"sourcesContent":["// `@eifi1/ui-kit/data-table` — the table suite.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`\n// branch, so a Router is needed even with URL sync switched off.\nexport * from \"./components/data-table-labels\";\nexport * from \"./components/data-table-sort\";\nexport * from \"./components/data-table-filters\";\nexport * from \"./components/data-table-pagination\";\nexport { FilterPopover } from \"./components/data-table-filter-popover\";\n// `SortState` comes from data-table-sort above; re-exporting the module wholesale\n// would collide with it, which is why the main barrel names these explicitly too.\nexport { DataTable } from \"./components/data-table\";\nexport type {\n  DataTableColumn,\n  DataTableProps,\n  ServerPagination,\n  FilterState,\n} from \"./components/data-table\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;AAG9B,SAAS,iBAAiB;","names":[]}

package/dist/feedback/feedback-attachment.js

@@ -1,7 +1,10 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
 import { useEffect, useRef, useState } from "react";
 import { Camera, FileText, Paperclip, X } from "lucide-react";
 import { Button } from "../components/ui.js";
+import { useKitFileLabels } from "../i18n/kit-labels.js";
 const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
 function FeedbackAttachmentField({
@@ -19,6 +22,7 @@ function FeedbackAttachmentField({
   const [preview, setPreview] = useState(null);
   const [capturing, setCapturing] = useState(false);
   const fileInputRef = useRef(null);
+  const fileText = useKitFileLabels();
   useEffect(() => {
     if (!value) {
       setPreview(null);
@@ -66,29 +70,26 @@ function FeedbackAttachmentField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className,
+      className: cn("relative", className),
       onPaste: listensElsewhere ? void 0 : (event) => takeImage(event.clipboardData, () => event.preventDefault()),
       children: [
-        labels.attachment && /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400", children: labels.attachment }),
+        labels.attachment && /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: labels.attachment }),
         value ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           value.type.startsWith("image/") && preview ? /* @__PURE__ */ jsx(
             "img",
             {
               src: preview,
               alt: value.name,
-              className: "h-20 w-20 rounded border border-slate-200 object-cover dark:border-slate-700"
+              className: "h-20 w-20 rounded border border-[var(--border)] object-cover"
             }
           ) : (
             // Non-image attachments (PDF, text) can't preview as an <img>, so
             // show a neutral file tile with the name/size beside it instead.
-            /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded border border-slate-200 text-slate-400 dark:border-slate-700 dark:text-slate-500", children: /* @__PURE__ */ jsx(FileText, { className: "size-8" }) })
+            /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded border border-[var(--border)] text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx(FileText, { className: "size-8" }) })
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-slate-700 dark:text-slate-200", children: value.name }),
-            /* @__PURE__ */ jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
-              Math.round(value.size / 1024),
-              " KB"
-            ] })
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: value.name }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: fileText.size(value.size) })
           ] }),
           /* @__PURE__ */ jsx(
             "button",
@@ -96,7 +97,7 @@ function FeedbackAttachmentField({
               type: "button",
               onClick: () => onChange(null),
               "aria-label": labels.attachmentRemove,
-              className: "rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+              className: "rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
               children: /* @__PURE__ */ jsx(X, { className: "size-4" })
             }
           )
@@ -128,7 +129,7 @@ function FeedbackAttachmentField({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: labels.attachmentPaste ?? "\u2026or paste a screenshot from the clipboard." })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.attachmentPaste ?? "\u2026or paste a screenshot from the clipboard." })
         ] }),
         /* @__PURE__ */ jsx(
           "input",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-attachment.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { Camera, FileText, Paperclip, X } from \"lucide-react\";\nimport { Button } from \"../components/ui\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\nexport const DEFAULT_ATTACHMENT_ACCEPT = [\"image/png\", \"image/jpeg\", \"image/webp\", \"image/gif\"];\nexport const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;\n\n/**\n * Picking one picture: the file dialog, a capture of the app view, or a paste.\n *\n * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can\n * have it too (Steering Design feedback #128). A report is a conversation — it\n * is filed, it is answered, and the reporter sends it back saying that is not\n * what they meant — and the screenshot showing what they mean is taken at\n * whichever of those points they looked. Only the first of them had a way to\n * attach one, so everything after it had to be described in words.\n *\n * **Three ways in, and they are three because no one of them covers the others.**\n * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the\n * *whole* app view; and the clipboard is where a region snip already is on every\n * platform (Steering Design feedback #39). Somebody who wanted to show one panel\n * had to save a crop and then find it again.\n *\n * `documentPaste` and `pasteFrom` decide where the paste is listened for, and\n * it is a real choice rather than a flag with a default. A modal traps focus,\n * so while it is up every paste in the page is meant for it — including one\n * made with nothing in particular focused, which never reaches a React\n * `onPaste` on a child: that is `documentPaste`. An editor **inline on a\n * page** is not that: the page around it has its own fields, so it listens\n * within its own subtree and a paste elsewhere stays where it was aimed. But\n * \"its own subtree\" has to include the text box the paste is actually made in,\n * and that box is this field's *sibling*, not its child — a paste in it bubbles\n * to their common parent and never through here. `pasteFrom` is that parent\n * (Steering Design feedback #140): the element whose subtree is listened to,\n * handed in by whoever renders both the box and this field side by side.\n */\nexport function FeedbackAttachmentField({\n  value,\n  onChange,\n  labels,\n  accept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onError,\n  onCaptureScreenshot,\n  documentPaste = false,\n  pasteFrom,\n  className,\n}: {\n  value: File | null;\n  onChange: (file: File | null) => void;\n  labels: FeedbackAttachmentLabels;\n  accept?: string[];\n  maxBytes?: number;\n  onError?: (kind: \"type\" | \"size\") => void;\n  /** Snapshot the app view behind this and return it as a File. A \"Capture\n   *  screenshot\" button appears only when it is given. */\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /** Listen for the paste on `document` rather than on this field's own\n   *  subtree. For a modal, which owns the whole page while it is up. */\n  documentPaste?: boolean;\n  /** Listen for the paste within this element's subtree rather than this\n   *  field's own — for a field standing *beside* the text box a paste is made\n   *  in, whose common parent is where the event bubbles to. Ignored when\n   *  `documentPaste` is set. */\n  pasteFrom?: RefObject<HTMLElement | null>;\n  className?: string;\n}) {\n  const [preview, setPreview] = useState<string | null>(null);\n  const [capturing, setCapturing] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  // Object-URL preview lifecycle (create on change, revoke on cleanup).\n  useEffect(() => {\n    if (!value) {\n      setPreview(null);\n      return;\n    }\n    const url = URL.createObjectURL(value);\n    setPreview(url);\n    return () => URL.revokeObjectURL(url);\n  }, [value]);\n\n  const pick = (file: File | undefined | null) => {\n    if (!file) return;\n    if (!accept.includes(file.type)) {\n      onError?.(\"type\");\n      return;\n    }\n    if (file.size > maxBytes) {\n      onError?.(\"size\");\n      return;\n    }\n    onChange(file);\n  };\n\n  // The paste handler is registered once rather than per render, so it reads\n  // `pick` — which closes over props that change identity on every render — out\n  // of a ref rather than out of its own dependency list.\n  const latest = useRef(pick);\n  useEffect(() => {\n    latest.current = pick;\n  });\n\n  const takeImage = (clipboard: DataTransfer | null, stop: () => void) => {\n    const items = Array.from(clipboard?.items ?? []);\n    const image = items.find((item) => item.kind === \"file\" && item.type.startsWith(\"image/\"));\n    const file = image?.getAsFile();\n    if (!file) return;\n    // Only once there IS an image: a paste of text into a field must stay a\n    // paste of text, and a clipboard holding both is a copy whose text half is\n    // what the field was focused for.\n    stop();\n    // Clipboard images arrive named \"image.png\" at best and unnamed at worst,\n    // and the name is what the inbox shows beside the thumbnail. A name that\n    // says where it came from is more use than the browser's.\n    latest.current(new File([file], pastedName(file.type), { type: file.type }));\n  };\n\n  // The element listened on, where it is not this field's own subtree: the\n  // document for a modal, the given parent for an inline editor. Read inside\n  // the effect rather than in render, because a ref's `current` is only set\n  // once the parent has mounted — which it has by the time effects run.\n  useEffect(() => {\n    const target: EventTarget | null = documentPaste ? document : (pasteFrom?.current ?? null);\n    if (!target) return;\n    const onPaste = (event: Event) => {\n      const clipboard = (event as ClipboardEvent).clipboardData;\n      takeImage(clipboard, () => event.preventDefault());\n    };\n    target.addEventListener(\"paste\", onPaste);\n    return () => target.removeEventListener(\"paste\", onPaste);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- takeImage reads `latest`, which is a ref\n  }, [documentPaste, pasteFrom]);\n  const listensElsewhere = documentPaste || pasteFrom !== undefined;\n\n  return (\n    <div\n      className={className}\n      onPaste={\n        listensElsewhere\n          ? undefined\n          : (event) => takeImage(event.clipboardData, () => event.preventDefault())\n      }\n    >\n      {labels.attachment && (\n        <div className=\"mb-1 text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400\">\n          {labels.attachment}\n        </div>\n      )}\n      {value ? (\n        <div className=\"flex items-start gap-2\">\n          {value.type.startsWith(\"image/\") && preview ? (\n            <img\n              src={preview}\n              alt={value.name}\n              className=\"h-20 w-20 rounded border border-slate-200 object-cover dark:border-slate-700\"\n            />\n          ) : (\n            // Non-image attachments (PDF, text) can't preview as an <img>, so\n            // show a neutral file tile with the name/size beside it instead.\n            <div className=\"flex h-20 w-20 items-center justify-center rounded border border-slate-200 text-slate-400 dark:border-slate-700 dark:text-slate-500\">\n              <FileText className=\"size-8\" />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"truncate text-sm text-slate-700 dark:text-slate-200\">{value.name}</div>\n            <div className=\"text-xs text-slate-500 dark:text-slate-400\">\n              {Math.round(value.size / 1024)} KB\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onChange(null)}\n            aria-label={labels.attachmentRemove}\n            className=\"rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap gap-2\">\n            <Button type=\"button\" variant=\"secondary\" onClick={() => fileInputRef.current?.click()}>\n              <Paperclip className=\"size-4\" /> {labels.attachmentAdd}\n            </Button>\n            {onCaptureScreenshot && (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                disabled={capturing}\n                onClick={() => {\n                  if (capturing) return;\n                  setCapturing(true);\n                  void onCaptureScreenshot()\n                    .then((file) => {\n                      if (file) pick(file);\n                    })\n                    .finally(() => setCapturing(false));\n                }}\n              >\n                <Camera className=\"size-4\" />{\" \"}\n                {capturing ? \"…\" : (labels.attachmentCapture ?? \"Capture screenshot\")}\n              </Button>\n            )}\n          </div>\n          {/* Said out loud, because a gesture with no affordance is a gesture\n              nobody finds. */}\n          <p className=\"text-xs text-slate-500 dark:text-slate-400\">\n            {labels.attachmentPaste ?? \"…or paste a screenshot from the clipboard.\"}\n          </p>\n        </div>\n      )}\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept.join(\",\")}\n        className=\"sr-only\"\n        onChange={(e) => {\n          pick(e.target.files?.[0]);\n          e.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n\n/** What a pasted image is called once it is an attachment.\n *\n *  The extension is read off the mime type rather than assumed to be `.png`:\n *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not\n *  a PNG is one the receiving end opens wrong. */\nexport function pastedName(type: string): string {\n  const subtype = type.split(\"/\")[1] ?? \"png\";\n  // `image/svg+xml` and friends carry a suffix that is not part of the\n  // extension, and none of them are in the accepted list anyway.\n  return `pasted.${subtype.split(\"+\")[0]}`;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-attachment.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { Camera, FileText, Paperclip, X } from \"lucide-react\";\nimport { Button } from \"../components/ui\";\nimport { useKitFileLabels } from \"../i18n/kit-labels\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\nexport const DEFAULT_ATTACHMENT_ACCEPT = [\"image/png\", \"image/jpeg\", \"image/webp\", \"image/gif\"];\nexport const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;\n\n/**\n * Picking one picture: the file dialog, a capture of the app view, or a paste.\n *\n * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can\n * have it too (Steering Design feedback #128). A report is a conversation — it\n * is filed, it is answered, and the reporter sends it back saying that is not\n * what they meant — and the screenshot showing what they mean is taken at\n * whichever of those points they looked. Only the first of them had a way to\n * attach one, so everything after it had to be described in words.\n *\n * **Three ways in, and they are three because no one of them covers the others.**\n * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the\n * *whole* app view; and the clipboard is where a region snip already is on every\n * platform (Steering Design feedback #39). Somebody who wanted to show one panel\n * had to save a crop and then find it again.\n *\n * `documentPaste` and `pasteFrom` decide where the paste is listened for, and\n * it is a real choice rather than a flag with a default. A modal traps focus,\n * so while it is up every paste in the page is meant for it — including one\n * made with nothing in particular focused, which never reaches a React\n * `onPaste` on a child: that is `documentPaste`. An editor **inline on a\n * page** is not that: the page around it has its own fields, so it listens\n * within its own subtree and a paste elsewhere stays where it was aimed. But\n * \"its own subtree\" has to include the text box the paste is actually made in,\n * and that box is this field's *sibling*, not its child — a paste in it bubbles\n * to their common parent and never through here. `pasteFrom` is that parent\n * (Steering Design feedback #140): the element whose subtree is listened to,\n * handed in by whoever renders both the box and this field side by side.\n */\nexport function FeedbackAttachmentField({\n  value,\n  onChange,\n  labels,\n  accept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onError,\n  onCaptureScreenshot,\n  documentPaste = false,\n  pasteFrom,\n  className,\n}: {\n  value: File | null;\n  onChange: (file: File | null) => void;\n  labels: FeedbackAttachmentLabels;\n  accept?: string[];\n  maxBytes?: number;\n  onError?: (kind: \"type\" | \"size\") => void;\n  /** Snapshot the app view behind this and return it as a File. A \"Capture\n   *  screenshot\" button appears only when it is given. */\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /** Listen for the paste on `document` rather than on this field's own\n   *  subtree. For a modal, which owns the whole page while it is up. */\n  documentPaste?: boolean;\n  /** Listen for the paste within this element's subtree rather than this\n   *  field's own — for a field standing *beside* the text box a paste is made\n   *  in, whose common parent is where the event bubbles to. Ignored when\n   *  `documentPaste` is set. */\n  pasteFrom?: RefObject<HTMLElement | null>;\n  className?: string;\n}) {\n  const [preview, setPreview] = useState<string | null>(null);\n  const [capturing, setCapturing] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.\n  const fileText = useKitFileLabels();\n\n  // Object-URL preview lifecycle (create on change, revoke on cleanup).\n  useEffect(() => {\n    if (!value) {\n      setPreview(null);\n      return;\n    }\n    const url = URL.createObjectURL(value);\n    setPreview(url);\n    return () => URL.revokeObjectURL(url);\n  }, [value]);\n\n  const pick = (file: File | undefined | null) => {\n    if (!file) return;\n    if (!accept.includes(file.type)) {\n      onError?.(\"type\");\n      return;\n    }\n    if (file.size > maxBytes) {\n      onError?.(\"size\");\n      return;\n    }\n    onChange(file);\n  };\n\n  // The paste handler is registered once rather than per render, so it reads\n  // `pick` — which closes over props that change identity on every render — out\n  // of a ref rather than out of its own dependency list.\n  const latest = useRef(pick);\n  useEffect(() => {\n    latest.current = pick;\n  });\n\n  const takeImage = (clipboard: DataTransfer | null, stop: () => void) => {\n    const items = Array.from(clipboard?.items ?? []);\n    const image = items.find((item) => item.kind === \"file\" && item.type.startsWith(\"image/\"));\n    const file = image?.getAsFile();\n    if (!file) return;\n    // Only once there IS an image: a paste of text into a field must stay a\n    // paste of text, and a clipboard holding both is a copy whose text half is\n    // what the field was focused for.\n    stop();\n    // Clipboard images arrive named \"image.png\" at best and unnamed at worst,\n    // and the name is what the inbox shows beside the thumbnail. A name that\n    // says where it came from is more use than the browser's.\n    latest.current(new File([file], pastedName(file.type), { type: file.type }));\n  };\n\n  // The element listened on, where it is not this field's own subtree: the\n  // document for a modal, the given parent for an inline editor. Read inside\n  // the effect rather than in render, because a ref's `current` is only set\n  // once the parent has mounted — which it has by the time effects run.\n  useEffect(() => {\n    const target: EventTarget | null = documentPaste ? document : (pasteFrom?.current ?? null);\n    if (!target) return;\n    const onPaste = (event: Event) => {\n      const clipboard = (event as ClipboardEvent).clipboardData;\n      takeImage(clipboard, () => event.preventDefault());\n    };\n    target.addEventListener(\"paste\", onPaste);\n    return () => target.removeEventListener(\"paste\", onPaste);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- takeImage reads `latest`, which is a ref\n  }, [documentPaste, pasteFrom]);\n  const listensElsewhere = documentPaste || pasteFrom !== undefined;\n\n  return (\n    <div\n      // `relative` for the same reason as FileDropzone: the `sr-only` file input below\n      // is `position: absolute`, and without a positioned ancestor it is laid out\n      // against the initial containing block — extending the DOCUMENT height to its own\n      // offset and producing a phantom second scrollbar on any long page.\n      className={cn(\"relative\", className)}\n      onPaste={\n        listensElsewhere\n          ? undefined\n          : (event) => takeImage(event.clipboardData, () => event.preventDefault())\n      }\n    >\n      {labels.attachment && (\n        <div className=\"mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          {labels.attachment}\n        </div>\n      )}\n      {value ? (\n        <div className=\"flex items-start gap-2\">\n          {value.type.startsWith(\"image/\") && preview ? (\n            <img\n              src={preview}\n              alt={value.name}\n              className=\"h-20 w-20 rounded border border-[var(--border)] object-cover\"\n            />\n          ) : (\n            // Non-image attachments (PDF, text) can't preview as an <img>, so\n            // show a neutral file tile with the name/size beside it instead.\n            <div className=\"flex h-20 w-20 items-center justify-center rounded border border-[var(--border)] text-[var(--text-placeholder)]\">\n              <FileText className=\"size-8\" />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"truncate text-sm text-[var(--text-secondary)]\">{value.name}</div>\n            <div className=\"text-xs text-[var(--text-muted)]\">\n              {fileText.size(value.size)}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onChange(null)}\n            aria-label={labels.attachmentRemove}\n            className=\"rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap gap-2\">\n            <Button type=\"button\" variant=\"secondary\" onClick={() => fileInputRef.current?.click()}>\n              <Paperclip className=\"size-4\" /> {labels.attachmentAdd}\n            </Button>\n            {onCaptureScreenshot && (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                disabled={capturing}\n                onClick={() => {\n                  if (capturing) return;\n                  setCapturing(true);\n                  void onCaptureScreenshot()\n                    .then((file) => {\n                      if (file) pick(file);\n                    })\n                    .finally(() => setCapturing(false));\n                }}\n              >\n                <Camera className=\"size-4\" />{\" \"}\n                {capturing ? \"…\" : (labels.attachmentCapture ?? \"Capture screenshot\")}\n              </Button>\n            )}\n          </div>\n          {/* Said out loud, because a gesture with no affordance is a gesture\n              nobody finds. */}\n          <p className=\"text-xs text-[var(--text-muted)]\">\n            {labels.attachmentPaste ?? \"…or paste a screenshot from the clipboard.\"}\n          </p>\n        </div>\n      )}\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept.join(\",\")}\n        className=\"sr-only\"\n        onChange={(e) => {\n          pick(e.target.files?.[0]);\n          e.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n\n/** What a pasted image is called once it is an attachment.\n *\n *  The extension is read off the mime type rather than assumed to be `.png`:\n *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not\n *  a PNG is one the receiving end opens wrong. */\nexport function pastedName(type: string): string {\n  const subtype = type.split(\"/\")[1] ?? \"png\";\n  // `image/svg+xml` and friends carry a suffix that is not part of the\n  // extension, and none of them are in the accepted list anyway.\n  return `pasted.${subtype.split(\"+\")[0]}`;\n}\n"],"mappings":"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","names":[]}

package/dist/feedback/feedback-dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Button, Input, PHONE_QUERY, Select, Textarea } from "../components/ui.js";
@@ -92,7 +93,7 @@ function FeedbackDialog({
             contextSlot
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-400 dark:text-slate-500", children: labels.submitHint }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-placeholder)]", children: labels.submitHint }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: labels.cancel }),
               /* @__PURE__ */ jsx(Button, { onClick: trySubmit, disabled: !canSubmit, children: labels.save })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport {\n  DEFAULT_ATTACHMENT_ACCEPT,\n  DEFAULT_MAX_ATTACHMENT_BYTES,\n  FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n  value: string;\n  label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n  /** The heading over the field. Optional: a note editor puts the buttons\n   *  straight under its textarea, where a second heading is noise. */\n  attachment?: string;\n  attachmentAdd: string;\n  /** Label for the \"capture screenshot\" button. Optional — falls back to an English default. */\n  attachmentCapture?: string;\n  /** The line under the attachment buttons saying a screenshot can be pasted\n   *  straight in. Optional — falls back to an English default. */\n  attachmentPaste?: string;\n  attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n  title: string;\n  category: string;\n  subject: string;\n  body: string;\n  attachment: string;\n  submitHint: string;\n  cancel: string;\n  save: string;\n}\n\nexport interface FeedbackSubmission {\n  title: string;\n  body: string;\n  category: string;\n  attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n  open,\n  onClose,\n  categories,\n  category,\n  onCategoryChange,\n  labels,\n  onSubmit,\n  submitting = false,\n  contextSlot,\n  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onAttachmentError,\n  onCaptureScreenshot,\n}: {\n  open: boolean;\n  onClose: () => void;\n  categories: FeedbackCategoryOption[];\n  category: string;\n  onCategoryChange: (value: string) => void;\n  labels: FeedbackDialogLabels;\n  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n  submitting?: boolean;\n  contextSlot?: ReactNode;\n  attachmentAccept?: string[];\n  maxAttachmentBytes?: number;\n  onAttachmentError?: (kind: \"type\" | \"size\") => void;\n  /**\n   * Optional: capture a screenshot of the underlying app view and return it as a\n   * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n   * attachment\"; the returned file is fed through the same validation + preview.\n   */\n  onCaptureScreenshot?: () => Promise<File | null>;\n}) {\n  const [title, setTitle] = useState(\"\");\n  const [body, setBody] = useState(\"\");\n  const [attachment, setAttachment] = useState<File | null>(null);\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n\n  // Reset the form whenever the dialog is (re)opened.\n  useEffect(() => {\n    if (open) {\n      setTitle(\"\");\n      setBody(\"\");\n      setAttachment(null);\n    }\n  }, [open]);\n\n  const canSubmit = !!title && !!body && !submitting;\n  const trySubmit = () => {\n    if (canSubmit) void onSubmit({ title, body, category, attachment });\n  };\n\n  if (!open) return null;\n\n  const categoryField = (\n    <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n      {categories.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </Select>\n  );\n  // On a phone the subject leads as a heading rather than as the second of two\n  // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n  // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n  const subjectField = (\n    <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n  );\n  const bodyField = (\n    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />\n  );\n  const attachmentField = (\n    <FeedbackAttachmentField\n      value={attachment}\n      onChange={setAttachment}\n      labels={labels}\n      accept={attachmentAccept}\n      maxBytes={maxAttachmentBytes}\n      onError={onAttachmentError}\n      onCaptureScreenshot={onCaptureScreenshot}\n      // On `document`, not on the panel: the Modal focuses its own panel on open\n      // and traps Tab inside it, so while this dialog is up every paste in the\n      // page is meant for it — including the one made with nothing in\n      // particular focused, which never reaches a React `onPaste` on a child.\n      documentPaste={open}\n    />\n  );\n\n  return (\n    <Modal\n      onClose={onClose}\n      // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n      // the feedback dialog draggable so I can see behind it if it blocks\n      // something\") — you are describing what is under it while you type.\n      draggable\n      onKeyDown={(e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n          e.preventDefault();\n          trySubmit();\n        }\n      }}\n    >\n      {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n          and the heading is the strip a user reaches for. */}\n      <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n      <div className=\"space-y-3\">\n        {isMobile ? (\n          // Phone shape, the same reasoning as the transaction editor's (#177):\n          // the desktop order is the DATA MODEL's order — category, then subject,\n          // then body — but nobody opens this dialog to pick a category. What they\n          // came to do is say the thing, so that leads; the classification and the\n          // evidence follow, a tier down.\n          <>\n            {subjectField}\n            {bodyField}\n            <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n              {categoryField}\n              {attachmentField}\n              {contextSlot}\n            </div>\n          </>\n        ) : (\n          <>\n            {categoryField}\n            {subjectField}\n            {bodyField}\n            {attachmentField}\n            {contextSlot}\n          </>\n        )}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"text-xs text-slate-400 dark:text-slate-500\">{labels.submitHint}</div>\n          <div className=\"flex gap-2\">\n            <Button variant=\"ghost\" onClick={onClose}>\n              {labels.cancel}\n            </Button>\n            <Button onClick={trySubmit} disabled={!canSubmit}>\n              {labels.save}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport {\n  DEFAULT_ATTACHMENT_ACCEPT,\n  DEFAULT_MAX_ATTACHMENT_BYTES,\n  FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n  value: string;\n  label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n  /** The heading over the field. Optional: a note editor puts the buttons\n   *  straight under its textarea, where a second heading is noise. */\n  attachment?: string;\n  attachmentAdd: string;\n  /** Label for the \"capture screenshot\" button. Optional — falls back to an English default. */\n  attachmentCapture?: string;\n  /** The line under the attachment buttons saying a screenshot can be pasted\n   *  straight in. Optional — falls back to an English default. */\n  attachmentPaste?: string;\n  attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n  title: string;\n  category: string;\n  subject: string;\n  body: string;\n  attachment: string;\n  submitHint: string;\n  cancel: string;\n  save: string;\n}\n\nexport interface FeedbackSubmission {\n  title: string;\n  body: string;\n  category: string;\n  attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n  open,\n  onClose,\n  categories,\n  category,\n  onCategoryChange,\n  labels,\n  onSubmit,\n  submitting = false,\n  contextSlot,\n  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onAttachmentError,\n  onCaptureScreenshot,\n}: {\n  open: boolean;\n  onClose: () => void;\n  categories: FeedbackCategoryOption[];\n  category: string;\n  onCategoryChange: (value: string) => void;\n  labels: FeedbackDialogLabels;\n  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n  submitting?: boolean;\n  contextSlot?: ReactNode;\n  attachmentAccept?: string[];\n  maxAttachmentBytes?: number;\n  onAttachmentError?: (kind: \"type\" | \"size\") => void;\n  /**\n   * Optional: capture a screenshot of the underlying app view and return it as a\n   * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n   * attachment\"; the returned file is fed through the same validation + preview.\n   */\n  onCaptureScreenshot?: () => Promise<File | null>;\n}) {\n  const [title, setTitle] = useState(\"\");\n  const [body, setBody] = useState(\"\");\n  const [attachment, setAttachment] = useState<File | null>(null);\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n\n  // Reset the form whenever the dialog is (re)opened.\n  useEffect(() => {\n    if (open) {\n      setTitle(\"\");\n      setBody(\"\");\n      setAttachment(null);\n    }\n  }, [open]);\n\n  const canSubmit = !!title && !!body && !submitting;\n  const trySubmit = () => {\n    if (canSubmit) void onSubmit({ title, body, category, attachment });\n  };\n\n  if (!open) return null;\n\n  const categoryField = (\n    <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n      {categories.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </Select>\n  );\n  // On a phone the subject leads as a heading rather than as the second of two\n  // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n  // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n  const subjectField = (\n    <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n  );\n  const bodyField = (\n    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />\n  );\n  const attachmentField = (\n    <FeedbackAttachmentField\n      value={attachment}\n      onChange={setAttachment}\n      labels={labels}\n      accept={attachmentAccept}\n      maxBytes={maxAttachmentBytes}\n      onError={onAttachmentError}\n      onCaptureScreenshot={onCaptureScreenshot}\n      // On `document`, not on the panel: the Modal focuses its own panel on open\n      // and traps Tab inside it, so while this dialog is up every paste in the\n      // page is meant for it — including the one made with nothing in\n      // particular focused, which never reaches a React `onPaste` on a child.\n      documentPaste={open}\n    />\n  );\n\n  return (\n    <Modal\n      onClose={onClose}\n      // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n      // the feedback dialog draggable so I can see behind it if it blocks\n      // something\") — you are describing what is under it while you type.\n      draggable\n      onKeyDown={(e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n          e.preventDefault();\n          trySubmit();\n        }\n      }}\n    >\n      {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n          and the heading is the strip a user reaches for. */}\n      <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n      <div className=\"space-y-3\">\n        {isMobile ? (\n          // Phone shape, the same reasoning as the transaction editor's (#177):\n          // the desktop order is the DATA MODEL's order — category, then subject,\n          // then body — but nobody opens this dialog to pick a category. What they\n          // came to do is say the thing, so that leads; the classification and the\n          // evidence follow, a tier down.\n          <>\n            {subjectField}\n            {bodyField}\n            <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n              {categoryField}\n              {attachmentField}\n              {contextSlot}\n            </div>\n          </>\n        ) : (\n          <>\n            {categoryField}\n            {subjectField}\n            {bodyField}\n            {attachmentField}\n            {contextSlot}\n          </>\n        )}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n          <div className=\"flex gap-2\">\n            <Button variant=\"ghost\" onClick={onClose}>\n              {labels.cancel}\n            </Button>\n            <Button onClick={trySubmit} disabled={!canSubmit}>\n              {labels.save}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -38,11 +38,12 @@ type FeedbackCategory = "CRASH" | "BUG" | "IDEA" | "QUESTION" | "OTHER";
 /**
  * A glyph and a tone per status.
  *
- * Colour alone is not a label — two of these are a violet and an indigo apart —
- * so every status carries its own shape as well. Declaration order is chain
- * order, and {@link FEEDBACK_STATUS_ORDER} is derived from it rather than
- * restated, because a restated list cannot be checked for exhaustiveness: an
- * eighth status would break the build here and leave a literal seven long.
+ * Colour alone is not a label — two of these sit a hue apart, and a consumer who
+ * moves `--brand` can park it beside any of the others — so every status carries
+ * its own shape as well. Declaration order is chain order, and
+ * {@link FEEDBACK_STATUS_ORDER} is derived from it rather than restated, because
+ * a restated list cannot be checked for exhaustiveness: an eighth status would
+ * break the build here and leave a literal seven long.
  */
 declare const FEEDBACK_STATUS_META: Record<FeedbackStatus, {
     icon: LucideIcon;
@@ -90,7 +91,7 @@ declare function selectableFeedbackStatuses(_current: FeedbackStatus): FeedbackS
  *
  * A category cell that is one grey pill holding the raw enum makes a CRASH —
  * filed automatically, by somebody staring at a broken page right now — read
- * exactly like a QUESTION, and sit unnoticed in the queue. Red plus its own
+ * exactly like a QUESTION, and sit unnoticed in the queue. `--danger` plus its own
  * glyph is what makes that impossible; the hand-filed categories stay
  * deliberately quiet so that the loud one means something.
  *
@@ -163,8 +164,28 @@ declare function FeedbackStatusTransitions({ status, statuses, canEdit, onPick,
  * One component because all three are the same gesture: a draft that is not
  * committed until it is saved. Ctrl/⌘+Enter submits, which is the same shortcut
  * the compose dialog next door uses, so the habit carries across the feature.
+ *
+ * ## `initial` seeds the draft; it does not own it (changed 2026-09-22)
+ *
+ * This used to re-seed from `initial` in an effect, and that effect threw away
+ * whatever was in the box — **and the picture attached to it** — every time the
+ * prop arrived with a different value. `initial` is normally the saved note, so
+ * the list refreshing under the editor, or the owner re-deriving the same string,
+ * was enough: a triager halfway through a reply, with a screenshot picked out,
+ * lost both and got the saved text back with no way to undo it.
+ *
+ * A draft belongs to the thing being edited, so switching to a different note is a
+ * different editor — say so with a `key`:
+ *
+ * ```tsx
+ * <FeedbackNoteEditor key={note.id} initial={note.body} … />
+ * ```
+ *
+ * Where the id is not in hand at the call site, pass {@link resetKey} instead and
+ * the editor re-seeds when THAT changes. Either way the decision is the caller's,
+ * which is the point: the editor cannot tell a new subject from a new render.
  */
-declare function FeedbackNoteEditor({ initial, pending, onSave, onCancel, saveLabel, cancelLabel, placeholder, rows, attachment, }: {
+declare function FeedbackNoteEditor({ initial, pending, onSave, onCancel, saveLabel, cancelLabel, placeholder, rows, attachment, resetKey, }: {
     initial: string;
     pending: boolean;
     onSave: (value: string, attachment?: File | null) => void;
@@ -181,6 +202,11 @@ declare function FeedbackNoteEditor({ initial, pending, onSave, onCancel, saveLa
      *  *outcome* editor beside it wants, since an outcome is the answer rather
      *  than the evidence. */
     attachment?: FeedbackNoteAttachment;
+    /** Change this to say "the editor is now editing something ELSE", and the draft
+     *  and its attachment are dropped and re-seeded from `initial`. For call sites
+     *  that cannot put a `key` on the editor (see the note above). Leave it out and
+     *  the draft is never thrown away behind the user's back. */
+    resetKey?: string | number;
 }): react.JSX.Element;
 /** What {@link FeedbackNoteEditor} needs in order to offer a picture with the
  *  note: the same four things {@link FeedbackAttachmentField} takes, so the

package/dist/feedback/feedback-inbox.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import {
   Ban,
   Bug,
@@ -21,44 +22,52 @@ import { FeedbackAttachmentField } from "./feedback-attachment.js";
 const FEEDBACK_STATUS_META = {
   OPEN: {
     icon: Inbox,
-    activeBg: "bg-slate-200 dark:bg-slate-700",
-    activeText: "text-slate-900 dark:text-white"
+    activeBg: "bg-[var(--bg-active)]",
+    activeText: "text-[var(--text-primary)]"
   },
   IN_PROGRESS: {
     icon: Wrench,
-    activeBg: "bg-amber-100 dark:bg-amber-500/20",
-    activeText: "text-amber-700 dark:text-amber-300"
+    activeBg: "bg-[var(--warning-bg)]",
+    activeText: "text-[var(--warning)]"
   },
   // Where solved work is parked, waiting on the person who reported it. Its own
   // colour, because "somebody has to check this" is a state you want to find by
   // scanning rather than by reading.
   IN_EVALUATION: {
     icon: Eye,
-    activeBg: "bg-sky-100 dark:bg-sky-500/20",
-    activeText: "text-sky-700 dark:text-sky-300"
+    activeBg: "bg-[var(--info-bg)]",
+    activeText: "text-[var(--info)]"
   },
-  // Resolved but only checkable on a deployed build — indigo, so it reads as
-  // "waiting on something" rather than as a done or a refusal.
+  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it
+  // reads as "waiting on something" rather than as a done or a refusal, and it
+  // follows whatever the consumer's brand is instead of pinning an indigo island
+  // beside it.
   NEEDS_LIVE_TEST: {
     icon: CloudUpload,
-    activeBg: "bg-indigo-100 dark:bg-indigo-500/20",
-    activeText: "text-indigo-700 dark:text-indigo-300"
+    activeBg: "bg-[var(--brand-bg)]",
+    activeText: "text-[var(--brand-muted)]"
   },
-  // Parked on purpose. Muted, not red: it is not a refusal.
+  // Parked on purpose. Muted, not `--danger`: it is not a refusal.
   POSTPONED: {
     icon: PauseCircle,
-    activeBg: "bg-slate-200 dark:bg-slate-700",
-    activeText: "text-slate-600 dark:text-slate-300"
+    activeBg: "bg-[var(--bg-active)]",
+    activeText: "text-[var(--text-secondary)]"
   },
+  // The one status with nowhere to move to: the vocabulary has a brand, an info, a
+  // warning and a danger, and nothing that means "succeeded". Deliberately NOT
+  // borrowed from a family that means something else — `--status-synced` is a
+  // FIELD's trip to the database rather than an outcome, and tokens.css says so in
+  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which
+  // is why both carry a glyph and neither leans on colour alone.
   DONE: {
     icon: CheckCircle2,
-    activeBg: "bg-emerald-100 dark:bg-emerald-500/20",
-    activeText: "text-emerald-700 dark:text-emerald-300"
+    activeBg: "bg-[var(--success-bg)]",
+    activeText: "text-[var(--success)]"
   },
   WONT_DO: {
     icon: Ban,
-    activeBg: "bg-rose-100 dark:bg-rose-500/20",
-    activeText: "text-rose-700 dark:text-rose-300"
+    activeBg: "bg-[var(--danger-bg)]",
+    activeText: "text-[var(--danger)]"
   }
 };
 const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META);
@@ -88,28 +97,28 @@ function selectableFeedbackStatuses(_current) {
 const FEEDBACK_CATEGORY_META = {
   CRASH: {
     icon: OctagonAlert,
-    badgeBg: "bg-red-100 dark:bg-red-500/20",
-    badgeText: "text-red-700 dark:text-red-300"
+    badgeBg: "bg-[var(--danger-bg)]",
+    badgeText: "text-[var(--danger)]"
   },
   BUG: {
     icon: Bug,
-    badgeBg: "bg-amber-100 dark:bg-amber-500/20",
-    badgeText: "text-amber-700 dark:text-amber-300"
+    badgeBg: "bg-[var(--warning-bg)]",
+    badgeText: "text-[var(--warning)]"
   },
   IDEA: {
     icon: Lightbulb,
-    badgeBg: "bg-slate-100 dark:bg-slate-800",
-    badgeText: "text-slate-700 dark:text-slate-300"
+    badgeBg: "bg-[var(--bg-surface-2)]",
+    badgeText: "text-[var(--text-secondary)]"
   },
   QUESTION: {
     icon: HelpCircle,
-    badgeBg: "bg-slate-100 dark:bg-slate-800",
-    badgeText: "text-slate-700 dark:text-slate-300"
+    badgeBg: "bg-[var(--bg-surface-2)]",
+    badgeText: "text-[var(--text-secondary)]"
   },
   OTHER: {
     icon: MoreHorizontal,
-    badgeBg: "bg-slate-100 dark:bg-slate-800",
-    badgeText: "text-slate-700 dark:text-slate-300"
+    badgeBg: "bg-[var(--bg-surface-2)]",
+    badgeText: "text-[var(--text-secondary)]"
   }
 };
 const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META);
@@ -197,7 +206,7 @@ function FeedbackStatusTransitions({
               "transition-colors",
               variant === "icon" ? cn(
                 "flex size-7 items-center justify-center rounded",
-                active ? cn(meta.activeBg, meta.activeText) : "text-slate-400 hover:text-slate-700 dark:text-slate-500 dark:hover:text-slate-200"
+                active ? cn(meta.activeBg, meta.activeText) : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
               ) : cn(
                 "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium",
                 active ? cn(meta.activeBg, meta.activeText, "border-transparent") : "border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)]"
@@ -230,15 +239,18 @@ function FeedbackNoteEditor({
   cancelLabel,
   placeholder,
   rows = 3,
-  attachment
+  attachment,
+  resetKey
 }) {
   const [draft, setDraft] = useState(initial);
   const [file, setFile] = useState(null);
-  const root = useRef(null);
-  useEffect(() => {
+  const [seededFor, setSeededFor] = useState(resetKey);
+  if (resetKey !== seededFor) {
+    setSeededFor(resetKey);
     setDraft(initial);
     setFile(null);
-  }, [initial]);
+  }
+  const root = useRef(null);
   const submit = () => onSave(draft, file);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -252,7 +264,7 @@ function FeedbackNoteEditor({
         }
       },
       children: [
-        placeholder && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: placeholder }),
+        placeholder && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: placeholder }),
         /* @__PURE__ */ jsx(Textarea, { rows, value: draft, onChange: (event) => setDraft(event.target.value) }),
         attachment && /* @__PURE__ */ jsx(
           FeedbackAttachmentField,
@@ -282,7 +294,7 @@ function FeedbackDetailSection({
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: title }),
       action
     ] }),
     children
@@ -292,8 +304,8 @@ function FeedbackDetail({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "space-y-3 text-sm", children });
 }
 function FeedbackProse({ children, empty }) {
-  if (!children) return /* @__PURE__ */ jsx("p", { className: "text-slate-400 dark:text-slate-600", children: empty ?? "\u2014" });
-  return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-slate-700 dark:text-slate-300", children });
+  if (!children) return /* @__PURE__ */ jsx("p", { className: "text-[var(--text-placeholder)]", children: empty ?? "\u2014" });
+  return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-[var(--text-secondary)]", children });
 }
 export {
   FEEDBACK_CATEGORY_META,