@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -1,100 +1,236 @@
-import 'react';
-import 'lucide-react';
-export { t as FEEDBACK_CATEGORY_META, u as FEEDBACK_CATEGORY_ORDER, x as FEEDBACK_STATUS_META, y as FEEDBACK_STATUS_ORDER, Q as FeedbackCategory, R as FeedbackCategoryBadge, a4 as FeedbackDetail, a7 as FeedbackDetailSection, ao as FeedbackNoteAttachment, ap as FeedbackNoteEditor, ar as FeedbackProse, az as FeedbackStatus, aA as FeedbackStatusBadge, aG as FeedbackStatusTransitions, b0 as feedbackCategoryRank, bd as nextFeedbackStatus, bh as selectableFeedbackStatuses, bs as visibleFeedbackStatuses } from '../delete-account-setting-DiPX4Vue.js';
-import '../components/write-lock.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import '../components/field-parts.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-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/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/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.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/focus-ring.js';
+import type { ReactNode } from "react";
+import type { ButtonSize, ButtonVariant } from "../components/button-look.js";
+import { type CommitScope } from "../components/write-lock.js";
+import { type FeedbackAttachmentErrorInfo } from "./feedback-attachment.js";
+import type { FeedbackAttachmentLabels } from "./feedback-dialog.js";
+import { type FeedbackCategory, type FeedbackStatus } from "./feedback-vocabulary.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+/**
+ * The feedback **inbox**, as the parts two apps were each writing separately.
+ *
+ * `feedback-dialog.tsx` next door is the other half — the form somebody files a
+ * report with — and the split between them is the same one: the kit owns the
+ * *vocabulary*, the *policy* about how a report moves (both in
+ * feedback-vocabulary.ts since 0.34, re-exported below), and the *look* (here);
+ * the app owns the data, the API and every string.
+ *
+ * It exists because both apps had grown their own copy. Keksdose's is the one
+ * this is lifted from, comments and all, because it is the one that had been
+ * argued with users for a year — the glyph per status, the two sizes of the
+ * status control, what a row offers from where it currently stands. Steering
+ * Design's was thinner in every one of those places and read as a different
+ * product for no reason anyone chose.
+ *
+ * **The report itself lives next door (0.27.0).** This file used to say there
+ * was deliberately no `Feedback` type here: the apps stored a report differently
+ * (a context JSON column and an object store in one, a `page_path` and the bytes
+ * in the row in another). Marcel's feedback round (2026-10-04,
+ * docs/feedback-harmonization.md §5) gave all three apps one contract, so the
+ * shape is now shared — `FeedbackRecord` / `FeedbackContext` in
+ * feedback-record.ts, with the constants and body helpers. The components HERE
+ * still take the values they draw rather than a row, which keeps them usable
+ * from any surface; the detail panel stays a *shell* the row detail fills.
+ *
+ * **The words are the kit's too (0.27.0).** The status and category names are
+ * the `feedbackStatus` / `feedbackCategory` namespaces (feedback-labels.ts,
+ * keksdose's wording), read by default by the badges and the transitions below;
+ * a `label` the caller passes still wins.
+ */
+export { FEEDBACK_CATEGORY_META, FEEDBACK_CATEGORY_ORDER, FEEDBACK_STATUS_META, FEEDBACK_STATUS_ORDER, feedbackCategoryRank, nextFeedbackStatus, selectableFeedbackStatuses, visibleFeedbackStatuses, } from "./feedback-vocabulary.js";
+export type { FeedbackCategory, FeedbackStatus } from "./feedback-vocabulary.js";
+/**
+ * The category as a badge.
+ *
+ * Falls back to OTHER's treatment for a category this build has never heard of,
+ * so an older client against a newer API degrades to a readable neutral pill
+ * instead of throwing on `meta.icon` — a crash report must not be able to cause
+ * one. The *label* gets the same guard: by default the `feedbackCategory`
+ * namespace's word (0.27.0), and for a value it has no word for, what OTHER is
+ * called.
+ */
+export declare function FeedbackCategoryBadge({ category, label, compact, className, }: {
+    category: FeedbackCategory;
+    /** Over the `feedbackCategory` label (0.27.0: optional — before, every app passed
+     *  its own translation). */
+    label?: ReactNode;
+    compact?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** Where a report stands, as a badge — for the places that only *report* the
+ *  status rather than offering to change it. Named by the `feedbackStatus`
+ *  namespace unless `label` says otherwise (0.27.0); a status this build has never
+ *  heard of shows OPEN's look and its own raw value, never OPEN's name. */
+export declare function FeedbackStatusBadge({ status, label, className, }: {
+    status: FeedbackStatus;
+    /** Over the `feedbackStatus` label (0.27.0: optional). */
+    label?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A row of statuses to switch a report to — either a table column's icon row or
+ * an expanded panel's labelled pills.
+ *
+ * One component for both, because everything except the class strings is the
+ * same decision: which one is current, and when the buttons are disabled. Two
+ * copies had already drifted — only the icon variant carried `aria-label` and
+ * `aria-pressed`, so the pill row was unlabelled for a screen reader.
+ *
+ * WHICH statuses to offer is the caller's, not this component's:
+ * {@link visibleFeedbackStatuses} for a compact column,
+ * {@link selectableFeedbackStatuses} for an expanded row. Passing the list keeps
+ * that policy readable at the two call sites instead of hiding it behind
+ * `variant`.
+ */
+export declare function FeedbackStatusTransitions({ status, statuses, canEdit, onPick, variant, label, commit, disabledReason: ownDisabledReason, className, }: {
+    status: FeedbackStatus;
+    statuses: FeedbackStatus[];
+    canEdit: boolean;
+    onPick: (status: FeedbackStatus) => void;
+    variant: "icon" | "pill";
+    /** What each status is called. Default (0.27.0): the `feedbackStatus` namespace —
+     *  before, every app passed its own translation. */
+    label?: (status: FeedbackStatus) => string;
+    /**
+     * Every button here SAVES the moment it is pressed (0.27.0) — opt in and, under a
+     * locked {@link WriteLockProvider}, the row stays as it is and says why: each status
+     * the row could move to is `aria-disabled` but focusable, the click does nothing, and
+     * the lock's reason is in the kit Tooltip and the button's description — the
+     * `disabledReason` path `Button` takes. Off by default: a feedback inbox is not what
+     * every app's lock is about (keksdose's shell lock is a read-only demo BUDGET, and a
+     * report is not budget data).
+     */
+    commit?: CommitScope;
+    /** Why the statuses cannot be changed right now, the same way (a lock's own reason
+     *  wins over it). Only read while `canEdit`: a read-only row is a picture of the
+     *  workflow, not a refused action. */
+    disabledReason?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A textarea and its two buttons — for an outcome, for a note sent back with a
+ * report, for a body being corrected.
+ *
+ * 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.
+ */
+export declare function FeedbackNoteEditor({ initial, pending, onSave, onCancel, saveLabel, cancelLabel, placeholder, label, rows, attachment, resetKey, required, commit, }: {
+    initial: string;
+    pending: boolean;
+    onSave: (value: string, attachment?: File | null) => void;
+    onCancel: () => void;
+    saveLabel: ReactNode;
+    cancelLabel: ReactNode;
+    /** A line above the field saying what to write, not an in-field placeholder:
+     *  a hint that disappears the moment somebody starts typing is a hint that is
+     *  gone exactly when it is being followed. */
+    placeholder?: ReactNode;
+    /** The box's accessible name (0.34). Without it the `placeholder` line names the
+     *  box, and without that the `feedbackDetail` namespace's `note` ("Note") does —
+     *  a box with neither was read out as just "edit text" (the showcase's axe check).
+     *  Given with a `placeholder`, this names the box and the line describes it. */
+    label?: string;
+    rows?: number;
+    /** Offer a picture with the note (Steering Design feedback #128). Omitted,
+     *  the editor is exactly the text box it always was — which is what the
+     *  *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;
+    /**
+     * A blank note cannot be saved (0.27.0): Save stays disabled — and Ctrl/⌘+Enter does
+     * nothing — until the trimmed text is non-empty, and the box is `aria-required`. For
+     * the rework note, which the feedback contract requires (§3.4: a file alone cannot
+     * be sent; keksdose `feedback-page.tsx:577` dropped the click silently instead, so a
+     * press on Send with an empty box looked like a lost send). Default `false`: an
+     * outcome or a description may be cleared on purpose.
+     */
+    required?: boolean;
+    /** Save COMMITS (0.27.0): under a locked `WriteLockProvider` it is disabled the
+     *  `disabledReason` way, with the lock's reason, and Ctrl/⌘+Enter saves nothing. The
+     *  text box stays editable — nothing in it reaches the server until the save. */
+    commit?: CommitScope;
+}): import("react").JSX.Element;
+/** What {@link FeedbackNoteEditor} needs in order to offer a picture with the
+ *  note: the same things {@link FeedbackAttachmentField} takes, so the reply path is
+ *  held to the app's own limits — and drawn in its own look — rather than the
+ *  defaults. */
+export interface FeedbackNoteAttachment {
+    /** Over the field's own `feedbackAttachment` namespace. Optional since 0.27.0 — the
+     *  field has read the provider's words since 0.7.0, so an app with a catalogue has
+     *  nothing to restate. */
+    labels?: LabelOverride<FeedbackAttachmentLabels>;
+    accept?: string[];
+    maxBytes?: number;
+    /** `info` (0.23.0) names the refused file and the limit. */
+    onError?: (kind: "type" | "size", info: FeedbackAttachmentErrorInfo) => void;
+    onCaptureScreenshot?: () => Promise<File | null>;
+    /**
+     * The add and capture buttons' look (0.25.0) — the field's `buttonVariant` (0.24.0),
+     * Button's own `variant`. Default `"secondary"`, as before.
+     *
+     * The note editor sits inline in a triage panel, and its buttons end in a ghost
+     * Cancel and a brand Save: two bordered full-size attachment buttons above them read
+     * as a second form. The field could already be told otherwise; the editor builds it
+     * itself and had nowhere to say so.
+     */
+    buttonVariant?: ButtonVariant;
+    /** The add and capture buttons' size (0.25.0) — the field's `buttonSize`. Default
+     *  `"md"`; `"sm"` draws their icons at 14px. */
+    buttonSize?: ButtonSize;
+}
+/**
+ * One labelled block of an opened report.
+ *
+ * The detail panel is a stack of these, and it is a stack rather than a
+ * component with fixed fields on purpose: the two apps keep a report's context
+ * and its screenshot in genuinely different places, and a shell that insisted on
+ * both would force one of them to invent a shape it does not have. What is
+ * shared is what a section *looks* like — and that is all that made the two
+ * panels read as different products.
+ */
+export declare function FeedbackDetailSection({ title, action, children, }: {
+    title: ReactNode;
+    /** Something on the title's own line — an edit button, a resolved-at date. */
+    action?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The stack a detail panel is. Here so the spacing between sections is decided
+ *  once rather than by whichever app was written second. */
+export declare function FeedbackDetail({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Prose inside a section — a body, an outcome, a note.
+ *
+ *  `whitespace-pre-wrap` is the whole component: a report is written in
+ *  paragraphs, and a note appended to it later is separated by blank lines that
+ *  carry the entire "this arrived after the answer" reading. */
+export declare function FeedbackProse({ children, empty }: {
+    children?: string;
+    empty?: ReactNode;
+}): import("react").JSX.Element;

package/dist/feedback/feedback-inbox.js

@@ -1,143 +1,29 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
-import {
-  Ban,
-  Bug,
-  CheckCircle2,
-  ClipboardCheck,
-  CloudUpload,
-  Eye,
-  HelpCircle,
-  Inbox,
-  Lightbulb,
-  MoreHorizontal,
-  OctagonAlert,
-  PauseCircle,
-  Wrench
-} from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { Button, Textarea } from "../components/ui.js";
+import { Button } from "../components/button.js";
+import { Textarea } from "../components/textarea.js";
 import { Tooltip } from "../components/tooltip.js";
 import { useCommitReason, useWriteLock } from "../components/write-lock.js";
 import { FeedbackAttachmentField } from "./feedback-attachment.js";
 import { useFeedbackCategoryLabels, useFeedbackStatusLabels } from "./feedback-labels.js";
-const FEEDBACK_STATUS_META = {
-  OPEN: {
-    icon: Inbox,
-    activeBg: "bg-[var(--bg-active)]",
-    activeText: "text-[var(--text-primary)]"
-  },
-  // Triaged and released for implementation (feedback contract §8.2, keksdose live
-  // #396): OPEN is "filed, nobody has looked yet", READY is "go". The brand tint at full
-  // strength, so it reads as the go-ahead beside OPEN's neutral fill and
-  // NEEDS_LIVE_TEST's muted brand.
-  READY: {
-    icon: ClipboardCheck,
-    activeBg: "bg-[var(--brand-bg)]",
-    activeText: "text-[var(--brand)]"
-  },
-  IN_PROGRESS: {
-    icon: Wrench,
-    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-[var(--info-bg)]",
-    activeText: "text-[var(--info)]"
-  },
-  // 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-[var(--brand-bg)]",
-    activeText: "text-[var(--brand-muted)]"
-  },
-  // Parked on purpose. Muted, not `--danger`: it is not a refusal.
-  POSTPONED: {
-    icon: PauseCircle,
-    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-[var(--success-bg)]",
-    activeText: "text-[var(--success)]"
-  },
-  WONT_DO: {
-    icon: Ban,
-    activeBg: "bg-[var(--danger-bg)]",
-    activeText: "text-[var(--danger)]"
-  }
-};
-const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META);
-const OFF_CHAIN = ["NEEDS_LIVE_TEST", "POSTPONED", "WONT_DO"];
-const FORWARD_CHAIN = ["OPEN", "READY", "IN_PROGRESS", "IN_EVALUATION", "DONE"];
-function nextFeedbackStatus(current) {
-  const at = FORWARD_CHAIN.indexOf(current);
-  return at !== -1 && at < FORWARD_CHAIN.length - 1 ? FORWARD_CHAIN[at + 1] : null;
-}
-function visibleFeedbackStatuses(current) {
-  const set = /* @__PURE__ */ new Set([current]);
-  const at = FORWARD_CHAIN.indexOf(current);
-  if (at !== -1) {
-    if (at < FORWARD_CHAIN.length - 1) set.add(FORWARD_CHAIN[at + 1]);
-    if (at > 0) set.add(FORWARD_CHAIN[at - 1]);
-    for (const off of OFF_CHAIN) set.add(off);
-  } else if (current !== "WONT_DO") {
-    set.add("IN_PROGRESS");
-    set.add("DONE");
-    set.add("WONT_DO");
-  }
-  return FEEDBACK_STATUS_ORDER.filter((status) => set.has(status));
-}
-function selectableFeedbackStatuses(_current) {
-  return [...FEEDBACK_STATUS_ORDER];
-}
-const FEEDBACK_CATEGORY_META = {
-  CRASH: {
-    icon: OctagonAlert,
-    badgeBg: "bg-[var(--danger-bg)]",
-    badgeText: "text-[var(--danger)]"
-  },
-  BUG: {
-    icon: Bug,
-    badgeBg: "bg-[var(--warning-bg)]",
-    badgeText: "text-[var(--warning)]"
-  },
-  IDEA: {
-    icon: Lightbulb,
-    badgeBg: "bg-[var(--bg-surface-2)]",
-    badgeText: "text-[var(--text-secondary)]"
-  },
-  QUESTION: {
-    icon: HelpCircle,
-    badgeBg: "bg-[var(--bg-surface-2)]",
-    badgeText: "text-[var(--text-secondary)]"
-  },
-  OTHER: {
-    icon: MoreHorizontal,
-    badgeBg: "bg-[var(--bg-surface-2)]",
-    badgeText: "text-[var(--text-secondary)]"
-  }
-};
-const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META);
-function feedbackCategoryRank(category) {
-  const at = FEEDBACK_CATEGORY_ORDER.indexOf(category);
-  return at === -1 ? FEEDBACK_CATEGORY_ORDER.length : at;
-}
+import {
+  FEEDBACK_CATEGORY_META,
+  FEEDBACK_STATUS_META
+} from "./feedback-vocabulary.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels.js";
+import {
+  FEEDBACK_CATEGORY_META as FEEDBACK_CATEGORY_META2,
+  FEEDBACK_CATEGORY_ORDER,
+  FEEDBACK_STATUS_META as FEEDBACK_STATUS_META2,
+  FEEDBACK_STATUS_ORDER,
+  feedbackCategoryRank,
+  nextFeedbackStatus,
+  selectableFeedbackStatuses,
+  visibleFeedbackStatuses
+} from "./feedback-vocabulary.js";
 function FeedbackCategoryBadge({
   category,
   label,
@@ -240,13 +126,13 @@ function FeedbackStatusTransitions({
                   "transition-colors",
                   variant === "icon" ? cn(
                     "flex size-7 items-center justify-center rounded",
-                    active ? cn(meta.activeBg, meta.activeText) : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
+                    active ? cn(meta.activeBg, meta.activeText) : "text-placeholder hover: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") : (
                       // The translucent ink on hover (0.33, B′), as Button's secondary:
                       // the well is the page in light, and these pills sit on either.
-                      "border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]"
+                      "border-subtle bg-transparent text-primary hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]"
                     )
                   ),
                   // Both stay unclickable, but only the read-only case is DIMMED: the
@@ -282,6 +168,7 @@ function FeedbackNoteEditor({
   saveLabel,
   cancelLabel,
   placeholder,
+  label,
   rows = 3,
   attachment,
   resetKey,
@@ -298,6 +185,7 @@ function FeedbackNoteEditor({
   }
   const root = useRef(null);
   const hintId = useId();
+  const detailText = useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS);
   const lock = useWriteLock(commit ?? false);
   const blank = required && !draft.trim();
   const canSubmit = !pending && !blank && !lock.locked;
@@ -318,14 +206,16 @@ function FeedbackNoteEditor({
           }
         },
         children: [
-          placeholder && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--text-muted)]", children: placeholder }),
+          placeholder && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-muted", children: placeholder }),
           /* @__PURE__ */ jsx(
             Textarea,
             {
               rows,
               value: draft,
               onChange: (event) => setDraft(event.target.value),
-              "aria-labelledby": placeholder ? hintId : void 0,
+              "aria-label": label ?? (placeholder ? void 0 : detailText.note),
+              "aria-labelledby": placeholder && label === void 0 ? hintId : void 0,
+              "aria-describedby": placeholder && label !== void 0 ? hintId : void 0,
               "aria-required": required || void 0
             }
           ),
@@ -361,7 +251,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-[var(--text-muted)]", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: title }),
       action
     ] }),
     children
@@ -371,13 +261,13 @@ function FeedbackDetail({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("space-y-3 text-sm", className), children });
 }
 function FeedbackProse({ children, empty }) {
-  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 });
+  if (!children) return /* @__PURE__ */ jsx("p", { className: "text-placeholder", children: empty ?? "\u2014" });
+  return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-secondary", children });
 }
 export {
-  FEEDBACK_CATEGORY_META,
+  FEEDBACK_CATEGORY_META2 as FEEDBACK_CATEGORY_META,
   FEEDBACK_CATEGORY_ORDER,
-  FEEDBACK_STATUS_META,
+  FEEDBACK_STATUS_META2 as FEEDBACK_STATUS_META,
   FEEDBACK_STATUS_ORDER,
   FeedbackCategoryBadge,
   FeedbackDetail,