@godxjp/ui 31.31.8 → 32.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -121
- package/agent/START-HERE.md +10 -10
- package/agent/components/Accordion.json +2 -2
- package/agent/components/AccountChip.json +1 -1
- package/agent/components/Actions.json +1 -1
- package/agent/components/Activity.json +2 -2
- package/agent/components/Affix.json +1 -1
- package/agent/components/Alert.json +22 -6
- package/agent/components/AlertDialog.json +8 -1
- package/agent/components/Anchor.json +4 -3
- package/agent/components/AppLauncher.json +2 -2
- package/agent/components/AppProvider.json +19 -11
- package/agent/components/AppSettingPicker.json +18 -2
- package/agent/components/AppShell.json +4 -5
- package/agent/components/AreaChart.json +0 -1
- package/agent/components/AspectRatio.json +2 -2
- package/agent/components/Attachments.json +3 -3
- package/agent/components/AuthAccountSummary.json +1 -1
- package/agent/components/AuthDivider.json +1 -1
- package/agent/components/AuthExpiryProvider.json +0 -1
- package/agent/components/AuthFooter.json +2 -2
- package/agent/components/AuthIdentity.json +3 -3
- package/agent/components/AuthStack.json +1 -1
- package/agent/components/Avatar.json +2 -12
- package/agent/components/Badge.json +1 -1
- package/agent/components/BarChart.json +0 -1
- package/agent/components/BranchScopePicker.json +1 -1
- package/agent/components/Breadcrumb.json +1 -1
- package/agent/components/Button.json +3 -3
- package/agent/components/Calendar.json +1 -1
- package/agent/components/Card.json +2 -2
- package/agent/components/CardBar.json +0 -1
- package/agent/components/CardContent.json +0 -1
- package/agent/components/Carousel.json +4 -3
- package/agent/components/Cascader.json +1 -1
- package/agent/components/CenteredShell.json +78 -17
- package/agent/components/ChatBubble.json +3 -3
- package/agent/components/ChatBubbleList.json +3 -3
- package/agent/components/ChatComposer.json +3 -3
- package/agent/components/ChatSuggestion.json +3 -3
- package/agent/components/Checkbox.json +1 -1
- package/agent/components/CheckboxGroup.json +0 -1
- package/agent/components/CodeBlock.json +1 -1
- package/agent/components/Collapsible.json +4 -4
- package/agent/components/ColorPicker.json +1 -1
- package/agent/components/Command.json +5 -5
- package/agent/components/CommandPalette.json +1 -1
- package/agent/components/CompactBarTrend.json +1 -1
- package/agent/components/Conversations.json +3 -3
- package/agent/components/CredentialReveal.json +1 -1
- package/agent/components/DataState.json +2 -2
- package/agent/components/DataTable.json +1 -1
- package/agent/components/DatePicker.json +1 -1
- package/agent/components/Descriptions.json +1 -1
- package/agent/components/Dialog.json +2 -2
- package/agent/components/DraggablePanel.json +5 -4
- package/agent/components/DropdownMenu.json +1 -1
- package/agent/components/EmojiPicker.json +3 -2
- package/agent/components/EmptyState.json +1 -1
- package/agent/components/ErrorSurface.json +3 -3
- package/agent/components/FeatureList.json +1 -1
- package/agent/components/Field.json +0 -1
- package/agent/components/Flex.json +34 -4
- package/agent/components/FloatButton.json +6 -5
- package/agent/components/Form.json +1 -1
- package/agent/components/FormErrors.json +0 -1
- package/agent/components/FormField.json +6 -6
- package/agent/components/FormFieldArray.json +0 -1
- package/agent/components/FormFieldControl.json +0 -1
- package/agent/components/FormRoot.json +1 -1
- package/agent/components/Heading.json +3 -0
- package/agent/components/Icon.json +1 -1
- package/agent/components/Image.json +7 -4
- package/agent/components/InfiniteQueryState.json +1 -1
- package/agent/components/Input.json +1 -1
- package/agent/components/InputOTP.json +2 -2
- package/agent/components/Label.json +3 -3
- package/agent/components/LegalDocumentShell.json +5 -4
- package/agent/components/Legend.json +1 -1
- package/agent/components/LineChart.json +0 -1
- package/agent/components/Link.json +0 -1
- package/agent/components/ListRow.json +1 -1
- package/agent/components/Logo.json +5 -4
- package/agent/components/Marquee.json +4 -3
- package/agent/components/Masonry.json +4 -3
- package/agent/components/MasterDetail.json +1 -1
- package/agent/components/MegaMenu.json +4 -3
- package/agent/components/MobileShell.json +4 -4
- package/agent/components/NavList.json +1 -1
- package/agent/components/NumberInput.json +1 -1
- package/agent/components/OrgChart.json +4 -3
- package/agent/components/OrgSwitcher.json +1 -1
- package/agent/components/OverlayPortalProvider.json +0 -1
- package/agent/components/PageContainer.json +3 -3
- package/agent/components/PageCover.json +3 -2
- package/agent/components/Pagination.json +1 -1
- package/agent/components/PasswordInput.json +1 -1
- package/agent/components/PasswordStrength.json +1 -1
- package/agent/components/PermissionMatrix.json +1 -1
- package/agent/components/PieChart.json +0 -1
- package/agent/components/Popover.json +31 -6
- package/agent/components/PrefetchLink.json +1 -1
- package/agent/components/Progress.json +1 -1
- package/agent/components/Prose.json +1 -1
- package/agent/components/QrCode.json +1 -1
- package/agent/components/Radio.json +0 -1
- package/agent/components/RadioGroup.json +2 -2
- package/agent/components/RangeTimeline.json +2 -1
- package/agent/components/Rating.json +1 -1
- package/agent/components/RecordPicker.json +1 -1
- package/agent/components/ResizablePanel.json +1 -1
- package/agent/components/ResponsiveGrid.json +2 -2
- package/agent/components/Reveal.json +3 -3
- package/agent/components/ScrollArea.json +2 -2
- package/agent/components/SearchInput.json +1 -1
- package/agent/components/Segmented.json +1 -1
- package/agent/components/Select.json +7 -5
- package/agent/components/Separator.json +1 -1
- package/agent/components/ServiceCatalogCta.json +0 -1
- package/agent/components/ServiceLauncherCard.json +1 -1
- package/agent/components/ServiceRolePanel.json +1 -1
- package/agent/components/Sheet.json +5 -5
- package/agent/components/Sidebar.json +1 -1
- package/agent/components/Skeleton.json +26 -12
- package/agent/components/Slider.json +2 -2
- package/agent/components/SortableList.json +3 -2
- package/agent/components/SplitPane.json +1 -1
- package/agent/components/StatCard.json +1 -1
- package/agent/components/Steps.json +1 -1
- package/agent/components/Swatch.json +1 -1
- package/agent/components/Switch.json +1 -1
- package/agent/components/Table.json +1 -1
- package/agent/components/Tabs.json +3 -3
- package/agent/components/Text.json +5 -1
- package/agent/components/TextDiff.json +5 -4
- package/agent/components/Textarea.json +1 -1
- package/agent/components/ThemeScope.json +1 -1
- package/agent/components/ThoughtChain.json +3 -3
- package/agent/components/TimePicker.json +1 -1
- package/agent/components/Timeline.json +1 -1
- package/agent/components/TimelineGrid.json +5 -4
- package/agent/components/Toaster.json +0 -1
- package/agent/components/Toggle.json +3 -3
- package/agent/components/ToggleGroup.json +1 -1
- package/agent/components/Toolbar.json +10 -3
- package/agent/components/Tooltip.json +9 -9
- package/agent/components/Topbar.json +1 -1
- package/agent/components/TopbarItem.json +1 -1
- package/agent/components/Transfer.json +2 -2
- package/agent/components/Tree.json +1 -1
- package/agent/components/TreeSelect.json +1 -1
- package/agent/components/TwoFactorSetup.json +1 -1
- package/agent/components/Upload.json +1 -1
- package/agent/components/UploadCropDialog.json +1 -1
- package/agent/components/Welcome.json +3 -3
- package/agent/components/formatDate.json +2 -2
- package/agent/components/inertiaUpload.json +0 -1
- package/agent/components/useZodForm.json +0 -1
- package/agent/components-index.json +80 -154
- package/agent/components.json +541 -1737
- package/agent/index.json +10 -10
- package/agent/llms.txt +9 -9
- package/agent/patterns/account-recovery-settings.json +1 -1
- package/agent/patterns/auth-recovery-panels.json +2 -2
- package/agent/patterns/error-pages.json +1 -1
- package/agent/patterns/pricing-plans.json +17 -0
- package/agent/patterns-index.json +17 -1
- package/agent/patterns.json +21 -4
- package/agent/rules.json +30 -65
- package/agent/tokens.json +27 -57
- package/agent/vocabulary.json +3 -3
- package/dist/app/app-provider.d.ts +5 -3
- package/dist/app/app-provider.js +47 -12
- package/dist/app/date-format-labels.d.ts +3 -1
- package/dist/app/date-format-labels.js +2 -4
- package/dist/app/date-formats.d.ts +21 -2
- package/dist/app/date-formats.js +51 -2
- package/dist/app/index.d.ts +3 -1
- package/dist/app/index.js +5 -0
- package/dist/app/locales.d.ts +58 -3
- package/dist/app/locales.js +134 -8
- package/dist/app/preset.d.ts +25 -0
- package/dist/app/preset.js +10 -0
- package/dist/app/request-headers.d.ts +3 -3
- package/dist/app/request-headers.js +19 -10
- package/dist/app/settings-scope.d.ts +54 -0
- package/dist/app/settings-scope.js +46 -0
- package/dist/app/tenant-theme.js +8 -3
- package/dist/app/time-format-labels.d.ts +4 -1
- package/dist/app/time-format-labels.js +7 -1
- package/dist/app/types.d.ts +10 -2
- package/dist/app/use-formatting.d.ts +1 -1
- package/dist/components/admin/index.d.ts +1 -1
- package/dist/components/admin/index.js +1 -1
- package/dist/components/data-display/accordion.d.ts +51 -1
- package/dist/components/data-display/accordion.js +247 -1
- package/dist/components/data-display/avatar.d.ts +16 -1
- package/dist/components/data-display/avatar.js +109 -1
- package/dist/components/data-display/credential-reveal.d.ts +9 -2
- package/dist/components/data-display/credential-reveal.js +156 -1
- package/dist/components/data-display/image.js +5 -3
- package/dist/components/data-display/index.d.ts +0 -21
- package/dist/components/data-display/index.js +1 -43
- package/dist/components/data-display/popover.d.ts +15 -3
- package/dist/components/data-display/popover.js +168 -2
- package/dist/components/data-entry/branch-scope-picker.d.ts +1 -1
- package/dist/components/data-entry/index.d.ts +5 -12
- package/dist/components/data-entry/index.js +11 -12
- package/dist/components/data-entry/input-otp.d.ts +48 -2
- package/dist/components/data-entry/input-otp.js +94 -1
- package/dist/components/data-entry/number-input.d.ts +1 -1
- package/dist/components/data-entry/password-input.d.ts +38 -2
- package/dist/components/data-entry/password-input.js +56 -1
- package/dist/components/data-entry/rating.d.ts +38 -2
- package/dist/components/data-entry/rating.js +127 -1
- package/dist/components/data-entry/segmented.d.ts +94 -2
- package/dist/components/data-entry/segmented.js +104 -1
- package/dist/components/{ui/tag-input.d.ts → data-entry/select-tags-inline.d.ts} +7 -4
- package/dist/components/{ui/tag-input.js → data-entry/select-tags-inline.js} +4 -4
- package/dist/components/data-entry/select.js +4 -0
- package/dist/components/data-entry/toggle-group.d.ts +108 -2
- package/dist/components/data-entry/toggle-group.js +189 -1
- package/dist/components/data-entry/toggle.d.ts +86 -2
- package/dist/components/data-entry/toggle.js +153 -2
- package/dist/components/feedback/alert.d.ts +5 -3
- package/dist/components/feedback/alert.js +14 -2
- package/dist/components/feedback/index.d.ts +2 -6
- package/dist/components/feedback/index.js +1 -13
- package/dist/components/feedback/skeleton.d.ts +4 -17
- package/dist/components/feedback/skeleton.js +3 -40
- package/dist/components/general/index.d.ts +2 -4
- package/dist/components/general/index.js +1 -6
- package/dist/components/general/typography.d.ts +4 -58
- package/dist/components/general/typography.js +7 -141
- package/dist/components/layout/aspect-ratio.d.ts +24 -1
- package/dist/components/layout/aspect-ratio.js +18 -1
- package/dist/components/layout/auth-divider.js +1 -1
- package/dist/components/layout/auth-identity.js +6 -2
- package/dist/components/layout/centered-shell.d.ts +13 -8
- package/dist/components/layout/centered-shell.js +43 -1
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +73 -1
- package/dist/components/layout/index.d.ts +1 -13
- package/dist/components/layout/index.js +0 -12
- package/dist/components/layout/separator.d.ts +25 -2
- package/dist/components/layout/separator.js +71 -1
- package/dist/components/navigation/{app-setting-toggle.d.ts → app-setting-cycle.d.ts} +3 -4
- package/dist/components/navigation/{app-setting-toggle.js → app-setting-cycle.js} +3 -3
- package/dist/components/navigation/app-setting-picker.d.ts +6 -2
- package/dist/components/navigation/app-setting-picker.js +20 -2
- package/dist/components/navigation/index.d.ts +3 -11
- package/dist/components/navigation/index.js +1 -9
- package/dist/components/navigation/tabs.js +1 -1
- package/dist/components/ui/carousel.d.ts +1 -1
- package/dist/components/ui/carousel.js +1 -1
- package/dist/components/ui/index.d.ts +11 -5
- package/dist/components/ui/index.js +5 -5
- package/dist/contracts/measurement.json +2 -2
- package/dist/email/brand-mark.d.ts +3 -2
- package/dist/email/brand-mark.js +1 -1
- package/dist/email/tokens.generated.d.ts +6 -6
- package/dist/email/tokens.generated.js +6 -6
- package/dist/i18n/locale-tags.d.ts +25 -0
- package/dist/i18n/locale-tags.js +59 -0
- package/dist/i18n/translate.d.ts +20 -3
- package/dist/i18n/translate.js +25 -14
- package/dist/i18n/use-translation.d.ts +3 -3
- package/dist/i18n/use-translation.js +4 -2
- package/dist/{components/navigation → lab}/anchor.d.ts +2 -2
- package/dist/{components/navigation → lab}/anchor.js +5 -5
- package/dist/{components/data-display → lab}/carousel.js +2 -2
- package/dist/{components/layout → lab}/draggable-panel.d.ts +8 -8
- package/dist/{components/layout → lab}/draggable-panel.js +2 -2
- package/dist/{components/data-entry → lab}/emoji-picker.d.ts +2 -2
- package/dist/{components/data-entry → lab}/emoji-picker.js +6 -6
- package/dist/{components/general → lab}/float-button.d.ts +8 -8
- package/dist/{components/general → lab}/float-button.js +7 -7
- package/dist/lab/index.d.ts +39 -0
- package/dist/lab/index.js +48 -0
- package/dist/{components/layout → lab}/legal-document-shell.d.ts +2 -2
- package/dist/{components/layout → lab}/legal-document-shell.js +4 -4
- package/dist/{components/data-display → lab}/marquee.d.ts +5 -5
- package/dist/{components/data-display → lab}/marquee.js +5 -5
- package/dist/{components/layout → lab}/masonry.d.ts +2 -2
- package/dist/{components/layout → lab}/masonry.js +3 -3
- package/dist/{components/navigation → lab}/mega-menu.d.ts +4 -4
- package/dist/{components/navigation → lab}/mega-menu.js +2 -2
- package/dist/{components/data-display → lab}/org-chart.d.ts +2 -2
- package/dist/{components/data-display → lab}/org-chart.js +4 -4
- package/dist/{components/layout → lab}/page-cover.d.ts +2 -2
- package/dist/{components/layout → lab}/page-cover.js +2 -2
- package/dist/{components/data-display → lab}/range-timeline.d.ts +1 -1
- package/dist/{components/data-display → lab}/range-timeline.js +6 -6
- package/dist/{components/data-entry → lab}/sortable-list.d.ts +2 -2
- package/dist/{components/data-entry → lab}/sortable-list.js +3 -3
- package/dist/{components/data-display → lab}/text-diff.d.ts +3 -3
- package/dist/{components/data-display → lab}/text-diff.js +4 -4
- package/dist/{components/data-display → lab}/timeline-grid.d.ts +2 -2
- package/dist/{components/data-display → lab}/timeline-grid.js +1 -1
- package/dist/lib/control-styles.js +1 -1
- package/dist/lib/datetime/format.js +20 -6
- package/dist/lib/datetime/sync.d.ts +6 -2
- package/dist/lib/datetime/sync.js +14 -18
- package/dist/lib/platform.d.ts +1 -1
- package/dist/props/components/app.prop.d.ts +28 -13
- package/dist/props/components/data-display.prop.d.ts +19 -29
- package/dist/props/components/feedback.prop.d.ts +15 -44
- package/dist/props/components/general.prop.d.ts +2 -64
- package/dist/props/components/index.d.ts +9 -1
- package/dist/props/components/layout.prop.d.ts +41 -57
- package/dist/props/registry.d.ts +48 -101
- package/dist/props/registry.js +45 -129
- package/dist/props/vocabulary/index.d.ts +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +3 -12
- package/dist/styles/alert-layout.css +0 -29
- package/dist/styles/data-display-layout.css +14 -22
- package/dist/styles/fonts/OFL.txt +93 -0
- package/dist/styles/form-layout.css +4 -0
- package/dist/styles/index.css +0 -2
- package/dist/styles/layers.json +44 -179
- package/dist/styles/text-layout.css +0 -15
- package/dist/styles.css +2 -0
- package/dist/themes/godx.css +43 -0
- package/dist/themes/godx.d.ts +13 -0
- package/dist/themes/godx.js +12 -0
- package/dist/tokens/components/feedback.css +0 -6
- package/dist/tokens/derived.css +23 -22
- package/dist/tokens/foundation.css +4 -6
- package/docs/COMPOSITION-VS-COMPONENT.md +58 -33
- package/docs/CONSUMER-RULES.md +1 -1
- package/docs/CUSTOMER-THEMING.md +17 -53
- package/docs/migrations/v32.md +98 -0
- package/package.json +58 -19
- package/scripts/_agent-setup.mjs +54 -3
- package/scripts/brand-accent.generated.mjs +15 -2
- package/scripts/cli.mjs +36 -11
- package/scripts/codemod.mjs +522 -0
- package/scripts/consumer-rule.md +21 -43
- package/scripts/postinstall.mjs +10 -47
- package/scripts/prune-css.mjs +1 -1
- package/scripts/ui-audit.mjs +5 -2
- package/dist/components/data-display/chat-bubble.d.ts +0 -30
- package/dist/components/data-display/chat-bubble.js +0 -229
- package/dist/components/data-display/hover-card.d.ts +0 -1
- package/dist/components/data-display/hover-card.js +0 -7
- package/dist/components/data-display/thought-chain.d.ts +0 -42
- package/dist/components/data-display/thought-chain.js +0 -177
- package/dist/components/data-display/thumbnail.d.ts +0 -37
- package/dist/components/data-display/thumbnail.js +0 -20
- package/dist/components/data-display/welcome.d.ts +0 -26
- package/dist/components/data-display/welcome.js +0 -37
- package/dist/components/data-entry/attachments.d.ts +0 -19
- package/dist/components/data-entry/attachments.js +0 -366
- package/dist/components/data-entry/chat-composer.d.ts +0 -51
- package/dist/components/data-entry/chat-composer.js +0 -200
- package/dist/components/data-entry/chat-suggestion.d.ts +0 -28
- package/dist/components/data-entry/chat-suggestion.js +0 -309
- package/dist/components/data-entry/tag-input.d.ts +0 -2
- package/dist/components/data-entry/tag-input.js +0 -5
- package/dist/components/feedback/banner.d.ts +0 -21
- package/dist/components/feedback/banner.js +0 -19
- package/dist/components/feedback/callout.d.ts +0 -23
- package/dist/components/feedback/callout.js +0 -42
- package/dist/components/layout/auth-shell.d.ts +0 -10
- package/dist/components/layout/auth-shell.js +0 -42
- package/dist/components/layout/space-compact.d.ts +0 -65
- package/dist/components/layout/space-compact.js +0 -52
- package/dist/components/navigation/conversations.d.ts +0 -39
- package/dist/components/navigation/conversations.js +0 -371
- package/dist/components/ui/accordion.d.ts +0 -51
- package/dist/components/ui/accordion.js +0 -254
- package/dist/components/ui/aspect-ratio.d.ts +0 -24
- package/dist/components/ui/aspect-ratio.js +0 -21
- package/dist/components/ui/avatar.d.ts +0 -16
- package/dist/components/ui/avatar.js +0 -115
- package/dist/components/ui/credential-reveal.d.ts +0 -9
- package/dist/components/ui/credential-reveal.js +0 -160
- package/dist/components/ui/hover-card.d.ts +0 -47
- package/dist/components/ui/hover-card.js +0 -205
- package/dist/components/ui/input-otp.d.ts +0 -48
- package/dist/components/ui/input-otp.js +0 -101
- package/dist/components/ui/password-input.d.ts +0 -38
- package/dist/components/ui/password-input.js +0 -60
- package/dist/components/ui/rating.d.ts +0 -38
- package/dist/components/ui/rating.js +0 -131
- package/dist/components/ui/segmented.d.ts +0 -94
- package/dist/components/ui/segmented.js +0 -108
- package/dist/components/ui/separator.d.ts +0 -25
- package/dist/components/ui/separator.js +0 -74
- package/dist/components/ui/toggle-group.d.ts +0 -108
- package/dist/components/ui/toggle-group.js +0 -194
- package/dist/components/ui/toggle.d.ts +0 -86
- package/dist/components/ui/toggle.js +0 -156
- package/docs/CANONICAL-CONTRACTS.md +0 -206
- package/docs/COMPONENTS.md +0 -163
- package/docs/DATETIME.md +0 -78
- package/docs/DEVELOPMENT.md +0 -269
- package/docs/FRAME-A11Y-CI.md +0 -287
- package/docs/FRAME-COVERAGE-LEDGER.md +0 -123
- package/docs/FRAME-COVERAGE-REPORT.md +0 -228
- package/docs/FRAME-COVERAGE-STANDARD.md +0 -65
- package/docs/FRAME-COVERAGE.md +0 -29
- package/docs/MEASUREMENT-CONTRACT.md +0 -109
- package/docs/PROPS-REGISTRY.md +0 -61
- package/docs/PROPS-VOCABULARY.md +0 -100
- package/docs/REGISTRY.md +0 -70
- package/docs/TESTING.md +0 -107
- package/docs/THEME-API-COVERAGE.md +0 -538
- package/docs/WHAT-BELONGS-HERE.md +0 -179
- package/docs/asset-modules.d.ts +0 -53
- package/docs/assets/cover-terrain.svg +0 -6
- package/docs/assets/portrait-amber.svg +0 -5
- package/docs/assets/portrait-clay.svg +0 -5
- package/docs/assets/portrait-indigo.svg +0 -5
- package/docs/assets/portrait-iris.svg +0 -5
- package/docs/assets/portrait-moss.svg +0 -5
- package/docs/assets/portrait-plum.svg +0 -5
- package/docs/assets/portrait-slate.svg +0 -5
- package/docs/assets/service-mark-rose.svg +0 -6
- package/docs/assets/service-mark-teal.svg +0 -5
- package/docs/assets/shot-landscape.svg +0 -12
- package/docs/assets/shot-portrait.svg +0 -10
- package/docs/assets/tcgm/card-1.svg +0 -1
- package/docs/assets/tcgm/card-2.svg +0 -1
- package/docs/assets/tcgm/card-3.svg +0 -1
- package/docs/assets/tcgm/card-4.svg +0 -1
- package/docs/assets/tcgm/card-5.svg +0 -1
- package/docs/assets/tcgm/card-6.svg +0 -1
- package/docs/assets/tcgm/hero-prism.svg +0 -1
- package/docs/assets/tcgm/scene-1.svg +0 -1
- package/docs/assets/tcgm/scene-2.svg +0 -1
- package/docs/assets/tcgm/scene-3.svg +0 -1
- package/docs/assets/tcgm/scene-4.svg +0 -1
- package/docs/assets/tcgm/scene-5.svg +0 -1
- package/docs/assets/tcgm/tcgm-lockup-color.svg +0 -1
- package/docs/assets/tcgm/tcgm-symbol-color.svg +0 -1
- package/docs/charts/cjk-category-axis.tsx +0 -81
- package/docs/charts/compact-bar-trend.tsx +0 -327
- package/docs/charts/size-tiers.tsx +0 -192
- package/docs/data-display/accordion.tsx +0 -99
- package/docs/data-display/avatar.tsx +0 -502
- package/docs/data-display/badge.tsx +0 -335
- package/docs/data-display/card/examples/detail-panel.tsx +0 -106
- package/docs/data-display/card/examples/tab-list.tsx +0 -97
- package/docs/data-display/card/index.md +0 -3
- package/docs/data-display/card/index.tsx +0 -390
- package/docs/data-display/carousel.tsx +0 -160
- package/docs/data-display/charts.tsx +0 -278
- package/docs/data-display/chat-bubble.tsx +0 -397
- package/docs/data-display/code-block.tsx +0 -188
- package/docs/data-display/collapsible.tsx +0 -162
- package/docs/data-display/credential-reveal.tsx +0 -148
- package/docs/data-display/data-table/examples/antd-parity.tsx +0 -257
- package/docs/data-display/data-table/examples/approval-queue.tsx +0 -212
- package/docs/data-display/data-table/examples/grid-features.tsx +0 -158
- package/docs/data-display/data-table/examples/list-page.tsx +0 -175
- package/docs/data-display/data-table/examples/selectable-inbox.tsx +0 -113
- package/docs/data-display/data-table/examples/server-paged.tsx +0 -179
- package/docs/data-display/data-table/examples/striped-list.tsx +0 -173
- package/docs/data-display/data-table/index.md +0 -9
- package/docs/data-display/data-table/index.tsx +0 -407
- package/docs/data-display/descriptions.tsx +0 -263
- package/docs/data-display/empty-state.tsx +0 -164
- package/docs/data-display/feature-list.tsx +0 -159
- package/docs/data-display/hover-card.tsx +0 -181
- package/docs/data-display/image.tsx +0 -170
- package/docs/data-display/legend.tsx +0 -158
- package/docs/data-display/list-row.tsx +0 -441
- package/docs/data-display/markdown.tsx +0 -86
- package/docs/data-display/marquee.tsx +0 -254
- package/docs/data-display/org-chart.tsx +0 -165
- package/docs/data-display/permission-matrix.tsx +0 -188
- package/docs/data-display/popover-touch.tsx +0 -27
- package/docs/data-display/popover.tsx +0 -331
- package/docs/data-display/progress.tsx +0 -162
- package/docs/data-display/prose.tsx +0 -169
- package/docs/data-display/qr-code.tsx +0 -68
- package/docs/data-display/scroll-area.tsx +0 -420
- package/docs/data-display/service-launcher-card.tsx +0 -445
- package/docs/data-display/stat-card.tsx +0 -354
- package/docs/data-display/swatch.tsx +0 -107
- package/docs/data-display/table.tsx +0 -362
- package/docs/data-display/text-diff.tsx +0 -89
- package/docs/data-display/thought-chain.tsx +0 -176
- package/docs/data-display/thumbnail.tsx +0 -128
- package/docs/data-display/timeline-grid.tsx +0 -119
- package/docs/data-display/timeline.tsx +0 -671
- package/docs/data-display/touch-actions.tsx +0 -36
- package/docs/data-display/tree.tsx +0 -724
- package/docs/data-display/welcome.tsx +0 -115
- package/docs/data-entry/attachments.tsx +0 -160
- package/docs/data-entry/block-editor.tsx +0 -105
- package/docs/data-entry/branch-scope-picker.tsx +0 -128
- package/docs/data-entry/calendar.tsx +0 -226
- package/docs/data-entry/cascader.tsx +0 -380
- package/docs/data-entry/chat-composer.tsx +0 -619
- package/docs/data-entry/chat-suggestion.tsx +0 -301
- package/docs/data-entry/checkbox.tsx +0 -256
- package/docs/data-entry/color-picker.tsx +0 -189
- package/docs/data-entry/command-palette.tsx +0 -179
- package/docs/data-entry/command.tsx +0 -341
- package/docs/data-entry/country-picker-recipe.tsx +0 -175
- package/docs/data-entry/date-picker.tsx +0 -452
- package/docs/data-entry/emoji-picker.tsx +0 -35
- package/docs/data-entry/form/examples/employee-settings.tsx +0 -267
- package/docs/data-entry/form/examples/invoice-form.tsx +0 -387
- package/docs/data-entry/form-dynamic-fields.tsx +0 -199
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +0 -242
- package/docs/data-entry/form-field/examples/create-form.tsx +0 -107
- package/docs/data-entry/form-field/index.md +0 -8
- package/docs/data-entry/form-field/index.tsx +0 -337
- package/docs/data-entry/form-inertia.tsx +0 -80
- package/docs/data-entry/form-root.tsx +0 -112
- package/docs/data-entry/form.tsx +0 -1498
- package/docs/data-entry/input-otp.tsx +0 -258
- package/docs/data-entry/input.tsx +0 -796
- package/docs/data-entry/label.tsx +0 -102
- package/docs/data-entry/markdown-editor.tsx +0 -69
- package/docs/data-entry/number-input.tsx +0 -279
- package/docs/data-entry/password-input.tsx +0 -102
- package/docs/data-entry/password-strength.tsx +0 -99
- package/docs/data-entry/radio-group.tsx +0 -316
- package/docs/data-entry/rating.tsx +0 -91
- package/docs/data-entry/record-picker.tsx +0 -209
- package/docs/data-entry/search-input.tsx +0 -121
- package/docs/data-entry/segmented-in-filter-row.tsx +0 -60
- package/docs/data-entry/segmented.tsx +0 -300
- package/docs/data-entry/select-async-contracts.tsx +0 -108
- package/docs/data-entry/select-matrix.tsx +0 -209
- package/docs/data-entry/select.tsx +0 -547
- package/docs/data-entry/slider.tsx +0 -212
- package/docs/data-entry/sortable-list.tsx +0 -76
- package/docs/data-entry/switch.tsx +0 -314
- package/docs/data-entry/tag-input.tsx +0 -145
- package/docs/data-entry/textarea.tsx +0 -249
- package/docs/data-entry/time-picker.tsx +0 -187
- package/docs/data-entry/time-range-picker.tsx +0 -55
- package/docs/data-entry/toggle-count.tsx +0 -348
- package/docs/data-entry/toggle-group.tsx +0 -438
- package/docs/data-entry/toggle.tsx +0 -217
- package/docs/data-entry/transfer.tsx +0 -115
- package/docs/data-entry/tree-select.tsx +0 -204
- package/docs/data-entry/upload-crop-dialog.tsx +0 -109
- package/docs/data-entry/upload.tsx +0 -310
- package/docs/feedback/alert-dialog.tsx +0 -270
- package/docs/feedback/alert.tsx +0 -248
- package/docs/feedback/auth-expiry.tsx +0 -104
- package/docs/feedback/banner.tsx +0 -183
- package/docs/feedback/callout.tsx +0 -220
- package/docs/feedback/danger-confirm.tsx +0 -91
- package/docs/feedback/dialog-touch.tsx +0 -24
- package/docs/feedback/dialog.tsx +0 -373
- package/docs/feedback/sheet.tsx +0 -510
- package/docs/feedback/skeleton.tsx +0 -168
- package/docs/feedback/toast.tsx +0 -135
- package/docs/feedback/tooltip.tsx +0 -171
- package/docs/feedback/two-factor-setup.tsx +0 -68
- package/docs/foundation/_email-specimen.ts +0 -274
- package/docs/foundation/_theme-editor-scope.ts +0 -222
- package/docs/foundation/colors.tsx +0 -207
- package/docs/foundation/density.tsx +0 -242
- package/docs/foundation/email-tokens.tsx +0 -323
- package/docs/foundation/radius-shadow.tsx +0 -154
- package/docs/foundation/spacing.tsx +0 -216
- package/docs/foundation/theme-editor.tsx +0 -654
- package/docs/foundation/typography.tsx +0 -147
- package/docs/general/actions.tsx +0 -175
- package/docs/general/activity.tsx +0 -289
- package/docs/general/button/examples/destructive-confirm.tsx +0 -90
- package/docs/general/button/examples/form-actions.tsx +0 -87
- package/docs/general/button/examples/toolbar.tsx +0 -160
- package/docs/general/button/index.md +0 -16
- package/docs/general/button/index.tsx +0 -236
- package/docs/general/float-button.tsx +0 -133
- package/docs/general/icon.tsx +0 -217
- package/docs/general/logo.tsx +0 -194
- package/docs/general/reveal.tsx +0 -309
- package/docs/general/typography.tsx +0 -542
- package/docs/i18n/messages/en.json +0 -1715
- package/docs/i18n/messages/ja.json +0 -1708
- package/docs/i18n/messages/vi.json +0 -1708
- package/docs/layout/account-chip.tsx +0 -72
- package/docs/layout/admin-collection.tsx +0 -122
- package/docs/layout/affix.tsx +0 -209
- package/docs/layout/app-launcher.tsx +0 -211
- package/docs/layout/app-shell-arrangements.tsx +0 -225
- package/docs/layout/app-shell-narrow-bar.tsx +0 -205
- package/docs/layout/app-shell-states.tsx +0 -171
- package/docs/layout/app-shell.tsx +0 -395
- package/docs/layout/aspect-ratio.tsx +0 -135
- package/docs/layout/auth-account-summary.tsx +0 -103
- package/docs/layout/auth-divider.tsx +0 -28
- package/docs/layout/auth-footer.tsx +0 -37
- package/docs/layout/auth-identity.tsx +0 -70
- package/docs/layout/auth-recovery/examples/mfa-challenge.md +0 -41
- package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +0 -254
- package/docs/layout/auth-recovery/examples/mobile-390.md +0 -25
- package/docs/layout/auth-recovery/examples/mobile-390.tsx +0 -82
- package/docs/layout/auth-recovery/examples/password-recovery.md +0 -24
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +0 -197
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +0 -27
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +0 -156
- package/docs/layout/auth-recovery/index.md +0 -140
- package/docs/layout/auth-recovery/index.tsx +0 -96
- package/docs/layout/auth-shell-context.tsx +0 -103
- package/docs/layout/auth-shell-device.tsx +0 -112
- package/docs/layout/auth-shell-registration.tsx +0 -338
- package/docs/layout/auth-shell-variants.tsx +0 -143
- package/docs/layout/auth-shell.tsx +0 -59
- package/docs/layout/auth-stack.tsx +0 -40
- package/docs/layout/centered-shell.tsx +0 -102
- package/docs/layout/draggable-panel.tsx +0 -127
- package/docs/layout/error-surface/examples/application-403.tsx +0 -84
- package/docs/layout/error-surface/examples/application-404.tsx +0 -77
- package/docs/layout/error-surface/examples/system-500.tsx +0 -47
- package/docs/layout/error-surface/examples/system-503.tsx +0 -48
- package/docs/layout/error-surface/index.md +0 -153
- package/docs/layout/error-surface/index.tsx +0 -239
- package/docs/layout/flex.tsx +0 -444
- package/docs/layout/legal-document-shell/_data.ts +0 -110
- package/docs/layout/legal-document-shell/examples/desktop-1440.md +0 -12
- package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +0 -83
- package/docs/layout/legal-document-shell/examples/mobile-390.md +0 -22
- package/docs/layout/legal-document-shell/examples/mobile-390.tsx +0 -70
- package/docs/layout/legal-document-shell/examples/tablet-1024.md +0 -3
- package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +0 -84
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +0 -18
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +0 -61
- package/docs/layout/legal-document-shell/index.md +0 -51
- package/docs/layout/legal-document-shell/index.tsx +0 -101
- package/docs/layout/masonry.tsx +0 -291
- package/docs/layout/master-detail.tsx +0 -390
- package/docs/layout/mobile-shell.tsx +0 -106
- package/docs/layout/nav-list.tsx +0 -584
- package/docs/layout/org-switcher.tsx +0 -131
- package/docs/layout/page-container.tsx +0 -1020
- package/docs/layout/page-cover.tsx +0 -56
- package/docs/layout/resizable-panel.tsx +0 -419
- package/docs/layout/responsive-grid.tsx +0 -403
- package/docs/layout/separator.tsx +0 -327
- package/docs/layout/service-role-panel.tsx +0 -144
- package/docs/layout/sidebar.tsx +0 -689
- package/docs/layout/space-compact.tsx +0 -202
- package/docs/layout/split-pane.tsx +0 -532
- package/docs/layout/topbar-item.tsx +0 -233
- package/docs/layout/topbar.tsx +0 -360
- package/docs/navigation/anchor.tsx +0 -295
- package/docs/navigation/app-setting-picker.tsx +0 -178
- package/docs/navigation/app-setting-toggle.tsx +0 -111
- package/docs/navigation/breadcrumb.tsx +0 -207
- package/docs/navigation/card-tabs.tsx +0 -344
- package/docs/navigation/conversations.tsx +0 -176
- package/docs/navigation/dropdown-menu.tsx +0 -345
- package/docs/navigation/filter-bar.tsx +0 -247
- package/docs/navigation/mega-menu-panel.tsx +0 -86
- package/docs/navigation/mega-menu.tsx +0 -254
- package/docs/navigation/pagination.tsx +0 -293
- package/docs/navigation/steps.tsx +0 -315
- package/docs/navigation/tabs-rtl.tsx +0 -28
- package/docs/navigation/tabs.tsx +0 -755
- package/docs/navigation/toolbar.tsx +0 -347
- package/docs/providers/app-provider.tsx +0 -191
- package/docs/providers/format-date.tsx +0 -230
- package/docs/providers/theme-scope.tsx +0 -186
- package/docs/query/button-refetch.tsx +0 -161
- package/docs/query/data-state.tsx +0 -262
- package/docs/query/infinite-query-state.tsx +0 -97
- package/docs/query/mutation-feedback.tsx +0 -128
- package/docs/query/touch-actions.tsx +0 -68
- package/docs/react-router/prefetch-link.tsx +0 -262
- package/docs/roadmap/ai-chat-components.md +0 -206
- package/docs/roadmap/antd-parity.md +0 -155
- package/docs/roadmap/badge-tag-chip-count.md +0 -172
- package/docs/roadmap/list-masonry.md +0 -159
- package/docs/roadmap/parity-audit-data-display-feedback.md +0 -567
- package/docs/roadmap/parity-audit-data-entry.md +0 -368
- package/docs/roadmap/parity-audit-layout-navigation-general.md +0 -459
- package/docs/roadmap/parity-backlog.md +0 -77
- package/docs/roadmap/tree-components.md +0 -151
- package/docs/roadmap/website-components.md +0 -813
- package/docs/showcase/acme-portal.tsx +0 -461
- package/docs/showcase/acme-website.tsx +0 -499
- package/docs/showcase/caimono-price-comparison.tsx +0 -919
- package/docs/showcase/case1-warehouse-dashboard.tsx +0 -358
- package/docs/showcase/case2-employee-me.tsx +0 -438
- package/docs/showcase/case3-approval-workflow.tsx +0 -531
- package/docs/showcase/case4-login.tsx +0 -312
- package/docs/showcase/case5-shift-calendar.tsx +0 -702
- package/docs/showcase/case6-agency-handy.tsx +0 -1120
- package/docs/showcase/futurelastic-web.tsx +0 -441
- package/docs/showcase/marketing-page.tsx +0 -895
- package/docs/showcase/org-switcher.tsx +0 -320
- package/docs/showcase/permission-matrix.tsx +0 -354
- package/docs/showcase/public-landing.tsx +0 -210
- package/docs/showcase/settings-account-sections.tsx +0 -559
- package/docs/showcase/settings-security-mfa.tsx +0 -145
- package/docs/showcase/table-approval-queue.tsx +0 -199
- package/docs/showcase/table-bulk-actions.tsx +0 -468
- package/docs/showcase/table-compact-kintone.tsx +0 -438
- package/docs/showcase/table-conditional-format.tsx +0 -367
- package/docs/showcase/table-crud-list.tsx +0 -544
- package/docs/showcase/table-density.tsx +0 -349
- package/docs/showcase/table-expandable-rows.tsx +0 -496
- package/docs/showcase/table-filter-chips.tsx +0 -468
- package/docs/showcase/table-footer-totals.tsx +0 -328
- package/docs/showcase/table-grouped-subtotals.tsx +0 -398
- package/docs/showcase/table-master-detail.tsx +0 -482
- package/docs/showcase/table-pagination.tsx +0 -409
- package/docs/showcase/table-states.tsx +0 -371
- package/docs/showcase/table-sticky-columns.tsx +0 -377
- package/docs/showcase/table-tree-rows.tsx +0 -451
- package/docs/showcase/table-view-tabs.tsx +0 -488
- package/docs/showcase/tcgm-website.tsx +0 -1047
- package/docs/showcase/tenant-brand-color.tsx +0 -338
- package/docs/showcase/theme-customization.tsx +0 -1292
- package/docs/showcase/theme-lab.tsx +0 -2125
- package/docs/themes/flat.css +0 -466
- package/docs/themes/glassmorphism.css +0 -960
- package/docs/themes/index.ts +0 -219
- package/docs/themes/neubrutalism.css +0 -481
- /package/dist/components/navigation/{filter-bar.d.ts → toolbar.d.ts} +0 -0
- /package/dist/components/navigation/{filter-bar.js → toolbar.js} +0 -0
- /package/dist/{components/data-display → lab}/carousel.d.ts +0 -0
- /package/dist/{components/data-entry → lab}/emoji-data.d.ts +0 -0
- /package/dist/{components/data-entry → lab}/emoji-data.js +0 -0
- /package/dist/{components/data-display → lab}/marquee-reveal.d.ts +0 -0
- /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.
|
package/docs/asset-modules.d.ts
DELETED
|
@@ -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
|
-
}
|