@eifi1/ui-kit 0.53.0 → 0.54.0

package/dist/components/data-table-filter-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { resolveDataTableLabels } from \"./data-table-shared\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  // The number bounds' marks, and what the typist wrote in each box — see the number\n  // section below (BUG-10).\n  const mark = decimalMark(locale);\n  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field (field-base.tsx).\n  const inputBase =\n    \"block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase = \"rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-muted\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button type=\"button\" onClick={() => onChange({ type: \"select\", values: [] })} className={buttonBase}>\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-subtle\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover\">\n                  <input type=\"checkbox\" checked={checked} onChange={() => toggle(o.value)} className=\"size-3.5\" />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && <li className=\"px-2 py-2 text-sm text-muted\">—</li>}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active ? \"bg-brand-soft text-brand-muted\" : \"text-secondary hover:bg-hover\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-muted\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-muted\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  // The bounds were native `type=\"number\"` inputs, the one numeric entry in the kit that\n  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a\n  // comma, a German \"12,50\" read as empty and the filter silently stayed off while the box\n  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads\n  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's\n  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.\n  const shown = (bound: \"min\" | \"max\") => {\n    const own = typed[bound];\n    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);\n  };\n  const setBound = (bound: \"min\" | \"max\", raw: string) => {\n    setTyped((t) => ({ ...t, [bound]: raw }));\n    const read = readTyped(raw, mark);\n    onChange({\n      type: \"number\",\n      min: bound === \"min\" ? read : v.min,\n      max: bound === \"max\" ? read : v.max,\n      abs: v.abs,\n    });\n  };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-muted\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"min\")}\n            onChange={(e) => setBound(\"min\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-muted\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"max\")}\n            onChange={(e) => setBound(\"max\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-secondary\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}
+{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { resolveDataTableLabels } from \"./data-table-shared\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle (none for `numberFilter(getValue, { abs: false })`) — driving the shared\n * {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  // The number bounds' marks, and what the typist wrote in each box — see the number\n  // section below (BUG-10).\n  const mark = decimalMark(locale);\n  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field (field-base.tsx).\n  const inputBase =\n    \"block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase = \"rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-muted\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button type=\"button\" onClick={() => onChange({ type: \"select\", values: [] })} className={buttonBase}>\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-subtle\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover\">\n                  <input type=\"checkbox\" checked={checked} onChange={() => toggle(o.value)} className=\"size-3.5\" />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && <li className=\"px-2 py-2 text-sm text-muted\">—</li>}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active ? \"bg-brand-soft text-brand-muted\" : \"text-secondary hover:bg-hover\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-muted\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-muted\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  // `abs: false` on the filter: no \"Absolute value\" box, and a state that carries `abs`\n  // anyway (a view stored before the column lost the box) is handed on without it at the\n  // first bound typed — there is no box to untick it with (kastlan reuse audit\n  // 2026-11-02, proposal 7).\n  const absBox = filter.abs !== false;\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  // The bounds were native `type=\"number\"` inputs, the one numeric entry in the kit that\n  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a\n  // comma, a German \"12,50\" read as empty and the filter silently stayed off while the box\n  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads\n  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's\n  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.\n  const shown = (bound: \"min\" | \"max\") => {\n    const own = typed[bound];\n    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);\n  };\n  const setBound = (bound: \"min\" | \"max\", raw: string) => {\n    setTyped((t) => ({ ...t, [bound]: raw }));\n    const read = readTyped(raw, mark);\n    onChange({\n      type: \"number\",\n      min: bound === \"min\" ? read : v.min,\n      max: bound === \"max\" ? read : v.max,\n      abs: absBox && v.abs,\n    });\n  };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-muted\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"min\")}\n            onChange={(e) => setBound(\"min\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-muted\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"max\")}\n            onChange={(e) => setBound(\"max\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      {absBox && (\n        <label className=\"flex items-center gap-2 text-sm text-secondary\">\n          <input\n            type=\"checkbox\"\n            checked={v.abs}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n            className=\"size-3.5\"\n          />\n          {labels.numberAbs}\n        </label>\n      )}\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}

package/dist/components/data-table-filters.d.ts

@@ -17,6 +17,11 @@ export type ColumnFilter<T> = {
 } | {
     type: "number";
     getValue: (row: T) => number | null | undefined;
+    /** `false`: no "Absolute value" box, for a figure that is never negative (a year, a
+     *  count, a size), where the box only offers a choice that changes nothing. A state
+     *  or a link that carries `abs` anyway is read without it. Default `true`. See
+     *  {@link numberFilter}. */
+    abs?: boolean;
 };
 /** The current state of a column's filter (what the user has entered). */
 export type FilterValue = {
@@ -39,6 +44,22 @@ export type FilterValue = {
 export declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
 /** Whether a filter value is actually narrowing anything (vs its empty default). */
 export declare function isFilterActive(v: FilterValue | undefined): boolean;
+/**
+ * A number filter's bound as a number, or `null` for none: blank, or not a finite
+ * number (BUG-10, refactor audit 2026-10). `Number("abc")` is NaN, and every comparison
+ * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to
+ * match every row while the column showed its filter as active; `Number(" ")` is 0, and
+ * a blank bound kept every negative row out. The popover hands in the dot-decimal text
+ * its locale's marks read (`readTyped`); anything else is no bound.
+ *
+ * Exported for a server-side table (`serverPagination`), which sends the bounds to its
+ * server instead of comparing here: send what this reads, and leave out a `null`. The box
+ * holds a half-typed "-" or "5e" while the user types, and kastlan's server tables sent
+ * that text on to `col >= :bound` until they wrote this rule again for themselves (kastlan
+ * reuse audit 2026-11-02, proposal 7). And send `abs` only beside a bound: on its own it
+ * narrows nothing.
+ */
+export declare function numberBound(raw: string): number | null;
 /**
  * Whether `row` passes column `col`'s filter given the user's `state`.
  *
@@ -58,7 +79,9 @@ export declare function encodeFilterValue(v: FilterValue): string | null;
 /** Inverse of {@link encodeFilterValue} given just the filter type — for
  *  callers that know a column's type without holding its full config. */
 export declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
-/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. A number
+ *  filter without the "Absolute value" box (`abs: false`) drops a link's `!`: kept, a
+ *  server-side table would send `abs` that nobody can see or untick. */
 export declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
 /** A free-text filter over `getValue`. */
 export declare function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T>;
@@ -73,8 +96,15 @@ export declare function selectFilter<T>(getValue: (row: T) => string, options?:
 }[] | Record<string, string>): ColumnFilter<T>;
 /** A from/to date filter over an ISO date (or date-time) string. */
 export declare function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T>;
-/** A min/max (and absolute-value) filter over a number. */
-export declare function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T>;
+/**
+ * A min/max (and absolute-value) filter over a number. `{ abs: false }` leaves out the
+ * "Absolute value" box, for a figure that is never negative — a year, a count, a size —
+ * where it only offers a choice that changes nothing (kastlan reuse audit 2026-11-02,
+ * proposal 7: its server tables drew it under construction years and file sizes).
+ */
+export declare function numberFilter<T>(getValue: (row: T) => number | null | undefined, options?: {
+    abs?: boolean;
+}): ColumnFilter<T>;
 /**
  * A link to a list page with one column filter already applied — in the table's own URL
  * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or

package/dist/components/data-table-filters.js

@@ -56,7 +56,7 @@ function rowMatches(col, row, state, locale) {
       const min = numberBound(state.min);
       const max = numberBound(state.max);
       if (raw == null || Number.isNaN(raw)) return min === null && max === null;
-      const x = state.abs ? Math.abs(raw) : raw;
+      const x = state.abs && filter.abs !== false ? Math.abs(raw) : raw;
       if (min !== null && x < min) return false;
       if (max !== null && x > max) return false;
       return true;
@@ -120,7 +120,8 @@ function decodeFilterValueOfType(type, raw) {
   }
 }
 function decodeFilterValue(filter, raw) {
-  return decodeFilterValueOfType(filter.type, raw);
+  const value = decodeFilterValueOfType(filter.type, raw);
+  return value.type === "number" && filter.type === "number" && filter.abs === false ? { ...value, abs: false } : value;
 }
 function textFilter(getValue) {
   return { type: "text", getValue };
@@ -132,8 +133,8 @@ function selectFilter(getValue, options) {
 function dateFilter(getValue) {
   return { type: "date", getValue };
 }
-function numberFilter(getValue) {
-  return { type: "number", getValue };
+function numberFilter(getValue, options) {
+  return options?.abs === false ? { type: "number", getValue, abs: false } : { type: "number", getValue };
 }
 function filterHref(path, column, value, options) {
   const state = typeof value === "string" ? { type: "text", q: value } : Array.isArray(value) ? { type: "select", values: value } : value;
@@ -155,6 +156,7 @@ export {
   encodeFilterValue,
   filterHref,
   isFilterActive,
+  numberBound,
   numberFilter,
   resolveFilter,
   rowMatches,

package/dist/components/data-table-filters.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filters.ts"],"sourcesContent":["import type { DataTableColumn } from \"./data-table\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\n\n/** How a column is filtered. `text`/`select`/`date`/`number` each read a value\n *  off the row and compare it against the user's {@link FilterValue}. */\nexport type ColumnFilter<T> =\n  | { type: \"text\"; getValue: (row: T) => string }\n  | { type: \"select\"; getValue: (row: T) => string; options?: { value: string; label?: string }[] }\n  | { type: \"date\"; getValue: (row: T) => string | null | undefined }\n  | { type: \"number\"; getValue: (row: T) => number | null | undefined };\n\n/** The current state of a column's filter (what the user has entered). */\nexport type FilterValue =\n  | { type: \"text\"; q: string }\n  | { type: \"select\"; values: string[] }\n  | { type: \"date\"; from: string; to: string }\n  | { type: \"number\"; min: string; max: string; abs: boolean };\n\n/** A column's filter config, falling back to a plain text filter over `filterBy`. */\nexport function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null {\n  if (col.filter) return col.filter;\n  if (col.filterBy) return { type: \"text\", getValue: col.filterBy };\n  return null;\n}\n\n/** Whether a filter value is actually narrowing anything (vs its empty default). */\nexport function isFilterActive(v: FilterValue | undefined): boolean {\n  if (!v) return false;\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim().length > 0;\n    case \"select\":\n      return v.values.length > 0;\n    case \"date\":\n      return !!v.from || !!v.to;\n    case \"number\":\n      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;\n  }\n}\n\n/**\n * A number filter's bound as a number, or `null` for none: blank, or not a finite\n * number (BUG-10, refactor audit 2026-10). `Number(\"abc\")` is NaN, and every comparison\n * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to\n * match every row while the column showed its filter as active; `Number(\" \")` is 0, and\n * a blank bound kept every negative row out. The popover hands in the dot-decimal text\n * its locale's marks read (`readTyped`); anything else is no bound.\n */\nfunction numberBound(raw: string): number | null {\n  if (raw.trim() === \"\") return null;\n  const n = Number(raw);\n  return Number.isFinite(n) ? n : null;\n}\n\n/**\n * The calendar day a date filter compares, as \"YYYY-MM-DD\" — the LOCAL day, the one\n * the cell, the DatePicker and the presets show (round 0.34 BUG-2).\n *\n * A bare \"YYYY-MM-DD\" is a calendar day already and is kept as it is. Anything with a\n * time part is an instant: its first ten characters were the UTC day for a server\n * timestamp (\"…Z\", \"+00:00\"), so in Berlin a report filed at 00:30 showed as the 12th\n * and was filtered as the 11th. It is read as the instant it names and put on the\n * local calendar. A string `Date` cannot read keeps the old first-ten-characters\n * answer rather than matching nothing.\n */\nfunction localDay(raw: string): string {\n  if (/^\\d{4}-\\d{2}-\\d{2}$/.test(raw)) return raw;\n  const d = new Date(raw);\n  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);\n}\n\n/**\n * Whether `row` passes column `col`'s filter given the user's `state`.\n *\n * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the\n * root rules, under which a Turkish user typing \"ırmak\" does not find \"IRMAK\";\n * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.\n * The text filter folds as every kit list does (`foldForSearch`, DUP-5): accents off\n * too, so \"zurich\" finds Zürich. And it matches as the pickers do since 0.51.4 (refactor\n * audit 2026-10-30, DUP-4): every word of the query, anywhere in the value, in any order —\n * \"zurich migros\" finds \"Migros · 8004 Zürich\". One word matches as before.\n */\nexport function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {\n  const filter = resolveFilter(col);\n  if (!filter) return true;\n  switch (filter.type) {\n    case \"text\": {\n      if (state.type !== \"text\" || !state.q.trim()) return true;\n      return matchesSearch(searchWords(state.q, locale), [filter.getValue(row)], locale);\n    }\n    case \"select\": {\n      if (state.type !== \"select\" || state.values.length === 0) return true;\n      return state.values.includes(filter.getValue(row));\n    }\n    case \"date\": {\n      if (state.type !== \"date\") return true;\n      const raw = filter.getValue(row);\n      if (!raw) return !state.from && !state.to;\n      const v = localDay(raw);\n      if (state.from && v < state.from) return false;\n      if (state.to && v > state.to) return false;\n      return true;\n    }\n    case \"number\": {\n      if (state.type !== \"number\") return true;\n      const raw = filter.getValue(row);\n      const min = numberBound(state.min);\n      const max = numberBound(state.max);\n      if (raw == null || Number.isNaN(raw)) return min === null && max === null;\n      const x = state.abs ? Math.abs(raw) : raw;\n      if (min !== null && x < min) return false;\n      if (max !== null && x > max) return false;\n      return true;\n    }\n  }\n}\n\n/** The empty filter state for a column's filter type. */\nexport function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue {\n  switch (filter.type) {\n    case \"text\":\n      return { type: \"text\", q: \"\" };\n    case \"select\":\n      return { type: \"select\", values: [] };\n    case \"date\":\n      return { type: \"date\", from: \"\", to: \"\" };\n    case \"number\":\n      return { type: \"number\", min: \"\", max: \"\", abs: false };\n  }\n}\n\n/**\n * Escape the ONE character the select codec uses as its separator, plus the escape\n * marker itself so the transform is reversible.\n *\n * A minimal escape rather than `encodeURIComponent`, deliberately: these strings sit\n * inside a query-parameter value that `URLSearchParams` already encodes, so a full\n * percent-encode would double-encode every space into `%2520` and make shared links\n * unreadable for no gain. Only `,` can be misread here.\n *\n * Backwards compatible with every link written before this existed: a value with\n * neither `,` nor `%` passes through both directions untouched, and `%` on its own\n * never matched `%25` either.\n */\nfunction escapeSelectValue(v: string): string {\n  return v.replace(/%/g, \"%25\").replace(/,/g, \"%2C\");\n}\n\n/** Inverse of {@link escapeSelectValue}. The order matters and is the reverse of the\n *  escape: undoing `%2C` first cannot see the `2C` inside an escaped `%252C`. */\nfunction unescapeSelectValue(v: string): string {\n  return v.replace(/%2C/g, \",\").replace(/%25/g, \"%\");\n}\n\n/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */\nexport function encodeFilterValue(v: FilterValue): string | null {\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim() ? v.q : null;\n    case \"select\":\n      // Escaped before joining: an option value may legitimately contain the\n      // separator (a free-text title, a payee or category name), and without this it\n      // came back as two values and the filter silently matched nothing.\n      return v.values.length ? v.values.map(escapeSelectValue).join(\",\") : null;\n    case \"date\":\n      return v.from || v.to ? `${v.from}..${v.to}` : null;\n    case \"number\": {\n      const hasRange = v.min !== \"\" || v.max !== \"\";\n      if (!hasRange && !v.abs) return null;\n      return `${v.min}..${v.max}${v.abs ? \"!\" : \"\"}`;\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue} given just the filter type — for\n *  callers that know a column's type without holding its full config. */\nexport function decodeFilterValueOfType(type: FilterValue[\"type\"], raw: string): FilterValue {\n  switch (type) {\n    case \"text\":\n      return { type: \"text\", q: raw };\n    case \"select\":\n      return {\n        type: \"select\",\n        values: raw\n          .split(\",\")\n          .filter((v) => v.length > 0)\n          .map(unescapeSelectValue),\n      };\n    case \"date\": {\n      const [from = \"\", to = \"\"] = raw.split(\"..\");\n      return { type: \"date\", from, to };\n    }\n    case \"number\": {\n      let body = raw;\n      const abs = body.endsWith(\"!\");\n      if (abs) body = body.slice(0, -1);\n      const [min = \"\", max = \"\"] = body.split(\"..\");\n      // A bound that is not a finite number is dropped here, so a broken link leaves the\n      // filter off rather than active and matching everything (BUG-10).\n      const kept = (s: string) => (numberBound(s) === null ? \"\" : s);\n      return { type: \"number\", min: kept(min), max: kept(max), abs };\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */\nexport function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {\n  return decodeFilterValueOfType(filter.type, raw);\n}\n\n// ---------- Filter builders ----------\n//\n// Terse builders for `DataTableColumn.filter`, lifted from kastlan's column-filters.ts,\n// which every converted list page imports. The one that earns its keep is `selectFilter`:\n// in `serverPagination` mode a select filter MUST declare its options (the table would\n// otherwise derive them from the rows of the page on screen), and the options an app has\n// to hand are usually a translated `{ value: label }` map.\n\n/** A free-text filter over `getValue`. */\nexport function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T> {\n  return { type: \"text\", getValue };\n}\n\n/**\n * A multi-select filter. `options` is an options array, or a `{ value: label }` record\n * (a translated status map) — kept in its key order. Left out, the table derives the\n * options from the rows it holds.\n */\nexport function selectFilter<T>(\n  getValue: (row: T) => string,\n  options?: { value: string; label?: string }[] | Record<string, string>,\n): ColumnFilter<T> {\n  const opts = Array.isArray(options)\n    ? options\n    : options\n      ? Object.entries(options).map(([value, label]) => ({ value, label }))\n      : undefined;\n  return { type: \"select\", getValue, options: opts };\n}\n\n/** A from/to date filter over an ISO date (or date-time) string. */\nexport function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T> {\n  return { type: \"date\", getValue };\n}\n\n/** A min/max (and absolute-value) filter over a number. */\nexport function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T> {\n  return { type: \"number\", getValue };\n}\n\n/**\n * A link to a list page with one column filter already applied — in the table's own URL\n * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or\n * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to\n * restate the `f.` prefix to do it.\n *\n * `value` is a string for a text filter, an array for a select filter, or any\n * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`\n * that already carries a query keeps it; a `#fragment` stays at the end.\n *\n *     filterHref(\"/units\", \"status\", [\"vacant\"]) // \"/units?f.status=vacant\"\n */\nexport function filterHref(\n  path: string,\n  column: string,\n  value: string | string[] | FilterValue,\n  /** The target table's `urlSync` prefix, if it has one (`{ prefix: \"inv.\" }` →\n   *  `inv.f.<column>`). */\n  options?: { prefix?: string },\n): string {\n  const state: FilterValue =\n    typeof value === \"string\"\n      ? { type: \"text\", q: value }\n      : Array.isArray(value)\n        ? { type: \"select\", values: value }\n        : value;\n  const encoded = encodeFilterValue(state);\n  if (encoded == null) return path;\n  const hashAt = path.indexOf(\"#\");\n  const base = hashAt >= 0 ? path.slice(0, hashAt) : path;\n  const hash = hashAt >= 0 ? path.slice(hashAt) : \"\";\n  const queryAt = base.indexOf(\"?\");\n  const params = new URLSearchParams(queryAt >= 0 ? base.slice(queryAt + 1) : \"\");\n  params.set(`${options?.prefix ?? \"\"}f.${column}`, encoded);\n  return `${queryAt >= 0 ? base.slice(0, queryAt) : base}?${params.toString()}${hash}`;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-filters.ts"],"sourcesContent":["import type { DataTableColumn } from \"./data-table\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\n\n/** How a column is filtered. `text`/`select`/`date`/`number` each read a value\n *  off the row and compare it against the user's {@link FilterValue}. */\nexport type ColumnFilter<T> =\n  | { type: \"text\"; getValue: (row: T) => string }\n  | { type: \"select\"; getValue: (row: T) => string; options?: { value: string; label?: string }[] }\n  | { type: \"date\"; getValue: (row: T) => string | null | undefined }\n  | {\n      type: \"number\";\n      getValue: (row: T) => number | null | undefined;\n      /** `false`: no \"Absolute value\" box, for a figure that is never negative (a year, a\n       *  count, a size), where the box only offers a choice that changes nothing. A state\n       *  or a link that carries `abs` anyway is read without it. Default `true`. See\n       *  {@link numberFilter}. */\n      abs?: boolean;\n    };\n\n/** The current state of a column's filter (what the user has entered). */\nexport type FilterValue =\n  | { type: \"text\"; q: string }\n  | { type: \"select\"; values: string[] }\n  | { type: \"date\"; from: string; to: string }\n  | { type: \"number\"; min: string; max: string; abs: boolean };\n\n/** A column's filter config, falling back to a plain text filter over `filterBy`. */\nexport function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null {\n  if (col.filter) return col.filter;\n  if (col.filterBy) return { type: \"text\", getValue: col.filterBy };\n  return null;\n}\n\n/** Whether a filter value is actually narrowing anything (vs its empty default). */\nexport function isFilterActive(v: FilterValue | undefined): boolean {\n  if (!v) return false;\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim().length > 0;\n    case \"select\":\n      return v.values.length > 0;\n    case \"date\":\n      return !!v.from || !!v.to;\n    case \"number\":\n      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;\n  }\n}\n\n/**\n * A number filter's bound as a number, or `null` for none: blank, or not a finite\n * number (BUG-10, refactor audit 2026-10). `Number(\"abc\")` is NaN, and every comparison\n * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to\n * match every row while the column showed its filter as active; `Number(\" \")` is 0, and\n * a blank bound kept every negative row out. The popover hands in the dot-decimal text\n * its locale's marks read (`readTyped`); anything else is no bound.\n *\n * Exported for a server-side table (`serverPagination`), which sends the bounds to its\n * server instead of comparing here: send what this reads, and leave out a `null`. The box\n * holds a half-typed \"-\" or \"5e\" while the user types, and kastlan's server tables sent\n * that text on to `col >= :bound` until they wrote this rule again for themselves (kastlan\n * reuse audit 2026-11-02, proposal 7). And send `abs` only beside a bound: on its own it\n * narrows nothing.\n */\nexport function numberBound(raw: string): number | null {\n  if (raw.trim() === \"\") return null;\n  const n = Number(raw);\n  return Number.isFinite(n) ? n : null;\n}\n\n/**\n * The calendar day a date filter compares, as \"YYYY-MM-DD\" — the LOCAL day, the one\n * the cell, the DatePicker and the presets show (round 0.34 BUG-2).\n *\n * A bare \"YYYY-MM-DD\" is a calendar day already and is kept as it is. Anything with a\n * time part is an instant: its first ten characters were the UTC day for a server\n * timestamp (\"…Z\", \"+00:00\"), so in Berlin a report filed at 00:30 showed as the 12th\n * and was filtered as the 11th. It is read as the instant it names and put on the\n * local calendar. A string `Date` cannot read keeps the old first-ten-characters\n * answer rather than matching nothing.\n */\nfunction localDay(raw: string): string {\n  if (/^\\d{4}-\\d{2}-\\d{2}$/.test(raw)) return raw;\n  const d = new Date(raw);\n  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);\n}\n\n/**\n * Whether `row` passes column `col`'s filter given the user's `state`.\n *\n * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the\n * root rules, under which a Turkish user typing \"ırmak\" does not find \"IRMAK\";\n * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.\n * The text filter folds as every kit list does (`foldForSearch`, DUP-5): accents off\n * too, so \"zurich\" finds Zürich. And it matches as the pickers do since 0.51.4 (refactor\n * audit 2026-10-30, DUP-4): every word of the query, anywhere in the value, in any order —\n * \"zurich migros\" finds \"Migros · 8004 Zürich\". One word matches as before.\n */\nexport function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {\n  const filter = resolveFilter(col);\n  if (!filter) return true;\n  switch (filter.type) {\n    case \"text\": {\n      if (state.type !== \"text\" || !state.q.trim()) return true;\n      return matchesSearch(searchWords(state.q, locale), [filter.getValue(row)], locale);\n    }\n    case \"select\": {\n      if (state.type !== \"select\" || state.values.length === 0) return true;\n      return state.values.includes(filter.getValue(row));\n    }\n    case \"date\": {\n      if (state.type !== \"date\") return true;\n      const raw = filter.getValue(row);\n      if (!raw) return !state.from && !state.to;\n      const v = localDay(raw);\n      if (state.from && v < state.from) return false;\n      if (state.to && v > state.to) return false;\n      return true;\n    }\n    case \"number\": {\n      if (state.type !== \"number\") return true;\n      const raw = filter.getValue(row);\n      const min = numberBound(state.min);\n      const max = numberBound(state.max);\n      if (raw == null || Number.isNaN(raw)) return min === null && max === null;\n      // A column without the box (`abs: false`) compares the figure as it is, whatever\n      // the state says: there is nothing on screen to untick.\n      const x = state.abs && filter.abs !== false ? Math.abs(raw) : raw;\n      if (min !== null && x < min) return false;\n      if (max !== null && x > max) return false;\n      return true;\n    }\n  }\n}\n\n/** The empty filter state for a column's filter type. */\nexport function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue {\n  switch (filter.type) {\n    case \"text\":\n      return { type: \"text\", q: \"\" };\n    case \"select\":\n      return { type: \"select\", values: [] };\n    case \"date\":\n      return { type: \"date\", from: \"\", to: \"\" };\n    case \"number\":\n      return { type: \"number\", min: \"\", max: \"\", abs: false };\n  }\n}\n\n/**\n * Escape the ONE character the select codec uses as its separator, plus the escape\n * marker itself so the transform is reversible.\n *\n * A minimal escape rather than `encodeURIComponent`, deliberately: these strings sit\n * inside a query-parameter value that `URLSearchParams` already encodes, so a full\n * percent-encode would double-encode every space into `%2520` and make shared links\n * unreadable for no gain. Only `,` can be misread here.\n *\n * Backwards compatible with every link written before this existed: a value with\n * neither `,` nor `%` passes through both directions untouched, and `%` on its own\n * never matched `%25` either.\n */\nfunction escapeSelectValue(v: string): string {\n  return v.replace(/%/g, \"%25\").replace(/,/g, \"%2C\");\n}\n\n/** Inverse of {@link escapeSelectValue}. The order matters and is the reverse of the\n *  escape: undoing `%2C` first cannot see the `2C` inside an escaped `%252C`. */\nfunction unescapeSelectValue(v: string): string {\n  return v.replace(/%2C/g, \",\").replace(/%25/g, \"%\");\n}\n\n/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */\nexport function encodeFilterValue(v: FilterValue): string | null {\n  switch (v.type) {\n    case \"text\":\n      return v.q.trim() ? v.q : null;\n    case \"select\":\n      // Escaped before joining: an option value may legitimately contain the\n      // separator (a free-text title, a payee or category name), and without this it\n      // came back as two values and the filter silently matched nothing.\n      return v.values.length ? v.values.map(escapeSelectValue).join(\",\") : null;\n    case \"date\":\n      return v.from || v.to ? `${v.from}..${v.to}` : null;\n    case \"number\": {\n      const hasRange = v.min !== \"\" || v.max !== \"\";\n      if (!hasRange && !v.abs) return null;\n      return `${v.min}..${v.max}${v.abs ? \"!\" : \"\"}`;\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue} given just the filter type — for\n *  callers that know a column's type without holding its full config. */\nexport function decodeFilterValueOfType(type: FilterValue[\"type\"], raw: string): FilterValue {\n  switch (type) {\n    case \"text\":\n      return { type: \"text\", q: raw };\n    case \"select\":\n      return {\n        type: \"select\",\n        values: raw\n          .split(\",\")\n          .filter((v) => v.length > 0)\n          .map(unescapeSelectValue),\n      };\n    case \"date\": {\n      const [from = \"\", to = \"\"] = raw.split(\"..\");\n      return { type: \"date\", from, to };\n    }\n    case \"number\": {\n      let body = raw;\n      const abs = body.endsWith(\"!\");\n      if (abs) body = body.slice(0, -1);\n      const [min = \"\", max = \"\"] = body.split(\"..\");\n      // A bound that is not a finite number is dropped here, so a broken link leaves the\n      // filter off rather than active and matching everything (BUG-10).\n      const kept = (s: string) => (numberBound(s) === null ? \"\" : s);\n      return { type: \"number\", min: kept(min), max: kept(max), abs };\n    }\n  }\n}\n\n/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. A number\n *  filter without the \"Absolute value\" box (`abs: false`) drops a link's `!`: kept, a\n *  server-side table would send `abs` that nobody can see or untick. */\nexport function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {\n  const value = decodeFilterValueOfType(filter.type, raw);\n  return value.type === \"number\" && filter.type === \"number\" && filter.abs === false ? { ...value, abs: false } : value;\n}\n\n// ---------- Filter builders ----------\n//\n// Terse builders for `DataTableColumn.filter`, lifted from kastlan's column-filters.ts,\n// which every converted list page imports. The one that earns its keep is `selectFilter`:\n// in `serverPagination` mode a select filter MUST declare its options (the table would\n// otherwise derive them from the rows of the page on screen), and the options an app has\n// to hand are usually a translated `{ value: label }` map.\n\n/** A free-text filter over `getValue`. */\nexport function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T> {\n  return { type: \"text\", getValue };\n}\n\n/**\n * A multi-select filter. `options` is an options array, or a `{ value: label }` record\n * (a translated status map) — kept in its key order. Left out, the table derives the\n * options from the rows it holds.\n */\nexport function selectFilter<T>(\n  getValue: (row: T) => string,\n  options?: { value: string; label?: string }[] | Record<string, string>,\n): ColumnFilter<T> {\n  const opts = Array.isArray(options)\n    ? options\n    : options\n      ? Object.entries(options).map(([value, label]) => ({ value, label }))\n      : undefined;\n  return { type: \"select\", getValue, options: opts };\n}\n\n/** A from/to date filter over an ISO date (or date-time) string. */\nexport function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T> {\n  return { type: \"date\", getValue };\n}\n\n/**\n * A min/max (and absolute-value) filter over a number. `{ abs: false }` leaves out the\n * \"Absolute value\" box, for a figure that is never negative — a year, a count, a size —\n * where it only offers a choice that changes nothing (kastlan reuse audit 2026-11-02,\n * proposal 7: its server tables drew it under construction years and file sizes).\n */\nexport function numberFilter<T>(\n  getValue: (row: T) => number | null | undefined,\n  options?: { abs?: boolean },\n): ColumnFilter<T> {\n  return options?.abs === false ? { type: \"number\", getValue, abs: false } : { type: \"number\", getValue };\n}\n\n/**\n * A link to a list page with one column filter already applied — in the table's own URL\n * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or\n * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to\n * restate the `f.` prefix to do it.\n *\n * `value` is a string for a text filter, an array for a select filter, or any\n * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`\n * that already carries a query keeps it; a `#fragment` stays at the end.\n *\n *     filterHref(\"/units\", \"status\", [\"vacant\"]) // \"/units?f.status=vacant\"\n */\nexport function filterHref(\n  path: string,\n  column: string,\n  value: string | string[] | FilterValue,\n  /** The target table's `urlSync` prefix, if it has one (`{ prefix: \"inv.\" }` →\n   *  `inv.f.<column>`). */\n  options?: { prefix?: string },\n): string {\n  const state: FilterValue =\n    typeof value === \"string\"\n      ? { type: \"text\", q: value }\n      : Array.isArray(value)\n        ? { type: \"select\", values: value }\n        : value;\n  const encoded = encodeFilterValue(state);\n  if (encoded == null) return path;\n  const hashAt = path.indexOf(\"#\");\n  const base = hashAt >= 0 ? path.slice(0, hashAt) : path;\n  const hash = hashAt >= 0 ? path.slice(hashAt) : \"\";\n  const queryAt = base.indexOf(\"?\");\n  const params = new URLSearchParams(queryAt >= 0 ? base.slice(queryAt + 1) : \"\");\n  params.set(`${options?.prefix ?? \"\"}f.${column}`, encoded);\n  return `${queryAt >= 0 ? base.slice(0, queryAt) : base}?${params.toString()}${hash}`;\n}\n"],"mappings":"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","names":[]}

package/dist/components/dialog-frame.d.ts

@@ -15,7 +15,9 @@ export { DEFAULT_DIALOG_FRAME_LABELS };
  * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`
  * (round 0.35 R4): the panel, the `role="dialog"` element the frame's header, body and
  * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that
- * `actions` and `headerActions` receive, since both are the `Modal`'s own close.
+ * `actions` and `headerActions` receive, since both are the `Modal`'s own close. And
+ * `held` (keksdose audit follow-up, 2026-11-01), which holds the same and shows the X
+ * disabled — see {@link ModalProps.held}.
  */
 export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
     /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */

package/dist/components/dialog-frame.js

@@ -52,7 +52,7 @@ function DialogFrame({
                 ] }),
                 headerActions !== void 0 && headerActions !== null && headerActions !== false && /* @__PURE__ */ jsx(FrameHeaderActions, { actions: headerActions, onClose: modal.onClose })
               ] }),
-              closeButton && /* @__PURE__ */ jsx(FrameClose, { label: closeLabel, onClose: modal.onClose })
+              closeButton && /* @__PURE__ */ jsx(FrameClose, { label: closeLabel, onClose: modal.onClose, held: modal.held })
             ]
           }
         ),
@@ -74,7 +74,7 @@ function DialogFrame({
     }
   );
 }
-function FrameClose({ label, onClose }) {
+function FrameClose({ label, onClose, held = false }) {
   const close = useContext(ModalCloseContext) ?? onClose;
   const labels = useKitLabels(
     "dialogFrame",
@@ -86,9 +86,13 @@ function FrameClose({ label, onClose }) {
     {
       type: "button",
       onClick: close,
+      disabled: held,
       "aria-label": labels.close,
       className: cn(
         "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
+        // The kit's disabled look (Button, IconButton), and the resting look pinned under
+        // `disabled:hover:` so a refused X does not light up under the pointer.
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted",
         FOCUS_RING
       ),
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })

package/dist/components/dialog-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_DIALOG_FRAME_LABELS } from \"./dialog-frame-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\n// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DIALOG_FRAME_LABELS };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`\n * (round 0.35 R4): the panel, the `role=\"dialog\"` element the frame's header, body and\n * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that\n * `actions` and `headerActions` receive, since both are the `Modal`'s own close.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={\n        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined\n      }\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-subtle\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-primary\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\n    \"dialogFrame\",\n    DEFAULT_DIALOG_FRAME_LABELS,\n    label === undefined ? undefined : { close: label },\n  );\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className={cn(\n        \"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary\",\n        FOCUS_RING,\n      )}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-subtle\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_DIALOG_FRAME_LABELS } from \"./dialog-frame-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\n// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DIALOG_FRAME_LABELS };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`\n * (round 0.35 R4): the panel, the `role=\"dialog\"` element the frame's header, body and\n * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that\n * `actions` and `headerActions` receive, since both are the `Modal`'s own close. And\n * `held` (keksdose audit follow-up, 2026-11-01), which holds the same and shows the X\n * disabled — see {@link ModalProps.held}.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={\n        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined\n      }\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-subtle\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-primary\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} held={modal.held} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). Disabled\n *  while `held`; under `busy` it stays enabled and the `Modal` drops its press (see\n *  {@link ModalProps.held} for why the two differ). */\nfunction FrameClose({ label, onClose, held = false }: { label?: string; onClose: () => void; held?: boolean }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\n    \"dialogFrame\",\n    DEFAULT_DIALOG_FRAME_LABELS,\n    label === undefined ? undefined : { close: label },\n  );\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      disabled={held}\n      aria-label={labels.close}\n      className={cn(\n        \"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary\",\n        // The kit's disabled look (Button, IconButton), and the resting look pinned under\n        // `disabled:hover:` so a refused X does not light up under the pointer.\n        \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted\",\n        FOCUS_RING,\n      )}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-subtle\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/mini-calendar.js

@@ -9,6 +9,7 @@ import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
 import { horizontalStep } from "../lib/direction.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
+import { dateFormatter } from "../lib/intl-cache.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
 import { DEFAULT_MINI_CALENDAR_LABELS } from "./mini-calendar-labels.js";
 const DAY_NAME_FORMAT = {
@@ -103,8 +104,8 @@ function MiniCalendar({
   }
   const weeks = [];
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
-  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" }), locale);
-  const formatDay = (d) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
+  const monthLabel = upperFirst(dateFormatter(locale, { month: "long", year: "numeric" }).format(firstOfMonth), locale);
+  const formatDay = (d) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);
   const weekdayLabels = useMemo(() => {
     const ref = new Date(2024, 0, 7 + weekStart);
     return Array.from({ length: 7 }, (_, i) => {