@godxjp/ui 31.31.8 → 32.0.1

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 (732) hide show
  1. package/README.md +102 -121
  2. package/agent/START-HERE.md +10 -10
  3. package/agent/components/Accordion.json +2 -2
  4. package/agent/components/AccountChip.json +1 -1
  5. package/agent/components/Actions.json +1 -1
  6. package/agent/components/Activity.json +2 -2
  7. package/agent/components/Affix.json +1 -1
  8. package/agent/components/Alert.json +22 -6
  9. package/agent/components/AlertDialog.json +8 -1
  10. package/agent/components/Anchor.json +4 -3
  11. package/agent/components/AppLauncher.json +2 -2
  12. package/agent/components/AppProvider.json +19 -11
  13. package/agent/components/AppSettingPicker.json +18 -2
  14. package/agent/components/AppShell.json +4 -5
  15. package/agent/components/AreaChart.json +0 -1
  16. package/agent/components/AspectRatio.json +2 -2
  17. package/agent/components/Attachments.json +3 -3
  18. package/agent/components/AuthAccountSummary.json +1 -1
  19. package/agent/components/AuthDivider.json +1 -1
  20. package/agent/components/AuthExpiryProvider.json +0 -1
  21. package/agent/components/AuthFooter.json +2 -2
  22. package/agent/components/AuthIdentity.json +3 -3
  23. package/agent/components/AuthStack.json +1 -1
  24. package/agent/components/Avatar.json +2 -12
  25. package/agent/components/Badge.json +1 -1
  26. package/agent/components/BarChart.json +0 -1
  27. package/agent/components/BranchScopePicker.json +1 -1
  28. package/agent/components/Breadcrumb.json +1 -1
  29. package/agent/components/Button.json +3 -3
  30. package/agent/components/Calendar.json +1 -1
  31. package/agent/components/Card.json +2 -2
  32. package/agent/components/CardBar.json +0 -1
  33. package/agent/components/CardContent.json +0 -1
  34. package/agent/components/Carousel.json +4 -3
  35. package/agent/components/Cascader.json +1 -1
  36. package/agent/components/CenteredShell.json +78 -17
  37. package/agent/components/ChatBubble.json +3 -3
  38. package/agent/components/ChatBubbleList.json +3 -3
  39. package/agent/components/ChatComposer.json +3 -3
  40. package/agent/components/ChatSuggestion.json +3 -3
  41. package/agent/components/Checkbox.json +1 -1
  42. package/agent/components/CheckboxGroup.json +0 -1
  43. package/agent/components/CodeBlock.json +1 -1
  44. package/agent/components/Collapsible.json +4 -4
  45. package/agent/components/ColorPicker.json +1 -1
  46. package/agent/components/Command.json +5 -5
  47. package/agent/components/CommandPalette.json +1 -1
  48. package/agent/components/CompactBarTrend.json +1 -1
  49. package/agent/components/Conversations.json +3 -3
  50. package/agent/components/CredentialReveal.json +1 -1
  51. package/agent/components/DataState.json +2 -2
  52. package/agent/components/DataTable.json +1 -1
  53. package/agent/components/DatePicker.json +1 -1
  54. package/agent/components/Descriptions.json +1 -1
  55. package/agent/components/Dialog.json +2 -2
  56. package/agent/components/DraggablePanel.json +5 -4
  57. package/agent/components/DropdownMenu.json +1 -1
  58. package/agent/components/EmojiPicker.json +3 -2
  59. package/agent/components/EmptyState.json +1 -1
  60. package/agent/components/ErrorSurface.json +3 -3
  61. package/agent/components/FeatureList.json +1 -1
  62. package/agent/components/Field.json +0 -1
  63. package/agent/components/Flex.json +34 -4
  64. package/agent/components/FloatButton.json +6 -5
  65. package/agent/components/Form.json +1 -1
  66. package/agent/components/FormErrors.json +0 -1
  67. package/agent/components/FormField.json +6 -6
  68. package/agent/components/FormFieldArray.json +0 -1
  69. package/agent/components/FormFieldControl.json +0 -1
  70. package/agent/components/FormRoot.json +1 -1
  71. package/agent/components/Heading.json +3 -0
  72. package/agent/components/Icon.json +1 -1
  73. package/agent/components/Image.json +7 -4
  74. package/agent/components/InfiniteQueryState.json +1 -1
  75. package/agent/components/Input.json +1 -1
  76. package/agent/components/InputOTP.json +2 -2
  77. package/agent/components/Label.json +3 -3
  78. package/agent/components/LegalDocumentShell.json +5 -4
  79. package/agent/components/Legend.json +1 -1
  80. package/agent/components/LineChart.json +0 -1
  81. package/agent/components/Link.json +0 -1
  82. package/agent/components/ListRow.json +1 -1
  83. package/agent/components/Logo.json +5 -4
  84. package/agent/components/Marquee.json +4 -3
  85. package/agent/components/Masonry.json +4 -3
  86. package/agent/components/MasterDetail.json +1 -1
  87. package/agent/components/MegaMenu.json +4 -3
  88. package/agent/components/MobileShell.json +4 -4
  89. package/agent/components/NavList.json +1 -1
  90. package/agent/components/NumberInput.json +1 -1
  91. package/agent/components/OrgChart.json +4 -3
  92. package/agent/components/OrgSwitcher.json +1 -1
  93. package/agent/components/OverlayPortalProvider.json +0 -1
  94. package/agent/components/PageContainer.json +3 -3
  95. package/agent/components/PageCover.json +3 -2
  96. package/agent/components/Pagination.json +1 -1
  97. package/agent/components/PasswordInput.json +1 -1
  98. package/agent/components/PasswordStrength.json +1 -1
  99. package/agent/components/PermissionMatrix.json +1 -1
  100. package/agent/components/PieChart.json +0 -1
  101. package/agent/components/Popover.json +31 -6
  102. package/agent/components/PrefetchLink.json +1 -1
  103. package/agent/components/Progress.json +1 -1
  104. package/agent/components/Prose.json +1 -1
  105. package/agent/components/QrCode.json +1 -1
  106. package/agent/components/Radio.json +0 -1
  107. package/agent/components/RadioGroup.json +2 -2
  108. package/agent/components/RangeTimeline.json +2 -1
  109. package/agent/components/Rating.json +1 -1
  110. package/agent/components/RecordPicker.json +1 -1
  111. package/agent/components/ResizablePanel.json +1 -1
  112. package/agent/components/ResponsiveGrid.json +2 -2
  113. package/agent/components/Reveal.json +3 -3
  114. package/agent/components/ScrollArea.json +2 -2
  115. package/agent/components/SearchInput.json +1 -1
  116. package/agent/components/Segmented.json +1 -1
  117. package/agent/components/Select.json +7 -5
  118. package/agent/components/Separator.json +1 -1
  119. package/agent/components/ServiceCatalogCta.json +0 -1
  120. package/agent/components/ServiceLauncherCard.json +1 -1
  121. package/agent/components/ServiceRolePanel.json +1 -1
  122. package/agent/components/Sheet.json +5 -5
  123. package/agent/components/Sidebar.json +1 -1
  124. package/agent/components/Skeleton.json +26 -12
  125. package/agent/components/Slider.json +2 -2
  126. package/agent/components/SortableList.json +3 -2
  127. package/agent/components/SplitPane.json +1 -1
  128. package/agent/components/StatCard.json +1 -1
  129. package/agent/components/Steps.json +1 -1
  130. package/agent/components/Swatch.json +1 -1
  131. package/agent/components/Switch.json +1 -1
  132. package/agent/components/Table.json +1 -1
  133. package/agent/components/Tabs.json +3 -3
  134. package/agent/components/Text.json +5 -1
  135. package/agent/components/TextDiff.json +5 -4
  136. package/agent/components/Textarea.json +1 -1
  137. package/agent/components/ThemeScope.json +1 -1
  138. package/agent/components/ThoughtChain.json +3 -3
  139. package/agent/components/TimePicker.json +1 -1
  140. package/agent/components/Timeline.json +1 -1
  141. package/agent/components/TimelineGrid.json +5 -4
  142. package/agent/components/Toaster.json +0 -1
  143. package/agent/components/Toggle.json +3 -3
  144. package/agent/components/ToggleGroup.json +1 -1
  145. package/agent/components/Toolbar.json +10 -3
  146. package/agent/components/Tooltip.json +9 -9
  147. package/agent/components/Topbar.json +1 -1
  148. package/agent/components/TopbarItem.json +1 -1
  149. package/agent/components/Transfer.json +2 -2
  150. package/agent/components/Tree.json +1 -1
  151. package/agent/components/TreeSelect.json +1 -1
  152. package/agent/components/TwoFactorSetup.json +1 -1
  153. package/agent/components/Upload.json +1 -1
  154. package/agent/components/UploadCropDialog.json +1 -1
  155. package/agent/components/Welcome.json +3 -3
  156. package/agent/components/formatDate.json +2 -2
  157. package/agent/components/inertiaUpload.json +0 -1
  158. package/agent/components/useZodForm.json +0 -1
  159. package/agent/components-index.json +80 -154
  160. package/agent/components.json +541 -1737
  161. package/agent/index.json +10 -10
  162. package/agent/llms.txt +9 -9
  163. package/agent/patterns/account-recovery-settings.json +1 -1
  164. package/agent/patterns/auth-recovery-panels.json +2 -2
  165. package/agent/patterns/error-pages.json +1 -1
  166. package/agent/patterns/pricing-plans.json +17 -0
  167. package/agent/patterns-index.json +17 -1
  168. package/agent/patterns.json +21 -4
  169. package/agent/rules.json +30 -65
  170. package/agent/tokens.json +27 -57
  171. package/agent/vocabulary.json +3 -3
  172. package/dist/app/app-provider.d.ts +5 -3
  173. package/dist/app/app-provider.js +47 -12
  174. package/dist/app/date-format-labels.d.ts +3 -1
  175. package/dist/app/date-format-labels.js +2 -4
  176. package/dist/app/date-formats.d.ts +21 -2
  177. package/dist/app/date-formats.js +51 -2
  178. package/dist/app/index.d.ts +3 -1
  179. package/dist/app/index.js +5 -0
  180. package/dist/app/locales.d.ts +58 -3
  181. package/dist/app/locales.js +134 -8
  182. package/dist/app/preset.d.ts +25 -0
  183. package/dist/app/preset.js +10 -0
  184. package/dist/app/request-headers.d.ts +3 -3
  185. package/dist/app/request-headers.js +19 -10
  186. package/dist/app/settings-scope.d.ts +54 -0
  187. package/dist/app/settings-scope.js +46 -0
  188. package/dist/app/tenant-theme.js +8 -3
  189. package/dist/app/time-format-labels.d.ts +4 -1
  190. package/dist/app/time-format-labels.js +7 -1
  191. package/dist/app/types.d.ts +10 -2
  192. package/dist/app/use-formatting.d.ts +1 -1
  193. package/dist/components/admin/index.d.ts +1 -1
  194. package/dist/components/admin/index.js +1 -1
  195. package/dist/components/data-display/accordion.d.ts +51 -1
  196. package/dist/components/data-display/accordion.js +247 -1
  197. package/dist/components/data-display/avatar.d.ts +16 -1
  198. package/dist/components/data-display/avatar.js +109 -1
  199. package/dist/components/data-display/credential-reveal.d.ts +9 -2
  200. package/dist/components/data-display/credential-reveal.js +156 -1
  201. package/dist/components/data-display/image.js +5 -3
  202. package/dist/components/data-display/index.d.ts +0 -21
  203. package/dist/components/data-display/index.js +1 -43
  204. package/dist/components/data-display/popover.d.ts +15 -3
  205. package/dist/components/data-display/popover.js +168 -2
  206. package/dist/components/data-entry/branch-scope-picker.d.ts +1 -1
  207. package/dist/components/data-entry/index.d.ts +5 -12
  208. package/dist/components/data-entry/index.js +11 -12
  209. package/dist/components/data-entry/input-otp.d.ts +48 -2
  210. package/dist/components/data-entry/input-otp.js +94 -1
  211. package/dist/components/data-entry/number-input.d.ts +1 -1
  212. package/dist/components/data-entry/password-input.d.ts +38 -2
  213. package/dist/components/data-entry/password-input.js +56 -1
  214. package/dist/components/data-entry/rating.d.ts +38 -2
  215. package/dist/components/data-entry/rating.js +127 -1
  216. package/dist/components/data-entry/segmented.d.ts +94 -2
  217. package/dist/components/data-entry/segmented.js +104 -1
  218. package/dist/components/{ui/tag-input.d.ts → data-entry/select-tags-inline.d.ts} +7 -4
  219. package/dist/components/{ui/tag-input.js → data-entry/select-tags-inline.js} +4 -4
  220. package/dist/components/data-entry/select.js +4 -0
  221. package/dist/components/data-entry/toggle-group.d.ts +108 -2
  222. package/dist/components/data-entry/toggle-group.js +189 -1
  223. package/dist/components/data-entry/toggle.d.ts +86 -2
  224. package/dist/components/data-entry/toggle.js +153 -2
  225. package/dist/components/feedback/alert.d.ts +5 -3
  226. package/dist/components/feedback/alert.js +14 -2
  227. package/dist/components/feedback/index.d.ts +2 -6
  228. package/dist/components/feedback/index.js +1 -13
  229. package/dist/components/feedback/skeleton.d.ts +4 -17
  230. package/dist/components/feedback/skeleton.js +3 -40
  231. package/dist/components/general/index.d.ts +2 -4
  232. package/dist/components/general/index.js +1 -6
  233. package/dist/components/general/typography.d.ts +4 -58
  234. package/dist/components/general/typography.js +7 -141
  235. package/dist/components/layout/aspect-ratio.d.ts +24 -1
  236. package/dist/components/layout/aspect-ratio.js +18 -1
  237. package/dist/components/layout/auth-divider.js +1 -1
  238. package/dist/components/layout/auth-identity.js +6 -2
  239. package/dist/components/layout/centered-shell.d.ts +13 -8
  240. package/dist/components/layout/centered-shell.js +43 -1
  241. package/dist/components/layout/flex.d.ts +1 -1
  242. package/dist/components/layout/flex.js +73 -1
  243. package/dist/components/layout/index.d.ts +1 -13
  244. package/dist/components/layout/index.js +0 -12
  245. package/dist/components/layout/separator.d.ts +25 -2
  246. package/dist/components/layout/separator.js +71 -1
  247. package/dist/components/navigation/{app-setting-toggle.d.ts → app-setting-cycle.d.ts} +3 -4
  248. package/dist/components/navigation/{app-setting-toggle.js → app-setting-cycle.js} +3 -3
  249. package/dist/components/navigation/app-setting-picker.d.ts +6 -2
  250. package/dist/components/navigation/app-setting-picker.js +20 -2
  251. package/dist/components/navigation/index.d.ts +3 -11
  252. package/dist/components/navigation/index.js +1 -9
  253. package/dist/components/navigation/tabs.js +1 -1
  254. package/dist/components/ui/carousel.d.ts +1 -1
  255. package/dist/components/ui/carousel.js +1 -1
  256. package/dist/components/ui/index.d.ts +11 -5
  257. package/dist/components/ui/index.js +5 -5
  258. package/dist/contracts/measurement.json +2 -2
  259. package/dist/email/brand-mark.d.ts +3 -2
  260. package/dist/email/brand-mark.js +1 -1
  261. package/dist/email/color.d.ts +7 -0
  262. package/dist/email/color.js +14 -1
  263. package/dist/email/index.d.ts +10 -2
  264. package/dist/email/index.js +23 -2
  265. package/dist/email/tokens.generated.d.ts +120 -2
  266. package/dist/email/tokens.generated.js +119 -1
  267. package/dist/i18n/locale-tags.d.ts +25 -0
  268. package/dist/i18n/locale-tags.js +59 -0
  269. package/dist/i18n/translate.d.ts +20 -3
  270. package/dist/i18n/translate.js +25 -14
  271. package/dist/i18n/use-translation.d.ts +3 -3
  272. package/dist/i18n/use-translation.js +4 -2
  273. package/dist/{components/navigation → lab}/anchor.d.ts +2 -2
  274. package/dist/{components/navigation → lab}/anchor.js +5 -5
  275. package/dist/{components/data-display → lab}/carousel.js +2 -2
  276. package/dist/{components/layout → lab}/draggable-panel.d.ts +8 -8
  277. package/dist/{components/layout → lab}/draggable-panel.js +2 -2
  278. package/dist/{components/data-entry → lab}/emoji-picker.d.ts +2 -2
  279. package/dist/{components/data-entry → lab}/emoji-picker.js +6 -6
  280. package/dist/{components/general → lab}/float-button.d.ts +8 -8
  281. package/dist/{components/general → lab}/float-button.js +7 -7
  282. package/dist/lab/index.d.ts +39 -0
  283. package/dist/lab/index.js +48 -0
  284. package/dist/{components/layout → lab}/legal-document-shell.d.ts +2 -2
  285. package/dist/{components/layout → lab}/legal-document-shell.js +4 -4
  286. package/dist/{components/data-display → lab}/marquee.d.ts +5 -5
  287. package/dist/{components/data-display → lab}/marquee.js +5 -5
  288. package/dist/{components/layout → lab}/masonry.d.ts +2 -2
  289. package/dist/{components/layout → lab}/masonry.js +3 -3
  290. package/dist/{components/navigation → lab}/mega-menu.d.ts +4 -4
  291. package/dist/{components/navigation → lab}/mega-menu.js +2 -2
  292. package/dist/{components/data-display → lab}/org-chart.d.ts +2 -2
  293. package/dist/{components/data-display → lab}/org-chart.js +4 -4
  294. package/dist/{components/layout → lab}/page-cover.d.ts +2 -2
  295. package/dist/{components/layout → lab}/page-cover.js +2 -2
  296. package/dist/{components/data-display → lab}/range-timeline.d.ts +1 -1
  297. package/dist/{components/data-display → lab}/range-timeline.js +6 -6
  298. package/dist/{components/data-entry → lab}/sortable-list.d.ts +2 -2
  299. package/dist/{components/data-entry → lab}/sortable-list.js +3 -3
  300. package/dist/{components/data-display → lab}/text-diff.d.ts +3 -3
  301. package/dist/{components/data-display → lab}/text-diff.js +4 -4
  302. package/dist/{components/data-display → lab}/timeline-grid.d.ts +2 -2
  303. package/dist/{components/data-display → lab}/timeline-grid.js +1 -1
  304. package/dist/lib/control-styles.js +1 -1
  305. package/dist/lib/datetime/format.js +20 -6
  306. package/dist/lib/datetime/sync.d.ts +6 -2
  307. package/dist/lib/datetime/sync.js +14 -18
  308. package/dist/lib/platform.d.ts +1 -1
  309. package/dist/props/components/app.prop.d.ts +28 -13
  310. package/dist/props/components/data-display.prop.d.ts +19 -29
  311. package/dist/props/components/feedback.prop.d.ts +15 -44
  312. package/dist/props/components/general.prop.d.ts +2 -64
  313. package/dist/props/components/index.d.ts +9 -1
  314. package/dist/props/components/layout.prop.d.ts +41 -57
  315. package/dist/props/registry.d.ts +48 -101
  316. package/dist/props/registry.js +45 -129
  317. package/dist/props/vocabulary/index.d.ts +1 -1
  318. package/dist/props/vocabulary/interaction.prop.d.ts +3 -12
  319. package/dist/styles/alert-layout.css +0 -29
  320. package/dist/styles/data-display-layout.css +14 -22
  321. package/dist/styles/fonts/OFL.txt +93 -0
  322. package/dist/styles/form-layout.css +4 -0
  323. package/dist/styles/index.css +0 -2
  324. package/dist/styles/layers.json +44 -179
  325. package/dist/styles/text-layout.css +0 -15
  326. package/dist/styles.css +2 -0
  327. package/dist/themes/godx-tokens.css +41 -0
  328. package/dist/themes/godx.css +3 -0
  329. package/dist/themes/godx.d.ts +16 -0
  330. package/dist/themes/godx.js +12 -0
  331. package/dist/tokens/components/feedback.css +0 -6
  332. package/dist/tokens/derived.css +23 -22
  333. package/dist/tokens/foundation.css +4 -6
  334. package/docs/COMPOSITION-VS-COMPONENT.md +58 -33
  335. package/docs/CONSUMER-RULES.md +1 -1
  336. package/docs/CUSTOMER-THEMING.md +17 -53
  337. package/docs/migrations/v32.md +105 -0
  338. package/package.json +59 -19
  339. package/scripts/_agent-setup.mjs +54 -3
  340. package/scripts/brand-accent.generated.mjs +15 -2
  341. package/scripts/cli.mjs +36 -11
  342. package/scripts/codemod.mjs +542 -0
  343. package/scripts/consumer-rule.md +21 -43
  344. package/scripts/postinstall.mjs +10 -47
  345. package/scripts/prune-css.mjs +1 -1
  346. package/scripts/ui-audit.mjs +5 -2
  347. package/dist/components/data-display/chat-bubble.d.ts +0 -30
  348. package/dist/components/data-display/chat-bubble.js +0 -229
  349. package/dist/components/data-display/hover-card.d.ts +0 -1
  350. package/dist/components/data-display/hover-card.js +0 -7
  351. package/dist/components/data-display/thought-chain.d.ts +0 -42
  352. package/dist/components/data-display/thought-chain.js +0 -177
  353. package/dist/components/data-display/thumbnail.d.ts +0 -37
  354. package/dist/components/data-display/thumbnail.js +0 -20
  355. package/dist/components/data-display/welcome.d.ts +0 -26
  356. package/dist/components/data-display/welcome.js +0 -37
  357. package/dist/components/data-entry/attachments.d.ts +0 -19
  358. package/dist/components/data-entry/attachments.js +0 -366
  359. package/dist/components/data-entry/chat-composer.d.ts +0 -51
  360. package/dist/components/data-entry/chat-composer.js +0 -200
  361. package/dist/components/data-entry/chat-suggestion.d.ts +0 -28
  362. package/dist/components/data-entry/chat-suggestion.js +0 -309
  363. package/dist/components/data-entry/tag-input.d.ts +0 -2
  364. package/dist/components/data-entry/tag-input.js +0 -5
  365. package/dist/components/feedback/banner.d.ts +0 -21
  366. package/dist/components/feedback/banner.js +0 -19
  367. package/dist/components/feedback/callout.d.ts +0 -23
  368. package/dist/components/feedback/callout.js +0 -42
  369. package/dist/components/layout/auth-shell.d.ts +0 -10
  370. package/dist/components/layout/auth-shell.js +0 -42
  371. package/dist/components/layout/space-compact.d.ts +0 -65
  372. package/dist/components/layout/space-compact.js +0 -52
  373. package/dist/components/navigation/conversations.d.ts +0 -39
  374. package/dist/components/navigation/conversations.js +0 -371
  375. package/dist/components/ui/accordion.d.ts +0 -51
  376. package/dist/components/ui/accordion.js +0 -254
  377. package/dist/components/ui/aspect-ratio.d.ts +0 -24
  378. package/dist/components/ui/aspect-ratio.js +0 -21
  379. package/dist/components/ui/avatar.d.ts +0 -16
  380. package/dist/components/ui/avatar.js +0 -115
  381. package/dist/components/ui/credential-reveal.d.ts +0 -9
  382. package/dist/components/ui/credential-reveal.js +0 -160
  383. package/dist/components/ui/hover-card.d.ts +0 -47
  384. package/dist/components/ui/hover-card.js +0 -205
  385. package/dist/components/ui/input-otp.d.ts +0 -48
  386. package/dist/components/ui/input-otp.js +0 -101
  387. package/dist/components/ui/password-input.d.ts +0 -38
  388. package/dist/components/ui/password-input.js +0 -60
  389. package/dist/components/ui/rating.d.ts +0 -38
  390. package/dist/components/ui/rating.js +0 -131
  391. package/dist/components/ui/segmented.d.ts +0 -94
  392. package/dist/components/ui/segmented.js +0 -108
  393. package/dist/components/ui/separator.d.ts +0 -25
  394. package/dist/components/ui/separator.js +0 -74
  395. package/dist/components/ui/toggle-group.d.ts +0 -108
  396. package/dist/components/ui/toggle-group.js +0 -194
  397. package/dist/components/ui/toggle.d.ts +0 -86
  398. package/dist/components/ui/toggle.js +0 -156
  399. package/docs/CANONICAL-CONTRACTS.md +0 -206
  400. package/docs/COMPONENTS.md +0 -163
  401. package/docs/DATETIME.md +0 -78
  402. package/docs/DEVELOPMENT.md +0 -269
  403. package/docs/FRAME-A11Y-CI.md +0 -287
  404. package/docs/FRAME-COVERAGE-LEDGER.md +0 -123
  405. package/docs/FRAME-COVERAGE-REPORT.md +0 -228
  406. package/docs/FRAME-COVERAGE-STANDARD.md +0 -65
  407. package/docs/FRAME-COVERAGE.md +0 -29
  408. package/docs/MEASUREMENT-CONTRACT.md +0 -109
  409. package/docs/PROPS-REGISTRY.md +0 -61
  410. package/docs/PROPS-VOCABULARY.md +0 -100
  411. package/docs/REGISTRY.md +0 -70
  412. package/docs/TESTING.md +0 -107
  413. package/docs/THEME-API-COVERAGE.md +0 -538
  414. package/docs/WHAT-BELONGS-HERE.md +0 -179
  415. package/docs/asset-modules.d.ts +0 -53
  416. package/docs/assets/cover-terrain.svg +0 -6
  417. package/docs/assets/portrait-amber.svg +0 -5
  418. package/docs/assets/portrait-clay.svg +0 -5
  419. package/docs/assets/portrait-indigo.svg +0 -5
  420. package/docs/assets/portrait-iris.svg +0 -5
  421. package/docs/assets/portrait-moss.svg +0 -5
  422. package/docs/assets/portrait-plum.svg +0 -5
  423. package/docs/assets/portrait-slate.svg +0 -5
  424. package/docs/assets/service-mark-rose.svg +0 -6
  425. package/docs/assets/service-mark-teal.svg +0 -5
  426. package/docs/assets/shot-landscape.svg +0 -12
  427. package/docs/assets/shot-portrait.svg +0 -10
  428. package/docs/assets/tcgm/card-1.svg +0 -1
  429. package/docs/assets/tcgm/card-2.svg +0 -1
  430. package/docs/assets/tcgm/card-3.svg +0 -1
  431. package/docs/assets/tcgm/card-4.svg +0 -1
  432. package/docs/assets/tcgm/card-5.svg +0 -1
  433. package/docs/assets/tcgm/card-6.svg +0 -1
  434. package/docs/assets/tcgm/hero-prism.svg +0 -1
  435. package/docs/assets/tcgm/scene-1.svg +0 -1
  436. package/docs/assets/tcgm/scene-2.svg +0 -1
  437. package/docs/assets/tcgm/scene-3.svg +0 -1
  438. package/docs/assets/tcgm/scene-4.svg +0 -1
  439. package/docs/assets/tcgm/scene-5.svg +0 -1
  440. package/docs/assets/tcgm/tcgm-lockup-color.svg +0 -1
  441. package/docs/assets/tcgm/tcgm-symbol-color.svg +0 -1
  442. package/docs/charts/cjk-category-axis.tsx +0 -81
  443. package/docs/charts/compact-bar-trend.tsx +0 -327
  444. package/docs/charts/size-tiers.tsx +0 -192
  445. package/docs/data-display/accordion.tsx +0 -99
  446. package/docs/data-display/avatar.tsx +0 -502
  447. package/docs/data-display/badge.tsx +0 -335
  448. package/docs/data-display/card/examples/detail-panel.tsx +0 -106
  449. package/docs/data-display/card/examples/tab-list.tsx +0 -97
  450. package/docs/data-display/card/index.md +0 -3
  451. package/docs/data-display/card/index.tsx +0 -390
  452. package/docs/data-display/carousel.tsx +0 -160
  453. package/docs/data-display/charts.tsx +0 -278
  454. package/docs/data-display/chat-bubble.tsx +0 -397
  455. package/docs/data-display/code-block.tsx +0 -188
  456. package/docs/data-display/collapsible.tsx +0 -162
  457. package/docs/data-display/credential-reveal.tsx +0 -148
  458. package/docs/data-display/data-table/examples/antd-parity.tsx +0 -257
  459. package/docs/data-display/data-table/examples/approval-queue.tsx +0 -212
  460. package/docs/data-display/data-table/examples/grid-features.tsx +0 -158
  461. package/docs/data-display/data-table/examples/list-page.tsx +0 -175
  462. package/docs/data-display/data-table/examples/selectable-inbox.tsx +0 -113
  463. package/docs/data-display/data-table/examples/server-paged.tsx +0 -179
  464. package/docs/data-display/data-table/examples/striped-list.tsx +0 -173
  465. package/docs/data-display/data-table/index.md +0 -9
  466. package/docs/data-display/data-table/index.tsx +0 -407
  467. package/docs/data-display/descriptions.tsx +0 -263
  468. package/docs/data-display/empty-state.tsx +0 -164
  469. package/docs/data-display/feature-list.tsx +0 -159
  470. package/docs/data-display/hover-card.tsx +0 -181
  471. package/docs/data-display/image.tsx +0 -170
  472. package/docs/data-display/legend.tsx +0 -158
  473. package/docs/data-display/list-row.tsx +0 -441
  474. package/docs/data-display/markdown.tsx +0 -86
  475. package/docs/data-display/marquee.tsx +0 -254
  476. package/docs/data-display/org-chart.tsx +0 -165
  477. package/docs/data-display/permission-matrix.tsx +0 -188
  478. package/docs/data-display/popover-touch.tsx +0 -27
  479. package/docs/data-display/popover.tsx +0 -331
  480. package/docs/data-display/progress.tsx +0 -162
  481. package/docs/data-display/prose.tsx +0 -169
  482. package/docs/data-display/qr-code.tsx +0 -68
  483. package/docs/data-display/scroll-area.tsx +0 -420
  484. package/docs/data-display/service-launcher-card.tsx +0 -445
  485. package/docs/data-display/stat-card.tsx +0 -354
  486. package/docs/data-display/swatch.tsx +0 -107
  487. package/docs/data-display/table.tsx +0 -362
  488. package/docs/data-display/text-diff.tsx +0 -89
  489. package/docs/data-display/thought-chain.tsx +0 -176
  490. package/docs/data-display/thumbnail.tsx +0 -128
  491. package/docs/data-display/timeline-grid.tsx +0 -119
  492. package/docs/data-display/timeline.tsx +0 -671
  493. package/docs/data-display/touch-actions.tsx +0 -36
  494. package/docs/data-display/tree.tsx +0 -724
  495. package/docs/data-display/welcome.tsx +0 -115
  496. package/docs/data-entry/attachments.tsx +0 -160
  497. package/docs/data-entry/block-editor.tsx +0 -105
  498. package/docs/data-entry/branch-scope-picker.tsx +0 -128
  499. package/docs/data-entry/calendar.tsx +0 -226
  500. package/docs/data-entry/cascader.tsx +0 -380
  501. package/docs/data-entry/chat-composer.tsx +0 -619
  502. package/docs/data-entry/chat-suggestion.tsx +0 -301
  503. package/docs/data-entry/checkbox.tsx +0 -256
  504. package/docs/data-entry/color-picker.tsx +0 -189
  505. package/docs/data-entry/command-palette.tsx +0 -179
  506. package/docs/data-entry/command.tsx +0 -341
  507. package/docs/data-entry/country-picker-recipe.tsx +0 -175
  508. package/docs/data-entry/date-picker.tsx +0 -452
  509. package/docs/data-entry/emoji-picker.tsx +0 -35
  510. package/docs/data-entry/form/examples/employee-settings.tsx +0 -267
  511. package/docs/data-entry/form/examples/invoice-form.tsx +0 -387
  512. package/docs/data-entry/form-dynamic-fields.tsx +0 -199
  513. package/docs/data-entry/form-field/examples/a11y-contract.tsx +0 -242
  514. package/docs/data-entry/form-field/examples/create-form.tsx +0 -107
  515. package/docs/data-entry/form-field/index.md +0 -8
  516. package/docs/data-entry/form-field/index.tsx +0 -337
  517. package/docs/data-entry/form-inertia.tsx +0 -80
  518. package/docs/data-entry/form-root.tsx +0 -112
  519. package/docs/data-entry/form.tsx +0 -1498
  520. package/docs/data-entry/input-otp.tsx +0 -258
  521. package/docs/data-entry/input.tsx +0 -796
  522. package/docs/data-entry/label.tsx +0 -102
  523. package/docs/data-entry/markdown-editor.tsx +0 -69
  524. package/docs/data-entry/number-input.tsx +0 -279
  525. package/docs/data-entry/password-input.tsx +0 -102
  526. package/docs/data-entry/password-strength.tsx +0 -99
  527. package/docs/data-entry/radio-group.tsx +0 -316
  528. package/docs/data-entry/rating.tsx +0 -91
  529. package/docs/data-entry/record-picker.tsx +0 -209
  530. package/docs/data-entry/search-input.tsx +0 -121
  531. package/docs/data-entry/segmented-in-filter-row.tsx +0 -60
  532. package/docs/data-entry/segmented.tsx +0 -300
  533. package/docs/data-entry/select-async-contracts.tsx +0 -108
  534. package/docs/data-entry/select-matrix.tsx +0 -209
  535. package/docs/data-entry/select.tsx +0 -547
  536. package/docs/data-entry/slider.tsx +0 -212
  537. package/docs/data-entry/sortable-list.tsx +0 -76
  538. package/docs/data-entry/switch.tsx +0 -314
  539. package/docs/data-entry/tag-input.tsx +0 -145
  540. package/docs/data-entry/textarea.tsx +0 -249
  541. package/docs/data-entry/time-picker.tsx +0 -187
  542. package/docs/data-entry/time-range-picker.tsx +0 -55
  543. package/docs/data-entry/toggle-count.tsx +0 -348
  544. package/docs/data-entry/toggle-group.tsx +0 -438
  545. package/docs/data-entry/toggle.tsx +0 -217
  546. package/docs/data-entry/transfer.tsx +0 -115
  547. package/docs/data-entry/tree-select.tsx +0 -204
  548. package/docs/data-entry/upload-crop-dialog.tsx +0 -109
  549. package/docs/data-entry/upload.tsx +0 -310
  550. package/docs/feedback/alert-dialog.tsx +0 -270
  551. package/docs/feedback/alert.tsx +0 -248
  552. package/docs/feedback/auth-expiry.tsx +0 -104
  553. package/docs/feedback/banner.tsx +0 -183
  554. package/docs/feedback/callout.tsx +0 -220
  555. package/docs/feedback/danger-confirm.tsx +0 -91
  556. package/docs/feedback/dialog-touch.tsx +0 -24
  557. package/docs/feedback/dialog.tsx +0 -373
  558. package/docs/feedback/sheet.tsx +0 -510
  559. package/docs/feedback/skeleton.tsx +0 -168
  560. package/docs/feedback/toast.tsx +0 -135
  561. package/docs/feedback/tooltip.tsx +0 -171
  562. package/docs/feedback/two-factor-setup.tsx +0 -68
  563. package/docs/foundation/_email-specimen.ts +0 -274
  564. package/docs/foundation/_theme-editor-scope.ts +0 -222
  565. package/docs/foundation/colors.tsx +0 -207
  566. package/docs/foundation/density.tsx +0 -242
  567. package/docs/foundation/email-tokens.tsx +0 -323
  568. package/docs/foundation/radius-shadow.tsx +0 -154
  569. package/docs/foundation/spacing.tsx +0 -216
  570. package/docs/foundation/theme-editor.tsx +0 -654
  571. package/docs/foundation/typography.tsx +0 -147
  572. package/docs/general/actions.tsx +0 -175
  573. package/docs/general/activity.tsx +0 -289
  574. package/docs/general/button/examples/destructive-confirm.tsx +0 -90
  575. package/docs/general/button/examples/form-actions.tsx +0 -87
  576. package/docs/general/button/examples/toolbar.tsx +0 -160
  577. package/docs/general/button/index.md +0 -16
  578. package/docs/general/button/index.tsx +0 -236
  579. package/docs/general/float-button.tsx +0 -133
  580. package/docs/general/icon.tsx +0 -217
  581. package/docs/general/logo.tsx +0 -194
  582. package/docs/general/reveal.tsx +0 -309
  583. package/docs/general/typography.tsx +0 -542
  584. package/docs/i18n/messages/en.json +0 -1715
  585. package/docs/i18n/messages/ja.json +0 -1708
  586. package/docs/i18n/messages/vi.json +0 -1708
  587. package/docs/layout/account-chip.tsx +0 -72
  588. package/docs/layout/admin-collection.tsx +0 -122
  589. package/docs/layout/affix.tsx +0 -209
  590. package/docs/layout/app-launcher.tsx +0 -211
  591. package/docs/layout/app-shell-arrangements.tsx +0 -225
  592. package/docs/layout/app-shell-narrow-bar.tsx +0 -205
  593. package/docs/layout/app-shell-states.tsx +0 -171
  594. package/docs/layout/app-shell.tsx +0 -395
  595. package/docs/layout/aspect-ratio.tsx +0 -135
  596. package/docs/layout/auth-account-summary.tsx +0 -103
  597. package/docs/layout/auth-divider.tsx +0 -28
  598. package/docs/layout/auth-footer.tsx +0 -37
  599. package/docs/layout/auth-identity.tsx +0 -70
  600. package/docs/layout/auth-recovery/examples/mfa-challenge.md +0 -41
  601. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +0 -254
  602. package/docs/layout/auth-recovery/examples/mobile-390.md +0 -25
  603. package/docs/layout/auth-recovery/examples/mobile-390.tsx +0 -82
  604. package/docs/layout/auth-recovery/examples/password-recovery.md +0 -24
  605. package/docs/layout/auth-recovery/examples/password-recovery.tsx +0 -197
  606. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +0 -27
  607. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +0 -156
  608. package/docs/layout/auth-recovery/index.md +0 -140
  609. package/docs/layout/auth-recovery/index.tsx +0 -96
  610. package/docs/layout/auth-shell-context.tsx +0 -103
  611. package/docs/layout/auth-shell-device.tsx +0 -112
  612. package/docs/layout/auth-shell-registration.tsx +0 -338
  613. package/docs/layout/auth-shell-variants.tsx +0 -143
  614. package/docs/layout/auth-shell.tsx +0 -59
  615. package/docs/layout/auth-stack.tsx +0 -40
  616. package/docs/layout/centered-shell.tsx +0 -102
  617. package/docs/layout/draggable-panel.tsx +0 -127
  618. package/docs/layout/error-surface/examples/application-403.tsx +0 -84
  619. package/docs/layout/error-surface/examples/application-404.tsx +0 -77
  620. package/docs/layout/error-surface/examples/system-500.tsx +0 -47
  621. package/docs/layout/error-surface/examples/system-503.tsx +0 -48
  622. package/docs/layout/error-surface/index.md +0 -153
  623. package/docs/layout/error-surface/index.tsx +0 -239
  624. package/docs/layout/flex.tsx +0 -444
  625. package/docs/layout/legal-document-shell/_data.ts +0 -110
  626. package/docs/layout/legal-document-shell/examples/desktop-1440.md +0 -12
  627. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +0 -83
  628. package/docs/layout/legal-document-shell/examples/mobile-390.md +0 -22
  629. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +0 -70
  630. package/docs/layout/legal-document-shell/examples/tablet-1024.md +0 -3
  631. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +0 -84
  632. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +0 -18
  633. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +0 -61
  634. package/docs/layout/legal-document-shell/index.md +0 -51
  635. package/docs/layout/legal-document-shell/index.tsx +0 -101
  636. package/docs/layout/masonry.tsx +0 -291
  637. package/docs/layout/master-detail.tsx +0 -390
  638. package/docs/layout/mobile-shell.tsx +0 -106
  639. package/docs/layout/nav-list.tsx +0 -584
  640. package/docs/layout/org-switcher.tsx +0 -131
  641. package/docs/layout/page-container.tsx +0 -1020
  642. package/docs/layout/page-cover.tsx +0 -56
  643. package/docs/layout/resizable-panel.tsx +0 -419
  644. package/docs/layout/responsive-grid.tsx +0 -403
  645. package/docs/layout/separator.tsx +0 -327
  646. package/docs/layout/service-role-panel.tsx +0 -144
  647. package/docs/layout/sidebar.tsx +0 -689
  648. package/docs/layout/space-compact.tsx +0 -202
  649. package/docs/layout/split-pane.tsx +0 -532
  650. package/docs/layout/topbar-item.tsx +0 -233
  651. package/docs/layout/topbar.tsx +0 -360
  652. package/docs/navigation/anchor.tsx +0 -295
  653. package/docs/navigation/app-setting-picker.tsx +0 -178
  654. package/docs/navigation/app-setting-toggle.tsx +0 -111
  655. package/docs/navigation/breadcrumb.tsx +0 -207
  656. package/docs/navigation/card-tabs.tsx +0 -344
  657. package/docs/navigation/conversations.tsx +0 -176
  658. package/docs/navigation/dropdown-menu.tsx +0 -345
  659. package/docs/navigation/filter-bar.tsx +0 -247
  660. package/docs/navigation/mega-menu-panel.tsx +0 -86
  661. package/docs/navigation/mega-menu.tsx +0 -254
  662. package/docs/navigation/pagination.tsx +0 -293
  663. package/docs/navigation/steps.tsx +0 -315
  664. package/docs/navigation/tabs-rtl.tsx +0 -28
  665. package/docs/navigation/tabs.tsx +0 -755
  666. package/docs/navigation/toolbar.tsx +0 -347
  667. package/docs/providers/app-provider.tsx +0 -191
  668. package/docs/providers/format-date.tsx +0 -230
  669. package/docs/providers/theme-scope.tsx +0 -186
  670. package/docs/query/button-refetch.tsx +0 -161
  671. package/docs/query/data-state.tsx +0 -262
  672. package/docs/query/infinite-query-state.tsx +0 -97
  673. package/docs/query/mutation-feedback.tsx +0 -128
  674. package/docs/query/touch-actions.tsx +0 -68
  675. package/docs/react-router/prefetch-link.tsx +0 -262
  676. package/docs/roadmap/ai-chat-components.md +0 -206
  677. package/docs/roadmap/antd-parity.md +0 -155
  678. package/docs/roadmap/badge-tag-chip-count.md +0 -172
  679. package/docs/roadmap/list-masonry.md +0 -159
  680. package/docs/roadmap/parity-audit-data-display-feedback.md +0 -567
  681. package/docs/roadmap/parity-audit-data-entry.md +0 -368
  682. package/docs/roadmap/parity-audit-layout-navigation-general.md +0 -459
  683. package/docs/roadmap/parity-backlog.md +0 -77
  684. package/docs/roadmap/tree-components.md +0 -151
  685. package/docs/roadmap/website-components.md +0 -813
  686. package/docs/showcase/acme-portal.tsx +0 -461
  687. package/docs/showcase/acme-website.tsx +0 -499
  688. package/docs/showcase/caimono-price-comparison.tsx +0 -919
  689. package/docs/showcase/case1-warehouse-dashboard.tsx +0 -358
  690. package/docs/showcase/case2-employee-me.tsx +0 -438
  691. package/docs/showcase/case3-approval-workflow.tsx +0 -531
  692. package/docs/showcase/case4-login.tsx +0 -312
  693. package/docs/showcase/case5-shift-calendar.tsx +0 -702
  694. package/docs/showcase/case6-agency-handy.tsx +0 -1120
  695. package/docs/showcase/futurelastic-web.tsx +0 -441
  696. package/docs/showcase/marketing-page.tsx +0 -895
  697. package/docs/showcase/org-switcher.tsx +0 -320
  698. package/docs/showcase/permission-matrix.tsx +0 -354
  699. package/docs/showcase/public-landing.tsx +0 -210
  700. package/docs/showcase/settings-account-sections.tsx +0 -559
  701. package/docs/showcase/settings-security-mfa.tsx +0 -145
  702. package/docs/showcase/table-approval-queue.tsx +0 -199
  703. package/docs/showcase/table-bulk-actions.tsx +0 -468
  704. package/docs/showcase/table-compact-kintone.tsx +0 -438
  705. package/docs/showcase/table-conditional-format.tsx +0 -367
  706. package/docs/showcase/table-crud-list.tsx +0 -544
  707. package/docs/showcase/table-density.tsx +0 -349
  708. package/docs/showcase/table-expandable-rows.tsx +0 -496
  709. package/docs/showcase/table-filter-chips.tsx +0 -468
  710. package/docs/showcase/table-footer-totals.tsx +0 -328
  711. package/docs/showcase/table-grouped-subtotals.tsx +0 -398
  712. package/docs/showcase/table-master-detail.tsx +0 -482
  713. package/docs/showcase/table-pagination.tsx +0 -409
  714. package/docs/showcase/table-states.tsx +0 -371
  715. package/docs/showcase/table-sticky-columns.tsx +0 -377
  716. package/docs/showcase/table-tree-rows.tsx +0 -451
  717. package/docs/showcase/table-view-tabs.tsx +0 -488
  718. package/docs/showcase/tcgm-website.tsx +0 -1047
  719. package/docs/showcase/tenant-brand-color.tsx +0 -338
  720. package/docs/showcase/theme-customization.tsx +0 -1292
  721. package/docs/showcase/theme-lab.tsx +0 -2125
  722. package/docs/themes/flat.css +0 -466
  723. package/docs/themes/glassmorphism.css +0 -960
  724. package/docs/themes/index.ts +0 -219
  725. package/docs/themes/neubrutalism.css +0 -481
  726. /package/dist/components/navigation/{filter-bar.d.ts → toolbar.d.ts} +0 -0
  727. /package/dist/components/navigation/{filter-bar.js → toolbar.js} +0 -0
  728. /package/dist/{components/data-display → lab}/carousel.d.ts +0 -0
  729. /package/dist/{components/data-entry → lab}/emoji-data.d.ts +0 -0
  730. /package/dist/{components/data-entry → lab}/emoji-data.js +0 -0
  731. /package/dist/{components/data-display → lab}/marquee-reveal.d.ts +0 -0
  732. /package/dist/{components/data-display → lab}/marquee-reveal.js +0 -0
@@ -1,179 +0,0 @@
1
- # Cái gì đáng đưa vào @godxjp/ui
2
-
3
- Một design system hỏng theo hai hướng ngược nhau, và cả hai đều hỏng thật:
4
-
5
- - **Quá hẹp** — thiếu prop, nên consumer buộc phải lách bằng class hoặc mã màu
6
- gõ tay. Đây là hướng đang hỏng: một lượt kiểm trên godx-chat (08/09/2026) ra
7
- **51 lỗi, 42 trong đó đến từ ĐÚNG MỘT prop còn thiếu** (đệm trên primitive bố
8
- cục).
9
- - **Quá rộng** — nhận mọi yêu cầu, thành một đống prop không ai nhớ, và mỗi
10
- prop là một mảnh DOM nội bộ bị đóng băng thành API công khai.
11
-
12
- Tài liệu này là bộ lọc giữa hai hướng đó. Nó cố tình viết thành câu hỏi **trả
13
- lời được bằng có/không**, không phải nguyên tắc để cảm nhận.
14
-
15
- ---
16
-
17
- ## Ba câu hỏi — phải ĐỦ CẢ BA
18
-
19
- ### 1. Có phải consumer KHÔNG CÓ nước đi hợp lệ nào không?
20
-
21
- Không phải "bất tiện". Là **bất khả**: mọi prop và token đang có đều không nói
22
- được điều cần nói, và mọi đường còn lại đều bị `ui-audit` chặn.
23
-
24
- - ✅ Thiết kế cần 12px giữa hai phần tử trên một HÀNG. Thang bậc tên đọc trục
25
- dọc nên `md` = 16px; làm tròn thì lệch bố cục; viết `gap: 12px` thì
26
- `no-arbitrary-spacing` chặn. **Không có nước đi.** → gh#401, đã vá.
27
- - ❌ "Viết `<Flex gap={3}>` dài hơn `gap-3`." Có nước đi, chỉ là dài hơn.
28
-
29
- Cách kiểm: viết ra đoạn mã bạn _muốn_ viết, chạy `ui-audit` lên nó. Nếu nó
30
- xanh, bạn đã có nước đi.
31
-
32
- ### 2. Nó thuộc về HÌNH DẠNG của component, hay thuộc về NỘI DUNG của một màn?
33
-
34
- Design system sở hữu hình dạng. Màn hình sở hữu nội dung.
35
-
36
- - ✅ `Flex` không có đệm. Mọi hàng/cột trong mọi ứng dụng đều có thể cần đệm.
37
- - ✅ `TableHead` không có trục căn lề. Mọi bảng có cột số đều cần.
38
- - ❌ "Bảng quản trị thành viên cần cột vai trò rộng 8rem." Đó là màn hình ấy.
39
- - ❌ "Dashboard cần bốn thẻ chỉ số xếp ngang." Đó là bố cục của một trang.
40
-
41
- Câu hỏi phụ khi phân vân: **consumer thứ hai có gặp không?** Nếu câu trả lời là
42
- "chắc là không" thì gần như luôn là nội dung, không phải hình dạng.
43
-
44
- ### 3. Diễn đạt được thành một TRỤC CÓ TÊN không?
45
-
46
- Một prop phải gọi được **ý định**, không chỉ mở một lỗ.
47
-
48
- - ✅ `pad={{ blockStart: 3 }}` — trục logic, bậc thang, đọc ra nghĩa.
49
- - ❌ `styles={{ body: {...}, header: {...} }}` — không phải một trục; nó là một
50
- lỗ tự do, và nó đóng băng tên khe DOM nội bộ thành API công khai. Xem mục
51
- "Không đáng" bên dưới.
52
-
53
- ---
54
-
55
- ## Bốn dấu hiệu MẠNH — một cái là đủ để ưu tiên làm ngay
56
-
57
- Ba câu trên quyết định _có thuộc về đây không_. Bốn dấu hiệu này quyết định
58
- _làm trước hay sau_.
59
-
60
- ### a. Nó chặn một yêu cầu TIẾP CẬN
61
-
62
- Không thương lượng, làm trước.
63
- Ví dụ đã gặp: vòng tiêu điểm của Input là 1px (hạ xuống có chủ ý), không
64
- đạt WCAG 2.4.11 vốn đòi vùng chỉ báo tương đương đường 2px. Và `FormRoot` không
65
- có móc `onInvalid`, nên không đưa được tiêu điểm về trường lỗi đầu tiên — WCAG
66
- 3.3.1 / 2.4.3.
67
-
68
- ### b. Nó hỏng IM LẶNG
69
-
70
- Không lỗi biên dịch, không test đỏ, không cảnh báo — chỉ sai.
71
- Ví dụ đã gặp: `AppShell` nhận cả `logo` lẫn `topbar` nhưng `resolvedTopbar` trả
72
- thẳng `topbar`, nên `logo` **không bao giờ được vẽ**. godx-chat truyền cả hai
73
- suốt nhiều tháng và không ai phát hiện.
74
-
75
- Lớp lỗi này đắt gấp nhiều lần lớp lỗi ồn ào, vì nó không có ai báo.
76
-
77
- ### c. Đếm được
78
-
79
- Một khoảng trống đẻ ra N lỗi audit là một khoảng trống có số đo, không phải một
80
- ý kiến. 42 lỗi từ một prop thiếu là một ưu tiên; một lỗi từ một prop thiếu thì
81
- chưa chắc.
82
-
83
- ### d. Nó BẤT ĐỐI XỨNG với thứ đã có
84
-
85
- Nếu trục dọc có `xl` mà trục ngang không có, khoảng trống ấy gần như luôn là
86
- **quên**, không phải quyết định. Sửa cho cân là rẻ và không tranh cãi.
87
-
88
- ---
89
-
90
- ## Cái KHÔNG đáng vào — và vì sao
91
-
92
- **Bố cục của một màn hình cụ thể.** Nó thuộc về màn hình đó. Nếu ba màn cùng
93
- cần, lúc ấy nó đã thành hình dạng và quay lại câu hỏi 2.
94
-
95
- **Một giá trị dùng đúng một lần.** Đừng đẻ prop cho nó — dùng cửa thoát
96
- (`gapRaw`, `padRaw`). Cửa thoát để lại `data-*-raw` trên DOM nên đếm được; khi
97
- số đếm ấy lớn lên, ĐÓ mới là lúc nó thành một trục đáng có tên.
98
-
99
- **Lỗ kiểu dáng tự do** (`styles={{ slot }}`, `classNames={{ slot }}`). Nó đóng
100
- băng cấu trúc DOM nội bộ thành API công khai, và audit **không đếm được** nó
101
- (một object style dựng ở đâu cũng được rồi spread vào). Nó cũng ngược hẳn với
102
- `style: 0/289` — lập trường nhất quán hiện nay là cho prop ý định, không cho lỗ
103
- kiểu dáng.
104
-
105
- **Gu thẩm mỹ.** "Dùng nhiều khoảng trắng", "hai màu nhấn là đủ", "tránh lưới
106
- bento". Không kiểm chứng được, không cổng nào canh, và khi nó tới tay agent
107
- TRƯỚC luật cứng thì kết quả là mã đẹp mà sai hợp đồng.
108
-
109
- **Thứ chỉ tiết kiệm vài dòng ở call site.** Nếu đường hiện tại đã hợp lệ và
110
- đọc được, việc rút ngắn nó không phải việc của design system.
111
-
112
- ---
113
-
114
- ## Thêm rồi thì NỢ gì
115
-
116
- Một prop mới chưa xong khi nó biên dịch được. Ba việc bắt buộc, và cả ba đều đã
117
- có cổng CI:
118
-
119
- 1. **Vào catalog.** Chạy `node scripts/gen-component-api-manifest.mjs`.
120
- `check:component-api-manifest` canh việc này. **Không vào catalog thì agent
121
- không biết nó tồn tại** — và đó không phải giả thuyết: `pad`/`padRaw` được
122
- thêm vào gói nhưng catalog phát hành chưa có, nên một agent tra MCP đúng quy
123
- trình vẫn kết luận "Flex chỉ có gap" và bỏ cuộc trước 21 lỗi mà nó có thể
124
- sửa.
125
-
126
- 2. **Có bằng chứng phủ từng nhánh giá trị.** `component-case-evidence.json` +
127
- `check:frame-coverage-ledger`. Bằng chứng phải trỏ vào test THẬT SỰ chạy qua
128
- nhánh ấy, không phải một tệp cho có.
129
-
130
- 3. **Có ví dụ BIÊN DỊCH ĐƯỢC.** Hậu quả đo được khi không kiểm: pattern
131
- `confirm-destructive` truyền cho `Dialog` một prop `mode` không tồn tại,
132
- hướng dẫn DataTable dùng `variant="success"` (chính thứ luật
133
- `status-tone-not-variant` cấm), và ví dụ `Input` gọi một prop
134
- `onValueChange` không có thật. Agent chép chúng và viết ra mã hỏng.
135
-
136
- Ba chỗ ấy đã sửa, và `check:doc-prop-existence` nay bắt được lớp lỗi đó.
137
- Lưu ý khi viết tài liệu: cổng ấy đọc mọi đoạn JSX trong `docs/**` như mã
138
- THẬT, nên **trích dẫn một API sai để làm ví dụ cũng bị bắt**. Mô tả bằng lời
139
- như đoạn trên, đừng dán một thẻ JSX hoàn chỉnh vào.
140
-
141
- ---
142
-
143
- ## Một lợi ích ẩn của việc rời Radix, đo được
144
-
145
- `check:doc-prop-existence` canh chiều "mọi prop dùng trong ví dụ đều phải tồn
146
- tại" — chính lớp lỗi khiến agent chép ví dụ rồi viết ra mã hỏng (prop `mode`
147
- trên `Dialog`, prop `onValueChange` trên `Input`). Nhưng nó **bỏ qua mọi
148
- component bọc primitive bên thứ ba**, vì với chúng manifest chỉ là cận dưới:
149
- prop thật nằm trong types của Radix, generator không mở ra được.
150
-
151
- Số đo (08/09/2026):
152
-
153
- | | component KHÔNG kiểm được |
154
- | --------------------------------------------- | ------------------------- |
155
- | `main` | **139 / 289** |
156
- | `feat/v20-react-aria` (6 primitive đã chuyển) | **126 / 289** |
157
-
158
- Mỗi primitive rời Radix là `declaredIn` chuyển từ `node_modules` vào `src/`, và
159
- component đó **bước vào vùng kiểm được**. Sáu primitive đầu đã gỡ rào cho 13
160
- component.
161
-
162
- Nên đợt đổi nền không chỉ là thay thư viện. Nó là cách duy nhất làm cho 126
163
- component còn lại có thể được canh — và trong số đó có `Dialog`, `Input`,
164
- `Badge`, tức đúng những component mà ví dụ sai đã lọt qua.
165
-
166
- ## Khi câu trả lời là "không thuộc về đây"
167
-
168
- Nói ra ở chỗ gặp nó, bằng mã:
169
-
170
- ```tsx
171
- /*
172
- * KHÔNG thuộc về design system: bề rộng này là số đo của riêng màn hình
173
- * quản trị thành viên, không phải một trục của Table. Nếu màn thứ hai cần
174
- * cùng thứ, lúc đó mở issue.
175
- */
176
- ```
177
-
178
- Một dòng như thế đáng giá hơn một issue mở rồi bỏ đấy — nó nói cho người sau
179
- biết ai đã cân nhắc, và cân nhắc ra sao.
@@ -1,53 +0,0 @@
1
- /**
2
- * Static-asset imports for the docs pages.
3
- *
4
- * `tsconfig.json` pins `"types": ["node"]`, so `vite/client` — which normally declares these — is
5
- * never loaded, and `tsconfig.docs.json` inherits that. Without this file `import cover from
6
- * "../assets/cover-terrain.svg"` is a TS2307 even though Vite resolves it perfectly at build time,
7
- * which is exactly how it passed locally and failed `typecheck:docs` in CI.
8
- *
9
- * Narrowed to the formats actually committed under `docs/assets`, and kept in step with
10
- * ASSET_EXTENSIONS in `scripts/check-example-imports.mjs`, which decides the same question for the
11
- * import guard.
12
- */
13
- declare module "*.svg" {
14
- const src: string;
15
- export default src;
16
- }
17
-
18
- declare module "*.png" {
19
- const src: string;
20
- export default src;
21
- }
22
-
23
- declare module "*.jpg" {
24
- const src: string;
25
- export default src;
26
- }
27
-
28
- declare module "*.jpeg" {
29
- const src: string;
30
- export default src;
31
- }
32
-
33
- declare module "*.webp" {
34
- const src: string;
35
- export default src;
36
- }
37
-
38
- declare module "*.avif" {
39
- const src: string;
40
- export default src;
41
- }
42
-
43
- declare module "*.gif" {
44
- const src: string;
45
- export default src;
46
- }
47
-
48
- /**
49
- * A docs-owned theme stylesheet, imported for its side effect (e.g. `docs/themes/*.css`) —
50
- * exactly like `preview/src/*.css`. There is nothing to type; the import exists only so the
51
- * bundler includes the file.
52
- */
53
- declare module "*.css";
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="480" height="270" viewBox="0 0 480 270" role="img">
2
- <rect width="480" height="270" fill="hsl(208 38% 66%)"/>
3
- <circle cx="355" cy="81" r="38" fill="hsl(208 38% 84%)"/>
4
- <path d="M0 270 L163 113 L288 270 Z" fill="hsl(208 38% 50%)"/>
5
- <path d="M192 270 L346 151 L480 270 Z" fill="hsl(208 38% 58%)"/>
6
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(41 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(41 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(41 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(12 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(12 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(12 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(224 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(224 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(224 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(264 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(264 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(264 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(152 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(152 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(152 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(340 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(340 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(340 42% 82%)"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
2
- <rect width="96" height="96" fill="hsl(212 42% 62%)"/>
3
- <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(212 42% 82%)"/>
4
- <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(212 42% 82%)"/>
5
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="240" height="96" viewBox="0 0 240 96" role="img">
2
- <rect width="240" height="96" rx="12" fill="hsl(348 32% 42%)"/>
3
- <rect x="24" y="30" width="36" height="36" rx="8" fill="hsl(348 32% 88%)"/>
4
- <rect x="76" y="36" width="140" height="10" rx="5" fill="hsl(348 32% 88%)"/>
5
- <rect x="76" y="54" width="96" height="10" rx="5" fill="hsl(348 32% 74%)"/>
6
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img">
2
- <rect width="128" height="128" rx="28" fill="hsl(178 38% 34%)"/>
3
- <path d="M40 78 L64 34 L88 78 Z" fill="hsl(178 38% 88%)"/>
4
- <circle cx="64" cy="90" r="9" fill="hsl(178 38% 88%)"/>
5
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img">
2
- <rect width="960" height="540" fill="hsl(210 20% 97%)"/>
3
- <rect width="960" height="56" fill="hsl(152 34% 38%)"/>
4
- <rect x="24" y="22" width="140" height="12" rx="6" fill="hsl(152 34% 80%)"/>
5
- <rect y="56" width="216" height="484" fill="hsl(210 16% 92%)"/>
6
- <rect x="24" y="92" width="160" height="10" rx="5" fill="hsl(210 12% 76%)"/>
7
- <rect x="24" y="124" width="160" height="10" rx="5" fill="hsl(210 12% 82%)"/>
8
- <rect x="24" y="156" width="160" height="10" rx="5" fill="hsl(210 12% 82%)"/>
9
- <rect x="248" y="92" width="320" height="160" rx="12" fill="hsl(210 16% 88%)"/>
10
- <rect x="592" y="92" width="320" height="160" rx="12" fill="hsl(210 16% 88%)"/>
11
- <rect x="248" y="284" width="664" height="212" rx="12" fill="hsl(210 16% 90%)"/>
12
- </svg>
@@ -1,10 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="360" height="640" viewBox="0 0 360 640" role="img">
2
- <rect width="360" height="640" fill="hsl(210 20% 97%)"/>
3
- <rect width="360" height="72" fill="hsl(204 60% 46%)"/>
4
- <rect x="20" y="30" width="120" height="12" rx="6" fill="hsl(204 60% 82%)"/>
5
- <rect x="20" y="104" width="320" height="120" rx="10" fill="hsl(210 16% 88%)"/>
6
- <rect x="20" y="248" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
7
- <rect x="20" y="336" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
8
- <rect x="20" y="424" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
9
- <rect x="20" y="540" width="320" height="44" rx="10" fill="hsl(204 60% 46%)"/>
10
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s0" x2="0" y2="1"><stop stop-color="#DFF3FF"/><stop offset="1" stop-color="#BDCAFB"/></linearGradient><linearGradient id="r0" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s0)"/><circle cx="410" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#486F95" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#486F95"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#0F4C5C"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r0)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 01</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s1" x2="0" y2="1"><stop stop-color="#FFF2E7"/><stop offset="1" stop-color="#FFCED1"/></linearGradient><linearGradient id="r1" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s1)"/><circle cx="391" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#AA7BA9" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#AA7BA9"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#625582"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r1)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 02</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s2" x2="0" y2="1"><stop stop-color="#E5F6F0"/><stop offset="1" stop-color="#BDE7E5"/></linearGradient><linearGradient id="r2" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s2)"/><circle cx="372" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#65AAA7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#65AAA7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#326B71"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r2)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 03</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s3" x2="0" y2="1"><stop stop-color="#F2EAFF"/><stop offset="1" stop-color="#DCC4FD"/></linearGradient><linearGradient id="r3" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s3)"/><circle cx="353" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#9784C7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#9784C7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#57578D"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r3)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 04</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s4" x2="0" y2="1"><stop stop-color="#FFF3CF"/><stop offset="1" stop-color="#F4D7BE"/></linearGradient><linearGradient id="r4" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s4)"/><circle cx="334" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#B89599" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#B89599"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#6E6883"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r4)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 05</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Fictional TCG-M demo card; no real game affiliation</title><defs><linearGradient id="s5" x2="0" y2="1"><stop stop-color="#E2EAFB"/><stop offset="1" stop-color="#B9D7ED"/></linearGradient><linearGradient id="r5" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" rx="38" fill="#FFFFFF"/><g transform="translate(22 22) scale(.93)"><rect width="630" height="880" fill="url(#s5)"/><circle cx="315" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#597FAE" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#597FAE"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#214D75"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r5)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></g><rect x="36" y="672" width="558" height="170" rx="20" fill="#FFFFFF" fill-opacity=".94"/><text x="60" y="718" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="22" letter-spacing="4">TCG-M / SAMPLE</text><text x="60" y="775" fill="#0F4C5C" font-family="Arial,sans-serif" font-size="36" font-weight="700">PRISM WORLD 06</text><text x="60" y="815" fill="#526A73" font-family="Arial,sans-serif" font-size="20">FICTIONAL DESIGN ASSET</text></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img"><title>Layered Prism original decorative atmosphere</title><defs></defs><rect width="1200" height="760" fill="#F8FAFC"/><ellipse cx="900" cy="170" rx="560" ry="420" fill="#EAF7FF"/><ellipse cx="500" cy="790" rx="660" ry="380" fill="#F2EEFF"/><ellipse cx="1080" cy="650" rx="360" ry="310" fill="#FFF0EF"/><g transform="translate(390 150) rotate(-19 102.5 147.5)"><rect x="-8" y="-8" width="221" height="311" rx="20" fill="white"/><svg width="205" height="295" viewBox="0 0 630 880"><defs><linearGradient id="s1" x2="0" y2="1"><stop stop-color="#FFF2E7"/><stop offset="1" stop-color="#FFCED1"/></linearGradient><linearGradient id="r1" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s1)"/><circle cx="391" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#AA7BA9" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#AA7BA9"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#625582"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r1)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg></g><g transform="translate(640 110) rotate(11 132.5 190.0)"><rect x="-8" y="-8" width="281" height="396" rx="20" fill="white"/><svg width="265" height="380" viewBox="0 0 630 880"><defs><linearGradient id="s3" x2="0" y2="1"><stop stop-color="#F2EAFF"/><stop offset="1" stop-color="#DCC4FD"/></linearGradient><linearGradient id="r3" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s3)"/><circle cx="353" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#9784C7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#9784C7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#57578D"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r3)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg></g><g transform="translate(850 325) rotate(24 102.5 147.5)"><rect x="-8" y="-8" width="221" height="311" rx="20" fill="white"/><svg width="205" height="295" viewBox="0 0 630 880"><defs><linearGradient id="s2" x2="0" y2="1"><stop stop-color="#E5F6F0"/><stop offset="1" stop-color="#BDE7E5"/></linearGradient><linearGradient id="r2" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s2)"/><circle cx="372" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#65AAA7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#65AAA7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#326B71"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r2)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg></g><g stroke="#0F4C5C" stroke-opacity=".12" fill="none"><ellipse cx="740" cy="410" rx="420" ry="190" transform="rotate(-18 740 410)"/></g><path fill="#A78BFA" d="M350 416Q352 438 374 440Q352 442 350 464Q348 442 326 440Q348 438 350 416Z"/><path fill="#FF7B7B" d="M950 113Q952 138 977 140Q952 142 950 167Q948 142 923 140Q948 138 950 113Z"/><path fill="#38B6FF" d="M540 52Q542 68 558 70Q542 72 540 88Q538 72 522 70Q538 68 540 52Z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Original abstract landscape 1; not an actual game card</title><defs><linearGradient id="s0" x2="0" y2="1"><stop stop-color="#DFF3FF"/><stop offset="1" stop-color="#BDCAFB"/></linearGradient><linearGradient id="r0" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s0)"/><circle cx="410" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#486F95" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#486F95"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#0F4C5C"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r0)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Original abstract landscape 2; not an actual game card</title><defs><linearGradient id="s1" x2="0" y2="1"><stop stop-color="#FFF2E7"/><stop offset="1" stop-color="#FFCED1"/></linearGradient><linearGradient id="r1" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s1)"/><circle cx="391" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#AA7BA9" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#AA7BA9"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#625582"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r1)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Original abstract landscape 3; not an actual game card</title><defs><linearGradient id="s2" x2="0" y2="1"><stop stop-color="#E5F6F0"/><stop offset="1" stop-color="#BDE7E5"/></linearGradient><linearGradient id="r2" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s2)"/><circle cx="372" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#65AAA7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#65AAA7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#326B71"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r2)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Original abstract landscape 4; not an actual game card</title><defs><linearGradient id="s3" x2="0" y2="1"><stop stop-color="#F2EAFF"/><stop offset="1" stop-color="#DCC4FD"/></linearGradient><linearGradient id="r3" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s3)"/><circle cx="353" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#9784C7" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#9784C7"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#57578D"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r3)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="630" height="880" viewBox="0 0 630 880" role="img"><title>Original abstract landscape 5; not an actual game card</title><defs><linearGradient id="s4" x2="0" y2="1"><stop stop-color="#FFF3CF"/><stop offset="1" stop-color="#F4D7BE"/></linearGradient><linearGradient id="r4" x2="0" y2="1"><stop stop-color="white" stop-opacity=".85"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="630" height="880" fill="url(#s4)"/><circle cx="334" cy="215" r="115" fill="white" opacity=".65"/><path d="M0 450 138 218 318 472 470 310 630 482V880H0Z" fill="#B89599" opacity=".35"/><path d="M0 609 164 357 343 580 475 398 630 548V880H0Z" fill="#B89599"/><path d="M0 712 190 516 346 720 466 560 630 690V880H0Z" fill="#6E6883"/><path d="M254 880Q474 696 322 658T286 528Q383 610 383 645T360 715Q347 783 405 880Z" fill="url(#r4)"/><path d="M106 119h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M323 101h10m-5 -5v10" stroke="white" stroke-width="3"/><path d="M528 285h8m-4 -4v8" stroke="white" stroke-width="3"/><path d="M209 282h6m-3 -3v6" stroke="white" stroke-width="3"/><path d="M551 93h6m-3 -3v6" stroke="white" stroke-width="3"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="510" height="150" viewBox="0 0 510 150" role="img"><title>TCG-M horizontal lockup / color</title><defs><linearGradient id="back" x1="0" y1="0" x2=".2" y2="1"><stop stop-color="#FF7B7B"/><stop offset="1" stop-color="#A78BFA"/></linearGradient><linearGradient id="rim" x1="0" y1="0" x2=".3" y2="1"><stop stop-color="#FFC66E"/><stop offset=".5" stop-color="#FF7B7B"/><stop offset="1" stop-color="#A78BFA"/></linearGradient><linearGradient id="left" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#16819A"/><stop offset="1" stop-color="#0F4C5C"/></linearGradient><linearGradient id="right" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#136E88"/><stop offset="1" stop-color="#0F4C5C"/></linearGradient><linearGradient id="spark" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#A78BFA"/><stop offset=".5" stop-color="#FF7B7B"/><stop offset="1" stop-color="#FFC66E"/></linearGradient></defs><g transform="translate(0 0) scale(.55)"><path d="M31 67 Q22 64 25 78 L54 202 Q58 216 64 222 L45 69Z" fill="url(#back)"/><path d="M66 225 L55 68 Q54 53 66 49 L161 16 Q172 12 173 25 L173 31 L72 66Z" fill="url(#rim)"/><path d="M78 72 L181 36 Q192 32 192 45 L192 139 L151 174Z" fill="#38B6FF"/><path d="M204 53 L215 57 Q222 60 222 70 L222 109 L203 126Z" fill="url(#right)"/><path d="M76 87 L143 146 Q153 155 153 168 L153 188 Q153 197 145 191 L116 168 L116 219 L77 233 Q69 236 70 226Z" fill="url(#left)"/><path d="M167 167 Q168 155 177 146 L231 101 Q240 95 241 107 L241 203 L204 218 L204 168 L175 191 Q167 197 167 186Z" fill="url(#right)"/><path d="M161 167 C163 194 169 202 188 209 C169 214 164 221 161 244 C157 220 151 215 134 209 C152 204 157 195 161 167Z" fill="url(#spark)"/></g><g transform="translate(164 44) scale(.92)" fill="#0F4C5C"><path d="M0 0H63V15H40V73H23V15H0Z"/><path d="M138 5L132 22C124 17 119 15 112 15C95 15 86 24 86 37C86 51 96 59 111 59C120 59 126 56 133 51L140 66C131 72 121 76 110 76C84 76 67 60 67 37C67 15 84-2 111-2C122-2 131 0 138 5Z"/><path d="M215 7L206 21C198 16 192 14 183 14C169 14 159 23 159 37C159 50 169 60 183 60C189 60 194 59 199 56V46H181V32H216V65C208 72 195 76 182 76C158 76 142 60 142 37C142 14 159-2 183-2C196-2 207 1 215 7Z"/><path d="M228 31H258V45H228Z"/><path d="M271 0H288L311 32L334 0H351V73H334V28L311 60L288 28V73H271Z"/></g></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="264" height="264" viewBox="0 0 264 264" role="img"><title>TCG-M Layered Prism symbol / color</title><defs><linearGradient id="back" x1="0" y1="0" x2=".2" y2="1"><stop stop-color="#FF7B7B"/><stop offset="1" stop-color="#A78BFA"/></linearGradient><linearGradient id="rim" x1="0" y1="0" x2=".3" y2="1"><stop stop-color="#FFC66E"/><stop offset=".5" stop-color="#FF7B7B"/><stop offset="1" stop-color="#A78BFA"/></linearGradient><linearGradient id="left" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#16819A"/><stop offset="1" stop-color="#0F4C5C"/></linearGradient><linearGradient id="right" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#136E88"/><stop offset="1" stop-color="#0F4C5C"/></linearGradient><linearGradient id="spark" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#A78BFA"/><stop offset=".5" stop-color="#FF7B7B"/><stop offset="1" stop-color="#FFC66E"/></linearGradient></defs><path d="M31 67 Q22 64 25 78 L54 202 Q58 216 64 222 L45 69Z" fill="url(#back)"/><path d="M66 225 L55 68 Q54 53 66 49 L161 16 Q172 12 173 25 L173 31 L72 66Z" fill="url(#rim)"/><path d="M78 72 L181 36 Q192 32 192 45 L192 139 L151 174Z" fill="#38B6FF"/><path d="M204 53 L215 57 Q222 60 222 70 L222 109 L203 126Z" fill="url(#right)"/><path d="M76 87 L143 146 Q153 155 153 168 L153 188 Q153 197 145 191 L116 168 L116 219 L77 233 Q69 236 70 226Z" fill="url(#left)"/><path d="M167 167 Q168 155 177 146 L231 101 Q240 95 241 107 L241 203 L204 218 L204 168 L175 191 Q167 197 167 186Z" fill="url(#right)"/><path d="M161 167 C163 194 169 202 188 209 C169 214 164 221 161 244 C157 220 151 215 134 209 C152 204 157 195 161 167Z" fill="url(#spark)"/></svg>
@@ -1,81 +0,0 @@
1
- import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
2
- import { Flex, PageContainer } from "@godxjp/ui/layout";
3
- import { BarChart } from "@godxjp/ui/charts";
4
-
5
- /**
6
- * 横棒グラフの分類軸と、カードの見出しとの重複 — gh#409 · 1 と 2。
7
- *
8
- * 監理団体の実習実施者(受入企業)名は「株式会社」を含む 8〜10 文字の全角で、幅は 100〜125px に
9
- * なります。分類軸の幅を固定にすると、名前の**先頭**、つまり識別に必要な部分から切り落とされます。
10
- * BarChart は実際に描画される字形で各目盛りを実測し、いちばん広い目盛りに合わせて軸を確保します。
11
- * 上限はトークン `--chart-category-axis-max-fraction` が持ち、これを超える名前だけが**末尾**で
12
- * 省略され、全文は目盛りの `<title>` と図の代替テキストに残ります。
13
- *
14
- * 下段のカードは `showCaption={false}`。`CardTitle` が見出しを担うので、キャプションは
15
- * `sr-only` として DOM に残り、`role="img"` の名前は失われません。
16
- */
17
-
18
- /** 実習実施者ごとの受入人数。企業名は 8〜10 文字の全角で、固定幅の軸では先頭が消えていました。 */
19
- const acceptances = [
20
- { company: "株式会社山田製作所", trainees: 42 },
21
- { company: "佐藤食品株式会社", trainees: 35 },
22
- { company: "株式会社中村建設", trainees: 28 },
23
- { company: "東海精密工業株式会社", trainees: 24 },
24
- { company: "みどり農産株式会社", trainees: 18 },
25
- { company: "大和金属加工株式会社", trainees: 12 },
26
- ];
27
-
28
- export default function Demo() {
29
- return (
30
- <PageContainer
31
- title="CJK category axis"
32
- subtitle="横棒グラフの分類軸を実測で確保し、見出しの重複をなくす"
33
- >
34
- <Flex direction="col" gap="lg">
35
- <Card>
36
- <CardHeader>
37
- <CardTitle level={2}>横棒 BarChart · 分類軸は目盛りの実測で決まる</CardTitle>
38
- <CardDescription>
39
- いちばん広い目盛りに合わせて軸幅を確保します。キャプションは既定どおり表示。
40
- </CardDescription>
41
- </CardHeader>
42
- <CardContent>
43
- <BarChart
44
- id="cjk-axis-chart"
45
- label="実習実施者別 受入人数"
46
- data={acceptances}
47
- categoryKey="company"
48
- series={[{ dataKey: "trainees", label: "受入人数" }]}
49
- showLegend={false}
50
- size="md"
51
- horizontal
52
- />
53
- </CardContent>
54
- </Card>
55
-
56
- <Card>
57
- <CardHeader>
58
- <CardTitle level={2}>実習実施者別 受入人数</CardTitle>
59
- <CardDescription>
60
- `showCaption={"{false}"}` — 見出しは CardTitle が担い、キャプションは sr-only
61
- として残るのでアクセシブルな名前は保たれます。
62
- </CardDescription>
63
- </CardHeader>
64
- <CardContent>
65
- <BarChart
66
- id="cjk-axis-chart-no-caption"
67
- label="実習実施者別 受入人数"
68
- data={acceptances}
69
- categoryKey="company"
70
- series={[{ dataKey: "trainees", label: "受入人数" }]}
71
- showLegend={false}
72
- showCaption={false}
73
- size="md"
74
- horizontal
75
- />
76
- </CardContent>
77
- </Card>
78
- </Flex>
79
- </PageContainer>
80
- );
81
- }