@eifi1/ui-kit 0.33.1 → 0.34.0

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

@@ -1,101 +1,378 @@
-import 'react';
-export { C as ChatComposer, a as ChatComposerHandle, b as ChatComposerLabels, c as ChatComposerProps, d as ChatComposerSlotContext, g as DEFAULT_FEEDBACK_COMPOSER_LABELS, n as DEFAULT_FEEDBACK_THREAD_LABELS, V as FeedbackComposer, W as FeedbackComposerAttachment, X as FeedbackComposerHandle, Y as FeedbackComposerLabels, Z as FeedbackComposerProps, _ as FeedbackComposerSlotContext, aO as FeedbackThread, aP as FeedbackThreadAttachment, aQ as FeedbackThreadEvent, aR as FeedbackThreadItem, aS as FeedbackThreadLabels, aT as FeedbackThreadMessage, aU as FeedbackThreadProps } 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, Ref, RefObject } from "react";
+import type { CharacterCountLabels } from "../components/field-base.js";
+import type { CommitScope } from "../components/write-lock.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment.js";
+import type { FeedbackNoteAttachment } from "./feedback-inbox.js";
+import type { FeedbackAttachmentLabels } from "./feedback-dialog.js";
+import { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS } from "./feedback-thread-labels.js";
+/**
+ * The conversation under a report: who said what, when, with what attached — and the
+ * box to answer in.
+ *
+ * Both apps had written it by hand. kastlan's feedback page grew a comment list of
+ * bordered boxes with `slate-*` literals (feedback-page.tsx, "keksdose left this
+ * unbuilt"), and keksdose built the same thing a second time for support
+ * (support-thread.tsx) with sides, bubbles and a composer that clears only what it
+ * sent. This is that second one, generalised: the kit owns the look and the
+ * behaviour, the app owns the data, the upload and every word it does not share.
+ *
+ * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes
+ * against a user id: whose message sits at the END side depends on who is reading,
+ * and only the app knows that (keksdose's support thread labelled a member's question
+ * "Du" in the admin panel the first time round, by reading the wrong field).
+ *
+ * **Redaction.** A thread is somebody's words about their own data — exactly what a
+ * host's demo / screen-share mode blurs. Bodies, authors and attachments carry
+ * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless
+ * `redact={false}`.
+ *
+ * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's
+ * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir="auto"`, so a
+ * Hebrew reply in an English thread (or the reverse) lays out as its own language.
+ *
+ * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation
+ * read the chat way: status lines between the messages ("Closed automatically",
+ * "Reopened"), a day line where the date changes, clock times under it, Enter to send
+ * and several files uploaded ahead of the send. Each of those is an opt-in here
+ * (`kind: "event"`, `daySeparators`, `timeFormat="clock"`, `sendOn="enter"`,
+ * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.
+ */
+/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */
+export interface FeedbackThreadLabels {
+    /** Accessible name of the message list. */
+    thread: string;
+    empty: string;
+    loading: string;
+    /** Author line of an `own` message that has no `author` of its own. */
+    you: string;
+    /** The badge beside a `staff` author. */
+    staff: string;
+    /** Accessible name of a message's attachment list. */
+    attachments: string;
+}
+export { DEFAULT_FEEDBACK_THREAD_LABELS };
+/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'
+ *  words are `feedbackAttachment`'s, shared with the dialog and the note editor. */
+export interface FeedbackComposerLabels {
+    /** Accessible name of the text box. */
+    field: string;
+    placeholder: string;
+    send: string;
+    /** The shortcut line, given the platform's modifier ("Ctrl" or "⌘"). */
+    sendHint: (modifier: string) => string;
+    /** The shortcut line under `sendOn="enter"` (keksdose G5): Enter sends, so say how a
+     *  new line is made. */
+    sendHintEnter: string;
+}
+export { DEFAULT_FEEDBACK_COMPOSER_LABELS };
+export interface FeedbackThreadAttachment {
+    id?: string | number;
+    name: string;
+    /** Where to open it. Left out, the attachment is listed by name only. */
+    url?: string;
+    /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */
+    type?: string;
+    /** Bytes, shown beside a non-image. */
+    size?: number;
+}
+export interface FeedbackThreadMessage {
+    /** Leave out, or `"message"`. `"event"` is a {@link FeedbackThreadEvent}. */
+    kind?: "message";
+    id: string | number;
+    /** Who wrote it. Left out on an `own` message, it reads "You". */
+    author?: ReactNode;
+    /** A `Date`, an ISO string or epoch ms. */
+    createdAt: Date | string | number;
+    body: string;
+    attachments?: readonly FeedbackThreadAttachment[];
+    /** Written by whoever is reading: sits at the end side, in the brand tint. */
+    own?: boolean;
+    /** Written by the team rather than a user: gets the "Staff" badge. */
+    staff?: boolean;
+}
+/**
+ * A line in the thread that nobody wrote — "Closed automatically", "Marked as
+ * resolved", "Reopened" — drawn centred and muted with its time, no author, no side,
+ * no bubble.
+ *
+ * keksdose G4: its support chat interleaves these with the messages, and as a message
+ * they came out as a bubble from nobody at the start side, which reads as the member
+ * having said "resolved". Word it for the READER, as with `own`: the app knows whether
+ * "you reopened it" or "Anna reopened it" is true for the person looking.
+ *
+ * The text is the app's, not somebody's words about their data, so it is NOT tagged
+ * `data-private`; one that names a person can wrap the name in its own
+ * `<span data-private>` (`body` is a node for that reason).
+ */
+export interface FeedbackThreadEvent {
+    kind: "event";
+    id: string | number;
+    /** A `Date`, an ISO string or epoch ms. */
+    createdAt: Date | string | number;
+    body: ReactNode;
+}
+/** One row of a {@link FeedbackThread}: a message, or an event line between them. */
+export type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;
+export interface FeedbackThreadProps {
+    /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */
+    messages: readonly FeedbackThreadItem[];
+    loading?: boolean;
+    /** Replaces the default "No comments yet". */
+    empty?: ReactNode;
+    /**
+     * Draw one attachment yourself — for files behind auth, which a plain `<img src>`
+     * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail
+     * link for an image with a `url`, a file link otherwise.
+     */
+    renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;
+    /** Tag bodies, authors and attachments `data-private`. Default true. */
+    redact?: boolean;
+    /**
+     * How a row's time reads. `"relative"` (default): "5 minutes ago", a date past six
+     * days — right for a report's comments, read days apart. `"clock"`: the time of day
+     * in the locale ("14:05", "2:05 PM") — the chat look, keksdose G4; pair it with
+     * `daySeparators`, which say which day that clock time is on. Either way the full
+     * date and time is in the Tooltip.
+     */
+    timeFormat?: "relative" | "clock";
+    /**
+     * A centred day line before the first row and wherever the next row is on another
+     * calendar day (the device's zone): "Today", "Yesterday", else the date — keksdose
+     * G4. "Today" / "Yesterday" are `Intl.RelativeTimeFormat`'s own words in the kit
+     * locale, so there is no label to translate. Default false.
+     */
+    daySeparators?: boolean;
+    /** "Now" for the relative times and the day lines — pin it in tests and stories.
+     *  Default: the clock. */
+    now?: Date | number;
+    /** Overrides the provider's locale for the times. */
+    locale?: string;
+    labels?: LabelOverride<FeedbackThreadLabels>;
+    className?: string;
+}
+export declare function FeedbackThread({ messages, loading, empty, renderAttachment, redact, now, locale: localeProp, timeFormat, daySeparators, labels: labelsProp, className, }: FeedbackThreadProps): import("react").JSX.Element;
+/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
+ *  labels optional, since the field reads `feedbackAttachment` from the provider, and
+ *  `onError` the field's own (0.23.0): it is handed the refused file and the limit too
+ *  (`FeedbackAttachmentErrorInfo`), and a `(kind) => …` handler still fits. Since
+ *  0.24.0 also the field's `buttonVariant` / `buttonSize`, for a composer whose row
+ *  wants smaller or quieter attach buttons than the bordered `md` default. */
+export type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels" | "onError"> & {
+    labels?: LabelOverride<FeedbackAttachmentLabels>;
+    onError?: FeedbackAttachmentFieldSingleProps["onError"];
+} & Pick<FeedbackAttachmentFieldSingleProps, "buttonVariant" | "buttonSize">;
+/**
+ * What a render-prop {@link FeedbackComposerProps.attachmentSlot} is handed (0.24.0,
+ * keksdose).
+ *
+ * keksdose's support chat put `<FeedbackAttachmentField refs>` in the slot and a
+ * screenshot pasted into the reply box never reached it: the box is the field's
+ * sibling, so the paste bubbles to their common parent — the composer's root — and the
+ * field hears it only through `pasteFrom`, which needs that root. The composer kept it
+ * to itself, so keksdose wrapped the whole composer in a ref'd `<div>` of its own just
+ * to have an element to hand over.
+ */
+export interface FeedbackComposerSlotContext {
+    /**
+     * The composer's root, round the text box and this slot — the field's `pasteFrom`,
+     * as it is: `pasteFrom={slot.root}`.
+     *
+     * A ref, not the element, because `pasteFrom` is one: the field reads `.current` in
+     * an effect, and the slot renders INSIDE this root, so the two are committed together
+     * and React attaches the root before any effect of the slot's runs — the first paste
+     * after the first paint already lands. The element itself would be `null` on the
+     * first render (it does not exist yet) and could only arrive by a second render
+     * through state; the ref is the same object every render, so the field's listener is
+     * added once and never re-added.
+     *
+     * With the built-in `attachment` on as well, it listens on this root too: hand the
+     * root to one field only, or an image pasted once is attached twice.
+     */
+    root: RefObject<HTMLElement | null>;
+    /** The composer's `pending` — a send is in flight. For the field's `disabled`
+     *  (keksdose G5b): the message carries the attachments as they were at the press. */
+    pending: boolean;
+}
+export interface FeedbackComposerProps {
+    /**
+     * Send the comment. Return the promise: the box clears when it RESOLVES, and only of
+     * what was sent — text typed while it was in flight stays. A rejection keeps
+     * everything for a retry (surface the error yourself; the composer stays quiet).
+     *
+     * `attachment` is the built-in field's one picture. Files the host uploaded ahead
+     * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be
+     * `""` when `canSend` let an attachments-only message go.
+     */
+    onSend: (body: string, attachment: File | null) => void | Promise<unknown>;
+    /** The send is in flight: a spinner on the button and no second send. */
+    pending?: boolean;
+    /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).
+     *  `true` for the defaults. Left out, the composer is text only. */
+    attachment?: boolean | FeedbackComposerAttachment;
+    /**
+     * The host's own attach control, in the row with Send where the built-in field sits
+     * (after it, if both are on) — keksdose G5: its support chat uploads up to N files
+     * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.
+     * The slot is the host's picker plus the chips of what is uploaded; the upload, the
+     * refs and clearing them once `onSend` resolves stay with the host. Pair it with
+     * `canSend`.
+     *
+     * A node, or (0.24.0) a function of {@link FeedbackComposerSlotContext} that returns
+     * one — for a field that wants the composer's root as its `pasteFrom`, so a
+     * screenshot pasted into the box reaches it, and `pending` for its `disabled`:
+     *
+     * ```tsx
+     * attachmentSlot={({ root, pending }) => (
+     *   <FeedbackAttachmentField refs pasteFrom={root} disabled={pending} … />
+     * )}
+     * ```
+     *
+     * Called once per render of the composer, and not at all while `disabledReason`
+     * stands in for it.
+     */
+    attachmentSlot?: ReactNode | ((slot: FeedbackComposerSlotContext) => ReactNode);
+    /**
+     * Whether Send is enabled, over the composer's own rule (some text in the box) —
+     * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
+     * with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
+     * an upload is still running holds even a written reply back. Left out, the text
+     * decides. `pending` blocks a send either way, as does a draft past `maxLength`.
+     */
+    canSend?: boolean;
+    /**
+     * Which key sends. `"mod-enter"` (default): Ctrl/⌘+Enter, the report dialog's and
+     * note editor's shortcut, with plain Enter a new line — feedback is written in
+     * paragraphs. `"enter"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a
+     * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition
+     * (Japanese, Chinese input) is the IME's, never a send.
+     */
+    sendOn?: "mod-enter" | "enter";
+    /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
+     *  reader. */
+    disabledReason?: ReactNode;
+    /**
+     * Send COMMITS (0.33.1, kastlan's assistant): under a locked {@link WriteLockProvider}
+     * Send is disabled the `disabledReason` way — focusable, the lock's reason in its
+     * tooltip and description, as on {@link Button}'s `commit` — and neither Enter nor
+     * Ctrl/⌘+Enter sends. The box stays editable and the draft stays: nothing in it
+     * reaches the server until Send, and the lock may lift. No provider, or an unlocked
+     * one: no effect. A {@link CommitScope}: kastlan's assistant answers under the demo
+     * and not under a lapsed plan (its backend's 402), so it passes
+     * `commit={{ except: ["demo"] }}` where it read `useWriteLock` and fed `canSend` and a
+     * reason by hand. Not the prop above: that one replaces the box, this one keeps it.
+     */
+    commit?: CommitScope;
+    rows?: number;
+    /**
+     * The longest draft the box takes, in UTF-16 code units as the browser counts — the
+     * server's limit, so a reply too long for it is cut off while it is typed rather than
+     * refused by a 422 after the press (keksdose G6: its support replies are capped at
+     * 4,000 on the server, and its other text fields already count against that with
+     * Textarea's `maxLength` + `showCount` since 0.22; the reply box, a composer, could
+     * not). The box's own `maxLength`, so typing and pasting stop at it.
+     *
+     * {@link FeedbackComposerHandle.insertText} is not stopped by it — the browser limits
+     * typing, not a script — and a canned reply is not cut mid-sentence to fit. A draft
+     * past the limit therefore holds Send back (whatever `canSend` says, as `pending`
+     * does) until it is trimmed; with `showCount` the counter, red at the limit, says by
+     * how much.
+     */
+    maxLength?: number;
+    /**
+     * A live "12/4000" under the box, with `maxLength` — Textarea's `showCount`, the same
+     * counter (keksdose G6): the count is part of the box's description, read with it on
+     * focus, and a polite live region speaks only on entering the last stretch and at the
+     * limit, never per keystroke. Under `size="sm"` the hidden send hint stays the box's
+     * description too, before the count. Ignored without `maxLength`.
+     */
+    showCount?: boolean;
+    /** The counter's words — the `characterCount` namespace, as on Textarea. */
+    countLabels?: Partial<CharacterCountLabels>;
+    /**
+     * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
+     * support ticket is asked something else ("Reply to Anna…") than a member adding to
+     * their own report, and one provider-wide label cannot say both.
+     */
+    placeholder?: string;
+    /**
+     * The draft, controlled — for a host that keeps it itself (saves it per ticket,
+     * prefills a template). Left out, the composer keeps its own. Either way a send
+     * that resolves clears only what was sent: controlled, that is an
+     * `onValueChange("")` the host receives like any keystroke, and only if the draft
+     * is still the one that went out.
+     */
+    value?: string;
+    /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the
+     *  clear after a send. Required to change a controlled `value`. */
+    onValueChange?: (value: string) => void;
+    /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply
+     *  chips) or focus the box. */
+    ref?: Ref<FeedbackComposerHandle>;
+    labels?: LabelOverride<FeedbackComposerLabels>;
+    className?: string;
+    /**
+     * `"sm"` for a narrow host — keksdose's assistant launcher, a small floating panel
+     * (0.22): a small Send button, and the send hint ("Enter to send, Shift + Enter for a
+     * new line") hidden from view but kept as the box's description, so a keyboard or
+     * screen-reader user still learns the shortcut. Default `"md"`.
+     */
+    size?: "md" | "sm";
+    /**
+     * On the composer's root — the box, or the `disabledReason` line in its place —
+     * with any `data-*` attribute beside it (keksdose K17). keksdose's assistant tour
+     * points at the chat box with `[data-tour="assistant-ask"]`, and a composer that
+     * dropped every attribute it was not told about left the anchor nowhere: the
+     * assistant kept its hand-built box rather than lose the tour step.
+     */
+    id?: string;
+    /** `data-*` attributes for the root, as `id` — a tour anchor, a test id. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * What a {@link FeedbackComposer} `ref` holds.
+ *
+ * keksdose F9: the support admin answers the same five questions all day and wants
+ * chips above the box ("Thanks, fixed in the next release") that drop their text in
+ * where the caret is. A controlled `value` alone cannot do that well — the host sees
+ * the string, not the caret, so it could only append — so the composer, which owns
+ * the textarea, does the splice.
+ */
+export interface FeedbackComposerHandle {
+    /**
+     * Insert `text` at the caret, replacing any selection (the caret the box last had:
+     * a click on a chip blurs it, and the selection survives the blur), then focus the
+     * box with the caret after the inserted text so the reply can go on. Nothing is
+     * added around it — put a space or a newline in `text` if the reply needs one. A
+     * no-op while `disabledReason` replaces the box.
+     */
+    insertText: (text: string) => void;
+    focus: () => void;
+}
+/**
+ * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,
+ * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor
+ * use, so the habit carries across the feature. Plain Enter is a new line: feedback is
+ * written in paragraphs, unlike a chat — which `sendOn="enter"` is for (keksdose G5).
+ *
+ * Named for what it is since 0.22 (keksdose K17): the component was never
+ * feedback-specific — a textarea, an optional picture or a host's upload slot, Send,
+ * `sendOn="enter"` for the chat way — and keksdose's assistant and support chat are
+ * chats, not reports. `FeedbackComposer` is its old name, deprecated in 0.34.
+ */
+export declare function ChatComposer({ onSend, pending, attachment, attachmentSlot, canSend: canSendProp, sendOn, disabledReason, commit, rows, maxLength, showCount, countLabels, placeholder, value, onValueChange, ref, labels: labelsProp, className, id, size, ...rest }: FeedbackComposerProps): import("react").JSX.Element;
+/**
+ * @deprecated 0.34 — `ChatComposer`, the same function under the name that is not about
+ * feedback; removed in 0.35 (refactor audit 2026-10, API-6d). keksdose's support thread
+ * is the one app site.
+ */
+export declare const FeedbackComposer: typeof ChatComposer;
+/** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
+export type ChatComposerProps = FeedbackComposerProps;
+/** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */
+export type ChatComposerHandle = FeedbackComposerHandle;
+/** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
+ *  namespace of the provider. */
+export type ChatComposerLabels = FeedbackComposerLabels;
+/** {@link FeedbackComposerSlotContext}, for {@link ChatComposer}'s `attachmentSlot`. */
+export type ChatComposerSlotContext = FeedbackComposerSlotContext;

package/dist/feedback/feedback-thread.js

@@ -4,27 +4,20 @@ import { useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useStat
 import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { formatDate, formatRelativeTime } from "../lib/format.js";
-import { Button, EmptyState, Spinner, Textarea } from "../components/ui.js";
+import { hasContent } from "../lib/presence.js";
+import { Button } from "../components/button.js";
+import { EmptyState } from "../components/empty-state.js";
+import { Spinner } from "../components/spinner.js";
+import { Textarea } from "../components/textarea.js";
 import { Skeleton } from "../components/skeleton.js";
 import { Tooltip } from "../components/tooltip.js";
 import { useWriteLock } from "../components/write-lock.js";
 import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { FeedbackAttachmentField } from "./feedback-attachment.js";
-const DEFAULT_FEEDBACK_THREAD_LABELS = {
-  thread: "Comments",
-  empty: "No comments yet",
-  loading: "Loading comments\u2026",
-  you: "You",
-  staff: "Staff",
-  attachments: "Attachments"
-};
-const DEFAULT_FEEDBACK_COMPOSER_LABELS = {
-  field: "Write a comment",
-  placeholder: "Write a comment\u2026",
-  send: "Send",
-  sendHint: (modifier) => `${modifier} + Enter to send`,
-  sendHintEnter: "Enter to send, Shift + Enter for a new line"
-};
+import {
+  DEFAULT_FEEDBACK_COMPOSER_LABELS,
+  DEFAULT_FEEDBACK_THREAD_LABELS
+} from "./feedback-thread-labels.js";
 function FeedbackThread({
   messages,
   loading = false,
@@ -85,7 +78,7 @@ function FeedbackThread({
           "li",
           {
             "data-event": "",
-            className: "flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-[var(--text-muted)]",
+            className: "flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-muted",
             children: [
               /* @__PURE__ */ jsx("span", { children: message.body }),
               time && /* @__PURE__ */ jsx("span", { className: "text-caption", children: time })
@@ -109,12 +102,12 @@ function FeedbackThread({
             {
               className: cn(
                 "max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm",
-                message.own ? "rounded-ee-sm bg-[var(--brand-bg)]" : "rounded-es-sm bg-[var(--bg-surface-2)]"
+                message.own ? "rounded-ee-sm bg-brand-soft" : "rounded-es-sm bg-surface-2"
               ),
               children: [
-                /* @__PURE__ */ jsxs("header", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption text-[var(--text-muted)]", children: [
-                  author != null && /* @__PURE__ */ jsx("span", { "data-private": priv, className: "font-medium text-[var(--text-secondary)]", children: author }),
-                  message.staff && /* @__PURE__ */ jsx("span", { className: "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-micro font-medium uppercase tracking-wide text-[var(--text-secondary)]", children: labels.staff }),
+                /* @__PURE__ */ jsxs("header", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption text-muted", children: [
+                  author != null && /* @__PURE__ */ jsx("span", { "data-private": priv, className: "font-medium text-secondary", children: author }),
+                  message.staff && /* @__PURE__ */ jsx("span", { className: "rounded border border-subtle bg-surface px-1 text-micro font-medium uppercase tracking-wide text-secondary", children: labels.staff }),
                   time
                 ] }),
                 message.body && /* @__PURE__ */ jsx(
@@ -122,7 +115,7 @@ function FeedbackThread({
                   {
                     "data-private": priv,
                     dir: "auto",
-                    className: "whitespace-pre-wrap break-words text-start text-[var(--text-primary)]",
+                    className: "whitespace-pre-wrap break-words text-start text-primary",
                     children: message.body
                   }
                 ),
@@ -145,11 +138,11 @@ function DefaultAttachment({
   if (url && type?.startsWith("image/")) return /* @__PURE__ */ jsx(ImageThumbnail, { url, name });
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-    /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
-    attachment.size !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--text-muted)]", children: size(attachment.size) })
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: name }),
+    attachment.size !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted", children: size(attachment.size) })
   ] });
-  const chip = "inline-flex max-w-full items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)]";
-  return url ? /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(chip, "hover:bg-[var(--bg-hover)]"), children: content }) : /* @__PURE__ */ jsx("span", { className: chip, children: content });
+  const chip = "inline-flex max-w-full items-center gap-1 rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary";
+  return url ? /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: cn(chip, "hover:bg-hover"), children: content }) : /* @__PURE__ */ jsx("span", { className: chip, children: content });
 }
 function ImageThumbnail({ url, name }) {
   const [failedUrl, setFailedUrl] = useState(null);
@@ -161,9 +154,9 @@ function ImageThumbnail({ url, name }) {
       href: url,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "relative block h-20 w-20 overflow-hidden rounded border border-[var(--border)] bg-[var(--bg-surface-2)]",
+      className: "relative block h-20 w-20 overflow-hidden rounded border border-subtle bg-surface-2",
       children: [
-        /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: "absolute inset-0 m-auto size-6 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: "absolute inset-0 m-auto size-6 text-muted" }),
         !failed && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
         /* @__PURE__ */ jsx(
           "img",
@@ -216,7 +209,7 @@ function DaySeparator({ date, now, locale }) {
   const y = String(date.getFullYear()).padStart(4, "0");
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
-  return /* @__PURE__ */ jsxs("li", { "data-day-separator": "", className: "flex items-center gap-3 py-1 text-xs text-[var(--text-muted)]", children: [
+  return /* @__PURE__ */ jsxs("li", { "data-day-separator": "", className: "flex items-center gap-3 py-1 text-xs text-muted", children: [
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-[var(--border)]" }),
     /* @__PURE__ */ jsx("time", { dateTime: `${y}-${m}-${d}`, className: "font-medium", children: label }),
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-[var(--border)]" })
@@ -229,7 +222,7 @@ function toDate(value) {
 const noSubscribe = () => () => {
 };
 const isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
-function FeedbackComposer({
+function ChatComposer({
   onSend,
   pending = false,
   attachment,
@@ -297,8 +290,8 @@ function FeedbackComposer({
     () => isApple() ? "\u2318" : "Ctrl",
     () => "Ctrl"
   );
-  if (disabledReason != null && disabledReason !== false) {
-    return /* @__PURE__ */ jsx("p", { ...rootAttributes, className: cn("text-xs text-[var(--text-muted)]", className), children: disabledReason });
+  if (hasContent(disabledReason)) {
+    return /* @__PURE__ */ jsx("p", { ...rootAttributes, className: cn("text-xs text-muted", className), children: disabledReason });
   }
   const tooLong = maxLength !== void 0 && draft.length > maxLength;
   const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong && !lock.locked;
@@ -367,7 +360,7 @@ function FeedbackComposer({
           "span",
           {
             id: hintId,
-            className: size === "sm" ? "sr-only" : "text-xs text-[var(--text-placeholder)]",
+            className: size === "sm" ? "sr-only" : "text-xs text-placeholder",
             children: sendOn === "enter" ? labels.sendHintEnter : labels.sendHint(modifier)
           }
         ),
@@ -394,7 +387,7 @@ function dataAttributes(props) {
   for (const [key, value] of Object.entries(props)) if (key.startsWith("data-")) out[key] = value;
   return out;
 }
-const ChatComposer = FeedbackComposer;
+const FeedbackComposer = ChatComposer;
 export {
   ChatComposer,
   DEFAULT_FEEDBACK_COMPOSER_LABELS,