@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -1,100 +1,314 @@
-import 'react';
-import '../components/floating-panel.js';
-import '../data-table-labels-BJ5JE_X2.js';
-export { l as DEFAULT_FEEDBACK_PAGE_LABELS, O as FeedbackAwaitingToggle, P as FeedbackAwaitingToggleProps, U as FeedbackColumnsOptions, af as FeedbackEmptyState, ag as FeedbackEmptyStateProps, al as FeedbackMobileCard, am as FeedbackMobileCardProps, aq as FeedbackPageLabels, at as FeedbackRenderDate, aI as FeedbackSubject, aJ as FeedbackSubjectProps, aN as FeedbackTableRow, aX as UseFeedbackColumnsOptions, b1 as feedbackColumns, b3 as feedbackEnvironment, b4 as feedbackMobileGroupBy, b9 as feedbackSubmitter, ba as feedbackSubmitterEmail, bb as isFeedbackAwaiting, bl as useFeedbackColumns, bn as useFeedbackPageLabels, bo as useFeedbackRenderDate } 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 '../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 '../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 LabelOverride } from "../i18n/kit-labels.js";
+import type { FloatingCorner } from "../components/floating-panel.js";
+import type { DataTableColumn } from "../components/data-table.js";
+import { type FeedbackStatus } from "./feedback-inbox.js";
+import { type FeedbackCategoryLabels, type FeedbackStatusLabels } from "./feedback-labels.js";
+import { type FeedbackContext, type FeedbackRecord } from "./feedback-record.js";
+import type { FeedbackStatusChange } from "./feedback-status-undo.js";
+import type { CommitScope } from "../components/write-lock.js";
+import { DEFAULT_FEEDBACK_PAGE_LABELS } from "./feedback-table-labels.js";
+/**
+ * The two feedback pages' TABLE — `/feedback` (the admin inbox) and `/my-feedback` (the
+ * user's own) — as the kit's parts: §4.3 of the feedback contract
+ * (docs/feedback-harmonization.md), lifted from keksdose
+ * `frontend/src/features/feedback/feedback-page.tsx` (columns :711–963, the phone card
+ * :1038–1065, the awaiting toggle :689–709 and :1086–1101).
+ *
+ * Until 0.27 each app wrote this table itself, and the three had drifted exactly where a
+ * table drifts: kastlan's showed five statuses and no environment, Kurvenschmiede's one
+ * page served both audiences, and keksdose's — the canon, argued over a year of feedback
+ * items — had a latent bug of its own: its subject cell carries the environment and
+ * rework chips "so a second attempt is marked on every surface at once" (:760), but the
+ * phone card is a `mobileCard`, and `DataTable` never renders the `mobilePrimary` cell
+ * when `mobileCard` is set (data-table-mobile.tsx, `cardInner`). Its phone cards showed neither
+ * chip. {@link FeedbackMobileCard} draws both itself, from the same
+ * {@link FeedbackSubject} the column uses, so the two surfaces cannot part again.
+ *
+ * What stays the app's: the rows (its API client), who is an admin, the routes and the
+ * `/feedback` → `/my-feedback` redirect, the `?row=` deep link and the row detail. What
+ * is here: the nine columns ({@link feedbackColumns} / {@link useFeedbackColumns}), the
+ * phone card and its day headers ({@link FeedbackMobileCard},
+ * {@link feedbackMobileGroupBy}), the phone's "Only what is waiting for you" toggle
+ * ({@link FeedbackAwaitingToggle}), the empty state ({@link FeedbackEmptyState}) and the
+ * `feedbackPage` words. The swipes are `feedbackSwipePlan` (feedback-swipe.tsx), passed
+ * by the app because whether the page may write is the app's call.
+ */
+/**
+ * `feedbackPage` — the words of the two feedback pages (§4.3). The English is keksdose's
+ * `en.json` (`feedback.*`, `common.none`); the de-CH canon is noted on each key (keksdose
+ * `de-CH.json`, ss never ß).
+ */
+export interface FeedbackPageLabels {
+    /** The admin inbox's page title, `/feedback`. de-CH: "Feedback" */
+    title: string;
+    /** The user's own list, `/my-feedback`. de-CH: "Mein Feedback" */
+    myTitle: string;
+    /** Column 1, the id. de-CH: "#" */
+    columnId: string;
+    /** Column 2, when it was filed. de-CH: "Datum" */
+    columnDate: string;
+    /** Column 3. de-CH: "Kategorie" */
+    columnCategory: string;
+    /** Column 4, the title with its chips. de-CH: "Betreff" */
+    columnSubject: string;
+    /** Column 5, who filed it. de-CH: "Nutzer" */
+    columnUser: string;
+    /** Column 6. de-CH: "E-Mail" */
+    columnEmail: string;
+    /** Column 7, the page it was filed from. de-CH: "URL" */
+    columnUrl: string;
+    /** Column 8. de-CH: "Status" */
+    columnStatus: string;
+    /** Column 9, when it was settled. de-CH: "Erledigt am" */
+    columnResolved: string;
+    /** What the URL cell's link does, said before the path to a screen reader.
+     *  de-CH: "Seite öffnen" */
+    openPage: string;
+    /** The table with nothing to show, on both pages (§7.13) — keksdose's `common.none`.
+     *  de-CH: "Keine" */
+    empty: string;
+    /** The submitter of a report whose account was erased (`user_id: null`, keksdose live
+     *  #275). de-CH: "<gelöschter Nutzer>" */
+    deletedUser: string;
+    /** The submitter when neither a name nor an email is known — `id` is `user_id`.
+     *  de-CH: "Nutzer #{{id}}" */
+    userFallback: (id: number) => string;
+    /** The chip for a report filed from a copy of the app that is not production —
+     *  `environment` is `context.environment` as filed ("dev", "local", or the app's own
+     *  word). Upper-cased like the top bar's environment badge, so the marker the tester saw
+     *  is the marker triage sees. Guarded: a context is untyped JSON, so a value that is no
+     *  string (an app calling it with `context.environment` as stored) is printed, never
+     *  thrown on. de-CH: the same. */
+    environment: (environment: string) => string;
+    /** The chip for a report sent back for rework — `count` ≥ 1 is how many times
+     *  (`reworkCount`, keksdose live #331). de-CH: "Nacharbeit" / "Nacharbeit ×{{count}}" */
+    reworkChip: (count: number) => string;
+    /** The phone toggle narrowing the inbox to IN_EVALUATION + NEEDS_LIVE_TEST.
+     *  de-CH: "Nur was auf Sie wartet" */
+    awaitingFilter: string;
+    /** The name of the phone's floating group that holds it. de-CH: "Feedback-Aktionen" */
+    phoneActions: string;
+}
+export { DEFAULT_FEEDBACK_PAGE_LABELS };
+/** `feedbackPage` resolved: English, then `<UiKitProvider labels>`, then `labels`. The
+ *  page's title comes from here too: `mine ? labels.myTitle : labels.title`. */
+export declare function useFeedbackPageLabels(labels?: LabelOverride<FeedbackPageLabels>): FeedbackPageLabels;
+/** What the table reads off a report — {@link FeedbackRecord}'s fields, so an app's own
+ *  row type with more of them passes as it is. */
+export type FeedbackTableRow = Pick<FeedbackRecord, "id" | "user_id" | "user_email" | "title" | "body" | "category" | "status" | "context" | "resolved_at" | "created_at">;
+/**
+ * The environment a report was filed from when it is NOT production, as filed — or
+ * `null` (keksdose `environmentLabel`, :142). Production is silent, as the top bar's
+ * badge is: the marker earns attention by being rare. A missing value is production too —
+ * every row filed before a test copy existed, and crash rows filed before the crash
+ * payload carried `environment` (§3.2, §3.6). An unknown value is shown rather than swallowed: an environment
+ * nobody recognises is exactly when triage needs to see one.
+ */
+export declare function feedbackEnvironment(context: FeedbackContext | null | undefined): string | null;
+/**
+ * Who filed a report, as one string (keksdose `submitterLabel`, :163): the display name,
+ * else the email, else `userFallback(user_id)`. An erased account (`user_id: null`) is
+ * `deletedUser` FIRST, ahead of the context: the server scrubs the name with the account,
+ * but a row that somehow kept one must still not go on naming somebody who asked to be
+ * forgotten. The joined `user_email` (admin list) is preferred to the context snapshot.
+ */
+export declare function feedbackSubmitter(row: Pick<FeedbackRecord, "user_id" | "user_email" | "context">, labels: Pick<FeedbackPageLabels, "deletedUser" | "userFallback">): string;
+/**
+ * The submitter's email (keksdose `submitterEmail`, :175): the joined `user_email` —
+ * authoritative, the display name is self-chosen (feedback #108) — else the context
+ * snapshot, which is what `/my-feedback` has (`GET /feedback/my` sends no join). `""`
+ * for an erased account, for the reason {@link feedbackSubmitter} gives.
+ */
+export declare function feedbackSubmitterEmail(row: Pick<FeedbackRecord, "user_id" | "user_email" | "context">): string;
+/** Whether a status is one the phone's awaiting toggle keeps — `FEEDBACK_AWAITING_STATUSES`,
+ *  the two that wait on the person triaging. `rows.filter((r) => isFeedbackAwaiting(r.status))`. */
+export declare function isFeedbackAwaiting(status: FeedbackStatus): boolean;
+/**
+ * How the pages write a date: an ISO timestamp in, one string out. keksdose passes its
+ * `useDateCell()` (the app's date-format preference, weekday and all — dev#546), which
+ * fits as it is.
+ *
+ * ONE function for the date column, the resolved column, the phone card and the phone's
+ * day headers, so the four cannot disagree (keksdose dev#546 round 3: the header is a
+ * string and must say what the card says).
+ */
+export type FeedbackRenderDate = (iso: string) => string;
+/**
+ * `renderDate` when the app gave one, else the kit's: the `<UiKitProvider formatDate>`
+ * when the app set one (called with the LOCAL calendar day and `weekday: true`, as
+ * `DateMark` calls it), else `Intl` in the provider's locale with the weekday. An
+ * unparseable value is passed through rather than hidden.
+ */
+export declare function useFeedbackRenderDate(renderDate?: FeedbackRenderDate, locale?: string): FeedbackRenderDate;
+export interface FeedbackSubjectProps {
+    row: Pick<FeedbackRecord, "title" | "body" | "context">;
+    /**
+     * `false` (default): one line — the title truncates and the chips stay whole, as a
+     * table cell wants. `true`: the title wraps and the chips flow after its last word, as
+     * the phone card wants (a phone shows the whole title or nothing useful).
+     */
+    wrap?: boolean;
+    /** Over the `feedbackPage` namespace. */
+    labels?: LabelOverride<FeedbackPageLabels>;
+    className?: string;
+}
+/**
+ * A report's title with its two chips (§4.3, column 4): the environment when it is not
+ * production (keksdose's amber outline, the top bar's environment badge — the marker the
+ * tester saw is the marker triage sees) and **Rework** / **Rework ×n** when the author has
+ * sent it back (keksdose live #331: *"have a new category for items in rework"*, as a fact
+ * derived from the body rather than a seventh status).
+ *
+ * No tooltip on either chip (keksdose dev#523): each already says what it means.
+ */
+export declare function FeedbackSubject({ row, wrap, labels: labelsProp, className }: FeedbackSubjectProps): import("react").JSX.Element;
+/** What {@link feedbackColumns} takes — every word already resolved (see
+ *  {@link useFeedbackColumns}, which resolves them from the provider). */
+export interface FeedbackColumnsOptions {
+    /** `/my-feedback`. The same nine columns (one page component, §4.3), but the status
+     *  cell is read-only there whatever `canEdit` says — "no status or outcome editing
+     *  there (also for an admin)". */
+    mine?: boolean;
+    /** The admin on `/feedback` — the status cell offers its steps. Otherwise it shows them
+     *  read-only. */
+    canEdit: boolean;
+    /** The undoable status change, `useFeedbackStatusUndo(update.mutate)` (§4.5) — the
+     *  same one the row detail and the swipes use. */
+    onStatus: FeedbackStatusChange;
+    /** See {@link FeedbackRenderDate}. */
+    renderDate: FeedbackRenderDate;
+    /** The status buttons SAVE when pressed: pass `true` to put them under the page's
+     *  `WriteLockProvider` (FeedbackStatusTransitions' `commit`). Off by default — a
+     *  feedback inbox is rarely what an app's lock is about. */
+    commit?: CommitScope;
+    labels: FeedbackPageLabels;
+    statusLabels: FeedbackStatusLabels;
+    categoryLabels: FeedbackCategoryLabels;
+}
+/**
+ * The nine columns of §4.3, in the contract's order, for `DataTable` — keksdose's
+ * (:711–963) with the contract's changes:
+ *
+ * | # | key | cell | filter | phone |
+ * |---|---|---|---|---|
+ * | 1 | `id` | id, mono | number | hidden |
+ * | 2 | `date` | `created_at`, weekday ({@link FeedbackRenderDate}) | date | |
+ * | 3 | `category` | `FeedbackCategoryBadge`, sorted CRASH first | select, all five | |
+ * | 4 | `title` | {@link FeedbackSubject} | text: title + environment | card heading |
+ * | 5 | `user` | {@link feedbackSubmitter} | text: name + email, or "deleted user" | |
+ * | 6 | `email` | {@link feedbackSubmitterEmail} | text | hidden |
+ * | 7 | `url` | the page, a link (`noRowLink`) | text: path | hidden |
+ * | 8 | `status` | `FeedbackStatusTransitions variant="icon"`, `visibleFeedbackStatuses` | select, chain order | |
+ * | 9 | `resolved` | `resolved_at` | date | hidden |
+ *
+ * - Both select filters list the WHOLE vocabulary in its own order, translated —
+ *   without `options` the popover lists the bare enum values found in the rows
+ *   (keksdose feedback #160), and kastlan's first CRASH row would otherwise appear in a
+ *   filter that never offered it.
+ * - The status column owns the status filter, and only it (keksdose live #330's revert:
+ *   the phone's filter sheet already exposes every column filter).
+ * - `/my-feedback` shows the same nine: the Email cell's context fallback exists for it
+ *   (the admin list's join is absent there, §3.1), and its phone card drops the submitter
+ *   instead ({@link FeedbackMobileCardProps.showSubmitter}).
+ *
+ * Pure: hand it resolved words, or use {@link useFeedbackColumns}. Keys are stable, so
+ * an app may drop or add a column (`columns.filter((c) => c.key !== "email")`).
+ */
+export declare function feedbackColumns<T extends FeedbackTableRow>({ mine, canEdit, onStatus, renderDate, commit, labels, statusLabels, categoryLabels, }: FeedbackColumnsOptions): DataTableColumn<T>[];
+/** What {@link useFeedbackColumns} takes: {@link FeedbackColumnsOptions} with the words
+ *  read from the provider, and `renderDate` optional. */
+export interface UseFeedbackColumnsOptions extends Omit<FeedbackColumnsOptions, "renderDate" | "labels" | "statusLabels" | "categoryLabels"> {
+    /** Default: the kit's date with the weekday ({@link useFeedbackRenderDate}). */
+    renderDate?: FeedbackRenderDate;
+    /** Over the `feedbackPage` namespace. Keep it stable (module scope or memoised): it is
+     *  a dependency of the memo. */
+    labels?: LabelOverride<FeedbackPageLabels>;
+}
+/**
+ * {@link feedbackColumns} with the `feedbackPage`, `feedbackStatus` and
+ * `feedbackCategory` words from the provider, memoised on what it reads — pass
+ * `update.mutate` through `useFeedbackStatusUndo` (stable) rather than a fresh function
+ * per render, or every row's columns are rebuilt on each render (keksdose :667).
+ */
+export declare function useFeedbackColumns<T extends FeedbackTableRow>({ mine, canEdit, onStatus, renderDate: renderDateProp, commit, labels: labelsProp, }: UseFeedbackColumnsOptions): DataTableColumn<T>[];
+/**
+ * The phone list's day headers (keksdose feedback #325: the list "grouped by date, like
+ * the transactions list"): `DataTable mobileGroupBy={feedbackMobileGroupBy(renderDate)}`.
+ *
+ * The key IS the header — the same string the card's date says. DataTable groups runs of
+ * equal keys, so the rows must come newest first, as `GET /feedback` and
+ * `GET /feedback/my` send them (§3.3).
+ */
+export declare function feedbackMobileGroupBy(renderDate: FeedbackRenderDate): (row: Pick<FeedbackRecord, "created_at">) => string;
+export interface FeedbackMobileCardProps {
+    row: FeedbackTableRow;
+    /** Add the submitter after the date — the admin inbox (`canEdit`). On `/my-feedback`
+     *  every row is the viewer's own and the name would repeat down the list. */
+    showSubmitter?: boolean;
+    /** See {@link FeedbackRenderDate}; the same function as the columns' and the day
+     *  headers'. Default: the kit's ({@link useFeedbackRenderDate}). */
+    renderDate?: FeedbackRenderDate;
+    /** Over the `feedbackPage` namespace. */
+    labels?: LabelOverride<FeedbackPageLabels>;
+}
+/**
+ * One report as a phone card (§4.3; keksdose :1042, feedback #325 rework: *"compact card
+ * instead of a wasteful label/value row per field"*): the title with its environment and
+ * rework chips and the status badge on one line, then the compact category badge, the
+ * date and (admin) the submitter beneath.
+ *
+ * `DataTable mobileCard={(row) => <FeedbackMobileCard row={row} … />}`. It draws the
+ * chips itself: with a `mobileCard`, DataTable never renders the `mobilePrimary` cell,
+ * which is how keksdose's cards lost them.
+ */
+export declare function FeedbackMobileCard({ row, showSubmitter, renderDate: renderDateProp, labels: labelsProp }: FeedbackMobileCardProps): import("react").JSX.Element;
+export interface FeedbackAwaitingToggleProps {
+    /** Narrowed to what waits on the triager. Page state, not the URL (keksdose :699): a
+     *  thumb gesture on one screen, not a view worth linking to. */
+    pressed: boolean;
+    onPressedChange: (pressed: boolean) => void;
+    /** Further `FloatingAction`s, after the toggle — the group is what makes them free. */
+    children?: ReactNode;
+    /** Default `bottom-end`, the register's corner. */
+    corner?: FloatingCorner;
+    /** Over the group's default distance from the bottom. */
+    offset?: string;
+    /** On the group. It is `md:hidden` already: the desktop has the status column's
+     *  filter, the same question asked where there is room for it. */
+    className?: string;
+    /** Over the `feedbackPage` namespace. */
+    labels?: LabelOverride<FeedbackPageLabels>;
+}
+/**
+ * The phone inbox's one filter button — **"Only what is waiting for you"** (§4.3;
+ * keksdose live #330 rework: *"a button that toggles the evaluation items (in evaluation,
+ * test when live) as toggle button similar to the show/hide upcoming/scheduled for the tx
+ * page"*).
+ *
+ * It narrows TO `FEEDBACK_AWAITING_STATUSES` rather than hiding them: after a loop run
+ * those ARE the queue — the rows handed back for a verdict — and everything else is
+ * history. A `FloatingActionGroup` with one member anyway, in the register's corner and
+ * shape (keksdose feedback #58), so a second action costs nothing; the glyph is
+ * IN_EVALUATION's own, so the button reads in the vocabulary of the badges it filters on.
+ *
+ * Admin inbox only: on `/my-feedback` the author is not waiting on their own verdict.
+ * The filtering is the page's — `rows.filter((r) => isFeedbackAwaiting(r.status))` —
+ * so the table's own filters, sort and URL stay untouched.
+ */
+export declare function FeedbackAwaitingToggle({ pressed, onPressedChange, children, corner, offset, className, labels: labelsProp, }: FeedbackAwaitingToggleProps): import("react").JSX.Element;
+export interface FeedbackEmptyStateProps {
+    /** Over the `feedbackPage` namespace. */
+    labels?: LabelOverride<FeedbackPageLabels>;
+}
+/**
+ * The table with nothing to show (§7.13): the one word **None** / **Keine**, on both
+ * pages — keksdose's `empty={t("common.none")}` (`feedback-page.tsx:982`). No hint
+ * beneath it: where reports are sent from is the feedback menu's business, and the inbox
+ * needs no sentence to say it is empty.
+ *
+ * For `DataTable empty`, which sits in a centred, muted cell — so no box of its own.
+ * keksdose passes it unconditionally, so a filter (or the awaiting toggle) that leaves
+ * nothing says "None" too: `empty={<FeedbackEmptyState />}`.
+ */
+export declare function FeedbackEmptyState({ labels: labelsProp }: FeedbackEmptyStateProps): import("react").JSX.Element;

package/dist/feedback/feedback-table.js

@@ -25,27 +25,7 @@ import {
 } from "./feedback-labels.js";
 import { FEEDBACK_AWAITING_STATUSES, reworkCount } from "./feedback-record.js";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail.js";
-const DEFAULT_FEEDBACK_PAGE_LABELS = {
-  title: "Feedback",
-  myTitle: "My feedback",
-  columnId: "#",
-  columnDate: "Date",
-  columnCategory: "Category",
-  columnSubject: "Subject",
-  columnUser: "User",
-  columnEmail: "Email",
-  columnUrl: "URL",
-  columnStatus: "Status",
-  columnResolved: "Resolved",
-  openPage: "Open page",
-  empty: "None",
-  deletedUser: "<deleted user>",
-  userFallback: (id) => `user #${id}`,
-  environment: (environment) => String(environment ?? "").toUpperCase(),
-  reworkChip: (count) => count === 1 ? "Rework" : `Rework \xD7${count}`,
-  awaitingFilter: "Only what is waiting for you",
-  phoneActions: "Feedback actions"
-};
+import { DEFAULT_FEEDBACK_PAGE_LABELS } from "./feedback-table-labels.js";
 function useFeedbackPageLabels(labels) {
   return useKitLabels("feedbackPage", DEFAULT_FEEDBACK_PAGE_LABELS, labels);
 }
@@ -87,8 +67,8 @@ function useFeedbackRenderDate(renderDate, locale) {
   }, [renderDate, fromProvider, kitLocale]);
 }
 function FeedbackDate({ value, renderDate }) {
-  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-[var(--text-placeholder)]", children: EMPTY_FORMATTED_VALUE });
-  return /* @__PURE__ */ jsx("time", { dateTime: value, className: "whitespace-nowrap tabular-nums text-[var(--text-muted)]", children: renderDate(value) });
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-placeholder", children: EMPTY_FORMATTED_VALUE });
+  return /* @__PURE__ */ jsx("time", { dateTime: value, className: "whitespace-nowrap tabular-nums text-muted", children: renderDate(value) });
 }
 function instant(value) {
   const ms = value ? Date.parse(value) : NaN;
@@ -109,8 +89,8 @@ function FeedbackSubject({ row, wrap = false, labels: labelsProp, className }) {
       chips
     ] });
   }
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex min-w-0 max-w-full items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium", children: row.title }),
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex min-w-0 max-w-full items-center gap-1.5 large:items-start", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large font-medium", children: row.title }),
     chips
   ] });
 }
@@ -118,8 +98,8 @@ function FeedbackPageLinkCell({ context, openPage }) {
   const kitLink = useKitLink();
   const href = feedbackPageHref(context);
   const path = feedbackPagePath(context);
-  if (!href || !path) return /* @__PURE__ */ jsx("span", { className: "text-[var(--text-placeholder)]", children: EMPTY_FORMATTED_VALUE });
-  const className = "inline-flex min-w-0 max-w-full items-center gap-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:underline";
+  if (!href || !path) return /* @__PURE__ */ jsx("span", { className: "text-placeholder", children: EMPTY_FORMATTED_VALUE });
+  const className = "inline-flex min-w-0 max-w-full items-center gap-1 text-secondary hover:text-primary hover:underline";
   const children = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: openPage }),
     " ",
@@ -152,7 +132,7 @@ function feedbackColumns({
     {
       key: "id",
       header: labels.columnId,
-      cell: (row) => /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-[var(--text-muted)]", children: row.id }),
+      cell: (row) => /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted", children: row.id }),
       sortBy: (row) => row.id,
       filter: { type: "number", getValue: (row) => row.id },
       mobileHidden: true
@@ -191,7 +171,7 @@ function feedbackColumns({
     {
       key: "user",
       header: labels.columnUser,
-      cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: feedbackSubmitter(row, labels) }),
+      cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-secondary", children: feedbackSubmitter(row, labels) }),
       sortBy: (row) => feedbackSubmitter(row, labels),
       // Name AND email, so either finds the person; the erased ones by the placeholder
       // (their context holds no name any more).
@@ -206,7 +186,7 @@ function feedbackColumns({
       className: "whitespace-nowrap",
       cell: (row) => {
         const email = feedbackSubmitterEmail(row);
-        return email ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: email }) : /* @__PURE__ */ jsx("span", { className: "text-[var(--text-placeholder)]", children: EMPTY_FORMATTED_VALUE });
+        return email ? /* @__PURE__ */ jsx("span", { className: "text-secondary", children: email }) : /* @__PURE__ */ jsx("span", { className: "text-placeholder", children: EMPTY_FORMATTED_VALUE });
       },
       sortBy: feedbackSubmitterEmail,
       filterBy: feedbackSubmitterEmail,
@@ -290,7 +270,7 @@ function FeedbackMobileCard({ row, showSubmitter = false, renderDate: renderDate
       /* @__PURE__ */ jsx(FeedbackSubject, { row, wrap: true, labels, className: "flex-1" }),
       /* @__PURE__ */ jsx(FeedbackStatusBadge, { status: row.status, className: "shrink-0" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted", children: [
       /* @__PURE__ */ jsx(FeedbackCategoryBadge, { category: row.category, compact: true }),
       /* @__PURE__ */ jsx(FeedbackDate, { value: row.created_at, renderDate }),
       showSubmitter && // The short id form: "#7" says enough on a card that has room for little.