@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -1,101 +1,312 @@
-import 'react';
-export { D as DEFAULT_ATTACHMENT_ACCEPT, e as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, p as DEFAULT_MAX_ATTACHMENTS, q as DEFAULT_MAX_ATTACHMENT_BYTES, A as FeedbackAttachmentError, B as FeedbackAttachmentErrorInfo, E as FeedbackAttachmentField, G as FeedbackAttachmentFieldLabels, H as FeedbackAttachmentFieldMultipleProps, I as FeedbackAttachmentFieldProps, J as FeedbackAttachmentFieldRefsProps, K as FeedbackAttachmentFieldSingleProps, M as FeedbackAttachmentRef, N as FeedbackAttachmentRefsError, be as pastedName } from '../delete-account-setting-DAgGBrbn.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 'lucide-react';
-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 '../i18n/plurals.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, type RefObject } from "react";
+import type { ButtonSize, ButtonVariant } from "../components/button-look.js";
+import { type CommitScope } from "../components/write-lock.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { FeedbackAttachmentLabels } from "./feedback-dialog.js";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "./feedback-attachment-labels.js";
+import { DEFAULT_ATTACHMENT_ACCEPT, DEFAULT_MAX_ATTACHMENT_BYTES, DEFAULT_MAX_ATTACHMENTS } from "./feedback-record.js";
+export { DEFAULT_ATTACHMENT_ACCEPT, DEFAULT_MAX_ATTACHMENT_BYTES, DEFAULT_MAX_ATTACHMENTS };
+/**
+ * The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider
+ * labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop
+ * (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them
+ * one to one. The optional heading, `attachment`, stays a prop: a note editor puts
+ * the buttons straight under its textarea and wants none.
+ *
+ * Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app
+ * that relied on its provider got "Capture screenshot" under a German form.
+ *
+ * The three keys added in 0.15.5 for `multiple` mode are optional, so a complete
+ * `UiKitLabels` typed before it still compiles; they fall back to English. So is
+ * `attachmentScreenshot` (0.16.0).
+ */
+export interface FeedbackAttachmentFieldLabels {
+    attachmentAdd: string;
+    attachmentCapture: string;
+    attachmentPaste: string;
+    attachmentRemove: string;
+    /** `multiple` mode: the accessible name of the list of chosen files — and, since
+     *  0.16.0, the heading `<FeedbackDialog attachments="multiple">` puts over it. */
+    attachmentList?: string;
+    /** `multiple` mode (0.16.0): what the screenshot slot's chip is called — "Screenshot"
+     *  rather than the capture's file name ("screenshot.webp"), which says nothing a
+     *  reporter chose. The file name stays as the chip's second line. */
+    attachmentScreenshot?: string;
+    /** `multiple` mode: one chip's remove button — "Remove photo.jpg". Named per file,
+     *  because five buttons all called "Remove attachment" say nothing about which. */
+    attachmentRemoveFile?: (name: string) => string;
+    /** `multiple` mode: the line shown in place of the add buttons once `max` is reached. */
+    attachmentLimit?: (max: number) => string;
+    /** `refs` mode (0.22.0, keksdose K16): the second line of a chip whose upload is still
+     *  running, where an uploaded one shows its size — "Uploading…". Optional, like the
+     *  keys above, so a `UiKitLabels` typed before it still compiles. */
+    attachmentUploading?: string;
+    /** `refs` mode (0.23.0, keksdose G5a): {@link FeedbackAttachmentErrorInfo.message} for
+     *  an `"upload"` refusal — "“huge.png” could not be uploaded". The other refusals'
+     *  sentences are the `filePicker` namespace's, shared with FileButton. Optional, like
+     *  the keys above. */
+    attachmentUploadFailed?: (name: string) => string;
+}
+export { DEFAULT_FEEDBACK_ATTACHMENT_LABELS };
+/** Why a file was turned away. `"count"` only ever comes from `multiple` (and `refs`)
+ *  mode: more files arrived at once than `max` left room for, and the surplus was
+ *  dropped. */
+export type FeedbackAttachmentError = "type" | "size" | "count";
+/** `refs` mode's reasons: {@link FeedbackAttachmentError}, or `"upload"` — `onUpload`
+ *  rejected, and what it rejected with is `onError`'s second argument. A type of its
+ *  own so a host's exhaustive switch over the File modes' reasons stays exhaustive. */
+export type FeedbackAttachmentRefsError = FeedbackAttachmentError | "upload";
+/**
+ * What `onError` knows about a refusal beyond its kind (0.23.0, keksdose G5a): the file
+ * it was about, the limit that refused it, and a sentence that says both.
+ *
+ * keksdose's support chat toasted "File too large" with no name — the field's `onError`
+ * carried a kind and nothing else, so a refusal could not say WHICH of three pasted
+ * screenshots went, nor what the ceiling was, and its own `AttachmentPicker` (a
+ * FileButton, whose `onReject` hands over `{ file, message }`) said more than the kit's
+ * field would have. This is that, for every mode.
+ *
+ * It arrives as an EXTRA argument, after the ones `onError` already had, so a handler
+ * written for 0.22 — `(kind) => …`, or `refs` mode's `(kind, error) => …` — compiles
+ * and behaves as before:
+ *
+ * - single and `multiple`: `onError(kind, info)`;
+ * - `refs`: `onError(kind, error, info)` — the second place is `onUpload`'s rejection
+ *   since 0.22 (`undefined` for the other kinds, as it always was), so the info comes
+ *   third rather than changing what a 0.22 handler reads there. It also carries that
+ *   `error`, so one helper `(kind, info) => …` serves all three modes.
+ *
+ * An object rather than more positional arguments because what a host reaches for
+ * differs by kind — the bytes for `"size"`, `max` for `"count"`, the server's answer for
+ * `"upload"` — and a field added later must not shift anyone's arguments.
+ */
+export interface FeedbackAttachmentErrorInfo {
+    /** The file refused — under the name the field would have given it (a pasted image
+     *  is already "pasted.png"). For `"count"`, the first of the surplus; for
+     *  `"upload"`, the file whose upload failed. */
+    file: File;
+    /** `"count"`: every file of the surplus (several can arrive in one pick). Otherwise
+     *  `[file]`. */
+    files: File[];
+    /**
+     * One translated sentence naming the file and the limit — the ones FileButton's
+     * `onReject` hands over, from the same `filePicker` namespace: "“huge.png” is larger
+     * than 10 MB", "Only image/png, image/jpeg files", "“c.png” was not added: at most 5
+     * files" (several at once: "3 files were not added"). `"upload"`: the field's own
+     * `attachmentUploadFailed`, "“huge.png” could not be uploaded" — a host with a better
+     * sentence from the server's answer uses `error`. Ready for a toast as it is.
+     */
+    message: string;
+    /** The field's `maxBytes` — the ceiling a `"size"` refusal went over, in bytes. */
+    maxBytes: number;
+    /** The field's `accept` — the types a `"type"` refusal was not among. */
+    accept: string[];
+    /** The field's `max` — the ceiling a `"count"` refusal hit. Absent in single mode,
+     *  which holds one file by definition. */
+    max?: number;
+    /** `"upload"` only: what `onUpload` rejected with — `onError`'s second argument. */
+    error?: unknown;
+}
+/**
+ * One uploaded attachment in `refs` mode: what the host's upload answered with. `key`
+ * identifies it (a storage key, an upload id) and is what a remove goes by; `name` is
+ * what the chip says. `size` (bytes) and `type` (mime) are optional — given, the chip
+ * shows the size and an image icon or a file icon accordingly.
+ */
+export interface FeedbackAttachmentRef {
+    key: string;
+    name: string;
+    size?: number;
+    type?: string;
+}
+interface FeedbackAttachmentFieldBaseProps {
+    /** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional
+     *  since 0.7.0; `attachment` (the heading) is only ever read from here. */
+    labels?: LabelOverride<FeedbackAttachmentLabels> & Pick<Partial<FeedbackAttachmentFieldLabels>, "attachmentUploading" | "attachmentUploadFailed">;
+    accept?: string[];
+    maxBytes?: number;
+    /**
+     * Take no files for now (0.23.0, keksdose G5b): the add and capture buttons, the
+     * hidden file input and every chip's remove button are natively disabled, and a paste
+     * is let through untouched. The chips stay as they are — what is about to be sent
+     * stays readable.
+     *
+     * For the moment a send is in flight. keksdose's support picker is `disabled` while
+     * the message goes out, because the message carries the attachments AS THEY WERE at
+     * the press: a chip removed mid-send has gone with it all the same, and one added
+     * mid-send looks as if it had. The field has no drop target; the paste is its drop.
+     *
+     * This is a pause, not a lock that explains itself — for that, `refs` mode (the mode
+     * that commits) takes `commit` and `disabledReason`.
+     */
+    disabled?: boolean;
+    /** Snapshot the app view behind this and return it as a File. A "Capture
+     *  screenshot" button appears only when it is given. */
+    onCaptureScreenshot?: () => Promise<File | null>;
+    /** Listen for the paste on `document` rather than on this field's own
+     *  subtree. For a modal, which owns the whole page while it is up. */
+    documentPaste?: boolean;
+    /** Listen for the paste within this element's subtree rather than this
+     *  field's own — for a field standing *beside* the text box a paste is made
+     *  in, whose common parent is where the event bubbles to. Ignored when
+     *  `documentPaste` is set. */
+    pasteFrom?: RefObject<HTMLElement | null>;
+    /**
+     * The add and capture buttons' look (0.24.0, keksdose) — Button's own `variant`.
+     * Default `"secondary"`, the look they always had.
+     *
+     * keksdose's support chat puts this field in ChatComposer's `attachmentSlot`, in the
+     * row with Send, where its own picker had been a `ghost` / `sm` FileButton: two
+     * bordered full-size buttons under a chat box read as a second form, and the field
+     * gave no way to say otherwise. Every mode, wherever the buttons appear; the chips'
+     * remove buttons keep their size.
+     */
+    buttonVariant?: ButtonVariant;
+    /** The add and capture buttons' size — Button's own `size`, with `buttonVariant`.
+     *  Default `"md"`. `"sm"` draws their icons at 14px, as a small button's are. */
+    buttonSize?: ButtonSize;
+    className?: string;
+}
+/** One file: choosing a second means removing the first. The field's only mode until 0.15.5. */
+export interface FeedbackAttachmentFieldSingleProps extends FeedbackAttachmentFieldBaseProps {
+    multiple?: false;
+    refs?: false;
+    value: File | null;
+    onChange: (file: File | null) => void;
+    /** A file was refused. `info` (0.23.0) names it and the limit — see
+     *  {@link FeedbackAttachmentErrorInfo}. */
+    onError?: (kind: "type" | "size", info: FeedbackAttachmentErrorInfo) => void;
+    max?: never;
+    screenshot?: never;
+    onScreenshotChange?: never;
+    commit?: never;
+    disabledReason?: never;
+}
+/**
+ * Several files (0.15.5, keksdose dev#578: "pasted two photos, the second overwrote
+ * the first"). Every way in ADDS — a pick of several files, a paste, a capture — up to
+ * `max`, and each file is a removable chip.
+ */
+export interface FeedbackAttachmentFieldMultipleProps extends FeedbackAttachmentFieldBaseProps {
+    multiple: true;
+    refs?: false;
+    value: File[];
+    onChange: (files: File[]) => void;
+    /** How many files `value` may hold. Default {@link DEFAULT_MAX_ATTACHMENTS} (5). The
+     *  add buttons and the paste hint are offered only while there is room. */
+    max?: number;
+    /** Per file: a rejected one is reported and the others are still added. `"count"` is
+     *  once per pick, with the whole surplus in `info.files`. `info` (0.23.0): see
+     *  {@link FeedbackAttachmentErrorInfo}. */
+    onError?: (kind: FeedbackAttachmentError, info: FeedbackAttachmentErrorInfo) => void;
+    /**
+     * A separate slot for THE screenshot, outside `value` and `max`. Given
+     * `onScreenshotChange`, what `onCaptureScreenshot` returns lands here instead of in
+     * `value`, shown as the first chip, and the capture button is offered only while the
+     * slot is empty — a second snapshot of the same view is not more evidence. This is
+     * how `<FeedbackDialog attachments="multiple">` keeps the screenshot apart from the
+     * photos; a form built from the parts can do the same.
+     */
+    screenshot?: File | null;
+    onScreenshotChange?: (file: File | null) => void;
+    commit?: never;
+    disabledReason?: never;
+}
+/**
+ * Uploaded on pick (0.22.0, keksdose K16). keksdose's support chat uploads each file
+ * the moment it is chosen and sends the message with the REFS the uploads answered —
+ * a 10 MB screenshot is refused while the reporter is still typing, not when they
+ * press Send — so its `AttachmentPicker` could not use this field, whose value is
+ * `File`s held until the form is submitted. Here the value is
+ * {@link FeedbackAttachmentRef}s: every way in (pick, paste, capture) validates the
+ * file as the other modes do, then hands it to `onUpload` and shows a chip with a
+ * spinner until it answers; the ref it resolves to joins `value` through `onChange`.
+ * A rejection drops the chip and reports `onError("upload", error)`. A chip is removed
+ * BY KEY: `onChange` gets the list without it, and `onRemove` the key, for a host that
+ * deletes the upload on the server too.
+ *
+ * Uploads still running count against `max`, so five picks in quick succession cannot
+ * overshoot it; they are not in `value` until they land, so a send that reads `value`
+ * sends only what has arrived — hold Send back while {@link onUploadingChange} says
+ * an upload is running. Several files upload side by side and join in the order they
+ * finish. The File modes are unchanged.
+ */
+export interface FeedbackAttachmentFieldRefsProps extends FeedbackAttachmentFieldBaseProps {
+    refs: true;
+    multiple?: never;
+    value: FeedbackAttachmentRef[];
+    onChange: (refs: FeedbackAttachmentRef[]) => void;
+    /** Upload one file; resolve to its ref, or reject to refuse it. Called once per
+     *  accepted file, the moment it is chosen. */
+    onUpload: (file: File) => Promise<FeedbackAttachmentRef>;
+    /** A chip was removed — after `onChange` — with its ref's key. */
+    onRemove?: (key: string) => void;
+    /** Whether any upload is running: `true` when the first starts, `false` when the
+     *  last settles — for the host's Send, which should wait. */
+    onUploadingChange?: (uploading: boolean) => void;
+    /** How many refs `value` may hold, uploads in flight included. Default
+     *  {@link DEFAULT_MAX_ATTACHMENTS} (5). */
+    max?: number;
+    /** Per file. `"upload"` carries what `onUpload` rejected with as `error` (`undefined`
+     *  for the other kinds). `info` (0.23.0) comes third so a 0.22 handler's `error` is
+     *  still the second argument — see {@link FeedbackAttachmentErrorInfo}. */
+    onError?: (kind: FeedbackAttachmentRefsError, error: unknown, info: FeedbackAttachmentErrorInfo) => void;
+    /**
+     * This field COMMITS (0.23.0): each file is uploaded the moment it is chosen, and a
+     * remove may delete the upload (`onRemove`) — a save, unlike the File modes, which
+     * only stage a file for a form sent later (and so stay open under a lock, like every
+     * field). Under a locked {@link WriteLockProvider} it takes the `disabledReason` path
+     * with the lock's reason, which wins over one of its own. No provider, or an unlocked
+     * one: no effect.
+     */
+    commit?: CommitScope;
+    /**
+     * Why no file can be added or removed — the write lock's sentence, a quota, a thread
+     * closed to replies. Unlike `disabled`, it SAYS so, the kit's commit-control way: the
+     * buttons (add, capture, every chip's remove) stay focusable, `aria-disabled`, with
+     * the reason in the kit Tooltip and their description; no pick, paste or remove gets
+     * through; and the reason stands where the paste hint was, for a phone that never
+     * hovers. The chips stay readable.
+     */
+    disabledReason?: ReactNode;
+    screenshot?: never;
+    onScreenshotChange?: never;
+}
+export type FeedbackAttachmentFieldProps = FeedbackAttachmentFieldSingleProps | FeedbackAttachmentFieldMultipleProps | FeedbackAttachmentFieldRefsProps;
+/**
+ * Picking one picture: the file dialog, a capture of the app view, or a paste.
+ * With `multiple`, picking several (see {@link FeedbackAttachmentFieldMultipleProps}).
+ *
+ * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can
+ * have it too (Steering Design feedback #128). A report is a conversation — it
+ * is filed, it is answered, and the reporter sends it back saying that is not
+ * what they meant — and the screenshot showing what they mean is taken at
+ * whichever of those points they looked. Only the first of them had a way to
+ * attach one, so everything after it had to be described in words.
+ *
+ * **Three ways in, and they are three because no one of them covers the others.**
+ * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the
+ * *whole* app view; and the clipboard is where a region snip already is on every
+ * platform (Steering Design feedback #39). Somebody who wanted to show one panel
+ * had to save a crop and then find it again.
+ *
+ * `documentPaste` and `pasteFrom` decide where the paste is listened for, and
+ * it is a real choice rather than a flag with a default. A modal traps focus,
+ * so while it is up every paste in the page is meant for it — including one
+ * made with nothing in particular focused, which never reaches a React
+ * `onPaste` on a child: that is `documentPaste`. An editor **inline on a
+ * page** is not that: the page around it has its own fields, so it listens
+ * within its own subtree and a paste elsewhere stays where it was aimed. But
+ * "its own subtree" has to include the text box the paste is actually made in,
+ * and that box is this field's *sibling*, not its child — a paste in it bubbles
+ * to their common parent and never through here. `pasteFrom` is that parent
+ * (Steering Design feedback #140): the element whose subtree is listened to,
+ * handed in by whoever renders both the box and this field side by side.
+ */
+export declare function FeedbackAttachmentField(props: FeedbackAttachmentFieldProps): import("react").JSX.Element;
+/** What a pasted image is called once it is an attachment.
+ *
+ *  The extension is read off the mime type rather than assumed to be `.png`:
+ *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not
+ *  a PNG is one the receiving end opens wrong. */
+export declare function pastedName(type: string): string;

package/dist/feedback/feedback-attachment.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+import { hasContent } from "../lib/presence.js";
 import {
   useEffect,
   useLayoutEffect,
@@ -8,25 +9,14 @@ import {
   useState
 } from "react";
 import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
-import { Button, IconButton, Spinner } from "../components/ui.js";
+import { Button } from "../components/button.js";
+import { IconButton } from "../components/icon-button.js";
+import { Spinner } from "../components/spinner.js";
 import { DEFAULT_FILE_PICKER_LABELS, formatAccept } from "../components/file-button.js";
 import { useCommitReason } from "../components/write-lock.js";
 import { useKitFileLabels, useKitLabels } 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;
-const DEFAULT_MAX_ATTACHMENTS = 5;
-const DEFAULT_FEEDBACK_ATTACHMENT_LABELS = {
-  attachmentAdd: "Add attachment",
-  attachmentCapture: "Capture screenshot",
-  attachmentPaste: "\u2026or paste a screenshot straight from the clipboard, so you can show one corner rather than the whole page.",
-  attachmentRemove: "Remove attachment",
-  attachmentList: "Attachments",
-  attachmentScreenshot: "Screenshot",
-  attachmentRemoveFile: (name) => `Remove ${name}`,
-  attachmentLimit: (max) => max === 1 ? "Up to 1 attachment \u2014 remove it to add another." : `Up to ${max} attachments \u2014 remove one to add another.`,
-  attachmentUploading: "Uploading\u2026",
-  attachmentUploadFailed: (name) => `\u201C${name}\u201D could not be uploaded`
-};
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "./feedback-attachment-labels.js";
+import { DEFAULT_ATTACHMENT_ACCEPT, DEFAULT_MAX_ATTACHMENT_BYTES, DEFAULT_MAX_ATTACHMENTS } from "./feedback-record.js";
 const FIELD_ROOT = "relative min-w-0 max-w-full";
 const buttonIcon = (size) => size === "sm" ? "size-3.5" : "size-4";
 function FeedbackAttachmentField(props) {
@@ -91,16 +81,16 @@ function SingleField({
             {
               src: preview,
               alt: value.name,
-              className: "h-20 w-20 rounded border border-[var(--border)] object-cover"
+              className: "h-20 w-20 rounded border border-subtle 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-[var(--border)] text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx(FileText, { className: "size-8" }) })
+            /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded border border-subtle text-placeholder", children: /* @__PURE__ */ jsx(FileText, { className: "size-8" }) })
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate-until-large 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("div", { className: "truncate-until-large text-sm text-secondary", children: value.name }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: fileText.size(value.size) })
           ] }),
           /* @__PURE__ */ jsx(RemoveButton, { label: text.attachmentRemove, onClick: () => onChange(null), disabled })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
@@ -132,7 +122,7 @@ function SingleField({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: text.attachmentPaste })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: text.attachmentPaste })
         ] }),
         /* @__PURE__ */ jsx(
           "input",
@@ -141,6 +131,8 @@ function SingleField({
             type: "file",
             accept: accept.join(","),
             className: "sr-only",
+            tabIndex: -1,
+            "aria-hidden": true,
             disabled,
             onChange: (e) => {
               pick(e.target.files?.[0]);
@@ -247,12 +239,12 @@ function MultipleField({
     /* @__PURE__ */ jsx("ul", { "aria-label": text.attachmentList, className: "flex flex-col gap-2", children: chips.map((chip, index) => /* @__PURE__ */ jsxs(
       "li",
       {
-        className: "flex min-w-0 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-1",
+        className: "flex min-w-0 items-center gap-2 rounded-md border border-subtle bg-surface p-1",
         children: [
           /* @__PURE__ */ jsx(ChipPreview, { file: chip.file, screenshot: chip.screenshot }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-[var(--text-secondary)]", children: chip.name }),
-            /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-[var(--text-muted)]", children: chip.screenshot ? `${chip.file.name} \xB7 ${fileText.size(chip.file.size)}` : fileText.size(chip.file.size) })
+            /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-secondary", children: chip.name }),
+            /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-muted", children: chip.screenshot ? `${chip.file.name} \xB7 ${fileText.size(chip.file.size)}` : fileText.size(chip.file.size) })
           ] }),
           /* @__PURE__ */ jsx(
             RemoveButton,
@@ -299,7 +291,7 @@ function MultipleField({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -350,7 +342,7 @@ function RefsField({
   const uploadingLabel = text.attachmentUploading ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploading;
   const errorInfo = useErrorInfo(accept, maxBytes, max, text);
   const disabledReason = useCommitReason(commits, ownDisabledReason);
-  const locked = hasReason(disabledReason);
+  const locked = hasContent(disabledReason);
   const reason = locked ? disabledReason : void 0;
   const inert = disabled || locked;
   const latest = useRef(value);
@@ -449,12 +441,12 @@ function RefsField({
       value.map((ref, index) => /* @__PURE__ */ jsxs(
         "li",
         {
-          className: "flex min-w-0 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-subtle bg-surface p-1",
           children: [
             /* @__PURE__ */ jsx(RefGlyph, { type: ref.type }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-[var(--text-secondary)]", children: ref.name }),
-              ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-[var(--text-muted)]", children: fileText.size(ref.size) })
+              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-secondary", children: ref.name }),
+              ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-muted", children: fileText.size(ref.size) })
             ] }),
             /* @__PURE__ */ jsx(
               RemoveButton,
@@ -474,12 +466,12 @@ function RefsField({
         {
           "aria-busy": "true",
           "data-attachment-uploading": "",
-          className: "flex min-w-0 items-center gap-2 rounded-md border border-dashed border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-dashed border-subtle bg-surface p-1",
           children: [
-            /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }) }),
+            /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-subtle bg-surface-2 text-placeholder", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }) }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-[var(--text-secondary)]", children: upload.file.name }),
-              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-[var(--text-muted)]", children: uploadingLabel })
+              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-sm text-secondary", children: upload.file.name }),
+              /* @__PURE__ */ jsx("div", { className: "truncate-until-large text-xs text-muted", children: uploadingLabel })
             ] })
           ]
         },
@@ -521,8 +513,8 @@ function RefsField({
     locked ? (
       // Where the paste hint was: a phone never hovers, so the Tooltip alone would
       // leave a touch user with buttons that do nothing and no word why.
-      /* @__PURE__ */ jsx("div", { "data-attachment-reason": "", className: "text-xs text-[var(--text-muted)]", children: disabledReason })
-    ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+      /* @__PURE__ */ jsx("div", { "data-attachment-reason": "", className: "text-xs text-muted", children: disabledReason })
+    ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -543,11 +535,11 @@ function RefsField({
   ] });
 }
 function RefGlyph({ type }) {
-  return /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: type?.startsWith("image/") ? /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": true, className: "size-6" }) : /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6" }) });
+  return /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-subtle bg-surface-2 text-placeholder", children: type?.startsWith("image/") ? /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": true, className: "size-6" }) : /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6" }) });
 }
 function Heading({ text, className }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", className), children: text });
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-xs font-medium uppercase tracking-wide text-muted", className), children: text });
 }
 function CaptureButton({
   capture,
@@ -606,9 +598,6 @@ function RemoveButton({
     }
   );
 }
-function hasReason(reason) {
-  return reason !== void 0 && reason !== null && reason !== false && reason !== "";
-}
 function useErrorInfo(accept, maxBytes, max, text) {
   const picker = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS);
   const fileText = useKitFileLabels();
@@ -648,10 +637,10 @@ function ChipPreview({ file, screenshot }) {
     setPreviewFor({ file, url: next });
     return () => URL.revokeObjectURL(next);
   }, [file, isImage]);
-  return /* @__PURE__ */ jsxs("span", { className: "relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded border border-subtle bg-surface-2 text-placeholder", children: [
     isImage && url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6" }),
     screenshot && // Marks the slot apart from the photos: it is why the capture button is gone.
-    /* @__PURE__ */ jsx("span", { className: "absolute bottom-0.5 end-0.5 rounded-sm bg-[var(--bg-surface)] p-0.5 text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(Camera, { "aria-hidden": true, className: "size-3" }) })
+    /* @__PURE__ */ jsx("span", { className: "absolute bottom-0.5 end-0.5 rounded-sm bg-surface p-0.5 text-secondary", children: /* @__PURE__ */ jsx(Camera, { "aria-hidden": true, className: "size-3" }) })
   ] });
 }
 const fileKeys = /* @__PURE__ */ new WeakMap();