@eifi1/ui-kit 0.14.2 → 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.
Files changed (108) hide show
  1. package/dist/components/alert-banner.js +5 -2
  2. package/dist/components/alert-banner.js.map +1 -1
  3. package/dist/components/amount-input.d.ts +1 -1
  4. package/dist/components/autocomplete.js +9 -2
  5. package/dist/components/autocomplete.js.map +1 -1
  6. package/dist/components/bulk-action-bar.js +6 -3
  7. package/dist/components/bulk-action-bar.js.map +1 -1
  8. package/dist/components/button-group.d.ts +1 -1
  9. package/dist/components/calculator.d.ts +1 -1
  10. package/dist/components/calendar-heatmap.js +5 -5
  11. package/dist/components/calendar-heatmap.js.map +1 -1
  12. package/dist/components/copy-button.d.ts +1 -1
  13. package/dist/components/data-table-cells.d.ts +1 -1
  14. package/dist/components/data-table-filter-popover.d.ts +1 -1
  15. package/dist/components/data-table-filter-popover.js +3 -3
  16. package/dist/components/data-table-filter-popover.js.map +1 -1
  17. package/dist/components/data-table-filters.d.ts +1 -1
  18. package/dist/components/data-table.d.ts +1 -1
  19. package/dist/components/data-table.js +12 -4
  20. package/dist/components/data-table.js.map +1 -1
  21. package/dist/components/field.js +4 -1
  22. package/dist/components/field.js.map +1 -1
  23. package/dist/components/file-button.d.ts +1 -1
  24. package/dist/components/file-dropzone.d.ts +1 -1
  25. package/dist/components/form-actions.d.ts +1 -1
  26. package/dist/components/image-grid.d.ts +8 -1
  27. package/dist/components/image-grid.js +16 -3
  28. package/dist/components/image-grid.js.map +1 -1
  29. package/dist/components/measured-grid.js +2 -2
  30. package/dist/components/measured-grid.js.map +1 -1
  31. package/dist/components/money-field.d.ts +1 -1
  32. package/dist/components/multi-select.js +3 -0
  33. package/dist/components/multi-select.js.map +1 -1
  34. package/dist/components/number-field.d.ts +1 -1
  35. package/dist/components/number-input.d.ts +5 -2
  36. package/dist/components/number-input.js +11 -3
  37. package/dist/components/number-input.js.map +1 -1
  38. package/dist/components/numpad-sheet.d.ts +1 -1
  39. package/dist/components/series-chart.js +37 -8
  40. package/dist/components/series-chart.js.map +1 -1
  41. package/dist/components/settings-fields.d.ts +1 -1
  42. package/dist/components/stat-tile.js +3 -3
  43. package/dist/components/stat-tile.js.map +1 -1
  44. package/dist/components/text-link.d.ts +1 -1
  45. package/dist/components/time-input.d.ts +1 -1
  46. package/dist/components/treemap.d.ts +3 -2
  47. package/dist/components/treemap.js +14 -3
  48. package/dist/components/treemap.js.map +1 -1
  49. package/dist/components/ui.d.ts +1 -1
  50. package/dist/components/ui.js +44 -10
  51. package/dist/components/ui.js.map +1 -1
  52. package/dist/components/use-table-state.d.ts +1 -1
  53. package/dist/{data-table-Drun8Fk9.d.ts → data-table-CfVXtCeG.d.ts} +4 -3
  54. package/dist/data-table.d.ts +1 -1
  55. package/dist/feedback/feedback-thread.js +31 -12
  56. package/dist/feedback/feedback-thread.js.map +1 -1
  57. package/dist/hooks/use-file-drop.d.ts +1 -1
  58. package/dist/i18n/defaults.d.ts +1 -1
  59. package/dist/i18n/kit-labels.d.ts +1 -1
  60. package/dist/i18n/locales/de-CH-informal.d.ts +1 -1
  61. package/dist/i18n/locales/de-CH.d.ts +1 -1
  62. package/dist/i18n/locales/de-informal.d.ts +1 -1
  63. package/dist/i18n/locales/de.d.ts +1 -1
  64. package/dist/i18n/locales/es.d.ts +1 -1
  65. package/dist/i18n/locales/fr.d.ts +1 -1
  66. package/dist/i18n/locales/hu.d.ts +1 -1
  67. package/dist/i18n/locales/it.d.ts +1 -1
  68. package/dist/i18n/locales/zh.d.ts +1 -1
  69. package/dist/index.d.ts +3 -3
  70. package/dist/{kit-labels-Mz8zZHIF.d.ts → kit-labels-BHfRBbHs.d.ts} +5 -1
  71. package/dist/lib/strip-fade.d.ts +31 -0
  72. package/dist/lib/strip-fade.js +54 -0
  73. package/dist/lib/strip-fade.js.map +1 -0
  74. package/dist/rhf/fields.d.ts +1 -1
  75. package/dist/rhf/form.d.ts +1 -1
  76. package/dist/rhf/form.js +1 -1
  77. package/dist/rhf/form.js.map +1 -1
  78. package/dist/rhf.d.ts +1 -1
  79. package/dist/shell/app-shell.d.ts +11 -2
  80. package/dist/shell/app-shell.js +20 -4
  81. package/dist/shell/app-shell.js.map +1 -1
  82. package/dist/shell/top-bar-brand.d.ts +1 -1
  83. package/dist/shell.d.ts +1 -1
  84. package/dist/wizard/stepper-nav.d.ts +1 -1
  85. package/dist/wizard/stepper-nav.js +14 -2
  86. package/dist/wizard/stepper-nav.js.map +1 -1
  87. package/dist/wizard.d.ts +1 -1
  88. package/package.json +1 -1
  89. package/src/components/alert-banner.tsx +10 -2
  90. package/src/components/autocomplete.tsx +10 -1
  91. package/src/components/bulk-action-bar.tsx +12 -3
  92. package/src/components/calendar-heatmap.tsx +10 -5
  93. package/src/components/data-table-filter-popover.tsx +6 -3
  94. package/src/components/data-table.tsx +21 -7
  95. package/src/components/field.tsx +4 -1
  96. package/src/components/image-grid.tsx +30 -2
  97. package/src/components/measured-grid.tsx +3 -2
  98. package/src/components/multi-select.tsx +3 -0
  99. package/src/components/number-input.tsx +23 -4
  100. package/src/components/series-chart.tsx +56 -8
  101. package/src/components/stat-tile.tsx +8 -3
  102. package/src/components/treemap.tsx +30 -5
  103. package/src/components/ui.tsx +91 -11
  104. package/src/feedback/feedback-thread.tsx +36 -13
  105. package/src/lib/strip-fade.ts +82 -0
  106. package/src/rhf/form.tsx +3 -1
  107. package/src/shell/app-shell.tsx +34 -7
  108. package/src/wizard/stepper-nav.tsx +23 -2
@@ -42,7 +42,10 @@ function Field({
42
42
  {
43
43
  "data-slot": "field",
44
44
  className: cn(
45
- "grid gap-1.5",
45
+ // `content-start`: in a grid row next to a taller item (one with a hint), a
46
+ // stretched Field would hand the extra height to its rows — the label grew,
47
+ // and the control sat lower than its neighbour's (showcase audit, #/forms).
48
+ "grid content-start gap-1.5",
46
49
  // A hidden label is `position: absolute`; `relative` keeps its containing
47
50
  // block here rather than the page's (see sr-only-containment.test).
48
51
  labelVisibility !== "visible" && "relative",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n * {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a `FormField` render — the markup is the same\n * whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `FormItem` + `FormLabel` from\n * `@eifi1/ui-kit/rhf` do the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/ui.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./ui\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n /** The id the label's `htmlFor` points at. */\n id: string;\n /** The ids of the hint and the error that are rendered, or `undefined` when\n * neither is. */\n \"aria-describedby\": string | undefined;\n /** `true` while the field has an error, `undefined` otherwise. */\n \"aria-invalid\": true | undefined;\n /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n * is what a screen reader hears instead. */\n \"aria-required\": true | undefined;\n}\n\n/**\n * The second argument of a `Field`'s render-prop children: what a GROUP needs that\n * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing\n * at a `role=\"radiogroup\"` div names nothing — so a group (a {@link ToggleGroup})\n * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}\n * so the spread every existing control takes is unchanged.\n */\nexport interface FieldRenderMeta {\n /** The label element's id, or `undefined` when the field has no label. */\n labelId: string | undefined;\n}\n\n/**\n * Where the label is visible. `\"visible\"` (default); `\"sr-only\"`: never drawn, still\n * the control's name; `\"below-sm\"` / `\"below-md\"` / `\"below-lg\"`: drawn only under\n * that breakpoint and screen-reader-only from it up.\n *\n * For table-like editors — kastlan's journal entry lines\n * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop\n * row sits under column headers that already say \"Account\" and \"Amount\", but the\n * phone layout stacks each line as a card and needs the labels back. The name stays\n * on the control at every width; only the ink changes.\n */\nexport type FieldLabelVisibility = \"visible\" | \"sr-only\" | \"below-sm\" | \"below-md\" | \"below-lg\";\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {\n visible: undefined,\n \"sr-only\": \"sr-only\",\n \"below-sm\": \"sm:sr-only\",\n \"below-md\": \"md:sr-only\",\n \"below-lg\": \"lg:sr-only\",\n};\n\nexport interface FieldProps {\n /** The label above the control. Omit it for a group whose control is labelled\n * some other way; the hint and error still render. */\n label?: ReactNode;\n /** Draws the kit's required mark after the label, and sets `aria-required` on the\n * render-prop control. */\n required?: boolean;\n /** Muted helper text below the control. */\n hint?: ReactNode;\n /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n * `touched && errors.x` evaluates to on the happy path. */\n error?: ReactNode;\n /** The control's id. Defaults to a generated one; set it when the control carries\n * its own id (plain children). */\n htmlFor?: string;\n /** Dims the label with its control. */\n disabled?: boolean;\n /** The label's size: `sm` for a dense row, `md` otherwise. */\n labelSize?: \"sm\" | \"md\";\n /** See {@link FieldLabelVisibility}. */\n labelVisibility?: FieldLabelVisibility;\n /** Wrapper className. */\n className?: string;\n /** The control. A function receives {@link FieldControlProps} to spread on it, and\n * {@link FieldRenderMeta} (the label's id, for a group). */\n children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);\n}\n\nconst isShown = (node: ReactNode) =>\n node !== undefined && node !== null && node !== false && node !== \"\";\n\nexport function Field({\n label,\n required,\n hint,\n error,\n htmlFor,\n disabled,\n labelSize,\n labelVisibility = \"visible\",\n className,\n children,\n}: FieldProps) {\n const generated = useId();\n const id = htmlFor ?? `${generated}-control`;\n const hintId = `${generated}-hint`;\n const errorId = `${generated}-error`;\n const labelId = `${generated}-label`;\n const hasHint = isShown(hint);\n const hasError = isShown(error);\n const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n const control: FieldControlProps = {\n id,\n \"aria-describedby\": describedBy || undefined,\n \"aria-invalid\": hasError || undefined,\n \"aria-required\": required || undefined,\n };\n return (\n <div\n data-slot=\"field\"\n className={cn(\n \"grid gap-1.5\",\n // A hidden label is `position: absolute`; `relative` keeps its containing\n // block here rather than the page's (see sr-only-containment.test).\n labelVisibility !== \"visible\" && \"relative\",\n className,\n )}\n >\n {label !== undefined && (\n <Label\n id={labelId}\n htmlFor={id}\n required={required}\n disabled={disabled}\n size={labelSize}\n data-error={hasError || undefined}\n className={cn(\"data-[error=true]:text-[var(--danger)]\", LABEL_VISIBILITY[labelVisibility])}\n >\n {label}\n </Label>\n )}\n {typeof children === \"function\"\n ? children(control, { labelId: label !== undefined ? labelId : undefined })\n : children}\n {hasHint && (\n <p id={hintId} className=\"text-[11px] leading-tight text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {hasError && (\n <p id={errorId} className=\"text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </p>\n )}\n </div>\n );\n}\n"],"mappings":";AAqJI,SAWI,KAXJ;AA9GJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,aAAa;AA0CtB,MAAM,mBAAqE;AAAA,EACzE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;AA8BA,MAAM,UAAU,CAAC,SACf,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAE7D,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,QAAQ,IAAI;AAC5B,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA,oBAAoB,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,MAEC;AAAA,kBAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,cAAY,YAAY;AAAA,YACxB,WAAW,GAAG,0CAA0C,iBAAiB,eAAe,CAAC;AAAA,YAExF;AAAA;AAAA,QACH;AAAA,QAED,OAAO,aAAa,aACjB,SAAS,SAAS,EAAE,SAAS,UAAU,SAAY,UAAU,OAAU,CAAC,IACxE;AAAA,QACH,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,sDACtB,gBACH;AAAA,QAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,kDACvB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n * {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a `FormField` render — the markup is the same\n * whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `FormItem` + `FormLabel` from\n * `@eifi1/ui-kit/rhf` do the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/ui.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./ui\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n /** The id the label's `htmlFor` points at. */\n id: string;\n /** The ids of the hint and the error that are rendered, or `undefined` when\n * neither is. */\n \"aria-describedby\": string | undefined;\n /** `true` while the field has an error, `undefined` otherwise. */\n \"aria-invalid\": true | undefined;\n /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n * is what a screen reader hears instead. */\n \"aria-required\": true | undefined;\n}\n\n/**\n * The second argument of a `Field`'s render-prop children: what a GROUP needs that\n * a single control does not. `htmlFor` names an `<input>`, but a `<label>` pointing\n * at a `role=\"radiogroup\"` div names nothing — so a group (a {@link ToggleGroup})\n * takes `aria-labelledby={labelId}` instead. Kept out of {@link FieldControlProps}\n * so the spread every existing control takes is unchanged.\n */\nexport interface FieldRenderMeta {\n /** The label element's id, or `undefined` when the field has no label. */\n labelId: string | undefined;\n}\n\n/**\n * Where the label is visible. `\"visible\"` (default); `\"sr-only\"`: never drawn, still\n * the control's name; `\"below-sm\"` / `\"below-md\"` / `\"below-lg\"`: drawn only under\n * that breakpoint and screen-reader-only from it up.\n *\n * For table-like editors — kastlan's journal entry lines\n * (accounting/components/wizard/journal-entry-lines-step.tsx) — where a desktop\n * row sits under column headers that already say \"Account\" and \"Amount\", but the\n * phone layout stacks each line as a card and needs the labels back. The name stays\n * on the control at every width; only the ink changes.\n */\nexport type FieldLabelVisibility = \"visible\" | \"sr-only\" | \"below-sm\" | \"below-md\" | \"below-lg\";\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst LABEL_VISIBILITY: Record<FieldLabelVisibility, string | undefined> = {\n visible: undefined,\n \"sr-only\": \"sr-only\",\n \"below-sm\": \"sm:sr-only\",\n \"below-md\": \"md:sr-only\",\n \"below-lg\": \"lg:sr-only\",\n};\n\nexport interface FieldProps {\n /** The label above the control. Omit it for a group whose control is labelled\n * some other way; the hint and error still render. */\n label?: ReactNode;\n /** Draws the kit's required mark after the label, and sets `aria-required` on the\n * render-prop control. */\n required?: boolean;\n /** Muted helper text below the control. */\n hint?: ReactNode;\n /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n * `touched && errors.x` evaluates to on the happy path. */\n error?: ReactNode;\n /** The control's id. Defaults to a generated one; set it when the control carries\n * its own id (plain children). */\n htmlFor?: string;\n /** Dims the label with its control. */\n disabled?: boolean;\n /** The label's size: `sm` for a dense row, `md` otherwise. */\n labelSize?: \"sm\" | \"md\";\n /** See {@link FieldLabelVisibility}. */\n labelVisibility?: FieldLabelVisibility;\n /** Wrapper className. */\n className?: string;\n /** The control. A function receives {@link FieldControlProps} to spread on it, and\n * {@link FieldRenderMeta} (the label's id, for a group). */\n children: ReactNode | ((control: FieldControlProps, meta: FieldRenderMeta) => ReactNode);\n}\n\nconst isShown = (node: ReactNode) =>\n node !== undefined && node !== null && node !== false && node !== \"\";\n\nexport function Field({\n label,\n required,\n hint,\n error,\n htmlFor,\n disabled,\n labelSize,\n labelVisibility = \"visible\",\n className,\n children,\n}: FieldProps) {\n const generated = useId();\n const id = htmlFor ?? `${generated}-control`;\n const hintId = `${generated}-hint`;\n const errorId = `${generated}-error`;\n const labelId = `${generated}-label`;\n const hasHint = isShown(hint);\n const hasError = isShown(error);\n const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n const control: FieldControlProps = {\n id,\n \"aria-describedby\": describedBy || undefined,\n \"aria-invalid\": hasError || undefined,\n \"aria-required\": required || undefined,\n };\n return (\n <div\n data-slot=\"field\"\n className={cn(\n // `content-start`: in a grid row next to a taller item (one with a hint), a\n // stretched Field would hand the extra height to its rows — the label grew,\n // and the control sat lower than its neighbour's (showcase audit, #/forms).\n \"grid content-start gap-1.5\",\n // A hidden label is `position: absolute`; `relative` keeps its containing\n // block here rather than the page's (see sr-only-containment.test).\n labelVisibility !== \"visible\" && \"relative\",\n className,\n )}\n >\n {label !== undefined && (\n <Label\n id={labelId}\n htmlFor={id}\n required={required}\n disabled={disabled}\n size={labelSize}\n data-error={hasError || undefined}\n className={cn(\"data-[error=true]:text-[var(--danger)]\", LABEL_VISIBILITY[labelVisibility])}\n >\n {label}\n </Label>\n )}\n {typeof children === \"function\"\n ? children(control, { labelId: label !== undefined ? labelId : undefined })\n : children}\n {hasHint && (\n <p id={hintId} className=\"text-[11px] leading-tight text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {hasError && (\n <p id={errorId} className=\"text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </p>\n )}\n </div>\n );\n}\n"],"mappings":";AAqJI,SAcI,KAdJ;AA9GJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,aAAa;AA0CtB,MAAM,mBAAqE;AAAA,EACzE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;AA8BA,MAAM,UAAU,CAAC,SACf,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAE7D,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,QAAQ,IAAI;AAC5B,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA;AAAA,QAGA,oBAAoB,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,MAEC;AAAA,kBAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,cAAY,YAAY;AAAA,YACxB,WAAW,GAAG,0CAA0C,iBAAiB,eAAe,CAAC;AAAA,YAExF;AAAA;AAAA,QACH;AAAA,QAED,OAAO,aAAa,aACjB,SAAS,SAAS,EAAE,SAAS,UAAU,SAAY,UAAU,OAAU,CAAC,IACxE;AAAA,QACH,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,sDACtB,gBACH;AAAA,QAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,kDACvB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
@@ -1,5 +1,5 @@
1
1
  import 'react';
2
- export { M as DEFAULT_FILE_PICKER_LABELS, aa as FileButton, ab as FileButtonProps, ba as FilePickHandler, ad as FilePickerLabels, ae as FileRejection, af as FileRejectionReason, ag as FileScreenOptions, aY as UseFilePickerOptions, aZ as UseFilePickerReturn, bb as formatAccept, bc as judgePick, b0 as matchesAccept, bd as screenFiles, be as summariseRejections, b3 as useFilePicker } from '../kit-labels-Mz8zZHIF.js';
2
+ export { M as DEFAULT_FILE_PICKER_LABELS, aa as FileButton, ab as FileButtonProps, ba as FilePickHandler, ad as FilePickerLabels, ae as FileRejection, af as FileRejectionReason, ag as FileScreenOptions, aY as UseFilePickerOptions, aZ as UseFilePickerReturn, bb as formatAccept, bc as judgePick, b0 as matchesAccept, bd as screenFiles, be as summariseRejections, b3 as useFilePicker } from '../kit-labels-BHfRBbHs.js';
3
3
  import './data-table-labels.js';
4
4
  import './mini-calendar.js';
5
5
  import './calendar-heatmap.js';
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
3
- import { ae as FileRejection, ba as FilePickHandler, ad as FilePickerLabels } from '../kit-labels-Mz8zZHIF.js';
3
+ import { ae as FileRejection, ba as FilePickHandler, ad as FilePickerLabels } from '../kit-labels-BHfRBbHs.js';
4
4
  import './data-table-labels.js';
5
5
  import './mini-calendar.js';
6
6
  import './calendar-heatmap.js';
@@ -1,5 +1,5 @@
1
1
  import 'react';
2
- export { N as DEFAULT_FORM_ACTIONS_LABELS, aj as FormActions, ak as FormActionsAlign, al as FormActionsDestructive, am as FormActionsLabels, an as FormActionsPlacement, ao as FormActionsProps } from '../kit-labels-Mz8zZHIF.js';
2
+ export { N as DEFAULT_FORM_ACTIONS_LABELS, aj as FormActions, ak as FormActionsAlign, al as FormActionsDestructive, am as FormActionsLabels, an as FormActionsPlacement, ao as FormActionsProps } from '../kit-labels-BHfRBbHs.js';
3
3
  import './data-table-labels.js';
4
4
  import './mini-calendar.js';
5
5
  import './calendar-heatmap.js';
@@ -51,6 +51,13 @@ interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"
51
51
  };
52
52
  labels?: Partial<ImageGridLabels>;
53
53
  }
54
+ /**
55
+ * A file name as stem and extension, so a tile can cut the stem and keep the
56
+ * extension whole: "floor-plan-level-2.p / df" (a break inside the extension) told the
57
+ * reader less than "floor-plan-le….pdf" does. A leading dot (".env") or an
58
+ * "extension" longer than five characters is not treated as one.
59
+ */
60
+ declare function splitFileName(name: string): [stem: string, ext: string];
54
61
  /**
55
62
  * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect
56
63
  * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each
@@ -64,4 +71,4 @@ interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"
64
71
  */
65
72
  declare function ImageGrid({ items, fetcher, renderActions, onOpen, columns, minTileSize, aspect, lightbox, labels: labelsProp, className, style, ...rest }: ImageGridProps): react.JSX.Element;
66
73
 
67
- export { DEFAULT_IMAGE_GRID_LABELS, ImageGrid, type ImageGridLabels, type ImageGridProps };
74
+ export { DEFAULT_IMAGE_GRID_LABELS, ImageGrid, type ImageGridLabels, type ImageGridProps, splitFileName };
@@ -16,6 +16,11 @@ const ASPECT_CLASS = {
16
16
  video: "aspect-video",
17
17
  auto: "aspect-[4/3]"
18
18
  };
19
+ function splitFileName(name) {
20
+ const dot = name.lastIndexOf(".");
21
+ if (dot <= 0 || name.length - dot > 6) return [name, ""];
22
+ return [name.slice(0, dot), name.slice(dot)];
23
+ }
19
24
  function ImageGrid({
20
25
  items,
21
26
  fetcher,
@@ -63,7 +68,7 @@ function ImageGrid({
63
68
  ),
64
69
  children: kind === "file" ? /* @__PURE__ */ jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]", children: [
65
70
  /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6 shrink-0 text-[var(--text-muted)]" }),
66
- /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "line-clamp-2 break-all", children: item.fileName ?? item.alt })
71
+ /* @__PURE__ */ jsx(FileNameLabel, { name: item.fileName ?? item.alt ?? "" })
67
72
  ] }) : /* @__PURE__ */ jsx(
68
73
  AuthedImage,
69
74
  {
@@ -82,7 +87,7 @@ function ImageGrid({
82
87
  {
83
88
  role: "group",
84
89
  "aria-label": labels.actions(name),
85
- className: "absolute end-1 top-1 flex gap-1",
90
+ className: "absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm",
86
91
  children: actions
87
92
  }
88
93
  ),
@@ -105,8 +110,16 @@ function ImageGrid({
105
110
  )
106
111
  ] });
107
112
  }
113
+ function FileNameLabel({ name }) {
114
+ const [stem, ext] = splitFileName(name);
115
+ return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "flex max-w-full min-w-0", children: [
116
+ /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: stem }),
117
+ ext && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: ext })
118
+ ] });
119
+ }
108
120
  export {
109
121
  DEFAULT_IMAGE_GRID_LABELS,
110
- ImageGrid
122
+ ImageGrid,
123
+ splitFileName
111
124
  };
112
125
  //# sourceMappingURL=image-grid.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n /** The list's accessible name. */\n list: string;\n /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n item: (index: number, count: number) => string;\n /** The name of the group of per-image actions, given the image's name. */\n actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n list: \"Images\",\n item: (index, count) => `Image ${index} of ${count}`,\n actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n items: readonly ImageItem[];\n /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n * images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n fetcher?: AuthedFetcher | null;\n /**\n * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n * and a screen reader flattens it into the outer one's name, where it cannot be\n * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n */\n renderActions?: (item: ImageItem, index: number) => ReactNode;\n /**\n * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n * index in the URL, or that opens something else.\n */\n onOpen?: (index: number) => void;\n /**\n * A fixed column count. Left out, the grid is responsive: as many columns of at\n * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n * a phone and eight across on a desktop page — no breakpoints to choose.\n */\n columns?: number;\n /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n minTileSize?: number;\n /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n * own proportions (a floor plan), within a square-ish box. */\n aspect?: \"square\" | \"video\" | \"auto\";\n /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n lightbox?: {\n loop?: boolean;\n zoom?: boolean;\n download?: boolean;\n onDownload?: (item: ImageItem, index: number) => void;\n labels?: Partial<LightboxLabels>;\n };\n labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n square: \"aspect-square\",\n video: \"aspect-video\",\n auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n items,\n fetcher,\n renderActions,\n onOpen,\n columns,\n minTileSize = 96,\n aspect = \"square\",\n lightbox,\n labels: labelsProp,\n className,\n style,\n ...rest\n}: ImageGridProps) {\n const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const count = items.length;\n\n const gridStyle: CSSProperties = {\n gridTemplateColumns:\n columns !== undefined\n ? `repeat(${columns}, minmax(0, 1fr))`\n : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n ...style,\n };\n\n return (\n <>\n <ul\n aria-label={labels.list}\n {...rest}\n className={cn(\"grid gap-2\", className)}\n style={gridStyle}\n >\n {items.map((item, i) => {\n const name = item.alt || labels.item(i + 1, count);\n const kind = imageItemKind(item);\n const actions = renderActions?.(item, i);\n return (\n <li key={item.key ?? item.src} className=\"relative min-w-0\">\n <button\n type=\"button\"\n aria-label={name}\n onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n className={cn(\n \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n ASPECT_CLASS[aspect],\n )}\n >\n {kind === \"file\" ? (\n <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n <span aria-hidden className=\"line-clamp-2 break-all\">{item.fileName ?? item.alt}</span>\n </span>\n ) : (\n <AuthedImage\n src={item.thumbnailSrc ?? item.src}\n // The button is named already; the picture inside it is decoration\n // to a reader, or the name would be read twice.\n alt=\"\"\n fetcher={fetcher}\n loading=\"lazy\"\n wrapperClassName=\"h-full w-full\"\n className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n />\n )}\n </button>\n {actions !== undefined && actions !== null && actions !== false && (\n <div\n role=\"group\"\n aria-label={labels.actions(name)}\n className=\"absolute end-1 top-1 flex gap-1\"\n >\n {actions}\n </div>\n )}\n {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n )}\n </li>\n );\n })}\n </ul>\n {!onOpen && (\n <Lightbox\n open={openIndex !== null}\n onClose={() => setOpenIndex(null)}\n items={items}\n index={openIndex ?? 0}\n onIndexChange={setOpenIndex}\n fetcher={fetcher}\n {...lightbox}\n />\n )}\n </>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n /** The list's accessible name. */\n list: string;\n /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n item: (index: number, count: number) => string;\n /** The name of the group of per-image actions, given the image's name. */\n actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n list: \"Images\",\n item: (index, count) => `Image ${index} of ${count}`,\n actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n items: readonly ImageItem[];\n /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n * images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n fetcher?: AuthedFetcher | null;\n /**\n * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n * and a screen reader flattens it into the outer one's name, where it cannot be\n * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n */\n renderActions?: (item: ImageItem, index: number) => ReactNode;\n /**\n * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n * index in the URL, or that opens something else.\n */\n onOpen?: (index: number) => void;\n /**\n * A fixed column count. Left out, the grid is responsive: as many columns of at\n * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n * a phone and eight across on a desktop page — no breakpoints to choose.\n */\n columns?: number;\n /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n minTileSize?: number;\n /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n * own proportions (a floor plan), within a square-ish box. */\n aspect?: \"square\" | \"video\" | \"auto\";\n /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n lightbox?: {\n loop?: boolean;\n zoom?: boolean;\n download?: boolean;\n onDownload?: (item: ImageItem, index: number) => void;\n labels?: Partial<LightboxLabels>;\n };\n labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n square: \"aspect-square\",\n video: \"aspect-video\",\n auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A file name as stem and extension, so a tile can cut the stem and keep the\n * extension whole: \"floor-plan-level-2.p / df\" (a break inside the extension) told the\n * reader less than \"floor-plan-le….pdf\" does. A leading dot (\".env\") or an\n * \"extension\" longer than five characters is not treated as one.\n */\nexport function splitFileName(name: string): [stem: string, ext: string] {\n const dot = name.lastIndexOf(\".\");\n if (dot <= 0 || name.length - dot > 6) return [name, \"\"];\n return [name.slice(0, dot), name.slice(dot)];\n}\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n items,\n fetcher,\n renderActions,\n onOpen,\n columns,\n minTileSize = 96,\n aspect = \"square\",\n lightbox,\n labels: labelsProp,\n className,\n style,\n ...rest\n}: ImageGridProps) {\n const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n const [openIndex, setOpenIndex] = useState<number | null>(null);\n const count = items.length;\n\n const gridStyle: CSSProperties = {\n gridTemplateColumns:\n columns !== undefined\n ? `repeat(${columns}, minmax(0, 1fr))`\n : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n ...style,\n };\n\n return (\n <>\n <ul\n aria-label={labels.list}\n {...rest}\n className={cn(\"grid gap-2\", className)}\n style={gridStyle}\n >\n {items.map((item, i) => {\n const name = item.alt || labels.item(i + 1, count);\n const kind = imageItemKind(item);\n const actions = renderActions?.(item, i);\n return (\n <li key={item.key ?? item.src} className=\"relative min-w-0\">\n <button\n type=\"button\"\n aria-label={name}\n onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n className={cn(\n \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n ASPECT_CLASS[aspect],\n )}\n >\n {kind === \"file\" ? (\n <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n <FileNameLabel name={item.fileName ?? item.alt ?? \"\"} />\n </span>\n ) : (\n <AuthedImage\n src={item.thumbnailSrc ?? item.src}\n // The button is named already; the picture inside it is decoration\n // to a reader, or the name would be read twice.\n alt=\"\"\n fetcher={fetcher}\n loading=\"lazy\"\n wrapperClassName=\"h-full w-full\"\n className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n />\n )}\n </button>\n {actions !== undefined && actions !== null && actions !== false && (\n <div\n role=\"group\"\n aria-label={labels.actions(name)}\n // A backdrop behind the whole group, in the inverse token the overlay\n // buttons use: a translucent disc alone took most of its colour from\n // the picture, and on a pale photo or the light file tile the glyphs\n // washed out. Two layers of the inverse keep them readable over any\n // picture, in both themes.\n className=\"absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm\"\n >\n {actions}\n </div>\n )}\n {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n )}\n </li>\n );\n })}\n </ul>\n {!onOpen && (\n <Lightbox\n open={openIndex !== null}\n onClose={() => setOpenIndex(null)}\n items={items}\n index={openIndex ?? 0}\n onIndexChange={setOpenIndex}\n fetcher={fetcher}\n {...lightbox}\n />\n )}\n </>\n );\n}\n\n/** One line: the stem truncates, the extension never does. */\nfunction FileNameLabel({ name }: { name: string }) {\n const [stem, ext] = splitFileName(name);\n return (\n <span aria-hidden className=\"flex max-w-full min-w-0\">\n <span className=\"min-w-0 truncate\">{stem}</span>\n {ext && <span className=\"shrink-0\">{ext}</span>}\n </span>\n );\n}\n"],"mappings":"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","names":[]}
@@ -491,7 +491,7 @@ function CellGrid({
491
491
  ]
492
492
  }
493
493
  ),
494
- /* @__PURE__ */ jsx("span", { className: "text-[11px] tabular-nums text-[var(--text-muted)]", children: labels.points(filled.length) }),
494
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] tabular-nums text-[var(--text-muted)]", children: /* @__PURE__ */ jsx("bdi", { children: labels.points(filled.length) }) }),
495
495
  problems > 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--danger)]", children: labels.problems(problems) }),
496
496
  /* @__PURE__ */ jsxs("span", { className: "ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]", children: [
497
497
  /* @__PURE__ */ jsx(ClipboardPaste, { "aria-hidden": true, className: "size-3.5" }),
@@ -547,7 +547,7 @@ function TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy,
547
547
  /* @__PURE__ */ jsxs("p", { className: "mt-1 px-1 text-[11px] text-[var(--text-muted)]", children: [
548
548
  columns.map((column) => column.label).join(" \xB7 "),
549
549
  " \u2014 ",
550
- labels.points(lines)
550
+ /* @__PURE__ */ jsx("bdi", { children: labels.points(lines) })
551
551
  ] })
552
552
  ] });
553
553
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/measured-grid.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ClipboardPaste, Eraser, Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n// The cell pair reads ONE cell, where a comma has no columns to separate and so is\n// always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may\n// be either and the line decides. See the three named rules at the top of table-text.\nimport { cellNumber, isCellNumber, parseRows, splitRow } from \"../lib/table-text\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useWindowedRows } from \"../hooks/use-windowed-rows\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Button, FIELD_INVALID, Textarea } from \"./ui\";\n\n/**\n * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a\n * block out of a spreadsheet — and the hook that holds it as a draft.\n *\n * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a\n * setpoint dialog type rig measurements into it. Nothing in it knows what a column\n * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is\n * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.\n *\n * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types\n * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo\n * beyond the browser's per-input one), or typed columns — every cell is a string that\n * should read as a number.\n */\n\n/**\n * Every string the grid can speak — the `measuredGrid` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:\n * the grammar around a count moves with it in most languages.\n */\nexport interface MeasuredGridLabels {\n /** Accessible name of the cells/text toggle. */\n view: string;\n cellsView: string;\n textView: string;\n addRow: string;\n /** The row's remove button, given its 1-based number. */\n removeRow: (row: number) => string;\n /** Empties the whole table. */\n clear: string;\n /** The footer's standing note that a block can be pasted into any cell. */\n pasteHint: string;\n /**\n * Accessible name of one cell's input, given its column's label and 1-based row.\n * A screen reader in a grid announces the headers on its own when the caret crosses\n * one; this is what it reads when the caret lands on an input with no crossing — and\n * what a voice-control user says to reach it.\n */\n cell: (column: string, row: number) => string;\n /** The row-number column's header, which shows only \"#\". */\n rowNumber: string;\n /** The remove-button column's header, which shows nothing. */\n rowActions: string;\n /** The grid's description: how its keyboard works. Read once, on entry. */\n keyboardHint: string;\n /** The text view could not read this 1-based line of what was typed or pasted. */\n lineError: (line: number) => string;\n /** How many filled rows (measured points) the table holds. */\n points: (count: number) => string;\n /** How many cells are typed but are not numbers. */\n problems: (count: number) => string;\n}\n\n/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`\n * (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {\n view: \"Table view\",\n cellsView: \"Cells\",\n textView: \"Text\",\n addRow: \"Add row\",\n removeRow: (row) => `Remove row ${row}`,\n clear: \"Clear table\",\n pasteHint: \"Paste a block from a spreadsheet into any cell\",\n cell: (column, row) => `${column}, row ${row}`,\n rowNumber: \"Row\",\n rowActions: \"Row actions\",\n keyboardHint:\n \"Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.\",\n lineError: (line) => `Line ${line} could not be read`,\n points: (count) => (count === 1 ? \"1 point\" : `${count} points`),\n problems: (count) => (count === 1 ? \"1 cell is not a number\" : `${count} cells are not numbers`),\n};\n\n/** One column of a measured table: what it holds and what it is measured in. The unit\n * is separate from the name because the header shows it small and underneath, and\n * because a column with no unit (a count, an index) should not render empty brackets. */\nexport interface MeasuredGridColumn {\n label: string;\n unit?: string;\n}\n\n/** The two ways to look at the same table. */\nexport type MeasuredGridView = \"cells\" | \"text\";\n\n/** A cell that has not been typed into yet. Distinguished from `\"0\"` on purpose: an\n * empty cell is a hole in the measurement, and a table with a hole is not one to save. */\nconst BLANK = \"\";\n\n/** Height of one grid row, in pixels. Fixed, which is what lets the windowing be\n * arithmetic rather than measurement. */\nconst DEFAULT_ROW_HEIGHT = 28;\n\nconst ALL_VIEWS: readonly MeasuredGridView[] = [\"cells\", \"text\"];\n\n/** The locale's decimal mark, as far as a cell can hold it: \",\" or \".\". A mark outside\n * those two (Arabic's \"٫\") is not one `cellNumber` reads, so those locales keep the\n * dot. The same answer `NumberField` gives, for the same reason. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n try {\n const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n return part?.value === \",\" ? \",\" : \".\";\n } catch {\n // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.\n return \".\";\n }\n}\n\n/** A number-shaped cell written with the locale's mark. The lexer hands back points;\n * a German user typed commas and should read commas back. Anything that is not a\n * number is left exactly as it was, so the mistake stays visible where it was made. */\nconst withMark = (cell: string, mark: \",\" | \".\") =>\n mark === \",\" && isCellNumber(cell) ? cell.replace(\".\", \",\") : cell;\n\n/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */\nconst formatCell = (value: number, digits: number, mark: \",\" | \".\") =>\n withMark(String(Number(value.toFixed(digits))), mark);\n\nconst hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== \"\");\n\nexport interface UseMeasuredRowsOptions {\n /** Decimals a computed number is rounded to on its way into a cell. Default 4. */\n digits?: number;\n /** BCP 47 tag whose decimal mark the cells are written with, else the\n * `<UiKitProvider locale>`, else the runtime's. */\n locale?: string;\n}\n\nexport interface MeasuredRows {\n /** The draft, as text — what the grid shows and edits. */\n cells: string[][];\n setCells: (next: string[][]) => void;\n /** The filled rows as numbers — EMPTY until the table is `ready`. */\n rows: number[][];\n /** Replace the whole table with computed numbers (a generated shape, say). */\n setRows: (next: number[][]) => void;\n /** At least two filled rows, and every cell in them is a number. */\n ready: boolean;\n /** How many cells are typed but are not numbers — what the grid marks invalid. */\n problems: number;\n /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */\n props: { cells: string[][]; onCells: (next: string[][]) => void };\n}\n\n/**\n * The draft a measured table is edited as.\n *\n * **Strings, not numbers.** A cell is text while it is being typed — `\"-\"`, `\"1.\"` and\n * `\"1e\"` are all states a number passes through on its way to being one, and a grid\n * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.\n * So the draft is text, and the numbers are what falls out when every cell is one.\n *\n * **\"Whole\" is a question this answers**, because every editor asks it before it\n * offers to save: `ready` wants at least two filled rows with a number in every cell.\n * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a\n * row at all (it is what walking off the bottom of the grid leaves behind).\n *\n * `initial` is read once, like `useState`'s.\n */\nexport function useMeasuredRows(\n initial: number[][] | (() => number[][]),\n options: UseMeasuredRowsOptions = {},\n): MeasuredRows {\n const { digits = 4 } = options;\n const mark = decimalMark(useKitLocale(options.locale));\n const [cells, setCells] = useState<string[][]>(() =>\n (typeof initial === \"function\" ? initial() : initial).map((row) =>\n row.map((value) => formatCell(value, digits, mark)),\n ),\n );\n\n const { rows, ready, problems } = useMemo(() => {\n const filled = cells.filter(hasContent);\n const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));\n return {\n rows: whole ? filled.map((row) => row.map(cellNumber)) : [],\n ready: whole,\n problems: filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length,\n };\n }, [cells]);\n\n const setRows = useCallback(\n (next: number[][]) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),\n [digits, mark],\n );\n const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);\n\n return { cells, setCells, rows, setRows, ready, problems, props };\n}\n\nexport interface MeasuredGridProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onChange\"> {\n /** What the table is — shown above it, and the grid's accessible name. */\n label: string;\n /** A note under the table (which columns a layout expects, say). Also the grid's\n * description. */\n hint?: ReactNode;\n columns: MeasuredGridColumn[];\n /** The draft — typically `useMeasuredRows().props`. */\n cells: string[][];\n onCells: (next: string[][]) => void;\n /** Read-only: the cells can still be walked and read, nothing can be changed. */\n disabled?: boolean;\n /** Which views the toggle offers, the first being where it opens. Default both;\n * one view hides the toggle. */\n views?: ReadonlyArray<MeasuredGridView>;\n /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */\n rowHeight?: number;\n /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,\n * and for the row numbers; else the `<UiKitProvider locale>`. */\n locale?: string;\n labels?: Partial<MeasuredGridLabels>;\n}\n\n/**\n * A measured table as a grid of cells, one number each, with a text view beside it.\n *\n * The grid is the primary form because a linkage typed off a drawing arrives as\n * numbers somebody reads out loud, and a textarea made that an exercise in counting\n * tab characters. The paste still works: a block pasted into any cell fills from that\n * cell outwards, growing the table to fit. The text view is kept for what a grid is\n * worst at — reading a thousand-row export back in one piece.\n *\n * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`\n * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the\n * keyboard inside it, as a spreadsheet has it:\n *\n * - **Arrows** move between cells. Left/Right flip under `dir=\"rtl\"`.\n * - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last\n * cell of the table. **PageUp/PageDown** move a screenful.\n * - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —\n * typing down a column is how measured data is entered, and stopping at the last\n * row to reach for a button is what makes people paste instead. Shift+Enter moves up.\n * - **Typing** replaces the cell: arriving by keyboard selects its text, so the first\n * key overwrites it. That is the edit mode data entry wants, entered without a key.\n * **F2** edits in place instead (caret at the end). Either way the cell is then\n * *editing*: Left/Right move the caret, and cross to the next cell only at the edge\n * of the text; Home/End stay in the text. **Escape** puts back what the cell held\n * when the caret arrived, and leaves editing.\n *\n * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is\n * spent on \"next row\" here on purpose — it is the one key a person typing a column of\n * numbers presses between every one of them, and every spreadsheet spends it the same\n * way — and typing-to-replace makes an explicit \"start editing\" key unnecessary for\n * the common case. F2 remains for the uncommon one.\n */\nexport function MeasuredGrid({\n label,\n hint,\n columns,\n cells,\n onCells,\n disabled,\n views = ALL_VIEWS,\n rowHeight = DEFAULT_ROW_HEIGHT,\n locale: localeProp,\n labels: labelsProp,\n className,\n ...rest\n}: MeasuredGridProps) {\n const labels = useKitLabels(\"measuredGrid\", DEFAULT_MEASURED_GRID_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const mark = decimalMark(locale);\n const id = useId();\n const labelId = `${id}-label`;\n const hintId = `${id}-hint`;\n const keysId = `${id}-keys`;\n const offered = views.length ? views : ALL_VIEWS;\n const [chosen, setChosen] = useState<MeasuredGridView>(offered[0]);\n const view = offered.includes(chosen) ? chosen : offered[0];\n\n return (\n // `relative` so the keyboard description below can be `sr-only` without escaping\n // to the initial containing block (see sr-only-containment.test).\n <div {...rest} className={cn(\"relative\", className)}>\n <div className=\"mb-1 flex flex-wrap items-center justify-between gap-2\">\n <span id={labelId} className=\"text-[11px] font-medium text-[var(--text-muted)]\">\n {label}\n </span>\n {offered.length > 1 && (\n <ToggleGroup\n className=\"w-auto\"\n aria-label={labels.view}\n value={view}\n onChange={setChosen}\n options={offered.map((value) => ({\n value,\n label: value === \"cells\" ? labels.cellsView : labels.textView,\n }))}\n />\n )}\n </div>\n {view === \"cells\" ? (\n <CellGrid\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n rowHeight={rowHeight}\n locale={locale}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? `${keysId} ${hintId}` : keysId}\n />\n ) : (\n <TextView\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? hintId : undefined}\n />\n )}\n {hint && (\n <p id={hintId} className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {view === \"cells\" && (\n <span id={keysId} className=\"sr-only\">\n {labels.keyboardHint}\n </span>\n )}\n </div>\n );\n}\n\n/** Where the caret is. Held in state rather than read off `document`, because a\n * windowed grid unmounts the cell being walked towards: the move is decided first and\n * focused after the row it lands on has been rendered. */\ninterface Caret {\n row: number;\n column: number;\n}\n\ninterface ViewProps {\n columns: MeasuredGridColumn[];\n cells: string[][];\n onCells: (next: string[][]) => void;\n disabled?: boolean;\n mark: \",\" | \".\";\n labels: MeasuredGridLabels;\n labelledBy: string;\n describedBy?: string;\n}\n\nfunction CellGrid({\n columns,\n cells,\n onCells,\n disabled,\n rowHeight,\n locale,\n mark,\n labels,\n labelledBy,\n describedBy,\n}: ViewProps & { rowHeight: number; locale: string | undefined }) {\n const scrollRef = useRef<HTMLDivElement>(null);\n const headRef = useRef<HTMLDivElement>(null);\n const width = columns.length;\n const blankRow = () => columns.map(() => BLANK);\n // At least one row to type into: a grid with nothing in it has nowhere to put the\n // first number, and \"add a row\" is not the first thing to ask of someone who has\n // just opened an empty table. It is not written back until something is typed.\n const grid = cells.length ? cells : [blankRow()];\n const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);\n const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n\n // The remove buttons are the last column of the grid, reachable by the arrows like\n // any cell — except where they are disabled (a read-only grid, or the placeholder\n // row of an empty one), because a disabled button cannot hold the tab stop.\n const removable = !disabled && cells.length > 0;\n const lastColumn = removable ? width : width - 1;\n\n const [caret, setCaret] = useState<Caret>({ row: 0, column: 0 });\n // Clamped on read, not corrected in an effect: rows removed or columns changed from\n // outside must never leave the tab stop on a cell that is not there.\n const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };\n /** Whether the caret cell is being edited in place (see the component note). */\n const [editing, setEditing] = useState(false);\n /** A cell that has to take focus once it exists — one commit away when the move\n * crossed the edge of the window. `select` is arrival by keyboard. */\n const pending = useRef<(Caret & { select: boolean }) | null>(null);\n /** What the caret cell held when the caret arrived: what Escape puts back. */\n const origin = useRef(BLANK);\n /** The next focus was a pointer's: place the caret where it was clicked, edit. */\n const pointer = useRef(false);\n\n useEffect(() => {\n const target = pending.current;\n if (!target) return;\n const element = scrollRef.current?.querySelector<HTMLElement>(\n `[data-cell=\"${target.row}:${target.column}\"]`,\n );\n if (!element) return;\n pending.current = null;\n // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,\n // which the browser's own scroll-into-view does not know is there.\n element.focus({ preventScroll: true });\n if (target.select && element instanceof HTMLInputElement) element.select();\n });\n\n const pad = (row: readonly string[] | undefined) =>\n Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);\n\n const setCell = (row: number, column: number, value: string) => {\n const next = grid.map(pad);\n next[row][column] = value;\n onCells(next);\n };\n\n /** Scroll `row` into the band below the sticky header. */\n const reveal = (row: number) => {\n const element = scrollRef.current;\n if (!element) return;\n const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);\n if (room <= 0) return;\n const top = row * rowHeight;\n if (top < element.scrollTop) element.scrollTop = top;\n else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;\n };\n\n const focusCell = (row: number, column: number) => {\n reveal(row);\n pending.current = { row, column, select: true };\n setCaret({ row, column });\n setEditing(false);\n };\n\n const go = (row: number, column: number) => {\n const target = {\n row: Math.max(0, Math.min(row, grid.length - 1)),\n column: Math.max(0, Math.min(column, lastColumn)),\n };\n if (target.row === at.row && target.column === at.column) return;\n focusCell(target.row, target.column);\n };\n\n /** Down a column — and off the bottom, a new row, unless the last one is still\n * empty: holding ArrowDown should not leave a trail of blank rows behind it. */\n const down = (row: number, column: number) => {\n if (row + 1 < grid.length) return go(row + 1, column);\n if (disabled || !hasContent(grid[row])) return;\n onCells([...grid.map(pad), blankRow()]);\n focusCell(row + 1, Math.min(column, width - 1));\n };\n\n const page = () => {\n const element = scrollRef.current;\n const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;\n // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.\n return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;\n };\n\n /**\n * On each cell rather than once on the grid, for the reason `MiniCalendar` gives:\n * the cell is where focus is, and a container listening for keys it cannot receive\n * is the shape `jsx-a11y/interactive-supports-focus` objects to.\n */\n const onCellKeyDown = (event: KeyboardEvent<HTMLElement>, row: number, column: number) => {\n const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;\n const inText = Boolean(input) && editing;\n const modified = event.ctrlKey || event.metaKey;\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n return go(row - 1, column);\n case \"ArrowDown\":\n event.preventDefault();\n return down(row, column);\n case \"Enter\":\n // On the remove button Enter is the button's own.\n if (!input) return;\n event.preventDefault();\n return event.shiftKey ? go(row - 1, column) : down(row, column);\n case \"ArrowLeft\":\n case \"ArrowRight\": {\n // Along the reading direction: ArrowLeft is \"next column\" in RTL.\n const forward = horizontalStep(event.key, event.currentTarget) === 1;\n if (inText && input) {\n const edge = forward ? input.value.length : 0;\n // Inside the text the caret moves; only at its edge does it leave the cell.\n if (input.selectionStart !== edge || input.selectionEnd !== edge) return;\n }\n event.preventDefault();\n return go(row, column + (forward ? 1 : -1));\n }\n case \"Home\":\n case \"End\": {\n if (inText && !modified) return;\n event.preventDefault();\n const home = event.key === \"Home\";\n if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);\n return go(row, home ? 0 : width - 1);\n }\n case \"PageUp\":\n event.preventDefault();\n return go(row - page(), column);\n case \"PageDown\":\n event.preventDefault();\n return go(row + page(), column);\n case \"F2\":\n if (!input || disabled) return;\n event.preventDefault();\n setEditing(true);\n input.setSelectionRange(input.value.length, input.value.length);\n return;\n case \"Escape\":\n // Not editing: nothing of ours to undo, so the key belongs to whatever the\n // grid sits in — the dialog it is in closes, as it should.\n if (!input || !editing) return;\n event.preventDefault();\n event.stopPropagation();\n if (input.value !== origin.current) setCell(row, column, origin.current);\n pending.current = { row, column, select: true };\n setEditing(false);\n return;\n }\n };\n\n /**\n * A pasted block, written in from the cell it was pasted into.\n *\n * Rows past the end grow the table; columns past the last are dropped, because a\n * paste wider than the measurement is a paste with a trailing timestamp column and\n * not an error worth refusing. One header line is skipped — pasted data almost\n * always has one. Each line is read on its own evidence (`splitRow`, the per-line\n * comma rule), so one line cannot change what another means.\n */\n const paste = (row: number, column: number, text: string) => {\n const lines = text.split(/\\r?\\n/).filter((line) => line.trim() !== \"\");\n if (!lines.length) return;\n const block = lines.map(splitRow);\n if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();\n\n const height = Math.max(grid.length, row + block.length);\n const next = Array.from({ length: height }, (_, index) => pad(grid[index]));\n block.forEach((line, downwards) => {\n line.forEach((cell, across) => {\n const target = column + across;\n if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);\n });\n });\n onCells(next);\n pending.current = { row, column, select: true };\n setEditing(false);\n };\n\n const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;\n // The caret's row is mounted even when it has been scrolled out of the window: it\n // holds the grid's only tab stop, and a tab stop that is not in the DOM is a grid\n // Tab walks straight past.\n const mounted: number[] = [];\n for (let index = first; index < last; index += 1) mounted.push(index);\n if (at.row < first || at.row >= last) mounted.push(at.row);\n\n const filled = cells.filter(hasContent);\n const problems = filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length;\n\n return (\n <div className=\"rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\">\n <div ref={scrollRef} className=\"max-h-72 overflow-auto\">\n <div\n role=\"grid\"\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n // The true size, not the mounted one: a screen reader otherwise reports the\n // thirty rows in the window as the whole table.\n aria-rowcount={grid.length + 1}\n aria-colcount={width + 2}\n aria-readonly={disabled || undefined}\n className=\"text-xs\"\n style={{ minWidth: `calc(4.5rem + ${width} * 5.5rem)` }}\n >\n {/* The header stays put vertically and scrolls sideways with the body, so a\n fifteen-column linkage can be read without losing which column is which. */}\n <div ref={headRef} role=\"rowgroup\" className=\"sticky top-0 z-10 bg-[var(--bg-surface-2)]\">\n <div\n role=\"row\"\n aria-rowindex={1}\n className=\"grid border-b border-[var(--border)]\"\n style={{ gridTemplateColumns: template }}\n >\n <div\n role=\"columnheader\"\n aria-label={labels.rowNumber}\n className=\"flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]\"\n >\n #\n </div>\n {columns.map((column, index) => (\n <div\n key={index}\n role=\"columnheader\"\n className=\"min-w-0 border-s border-[var(--border)] px-2 py-1 text-end\"\n >\n <span className=\"block truncate font-medium text-[var(--text-primary)]\">\n {column.label}\n </span>\n {column.unit && (\n <span className=\"block truncate text-[10px] text-[var(--text-muted)]\">\n {column.unit}\n </span>\n )}\n </div>\n ))}\n <div\n role=\"columnheader\"\n aria-label={labels.rowActions}\n className=\"border-s border-[var(--border)]\"\n />\n </div>\n </div>\n {/* Only the rows in the window are mounted — a swept linkage is thousands of\n them across fifteen inputs — each placed at its own offset, so mounting\n one more (the caret's) costs nothing in the arithmetic. */}\n <div role=\"rowgroup\" className=\"relative\" style={{ height: totalHeight }}>\n {mounted.map((index) => {\n const row = grid[index];\n return (\n <div\n key={index}\n role=\"row\"\n aria-rowindex={index + 2}\n className=\"absolute inset-x-0 grid hover:bg-[var(--bg-hover)]\"\n style={{ top: index * rowHeight, height: rowHeight, gridTemplateColumns: template }}\n >\n <div\n role=\"rowheader\"\n className=\"flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]\"\n >\n {rowNumber.format(index + 1)}\n </div>\n {columns.map((column, columnIndex) => {\n const value = row[columnIndex] ?? BLANK;\n const bad = value.trim() !== \"\" && !isCellNumber(value);\n const isCaret = at.row === index && at.column === columnIndex;\n return (\n <div key={columnIndex} role=\"gridcell\" className=\"min-w-0 border-s border-[var(--border)]\">\n <input\n data-cell={`${index}:${columnIndex}`}\n value={value}\n // `readOnly`, not `disabled`: a disabled input cannot take\n // focus, and a read-only table should still be walkable.\n readOnly={disabled}\n tabIndex={isCaret ? 0 : -1}\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n aria-label={labels.cell(column.label, index + 1)}\n // Said, not only painted: the ring is what a sighted user\n // sees, `aria-invalid` is what a screen reader reads.\n aria-invalid={bad || undefined}\n className={cn(\n \"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none\",\n // Arriving selects the text (typing replaces it); editing\n // in place is the plain surface with a caret in it.\n \"focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]\",\n isCaret && editing && \"focus:bg-[var(--bg-surface)]\",\n disabled && \"text-[var(--text-muted)]\",\n bad && cn(FIELD_INVALID, \"ring-inset\"),\n )}\n onMouseDown={(event) => {\n // A click places a caret, which is editing. On the cell\n // already focused there is no focus event to say so.\n if (document.activeElement === event.currentTarget) setEditing(!disabled);\n else pointer.current = true;\n }}\n onFocus={(event) => {\n origin.current = event.currentTarget.value;\n if (!isCaret) setCaret({ row: index, column: columnIndex });\n const byPointer = pointer.current;\n pointer.current = false;\n setEditing(byPointer && !disabled);\n if (!byPointer) event.currentTarget.select();\n }}\n onBlur={() => setEditing(false)}\n onChange={(event) => {\n setCell(index, columnIndex, event.target.value);\n setEditing(true);\n }}\n onPaste={(event) => {\n if (disabled) return;\n const text = event.clipboardData.getData(\"text/plain\");\n // One cell's worth of text is an ordinary paste, and the\n // browser does it better than this would; only a block is\n // the grid's business.\n if (!/[\\t\\n;]/.test(text)) return;\n event.preventDefault();\n paste(index, columnIndex, text);\n }}\n onKeyDown={(event) => onCellKeyDown(event, index, columnIndex)}\n />\n </div>\n );\n })}\n <div\n role=\"gridcell\"\n className=\"flex items-center justify-center border-s border-[var(--border)]\"\n >\n <button\n type=\"button\"\n data-cell={`${index}:${width}`}\n disabled={!removable}\n tabIndex={at.row === index && at.column === width ? 0 : -1}\n aria-label={labels.removeRow(index + 1)}\n className=\"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]\"\n onKeyDown={(event) => onCellKeyDown(event, index, width)}\n onFocus={() => {\n if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });\n }}\n onClick={() => {\n const next = grid.filter((_, other) => other !== index);\n onCells(next);\n // Focus stays in the column, on the row that moved up into\n // this one; an emptied table sends it to the first cell.\n if (next.length) focusCell(Math.min(index, next.length - 1), width);\n else focusCell(0, 0);\n }}\n >\n <Trash2 aria-hidden className=\"size-3.5\" />\n </button>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5\">\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs\"\n disabled={disabled}\n onClick={() => {\n onCells([...grid.map(pad), blankRow()]);\n focusCell(grid.length, 0);\n }}\n >\n <Plus aria-hidden className=\"size-3.5\" /> {labels.addRow}\n </Button>\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs text-[var(--text-muted)]\"\n disabled={disabled || !cells.length}\n onClick={() => {\n onCells([]);\n // The button is about to disable itself; focus must not go down with it.\n focusCell(0, 0);\n }}\n >\n <Eraser aria-hidden className=\"size-3.5\" /> {labels.clear}\n </Button>\n <span className=\"text-[11px] tabular-nums text-[var(--text-muted)]\">\n {labels.points(filled.length)}\n </span>\n {problems > 0 && (\n <span className=\"text-[11px] text-[var(--danger)]\">{labels.problems(problems)}</span>\n )}\n <span className=\"ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]\">\n <ClipboardPaste aria-hidden className=\"size-3.5\" /> {labels.pasteHint}\n </span>\n </div>\n </div>\n );\n}\n\nconst textOf = (cells: string[][]) => cells.map((row) => row.join(\"\\t\")).join(\"\\n\");\n\n/**\n * The same table as text.\n *\n * Kept because the grid is worst at exactly what a textarea is best at: reading a long\n * export back in one piece. It commits on blur — through `parseRows`, the paste door —\n * and a line it cannot read is NAMED rather than dropped: half a sweep saved as a\n * measurement is worse than a refusal.\n */\nfunction TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }: ViewProps) {\n const text = textOf(cells);\n const [draft, setDraft] = useState(text);\n const [errorLine, setErrorLine] = useState<number | null>(null);\n // Follow the table when it changes from outside (a generated shape, a cleared form).\n // Compared as text, so a caller that rebuilds the same cells every render does not\n // wipe what is being typed.\n const [seen, setSeen] = useState(text);\n if (seen !== text) {\n setSeen(text);\n setDraft(text);\n setErrorLine(null);\n }\n\n const commit = () => {\n // Untouched: nothing to read back, and re-reading would rewrite every cell in the\n // lexer's spelling of it.\n if (draft === text) return;\n if (!draft.trim()) {\n setErrorLine(null);\n onCells([]);\n return;\n }\n const parsed = parseRows(draft, columns.length);\n if (\"error\" in parsed) {\n setErrorLine(parsed.error);\n return;\n }\n setErrorLine(null);\n onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));\n };\n\n const lines = draft.split(\"\\n\").filter((line) => line.trim()).length;\n\n return (\n <div>\n <Textarea\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n rows={10}\n value={draft}\n readOnly={disabled}\n spellCheck={false}\n className=\"font-mono text-xs\"\n error={errorLine !== null ? labels.lineError(errorLine) : undefined}\n onChange={(event) => setDraft(event.target.value)}\n onBlur={commit}\n />\n <p className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {columns.map((column) => column.label).join(\" · \")}\n {\" — \"}\n {labels.points(lines)}\n </p>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/measured-grid.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ClipboardPaste, Eraser, Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n// The cell pair reads ONE cell, where a comma has no columns to separate and so is\n// always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may\n// be either and the line decides. See the three named rules at the top of table-text.\nimport { cellNumber, isCellNumber, parseRows, splitRow } from \"../lib/table-text\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useWindowedRows } from \"../hooks/use-windowed-rows\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Button, FIELD_INVALID, Textarea } from \"./ui\";\n\n/**\n * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a\n * block out of a spreadsheet — and the hook that holds it as a draft.\n *\n * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a\n * setpoint dialog type rig measurements into it. Nothing in it knows what a column\n * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is\n * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.\n *\n * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types\n * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo\n * beyond the browser's per-input one), or typed columns — every cell is a string that\n * should read as a number.\n */\n\n/**\n * Every string the grid can speak — the `measuredGrid` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:\n * the grammar around a count moves with it in most languages.\n */\nexport interface MeasuredGridLabels {\n /** Accessible name of the cells/text toggle. */\n view: string;\n cellsView: string;\n textView: string;\n addRow: string;\n /** The row's remove button, given its 1-based number. */\n removeRow: (row: number) => string;\n /** Empties the whole table. */\n clear: string;\n /** The footer's standing note that a block can be pasted into any cell. */\n pasteHint: string;\n /**\n * Accessible name of one cell's input, given its column's label and 1-based row.\n * A screen reader in a grid announces the headers on its own when the caret crosses\n * one; this is what it reads when the caret lands on an input with no crossing — and\n * what a voice-control user says to reach it.\n */\n cell: (column: string, row: number) => string;\n /** The row-number column's header, which shows only \"#\". */\n rowNumber: string;\n /** The remove-button column's header, which shows nothing. */\n rowActions: string;\n /** The grid's description: how its keyboard works. Read once, on entry. */\n keyboardHint: string;\n /** The text view could not read this 1-based line of what was typed or pasted. */\n lineError: (line: number) => string;\n /** How many filled rows (measured points) the table holds. */\n points: (count: number) => string;\n /** How many cells are typed but are not numbers. */\n problems: (count: number) => string;\n}\n\n/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`\n * (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {\n view: \"Table view\",\n cellsView: \"Cells\",\n textView: \"Text\",\n addRow: \"Add row\",\n removeRow: (row) => `Remove row ${row}`,\n clear: \"Clear table\",\n pasteHint: \"Paste a block from a spreadsheet into any cell\",\n cell: (column, row) => `${column}, row ${row}`,\n rowNumber: \"Row\",\n rowActions: \"Row actions\",\n keyboardHint:\n \"Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.\",\n lineError: (line) => `Line ${line} could not be read`,\n points: (count) => (count === 1 ? \"1 point\" : `${count} points`),\n problems: (count) => (count === 1 ? \"1 cell is not a number\" : `${count} cells are not numbers`),\n};\n\n/** One column of a measured table: what it holds and what it is measured in. The unit\n * is separate from the name because the header shows it small and underneath, and\n * because a column with no unit (a count, an index) should not render empty brackets. */\nexport interface MeasuredGridColumn {\n label: string;\n unit?: string;\n}\n\n/** The two ways to look at the same table. */\nexport type MeasuredGridView = \"cells\" | \"text\";\n\n/** A cell that has not been typed into yet. Distinguished from `\"0\"` on purpose: an\n * empty cell is a hole in the measurement, and a table with a hole is not one to save. */\nconst BLANK = \"\";\n\n/** Height of one grid row, in pixels. Fixed, which is what lets the windowing be\n * arithmetic rather than measurement. */\nconst DEFAULT_ROW_HEIGHT = 28;\n\nconst ALL_VIEWS: readonly MeasuredGridView[] = [\"cells\", \"text\"];\n\n/** The locale's decimal mark, as far as a cell can hold it: \",\" or \".\". A mark outside\n * those two (Arabic's \"٫\") is not one `cellNumber` reads, so those locales keep the\n * dot. The same answer `NumberField` gives, for the same reason. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n try {\n const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n return part?.value === \",\" ? \",\" : \".\";\n } catch {\n // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.\n return \".\";\n }\n}\n\n/** A number-shaped cell written with the locale's mark. The lexer hands back points;\n * a German user typed commas and should read commas back. Anything that is not a\n * number is left exactly as it was, so the mistake stays visible where it was made. */\nconst withMark = (cell: string, mark: \",\" | \".\") =>\n mark === \",\" && isCellNumber(cell) ? cell.replace(\".\", \",\") : cell;\n\n/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */\nconst formatCell = (value: number, digits: number, mark: \",\" | \".\") =>\n withMark(String(Number(value.toFixed(digits))), mark);\n\nconst hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== \"\");\n\nexport interface UseMeasuredRowsOptions {\n /** Decimals a computed number is rounded to on its way into a cell. Default 4. */\n digits?: number;\n /** BCP 47 tag whose decimal mark the cells are written with, else the\n * `<UiKitProvider locale>`, else the runtime's. */\n locale?: string;\n}\n\nexport interface MeasuredRows {\n /** The draft, as text — what the grid shows and edits. */\n cells: string[][];\n setCells: (next: string[][]) => void;\n /** The filled rows as numbers — EMPTY until the table is `ready`. */\n rows: number[][];\n /** Replace the whole table with computed numbers (a generated shape, say). */\n setRows: (next: number[][]) => void;\n /** At least two filled rows, and every cell in them is a number. */\n ready: boolean;\n /** How many cells are typed but are not numbers — what the grid marks invalid. */\n problems: number;\n /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */\n props: { cells: string[][]; onCells: (next: string[][]) => void };\n}\n\n/**\n * The draft a measured table is edited as.\n *\n * **Strings, not numbers.** A cell is text while it is being typed — `\"-\"`, `\"1.\"` and\n * `\"1e\"` are all states a number passes through on its way to being one, and a grid\n * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.\n * So the draft is text, and the numbers are what falls out when every cell is one.\n *\n * **\"Whole\" is a question this answers**, because every editor asks it before it\n * offers to save: `ready` wants at least two filled rows with a number in every cell.\n * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a\n * row at all (it is what walking off the bottom of the grid leaves behind).\n *\n * `initial` is read once, like `useState`'s.\n */\nexport function useMeasuredRows(\n initial: number[][] | (() => number[][]),\n options: UseMeasuredRowsOptions = {},\n): MeasuredRows {\n const { digits = 4 } = options;\n const mark = decimalMark(useKitLocale(options.locale));\n const [cells, setCells] = useState<string[][]>(() =>\n (typeof initial === \"function\" ? initial() : initial).map((row) =>\n row.map((value) => formatCell(value, digits, mark)),\n ),\n );\n\n const { rows, ready, problems } = useMemo(() => {\n const filled = cells.filter(hasContent);\n const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));\n return {\n rows: whole ? filled.map((row) => row.map(cellNumber)) : [],\n ready: whole,\n problems: filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length,\n };\n }, [cells]);\n\n const setRows = useCallback(\n (next: number[][]) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),\n [digits, mark],\n );\n const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);\n\n return { cells, setCells, rows, setRows, ready, problems, props };\n}\n\nexport interface MeasuredGridProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onChange\"> {\n /** What the table is — shown above it, and the grid's accessible name. */\n label: string;\n /** A note under the table (which columns a layout expects, say). Also the grid's\n * description. */\n hint?: ReactNode;\n columns: MeasuredGridColumn[];\n /** The draft — typically `useMeasuredRows().props`. */\n cells: string[][];\n onCells: (next: string[][]) => void;\n /** Read-only: the cells can still be walked and read, nothing can be changed. */\n disabled?: boolean;\n /** Which views the toggle offers, the first being where it opens. Default both;\n * one view hides the toggle. */\n views?: ReadonlyArray<MeasuredGridView>;\n /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */\n rowHeight?: number;\n /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,\n * and for the row numbers; else the `<UiKitProvider locale>`. */\n locale?: string;\n labels?: Partial<MeasuredGridLabels>;\n}\n\n/**\n * A measured table as a grid of cells, one number each, with a text view beside it.\n *\n * The grid is the primary form because a linkage typed off a drawing arrives as\n * numbers somebody reads out loud, and a textarea made that an exercise in counting\n * tab characters. The paste still works: a block pasted into any cell fills from that\n * cell outwards, growing the table to fit. The text view is kept for what a grid is\n * worst at — reading a thousand-row export back in one piece.\n *\n * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`\n * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the\n * keyboard inside it, as a spreadsheet has it:\n *\n * - **Arrows** move between cells. Left/Right flip under `dir=\"rtl\"`.\n * - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last\n * cell of the table. **PageUp/PageDown** move a screenful.\n * - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —\n * typing down a column is how measured data is entered, and stopping at the last\n * row to reach for a button is what makes people paste instead. Shift+Enter moves up.\n * - **Typing** replaces the cell: arriving by keyboard selects its text, so the first\n * key overwrites it. That is the edit mode data entry wants, entered without a key.\n * **F2** edits in place instead (caret at the end). Either way the cell is then\n * *editing*: Left/Right move the caret, and cross to the next cell only at the edge\n * of the text; Home/End stay in the text. **Escape** puts back what the cell held\n * when the caret arrived, and leaves editing.\n *\n * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is\n * spent on \"next row\" here on purpose — it is the one key a person typing a column of\n * numbers presses between every one of them, and every spreadsheet spends it the same\n * way — and typing-to-replace makes an explicit \"start editing\" key unnecessary for\n * the common case. F2 remains for the uncommon one.\n */\nexport function MeasuredGrid({\n label,\n hint,\n columns,\n cells,\n onCells,\n disabled,\n views = ALL_VIEWS,\n rowHeight = DEFAULT_ROW_HEIGHT,\n locale: localeProp,\n labels: labelsProp,\n className,\n ...rest\n}: MeasuredGridProps) {\n const labels = useKitLabels(\"measuredGrid\", DEFAULT_MEASURED_GRID_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const mark = decimalMark(locale);\n const id = useId();\n const labelId = `${id}-label`;\n const hintId = `${id}-hint`;\n const keysId = `${id}-keys`;\n const offered = views.length ? views : ALL_VIEWS;\n const [chosen, setChosen] = useState<MeasuredGridView>(offered[0]);\n const view = offered.includes(chosen) ? chosen : offered[0];\n\n return (\n // `relative` so the keyboard description below can be `sr-only` without escaping\n // to the initial containing block (see sr-only-containment.test).\n <div {...rest} className={cn(\"relative\", className)}>\n <div className=\"mb-1 flex flex-wrap items-center justify-between gap-2\">\n <span id={labelId} className=\"text-[11px] font-medium text-[var(--text-muted)]\">\n {label}\n </span>\n {offered.length > 1 && (\n <ToggleGroup\n className=\"w-auto\"\n aria-label={labels.view}\n value={view}\n onChange={setChosen}\n options={offered.map((value) => ({\n value,\n label: value === \"cells\" ? labels.cellsView : labels.textView,\n }))}\n />\n )}\n </div>\n {view === \"cells\" ? (\n <CellGrid\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n rowHeight={rowHeight}\n locale={locale}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? `${keysId} ${hintId}` : keysId}\n />\n ) : (\n <TextView\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? hintId : undefined}\n />\n )}\n {hint && (\n <p id={hintId} className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {view === \"cells\" && (\n <span id={keysId} className=\"sr-only\">\n {labels.keyboardHint}\n </span>\n )}\n </div>\n );\n}\n\n/** Where the caret is. Held in state rather than read off `document`, because a\n * windowed grid unmounts the cell being walked towards: the move is decided first and\n * focused after the row it lands on has been rendered. */\ninterface Caret {\n row: number;\n column: number;\n}\n\ninterface ViewProps {\n columns: MeasuredGridColumn[];\n cells: string[][];\n onCells: (next: string[][]) => void;\n disabled?: boolean;\n mark: \",\" | \".\";\n labels: MeasuredGridLabels;\n labelledBy: string;\n describedBy?: string;\n}\n\nfunction CellGrid({\n columns,\n cells,\n onCells,\n disabled,\n rowHeight,\n locale,\n mark,\n labels,\n labelledBy,\n describedBy,\n}: ViewProps & { rowHeight: number; locale: string | undefined }) {\n const scrollRef = useRef<HTMLDivElement>(null);\n const headRef = useRef<HTMLDivElement>(null);\n const width = columns.length;\n const blankRow = () => columns.map(() => BLANK);\n // At least one row to type into: a grid with nothing in it has nowhere to put the\n // first number, and \"add a row\" is not the first thing to ask of someone who has\n // just opened an empty table. It is not written back until something is typed.\n const grid = cells.length ? cells : [blankRow()];\n const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);\n const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n\n // The remove buttons are the last column of the grid, reachable by the arrows like\n // any cell — except where they are disabled (a read-only grid, or the placeholder\n // row of an empty one), because a disabled button cannot hold the tab stop.\n const removable = !disabled && cells.length > 0;\n const lastColumn = removable ? width : width - 1;\n\n const [caret, setCaret] = useState<Caret>({ row: 0, column: 0 });\n // Clamped on read, not corrected in an effect: rows removed or columns changed from\n // outside must never leave the tab stop on a cell that is not there.\n const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };\n /** Whether the caret cell is being edited in place (see the component note). */\n const [editing, setEditing] = useState(false);\n /** A cell that has to take focus once it exists — one commit away when the move\n * crossed the edge of the window. `select` is arrival by keyboard. */\n const pending = useRef<(Caret & { select: boolean }) | null>(null);\n /** What the caret cell held when the caret arrived: what Escape puts back. */\n const origin = useRef(BLANK);\n /** The next focus was a pointer's: place the caret where it was clicked, edit. */\n const pointer = useRef(false);\n\n useEffect(() => {\n const target = pending.current;\n if (!target) return;\n const element = scrollRef.current?.querySelector<HTMLElement>(\n `[data-cell=\"${target.row}:${target.column}\"]`,\n );\n if (!element) return;\n pending.current = null;\n // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,\n // which the browser's own scroll-into-view does not know is there.\n element.focus({ preventScroll: true });\n if (target.select && element instanceof HTMLInputElement) element.select();\n });\n\n const pad = (row: readonly string[] | undefined) =>\n Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);\n\n const setCell = (row: number, column: number, value: string) => {\n const next = grid.map(pad);\n next[row][column] = value;\n onCells(next);\n };\n\n /** Scroll `row` into the band below the sticky header. */\n const reveal = (row: number) => {\n const element = scrollRef.current;\n if (!element) return;\n const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);\n if (room <= 0) return;\n const top = row * rowHeight;\n if (top < element.scrollTop) element.scrollTop = top;\n else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;\n };\n\n const focusCell = (row: number, column: number) => {\n reveal(row);\n pending.current = { row, column, select: true };\n setCaret({ row, column });\n setEditing(false);\n };\n\n const go = (row: number, column: number) => {\n const target = {\n row: Math.max(0, Math.min(row, grid.length - 1)),\n column: Math.max(0, Math.min(column, lastColumn)),\n };\n if (target.row === at.row && target.column === at.column) return;\n focusCell(target.row, target.column);\n };\n\n /** Down a column — and off the bottom, a new row, unless the last one is still\n * empty: holding ArrowDown should not leave a trail of blank rows behind it. */\n const down = (row: number, column: number) => {\n if (row + 1 < grid.length) return go(row + 1, column);\n if (disabled || !hasContent(grid[row])) return;\n onCells([...grid.map(pad), blankRow()]);\n focusCell(row + 1, Math.min(column, width - 1));\n };\n\n const page = () => {\n const element = scrollRef.current;\n const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;\n // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.\n return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;\n };\n\n /**\n * On each cell rather than once on the grid, for the reason `MiniCalendar` gives:\n * the cell is where focus is, and a container listening for keys it cannot receive\n * is the shape `jsx-a11y/interactive-supports-focus` objects to.\n */\n const onCellKeyDown = (event: KeyboardEvent<HTMLElement>, row: number, column: number) => {\n const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;\n const inText = Boolean(input) && editing;\n const modified = event.ctrlKey || event.metaKey;\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n return go(row - 1, column);\n case \"ArrowDown\":\n event.preventDefault();\n return down(row, column);\n case \"Enter\":\n // On the remove button Enter is the button's own.\n if (!input) return;\n event.preventDefault();\n return event.shiftKey ? go(row - 1, column) : down(row, column);\n case \"ArrowLeft\":\n case \"ArrowRight\": {\n // Along the reading direction: ArrowLeft is \"next column\" in RTL.\n const forward = horizontalStep(event.key, event.currentTarget) === 1;\n if (inText && input) {\n const edge = forward ? input.value.length : 0;\n // Inside the text the caret moves; only at its edge does it leave the cell.\n if (input.selectionStart !== edge || input.selectionEnd !== edge) return;\n }\n event.preventDefault();\n return go(row, column + (forward ? 1 : -1));\n }\n case \"Home\":\n case \"End\": {\n if (inText && !modified) return;\n event.preventDefault();\n const home = event.key === \"Home\";\n if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);\n return go(row, home ? 0 : width - 1);\n }\n case \"PageUp\":\n event.preventDefault();\n return go(row - page(), column);\n case \"PageDown\":\n event.preventDefault();\n return go(row + page(), column);\n case \"F2\":\n if (!input || disabled) return;\n event.preventDefault();\n setEditing(true);\n input.setSelectionRange(input.value.length, input.value.length);\n return;\n case \"Escape\":\n // Not editing: nothing of ours to undo, so the key belongs to whatever the\n // grid sits in — the dialog it is in closes, as it should.\n if (!input || !editing) return;\n event.preventDefault();\n event.stopPropagation();\n if (input.value !== origin.current) setCell(row, column, origin.current);\n pending.current = { row, column, select: true };\n setEditing(false);\n return;\n }\n };\n\n /**\n * A pasted block, written in from the cell it was pasted into.\n *\n * Rows past the end grow the table; columns past the last are dropped, because a\n * paste wider than the measurement is a paste with a trailing timestamp column and\n * not an error worth refusing. One header line is skipped — pasted data almost\n * always has one. Each line is read on its own evidence (`splitRow`, the per-line\n * comma rule), so one line cannot change what another means.\n */\n const paste = (row: number, column: number, text: string) => {\n const lines = text.split(/\\r?\\n/).filter((line) => line.trim() !== \"\");\n if (!lines.length) return;\n const block = lines.map(splitRow);\n if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();\n\n const height = Math.max(grid.length, row + block.length);\n const next = Array.from({ length: height }, (_, index) => pad(grid[index]));\n block.forEach((line, downwards) => {\n line.forEach((cell, across) => {\n const target = column + across;\n if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);\n });\n });\n onCells(next);\n pending.current = { row, column, select: true };\n setEditing(false);\n };\n\n const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;\n // The caret's row is mounted even when it has been scrolled out of the window: it\n // holds the grid's only tab stop, and a tab stop that is not in the DOM is a grid\n // Tab walks straight past.\n const mounted: number[] = [];\n for (let index = first; index < last; index += 1) mounted.push(index);\n if (at.row < first || at.row >= last) mounted.push(at.row);\n\n const filled = cells.filter(hasContent);\n const problems = filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length;\n\n return (\n <div className=\"rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\">\n <div ref={scrollRef} className=\"max-h-72 overflow-auto\">\n <div\n role=\"grid\"\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n // The true size, not the mounted one: a screen reader otherwise reports the\n // thirty rows in the window as the whole table.\n aria-rowcount={grid.length + 1}\n aria-colcount={width + 2}\n aria-readonly={disabled || undefined}\n className=\"text-xs\"\n style={{ minWidth: `calc(4.5rem + ${width} * 5.5rem)` }}\n >\n {/* The header stays put vertically and scrolls sideways with the body, so a\n fifteen-column linkage can be read without losing which column is which. */}\n <div ref={headRef} role=\"rowgroup\" className=\"sticky top-0 z-10 bg-[var(--bg-surface-2)]\">\n <div\n role=\"row\"\n aria-rowindex={1}\n className=\"grid border-b border-[var(--border)]\"\n style={{ gridTemplateColumns: template }}\n >\n <div\n role=\"columnheader\"\n aria-label={labels.rowNumber}\n className=\"flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]\"\n >\n #\n </div>\n {columns.map((column, index) => (\n <div\n key={index}\n role=\"columnheader\"\n className=\"min-w-0 border-s border-[var(--border)] px-2 py-1 text-end\"\n >\n <span className=\"block truncate font-medium text-[var(--text-primary)]\">\n {column.label}\n </span>\n {column.unit && (\n <span className=\"block truncate text-[10px] text-[var(--text-muted)]\">\n {column.unit}\n </span>\n )}\n </div>\n ))}\n <div\n role=\"columnheader\"\n aria-label={labels.rowActions}\n className=\"border-s border-[var(--border)]\"\n />\n </div>\n </div>\n {/* Only the rows in the window are mounted — a swept linkage is thousands of\n them across fifteen inputs — each placed at its own offset, so mounting\n one more (the caret's) costs nothing in the arithmetic. */}\n <div role=\"rowgroup\" className=\"relative\" style={{ height: totalHeight }}>\n {mounted.map((index) => {\n const row = grid[index];\n return (\n <div\n key={index}\n role=\"row\"\n aria-rowindex={index + 2}\n className=\"absolute inset-x-0 grid hover:bg-[var(--bg-hover)]\"\n style={{ top: index * rowHeight, height: rowHeight, gridTemplateColumns: template }}\n >\n <div\n role=\"rowheader\"\n className=\"flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]\"\n >\n {rowNumber.format(index + 1)}\n </div>\n {columns.map((column, columnIndex) => {\n const value = row[columnIndex] ?? BLANK;\n const bad = value.trim() !== \"\" && !isCellNumber(value);\n const isCaret = at.row === index && at.column === columnIndex;\n return (\n <div key={columnIndex} role=\"gridcell\" className=\"min-w-0 border-s border-[var(--border)]\">\n <input\n data-cell={`${index}:${columnIndex}`}\n value={value}\n // `readOnly`, not `disabled`: a disabled input cannot take\n // focus, and a read-only table should still be walkable.\n readOnly={disabled}\n tabIndex={isCaret ? 0 : -1}\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n aria-label={labels.cell(column.label, index + 1)}\n // Said, not only painted: the ring is what a sighted user\n // sees, `aria-invalid` is what a screen reader reads.\n aria-invalid={bad || undefined}\n className={cn(\n \"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none\",\n // Arriving selects the text (typing replaces it); editing\n // in place is the plain surface with a caret in it.\n \"focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]\",\n isCaret && editing && \"focus:bg-[var(--bg-surface)]\",\n disabled && \"text-[var(--text-muted)]\",\n bad && cn(FIELD_INVALID, \"ring-inset\"),\n )}\n onMouseDown={(event) => {\n // A click places a caret, which is editing. On the cell\n // already focused there is no focus event to say so.\n if (document.activeElement === event.currentTarget) setEditing(!disabled);\n else pointer.current = true;\n }}\n onFocus={(event) => {\n origin.current = event.currentTarget.value;\n if (!isCaret) setCaret({ row: index, column: columnIndex });\n const byPointer = pointer.current;\n pointer.current = false;\n setEditing(byPointer && !disabled);\n if (!byPointer) event.currentTarget.select();\n }}\n onBlur={() => setEditing(false)}\n onChange={(event) => {\n setCell(index, columnIndex, event.target.value);\n setEditing(true);\n }}\n onPaste={(event) => {\n if (disabled) return;\n const text = event.clipboardData.getData(\"text/plain\");\n // One cell's worth of text is an ordinary paste, and the\n // browser does it better than this would; only a block is\n // the grid's business.\n if (!/[\\t\\n;]/.test(text)) return;\n event.preventDefault();\n paste(index, columnIndex, text);\n }}\n onKeyDown={(event) => onCellKeyDown(event, index, columnIndex)}\n />\n </div>\n );\n })}\n <div\n role=\"gridcell\"\n className=\"flex items-center justify-center border-s border-[var(--border)]\"\n >\n <button\n type=\"button\"\n data-cell={`${index}:${width}`}\n disabled={!removable}\n tabIndex={at.row === index && at.column === width ? 0 : -1}\n aria-label={labels.removeRow(index + 1)}\n className=\"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]\"\n onKeyDown={(event) => onCellKeyDown(event, index, width)}\n onFocus={() => {\n if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });\n }}\n onClick={() => {\n const next = grid.filter((_, other) => other !== index);\n onCells(next);\n // Focus stays in the column, on the row that moved up into\n // this one; an emptied table sends it to the first cell.\n if (next.length) focusCell(Math.min(index, next.length - 1), width);\n else focusCell(0, 0);\n }}\n >\n <Trash2 aria-hidden className=\"size-3.5\" />\n </button>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5\">\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs\"\n disabled={disabled}\n onClick={() => {\n onCells([...grid.map(pad), blankRow()]);\n focusCell(grid.length, 0);\n }}\n >\n <Plus aria-hidden className=\"size-3.5\" /> {labels.addRow}\n </Button>\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs text-[var(--text-muted)]\"\n disabled={disabled || !cells.length}\n onClick={() => {\n onCells([]);\n // The button is about to disable itself; focus must not go down with it.\n focusCell(0, 0);\n }}\n >\n <Eraser aria-hidden className=\"size-3.5\" /> {labels.clear}\n </Button>\n <span className=\"text-[11px] tabular-nums text-[var(--text-muted)]\">\n {/* bdi: an LTR label (\"3 points\") in an RTL grid would reorder to \"points 3\". */}\n <bdi>{labels.points(filled.length)}</bdi>\n </span>\n {problems > 0 && (\n <span className=\"text-[11px] text-[var(--danger)]\">{labels.problems(problems)}</span>\n )}\n <span className=\"ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]\">\n <ClipboardPaste aria-hidden className=\"size-3.5\" /> {labels.pasteHint}\n </span>\n </div>\n </div>\n );\n}\n\nconst textOf = (cells: string[][]) => cells.map((row) => row.join(\"\\t\")).join(\"\\n\");\n\n/**\n * The same table as text.\n *\n * Kept because the grid is worst at exactly what a textarea is best at: reading a long\n * export back in one piece. It commits on blur — through `parseRows`, the paste door —\n * and a line it cannot read is NAMED rather than dropped: half a sweep saved as a\n * measurement is worse than a refusal.\n */\nfunction TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }: ViewProps) {\n const text = textOf(cells);\n const [draft, setDraft] = useState(text);\n const [errorLine, setErrorLine] = useState<number | null>(null);\n // Follow the table when it changes from outside (a generated shape, a cleared form).\n // Compared as text, so a caller that rebuilds the same cells every render does not\n // wipe what is being typed.\n const [seen, setSeen] = useState(text);\n if (seen !== text) {\n setSeen(text);\n setDraft(text);\n setErrorLine(null);\n }\n\n const commit = () => {\n // Untouched: nothing to read back, and re-reading would rewrite every cell in the\n // lexer's spelling of it.\n if (draft === text) return;\n if (!draft.trim()) {\n setErrorLine(null);\n onCells([]);\n return;\n }\n const parsed = parseRows(draft, columns.length);\n if (\"error\" in parsed) {\n setErrorLine(parsed.error);\n return;\n }\n setErrorLine(null);\n onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));\n };\n\n const lines = draft.split(\"\\n\").filter((line) => line.trim()).length;\n\n return (\n <div>\n <Textarea\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n rows={10}\n value={draft}\n readOnly={disabled}\n spellCheck={false}\n className=\"font-mono text-xs\"\n error={errorLine !== null ? labels.lineError(errorLine) : undefined}\n onChange={(event) => setDraft(event.target.value)}\n onBlur={commit}\n />\n <p className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {columns.map((column) => column.label).join(\" · \")}\n {\" — \"}\n <bdi>{labels.points(lines)}</bdi>\n </p>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
@@ -2,7 +2,7 @@ import * as react from 'react';
2
2
  import { ComponentProps, Ref } from 'react';
3
3
  import { AmountInput } from './amount-input.js';
4
4
  import './calculator.js';
5
- import '../kit-labels-Mz8zZHIF.js';
5
+ import '../kit-labels-BHfRBbHs.js';
6
6
  import './data-table-labels.js';
7
7
  import './mini-calendar.js';
8
8
  import './calendar-heatmap.js';
@@ -123,6 +123,9 @@ function MultiSelect({
123
123
  label !== void 0 && FIELD_FLOATING_PAD,
124
124
  // FIELD_TRIGGER's hover would still light a trigger nothing can open.
125
125
  "disabled:hover:bg-[var(--bg-surface-2)]",
126
+ // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;
127
+ // only the label was, so a disabled MultiSelect read as live (showcase audit).
128
+ "disabled:cursor-not-allowed disabled:opacity-50",
126
129
  field.isInvalid && FIELD_INVALID
127
130
  ),
128
131
  children: [