@eifi1/ui-kit 0.14.1 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/dist/components/alert-banner.js +5 -2
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/amount-input.d.ts +9 -1
- package/dist/components/amount-input.js +10 -4
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/autocomplete.js +9 -2
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/bulk-action-bar.js +6 -3
- package/dist/components/bulk-action-bar.js.map +1 -1
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/calculator.d.ts +1 -1
- package/dist/components/calendar-heatmap.js +5 -5
- package/dist/components/calendar-heatmap.js.map +1 -1
- package/dist/components/copy-button.d.ts +1 -1
- package/dist/components/data-table-cells.d.ts +1 -1
- package/dist/components/data-table-filter-popover.d.ts +1 -1
- package/dist/components/data-table-filter-popover.js +3 -3
- package/dist/components/data-table-filter-popover.js.map +1 -1
- package/dist/components/data-table-filters.d.ts +1 -1
- package/dist/components/data-table.d.ts +1 -1
- package/dist/components/data-table.js +12 -4
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/error-boundary.js +2 -1
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/field.js +4 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/file-button.d.ts +1 -1
- package/dist/components/file-dropzone.d.ts +1 -1
- package/dist/components/form-actions.d.ts +1 -1
- package/dist/components/image-grid.d.ts +8 -1
- package/dist/components/image-grid.js +16 -3
- package/dist/components/image-grid.js.map +1 -1
- package/dist/components/measured-grid.js +2 -2
- package/dist/components/measured-grid.js.map +1 -1
- package/dist/components/money-field.d.ts +92 -0
- package/dist/components/money-field.js +40 -0
- package/dist/components/money-field.js.map +1 -0
- package/dist/components/multi-select.js +3 -0
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/number-field.d.ts +13 -2
- package/dist/components/number-field.js +4 -0
- package/dist/components/number-field.js.map +1 -1
- package/dist/components/number-input.d.ts +5 -2
- package/dist/components/number-input.js +11 -3
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +1 -1
- package/dist/components/page-header.js +29 -3
- package/dist/components/page-header.js.map +1 -1
- package/dist/components/series-chart.js +37 -8
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/settings-fields.d.ts +1 -1
- package/dist/components/stat-tile.js +3 -3
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/text-link.d.ts +1 -1
- package/dist/components/text-link.js +2 -1
- package/dist/components/text-link.js.map +1 -1
- package/dist/components/time-input.d.ts +1 -1
- package/dist/components/treemap.d.ts +3 -2
- package/dist/components/treemap.js +14 -3
- package/dist/components/treemap.js.map +1 -1
- package/dist/components/ui.d.ts +1 -1
- package/dist/components/ui.js +44 -10
- package/dist/components/ui.js.map +1 -1
- package/dist/components/use-table-state.d.ts +1 -1
- package/dist/{data-table-Drun8Fk9.d.ts → data-table-CfVXtCeG.d.ts} +4 -3
- package/dist/data-table.d.ts +1 -1
- package/dist/feedback/feedback-dialog.d.ts +10 -1
- package/dist/feedback/feedback-dialog.js +13 -3
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-thread.js +31 -12
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/hooks/use-file-drop.d.ts +1 -1
- package/dist/i18n/defaults.d.ts +1 -1
- package/dist/i18n/kit-labels.d.ts +1 -1
- package/dist/i18n/locales/de-CH-informal.d.ts +1 -1
- package/dist/i18n/locales/de-CH.d.ts +1 -1
- package/dist/i18n/locales/de-informal.d.ts +1 -1
- package/dist/i18n/locales/de.d.ts +1 -1
- package/dist/i18n/locales/de.js +1 -0
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +1 -1
- package/dist/i18n/locales/es.js +1 -0
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +1 -1
- package/dist/i18n/locales/fr.js +1 -0
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +1 -1
- package/dist/i18n/locales/hu.js +1 -0
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +1 -1
- package/dist/i18n/locales/it.js +1 -0
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +1 -1
- package/dist/i18n/locales/zh.js +1 -0
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.d.ts +5 -4
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/{kit-labels-Mz8zZHIF.d.ts → kit-labels-BHfRBbHs.d.ts} +5 -1
- package/dist/lib/document-navigation.d.ts +15 -0
- package/dist/lib/document-navigation.js +13 -0
- package/dist/lib/document-navigation.js.map +1 -0
- package/dist/lib/strip-fade.d.ts +31 -0
- package/dist/lib/strip-fade.js +54 -0
- package/dist/lib/strip-fade.js.map +1 -0
- package/dist/rhf/fields.d.ts +1 -1
- package/dist/rhf/form.d.ts +1 -1
- package/dist/rhf/form.js +1 -1
- package/dist/rhf/form.js.map +1 -1
- package/dist/rhf.d.ts +1 -1
- package/dist/shell/app-shell.d.ts +11 -2
- package/dist/shell/app-shell.js +20 -4
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/top-bar-brand.d.ts +1 -1
- package/dist/shell.d.ts +1 -1
- package/dist/wizard/stepper-nav.d.ts +1 -1
- package/dist/wizard/stepper-nav.js +14 -2
- package/dist/wizard/stepper-nav.js.map +1 -1
- package/dist/wizard.d.ts +1 -1
- package/package.json +7 -4
- package/src/components/alert-banner.tsx +10 -2
- package/src/components/amount-input.tsx +18 -4
- package/src/components/autocomplete.tsx +10 -1
- package/src/components/bulk-action-bar.tsx +12 -3
- package/src/components/calendar-heatmap.tsx +10 -5
- package/src/components/data-table-filter-popover.tsx +6 -3
- package/src/components/data-table.tsx +21 -7
- package/src/components/error-boundary.tsx +2 -1
- package/src/components/field.tsx +4 -1
- package/src/components/image-grid.tsx +30 -2
- package/src/components/measured-grid.tsx +3 -2
- package/src/components/money-field.tsx +75 -0
- package/src/components/multi-select.tsx +3 -0
- package/src/components/number-field.tsx +14 -0
- package/src/components/number-input.tsx +23 -4
- package/src/components/page-header.tsx +38 -3
- package/src/components/series-chart.tsx +56 -8
- package/src/components/stat-tile.tsx +8 -3
- package/src/components/text-link.tsx +2 -1
- package/src/components/treemap.tsx +30 -5
- package/src/components/ui.tsx +91 -11
- package/src/feedback/feedback-dialog.tsx +20 -2
- package/src/feedback/feedback-thread.tsx +36 -13
- package/src/i18n/locales/de.ts +1 -0
- package/src/i18n/locales/es.ts +1 -0
- package/src/i18n/locales/fr.ts +1 -0
- package/src/i18n/locales/hu.ts +1 -0
- package/src/i18n/locales/it.ts +1 -0
- package/src/i18n/locales/zh.ts +1 -0
- package/src/index.ts +1 -0
- package/src/lib/document-navigation.ts +17 -0
- package/src/lib/strip-fade.ts +82 -0
- package/src/rhf/form.tsx +3 -1
- package/src/shell/app-shell.tsx +34 -7
- package/src/wizard/stepper-nav.tsx +23 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
2
|
import './data-table-sort.js';
|
|
3
|
-
export { z as DEFAULT_PERSIST_PREFIX, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, r as readTableUrlState, A as useTableState, w as useTableUrlState } from '../data-table-
|
|
3
|
+
export { z as DEFAULT_PERSIST_PREFIX, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, r as readTableUrlState, A as useTableState, w as useTableUrlState } from '../data-table-CfVXtCeG.js';
|
|
4
4
|
import './swipeable-row.js';
|
|
5
5
|
import './data-table-labels.js';
|
|
@@ -394,9 +394,10 @@ interface DataTableProps<T> {
|
|
|
394
394
|
*/
|
|
395
395
|
urlSync?: TableUrlSync;
|
|
396
396
|
/**
|
|
397
|
-
* When true
|
|
398
|
-
*
|
|
399
|
-
*
|
|
397
|
+
* When true, the table fills its parent's height and scrolls INTERNALLY, with the
|
|
398
|
+
* header pinned — so the page itself doesn't add a second, outer scrollbar. On a
|
|
399
|
+
* phone the card list is the scroller instead, with the filter button pinned above
|
|
400
|
+
* it; an unbounded parent simply lets either layout grow to its content. The parent must give it a bounded height (e.g. a flex
|
|
400
401
|
* column inside the viewport-locked app shell). See feedback #207.
|
|
401
402
|
*/
|
|
402
403
|
fillHeight?: boolean;
|
package/dist/data-table.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { DEFAULT_DATA_TABLE_LABELS, DataTableLabels, missingDataTableLabels, resolveDataTableLabels } from './components/data-table-labels.js';
|
|
2
2
|
export { SortCycle, SortDir, SortState, SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts } from './components/data-table-sort.js';
|
|
3
|
-
export { C as ColumnFilter, D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, e as DataTableRowAction, F as FilterState, f as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, r as readTableUrlState, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter, w as useTableUrlState } from './data-table-
|
|
3
|
+
export { C as ColumnFilter, D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, e as DataTableRowAction, F as FilterState, f as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, r as readTableUrlState, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter, w as useTableUrlState } from './data-table-CfVXtCeG.js';
|
|
4
4
|
export { PAGE_SIZE_OPTIONS, Pagination } from './components/data-table-pagination.js';
|
|
5
5
|
export { FilterPopover } from './components/data-table-filter-popover.js';
|
|
6
6
|
export { BooleanColumnOptions, BooleanMark, BooleanMarkProps, booleanColumn } from './components/data-table-cells.js';
|
|
@@ -41,6 +41,9 @@ interface FeedbackDialogTextLabels {
|
|
|
41
41
|
category: string;
|
|
42
42
|
subject: string;
|
|
43
43
|
body: string;
|
|
44
|
+
/** The body's label when `requireBody={false}`: "What happened? (optional)".
|
|
45
|
+
* Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */
|
|
46
|
+
bodyOptional?: string;
|
|
44
47
|
/** The heading over the attachment buttons. */
|
|
45
48
|
attachment: string;
|
|
46
49
|
/** The line beside the buttons naming the shortcut. */
|
|
@@ -70,7 +73,7 @@ interface FeedbackSubmission {
|
|
|
70
73
|
* (Steering Design feedback #39). The clipboard is where a region snip already
|
|
71
74
|
* is on every platform.
|
|
72
75
|
*/
|
|
73
|
-
declare function FeedbackDialog({ open, onClose, categories, category, onCategoryChange, labels: labelsProp, onSubmit, submitting, contextSlot, attachmentAccept, maxAttachmentBytes, onAttachmentError, onCaptureScreenshot, }: {
|
|
76
|
+
declare function FeedbackDialog({ open, onClose, categories, category, onCategoryChange, labels: labelsProp, onSubmit, submitting, contextSlot, attachmentAccept, maxAttachmentBytes, onAttachmentError, onCaptureScreenshot, requireBody, }: {
|
|
74
77
|
open: boolean;
|
|
75
78
|
onClose: () => void;
|
|
76
79
|
categories: FeedbackCategoryOption[];
|
|
@@ -91,6 +94,12 @@ declare function FeedbackDialog({ open, onClose, categories, category, onCategor
|
|
|
91
94
|
* attachment"; the returned file is fed through the same validation + preview.
|
|
92
95
|
*/
|
|
93
96
|
onCaptureScreenshot?: () => Promise<File | null>;
|
|
97
|
+
/**
|
|
98
|
+
* `false`: a report with only a subject can be sent, and the body's label says it is
|
|
99
|
+
* optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the
|
|
100
|
+
* dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).
|
|
101
|
+
*/
|
|
102
|
+
requireBody?: boolean;
|
|
94
103
|
}): react.JSX.Element | null;
|
|
95
104
|
|
|
96
105
|
export { DEFAULT_FEEDBACK_DIALOG_LABELS, type FeedbackAttachmentLabels, type FeedbackCategoryOption, FeedbackDialog, type FeedbackDialogLabels, type FeedbackDialogTextLabels, type FeedbackSubmission };
|
|
@@ -15,6 +15,7 @@ const DEFAULT_FEEDBACK_DIALOG_LABELS = {
|
|
|
15
15
|
category: "Category",
|
|
16
16
|
subject: "Subject",
|
|
17
17
|
body: "What happened?",
|
|
18
|
+
bodyOptional: "What happened? (optional)",
|
|
18
19
|
attachment: "Screenshot",
|
|
19
20
|
submitHint: "Ctrl/\u2318 + Enter to send",
|
|
20
21
|
cancel: "Cancel",
|
|
@@ -33,7 +34,8 @@ function FeedbackDialog({
|
|
|
33
34
|
attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,
|
|
34
35
|
maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
|
|
35
36
|
onAttachmentError,
|
|
36
|
-
onCaptureScreenshot
|
|
37
|
+
onCaptureScreenshot,
|
|
38
|
+
requireBody = true
|
|
37
39
|
}) {
|
|
38
40
|
const [title, setTitle] = useState("");
|
|
39
41
|
const [body, setBody] = useState("");
|
|
@@ -50,14 +52,22 @@ function FeedbackDialog({
|
|
|
50
52
|
setAttachment(null);
|
|
51
53
|
}
|
|
52
54
|
}
|
|
53
|
-
const canSubmit = !!title && !!body && !submitting;
|
|
55
|
+
const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;
|
|
54
56
|
const trySubmit = () => {
|
|
55
57
|
if (canSubmit) void onSubmit({ title, body, category, attachment });
|
|
56
58
|
};
|
|
57
59
|
if (!open) return null;
|
|
58
60
|
const categoryField = /* @__PURE__ */ jsx(Select, { label: labels.category, value: category, onChange: (e) => onCategoryChange(e.target.value), children: categories.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value)) });
|
|
59
61
|
const subjectField = /* @__PURE__ */ jsx(Input, { label: labels.subject, value: title, onChange: (e) => setTitle(e.target.value), variant: "display" });
|
|
60
|
-
const bodyField = /* @__PURE__ */ jsx(
|
|
62
|
+
const bodyField = /* @__PURE__ */ jsx(
|
|
63
|
+
Textarea,
|
|
64
|
+
{
|
|
65
|
+
rows: 5,
|
|
66
|
+
label: requireBody ? labels.body : labelsProp?.body ?? labels.bodyOptional ?? labels.body,
|
|
67
|
+
value: body,
|
|
68
|
+
onChange: (e) => setBody(e.target.value)
|
|
69
|
+
}
|
|
70
|
+
);
|
|
61
71
|
const attachmentField = /* @__PURE__ */ jsx(
|
|
62
72
|
FeedbackAttachmentField,
|
|
63
73
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_ATTACHMENT_ACCEPT,\n DEFAULT_MAX_ATTACHMENT_BYTES,\n FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n value: string;\n label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n /** The heading over the field. Optional: a note editor puts the buttons\n * straight under its textarea, where a second heading is noise. */\n attachment?: string;\n attachmentAdd: string;\n /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n * `feedbackAttachment.attachmentCapture`, then English. */\n attachmentCapture?: string;\n /** The line under the attachment buttons saying a screenshot can be pasted\n * straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n attachmentPaste?: string;\n attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n attachment: string;\n submitHint: string;\n cancel: string;\n save: string;\n}\n\n/**\n * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider\n * labels>` (0.12.0). The attachment keys are not repeated here: they are the\n * `feedbackAttachment` namespace's, which the field inside already reads.\n *\n * Before, every key was required at the call site, so each app restated ten strings\n * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).\n */\nexport interface FeedbackDialogTextLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n /** The heading over the attachment buttons. */\n attachment: string;\n /** The line beside the buttons naming the shortcut. */\n submitHint: string;\n cancel: string;\n save: string;\n}\n\nexport const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {\n title: \"Send feedback\",\n category: \"Category\",\n subject: \"Subject\",\n body: \"What happened?\",\n attachment: \"Screenshot\",\n submitHint: \"Ctrl/⌘ + Enter to send\",\n cancel: \"Cancel\",\n save: \"Send\",\n};\n\nexport interface FeedbackSubmission {\n title: string;\n body: string;\n category: string;\n attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n open,\n onClose,\n categories,\n category,\n onCategoryChange,\n labels: labelsProp,\n onSubmit,\n submitting = false,\n contextSlot,\n attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n onAttachmentError,\n onCaptureScreenshot,\n}: {\n open: boolean;\n onClose: () => void;\n categories: FeedbackCategoryOption[];\n category: string;\n onCategoryChange: (value: string) => void;\n /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >\n * English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */\n labels?: Partial<FeedbackDialogLabels>;\n onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n submitting?: boolean;\n contextSlot?: ReactNode;\n attachmentAccept?: string[];\n maxAttachmentBytes?: number;\n onAttachmentError?: (kind: \"type\" | \"size\") => void;\n /**\n * Optional: capture a screenshot of the underlying app view and return it as a\n * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n * attachment\"; the returned file is fed through the same validation + preview.\n */\n onCaptureScreenshot?: () => Promise<File | null>;\n}) {\n const [title, setTitle] = useState(\"\");\n const [body, setBody] = useState(\"\");\n const [attachment, setAttachment] = useState<File | null>(null);\n const isMobile = useMediaQuery(PHONE_QUERY, false);\n const labels = useKitLabels(\"feedbackDialog\", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);\n // The attachment field resolves its own keys from `feedbackAttachment`; it gets the\n // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.\n const attachmentLabels = { ...labelsProp, attachment: labels.attachment };\n\n // Reset the form whenever the dialog is (re)opened — during render, on the\n // closed-to-open transition, so the old draft never paints for a frame.\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setTitle(\"\");\n setBody(\"\");\n setAttachment(null);\n }\n }\n\n const canSubmit = !!title && !!body && !submitting;\n const trySubmit = () => {\n if (canSubmit) void onSubmit({ title, body, category, attachment });\n };\n\n if (!open) return null;\n\n const categoryField = (\n <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n {categories.map((c) => (\n <option key={c.value} value={c.value}>\n {c.label}\n </option>\n ))}\n </Select>\n );\n // On a phone the subject leads as a heading rather than as the second of two\n // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n const subjectField = (\n <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n );\n const bodyField = (\n <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />\n );\n const attachmentField = (\n <FeedbackAttachmentField\n value={attachment}\n onChange={setAttachment}\n labels={attachmentLabels}\n accept={attachmentAccept}\n maxBytes={maxAttachmentBytes}\n onError={onAttachmentError}\n onCaptureScreenshot={onCaptureScreenshot}\n // On `document`, not on the panel: the Modal focuses its own panel on open\n // and traps Tab inside it, so while this dialog is up every paste in the\n // page is meant for it — including the one made with nothing in\n // particular focused, which never reaches a React `onPaste` on a child.\n documentPaste={open}\n />\n );\n\n return (\n <Modal\n onClose={onClose}\n // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n // the feedback dialog draggable so I can see behind it if it blocks\n // something\") — you are describing what is under it while you type.\n draggable\n onKeyDown={(e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n e.preventDefault();\n trySubmit();\n }\n }}\n >\n {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n and the heading is the strip a user reaches for. */}\n <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n <div className=\"space-y-3\">\n {isMobile ? (\n // Phone shape, the same reasoning as the transaction editor's (#177):\n // the desktop order is the DATA MODEL's order — category, then subject,\n // then body — but nobody opens this dialog to pick a category. What they\n // came to do is say the thing, so that leads; the classification and the\n // evidence follow, a tier down.\n <>\n {subjectField}\n {bodyField}\n <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n {categoryField}\n {attachmentField}\n {contextSlot}\n </div>\n </>\n ) : (\n <>\n {categoryField}\n {subjectField}\n {bodyField}\n {attachmentField}\n {contextSlot}\n </>\n )}\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n <div className=\"flex gap-2\">\n <Button variant=\"ghost\" onClick={onClose}>\n {labels.cancel}\n </Button>\n <Button onClick={trySubmit} disabled={!canSubmit}>\n {labels.save}\n </Button>\n </div>\n </div>\n </div>\n </Modal>\n );\n}\n"],"mappings":";AAmKQ,SAwDE,UAxDF,KA2DI,YA3DJ;AAnKR,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,OAAO,aAAa,QAAQ,gBAAgB;AAC7D,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqDA,MAAM,iCAA2D;AAAA,EACtE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AACR;AAwBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB;AAAA,EACA;AACF,GAqBG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAsB,IAAI;AAC9D,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,SAAS,aAAa,kBAAkB,gCAAgC,UAAU;AAGxF,QAAM,mBAAmB,EAAE,GAAG,YAAY,YAAY,OAAO,WAAW;AAIxE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,MAAM;AACR,eAAS,EAAE;AACX,cAAQ,EAAE;AACV,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC;AACxC,QAAM,YAAY,MAAM;AACtB,QAAI,UAAW,MAAK,SAAS,EAAE,OAAO,MAAM,UAAU,WAAW,CAAC;AAAA,EACpE;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,gBACJ,oBAAC,UAAO,OAAO,OAAO,UAAU,OAAO,UAAU,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK,GAC9F,qBAAW,IAAI,CAAC,MACf,oBAAC,YAAqB,OAAO,EAAE,OAC5B,YAAE,SADQ,EAAE,KAEf,CACD,GACH;AAKF,QAAM,eACJ,oBAAC,SAAM,OAAO,OAAO,SAAS,OAAO,OAAO,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,SAAQ,WAAU;AAE3G,QAAM,YACJ,oBAAC,YAAS,MAAM,GAAG,OAAO,OAAO,MAAM,OAAO,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK,GAAG;AAEhG,QAAM,kBACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MAKA,eAAe;AAAA;AAAA,EACjB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MAIA,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,aAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,SAAS;AACjD,YAAE,eAAe;AACjB,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,MAIA;AAAA,4BAAC,QAAG,WAAU,8BAA8B,iBAAO,OAAM;AAAA,QACzD,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMC,iCACG;AAAA;AAAA,cACA;AAAA,cACD,qBAAC,SAAI,WAAU,kDACZ;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA,iBACH;AAAA,eACF;AAAA,cAEA,iCACG;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,aACH;AAAA,UAEF,qBAAC,SAAI,WAAU,2CACb;AAAA,gCAAC,SAAI,WAAU,0CAA0C,iBAAO,YAAW;AAAA,YAC3E,qBAAC,SAAI,WAAU,cACb;AAAA,kCAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,iBAAO,QACV;AAAA,cACA,oBAAC,UAAO,SAAS,WAAW,UAAU,CAAC,WACpC,iBAAO,MACV;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_ATTACHMENT_ACCEPT,\n DEFAULT_MAX_ATTACHMENT_BYTES,\n FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n value: string;\n label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n /** The heading over the field. Optional: a note editor puts the buttons\n * straight under its textarea, where a second heading is noise. */\n attachment?: string;\n attachmentAdd: string;\n /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n * `feedbackAttachment.attachmentCapture`, then English. */\n attachmentCapture?: string;\n /** The line under the attachment buttons saying a screenshot can be pasted\n * straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n attachmentPaste?: string;\n attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n attachment: string;\n submitHint: string;\n cancel: string;\n save: string;\n}\n\n/**\n * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider\n * labels>` (0.12.0). The attachment keys are not repeated here: they are the\n * `feedbackAttachment` namespace's, which the field inside already reads.\n *\n * Before, every key was required at the call site, so each app restated ten strings\n * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).\n */\nexport interface FeedbackDialogTextLabels {\n title: string;\n category: string;\n subject: string;\n body: string;\n /** The body's label when `requireBody={false}`: \"What happened? (optional)\".\n * Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */\n bodyOptional?: string;\n /** The heading over the attachment buttons. */\n attachment: string;\n /** The line beside the buttons naming the shortcut. */\n submitHint: string;\n cancel: string;\n save: string;\n}\n\nexport const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {\n title: \"Send feedback\",\n category: \"Category\",\n subject: \"Subject\",\n body: \"What happened?\",\n bodyOptional: \"What happened? (optional)\",\n attachment: \"Screenshot\",\n submitHint: \"Ctrl/⌘ + Enter to send\",\n cancel: \"Cancel\",\n save: \"Send\",\n};\n\nexport interface FeedbackSubmission {\n title: string;\n body: string;\n category: string;\n attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n open,\n onClose,\n categories,\n category,\n onCategoryChange,\n labels: labelsProp,\n onSubmit,\n submitting = false,\n contextSlot,\n attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n onAttachmentError,\n onCaptureScreenshot,\n requireBody = true,\n}: {\n open: boolean;\n onClose: () => void;\n categories: FeedbackCategoryOption[];\n category: string;\n onCategoryChange: (value: string) => void;\n /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >\n * English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */\n labels?: Partial<FeedbackDialogLabels>;\n onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n submitting?: boolean;\n contextSlot?: ReactNode;\n attachmentAccept?: string[];\n maxAttachmentBytes?: number;\n onAttachmentError?: (kind: \"type\" | \"size\") => void;\n /**\n * Optional: capture a screenshot of the underlying app view and return it as a\n * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n * attachment\"; the returned file is fed through the same validation + preview.\n */\n onCaptureScreenshot?: () => Promise<File | null>;\n /**\n * `false`: a report with only a subject can be sent, and the body's label says it is\n * optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the\n * dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).\n */\n requireBody?: boolean;\n}) {\n const [title, setTitle] = useState(\"\");\n const [body, setBody] = useState(\"\");\n const [attachment, setAttachment] = useState<File | null>(null);\n const isMobile = useMediaQuery(PHONE_QUERY, false);\n const labels = useKitLabels(\"feedbackDialog\", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);\n // The attachment field resolves its own keys from `feedbackAttachment`; it gets the\n // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.\n const attachmentLabels = { ...labelsProp, attachment: labels.attachment };\n\n // Reset the form whenever the dialog is (re)opened — during render, on the\n // closed-to-open transition, so the old draft never paints for a frame.\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setTitle(\"\");\n setBody(\"\");\n setAttachment(null);\n }\n }\n\n // Trimmed: a subject or body of spaces is empty (keksdose's API answers a blank title\n // with a 422, and a blank report is no report).\n const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;\n const trySubmit = () => {\n if (canSubmit) void onSubmit({ title, body, category, attachment });\n };\n\n if (!open) return null;\n\n const categoryField = (\n <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n {categories.map((c) => (\n <option key={c.value} value={c.value}>\n {c.label}\n </option>\n ))}\n </Select>\n );\n // On a phone the subject leads as a heading rather than as the second of two\n // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n const subjectField = (\n <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n );\n const bodyField = (\n <Textarea\n rows={5}\n label={requireBody ? labels.body : (labelsProp?.body ?? labels.bodyOptional ?? labels.body)}\n value={body}\n onChange={(e) => setBody(e.target.value)}\n />\n );\n const attachmentField = (\n <FeedbackAttachmentField\n value={attachment}\n onChange={setAttachment}\n labels={attachmentLabels}\n accept={attachmentAccept}\n maxBytes={maxAttachmentBytes}\n onError={onAttachmentError}\n onCaptureScreenshot={onCaptureScreenshot}\n // On `document`, not on the panel: the Modal focuses its own panel on open\n // and traps Tab inside it, so while this dialog is up every paste in the\n // page is meant for it — including the one made with nothing in\n // particular focused, which never reaches a React `onPaste` on a child.\n documentPaste={open}\n />\n );\n\n return (\n <Modal\n onClose={onClose}\n // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n // the feedback dialog draggable so I can see behind it if it blocks\n // something\") — you are describing what is under it while you type.\n draggable\n onKeyDown={(e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n e.preventDefault();\n trySubmit();\n }\n }}\n >\n {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n and the heading is the strip a user reaches for. */}\n <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n <div className=\"space-y-3\">\n {isMobile ? (\n // Phone shape, the same reasoning as the transaction editor's (#177):\n // the desktop order is the DATA MODEL's order — category, then subject,\n // then body — but nobody opens this dialog to pick a category. What they\n // came to do is say the thing, so that leads; the classification and the\n // evidence follow, a tier down.\n <>\n {subjectField}\n {bodyField}\n <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n {categoryField}\n {attachmentField}\n {contextSlot}\n </div>\n </>\n ) : (\n <>\n {categoryField}\n {subjectField}\n {bodyField}\n {attachmentField}\n {contextSlot}\n </>\n )}\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n <div className=\"flex gap-2\">\n <Button variant=\"ghost\" onClick={onClose}>\n {labels.cancel}\n </Button>\n <Button onClick={trySubmit} disabled={!canSubmit}>\n {labels.save}\n </Button>\n </div>\n </div>\n </div>\n </Modal>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
|
|
4
|
-
import { Paperclip, Send } from "lucide-react";
|
|
4
|
+
import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
|
|
5
5
|
import { cn } from "../lib/cn.js";
|
|
6
6
|
import { formatDate, formatRelativeTime } from "../lib/format.js";
|
|
7
7
|
import { Button, EmptyState, Spinner, Textarea } from "../components/ui.js";
|
|
@@ -141,17 +141,7 @@ function DefaultAttachment({
|
|
|
141
141
|
size
|
|
142
142
|
}) {
|
|
143
143
|
const { name, url, type } = attachment;
|
|
144
|
-
if (url && type?.startsWith("image/")) {
|
|
145
|
-
return /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ jsx(
|
|
146
|
-
"img",
|
|
147
|
-
{
|
|
148
|
-
src: url,
|
|
149
|
-
alt: name,
|
|
150
|
-
loading: "lazy",
|
|
151
|
-
className: "h-20 w-20 rounded border border-[var(--border)] object-cover"
|
|
152
|
-
}
|
|
153
|
-
) });
|
|
154
|
-
}
|
|
144
|
+
if (url && type?.startsWith("image/")) return /* @__PURE__ */ jsx(ImageThumbnail, { url, name });
|
|
155
145
|
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
156
146
|
/* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0", "aria-hidden": true }),
|
|
157
147
|
/* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
|
|
@@ -160,6 +150,35 @@ function DefaultAttachment({
|
|
|
160
150
|
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)]";
|
|
161
151
|
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 });
|
|
162
152
|
}
|
|
153
|
+
function ImageThumbnail({ url, name }) {
|
|
154
|
+
const [failedUrl, setFailedUrl] = useState(null);
|
|
155
|
+
const failed = failedUrl === url;
|
|
156
|
+
const Glyph = failed ? ImageOff : ImageIcon;
|
|
157
|
+
return /* @__PURE__ */ jsxs(
|
|
158
|
+
"a",
|
|
159
|
+
{
|
|
160
|
+
href: url,
|
|
161
|
+
target: "_blank",
|
|
162
|
+
rel: "noopener noreferrer",
|
|
163
|
+
className: "relative block h-20 w-20 overflow-hidden rounded border border-[var(--border)] bg-[var(--bg-surface-2)]",
|
|
164
|
+
children: [
|
|
165
|
+
/* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: "absolute inset-0 m-auto size-6 text-[var(--text-muted)]" }),
|
|
166
|
+
!failed && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
|
|
167
|
+
/* @__PURE__ */ jsx(
|
|
168
|
+
"img",
|
|
169
|
+
{
|
|
170
|
+
src: url,
|
|
171
|
+
alt: name,
|
|
172
|
+
loading: "lazy",
|
|
173
|
+
onError: () => setFailedUrl(url),
|
|
174
|
+
className: "relative h-full w-full object-cover"
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
failed && /* @__PURE__ */ jsx("span", { className: "sr-only", children: name })
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
}
|
|
163
182
|
function useMinuteClock(active) {
|
|
164
183
|
const [time, setTime] = useState(() => Date.now());
|
|
165
184
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/feedback/feedback-thread.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { Paperclip, Send } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatDate, formatRelativeTime } from \"../lib/format\";\nimport { Button, EmptyState, Spinner, Textarea } from \"../components/ui\";\nimport { Skeleton } from \"../components/skeleton\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useKitFileLabels, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { FeedbackAttachmentField } from \"./feedback-attachment\";\nimport type { FeedbackNoteAttachment } from \"./feedback-inbox\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\n/**\n * The conversation under a report: who said what, when, with what attached — and the\n * box to answer in.\n *\n * Both apps had written it by hand. kastlan's feedback page grew a comment list of\n * bordered boxes with `slate-*` literals (feedback-page.tsx, \"keksdose left this\n * unbuilt\"), and keksdose built the same thing a second time for support\n * (support-thread.tsx) with sides, bubbles and a composer that clears only what it\n * sent. This is that second one, generalised: the kit owns the look and the\n * behaviour, the app owns the data, the upload and every word it does not share.\n *\n * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes\n * against a user id: whose message sits at the END side depends on who is reading,\n * and only the app knows that (keksdose's support thread labelled a member's question\n * \"Du\" in the admin panel the first time round, by reading the wrong field).\n *\n * **Redaction.** A thread is somebody's words about their own data — exactly what a\n * host's demo / screen-share mode blurs. Bodies, authors and attachments carry\n * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless\n * `redact={false}`.\n *\n * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's\n * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir=\"auto\"`, so a\n * Hebrew reply in an English thread (or the reverse) lays out as its own language.\n *\n * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation\n * read the chat way: status lines between the messages (\"Closed automatically\",\n * \"Reopened\"), a day line where the date changes, clock times under it, Enter to send\n * and several files uploaded ahead of the send. Each of those is an opt-in here\n * (`kind: \"event\"`, `daySeparators`, `timeFormat=\"clock\"`, `sendOn=\"enter\"`,\n * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.\n */\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\n/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */\nexport interface FeedbackThreadLabels {\n /** Accessible name of the message list. */\n thread: string;\n empty: string;\n loading: string;\n /** Author line of an `own` message that has no `author` of its own. */\n you: string;\n /** The badge beside a `staff` author. */\n staff: string;\n /** Accessible name of a message's attachment list. */\n attachments: string;\n}\n\nexport const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels = {\n thread: \"Comments\",\n empty: \"No comments yet\",\n loading: \"Loading comments…\",\n you: \"You\",\n staff: \"Staff\",\n attachments: \"Attachments\",\n};\n\n/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'\n * words are `feedbackAttachment`'s, shared with the dialog and the note editor. */\nexport interface FeedbackComposerLabels {\n /** Accessible name of the text box. */\n field: string;\n placeholder: string;\n send: string;\n /** The shortcut line, given the platform's modifier (\"Ctrl\" or \"⌘\"). */\n sendHint: (modifier: string) => string;\n /** The shortcut line under `sendOn=\"enter\"` (keksdose G5): Enter sends, so say how a\n * new line is made. */\n sendHintEnter: string;\n}\n\nexport const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels = {\n field: \"Write a comment\",\n placeholder: \"Write a comment…\",\n send: \"Send\",\n sendHint: (modifier) => `${modifier} + Enter to send`,\n sendHintEnter: \"Enter to send, Shift + Enter for a new line\",\n};\n\n/* ── Thread ───────────────────────────────────────────────────────────────── */\n\nexport interface FeedbackThreadAttachment {\n id?: string | number;\n name: string;\n /** Where to open it. Left out, the attachment is listed by name only. */\n url?: string;\n /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */\n type?: string;\n /** Bytes, shown beside a non-image. */\n size?: number;\n}\n\nexport interface FeedbackThreadMessage {\n /** Leave out, or `\"message\"`. `\"event\"` is a {@link FeedbackThreadEvent}. */\n kind?: \"message\";\n id: string | number;\n /** Who wrote it. Left out on an `own` message, it reads \"You\". */\n author?: ReactNode;\n /** A `Date`, an ISO string or epoch ms. */\n createdAt: Date | string | number;\n body: string;\n attachments?: readonly FeedbackThreadAttachment[];\n /** Written by whoever is reading: sits at the end side, in the brand tint. */\n own?: boolean;\n /** Written by the team rather than a user: gets the \"Staff\" badge. */\n staff?: boolean;\n}\n\n/**\n * A line in the thread that nobody wrote — \"Closed automatically\", \"Marked as\n * resolved\", \"Reopened\" — drawn centred and muted with its time, no author, no side,\n * no bubble.\n *\n * keksdose G4: its support chat interleaves these with the messages, and as a message\n * they came out as a bubble from nobody at the start side, which reads as the member\n * having said \"resolved\". Word it for the READER, as with `own`: the app knows whether\n * \"you reopened it\" or \"Anna reopened it\" is true for the person looking.\n *\n * The text is the app's, not somebody's words about their data, so it is NOT tagged\n * `data-private`; one that names a person can wrap the name in its own\n * `<span data-private>` (`body` is a node for that reason).\n */\nexport interface FeedbackThreadEvent {\n kind: \"event\";\n id: string | number;\n /** A `Date`, an ISO string or epoch ms. */\n createdAt: Date | string | number;\n body: ReactNode;\n}\n\n/** One row of a {@link FeedbackThread}: a message, or an event line between them. */\nexport type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;\n\nexport interface FeedbackThreadProps {\n /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */\n messages: readonly FeedbackThreadItem[];\n loading?: boolean;\n /** Replaces the default \"No comments yet\". */\n empty?: ReactNode;\n /**\n * Draw one attachment yourself — for files behind auth, which a plain `<img src>`\n * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail\n * link for an image with a `url`, a file link otherwise.\n */\n renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;\n /** Tag bodies, authors and attachments `data-private`. Default true. */\n redact?: boolean;\n /**\n * How a row's time reads. `\"relative\"` (default): \"5 minutes ago\", a date past six\n * days — right for a report's comments, read days apart. `\"clock\"`: the time of day\n * in the locale (\"14:05\", \"2:05 PM\") — the chat look, keksdose G4; pair it with\n * `daySeparators`, which say which day that clock time is on. Either way the full\n * date and time is in the Tooltip.\n */\n timeFormat?: \"relative\" | \"clock\";\n /**\n * A centred day line before the first row and wherever the next row is on another\n * calendar day (the device's zone): \"Today\", \"Yesterday\", else the date — keksdose\n * G4. \"Today\" / \"Yesterday\" are `Intl.RelativeTimeFormat`'s own words in the kit\n * locale, so there is no label to translate. Default false.\n */\n daySeparators?: boolean;\n /** \"Now\" for the relative times and the day lines — pin it in tests and stories.\n * Default: the clock. */\n now?: Date | number;\n /** Overrides the provider's locale for the times. */\n locale?: string;\n labels?: Partial<FeedbackThreadLabels>;\n className?: string;\n}\n\nexport function FeedbackThread({\n messages,\n loading = false,\n empty,\n renderAttachment,\n redact = true,\n now,\n locale: localeProp,\n timeFormat = \"relative\",\n daySeparators = false,\n labels: labelsProp,\n className,\n}: FeedbackThreadProps) {\n const labels = useKitLabels(\"feedbackThread\", DEFAULT_FEEDBACK_THREAD_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const file = useKitFileLabels();\n const priv = redact ? \"\" : undefined;\n const clock = useMinuteClock(now === undefined);\n const reference = now === undefined ? clock : +now;\n\n if (loading && messages.length === 0) {\n return <Skeleton lines={3} label={labels.loading} className={className} />;\n }\n if (messages.length === 0) {\n return (\n <EmptyState\n variant=\"inline\"\n size=\"sm\"\n title={empty ?? labels.empty}\n className={cn(\"justify-start\", className)}\n />\n );\n }\n\n // Per row, the calendar day of the last readable date up to it — what a day line\n // compares against.\n const days: (number | null)[] = [];\n for (const message of messages) {\n const date = toDate(message.createdAt);\n days.push(date ? dayNumber(date) : (days.at(-1) ?? null));\n }\n\n return (\n <ol aria-label={labels.thread} aria-busy={loading || undefined} className={cn(\"space-y-3\", className)}>\n {messages.flatMap((message, index) => {\n const date = toDate(message.createdAt);\n const time = date && (\n // The kit's Tooltip, not a native title: one tooltip look app-wide\n // (keksdose F0 / dev#523).\n <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: \"full\", timeStyle: \"short\" }).format(date)}>\n <time dateTime={date.toISOString()} className=\"tabular-nums\">\n {timeFormat === \"clock\"\n ? formatDate(date, \"time\", { locale })\n : formatRelativeTime(date, {\n now: reference,\n locale,\n // Past the kit's day steps it is a date: \"2 weeks ago\" makes\n // the reader do arithmetic the date already did.\n absoluteAfterDays: 6.5,\n })}\n </time>\n </Tooltip>\n );\n const rows: ReactNode[] = [];\n const day = date && dayNumber(date);\n // Against the last row WITH a readable date: an unparseable one neither starts\n // a day nor hides the next change.\n if (daySeparators && date && day !== days[index - 1]) {\n rows.push(<DaySeparator key={`day-${message.id}`} date={date} now={reference} locale={locale} />);\n }\n if (message.kind === \"event\") {\n // A list item like the rest, so \"Reopened\" is read in its place, but not an\n // article: an article is somebody's post, and this has no author.\n rows.push(\n <li\n key={message.id}\n data-event=\"\"\n className=\"flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-[var(--text-muted)]\"\n >\n <span>{message.body}</span>\n {time && <span className=\"text-[11px]\">{time}</span>}\n </li>,\n );\n return rows;\n }\n const author = message.author ?? (message.own ? labels.you : null);\n const attachments = message.attachments ?? [];\n rows.push(\n <li\n key={message.id}\n className={cn(\"flex\", message.own ? \"justify-end\" : \"justify-start\")}\n data-own={message.own ? \"\" : undefined}\n >\n <article\n className={cn(\n \"max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm\",\n message.own\n ? \"rounded-ee-sm bg-[var(--brand-bg)]\"\n : \"rounded-es-sm bg-[var(--bg-surface-2)]\",\n )}\n >\n <header className=\"mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-[var(--text-muted)]\">\n {author != null && (\n <span data-private={priv} className=\"font-medium text-[var(--text-secondary)]\">\n {author}\n </span>\n )}\n {message.staff && (\n <span className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--text-secondary)]\">\n {labels.staff}\n </span>\n )}\n {time}\n </header>\n {message.body && (\n <p\n data-private={priv}\n dir=\"auto\"\n className=\"whitespace-pre-wrap break-words text-start text-[var(--text-primary)]\"\n >\n {message.body}\n </p>\n )}\n {attachments.length > 0 && (\n <ul aria-label={labels.attachments} data-private={priv} className=\"mt-2 flex flex-wrap gap-2\">\n {attachments.map((attachment, index) => (\n <li key={attachment.id ?? `${index}-${attachment.name}`} className=\"min-w-0\">\n {renderAttachment ? (\n renderAttachment(attachment, message)\n ) : (\n <DefaultAttachment attachment={attachment} size={file.size} />\n )}\n </li>\n ))}\n </ul>\n )}\n </article>\n </li>,\n );\n return rows;\n })}\n </ol>\n );\n}\n\nfunction DefaultAttachment({\n attachment,\n size,\n}: {\n attachment: FeedbackThreadAttachment;\n size: (bytes: number) => string;\n}) {\n const { name, url, type } = attachment;\n if (url && type?.startsWith(\"image/\")) {\n return (\n <a href={url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n <img\n src={url}\n alt={name}\n loading=\"lazy\"\n className=\"h-20 w-20 rounded border border-[var(--border)] object-cover\"\n />\n </a>\n );\n }\n const content = (\n <>\n <Paperclip className=\"size-3.5 shrink-0\" aria-hidden />\n <span className=\"truncate\">{name}</span>\n {attachment.size !== undefined && (\n <span className=\"shrink-0 text-[var(--text-muted)]\">{size(attachment.size)}</span>\n )}\n </>\n );\n const chip =\n \"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)]\";\n return url ? (\n <a href={url} target=\"_blank\" rel=\"noopener noreferrer\" className={cn(chip, \"hover:bg-[var(--bg-hover)]\")}>\n {content}\n </a>\n ) : (\n <span className={chip}>{content}</span>\n );\n}\n\n/** The time, refreshed once a minute while `active`, so \"2 minutes ago\" does not stay\n * \"just now\" on a page left open. Read in state rather than in render, which must be\n * pure. */\nfunction useMinuteClock(active: boolean): number {\n const [time, setTime] = useState(() => Date.now());\n useEffect(() => {\n if (!active) return;\n const id = setInterval(() => setTime(Date.now()), 60_000);\n return () => clearInterval(id);\n }, [active]);\n return time;\n}\n\n/** The local calendar day as one number (20260926), for \"same day?\" and keys. */\nfunction dayNumber(date: Date): number {\n return date.getFullYear() * 10_000 + (date.getMonth() + 1) * 100 + date.getDate();\n}\n\n/**\n * The day line of `daySeparators` (keksdose G4): \"Today\" / \"Yesterday\" from\n * `Intl.RelativeTimeFormat` (`numeric: \"auto\"`) — the locale's own words, capitalised\n * for a line that stands alone (\"heute\" → \"Heute\"; a script without case is left as\n * is) — else the weekday and date, with the year only when it is not this one.\n *\n * Counted in calendar days, not 24-hour spans: 23:50 yesterday is \"Yesterday\" at\n * 00:10 today.\n */\nfunction DaySeparator({ date, now, locale }: { date: Date; now: number; locale: string | undefined }) {\n const today = new Date(now);\n const days = Math.round(\n (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) -\n Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())) /\n 86_400_000,\n );\n let label: string;\n if (days === 0 || days === -1) {\n const word = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" }).format(days + 0, \"day\");\n label = word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);\n } else {\n label = formatDate(\n date,\n {\n weekday: \"long\",\n day: \"numeric\",\n month: \"long\",\n ...(date.getFullYear() === today.getFullYear() ? null : { year: \"numeric\" }),\n },\n { locale },\n );\n }\n const y = String(date.getFullYear()).padStart(4, \"0\");\n const m = String(date.getMonth() + 1).padStart(2, \"0\");\n const d = String(date.getDate()).padStart(2, \"0\");\n return (\n <li data-day-separator=\"\" className=\"flex items-center gap-3 py-1 text-xs text-[var(--text-muted)]\">\n <span aria-hidden className=\"h-px flex-1 bg-[var(--border)]\" />\n <time dateTime={`${y}-${m}-${d}`} className=\"font-medium\">\n {label}\n </time>\n <span aria-hidden className=\"h-px flex-1 bg-[var(--border)]\" />\n </li>\n );\n}\n\nfunction toDate(value: Date | string | number): Date | null {\n const date = value instanceof Date ? value : new Date(value);\n return Number.isNaN(date.getTime()) ? null : date;\n}\n\n/* ── Composer ─────────────────────────────────────────────────────────────── */\n\n/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the\n * labels optional, since the field reads `feedbackAttachment` from the provider. */\nexport type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, \"labels\"> & {\n labels?: Partial<FeedbackAttachmentLabels>;\n};\n\nexport interface FeedbackComposerProps {\n /**\n * Send the comment. Return the promise: the box clears when it RESOLVES, and only of\n * what was sent — text typed while it was in flight stays. A rejection keeps\n * everything for a retry (surface the error yourself; the composer stays quiet).\n *\n * `attachment` is the built-in field's one picture. Files the host uploaded ahead\n * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be\n * `\"\"` when `canSend` let an attachments-only message go.\n */\n onSend: (body: string, attachment: File | null) => void | Promise<unknown>;\n /** The send is in flight: a spinner on the button and no second send. */\n pending?: boolean;\n /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).\n * `true` for the defaults. Left out, the composer is text only. */\n attachment?: boolean | FeedbackComposerAttachment;\n /**\n * The host's own attach control, in the row with Send where the built-in field sits\n * (after it, if both are on) — keksdose G5: its support chat uploads up to N files\n * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.\n * The slot is the host's picker plus the chips of what is uploaded; the upload, the\n * refs and clearing them once `onSend` resolves stay with the host. Pair it with\n * `canSend`.\n */\n attachmentSlot?: ReactNode;\n /**\n * Whether Send is enabled, over the composer's own rule (some text in the box) —\n * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`\n * with files ready makes an empty draft sendable (`onSend(\"\", null)`), `false` while\n * an upload is still running holds even a written reply back. Left out, the text\n * decides. `pending` blocks a send either way.\n */\n canSend?: boolean;\n /**\n * Which key sends. `\"mod-enter\"` (default): Ctrl/⌘+Enter, the report dialog's and\n * note editor's shortcut, with plain Enter a new line — feedback is written in\n * paragraphs. `\"enter\"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a\n * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition\n * (Japanese, Chinese input) is the IME's, never a send.\n */\n sendOn?: \"mod-enter\" | \"enter\";\n /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this\n * reader. */\n disabledReason?: ReactNode;\n rows?: number;\n /**\n * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a\n * support ticket is asked something else (\"Reply to Anna…\") than a member adding to\n * their own report, and one provider-wide label cannot say both.\n */\n placeholder?: string;\n /**\n * The draft, controlled — for a host that keeps it itself (saves it per ticket,\n * prefills a template). Left out, the composer keeps its own. Either way a send\n * that resolves clears only what was sent: controlled, that is an\n * `onValueChange(\"\")` the host receives like any keystroke, and only if the draft\n * is still the one that went out.\n */\n value?: string;\n /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the\n * clear after a send. Required to change a controlled `value`. */\n onValueChange?: (value: string) => void;\n /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply\n * chips) or focus the box. */\n ref?: Ref<FeedbackComposerHandle>;\n labels?: Partial<FeedbackComposerLabels>;\n className?: string;\n}\n\n/**\n * What a {@link FeedbackComposer} `ref` holds.\n *\n * keksdose F9: the support admin answers the same five questions all day and wants\n * chips above the box (\"Thanks, fixed in the next release\") that drop their text in\n * where the caret is. A controlled `value` alone cannot do that well — the host sees\n * the string, not the caret, so it could only append — so the composer, which owns\n * the textarea, does the splice.\n */\nexport interface FeedbackComposerHandle {\n /**\n * Insert `text` at the caret, replacing any selection (the caret the box last had:\n * a click on a chip blurs it, and the selection survives the blur), then focus the\n * box with the caret after the inserted text so the reply can go on. Nothing is\n * added around it — put a space or a newline in `text` if the reply needs one. A\n * no-op while `disabledReason` replaces the box.\n */\n insertText: (text: string) => void;\n focus: () => void;\n}\n\nconst noSubscribe = () => () => {};\nconst isApple = () =>\n typeof navigator !== \"undefined\" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);\n\n/**\n * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,\n * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor\n * use, so the habit carries across the feature. Plain Enter is a new line: feedback is\n * written in paragraphs, unlike a chat — which `sendOn=\"enter\"` is for (keksdose G5).\n */\nexport function FeedbackComposer({\n onSend,\n pending = false,\n attachment,\n attachmentSlot,\n canSend: canSendProp,\n sendOn = \"mod-enter\",\n disabledReason,\n rows = 3,\n placeholder,\n value,\n onValueChange,\n ref,\n labels: labelsProp,\n className,\n}: FeedbackComposerProps) {\n const labels = useKitLabels(\"feedbackComposer\", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);\n const [ownDraft, setOwnDraft] = useState(\"\");\n const controlled = value !== undefined;\n const draft = controlled ? value : ownDraft;\n const [file, setFile] = useState<File | null>(null);\n const root = useRef<HTMLDivElement>(null);\n const box = useRef<HTMLTextAreaElement>(null);\n // The draft as of the last commit. The send's `.then` and `insertText` run after\n // renders their closure did not see — text typed while the send was in flight, a\n // second chip clicked before the first one's render — and must not act on a stale\n // string (for a controlled draft there is no updater function to lean on).\n const latest = useRef(draft);\n useLayoutEffect(() => {\n latest.current = draft;\n });\n // Where the caret goes once an inserted text has rendered.\n const caret = useRef<number | null>(null);\n useLayoutEffect(() => {\n const el = box.current;\n if (caret.current === null || !el) return;\n el.focus();\n el.setSelectionRange(caret.current, caret.current);\n caret.current = null;\n });\n\n const setDraft = (next: string) => {\n latest.current = next;\n if (!controlled) setOwnDraft(next);\n onValueChange?.(next);\n };\n\n useImperativeHandle(ref, () => ({\n insertText: (text) => {\n const el = box.current;\n if (!el) return;\n const current = latest.current;\n // A second insert before the first has rendered goes after the first, not at the\n // textarea's not-yet-moved caret. Otherwise the textarea's selection, which may\n // be past the end of a controlled value the host has just shortened: clamp it.\n const pending = caret.current;\n const start = Math.min(pending ?? el.selectionStart ?? current.length, current.length);\n const end = pending ?? Math.max(start, Math.min(el.selectionEnd ?? start, current.length));\n caret.current = start + text.length;\n setDraft(current.slice(0, start) + text + current.slice(end));\n },\n focus: () => box.current?.focus(),\n }));\n // The server snapshot is \"Ctrl\"; the client corrects it after hydration.\n const modifier = useSyncExternalStore(\n noSubscribe,\n () => (isApple() ? \"⌘\" : \"Ctrl\"),\n () => \"Ctrl\",\n );\n\n if (disabledReason != null && disabledReason !== false) {\n return <p className={cn(\"text-xs text-[var(--text-muted)]\", className)}>{disabledReason}</p>;\n }\n\n const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;\n const send = () => {\n if (!canSend) return;\n const sentDraft = draft;\n const sentFile = file;\n Promise.resolve(onSend(draft.trim(), file))\n .then(() => {\n if (latest.current === sentDraft) setDraft(\"\");\n setFile((current) => (current === sentFile ? null : current));\n })\n .catch(() => {});\n };\n\n const config = attachment === true ? {} : attachment || null;\n\n return (\n <div ref={root} className={cn(\"space-y-2\", className)}>\n <Textarea\n rows={rows}\n dir=\"auto\"\n aria-label={labels.field}\n ref={box}\n placeholder={placeholder ?? labels.placeholder}\n value={draft}\n onChange={(event) => setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key !== \"Enter\") return;\n const mod = event.ctrlKey || event.metaKey;\n // Under \"enter\": plain Enter sends, Shift+Enter falls through to the\n // textarea's new line, and an Enter that ends an IME composition is the\n // IME's (keyCode 229 is how Safari reports it after the composition ended).\n const chat =\n sendOn === \"enter\" &&\n !event.shiftKey &&\n !event.altKey &&\n !event.nativeEvent.isComposing &&\n event.keyCode !== 229;\n if (mod || chat) {\n event.preventDefault();\n send();\n }\n }}\n />\n <div className=\"flex flex-wrap items-end justify-between gap-2\">\n {config || attachmentSlot != null ? (\n <div className=\"flex min-w-0 flex-wrap items-end gap-2\">\n {config && (\n <FeedbackAttachmentField\n value={file}\n onChange={setFile}\n labels={config.labels}\n accept={config.accept}\n maxBytes={config.maxBytes}\n onError={config.onError}\n onCaptureScreenshot={config.onCaptureScreenshot}\n // The box is this field's sibling; a paste in it bubbles to `root`.\n pasteFrom={root}\n />\n )}\n {attachmentSlot}\n </div>\n ) : (\n <span />\n )}\n <div className=\"ms-auto flex items-center gap-2\">\n <span className=\"text-xs text-[var(--text-placeholder)]\">\n {sendOn === \"enter\" ? labels.sendHintEnter : labels.sendHint(modifier)}\n </span>\n <Button onClick={send} disabled={!canSend} aria-busy={pending || undefined}>\n {pending ? (\n <Spinner label={null} className=\"size-4\" />\n ) : (\n <Send className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n )}\n {labels.send}\n </Button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":["index","pending"]}
|
|
1
|
+
{"version":3,"sources":["../../src/feedback/feedback-thread.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { ImageIcon, ImageOff, Paperclip, Send } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatDate, formatRelativeTime } from \"../lib/format\";\nimport { Button, EmptyState, Spinner, Textarea } from \"../components/ui\";\nimport { Skeleton } from \"../components/skeleton\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useKitFileLabels, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { FeedbackAttachmentField } from \"./feedback-attachment\";\nimport type { FeedbackNoteAttachment } from \"./feedback-inbox\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\n/**\n * The conversation under a report: who said what, when, with what attached — and the\n * box to answer in.\n *\n * Both apps had written it by hand. kastlan's feedback page grew a comment list of\n * bordered boxes with `slate-*` literals (feedback-page.tsx, \"keksdose left this\n * unbuilt\"), and keksdose built the same thing a second time for support\n * (support-thread.tsx) with sides, bubbles and a composer that clears only what it\n * sent. This is that second one, generalised: the kit owns the look and the\n * behaviour, the app owns the data, the upload and every word it does not share.\n *\n * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes\n * against a user id: whose message sits at the END side depends on who is reading,\n * and only the app knows that (keksdose's support thread labelled a member's question\n * \"Du\" in the admin panel the first time round, by reading the wrong field).\n *\n * **Redaction.** A thread is somebody's words about their own data — exactly what a\n * host's demo / screen-share mode blurs. Bodies, authors and attachments carry\n * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless\n * `redact={false}`.\n *\n * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's\n * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir=\"auto\"`, so a\n * Hebrew reply in an English thread (or the reverse) lays out as its own language.\n *\n * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation\n * read the chat way: status lines between the messages (\"Closed automatically\",\n * \"Reopened\"), a day line where the date changes, clock times under it, Enter to send\n * and several files uploaded ahead of the send. Each of those is an opt-in here\n * (`kind: \"event\"`, `daySeparators`, `timeFormat=\"clock\"`, `sendOn=\"enter\"`,\n * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.\n */\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\n/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */\nexport interface FeedbackThreadLabels {\n /** Accessible name of the message list. */\n thread: string;\n empty: string;\n loading: string;\n /** Author line of an `own` message that has no `author` of its own. */\n you: string;\n /** The badge beside a `staff` author. */\n staff: string;\n /** Accessible name of a message's attachment list. */\n attachments: string;\n}\n\nexport const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels = {\n thread: \"Comments\",\n empty: \"No comments yet\",\n loading: \"Loading comments…\",\n you: \"You\",\n staff: \"Staff\",\n attachments: \"Attachments\",\n};\n\n/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'\n * words are `feedbackAttachment`'s, shared with the dialog and the note editor. */\nexport interface FeedbackComposerLabels {\n /** Accessible name of the text box. */\n field: string;\n placeholder: string;\n send: string;\n /** The shortcut line, given the platform's modifier (\"Ctrl\" or \"⌘\"). */\n sendHint: (modifier: string) => string;\n /** The shortcut line under `sendOn=\"enter\"` (keksdose G5): Enter sends, so say how a\n * new line is made. */\n sendHintEnter: string;\n}\n\nexport const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels = {\n field: \"Write a comment\",\n placeholder: \"Write a comment…\",\n send: \"Send\",\n sendHint: (modifier) => `${modifier} + Enter to send`,\n sendHintEnter: \"Enter to send, Shift + Enter for a new line\",\n};\n\n/* ── Thread ───────────────────────────────────────────────────────────────── */\n\nexport interface FeedbackThreadAttachment {\n id?: string | number;\n name: string;\n /** Where to open it. Left out, the attachment is listed by name only. */\n url?: string;\n /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */\n type?: string;\n /** Bytes, shown beside a non-image. */\n size?: number;\n}\n\nexport interface FeedbackThreadMessage {\n /** Leave out, or `\"message\"`. `\"event\"` is a {@link FeedbackThreadEvent}. */\n kind?: \"message\";\n id: string | number;\n /** Who wrote it. Left out on an `own` message, it reads \"You\". */\n author?: ReactNode;\n /** A `Date`, an ISO string or epoch ms. */\n createdAt: Date | string | number;\n body: string;\n attachments?: readonly FeedbackThreadAttachment[];\n /** Written by whoever is reading: sits at the end side, in the brand tint. */\n own?: boolean;\n /** Written by the team rather than a user: gets the \"Staff\" badge. */\n staff?: boolean;\n}\n\n/**\n * A line in the thread that nobody wrote — \"Closed automatically\", \"Marked as\n * resolved\", \"Reopened\" — drawn centred and muted with its time, no author, no side,\n * no bubble.\n *\n * keksdose G4: its support chat interleaves these with the messages, and as a message\n * they came out as a bubble from nobody at the start side, which reads as the member\n * having said \"resolved\". Word it for the READER, as with `own`: the app knows whether\n * \"you reopened it\" or \"Anna reopened it\" is true for the person looking.\n *\n * The text is the app's, not somebody's words about their data, so it is NOT tagged\n * `data-private`; one that names a person can wrap the name in its own\n * `<span data-private>` (`body` is a node for that reason).\n */\nexport interface FeedbackThreadEvent {\n kind: \"event\";\n id: string | number;\n /** A `Date`, an ISO string or epoch ms. */\n createdAt: Date | string | number;\n body: ReactNode;\n}\n\n/** One row of a {@link FeedbackThread}: a message, or an event line between them. */\nexport type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;\n\nexport interface FeedbackThreadProps {\n /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */\n messages: readonly FeedbackThreadItem[];\n loading?: boolean;\n /** Replaces the default \"No comments yet\". */\n empty?: ReactNode;\n /**\n * Draw one attachment yourself — for files behind auth, which a plain `<img src>`\n * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail\n * link for an image with a `url`, a file link otherwise.\n */\n renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;\n /** Tag bodies, authors and attachments `data-private`. Default true. */\n redact?: boolean;\n /**\n * How a row's time reads. `\"relative\"` (default): \"5 minutes ago\", a date past six\n * days — right for a report's comments, read days apart. `\"clock\"`: the time of day\n * in the locale (\"14:05\", \"2:05 PM\") — the chat look, keksdose G4; pair it with\n * `daySeparators`, which say which day that clock time is on. Either way the full\n * date and time is in the Tooltip.\n */\n timeFormat?: \"relative\" | \"clock\";\n /**\n * A centred day line before the first row and wherever the next row is on another\n * calendar day (the device's zone): \"Today\", \"Yesterday\", else the date — keksdose\n * G4. \"Today\" / \"Yesterday\" are `Intl.RelativeTimeFormat`'s own words in the kit\n * locale, so there is no label to translate. Default false.\n */\n daySeparators?: boolean;\n /** \"Now\" for the relative times and the day lines — pin it in tests and stories.\n * Default: the clock. */\n now?: Date | number;\n /** Overrides the provider's locale for the times. */\n locale?: string;\n labels?: Partial<FeedbackThreadLabels>;\n className?: string;\n}\n\nexport function FeedbackThread({\n messages,\n loading = false,\n empty,\n renderAttachment,\n redact = true,\n now,\n locale: localeProp,\n timeFormat = \"relative\",\n daySeparators = false,\n labels: labelsProp,\n className,\n}: FeedbackThreadProps) {\n const labels = useKitLabels(\"feedbackThread\", DEFAULT_FEEDBACK_THREAD_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const file = useKitFileLabels();\n const priv = redact ? \"\" : undefined;\n const clock = useMinuteClock(now === undefined);\n const reference = now === undefined ? clock : +now;\n\n if (loading && messages.length === 0) {\n return <Skeleton lines={3} label={labels.loading} className={className} />;\n }\n if (messages.length === 0) {\n return (\n <EmptyState\n variant=\"inline\"\n size=\"sm\"\n title={empty ?? labels.empty}\n className={cn(\"justify-start\", className)}\n />\n );\n }\n\n // Per row, the calendar day of the last readable date up to it — what a day line\n // compares against.\n const days: (number | null)[] = [];\n for (const message of messages) {\n const date = toDate(message.createdAt);\n days.push(date ? dayNumber(date) : (days.at(-1) ?? null));\n }\n\n return (\n <ol aria-label={labels.thread} aria-busy={loading || undefined} className={cn(\"space-y-3\", className)}>\n {messages.flatMap((message, index) => {\n const date = toDate(message.createdAt);\n const time = date && (\n // The kit's Tooltip, not a native title: one tooltip look app-wide\n // (keksdose F0 / dev#523).\n <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: \"full\", timeStyle: \"short\" }).format(date)}>\n <time dateTime={date.toISOString()} className=\"tabular-nums\">\n {timeFormat === \"clock\"\n ? formatDate(date, \"time\", { locale })\n : formatRelativeTime(date, {\n now: reference,\n locale,\n // Past the kit's day steps it is a date: \"2 weeks ago\" makes\n // the reader do arithmetic the date already did.\n absoluteAfterDays: 6.5,\n })}\n </time>\n </Tooltip>\n );\n const rows: ReactNode[] = [];\n const day = date && dayNumber(date);\n // Against the last row WITH a readable date: an unparseable one neither starts\n // a day nor hides the next change.\n if (daySeparators && date && day !== days[index - 1]) {\n rows.push(<DaySeparator key={`day-${message.id}`} date={date} now={reference} locale={locale} />);\n }\n if (message.kind === \"event\") {\n // A list item like the rest, so \"Reopened\" is read in its place, but not an\n // article: an article is somebody's post, and this has no author.\n rows.push(\n <li\n key={message.id}\n data-event=\"\"\n className=\"flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-[var(--text-muted)]\"\n >\n <span>{message.body}</span>\n {time && <span className=\"text-[11px]\">{time}</span>}\n </li>,\n );\n return rows;\n }\n const author = message.author ?? (message.own ? labels.you : null);\n const attachments = message.attachments ?? [];\n rows.push(\n <li\n key={message.id}\n className={cn(\"flex\", message.own ? \"justify-end\" : \"justify-start\")}\n data-own={message.own ? \"\" : undefined}\n >\n <article\n className={cn(\n \"max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm\",\n message.own\n ? \"rounded-ee-sm bg-[var(--brand-bg)]\"\n : \"rounded-es-sm bg-[var(--bg-surface-2)]\",\n )}\n >\n <header className=\"mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-[var(--text-muted)]\">\n {author != null && (\n <span data-private={priv} className=\"font-medium text-[var(--text-secondary)]\">\n {author}\n </span>\n )}\n {message.staff && (\n <span className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--text-secondary)]\">\n {labels.staff}\n </span>\n )}\n {time}\n </header>\n {message.body && (\n <p\n data-private={priv}\n dir=\"auto\"\n className=\"whitespace-pre-wrap break-words text-start text-[var(--text-primary)]\"\n >\n {message.body}\n </p>\n )}\n {attachments.length > 0 && (\n <ul aria-label={labels.attachments} data-private={priv} className=\"mt-2 flex flex-wrap gap-2\">\n {attachments.map((attachment, index) => (\n <li key={attachment.id ?? `${index}-${attachment.name}`} className=\"min-w-0\">\n {renderAttachment ? (\n renderAttachment(attachment, message)\n ) : (\n <DefaultAttachment attachment={attachment} size={file.size} />\n )}\n </li>\n ))}\n </ul>\n )}\n </article>\n </li>,\n );\n return rows;\n })}\n </ol>\n );\n}\n\nfunction DefaultAttachment({\n attachment,\n size,\n}: {\n attachment: FeedbackThreadAttachment;\n size: (bytes: number) => string;\n}) {\n const { name, url, type } = attachment;\n if (url && type?.startsWith(\"image/\")) return <ImageThumbnail url={url} name={name} />;\n const content = (\n <>\n <Paperclip className=\"size-3.5 shrink-0\" aria-hidden />\n <span className=\"truncate\">{name}</span>\n {attachment.size !== undefined && (\n <span className=\"shrink-0 text-[var(--text-muted)]\">{size(attachment.size)}</span>\n )}\n </>\n );\n const chip =\n \"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)]\";\n return url ? (\n <a href={url} target=\"_blank\" rel=\"noopener noreferrer\" className={cn(chip, \"hover:bg-[var(--bg-hover)]\")}>\n {content}\n </a>\n ) : (\n <span className={chip}>{content}</span>\n );\n}\n\n/** An image attachment's thumbnail. The box is drawn before the picture arrives —\n * `loading=\"lazy\"` leaves it empty until it nears the viewport, and a URL that has\n * expired never fills it — and an empty bordered square read as a broken layout, not\n * as a picture. So the box carries an image glyph underneath until the picture\n * covers it, and swaps it for a broken-image glyph when the load fails. */\nfunction ImageThumbnail({ url, name }: { url: string; name: string }) {\n // Keyed on the URL, so a message whose attachment is replaced tries the new one.\n const [failedUrl, setFailedUrl] = useState<string | null>(null);\n const failed = failedUrl === url;\n const Glyph = failed ? ImageOff : ImageIcon;\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"relative block h-20 w-20 overflow-hidden rounded border border-[var(--border)] bg-[var(--bg-surface-2)]\"\n >\n <Glyph aria-hidden className=\"absolute inset-0 m-auto size-6 text-[var(--text-muted)]\" />\n {!failed && (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions\n <img\n src={url}\n alt={name}\n loading=\"lazy\"\n onError={() => setFailedUrl(url)}\n className=\"relative h-full w-full object-cover\"\n />\n )}\n {/* The <img> and its alt are gone once it failed; the link still needs a name. */}\n {failed && <span className=\"sr-only\">{name}</span>}\n </a>\n );\n}\n\n/** The time, refreshed once a minute while `active`, so \"2 minutes ago\" does not stay\n * \"just now\" on a page left open. Read in state rather than in render, which must be\n * pure. */\nfunction useMinuteClock(active: boolean): number {\n const [time, setTime] = useState(() => Date.now());\n useEffect(() => {\n if (!active) return;\n const id = setInterval(() => setTime(Date.now()), 60_000);\n return () => clearInterval(id);\n }, [active]);\n return time;\n}\n\n/** The local calendar day as one number (20260926), for \"same day?\" and keys. */\nfunction dayNumber(date: Date): number {\n return date.getFullYear() * 10_000 + (date.getMonth() + 1) * 100 + date.getDate();\n}\n\n/**\n * The day line of `daySeparators` (keksdose G4): \"Today\" / \"Yesterday\" from\n * `Intl.RelativeTimeFormat` (`numeric: \"auto\"`) — the locale's own words, capitalised\n * for a line that stands alone (\"heute\" → \"Heute\"; a script without case is left as\n * is) — else the weekday and date, with the year only when it is not this one.\n *\n * Counted in calendar days, not 24-hour spans: 23:50 yesterday is \"Yesterday\" at\n * 00:10 today.\n */\nfunction DaySeparator({ date, now, locale }: { date: Date; now: number; locale: string | undefined }) {\n const today = new Date(now);\n const days = Math.round(\n (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) -\n Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())) /\n 86_400_000,\n );\n let label: string;\n if (days === 0 || days === -1) {\n const word = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" }).format(days + 0, \"day\");\n label = word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);\n } else {\n label = formatDate(\n date,\n {\n weekday: \"long\",\n day: \"numeric\",\n month: \"long\",\n ...(date.getFullYear() === today.getFullYear() ? null : { year: \"numeric\" }),\n },\n { locale },\n );\n }\n const y = String(date.getFullYear()).padStart(4, \"0\");\n const m = String(date.getMonth() + 1).padStart(2, \"0\");\n const d = String(date.getDate()).padStart(2, \"0\");\n return (\n <li data-day-separator=\"\" className=\"flex items-center gap-3 py-1 text-xs text-[var(--text-muted)]\">\n <span aria-hidden className=\"h-px flex-1 bg-[var(--border)]\" />\n <time dateTime={`${y}-${m}-${d}`} className=\"font-medium\">\n {label}\n </time>\n <span aria-hidden className=\"h-px flex-1 bg-[var(--border)]\" />\n </li>\n );\n}\n\nfunction toDate(value: Date | string | number): Date | null {\n const date = value instanceof Date ? value : new Date(value);\n return Number.isNaN(date.getTime()) ? null : date;\n}\n\n/* ── Composer ─────────────────────────────────────────────────────────────── */\n\n/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the\n * labels optional, since the field reads `feedbackAttachment` from the provider. */\nexport type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, \"labels\"> & {\n labels?: Partial<FeedbackAttachmentLabels>;\n};\n\nexport interface FeedbackComposerProps {\n /**\n * Send the comment. Return the promise: the box clears when it RESOLVES, and only of\n * what was sent — text typed while it was in flight stays. A rejection keeps\n * everything for a retry (surface the error yourself; the composer stays quiet).\n *\n * `attachment` is the built-in field's one picture. Files the host uploaded ahead\n * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be\n * `\"\"` when `canSend` let an attachments-only message go.\n */\n onSend: (body: string, attachment: File | null) => void | Promise<unknown>;\n /** The send is in flight: a spinner on the button and no second send. */\n pending?: boolean;\n /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).\n * `true` for the defaults. Left out, the composer is text only. */\n attachment?: boolean | FeedbackComposerAttachment;\n /**\n * The host's own attach control, in the row with Send where the built-in field sits\n * (after it, if both are on) — keksdose G5: its support chat uploads up to N files\n * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.\n * The slot is the host's picker plus the chips of what is uploaded; the upload, the\n * refs and clearing them once `onSend` resolves stay with the host. Pair it with\n * `canSend`.\n */\n attachmentSlot?: ReactNode;\n /**\n * Whether Send is enabled, over the composer's own rule (some text in the box) —\n * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`\n * with files ready makes an empty draft sendable (`onSend(\"\", null)`), `false` while\n * an upload is still running holds even a written reply back. Left out, the text\n * decides. `pending` blocks a send either way.\n */\n canSend?: boolean;\n /**\n * Which key sends. `\"mod-enter\"` (default): Ctrl/⌘+Enter, the report dialog's and\n * note editor's shortcut, with plain Enter a new line — feedback is written in\n * paragraphs. `\"enter\"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a\n * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition\n * (Japanese, Chinese input) is the IME's, never a send.\n */\n sendOn?: \"mod-enter\" | \"enter\";\n /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this\n * reader. */\n disabledReason?: ReactNode;\n rows?: number;\n /**\n * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a\n * support ticket is asked something else (\"Reply to Anna…\") than a member adding to\n * their own report, and one provider-wide label cannot say both.\n */\n placeholder?: string;\n /**\n * The draft, controlled — for a host that keeps it itself (saves it per ticket,\n * prefills a template). Left out, the composer keeps its own. Either way a send\n * that resolves clears only what was sent: controlled, that is an\n * `onValueChange(\"\")` the host receives like any keystroke, and only if the draft\n * is still the one that went out.\n */\n value?: string;\n /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the\n * clear after a send. Required to change a controlled `value`. */\n onValueChange?: (value: string) => void;\n /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply\n * chips) or focus the box. */\n ref?: Ref<FeedbackComposerHandle>;\n labels?: Partial<FeedbackComposerLabels>;\n className?: string;\n}\n\n/**\n * What a {@link FeedbackComposer} `ref` holds.\n *\n * keksdose F9: the support admin answers the same five questions all day and wants\n * chips above the box (\"Thanks, fixed in the next release\") that drop their text in\n * where the caret is. A controlled `value` alone cannot do that well — the host sees\n * the string, not the caret, so it could only append — so the composer, which owns\n * the textarea, does the splice.\n */\nexport interface FeedbackComposerHandle {\n /**\n * Insert `text` at the caret, replacing any selection (the caret the box last had:\n * a click on a chip blurs it, and the selection survives the blur), then focus the\n * box with the caret after the inserted text so the reply can go on. Nothing is\n * added around it — put a space or a newline in `text` if the reply needs one. A\n * no-op while `disabledReason` replaces the box.\n */\n insertText: (text: string) => void;\n focus: () => void;\n}\n\nconst noSubscribe = () => () => {};\nconst isApple = () =>\n typeof navigator !== \"undefined\" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);\n\n/**\n * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,\n * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor\n * use, so the habit carries across the feature. Plain Enter is a new line: feedback is\n * written in paragraphs, unlike a chat — which `sendOn=\"enter\"` is for (keksdose G5).\n */\nexport function FeedbackComposer({\n onSend,\n pending = false,\n attachment,\n attachmentSlot,\n canSend: canSendProp,\n sendOn = \"mod-enter\",\n disabledReason,\n rows = 3,\n placeholder,\n value,\n onValueChange,\n ref,\n labels: labelsProp,\n className,\n}: FeedbackComposerProps) {\n const labels = useKitLabels(\"feedbackComposer\", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);\n const [ownDraft, setOwnDraft] = useState(\"\");\n const controlled = value !== undefined;\n const draft = controlled ? value : ownDraft;\n const [file, setFile] = useState<File | null>(null);\n const root = useRef<HTMLDivElement>(null);\n const box = useRef<HTMLTextAreaElement>(null);\n // The draft as of the last commit. The send's `.then` and `insertText` run after\n // renders their closure did not see — text typed while the send was in flight, a\n // second chip clicked before the first one's render — and must not act on a stale\n // string (for a controlled draft there is no updater function to lean on).\n const latest = useRef(draft);\n useLayoutEffect(() => {\n latest.current = draft;\n });\n // Where the caret goes once an inserted text has rendered.\n const caret = useRef<number | null>(null);\n useLayoutEffect(() => {\n const el = box.current;\n if (caret.current === null || !el) return;\n el.focus();\n el.setSelectionRange(caret.current, caret.current);\n caret.current = null;\n });\n\n const setDraft = (next: string) => {\n latest.current = next;\n if (!controlled) setOwnDraft(next);\n onValueChange?.(next);\n };\n\n useImperativeHandle(ref, () => ({\n insertText: (text) => {\n const el = box.current;\n if (!el) return;\n const current = latest.current;\n // A second insert before the first has rendered goes after the first, not at the\n // textarea's not-yet-moved caret. Otherwise the textarea's selection, which may\n // be past the end of a controlled value the host has just shortened: clamp it.\n const pending = caret.current;\n const start = Math.min(pending ?? el.selectionStart ?? current.length, current.length);\n const end = pending ?? Math.max(start, Math.min(el.selectionEnd ?? start, current.length));\n caret.current = start + text.length;\n setDraft(current.slice(0, start) + text + current.slice(end));\n },\n focus: () => box.current?.focus(),\n }));\n // The server snapshot is \"Ctrl\"; the client corrects it after hydration.\n const modifier = useSyncExternalStore(\n noSubscribe,\n () => (isApple() ? \"⌘\" : \"Ctrl\"),\n () => \"Ctrl\",\n );\n\n if (disabledReason != null && disabledReason !== false) {\n return <p className={cn(\"text-xs text-[var(--text-muted)]\", className)}>{disabledReason}</p>;\n }\n\n const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;\n const send = () => {\n if (!canSend) return;\n const sentDraft = draft;\n const sentFile = file;\n Promise.resolve(onSend(draft.trim(), file))\n .then(() => {\n if (latest.current === sentDraft) setDraft(\"\");\n setFile((current) => (current === sentFile ? null : current));\n })\n .catch(() => {});\n };\n\n const config = attachment === true ? {} : attachment || null;\n\n return (\n <div ref={root} className={cn(\"space-y-2\", className)}>\n <Textarea\n rows={rows}\n dir=\"auto\"\n aria-label={labels.field}\n ref={box}\n placeholder={placeholder ?? labels.placeholder}\n value={draft}\n onChange={(event) => setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key !== \"Enter\") return;\n const mod = event.ctrlKey || event.metaKey;\n // Under \"enter\": plain Enter sends, Shift+Enter falls through to the\n // textarea's new line, and an Enter that ends an IME composition is the\n // IME's (keyCode 229 is how Safari reports it after the composition ended).\n const chat =\n sendOn === \"enter\" &&\n !event.shiftKey &&\n !event.altKey &&\n !event.nativeEvent.isComposing &&\n event.keyCode !== 229;\n if (mod || chat) {\n event.preventDefault();\n send();\n }\n }}\n />\n <div className=\"flex flex-wrap items-end justify-between gap-2\">\n {config || attachmentSlot != null ? (\n <div className=\"flex min-w-0 flex-wrap items-end gap-2\">\n {config && (\n <FeedbackAttachmentField\n value={file}\n onChange={setFile}\n labels={config.labels}\n accept={config.accept}\n maxBytes={config.maxBytes}\n onError={config.onError}\n onCaptureScreenshot={config.onCaptureScreenshot}\n // The box is this field's sibling; a paste in it bubbles to `root`.\n pasteFrom={root}\n />\n )}\n {attachmentSlot}\n </div>\n ) : (\n <span />\n )}\n <div className=\"ms-auto flex items-center gap-2\">\n <span className=\"text-xs text-[var(--text-placeholder)]\">\n {sendOn === \"enter\" ? labels.sendHintEnter : labels.sendHint(modifier)}\n </span>\n <Button onClick={send} disabled={!canSend} aria-busy={pending || undefined}>\n {pending ? (\n <Spinner label={null} className=\"size-4\" />\n ) : (\n <Send className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n )}\n {labels.send}\n </Button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":["index","pending"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DragEvent, ReactElement } from 'react';
|
|
2
|
-
import { aY as UseFilePickerOptions } from '../kit-labels-
|
|
2
|
+
import { aY as UseFilePickerOptions } from '../kit-labels-BHfRBbHs.js';
|
|
3
3
|
import '../components/data-table-labels.js';
|
|
4
4
|
import '../components/mini-calendar.js';
|
|
5
5
|
import '../components/calendar-heatmap.js';
|
package/dist/i18n/defaults.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import '../components/calendar-heatmap.js';
|
|
|
5
5
|
import '../components/popover.js';
|
|
6
6
|
import '../components/chip.js';
|
|
7
7
|
import '../components/field-sync.js';
|
|
8
|
-
export { A as AppShellLabels, C as CalculatorLabels, v as ComboboxLabels, w as CommonLabels, D as CurrencyLabels, E as DEFAULT_APP_SHELL_LABELS, F as DEFAULT_CALCULATOR_LABELS, G as DEFAULT_COMBOBOX_LABELS, H as DEFAULT_COMMON_LABELS, J as DEFAULT_CURRENCY_LABELS, K as DEFAULT_DATE_PICKER_LABELS, L as DEFAULT_FILE_LABELS, O as DEFAULT_MULTI_SELECT_LABELS, Q as DEFAULT_PICKER_SHEET_LABELS, R as DEFAULT_SWIPEABLE_ROW_LABELS, T as DEFAULT_TOP_BAR_LABELS, U as DatePickerLabels, ac as FileLabels, az as KitLinkComponent, aA as KitLinkProps, aC as LabelOverride, aE as MultiSelectLabels, aH as PickerSheetLabels, aM as SwipeableRowLabels, aT as TopBarLabels, aU as UiKitLabelOverrides, aV as UiKitLabels, aW as UiKitProvider, aX as UiKitProviderProps, a$ as formatFileSize, b1 as missingKitLabels, b4 as useKitFileLabels, b5 as useKitLabelOverrides, b6 as useKitLabels, b7 as useKitLink, b8 as useKitLocale, b9 as useKitWeekStart } from '../kit-labels-
|
|
8
|
+
export { A as AppShellLabels, C as CalculatorLabels, v as ComboboxLabels, w as CommonLabels, D as CurrencyLabels, E as DEFAULT_APP_SHELL_LABELS, F as DEFAULT_CALCULATOR_LABELS, G as DEFAULT_COMBOBOX_LABELS, H as DEFAULT_COMMON_LABELS, J as DEFAULT_CURRENCY_LABELS, K as DEFAULT_DATE_PICKER_LABELS, L as DEFAULT_FILE_LABELS, O as DEFAULT_MULTI_SELECT_LABELS, Q as DEFAULT_PICKER_SHEET_LABELS, R as DEFAULT_SWIPEABLE_ROW_LABELS, T as DEFAULT_TOP_BAR_LABELS, U as DatePickerLabels, ac as FileLabels, az as KitLinkComponent, aA as KitLinkProps, aC as LabelOverride, aE as MultiSelectLabels, aH as PickerSheetLabels, aM as SwipeableRowLabels, aT as TopBarLabels, aU as UiKitLabelOverrides, aV as UiKitLabels, aW as UiKitProvider, aX as UiKitProviderProps, a$ as formatFileSize, b1 as missingKitLabels, b4 as useKitFileLabels, b5 as useKitLabelOverrides, b6 as useKitLabels, b7 as useKitLink, b8 as useKitLocale, b9 as useKitWeekStart } from '../kit-labels-BHfRBbHs.js';
|
|
9
9
|
import '../wizard/types.js';
|
|
10
10
|
import '../tour/tour.js';
|
|
11
11
|
import '../search/command-palette.js';
|
package/dist/i18n/locales/de.js
CHANGED
|
@@ -15,6 +15,7 @@ function uiKitLabelsDe(numberLocale = "de-DE") {
|
|
|
15
15
|
category: "Kategorie",
|
|
16
16
|
subject: "Betreff",
|
|
17
17
|
body: "Was ist passiert?",
|
|
18
|
+
bodyOptional: "Was ist passiert? (optional)",
|
|
18
19
|
attachment: "Screenshot",
|
|
19
20
|
submitHint: "Strg/\u2318 + Enter zum Senden",
|
|
20
21
|
cancel: "Abbrechen",
|