@eifi1/ui-kit 0.48.2 → 0.50.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 (377) hide show
  1. package/README.md +34 -16
  2. package/dist/admin/admin-action-confirm.js +1 -1
  3. package/dist/admin/admin-action-confirm.js.map +1 -1
  4. package/dist/admin/invitations-panel.js +5 -1
  5. package/dist/admin/invitations-panel.js.map +1 -1
  6. package/dist/admin/user-roster.d.ts +24 -12
  7. package/dist/admin/user-roster.js +21 -6
  8. package/dist/admin/user-roster.js.map +1 -1
  9. package/dist/auth/accept-invitation.js +2 -2
  10. package/dist/auth/accept-invitation.js.map +1 -1
  11. package/dist/auth/not-found-page.js +1 -1
  12. package/dist/auth/not-found-page.js.map +1 -1
  13. package/dist/auth/reset-password-form.js +2 -2
  14. package/dist/auth/reset-password-form.js.map +1 -1
  15. package/dist/auth/verify-email.d.ts +9 -1
  16. package/dist/auth/verify-email.js +5 -3
  17. package/dist/auth/verify-email.js.map +1 -1
  18. package/dist/billing/plan-card.js +2 -2
  19. package/dist/billing/plan-card.js.map +1 -1
  20. package/dist/components/amount-input.d.ts +2 -1
  21. package/dist/components/amount-input.js +3 -2
  22. package/dist/components/amount-input.js.map +1 -1
  23. package/dist/components/autocomplete.js +1 -0
  24. package/dist/components/autocomplete.js.map +1 -1
  25. package/dist/components/breadcrumbs.d.ts +19 -1
  26. package/dist/components/breadcrumbs.js +11 -4
  27. package/dist/components/breadcrumbs.js.map +1 -1
  28. package/dist/components/button-look.d.ts +37 -7
  29. package/dist/components/button-look.js +33 -6
  30. package/dist/components/button-look.js.map +1 -1
  31. package/dist/components/button.d.ts +4 -1
  32. package/dist/components/button.js +2 -2
  33. package/dist/components/button.js.map +1 -1
  34. package/dist/components/calendar-heatmap.js +2 -1
  35. package/dist/components/calendar-heatmap.js.map +1 -1
  36. package/dist/components/chart-edge.d.ts +10 -0
  37. package/dist/components/chart-edge.js +57 -0
  38. package/dist/components/chart-edge.js.map +1 -0
  39. package/dist/components/chart.js +2 -1
  40. package/dist/components/chart.js.map +1 -1
  41. package/dist/components/chip.d.ts +8 -1
  42. package/dist/components/chip.js +4 -1
  43. package/dist/components/chip.js.map +1 -1
  44. package/dist/components/combobox-core.js +1 -0
  45. package/dist/components/combobox-core.js.map +1 -1
  46. package/dist/components/combobox-suggestions.js +1 -0
  47. package/dist/components/combobox-suggestions.js.map +1 -1
  48. package/dist/components/confirm-context.d.ts +5 -0
  49. package/dist/components/confirm-context.js +7 -0
  50. package/dist/components/confirm-context.js.map +1 -0
  51. package/dist/components/confirm-dialog.js +3 -3
  52. package/dist/components/confirm-dialog.js.map +1 -1
  53. package/dist/components/currency-select.d.ts +28 -2
  54. package/dist/components/currency-select.js +56 -10
  55. package/dist/components/currency-select.js.map +1 -1
  56. package/dist/components/danger-confirm.d.ts +2 -2
  57. package/dist/components/danger-confirm.js +1 -1
  58. package/dist/components/danger-confirm.js.map +1 -1
  59. package/dist/components/data-table-fit.js +21 -3
  60. package/dist/components/data-table-fit.js.map +1 -1
  61. package/dist/components/data-table-mobile.d.ts +58 -3
  62. package/dist/components/data-table-mobile.js +147 -16
  63. package/dist/components/data-table-mobile.js.map +1 -1
  64. package/dist/components/data-table-row-actions.d.ts +2 -1
  65. package/dist/components/data-table-row-actions.js +7 -0
  66. package/dist/components/data-table-row-actions.js.map +1 -1
  67. package/dist/components/data-table-row.d.ts +1 -1
  68. package/dist/components/data-table-row.js.map +1 -1
  69. package/dist/components/data-table.d.ts +34 -1
  70. package/dist/components/data-table.js +37 -10
  71. package/dist/components/data-table.js.map +1 -1
  72. package/dist/components/dropdown.js +1 -0
  73. package/dist/components/dropdown.js.map +1 -1
  74. package/dist/components/error-boundary.js +2 -2
  75. package/dist/components/error-boundary.js.map +1 -1
  76. package/dist/components/floating-panel.d.ts +36 -13
  77. package/dist/components/floating-panel.js +27 -7
  78. package/dist/components/floating-panel.js.map +1 -1
  79. package/dist/components/form-actions.d.ts +1 -1
  80. package/dist/components/form-actions.js +1 -1
  81. package/dist/components/form-actions.js.map +1 -1
  82. package/dist/components/full-bleed-dialog.js +1 -0
  83. package/dist/components/full-bleed-dialog.js.map +1 -1
  84. package/dist/components/icon-button.d.ts +11 -0
  85. package/dist/components/icon-button.js +7 -5
  86. package/dist/components/icon-button.js.map +1 -1
  87. package/dist/components/modal.js +1 -0
  88. package/dist/components/modal.js.map +1 -1
  89. package/dist/components/nav-pills.d.ts +8 -1
  90. package/dist/components/nav-pills.js +61 -38
  91. package/dist/components/nav-pills.js.map +1 -1
  92. package/dist/components/number-input.d.ts +2 -1
  93. package/dist/components/number-input.js +6 -2
  94. package/dist/components/number-input.js.map +1 -1
  95. package/dist/components/numpad-sheet.js +2 -0
  96. package/dist/components/numpad-sheet.js.map +1 -1
  97. package/dist/components/page-header-context.d.ts +8 -0
  98. package/dist/components/page-header-context.js +7 -0
  99. package/dist/components/page-header-context.js.map +1 -0
  100. package/dist/components/page-header.d.ts +14 -2
  101. package/dist/components/page-header.js +10 -1
  102. package/dist/components/page-header.js.map +1 -1
  103. package/dist/components/picker-sheet.js +2 -0
  104. package/dist/components/picker-sheet.js.map +1 -1
  105. package/dist/components/pie-chart.js +2 -1
  106. package/dist/components/pie-chart.js.map +1 -1
  107. package/dist/components/popover.js +1 -0
  108. package/dist/components/popover.js.map +1 -1
  109. package/dist/components/progress-bar.js +5 -4
  110. package/dist/components/progress-bar.js.map +1 -1
  111. package/dist/components/reauth-dialog.js +1 -1
  112. package/dist/components/reauth-dialog.js.map +1 -1
  113. package/dist/components/row-actions-labels.js +3 -1
  114. package/dist/components/row-actions-labels.js.map +1 -1
  115. package/dist/components/row-actions.d.ts +43 -9
  116. package/dist/components/row-actions.js +78 -15
  117. package/dist/components/row-actions.js.map +1 -1
  118. package/dist/components/section-nav.d.ts +37 -0
  119. package/dist/components/section-nav.js +33 -0
  120. package/dist/components/section-nav.js.map +1 -0
  121. package/dist/components/series-chart.js +8 -3
  122. package/dist/components/series-chart.js.map +1 -1
  123. package/dist/components/share-card.js +1 -1
  124. package/dist/components/share-card.js.map +1 -1
  125. package/dist/components/signature-pad.js +1 -1
  126. package/dist/components/signature-pad.js.map +1 -1
  127. package/dist/components/sparkline.js +2 -1
  128. package/dist/components/sparkline.js.map +1 -1
  129. package/dist/components/stat-tile.js +14 -7
  130. package/dist/components/stat-tile.js.map +1 -1
  131. package/dist/components/status-dot.d.ts +5 -1
  132. package/dist/components/status-dot.js +4 -1
  133. package/dist/components/status-dot.js.map +1 -1
  134. package/dist/components/tooltip.js +1 -1
  135. package/dist/components/tooltip.js.map +1 -1
  136. package/dist/components/translation-review-editor.js +2 -2
  137. package/dist/components/translation-review-editor.js.map +1 -1
  138. package/dist/components/translation-review.js +2 -2
  139. package/dist/components/translation-review.js.map +1 -1
  140. package/dist/components/treemap.d.ts +5 -2
  141. package/dist/components/treemap.js +26 -6
  142. package/dist/components/treemap.js.map +1 -1
  143. package/dist/components/use-table-state.js +37 -6
  144. package/dist/components/use-table-state.js.map +1 -1
  145. package/dist/data-table.js.map +1 -1
  146. package/dist/demo/demo-banner.js +1 -1
  147. package/dist/demo/demo-banner.js.map +1 -1
  148. package/dist/demo/demo-ended.js +1 -1
  149. package/dist/demo/demo-ended.js.map +1 -1
  150. package/dist/demo/demo-start.js +1 -1
  151. package/dist/demo/demo-start.js.map +1 -1
  152. package/dist/eslint/index.js +1 -1
  153. package/dist/feedback/feedback-inbox.js +1 -1
  154. package/dist/feedback/feedback-inbox.js.map +1 -1
  155. package/dist/hooks/use-dismiss.d.ts +9 -1
  156. package/dist/hooks/use-dismiss.js +25 -5
  157. package/dist/hooks/use-dismiss.js.map +1 -1
  158. package/dist/hooks/use-document-title.d.ts +14 -0
  159. package/dist/hooks/use-document-title.js +22 -0
  160. package/dist/hooks/use-document-title.js.map +1 -0
  161. package/dist/i18n/defaults.js +2 -0
  162. package/dist/i18n/defaults.js.map +1 -1
  163. package/dist/i18n/german.js +20 -3
  164. package/dist/i18n/german.js.map +1 -1
  165. package/dist/i18n/kit-labels.d.ts +34 -1
  166. package/dist/i18n/kit-labels.js +43 -2
  167. package/dist/i18n/kit-labels.js.map +1 -1
  168. package/dist/i18n/locales/en.js +22 -3
  169. package/dist/i18n/locales/en.js.map +3 -3
  170. package/dist/i18n/locales/es.js +20 -3
  171. package/dist/i18n/locales/es.js.map +1 -1
  172. package/dist/i18n/locales/fr.js +20 -3
  173. package/dist/i18n/locales/fr.js.map +1 -1
  174. package/dist/i18n/locales/hu.js +20 -3
  175. package/dist/i18n/locales/hu.js.map +1 -1
  176. package/dist/i18n/locales/it.js +20 -3
  177. package/dist/i18n/locales/it.js.map +1 -1
  178. package/dist/i18n/locales/zh.js +20 -3
  179. package/dist/i18n/locales/zh.js.map +1 -1
  180. package/dist/i18n/review.js +3 -0
  181. package/dist/i18n/review.js.map +1 -1
  182. package/dist/i18n/shared-labels.js +1 -0
  183. package/dist/i18n/shared-labels.js.map +1 -1
  184. package/dist/index.d.ts +8 -1
  185. package/dist/index.js +11 -0
  186. package/dist/index.js.map +1 -1
  187. package/dist/landing/landing-actions.js +2 -2
  188. package/dist/landing/landing-actions.js.map +1 -1
  189. package/dist/landing/public-header.js +2 -2
  190. package/dist/landing/public-header.js.map +1 -1
  191. package/dist/lib/clipboard-minus.d.ts +27 -0
  192. package/dist/lib/clipboard-minus.js +63 -0
  193. package/dist/lib/clipboard-minus.js.map +1 -0
  194. package/dist/lib/data-attributes.d.ts +11 -0
  195. package/dist/lib/data-attributes.js +10 -0
  196. package/dist/lib/data-attributes.js.map +1 -0
  197. package/dist/lib/document-title.d.ts +17 -0
  198. package/dist/lib/document-title.js +29 -0
  199. package/dist/lib/document-title.js.map +1 -0
  200. package/dist/lib/float-clearance.js +8 -2
  201. package/dist/lib/float-clearance.js.map +1 -1
  202. package/dist/lib/format.d.ts +36 -10
  203. package/dist/lib/format.js +57 -11
  204. package/dist/lib/format.js.map +1 -1
  205. package/dist/lib/minus.d.ts +32 -0
  206. package/dist/lib/minus.js +14 -0
  207. package/dist/lib/minus.js.map +1 -0
  208. package/dist/lib/status-tone.d.ts +30 -0
  209. package/dist/lib/status-tone.js +17 -0
  210. package/dist/lib/status-tone.js.map +1 -0
  211. package/dist/settings/settings-layout.js +3 -2
  212. package/dist/settings/settings-layout.js.map +1 -1
  213. package/dist/shell/account-menu-language.d.ts +1 -1
  214. package/dist/shell/account-menu-language.js +9 -1
  215. package/dist/shell/account-menu-language.js.map +1 -1
  216. package/dist/shell/app-shell-labels.js +2 -1
  217. package/dist/shell/app-shell-labels.js.map +1 -1
  218. package/dist/shell/app-shell.d.ts +58 -16
  219. package/dist/shell/app-shell.js +151 -43
  220. package/dist/shell/app-shell.js.map +1 -1
  221. package/dist/shell/language-code.d.ts +3 -0
  222. package/dist/shell/language-code.js +8 -0
  223. package/dist/shell/language-code.js.map +1 -0
  224. package/dist/shell/topbar-controls.d.ts +14 -6
  225. package/dist/shell/topbar-controls.js +14 -17
  226. package/dist/shell/topbar-controls.js.map +1 -1
  227. package/dist/testing/css-variables.generated.d.ts +1 -1
  228. package/dist/testing/css-variables.generated.js +1 -1
  229. package/dist/testing/css-variables.generated.js.map +1 -1
  230. package/dist/testing/react.d.ts +25 -0
  231. package/dist/testing/react.js +19 -0
  232. package/dist/testing/react.js.map +1 -0
  233. package/dist/theme/chart-palette.d.ts +82 -15
  234. package/dist/theme/chart-palette.js +51 -24
  235. package/dist/theme/chart-palette.js.map +1 -1
  236. package/dist/theme/palette-presets.d.ts +9 -0
  237. package/dist/theme/palette-presets.js +77 -62
  238. package/dist/theme/palette-presets.js.map +1 -1
  239. package/dist/tour/tour-dock.d.ts +42 -0
  240. package/dist/tour/tour-dock.js +80 -0
  241. package/dist/tour/tour-dock.js.map +1 -0
  242. package/dist/tour/tour-gates.d.ts +71 -0
  243. package/dist/tour/tour-gates.js +114 -0
  244. package/dist/tour/tour-gates.js.map +1 -0
  245. package/dist/tour/tour-guide-button.d.ts +27 -0
  246. package/dist/tour/tour-guide-button.js +45 -0
  247. package/dist/tour/tour-guide-button.js.map +1 -0
  248. package/dist/tour/tour-guide-labels.d.ts +8 -0
  249. package/dist/tour/tour-guide-labels.js +9 -0
  250. package/dist/tour/tour-guide-labels.js.map +1 -0
  251. package/dist/tour/tour-labels.js +9 -1
  252. package/dist/tour/tour-labels.js.map +1 -1
  253. package/dist/tour/tour.d.ts +133 -9
  254. package/dist/tour/tour.js +594 -70
  255. package/dist/tour/tour.js.map +1 -1
  256. package/dist/tour/use-tour-url-sync.d.ts +5 -2
  257. package/dist/tour/use-tour-url-sync.js +7 -1
  258. package/dist/tour/use-tour-url-sync.js.map +1 -1
  259. package/dist/tour.d.ts +2 -0
  260. package/dist/tour.js +3 -0
  261. package/dist/tour.js.map +1 -1
  262. package/dist/wizard/stepper-nav.d.ts +1 -1
  263. package/dist/wizard/stepper-nav.js +18 -5
  264. package/dist/wizard/stepper-nav.js.map +1 -1
  265. package/dist/wizard/types.d.ts +11 -0
  266. package/dist/wizard/types.js.map +1 -1
  267. package/dist/wizard/use-wizard.js +11 -5
  268. package/dist/wizard/use-wizard.js.map +1 -1
  269. package/package.json +9 -1
  270. package/src/admin/admin-action-confirm.tsx +1 -1
  271. package/src/admin/invitations-panel.tsx +7 -3
  272. package/src/admin/user-roster.tsx +41 -14
  273. package/src/auth/accept-invitation.tsx +3 -3
  274. package/src/auth/not-found-page.tsx +1 -1
  275. package/src/auth/reset-password-form.tsx +3 -3
  276. package/src/auth/verify-email.tsx +13 -3
  277. package/src/billing/plan-card.tsx +2 -2
  278. package/src/components/amount-input.tsx +5 -4
  279. package/src/components/autocomplete.tsx +2 -0
  280. package/src/components/breadcrumbs.tsx +32 -4
  281. package/src/components/button-look.ts +86 -15
  282. package/src/components/button.tsx +6 -3
  283. package/src/components/calendar-heatmap.tsx +2 -1
  284. package/src/components/chart-edge.ts +73 -0
  285. package/src/components/chart.tsx +3 -1
  286. package/src/components/chip.tsx +10 -1
  287. package/src/components/combobox-core.tsx +2 -0
  288. package/src/components/combobox-suggestions.tsx +2 -0
  289. package/src/components/confirm-context.ts +7 -0
  290. package/src/components/confirm-dialog.tsx +3 -3
  291. package/src/components/currency-select.tsx +95 -6
  292. package/src/components/danger-confirm.tsx +3 -3
  293. package/src/components/data-table-fit.ts +41 -6
  294. package/src/components/data-table-mobile.tsx +259 -17
  295. package/src/components/data-table-row-actions.tsx +9 -1
  296. package/src/components/data-table-row.tsx +3 -0
  297. package/src/components/data-table.tsx +91 -19
  298. package/src/components/dropdown.tsx +2 -0
  299. package/src/components/error-boundary.tsx +2 -2
  300. package/src/components/floating-panel.tsx +67 -16
  301. package/src/components/form-actions.tsx +2 -2
  302. package/src/components/full-bleed-dialog.tsx +3 -0
  303. package/src/components/icon-button.tsx +21 -8
  304. package/src/components/modal.tsx +3 -0
  305. package/src/components/nav-pills.tsx +29 -2
  306. package/src/components/number-input.tsx +8 -3
  307. package/src/components/numpad-sheet.tsx +4 -0
  308. package/src/components/page-header-context.ts +8 -0
  309. package/src/components/page-header.tsx +34 -2
  310. package/src/components/picker-sheet.tsx +4 -0
  311. package/src/components/pie-chart.tsx +2 -1
  312. package/src/components/popover.tsx +2 -0
  313. package/src/components/progress-bar.tsx +6 -3
  314. package/src/components/reauth-dialog.tsx +1 -1
  315. package/src/components/row-actions-labels.ts +2 -0
  316. package/src/components/row-actions.tsx +154 -33
  317. package/src/components/section-nav.tsx +65 -0
  318. package/src/components/series-chart.tsx +12 -3
  319. package/src/components/share-card.tsx +1 -1
  320. package/src/components/signature-pad.tsx +1 -1
  321. package/src/components/sparkline.tsx +2 -1
  322. package/src/components/stat-tile.tsx +19 -7
  323. package/src/components/status-dot.tsx +7 -1
  324. package/src/components/tooltip.tsx +3 -1
  325. package/src/components/translation-review-editor.tsx +2 -2
  326. package/src/components/translation-review.tsx +2 -2
  327. package/src/components/treemap.tsx +34 -8
  328. package/src/components/use-table-state.ts +63 -8
  329. package/src/data-table.ts +3 -3
  330. package/src/demo/demo-banner.tsx +1 -1
  331. package/src/demo/demo-ended.tsx +1 -1
  332. package/src/demo/demo-start.tsx +1 -1
  333. package/src/feedback/feedback-inbox.tsx +1 -1
  334. package/src/hooks/use-dismiss.ts +43 -4
  335. package/src/hooks/use-document-title.ts +31 -0
  336. package/src/i18n/defaults.ts +2 -0
  337. package/src/i18n/german.ts +17 -0
  338. package/src/i18n/kit-labels.tsx +79 -1
  339. package/src/i18n/locales/es.ts +17 -0
  340. package/src/i18n/locales/fr.ts +17 -0
  341. package/src/i18n/locales/hu.ts +17 -0
  342. package/src/i18n/locales/it.ts +17 -0
  343. package/src/i18n/locales/zh.ts +17 -0
  344. package/src/i18n/review.ts +3 -0
  345. package/src/i18n/shared-labels.ts +1 -0
  346. package/src/index.ts +13 -0
  347. package/src/landing/landing-actions.tsx +2 -2
  348. package/src/landing/public-header.tsx +2 -2
  349. package/src/lib/clipboard-minus.ts +94 -0
  350. package/src/lib/data-attributes.ts +14 -0
  351. package/src/lib/document-title.ts +41 -0
  352. package/src/lib/float-clearance.ts +19 -3
  353. package/src/lib/format.ts +117 -30
  354. package/src/lib/minus.ts +50 -0
  355. package/src/lib/status-tone.ts +43 -0
  356. package/src/settings/settings-layout.tsx +3 -2
  357. package/src/shell/account-menu-language.tsx +14 -2
  358. package/src/shell/app-shell-labels.ts +1 -0
  359. package/src/shell/app-shell.tsx +291 -68
  360. package/src/shell/language-code.ts +5 -0
  361. package/src/shell/topbar-controls.tsx +35 -15
  362. package/src/testing/css-variables.generated.ts +6 -6
  363. package/src/testing/react.ts +59 -0
  364. package/src/theme/chart-palette.ts +102 -20
  365. package/src/theme/palette-presets.ts +121 -84
  366. package/src/tour/tour-dock.ts +132 -0
  367. package/src/tour/tour-gates.ts +195 -0
  368. package/src/tour/tour-guide-button.tsx +64 -0
  369. package/src/tour/tour-guide-labels.ts +15 -0
  370. package/src/tour/tour-labels.ts +8 -0
  371. package/src/tour/tour.tsx +949 -86
  372. package/src/tour/use-tour-url-sync.ts +14 -4
  373. package/src/tour.ts +3 -0
  374. package/src/wizard/stepper-nav.tsx +27 -7
  375. package/src/wizard/types.ts +12 -0
  376. package/src/wizard/use-wizard.ts +16 -9
  377. package/tokens.css +28 -18
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { Fragment as Fragment2, useEffect, useId, useMemo, useRef, useState } from "react";
3
+ import { Fragment as Fragment2, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
4
4
  import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
5
5
  import { FOCUS_RING } from "./focus-ring.js";
6
6
  import { IconButton } from "./icon-button.js";
@@ -12,6 +12,9 @@ import { FilterPopover } from "./data-table-filter-popover.js";
12
12
  import { SwipeableRow } from "./swipeable-row.js";
13
13
  import { DialogFrame } from "./dialog-frame.js";
14
14
  import { Checkbox } from "./checkbox.js";
15
+ import { Chip } from "./chip.js";
16
+ import { BooleanMark } from "./data-table-cells.js";
17
+ import { EMPTY_FORMATTED_VALUE } from "../lib/format.js";
15
18
  import { useLongPress } from "../hooks/use-long-press.js";
16
19
  import { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from "./data-table-shared.js";
17
20
  function dataAttrsOf(props) {
@@ -28,26 +31,86 @@ function physicalSwipe(actions, dir) {
28
31
  };
29
32
  }
30
33
  const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
31
- function StackedFields({ columns, row, compact }) {
34
+ function StackedFields({
35
+ columns,
36
+ row,
37
+ compact,
38
+ liftOwnClicks = false
39
+ }) {
40
+ const fields = filledFields(columns, row);
41
+ if (fields.length === 0) return null;
32
42
  return /* @__PURE__ */ jsx(
33
43
  "dl",
34
44
  {
35
45
  "data-card-fields": "stacked",
36
46
  className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
37
- children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
47
+ children: fields.map(({ col, value }) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
38
48
  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted", children: col.header }),
39
49
  /* @__PURE__ */ jsx(
40
50
  "dd",
41
51
  {
42
52
  ...dataAttrsOf(col.cellProps?.(row)),
43
- className: "mt-0.5 min-w-0 break-words text-secondary",
44
- children: col.cell(row)
53
+ className: cn("mt-0.5 min-w-0 break-words text-secondary", liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD),
54
+ children: value
45
55
  }
46
56
  )
47
57
  ] }, col.key))
48
58
  }
49
59
  );
50
60
  }
61
+ const LIFTED_CELL = "relative z-[2]";
62
+ const LIFTED_FIELD = cn(LIFTED_CELL, "w-fit max-w-full justify-self-start");
63
+ const STRETCHED_RING = "has-[[data-card-link]:focus-visible]:ring-inset has-[[data-card-link]:focus-visible]:ring-focus has-[[data-card-link]:focus-visible]:ring-brand";
64
+ const MOBILE_CARD_FIELDS = 3;
65
+ function mobileCardColumns(columns) {
66
+ const titles = columns.filter((c) => c.role !== "actions");
67
+ const primary = titles.find((c) => c.mobile === "primary") ?? titles.find((c) => c.mobilePrimary) ?? titles.find((c) => c.role !== "status") ?? titles[0] ?? null;
68
+ const status = columns.filter((c) => c !== primary && c.role === "status");
69
+ const actions = columns.filter((c) => c.role === "actions");
70
+ const rest = titles.filter((c) => c !== primary && c.role !== "status");
71
+ const marked = rest.filter((c) => c.mobile === "secondary");
72
+ return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };
73
+ }
74
+ function keepsOwnClicks(col) {
75
+ return !!col.noRowLink || col.role === "actions";
76
+ }
77
+ function devWarnings() {
78
+ return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
79
+ }
80
+ function useCardColumnWarnings(columns, enabled, name) {
81
+ const warned = useRef(null);
82
+ useEffect(() => {
83
+ if (!enabled || !devWarnings()) return;
84
+ const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== "hidden");
85
+ if (phone.some((c) => c.mobile === "secondary")) return;
86
+ const { primary, status, fields, actions } = mobileCardColumns(phone);
87
+ const onCard = /* @__PURE__ */ new Set([primary, ...status, ...fields, ...actions]);
88
+ const table = name ? ` "${name}"` : primary ? ` (title column "${primary.key}")` : "";
89
+ warned.current ??= /* @__PURE__ */ new Set();
90
+ for (const col of phone) {
91
+ if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;
92
+ warned.current.add(col.key);
93
+ console.warn(
94
+ `[ui-kit] DataTable${table}: column "${col.key}" (noRowLink) is past the phone card's three fields and leaves the card \u2014 give it role: "actions" (drawn after the fields), or move its action to rowActions.`
95
+ );
96
+ }
97
+ }, [columns, enabled, name]);
98
+ }
99
+ function isEmptyCell(value) {
100
+ if (value === null || value === void 0 || typeof value === "boolean") return true;
101
+ if (isValidElement(value) && value.type === BooleanMark) return value.props.value == null;
102
+ if (typeof value === "string") {
103
+ const text = value.trim();
104
+ return text === "" || text === EMPTY_FORMATTED_VALUE;
105
+ }
106
+ return false;
107
+ }
108
+ function filledFields(columns, row) {
109
+ return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));
110
+ }
111
+ function StatusChip({ value }) {
112
+ return typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Chip, { size: "sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
113
+ }
51
114
  function MobileSort({
52
115
  columns,
53
116
  sorts,
@@ -116,9 +179,12 @@ function MobileRow({
116
179
  swipeActionsFor,
117
180
  mobileDir,
118
181
  mobileCardLinkable,
182
+ mobileCardStretched,
119
183
  mobileCard,
120
184
  mobilePrimaryCol,
185
+ mobileStatusColumns,
121
186
  mobileSecondaryColumns,
187
+ mobileActionColumns,
122
188
  mobileExpandAsDialog,
123
189
  compact,
124
190
  large,
@@ -135,7 +201,8 @@ function MobileRow({
135
201
  const swipeActions = swipeActionsFor?.(row);
136
202
  const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
137
203
  const swipeEnabled = !!swipe && !selecting;
138
- const href = mobileCardLinkable ? rowHref?.(row) : void 0;
204
+ const stretched = mobileCardStretched && interactive && !selecting && !mobileCard && !!mobilePrimaryCol;
205
+ const href = mobileCardLinkable || stretched ? rowHref?.(row) : void 0;
139
206
  const cardClass = cn(
140
207
  "w-full text-start flex items-center",
141
208
  // §4: more room per row at Large — a taller row is a bigger tap target too.
@@ -154,7 +221,11 @@ function MobileRow({
154
221
  // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
155
222
  // keeps the fill and the squeeze above; an outline on every tap of a long list would
156
223
  // be louder than the acknowledgement it replaces.
157
- (interactive || selecting) && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
224
+ (interactive || selecting) && !stretched && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
225
+ // A stretched card (0.50 K4) draws the same frame, inside the card, while its TITLE
226
+ // control has the keyboard: the ring outlines the whole tap target, as on every other
227
+ // card, not the title's line alone. The own-click cells draw their own.
228
+ stretched && cn("relative [-webkit-tap-highlight-color:transparent]", STRETCHED_RING),
158
229
  selecting && "cursor-pointer",
159
230
  select?.selected && selecting && "bg-brand-soft",
160
231
  // A 500 ms hold would otherwise start a text selection, and iOS's link callout —
@@ -162,6 +233,38 @@ function MobileRow({
162
233
  // is not selectable on a phone where the table offers selection.
163
234
  select && "select-none [-webkit-touch-callout:none]"
164
235
  );
236
+ const stretchedClass = "block w-full text-start focus-visible:outline-none after:absolute after:inset-0 after:z-[1] after:content-['']";
237
+ const titleControl = (title) => href ? /* @__PURE__ */ jsx(
238
+ RowLink,
239
+ {
240
+ href,
241
+ "data-card-link": "",
242
+ "data-row-link": "",
243
+ onActivate: () => onRowClick(row),
244
+ "aria-expanded": opensRow ? expanded : void 0,
245
+ className: stretchedClass,
246
+ onKeyDown: (e) => {
247
+ if (e.key !== " ") return;
248
+ e.preventDefault();
249
+ onRowClick(row);
250
+ },
251
+ children: title
252
+ }
253
+ ) : /* @__PURE__ */ jsx(
254
+ "button",
255
+ {
256
+ type: "button",
257
+ "data-card-link": "",
258
+ "data-row-link": "",
259
+ "aria-expanded": opensRow ? expanded : void 0,
260
+ onClick: () => onRowClick(row),
261
+ className: cn(stretchedClass, "font-[inherit]"),
262
+ children: title
263
+ }
264
+ );
265
+ const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);
266
+ const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);
267
+ const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);
165
268
  const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
166
269
  /* @__PURE__ */ jsx(
167
270
  "div",
@@ -175,31 +278,51 @@ function MobileRow({
175
278
  !mobileCard && CARD_NO_TRUNCATE
176
279
  ),
177
280
  children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
178
- mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
179
- mobileSecondaryColumns.length > 0 && large ? (
281
+ (mobilePrimaryCol || statuses.length > 0) && /* @__PURE__ */ jsxs("div", { "data-card-head": "", className: "flex min-w-0 items-start justify-between gap-2", children: [
282
+ mobilePrimaryCol && /* @__PURE__ */ jsx(
283
+ "div",
284
+ {
285
+ ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)),
286
+ "data-card-title": "",
287
+ className: "min-w-0 flex-1 break-words font-medium",
288
+ children: stretched ? titleControl(mobilePrimaryCol.cell(row)) : mobilePrimaryCol.cell(row)
289
+ }
290
+ ),
291
+ statuses.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1", children: statuses.map(({ col, value }) => /* @__PURE__ */ jsx("span", { ...dataAttrsOf(col.cellProps?.(row)), "data-card-status": "", className: "inline-flex", children: /* @__PURE__ */ jsx(StatusChip, { value }) }, col.key)) })
292
+ ] }),
293
+ fields.length > 0 && large ? (
180
294
  // §4: each label ABOVE its value at Large. Side by side, a label column
181
295
  // sized to the widest label leaves a value a sliver of a 240 px card.
182
- /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
183
- ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
296
+ /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact, liftOwnClicks: stretched })
297
+ ) : fields.length > 0 && /* @__PURE__ */ jsx(
184
298
  "dl",
185
299
  {
186
300
  className: cn(
187
301
  "grid grid-cols-[auto_1fr] gap-x-3",
188
302
  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
189
303
  ),
190
- children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
304
+ children: fields.map(({ col, value }) => /* @__PURE__ */ jsxs(Fragment2, { children: [
191
305
  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted self-center", children: col.header }),
192
306
  /* @__PURE__ */ jsx(
193
307
  "dd",
194
308
  {
195
309
  ...dataAttrsOf(col.cellProps?.(row)),
196
- className: "min-w-0 text-secondary self-center",
197
- children: col.cell(row)
310
+ className: cn("min-w-0 text-secondary self-center", stretched && keepsOwnClicks(col) && LIFTED_FIELD),
311
+ children: value
198
312
  }
199
313
  )
200
314
  ] }, col.key))
201
315
  }
202
- )
316
+ ),
317
+ actionCells.length > 0 && /* @__PURE__ */ jsx("div", { "data-card-actions": "", className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: actionCells.map(({ col, value }) => /* @__PURE__ */ jsx(
318
+ "div",
319
+ {
320
+ ...dataAttrsOf(col.cellProps?.(row)),
321
+ className: cn("flex min-w-0 justify-end", stretched && LIFTED_CELL),
322
+ children: value
323
+ },
324
+ col.key
325
+ )) })
203
326
  ] })
204
327
  }
205
328
  ),
@@ -284,6 +407,9 @@ function MobileRow({
284
407
  ]
285
408
  }
286
409
  )
410
+ ) : stretched ? (
411
+ // The stretched card (0.50 K4): a plain box; its title is the control (above).
412
+ /* @__PURE__ */ jsx("div", { ...press, "data-card-stretched": "", className: cardClass, children: cardInner })
287
413
  ) : interactive && href ? (
288
414
  // A card with a URL of its own is a LINK, not a div wearing role="button"
289
415
  // (feedback #451): the phone's long-press "open in new tab" and a screen
@@ -565,10 +691,15 @@ function MobileFilters({
565
691
  ] });
566
692
  }
567
693
  export {
694
+ MOBILE_CARD_FIELDS,
568
695
  MobileFilters,
569
696
  MobileRow,
570
697
  MobileSelectBar,
571
698
  MobileSort,
572
- StackedFields
699
+ StackedFields,
700
+ isEmptyCell,
701
+ keepsOwnClicks,
702
+ mobileCardColumns,
703
+ useCardColumnWarnings
573
704
  };
574
705
  //# sourceMappingURL=data-table-mobile.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n DataTableCellProps,\n DataTableColumn,\n DataTableProps,\n DataTableSortLabels,\n FilterState,\n MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n if (!props) return undefined;\n const out: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n actions: MobileSwipeActions,\n dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n const rtl = dir === \"rtl\";\n return {\n left: (rtl ? actions.end : actions.start) ?? actions.left,\n right: (rtl ? actions.start : actions.end) ?? actions.right,\n };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {\n return (\n <dl\n data-card-fields=\"stacked\"\n className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n >\n {columns.map((col) => (\n <div key={col.key} className=\"min-w-0\">\n <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"mt-0.5 min-w-0 break-words text-secondary\"\n >\n {col.cell(row)}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n columns,\n sorts,\n sortCycle,\n compact,\n labels,\n onPick,\n onFlip,\n}: {\n columns: DataTableColumn<T>[];\n sorts: SortState[];\n sortCycle: SortCycle;\n compact: boolean;\n labels: DataTableLabels;\n onPick: (key: string | null) => void;\n onFlip: () => void;\n}) {\n const selectId = useId();\n const sortLabels: DataTableSortLabels = labels;\n if (columns.length === 0) return null;\n // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n // sort chain drops it, and so does the control rather than claiming it.\n const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n const offerDefault = sortCycle === \"tri\" || primary === null;\n const desc = primary?.dir === \"desc\";\n return (\n <div\n data-table-mobile-sort=\"\"\n className={cn(\n // At Large the direction button shows its words (IconButton's label, §4); the\n // row wraps so the select keeps a usable width on a 240 px card.\n \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n {sortLabels.sortBy}\n </label>\n <Select\n id={selectId}\n size={compact ? \"sm\" : \"md\"}\n className=\"min-w-0 flex-1 large:basis-40\"\n value={primary?.key ?? \"\"}\n onChange={(e) => onPick(e.target.value || null)}\n >\n {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n {columns.map((col) => (\n <option key={col.key} value={col.key}>\n {columnLabel(col, labels)}\n </option>\n ))}\n </Select>\n <IconButton\n size={compact ? \"xs\" : \"md\"}\n variant=\"secondary\"\n label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n disabled={primary === null}\n onClick={onFlip}\n >\n {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n </IconButton>\n </div>\n );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n row: T;\n isExpanded: DataTableProps<T>[\"isExpanded\"];\n /** What the row shows when opened — DataTable's `openedRowContent`. */\n openedRowContent: (row: T) => ReactNode;\n /** Whether an opened row has anything to show at all. */\n opensRow: boolean;\n rowClassName: DataTableProps<T>[\"rowClassName\"];\n rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n onRowClick: DataTableProps<T>[\"onRowClick\"];\n rowHref: DataTableProps<T>[\"rowHref\"];\n /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The card list's reading direction, for which physical drag a swipe side means. */\n mobileDir: Direction;\n /** No column the card renders owns a link, so the card itself may be one. */\n mobileCardLinkable: boolean;\n mobileCard: DataTableProps<T>[\"mobileCard\"];\n mobilePrimaryCol: DataTableColumn<T> | null;\n mobileSecondaryColumns: DataTableColumn<T>[];\n mobileExpandAsDialog: boolean;\n compact: boolean;\n /** The text size is Large or Extra large (§4). */\n large: boolean;\n /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n active: boolean;\n /** `selection.isSelectable` for this row. */\n selectable: boolean;\n selected: boolean;\n onToggle: (checked: boolean) => void;\n /** A long press outside the mode: enter it with this row selected. */\n onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n * identical row markup. */\nexport function MobileRow<T>({\n row,\n isExpanded,\n openedRowContent,\n opensRow,\n rowClassName,\n rowAttributes,\n onRowClick,\n rowHref,\n swipeActionsFor,\n mobileDir,\n mobileCardLinkable,\n mobileCard,\n mobilePrimaryCol,\n mobileSecondaryColumns,\n mobileExpandAsDialog,\n compact,\n large,\n select,\n}: MobileRowProps<T>) {\n const expanded = isExpanded?.(row) ?? false;\n // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n // instead of opening the row, and the swipe and the long press stand down, so no\n // gesture means two things at once (keksdose's register list, its feedback #153).\n const selecting = !!select?.active;\n // Not on an open card, as in kk's register: its editor and a selection are two modes\n // fighting over the same row.\n const pressable = !!select && select.selectable && !selecting && !expanded;\n const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n const expansion = expanded ? openedRowContent(row) : null;\n const tint = rowClassName?.(row);\n // Use div+role=\"button\" rather than a real <button> so cells that\n // contain their own interactive controls (status toggles, action\n // icons) don't end up as illegal nested buttons.\n const interactive = !!onRowClick;\n // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n // only a cursor and a tap-tint to advertise its editor — on the invoice review\n // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n // values are not editable\". A chevron is the affordance every list on a phone\n // uses for exactly this, and it points the way the row actually opens: right into\n // a sheet, or down into an inline panel that flips it when expanded.\n const opensDetail = interactive && opensRow;\n const swipeActions = swipeActionsFor?.(row);\n const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n // down to the buttons\"). Only the card's header — the summary line — is inside\n // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n // In selection mode a sideways drag would be a second meaning for a selecting touch.\n const swipeEnabled = !!swipe && !selecting;\n const href = mobileCardLinkable ? rowHref?.(row) : undefined;\n const cardClass = cn(\n \"w-full text-start flex items-center\",\n // §4: more room per row at Large — a taller row is a bigger tap target too.\n compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n // Live #320's other half: the card acknowledges the touch before the sheet\n // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n // on every row of a long list, so anything larger becomes the list's personality\n // rather than feedback. `transition-transform` alone, so the existing background\n // flip stays instant.\n interactive &&\n \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n // keeps the fill and the squeeze above; an outline on every tap of a long list would\n // be louder than the acknowledgement it replaces.\n (interactive || selecting) && cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n selecting && \"cursor-pointer\",\n select?.selected && selecting && \"bg-brand-soft\",\n // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n // which only yields to this CSS. The trade kk made on its register: the card's text\n // is not selectable on a phone where the table offers selection.\n select && \"select-none [-webkit-touch-callout:none]\",\n );\n // The card's content is written once and worn by either tag below. Note that\n // the primary cell is rendered RAW here, never through `linkColumn` — the card\n // itself is the anchor, and routing it through `linkColumn` too would nest an\n // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n // exactly one anchor exists per row.\n const cardInner = (\n <>\n {/* The card's own content keeps the column it always had; the chevron sits\n beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col\",\n compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n // the reader who chose bigger type is the one an ellipsis fails. A caller's\n // `mobileCard` is its own layout and keeps what it chose.\n !mobileCard && CARD_NO_TRUNCATE,\n )}\n >\n {mobileCard ? (\n mobileCard(row)\n ) : (\n <>\n {/* Only the `data-*` half of `cellProps` — see its note. */}\n {mobilePrimaryCol && (\n <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className=\"min-w-0 break-words font-medium\">\n {mobilePrimaryCol.cell(row)}\n </div>\n )}\n {mobileSecondaryColumns.length > 0 && large ? (\n // §4: each label ABOVE its value at Large. Side by side, a label column\n // sized to the widest label leaves a value a sliver of a 240 px card.\n <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />\n ) : mobileSecondaryColumns.length > 0 && (\n <dl\n className={cn(\n \"grid grid-cols-[auto_1fr] gap-x-3\",\n compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n )}\n >\n {mobileSecondaryColumns.map((col) => (\n <Fragment key={col.key}>\n <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n {col.header}\n </dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className=\"min-w-0 text-secondary self-center\"\n >\n {col.cell(row)}\n </dd>\n </Fragment>\n ))}\n </dl>\n )}\n </>\n )}\n </div>\n {opensDetail && !selecting &&\n // `aria-hidden`: the row already announces itself as a button with\n // `aria-expanded`, so the icon would only add a second, wordless stop.\n (mobileExpandAsDialog ? (\n // Points INTO the sheet, which is the reading-forward direction.\n <ChevronRight\n aria-hidden\n className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n />\n ) : (\n <ChevronDown\n aria-hidden\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n expanded && \"rotate-180\",\n )}\n />\n ))}\n </>\n );\n // The long press rides the card itself; the click it leaves behind is swallowed on\n // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n // mode too, or a long press whose click never came would eat the first toggle.\n //\n // A press that starts on a control in a cell (or in a portal one opened) is that\n // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n const press = select\n ? {\n ...longPress.handlers,\n onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n longPress.consumeClick();\n return;\n }\n longPress.handlers.onPointerDown(e);\n },\n onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n longPress.handlers.onContextMenu(e);\n },\n }\n : undefined;\n const body = selecting ? (\n // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n // `aria-pressed`, the box beside it only a picture of that state (the card is the\n // one control, so the two can never fight or fire twice).\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n <div\n role={select!.selectable ? \"button\" : undefined}\n tabIndex={select!.selectable ? 0 : undefined}\n aria-pressed={select!.selectable ? select!.selected : undefined}\n aria-disabled={select!.selectable ? undefined : true}\n data-card-selecting=\"\"\n {...press}\n onClick={(e) => {\n if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell is that control's (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n select!.onToggle(!select!.selected);\n }}\n onKeyDown={(e) => {\n if (!select!.selectable || e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n select!.onToggle(!select!.selected);\n }\n }}\n className={cardClass}\n >\n <Checkbox\n readOnly\n tabIndex={-1}\n aria-hidden\n checked={select!.selected}\n disabled={!select!.selectable}\n className=\"pointer-events-none shrink-0 self-center\"\n inputClassName=\"pointer-events-none\"\n />\n {cardInner}\n </div>\n ) : interactive && href ? (\n // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n // reader's link semantics both come free, and the fake role goes away.\n <RowLink\n href={href}\n {...press}\n onActivate={() => onRowClick!(row)}\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n // Enter already activates a link natively, and that routes through\n // RowLink's own onClick — handling it here too would open the row twice.\n // Space is the only key left, and only so it opens the row instead of\n // scrolling the list.\n onKeyDown={(e) => {\n if (e.key !== \" \") return;\n e.preventDefault();\n onRowClick!(row);\n }}\n >\n {cardInner}\n </RowLink>\n ) : (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n Enter/Space handler below; the rule cannot follow the conditional role. */\n <div\n {...press}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={\n interactive\n ? (e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell (a select, a button) is that\n // control's, as on the desktop `<tr>` (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onRowClick!(row);\n }\n : undefined\n }\n onKeyDown={\n interactive\n ? (e) => {\n // A key press inside a nested control is that control's.\n if (e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick!(row);\n }\n }\n : undefined\n }\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n >\n {cardInner}\n </div>\n );\n return (\n <li\n className={cn(tint)}\n {...cleanAttrs(rowAttributes?.(row))}\n data-selected={selecting && select!.selected ? \"\" : undefined}\n onClickCapture={\n select\n ? (e) => {\n if (!longPress.consumeClick()) return;\n e.preventDefault();\n e.stopPropagation();\n }\n : undefined\n }\n >\n {swipeEnabled ? (\n <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n {body}\n </SwipeableRow>\n ) : (\n body\n )}\n {expansion && !mobileExpandAsDialog && (\n <div\n className={cn(\n \"bg-surface-2 border-t border-subtle\",\n compact ? \"px-3 py-2\" : \"px-4 py-3\",\n )}\n >\n {expansion}\n </div>\n )}\n </li>\n );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n active,\n allSelected,\n someSelected,\n compact,\n labels,\n onEnter,\n onToggleAll,\n onCancel,\n}: {\n active: boolean;\n allSelected: boolean;\n someSelected: boolean;\n compact: boolean;\n labels: DataTableLabels;\n onEnter: () => void;\n onToggleAll: (checked: boolean) => void;\n onCancel: () => void;\n}) {\n // The control that was pressed unmounts with the mode it switched, so focus is\n // handed across: into the bar's box on the way in, back to the button on the way out.\n const handOff = useRef(false);\n const allBox = useRef<HTMLInputElement>(null);\n const enterButton = useRef<HTMLButtonElement>(null);\n useEffect(() => {\n if (!handOff.current) return;\n handOff.current = false;\n (active ? allBox.current : enterButton.current)?.focus();\n }, [active]);\n if (!active)\n return (\n <button\n ref={enterButton}\n type=\"button\"\n data-table-mobile-select=\"\"\n onClick={() => {\n handOff.current = true;\n onEnter();\n }}\n className={cn(\n \"sr-only rounded-md text-sm font-medium text-secondary\",\n // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n // (SwipeableRow's 0.32.1 note).\n \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n FOCUS_RING,\n )}\n >\n {labels.selectRows}\n </button>\n );\n return (\n <div\n data-table-mobile-select=\"\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <Checkbox\n ref={allBox}\n label={labels.selectAllRows}\n checked={allSelected}\n indeterminate={someSelected && !allSelected}\n onChange={(e) => onToggleAll(e.target.checked)}\n />\n <button\n type=\"button\"\n onClick={() => {\n handOff.current = true;\n onCancel();\n }}\n className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n >\n {labels.cancelSelection}\n </button>\n </div>\n );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n columns,\n filters,\n selectOptionsByKey,\n isServer,\n hasFilterCallback,\n onSetFilter,\n onClearFilter,\n onClearAll,\n labels,\n locale,\n}: {\n columns: DataTableColumn<T>[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n isServer: boolean;\n hasFilterCallback: boolean;\n onSetFilter: (key: string, value: FilterValue) => void;\n onClearFilter: (key: string) => void;\n onClearAll: () => void;\n labels: DataTableLabels;\n locale?: string;\n}) {\n const [open, setOpen] = useState(false);\n // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n // in, so it carries the trigger's direction with it — read at the moment of opening,\n // from the element the user actually pressed.\n const [dir, setDir] = useState<Direction>(\"ltr\");\n const [expanded, setExpanded] = useState<string | null>(null);\n\n const filterable = useMemo(\n () =>\n columns\n .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n [columns, isServer, hasFilterCallback],\n );\n\n if (filterable.length === 0) return null;\n\n const activeCount = filterable.filter(({ col }) => {\n const s = filters[col.key];\n return s && isFilterActive(s);\n }).length;\n\n return (\n <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n setDir(dirOf(e.currentTarget));\n setOpen(true);\n }}\n className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n >\n <Filter className=\"size-4\" />\n <span>{labels.filters}</span>\n {activeCount > 0 && (\n <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n {activeCount}\n </span>\n )}\n </button>\n {activeCount > 0 && (\n <button\n type=\"button\"\n onClick={onClearAll}\n className=\"text-xs text-muted hover:text-secondary\"\n >\n {labels.clearAll}\n </button>\n )}\n {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n in the URL, so closing never loses anything), the scroll lock, focus in and\n back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n screen's edges on a phone, as it always did. */}\n <DialogFrame\n open={open}\n onClose={() => setOpen(false)}\n title={labels.filters}\n closeButton\n closeLabel={labels.close}\n headerDivider\n fullBleed\n // Portalled to <body>, so the direction read from the button goes with it.\n dir={dir}\n className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n // The sections run edge to edge with a rule between them, as before.\n bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n actions={(close) => (\n <>\n <button\n type=\"button\"\n onClick={onClearAll}\n disabled={activeCount === 0}\n // `me-auto` keeps Clear all at the start and Done at the end.\n className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n >\n {labels.clearAll}\n </button>\n <button\n type=\"button\"\n onClick={close}\n className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n >\n {labels.done}\n </button>\n </>\n )}\n >\n {filterable.map(({ col, filter }) => {\n const state = filters[col.key];\n const active = !!state && isFilterActive(state);\n const isItemOpen = expanded === col.key;\n return (\n <div key={col.key}>\n <button\n type=\"button\"\n onClick={() => setExpanded(isItemOpen ? null : col.key)}\n aria-expanded={isItemOpen}\n className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n >\n <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n {col.header}\n {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n </span>\n <ChevronDown\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n isItemOpen && \"rotate-180\",\n )}\n />\n </button>\n {isItemOpen && (\n <div className=\"px-4 pb-3\">\n <FilterPopover\n column={col}\n state={state ?? defaultFilterState(filter)}\n onChange={(next) => onSetFilter(col.key, next)}\n onClear={() => onClearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n </div>\n )}\n </div>\n );\n })}\n </DialogFrame>\n </div>\n );\n}\n"],"mappings":"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","names":["Fragment"]}
1
+ {"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { Chip } from \"./chip\";\nimport { BooleanMark } from \"./data-table-cells\";\nimport { EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n DataTableCellProps,\n DataTableColumn,\n DataTableProps,\n DataTableSortLabels,\n FilterState,\n MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n if (!props) return undefined;\n const out: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n actions: MobileSwipeActions,\n dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n const rtl = dir === \"rtl\";\n return {\n left: (rtl ? actions.end : actions.start) ?? actions.left,\n right: (rtl ? actions.start : actions.end) ?? actions.right,\n };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({\n columns,\n row,\n compact,\n liftOwnClicks = false,\n}: {\n columns: DataTableColumn<T>[];\n row: T;\n compact: boolean;\n /** On a stretched card (0.50 K4): lift the own-click fields above its title link. */\n liftOwnClicks?: boolean;\n}) {\n const fields = filledFields(columns, row);\n if (fields.length === 0) return null;\n return (\n <dl\n data-card-fields=\"stacked\"\n className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n >\n {fields.map(({ col, value }) => (\n <div key={col.key} className=\"min-w-0\">\n <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className={cn(\"mt-0.5 min-w-0 break-words text-secondary\", liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD)}\n >\n {value}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n\n/**\n * A stretched card's own-click cell (0.50 K4): above the title control's overlay\n * (`after:z-[1]`), so its link or buttons take their own taps. `w-fit` keeps the lifted\n * box to the cell's content, so the field's empty rest still opens the row.\n */\nconst LIFTED_CELL = \"relative z-[2]\";\nconst LIFTED_FIELD = cn(LIFTED_CELL, \"w-fit max-w-full justify-self-start\");\n\n/**\n * The keyboard frame of a stretched card (0.50 K4): FOCUS_RING's, inside the card,\n * while its title control (`data-card-link`) has the focus.\n */\nconst STRETCHED_RING =\n \"has-[[data-card-link]:focus-visible]:ring-inset has-[[data-card-link]:focus-visible]:ring-focus has-[[data-card-link]:focus-visible]:ring-brand\";\n\n/** The most fields the default phone card shows under its title (0.49 KIT-7). */\nexport const MOBILE_CARD_FIELDS = 3;\n\n/**\n * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,\n * not `mobileHidden`): the title — `mobile: \"primary\"` or `mobilePrimary`, else the\n * first that is not a status — the `role: \"status\"` columns for beside it, at most\n * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: \"secondary\"` when any is,\n * else the first after the title, and the `role: \"actions\"` columns, drawn after the\n * fields. An actions column is never the title and never one of the fields, so the\n * fields and the marks leave it on the card; only `mobileHidden` / `mobile: \"hidden\"`\n * (which keep it out of `columns`) remove it.\n */\nexport function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {\n primary: DataTableColumn<T> | null;\n status: DataTableColumn<T>[];\n fields: DataTableColumn<T>[];\n actions: DataTableColumn<T>[];\n} {\n const titles = columns.filter((c) => c.role !== \"actions\");\n const primary =\n titles.find((c) => c.mobile === \"primary\") ??\n titles.find((c) => c.mobilePrimary) ??\n titles.find((c) => c.role !== \"status\") ??\n titles[0] ??\n null;\n const status = columns.filter((c) => c !== primary && c.role === \"status\");\n const actions = columns.filter((c) => c.role === \"actions\");\n const rest = titles.filter((c) => c !== primary && c.role !== \"status\");\n const marked = rest.filter((c) => c.mobile === \"secondary\");\n return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };\n}\n\n/** A column whose cell keeps its own clicks — `noRowLink`, or `role: \"actions\"`: no row\n * link may wrap it, and a card that draws it is not a link itself. */\nexport function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {\n return !!col.noRowLink || col.role === \"actions\";\n}\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one, never under vitest. Read per call so a test can switch it on. */\nfunction devWarnings(): boolean {\n return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`\n * column past its three fields. Such a column holds the cell's own controls — a per-row\n * delete, a link — and the card leaves it out with them, so on a phone the action is\n * gone. Never for a `role: \"actions\"` column, which the card draws after its fields.\n * Read off the declared `columns` (not the ones a person or the width hid), and only\n * while the table lets the card choose: `enabled` is false with a `mobileCard` or\n * `mobileDetailsInRow` (the column is then in the opened row), and a column marked\n * `mobile: \"secondary\"` means the app chose. Once per table and column key; `name`\n * (the table's `storageKey` or `urlSync` prefix) says which table, else its title\n * column does.\n */\nexport function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {\n const warned = useRef<Set<string> | null>(null);\n useEffect(() => {\n if (!enabled || !devWarnings()) return;\n const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== \"hidden\");\n if (phone.some((c) => c.mobile === \"secondary\")) return;\n const { primary, status, fields, actions } = mobileCardColumns(phone);\n const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);\n const table = name ? ` \"${name}\"` : primary ? ` (title column \"${primary.key}\")` : \"\";\n warned.current ??= new Set();\n for (const col of phone) {\n if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;\n warned.current.add(col.key);\n console.warn(\n `[ui-kit] DataTable${table}: column \"${col.key}\" (noRowLink) is past the phone card's three fields and ` +\n 'leaves the card — give it role: \"actions\" (drawn after the fields), or move its action to rowActions.',\n );\n }\n }, [columns, enabled, name]);\n}\n\n/**\n * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,\n * a boolean (React draws neither), `\"\"` or blank text, and the formatters' empty value\n * \"—\" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.\n * Any other element is never empty here — its output is the component's — so a column\n * whose empty value should drop off the card returns `null` (or \"—\") from `cell` for it.\n */\nexport function isEmptyCell(value: ReactNode): boolean {\n if (value === null || value === undefined || typeof value === \"boolean\") return true;\n if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;\n if (typeof value === \"string\") {\n const text = value.trim();\n return text === \"\" || text === EMPTY_FORMATTED_VALUE;\n }\n return false;\n}\n\n/** Each column's rendered cell, without the empty ones. */\nfunction filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {\n return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));\n}\n\n/** A status column's value beside the card's title: text in a neutral chip, an element\n * (the app's own Chip or StatusDot) as it is. */\nfunction StatusChip({ value }: { value: ReactNode }) {\n return typeof value === \"string\" || typeof value === \"number\" ? <Chip size=\"sm\">{value}</Chip> : <>{value}</>;\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n columns,\n sorts,\n sortCycle,\n compact,\n labels,\n onPick,\n onFlip,\n}: {\n columns: DataTableColumn<T>[];\n sorts: SortState[];\n sortCycle: SortCycle;\n compact: boolean;\n labels: DataTableLabels;\n onPick: (key: string | null) => void;\n onFlip: () => void;\n}) {\n const selectId = useId();\n const sortLabels: DataTableSortLabels = labels;\n if (columns.length === 0) return null;\n // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n // sort chain drops it, and so does the control rather than claiming it.\n const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n const offerDefault = sortCycle === \"tri\" || primary === null;\n const desc = primary?.dir === \"desc\";\n return (\n <div\n data-table-mobile-sort=\"\"\n className={cn(\n // At Large the direction button shows its words (IconButton's label, §4); the\n // row wraps so the select keeps a usable width on a 240 px card.\n \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n {sortLabels.sortBy}\n </label>\n <Select\n id={selectId}\n size={compact ? \"sm\" : \"md\"}\n className=\"min-w-0 flex-1 large:basis-40\"\n value={primary?.key ?? \"\"}\n onChange={(e) => onPick(e.target.value || null)}\n >\n {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n {columns.map((col) => (\n <option key={col.key} value={col.key}>\n {columnLabel(col, labels)}\n </option>\n ))}\n </Select>\n <IconButton\n size={compact ? \"xs\" : \"md\"}\n variant=\"secondary\"\n label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n disabled={primary === null}\n onClick={onFlip}\n >\n {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n </IconButton>\n </div>\n );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n row: T;\n isExpanded: DataTableProps<T>[\"isExpanded\"];\n /** What the row shows when opened — DataTable's `openedRowContent`. */\n openedRowContent: (row: T) => ReactNode;\n /** Whether an opened row has anything to show at all. */\n opensRow: boolean;\n rowClassName: DataTableProps<T>[\"rowClassName\"];\n rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n onRowClick: DataTableProps<T>[\"onRowClick\"];\n rowHref: DataTableProps<T>[\"rowHref\"];\n /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The card list's reading direction, for which physical drag a swipe side means. */\n mobileDir: Direction;\n /** No column the card renders owns a link, so the card itself may be one. */\n mobileCardLinkable: boolean;\n /**\n * The card draws cells that keep their own clicks, so it cannot be one control (0.50\n * K4): its TITLE is the row's link (`rowHref`) or button (`onRowClick`), stretched over\n * the card, and those cells sit above it. Only for the default card, never a\n * `mobileCard`, and never when the title itself keeps its own clicks.\n */\n mobileCardStretched: boolean;\n mobileCard: DataTableProps<T>[\"mobileCard\"];\n mobilePrimaryCol: DataTableColumn<T> | null;\n /** The `role: \"status\"` columns, drawn as chips beside the title (0.49 KIT-7). */\n mobileStatusColumns: DataTableColumn<T>[];\n mobileSecondaryColumns: DataTableColumn<T>[];\n /** The `role: \"actions\"` columns, drawn after the fields at the card's end (0.49 KIT-7). */\n mobileActionColumns: DataTableColumn<T>[];\n mobileExpandAsDialog: boolean;\n compact: boolean;\n /** The text size is Large or Extra large (§4). */\n large: boolean;\n /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n active: boolean;\n /** `selection.isSelectable` for this row. */\n selectable: boolean;\n selected: boolean;\n onToggle: (checked: boolean) => void;\n /** A long press outside the mode: enter it with this row selected. */\n onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n * identical row markup. */\nexport function MobileRow<T>({\n row,\n isExpanded,\n openedRowContent,\n opensRow,\n rowClassName,\n rowAttributes,\n onRowClick,\n rowHref,\n swipeActionsFor,\n mobileDir,\n mobileCardLinkable,\n mobileCardStretched,\n mobileCard,\n mobilePrimaryCol,\n mobileStatusColumns,\n mobileSecondaryColumns,\n mobileActionColumns,\n mobileExpandAsDialog,\n compact,\n large,\n select,\n}: MobileRowProps<T>) {\n const expanded = isExpanded?.(row) ?? false;\n // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n // instead of opening the row, and the swipe and the long press stand down, so no\n // gesture means two things at once (keksdose's register list, its feedback #153).\n const selecting = !!select?.active;\n // Not on an open card, as in kk's register: its editor and a selection are two modes\n // fighting over the same row.\n const pressable = !!select && select.selectable && !selecting && !expanded;\n const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n const expansion = expanded ? openedRowContent(row) : null;\n const tint = rowClassName?.(row);\n // Use div+role=\"button\" rather than a real <button> so cells that\n // contain their own interactive controls (status toggles, action\n // icons) don't end up as illegal nested buttons.\n const interactive = !!onRowClick;\n // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n // only a cursor and a tap-tint to advertise its editor — on the invoice review\n // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n // values are not editable\". A chevron is the affordance every list on a phone\n // uses for exactly this, and it points the way the row actually opens: right into\n // a sheet, or down into an inline panel that flips it when expanded.\n const opensDetail = interactive && opensRow;\n const swipeActions = swipeActionsFor?.(row);\n const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n // down to the buttons\"). Only the card's header — the summary line — is inside\n // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n // In selection mode a sideways drag would be a second meaning for a selecting touch.\n const swipeEnabled = !!swipe && !selecting;\n // The stretched card (0.50 K4): the title is the control, the card a plain box.\n // Selection mode keeps its own card (the whole card is the toggle there).\n const stretched = mobileCardStretched && interactive && !selecting && !mobileCard && !!mobilePrimaryCol;\n const href = mobileCardLinkable || stretched ? rowHref?.(row) : undefined;\n const cardClass = cn(\n \"w-full text-start flex items-center\",\n // §4: more room per row at Large — a taller row is a bigger tap target too.\n compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n // Live #320's other half: the card acknowledges the touch before the sheet\n // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n // on every row of a long list, so anything larger becomes the list's personality\n // rather than feedback. `transition-transform` alone, so the existing background\n // flip stays instant.\n interactive &&\n \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n // keeps the fill and the squeeze above; an outline on every tap of a long list would\n // be louder than the acknowledgement it replaces.\n (interactive || selecting) &&\n !stretched &&\n cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n // A stretched card (0.50 K4) draws the same frame, inside the card, while its TITLE\n // control has the keyboard: the ring outlines the whole tap target, as on every other\n // card, not the title's line alone. The own-click cells draw their own.\n stretched && cn(\"relative [-webkit-tap-highlight-color:transparent]\", STRETCHED_RING),\n selecting && \"cursor-pointer\",\n select?.selected && selecting && \"bg-brand-soft\",\n // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n // which only yields to this CSS. The trade kk made on its register: the card's text\n // is not selectable on a phone where the table offers selection.\n select && \"select-none [-webkit-touch-callout:none]\",\n );\n // The card's content is written once and worn by either tag below. Note that\n // the primary cell is rendered RAW here, never through `linkColumn` — the card\n // itself is the anchor, and routing it through `linkColumn` too would nest an\n // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n // exactly one anchor exists per row.\n // The default card's filled fields and status values (0.49 KIT-7): an empty one\n // gets no line. Not computed for a `mobileCard`, which draws its own.\n // The stretched card's title control (0.50 K4): the row's link, or a real <button>\n // when the table only has `onRowClick` — a plain control, since nothing interactive\n // sits inside it any more. Its `::after` covers the whole card, so a tap anywhere\n // but on an own-click cell (lifted above it) lands on it, and a long press on the\n // card is a long press on the link (\"open in new tab\"). Its accessible name is the\n // title alone; the fields read as text after it. `data-row-link` marks it as the\n // row itself for `fromOwnControl`, so the long press still arms on it.\n const stretchedClass =\n \"block w-full text-start focus-visible:outline-none after:absolute after:inset-0 after:z-[1] after:content-['']\";\n const titleControl = (title: ReactNode) =>\n href ? (\n <RowLink\n href={href}\n data-card-link=\"\"\n data-row-link=\"\"\n onActivate={() => onRowClick!(row)}\n aria-expanded={opensRow ? expanded : undefined}\n className={stretchedClass}\n // Enter follows RowLink's own onClick; Space opens the row too, not the list's scroll.\n onKeyDown={(e) => {\n if (e.key !== \" \") return;\n e.preventDefault();\n onRowClick!(row);\n }}\n >\n {title}\n </RowLink>\n ) : (\n <button\n type=\"button\"\n data-card-link=\"\"\n data-row-link=\"\"\n aria-expanded={opensRow ? expanded : undefined}\n onClick={() => onRowClick!(row)}\n className={cn(stretchedClass, \"font-[inherit]\")}\n >\n {title}\n </button>\n );\n const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);\n const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);\n const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);\n const cardInner = (\n <>\n {/* The card's own content keeps the column it always had; the chevron sits\n beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col\",\n compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n // the reader who chose bigger type is the one an ellipsis fails. A caller's\n // `mobileCard` is its own layout and keeps what it chose.\n !mobileCard && CARD_NO_TRUNCATE,\n )}\n >\n {mobileCard ? (\n mobileCard(row)\n ) : (\n <>\n {/* Only the `data-*` half of `cellProps` — see its note. The title row\n carries the status chips at its end (0.49 KIT-7). */}\n {(mobilePrimaryCol || statuses.length > 0) && (\n <div data-card-head=\"\" className=\"flex min-w-0 items-start justify-between gap-2\">\n {mobilePrimaryCol && (\n <div\n {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}\n data-card-title=\"\"\n className=\"min-w-0 flex-1 break-words font-medium\"\n >\n {stretched ? titleControl(mobilePrimaryCol.cell(row)) : mobilePrimaryCol.cell(row)}\n </div>\n )}\n {statuses.length > 0 && (\n <div className=\"flex shrink-0 flex-wrap items-center justify-end gap-1\">\n {statuses.map(({ col, value }) => (\n <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status=\"\" className=\"inline-flex\">\n <StatusChip value={value} />\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n {fields.length > 0 && large ? (\n // §4: each label ABOVE its value at Large. Side by side, a label column\n // sized to the widest label leaves a value a sliver of a 240 px card.\n <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} liftOwnClicks={stretched} />\n ) : fields.length > 0 && (\n <dl\n className={cn(\n \"grid grid-cols-[auto_1fr] gap-x-3\",\n compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n )}\n >\n {fields.map(({ col, value }) => (\n <Fragment key={col.key}>\n <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n {col.header}\n </dt>\n <dd\n {...dataAttrsOf(col.cellProps?.(row))}\n className={cn(\"min-w-0 text-secondary self-center\", stretched && keepsOwnClicks(col) && LIFTED_FIELD)}\n >\n {value}\n </dd>\n </Fragment>\n ))}\n </dl>\n )}\n {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its\n buttons keep their own clicks, and RowActions folds into \"⋯\" at Large. */}\n {actionCells.length > 0 && (\n <div data-card-actions=\"\" className=\"flex min-w-0 flex-wrap items-center justify-end gap-2\">\n {actionCells.map(({ col, value }) => (\n <div\n key={col.key}\n {...dataAttrsOf(col.cellProps?.(row))}\n className={cn(\"flex min-w-0 justify-end\", stretched && LIFTED_CELL)}\n >\n {value}\n </div>\n ))}\n </div>\n )}\n </>\n )}\n </div>\n {opensDetail && !selecting &&\n // `aria-hidden`: the row already announces itself as a button with\n // `aria-expanded`, so the icon would only add a second, wordless stop.\n (mobileExpandAsDialog ? (\n // Points INTO the sheet, which is the reading-forward direction.\n <ChevronRight\n aria-hidden\n className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n />\n ) : (\n <ChevronDown\n aria-hidden\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n expanded && \"rotate-180\",\n )}\n />\n ))}\n </>\n );\n // The long press rides the card itself; the click it leaves behind is swallowed on\n // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n // mode too, or a long press whose click never came would eat the first toggle.\n //\n // A press that starts on a control in a cell (or in a portal one opened) is that\n // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n const press = select\n ? {\n ...longPress.handlers,\n onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n longPress.consumeClick();\n return;\n }\n longPress.handlers.onPointerDown(e);\n },\n onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n longPress.handlers.onContextMenu(e);\n },\n }\n : undefined;\n const body = selecting ? (\n // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n // `aria-pressed`, the box beside it only a picture of that state (the card is the\n // one control, so the two can never fight or fire twice).\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n <div\n role={select!.selectable ? \"button\" : undefined}\n tabIndex={select!.selectable ? 0 : undefined}\n aria-pressed={select!.selectable ? select!.selected : undefined}\n aria-disabled={select!.selectable ? undefined : true}\n data-card-selecting=\"\"\n {...press}\n onClick={(e) => {\n if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell is that control's (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n select!.onToggle(!select!.selected);\n }}\n onKeyDown={(e) => {\n if (!select!.selectable || e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n select!.onToggle(!select!.selected);\n }\n }}\n className={cardClass}\n >\n <Checkbox\n readOnly\n tabIndex={-1}\n aria-hidden\n checked={select!.selected}\n disabled={!select!.selectable}\n className=\"pointer-events-none shrink-0 self-center\"\n inputClassName=\"pointer-events-none\"\n />\n {cardInner}\n </div>\n ) : stretched ? (\n // The stretched card (0.50 K4): a plain box; its title is the control (above).\n <div {...press} data-card-stretched=\"\" className={cardClass}>\n {cardInner}\n </div>\n ) : interactive && href ? (\n // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n // reader's link semantics both come free, and the fake role goes away.\n <RowLink\n href={href}\n {...press}\n onActivate={() => onRowClick!(row)}\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n // Enter already activates a link natively, and that routes through\n // RowLink's own onClick — handling it here too would open the row twice.\n // Space is the only key left, and only so it opens the row instead of\n // scrolling the list.\n onKeyDown={(e) => {\n if (e.key !== \" \") return;\n e.preventDefault();\n onRowClick!(row);\n }}\n >\n {cardInner}\n </RowLink>\n ) : (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n Enter/Space handler below; the rule cannot follow the conditional role. */\n <div\n {...press}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={\n interactive\n ? (e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n // A tap on a control in a cell (a select, a button) is that\n // control's, as on the desktop `<tr>` (keksdose live #428).\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onRowClick!(row);\n }\n : undefined\n }\n onKeyDown={\n interactive\n ? (e) => {\n // A key press inside a nested control is that control's.\n if (e.target !== e.currentTarget) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick!(row);\n }\n }\n : undefined\n }\n aria-expanded={opensRow ? expanded : undefined}\n className={cardClass}\n >\n {cardInner}\n </div>\n );\n return (\n <li\n className={cn(tint)}\n {...cleanAttrs(rowAttributes?.(row))}\n data-selected={selecting && select!.selected ? \"\" : undefined}\n onClickCapture={\n select\n ? (e) => {\n if (!longPress.consumeClick()) return;\n e.preventDefault();\n e.stopPropagation();\n }\n : undefined\n }\n >\n {swipeEnabled ? (\n <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n {body}\n </SwipeableRow>\n ) : (\n body\n )}\n {expansion && !mobileExpandAsDialog && (\n <div\n className={cn(\n \"bg-surface-2 border-t border-subtle\",\n compact ? \"px-3 py-2\" : \"px-4 py-3\",\n )}\n >\n {expansion}\n </div>\n )}\n </li>\n );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n active,\n allSelected,\n someSelected,\n compact,\n labels,\n onEnter,\n onToggleAll,\n onCancel,\n}: {\n active: boolean;\n allSelected: boolean;\n someSelected: boolean;\n compact: boolean;\n labels: DataTableLabels;\n onEnter: () => void;\n onToggleAll: (checked: boolean) => void;\n onCancel: () => void;\n}) {\n // The control that was pressed unmounts with the mode it switched, so focus is\n // handed across: into the bar's box on the way in, back to the button on the way out.\n const handOff = useRef(false);\n const allBox = useRef<HTMLInputElement>(null);\n const enterButton = useRef<HTMLButtonElement>(null);\n useEffect(() => {\n if (!handOff.current) return;\n handOff.current = false;\n (active ? allBox.current : enterButton.current)?.focus();\n }, [active]);\n if (!active)\n return (\n <button\n ref={enterButton}\n type=\"button\"\n data-table-mobile-select=\"\"\n onClick={() => {\n handOff.current = true;\n onEnter();\n }}\n className={cn(\n \"sr-only rounded-md text-sm font-medium text-secondary\",\n // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n // (SwipeableRow's 0.32.1 note).\n \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n FOCUS_RING,\n )}\n >\n {labels.selectRows}\n </button>\n );\n return (\n <div\n data-table-mobile-select=\"\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n )}\n >\n <Checkbox\n ref={allBox}\n label={labels.selectAllRows}\n checked={allSelected}\n indeterminate={someSelected && !allSelected}\n onChange={(e) => onToggleAll(e.target.checked)}\n />\n <button\n type=\"button\"\n onClick={() => {\n handOff.current = true;\n onCancel();\n }}\n className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n >\n {labels.cancelSelection}\n </button>\n </div>\n );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n columns,\n filters,\n selectOptionsByKey,\n isServer,\n hasFilterCallback,\n onSetFilter,\n onClearFilter,\n onClearAll,\n labels,\n locale,\n}: {\n columns: DataTableColumn<T>[];\n filters: FilterState;\n selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n isServer: boolean;\n hasFilterCallback: boolean;\n onSetFilter: (key: string, value: FilterValue) => void;\n onClearFilter: (key: string) => void;\n onClearAll: () => void;\n labels: DataTableLabels;\n locale?: string;\n}) {\n const [open, setOpen] = useState(false);\n // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n // in, so it carries the trigger's direction with it — read at the moment of opening,\n // from the element the user actually pressed.\n const [dir, setDir] = useState<Direction>(\"ltr\");\n const [expanded, setExpanded] = useState<string | null>(null);\n\n const filterable = useMemo(\n () =>\n columns\n .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n [columns, isServer, hasFilterCallback],\n );\n\n if (filterable.length === 0) return null;\n\n const activeCount = filterable.filter(({ col }) => {\n const s = filters[col.key];\n return s && isFilterActive(s);\n }).length;\n\n return (\n <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n <button\n type=\"button\"\n onClick={(e) => {\n setDir(dirOf(e.currentTarget));\n setOpen(true);\n }}\n className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n >\n <Filter className=\"size-4\" />\n <span>{labels.filters}</span>\n {activeCount > 0 && (\n <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n {activeCount}\n </span>\n )}\n </button>\n {activeCount > 0 && (\n <button\n type=\"button\"\n onClick={onClearAll}\n className=\"text-xs text-muted hover:text-secondary\"\n >\n {labels.clearAll}\n </button>\n )}\n {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n in the URL, so closing never loses anything), the scroll lock, focus in and\n back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n screen's edges on a phone, as it always did. */}\n <DialogFrame\n open={open}\n onClose={() => setOpen(false)}\n title={labels.filters}\n closeButton\n closeLabel={labels.close}\n headerDivider\n fullBleed\n // Portalled to <body>, so the direction read from the button goes with it.\n dir={dir}\n className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n // The sections run edge to edge with a rule between them, as before.\n bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n actions={(close) => (\n <>\n <button\n type=\"button\"\n onClick={onClearAll}\n disabled={activeCount === 0}\n // `me-auto` keeps Clear all at the start and Done at the end.\n className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n >\n {labels.clearAll}\n </button>\n <button\n type=\"button\"\n onClick={close}\n className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n >\n {labels.done}\n </button>\n </>\n )}\n >\n {filterable.map(({ col, filter }) => {\n const state = filters[col.key];\n const active = !!state && isFilterActive(state);\n const isItemOpen = expanded === col.key;\n return (\n <div key={col.key}>\n <button\n type=\"button\"\n onClick={() => setExpanded(isItemOpen ? null : col.key)}\n aria-expanded={isItemOpen}\n className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n >\n <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n {col.header}\n {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n </span>\n <ChevronDown\n className={cn(\n \"size-4 shrink-0 text-placeholder transition-transform\",\n isItemOpen && \"rotate-180\",\n )}\n />\n </button>\n {isItemOpen && (\n <div className=\"px-4 pb-3\">\n <FilterPopover\n column={col}\n state={state ?? defaultFilterState(filter)}\n onChange={(next) => onSetFilter(col.key, next)}\n onClear={() => onClearFilter(col.key)}\n selectOptions={selectOptionsByKey[col.key] ?? []}\n labels={labels}\n locale={locale}\n />\n </div>\n )}\n </div>\n );\n })}\n </DialogFrame>\n </div>\n );\n}\n"],"mappings":"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","names":["Fragment"]}
@@ -26,7 +26,8 @@ export declare function actionsHeading(header: ReactNode | false | undefined, wo
26
26
  * `end` then `start` — the physical `right` / `left` only where the logical side is
27
27
  * missing, as the card reads them — each action once, told apart by its `id`, else by its
28
28
  * label (two stages with one label would be one button twice). Each button runs the
29
- * swipe's own `onCommit`; a swipe's `danger` / `warning` / `info` tone carries over, any
29
+ * swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the
30
+ * swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any
30
31
  * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a
31
32
  * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.
32
33
  *
@@ -38,6 +38,10 @@ function swipePlanRowActions(plan, row, options = {}) {
38
38
  icon: isValidElement(action.icon) ? action.icon : action.icon != null && action.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: action.icon }) : void 0,
39
39
  tone: swipeTone(action),
40
40
  commit,
41
+ // A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's
42
+ // does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in
43
+ // the row's menu.
44
+ confirm: false,
41
45
  onSelect: action.onCommit
42
46
  });
43
47
  }
@@ -65,6 +69,9 @@ function toRowAction(a, row) {
65
69
  icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
66
70
  tone: a.tone,
67
71
  disabledReason: a.action.disabledReason?.(row),
72
+ // The table's own `confirm` asks in `runRowAction`; RowActions' default question
73
+ // (0.49 KIT-12) is for a delete that brought none.
74
+ confirm: a.action.confirm ? false : void 0,
68
75
  onSelect: () => void runRowAction(a.action, row)
69
76
  };
70
77
  }