@design-ai/cli 4.56.0 → 4.57.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/.claude-plugin/plugin.json +109 -25
- package/CHANGELOG.md +36 -0
- package/README.ko.md +9 -26
- package/README.md +10 -23
- package/cli/bin/design-ai.mjs +1 -0
- package/cli/commands/help.mjs +7 -4
- package/cli/commands/index.mjs +292 -0
- package/cli/commands/learn-help.mjs +149 -0
- package/cli/commands/learn-print-profile.mjs +373 -0
- package/cli/commands/learn-print-restore.mjs +349 -0
- package/cli/commands/learn-print-signals.mjs +453 -0
- package/cli/commands/learn.mjs +60 -1281
- package/cli/commands/pack.mjs +7 -3
- package/cli/commands/prompt.mjs +7 -3
- package/cli/commands/search.mjs +94 -1
- package/cli/lib/dispatch.mjs +3 -0
- package/cli/lib/embedding-index.mjs +199 -0
- package/cli/lib/embedding-provider.mjs +121 -0
- package/cli/lib/embedding-rerank.mjs +52 -0
- package/cli/lib/learn-args.mjs +490 -0
- package/cli/lib/learn-backup.mjs +748 -0
- package/cli/lib/learn-curation.mjs +612 -0
- package/cli/lib/learn-eval.mjs +459 -0
- package/cli/lib/learn-profile.mjs +763 -0
- package/cli/lib/learn-select.mjs +223 -0
- package/cli/lib/learn-shared.mjs +158 -0
- package/cli/lib/learn-test-support.mjs +218 -0
- package/cli/lib/learn-usage.mjs +360 -0
- package/cli/lib/learn.mjs +83 -3694
- package/cli/lib/lexical.mjs +137 -0
- package/cli/lib/local-config.mjs +110 -0
- package/cli/lib/mcp-server.mjs +13 -3
- package/cli/lib/pack.mjs +31 -4
- package/cli/lib/prompt.mjs +42 -4
- package/cli/lib/recall.mjs +193 -0
- package/cli/lib/retrieval-index.mjs +0 -0
- package/cli/lib/search-ranked.mjs +170 -0
- package/cli/lib/search.mjs +11 -1
- package/cli/lib/signals-backlog-commands.mjs +673 -0
- package/cli/lib/signals-backlog.mjs +361 -0
- package/cli/lib/signals-eval.mjs +176 -0
- package/cli/lib/signals-readiness.mjs +247 -0
- package/cli/lib/signals-registry.mjs +377 -0
- package/cli/lib/signals-render.mjs +478 -0
- package/cli/lib/signals-shared.mjs +75 -0
- package/cli/lib/signals.mjs +16 -2337
- package/cli/lib/site-bundle-handoff-expected.mjs +173 -0
- package/cli/lib/site-bundle-handoff-runbook-action-summary.mjs +332 -0
- package/cli/lib/site-bundle-handoff-runbook-human-lines.mjs +167 -0
- package/cli/lib/site-bundle-handoff-runbook-maps.mjs +238 -0
- package/cli/lib/site-bundle-handoff-runbook-next-step.mjs +278 -0
- package/cli/lib/site-bundle-handoff-runbook.mjs +44 -931
- package/cli/lib/site-test-support.mjs +68 -0
- package/cli/lib/skill-proposals-apply-commands.mjs +135 -0
- package/cli/lib/skill-proposals-apply-contract.mjs +750 -0
- package/cli/lib/skill-proposals-apply-plan.mjs +118 -0
- package/cli/lib/skill-proposals-generate.mjs +298 -0
- package/cli/lib/skill-proposals-render.mjs +532 -0
- package/cli/lib/skill-proposals-review.mjs +262 -0
- package/cli/lib/skill-proposals.mjs +15 -2046
- package/cli/lib/workspace-args.mjs +83 -0
- package/cli/lib/workspace-git.mjs +169 -0
- package/cli/lib/workspace-learning.mjs +483 -0
- package/cli/lib/workspace-repo.mjs +139 -0
- package/cli/lib/workspace-report.mjs +283 -0
- package/cli/lib/workspace-test-support.mjs +99 -0
- package/cli/lib/workspace.mjs +30 -1056
- package/docs/AI-LEARNING-PHASE2.md +215 -0
- package/docs/DISTRIBUTION.ko.md +2 -2
- package/docs/DISTRIBUTION.md +2 -2
- package/docs/NEXT-SURFACE-DECISION.md +125 -0
- package/docs/PRODUCT-READINESS.md +3 -3
- package/docs/RELEASE-GATES.ko.md +35 -0
- package/docs/RELEASE-GATES.md +234 -0
- package/docs/ROADMAP.md +53 -8
- package/docs/external-status.md +6 -8
- package/docs/inspection-20260630.md +169 -0
- package/docs/integrations/design-ai-mcp-server.md +4 -4
- package/docs/reference/ant-design.md +413 -0
- package/docs/reference/awesome-design-md.md +439 -0
- package/docs/reference/mui.md +783 -0
- package/docs/reference/shadcn-ui.md +298 -0
- package/examples/component-accordion-actions.md +5 -5
- package/examples/component-accordion-details.md +5 -5
- package/examples/component-accordion-summary.md +5 -5
- package/examples/component-accordion.md +3 -3
- package/examples/component-affix.md +1 -1
- package/examples/component-alert-dialog.md +1 -1
- package/examples/component-alert-title.md +1 -1
- package/examples/component-alert.md +3 -3
- package/examples/component-anchor.md +1 -1
- package/examples/component-app-bar.md +1 -1
- package/examples/component-aspect-ratio.md +1 -1
- package/examples/component-auto-complete.md +2 -2
- package/examples/component-avatar-group.md +5 -5
- package/examples/component-avatar.md +3 -3
- package/examples/component-back-top.md +1 -1
- package/examples/component-backdrop.md +1 -1
- package/examples/component-badge.md +3 -3
- package/examples/component-border-beam.md +3 -3
- package/examples/component-bottom-navigation.md +1 -1
- package/examples/component-box.md +1 -1
- package/examples/component-breadcrumb.md +3 -3
- package/examples/component-button-base.md +3 -3
- package/examples/component-button-group.md +2 -2
- package/examples/component-button.md +3 -3
- package/examples/component-calendar.md +2 -2
- package/examples/component-card-actions.md +1 -1
- package/examples/component-card-content.md +1 -1
- package/examples/component-card-header.md +1 -1
- package/examples/component-card-media.md +1 -1
- package/examples/component-card.md +3 -3
- package/examples/component-carousel.md +2 -2
- package/examples/component-cascader.md +1 -1
- package/examples/component-chart.md +1 -1
- package/examples/component-checkbox.md +3 -3
- package/examples/component-click-away-listener.md +1 -1
- package/examples/component-code.md +1 -1
- package/examples/component-collapsible.md +1 -1
- package/examples/component-color-picker.md +1 -1
- package/examples/component-combobox.md +1 -1
- package/examples/component-command.md +1 -1
- package/examples/component-config-provider.md +3 -3
- package/examples/component-context-menu.md +1 -1
- package/examples/component-css-baseline.md +3 -3
- package/examples/component-date-picker.md +2 -2
- package/examples/component-descriptions.md +1 -1
- package/examples/component-dialog-actions.md +1 -1
- package/examples/component-dialog-content-text.md +1 -1
- package/examples/component-dialog-content.md +1 -1
- package/examples/component-dialog-title.md +1 -1
- package/examples/component-dialog.md +2 -2
- package/examples/component-divider.md +3 -3
- package/examples/component-drawer.md +3 -3
- package/examples/component-dropdown.md +3 -3
- package/examples/component-empty.md +2 -2
- package/examples/component-fade.md +1 -1
- package/examples/component-field.md +1 -1
- package/examples/component-filled-input.md +1 -1
- package/examples/component-flex.md +1 -1
- package/examples/component-float-button.md +2 -2
- package/examples/component-form-control-label.md +1 -1
- package/examples/component-form-control.md +1 -1
- package/examples/component-form-controls.md +1 -1
- package/examples/component-form-group.md +1 -1
- package/examples/component-form-helper-text.md +1 -1
- package/examples/component-form-label.md +1 -1
- package/examples/component-form.md +2 -2
- package/examples/component-grid.md +2 -2
- package/examples/component-grow.md +1 -1
- package/examples/component-hover-card.md +1 -1
- package/examples/component-icon-button.md +1 -1
- package/examples/component-icon.md +1 -1
- package/examples/component-image-list.md +1 -1
- package/examples/component-image.md +1 -1
- package/examples/component-input-adornment.md +1 -1
- package/examples/component-input-base.md +1 -1
- package/examples/component-input-number.md +1 -1
- package/examples/component-input-otp.md +2 -2
- package/examples/component-input.md +3 -3
- package/examples/component-item.md +1 -1
- package/examples/component-label.md +1 -1
- package/examples/component-layout.md +1 -1
- package/examples/component-link.md +1 -1
- package/examples/component-list-item-avatar.md +1 -1
- package/examples/component-list-item-button.md +1 -1
- package/examples/component-list-item-icon.md +1 -1
- package/examples/component-list-item-text.md +1 -1
- package/examples/component-list-item.md +1 -1
- package/examples/component-list-subheader.md +1 -1
- package/examples/component-list.md +2 -2
- package/examples/component-masonry.md +1 -1
- package/examples/component-mentions.md +1 -1
- package/examples/component-menu-item.md +1 -1
- package/examples/component-menu-list.md +1 -1
- package/examples/component-menu.md +1 -1
- package/examples/component-menubar.md +1 -1
- package/examples/component-message.md +1 -1
- package/examples/component-mobile-stepper.md +1 -1
- package/examples/component-modal.md +5 -5
- package/examples/component-navigation-menu.md +1 -1
- package/examples/component-notification.md +1 -1
- package/examples/component-outlined-input.md +1 -1
- package/examples/component-pagination.md +3 -3
- package/examples/component-paper.md +1 -1
- package/examples/component-popconfirm.md +1 -1
- package/examples/component-popover.md +3 -3
- package/examples/component-popper.md +1 -1
- package/examples/component-progress.md +2 -2
- package/examples/component-qr-code.md +1 -1
- package/examples/component-radio.md +3 -3
- package/examples/component-rate.md +2 -2
- package/examples/component-resizable.md +1 -1
- package/examples/component-result.md +1 -1
- package/examples/component-scroll-area.md +1 -1
- package/examples/component-segmented.md +3 -3
- package/examples/component-select.md +3 -3
- package/examples/component-separator.md +1 -1
- package/examples/component-sheet.md +1 -1
- package/examples/component-sidebar.md +1 -1
- package/examples/component-skeleton.md +3 -3
- package/examples/component-slide.md +1 -1
- package/examples/component-slider.md +3 -3
- package/examples/component-snackbar-content.md +1 -1
- package/examples/component-snackbar.md +1 -1
- package/examples/component-sonner.md +1 -1
- package/examples/component-space.md +1 -1
- package/examples/component-speed-dial-action.md +1 -1
- package/examples/component-speed-dial.md +1 -1
- package/examples/component-spin.md +2 -2
- package/examples/component-spinner.md +1 -1
- package/examples/component-splitter.md +2 -2
- package/examples/component-stack.md +1 -1
- package/examples/component-statistic.md +1 -1
- package/examples/component-step-button.md +4 -4
- package/examples/component-step-connector.md +4 -4
- package/examples/component-step-content.md +1 -1
- package/examples/component-step-icon.md +1 -1
- package/examples/component-step-label.md +1 -1
- package/examples/component-step.md +2 -2
- package/examples/component-steps.md +2 -2
- package/examples/component-swipeable-drawer.md +1 -1
- package/examples/component-switch.md +3 -3
- package/examples/component-tab-scroll-button.md +5 -5
- package/examples/component-tab.md +1 -1
- package/examples/component-table-body.md +1 -1
- package/examples/component-table-cell.md +1 -1
- package/examples/component-table-container.md +1 -1
- package/examples/component-table-footer.md +1 -1
- package/examples/component-table-head.md +1 -1
- package/examples/component-table-pagination.md +1 -1
- package/examples/component-table-row.md +1 -1
- package/examples/component-table-sort-label.md +1 -1
- package/examples/component-table.md +2 -2
- package/examples/component-tabs.md +3 -3
- package/examples/component-tag-badge.md +2 -2
- package/examples/component-tag.md +1 -1
- package/examples/component-textarea-autosize.md +1 -1
- package/examples/component-textarea.md +1 -1
- package/examples/component-time-picker.md +1 -1
- package/examples/component-timeline.md +1 -1
- package/examples/component-toast.md +4 -4
- package/examples/component-toggle-button.md +1 -1
- package/examples/component-toggle.md +1 -1
- package/examples/component-toolbar.md +1 -1
- package/examples/component-tooltip.md +3 -3
- package/examples/component-tour.md +1 -1
- package/examples/component-transfer.md +1 -1
- package/examples/component-tree-select.md +1 -1
- package/examples/component-tree.md +1 -1
- package/examples/component-typography.md +2 -2
- package/examples/component-upload.md +1 -1
- package/examples/component-watermark.md +1 -1
- package/examples/component-zoom.md +1 -1
- package/knowledge/COVERAGE.md +4 -3
- package/knowledge/components/INDEX.md +202 -202
- package/knowledge/patterns/brand-references.md +72 -72
- package/package.json +1 -1
- package/tools/audit/local-ci.py +16 -1
- package/tools/audit/package-smoke.py +611 -9
- package/tools/audit/registry-smoke.py +534 -0
- package/tools/audit/release-metadata.py +47 -1
- package/tools/audit/smoke_assertions.py +915 -13
- package/tools/migrations/refs-links-to-reference-pages.py +179 -0
|
@@ -259,9 +259,9 @@ function VerifyPhoneScreen({ phone }: Props) {
|
|
|
259
259
|
|
|
260
260
|
## References
|
|
261
261
|
|
|
262
|
-
- Ant Design: [`refs/ant-design/components/input/`](../
|
|
262
|
+
- Ant Design: [`refs/ant-design/components/input/`](../docs/reference/ant-design.md#input) — `Input.OTP`. Length, formatting, paste handling.
|
|
263
263
|
- MUI: no built-in. Compose individual `<TextField>` cells.
|
|
264
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/input-otp.tsx`](../
|
|
264
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/input-otp.tsx`](../docs/reference/shadcn-ui.md#input-otp) — wraps `input-otp` library. **Default for new projects.**
|
|
265
265
|
|
|
266
266
|
## Cross-reference
|
|
267
267
|
|
|
@@ -196,9 +196,9 @@ Field (the row)
|
|
|
196
196
|
|
|
197
197
|
## References
|
|
198
198
|
|
|
199
|
-
- Ant Design: [`refs/ant-design/components/input/`](../
|
|
200
|
-
- MUI: [`refs/mui/packages/mui-material/src/Input/Input.tsx`](../
|
|
201
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx`](../
|
|
199
|
+
- Ant Design: [`refs/ant-design/components/input/`](../docs/reference/ant-design.md#input) — `Input`, `Input.Search`, `Input.Password`, `Input.TextArea`, `Input.Group`, `Input.OTP`. Most exhaustive split-by-purpose API.
|
|
200
|
+
- MUI: [`refs/mui/packages/mui-material/src/Input/Input.tsx`](../docs/reference/mui.md#input) and [`TextField/TextField.tsx`](../docs/reference/mui.md#text-field) — separates `Input` (raw) from `TextField` (Input + label + helper). MUI's split is cleaner conceptually.
|
|
201
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx`](../docs/reference/shadcn-ui.md#input) — minimal styling layer over native `<input>`. Pairs with separate `label.tsx`. Composition over configuration.
|
|
202
202
|
|
|
203
203
|
API choices made:
|
|
204
204
|
- **`label`/`helpText`/`errorText` as props** rather than separate components: 80% of inputs need all three; props keep usage compact. Composition (`<Field><Label/>...`) for the 20% that need finer control.
|
|
@@ -232,7 +232,7 @@ function SettingsList() {
|
|
|
232
232
|
|
|
233
233
|
## References
|
|
234
234
|
|
|
235
|
-
- shadcn-ui: [`item`](../
|
|
235
|
+
- shadcn-ui: [`item`](../docs/reference/shadcn-ui.md#item)
|
|
236
236
|
- iOS UITableViewCell; Material 3 List item
|
|
237
237
|
|
|
238
238
|
## Cross-reference
|
|
@@ -108,7 +108,7 @@ Label is presentational; states inherit from the linked input.
|
|
|
108
108
|
## References
|
|
109
109
|
|
|
110
110
|
- HTML5 `<label>` element
|
|
111
|
-
- shadcn-ui: [`label`](../
|
|
111
|
+
- shadcn-ui: [`label`](../docs/reference/shadcn-ui.md#label) (Radix)
|
|
112
112
|
- MUI: `FormLabel`
|
|
113
113
|
|
|
114
114
|
## Cross-reference
|
|
@@ -205,7 +205,7 @@ function AppLayout({ children }: Props) {
|
|
|
205
205
|
|
|
206
206
|
## References
|
|
207
207
|
|
|
208
|
-
- Ant Design: [`refs/ant-design/components/layout/`](../
|
|
208
|
+
- Ant Design: [`refs/ant-design/components/layout/`](../docs/reference/ant-design.md#layout) — `Layout`, `Layout.Header`, `Layout.Sider`, `Layout.Content`, `Layout.Footer`. Most exhaustive.
|
|
209
209
|
- MUI: no dedicated Layout — compose with `<Box>` + `<Drawer>` + `<AppBar>`.
|
|
210
210
|
- shadcn-ui: no built-in. Use `resizable` + custom layout.
|
|
211
211
|
|
|
@@ -211,7 +211,7 @@ The `as` prop swaps the underlying element from `<a>` to a router-aware Link. Th
|
|
|
211
211
|
## References
|
|
212
212
|
|
|
213
213
|
- HTML5 `<a>` element
|
|
214
|
-
- MUI: [`Link`](../
|
|
214
|
+
- MUI: [`Link`](../docs/reference/mui.md#link)
|
|
215
215
|
- Ant Design: link styling within `Typography`
|
|
216
216
|
- WCAG 2.1: SC 1.4.1 (Use of Color), SC 2.4.4 (Link Purpose)
|
|
217
217
|
|
|
@@ -128,7 +128,7 @@ function SettingsNav({ section }: { section: string }) {
|
|
|
128
128
|
|
|
129
129
|
## References
|
|
130
130
|
|
|
131
|
-
- MUI: [`ListItemButton`](../
|
|
131
|
+
- MUI: [`ListItemButton`](../docs/reference/mui.md#list-item-button)
|
|
132
132
|
|
|
133
133
|
## Cross-reference
|
|
134
134
|
|
|
@@ -73,7 +73,7 @@ Inherits from parent button: hover, focus, selected, disabled all cascade. Selec
|
|
|
73
73
|
|
|
74
74
|
## References
|
|
75
75
|
|
|
76
|
-
- MUI: [`ListItemIcon`](../
|
|
76
|
+
- MUI: [`ListItemIcon`](../docs/reference/mui.md#list-item-icon)
|
|
77
77
|
|
|
78
78
|
## Cross-reference
|
|
79
79
|
|
|
@@ -106,7 +106,7 @@ Slots: leading icon/avatar (optional), text block (`ListItemText`), trailing sec
|
|
|
106
106
|
|
|
107
107
|
## References
|
|
108
108
|
|
|
109
|
-
- MUI: [`ListItem.d.ts`](../
|
|
109
|
+
- MUI: [`ListItem.d.ts`](../docs/reference/mui.md#list-item)
|
|
110
110
|
|
|
111
111
|
## Cross-reference
|
|
112
112
|
|
|
@@ -186,8 +186,8 @@ function NotificationList() {
|
|
|
186
186
|
|
|
187
187
|
## References
|
|
188
188
|
|
|
189
|
-
- Ant: [`List`](../
|
|
190
|
-
- MUI: [`List`](../
|
|
189
|
+
- Ant: [`List`](../docs/reference/ant-design.md#list)
|
|
190
|
+
- MUI: [`List`](../docs/reference/mui.md#list) + [`ListItem`](../docs/reference/mui.md#list-item)
|
|
191
191
|
- HTML5 `<ul>` / `<ol>` / `<li>`
|
|
192
192
|
|
|
193
193
|
## Cross-reference
|
|
@@ -180,7 +180,7 @@ function PhotoGallery({ photos }: Props) {
|
|
|
180
180
|
|
|
181
181
|
## References
|
|
182
182
|
|
|
183
|
-
- MUI: [`Masonry`](../
|
|
183
|
+
- MUI: [`Masonry`](../docs/reference/mui.md)
|
|
184
184
|
- CSS Multicolumn Layout (MDN)
|
|
185
185
|
- Pinterest engineering blog on Masonry layout
|
|
186
186
|
|
|
@@ -177,7 +177,7 @@ When chip inserted: announce via live region: "김민지 mentioned" or similar.
|
|
|
177
177
|
|
|
178
178
|
## References
|
|
179
179
|
|
|
180
|
-
- Ant Design: [`refs/ant-design/components/mentions/`](../
|
|
180
|
+
- Ant Design: [`refs/ant-design/components/mentions/`](../docs/reference/ant-design.md#mentions) — `Mentions`. Multi-trigger support, async data.
|
|
181
181
|
- MUI: no built-in. Use `react-mentions` or build on Slate.
|
|
182
182
|
- shadcn-ui: no built-in. Compose with `command` (cmdk) + textarea + custom popover positioning.
|
|
183
183
|
|
|
@@ -128,7 +128,7 @@ Like `vertical` but SubMenus expand inline (push items below). Vs vertical's pop
|
|
|
128
128
|
|
|
129
129
|
## References
|
|
130
130
|
|
|
131
|
-
- Ant: [`Menu`](../
|
|
131
|
+
- Ant: [`Menu`](../docs/reference/ant-design.md#menu)
|
|
132
132
|
- WAI-ARIA: Menu pattern (different from menubar)
|
|
133
133
|
|
|
134
134
|
## Cross-reference
|
|
@@ -247,7 +247,7 @@ function EditorHeader() {
|
|
|
247
247
|
|
|
248
248
|
## References
|
|
249
249
|
|
|
250
|
-
- shadcn-ui: [`menubar`](../
|
|
250
|
+
- shadcn-ui: [`menubar`](../docs/reference/shadcn-ui.md#menubar) (Radix)
|
|
251
251
|
- Patterns: macOS native menubar, VS Code, Figma desktop apps
|
|
252
252
|
- WAI-ARIA: [Menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
|
|
253
253
|
|
|
@@ -152,7 +152,7 @@ async function handleCopy() {
|
|
|
152
152
|
|
|
153
153
|
## References
|
|
154
154
|
|
|
155
|
-
- Ant: [`Message`](../
|
|
155
|
+
- Ant: [`Message`](../docs/reference/ant-design.md#message)
|
|
156
156
|
- Patterns: same family as iOS HUD, Material Snackbar (variant)
|
|
157
157
|
|
|
158
158
|
## Cross-reference
|
|
@@ -200,12 +200,12 @@ const [open, setOpen] = useState(false);
|
|
|
200
200
|
|
|
201
201
|
## References
|
|
202
202
|
|
|
203
|
-
- Ant Design: [`refs/ant-design/components/modal/`](../
|
|
204
|
-
- MUI: [`refs/mui/packages/mui-material/src/Dialog/Dialog.tsx`](../
|
|
203
|
+
- Ant Design: [`refs/ant-design/components/modal/`](../docs/reference/ant-design.md#modal) — exhaustive: `Modal`, `Modal.confirm`, `Modal.info`, `Modal.success`, `Modal.error`, `Modal.warning`. Imperative API via `Modal.confirm({...})` is convenient but harder to test. The static methods are an Ant idiom worth knowing about.
|
|
204
|
+
- MUI: [`refs/mui/packages/mui-material/src/Dialog/Dialog.tsx`](../docs/reference/mui.md#dialog) — composition-first: `<Dialog>`, `<DialogTitle>`, `<DialogContent>`, `<DialogActions>`. Cleanest base API.
|
|
205
205
|
- shadcn-ui:
|
|
206
|
-
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/dialog.tsx`](../
|
|
207
|
-
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx`](../
|
|
208
|
-
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/sheet.tsx`](../
|
|
206
|
+
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/dialog.tsx`](../docs/reference/shadcn-ui.md#dialog) — Radix Dialog primitive, all a11y handled upstream.
|
|
207
|
+
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx`](../docs/reference/shadcn-ui.md#alert-dialog) — separate primitive for confirms; difference is `role="alertdialog"` and modal cannot be dismissed via Escape/backdrop unless code-driven.
|
|
208
|
+
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/sheet.tsx`](../docs/reference/shadcn-ui.md#sheet) — edge-anchored variant.
|
|
209
209
|
|
|
210
210
|
API choices made:
|
|
211
211
|
- **Three variants in one spec** (`dialog`/`alert-dialog`/`sheet`) — same focus-management contract, same a11y pattern, same composition. Fewer concepts to learn than three separate components with overlapping concerns.
|
|
@@ -283,7 +283,7 @@ function MarketingHeader() {
|
|
|
283
283
|
|
|
284
284
|
## References
|
|
285
285
|
|
|
286
|
-
- shadcn-ui: [`navigation-menu`](../
|
|
286
|
+
- shadcn-ui: [`navigation-menu`](../docs/reference/shadcn-ui.md#navigation-menu) (Radix)
|
|
287
287
|
- Patterns: Stripe, Linear, Vercel marketing nav
|
|
288
288
|
|
|
289
289
|
## Cross-reference
|
|
@@ -155,7 +155,7 @@ function NewMessageNotification({ message }: Props) {
|
|
|
155
155
|
|
|
156
156
|
## References
|
|
157
157
|
|
|
158
|
-
- Ant: [`Notification`](../
|
|
158
|
+
- Ant: [`Notification`](../docs/reference/ant-design.md#notification)
|
|
159
159
|
- Native browser Notification API (different — uses OS-level notifications)
|
|
160
160
|
- iOS / Android notification card patterns
|
|
161
161
|
|
|
@@ -133,7 +133,7 @@ function PasswordField({ value, onChange, error }) {
|
|
|
133
133
|
|
|
134
134
|
## References
|
|
135
135
|
|
|
136
|
-
- MUI: [`OutlinedInput`](../
|
|
136
|
+
- MUI: [`OutlinedInput`](../docs/reference/mui.md#outlined-input) + [`InputBase`](../docs/reference/mui.md#input-base)
|
|
137
137
|
|
|
138
138
|
## Cross-reference
|
|
139
139
|
|
|
@@ -210,9 +210,9 @@ Implementation: read from `useSearchParams` in React Router / Next.js. Update qu
|
|
|
210
210
|
|
|
211
211
|
## References
|
|
212
212
|
|
|
213
|
-
- Ant Design: [`refs/ant-design/components/pagination/`](../
|
|
214
|
-
- MUI: [`refs/mui/packages/mui-material/src/Pagination/`](../
|
|
215
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/pagination.tsx`](../
|
|
213
|
+
- Ant Design: [`refs/ant-design/components/pagination/`](../docs/reference/ant-design.md#pagination) — most exhaustive: `simple`, `total`, `showSizeChanger`, `showJumper`, `itemRender`, `disabled`, `responsive`. Common in admin tables.
|
|
214
|
+
- MUI: [`refs/mui/packages/mui-material/src/Pagination/`](../docs/reference/mui.md#pagination) — `Pagination` + `PaginationItem`. Cleaner API, fewer features.
|
|
215
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/pagination.tsx`](../docs/reference/shadcn-ui.md#pagination) — primitive only (`Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis`). Compose for behavior. **No built-in pagination logic** — pair with TanStack Table or your own state.
|
|
216
216
|
|
|
217
217
|
API choices made:
|
|
218
218
|
- **`siblingCount` and `boundaryCount` exposed**: lets the consumer tune the numbered display algorithm without overriding rendering.
|
|
@@ -189,7 +189,7 @@ function EditorToolbar() {
|
|
|
189
189
|
|
|
190
190
|
## References
|
|
191
191
|
|
|
192
|
-
- MUI: [`Paper`](../
|
|
192
|
+
- MUI: [`Paper`](../docs/reference/mui.md#paper)
|
|
193
193
|
- Material Design: [Elevation](https://m3.material.io/styles/elevation/overview)
|
|
194
194
|
|
|
195
195
|
## Cross-reference
|
|
@@ -226,9 +226,9 @@ Don't put interactive content in a tooltip. Tooltips disappear on mouse-out.
|
|
|
226
226
|
|
|
227
227
|
## References
|
|
228
228
|
|
|
229
|
-
- Ant Design: [`refs/ant-design/components/popover/`](../
|
|
230
|
-
- MUI: [`refs/mui/packages/mui-material/src/Popper/`](../
|
|
231
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/popover.tsx`](../
|
|
229
|
+
- Ant Design: [`refs/ant-design/components/popover/`](../docs/reference/ant-design.md#popover) — `Popover` with rich placement, `trigger="hover" | "click" | "focus"`. Hover trigger is generally avoided in modern UIs.
|
|
230
|
+
- MUI: [`refs/mui/packages/mui-material/src/Popper/`](../docs/reference/mui.md#popper) — low-level positioning primitive. `Popover` adds backdrop + focus management.
|
|
231
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/popover.tsx`](../docs/reference/shadcn-ui.md#popover) — Radix Popover primitive. **Default for new projects.**
|
|
232
232
|
|
|
233
233
|
## Cross-reference
|
|
234
234
|
|
|
@@ -118,7 +118,7 @@ function DateHoverPreview({ date }: Props) {
|
|
|
118
118
|
|
|
119
119
|
## References
|
|
120
120
|
|
|
121
|
-
- MUI: [`Popper`](../
|
|
121
|
+
- MUI: [`Popper`](../docs/reference/mui.md#popper)
|
|
122
122
|
- Popper.js (deprecated; use @floating-ui)
|
|
123
123
|
- @floating-ui/react — modern replacement
|
|
124
124
|
|
|
@@ -184,9 +184,9 @@ Circular: full rotation, 1000ms loop, linear easing. The arc itself can also pul
|
|
|
184
184
|
|
|
185
185
|
## References
|
|
186
186
|
|
|
187
|
-
- Ant Design: [`refs/ant-design/components/progress/`](../
|
|
187
|
+
- Ant Design: [`refs/ant-design/components/progress/`](../docs/reference/ant-design.md#progress) — `Progress` with `type="line" | "circle" | "dashboard"` (3/4 ring), `steps` (segmented), `success` (overlay).
|
|
188
188
|
- MUI: separate `LinearProgress` and `CircularProgress` components. `variant="determinate" | "indeterminate" | "buffer" | "query"`. Buffer mode for media playback.
|
|
189
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/progress.tsx`](../
|
|
189
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/progress.tsx`](../docs/reference/shadcn-ui.md#progress) — Radix primitive. Linear only. Circular requires a different primitive.
|
|
190
190
|
|
|
191
191
|
## Cross-reference
|
|
192
192
|
|
|
@@ -186,7 +186,7 @@ function PaymentQRScreen({ session }) {
|
|
|
186
186
|
|
|
187
187
|
## References
|
|
188
188
|
|
|
189
|
-
- Ant Design: [`refs/ant-design/components/qr-code/`](../
|
|
189
|
+
- Ant Design: [`refs/ant-design/components/qr-code/`](../docs/reference/ant-design.md#qr-code) — `QRCode` with all options.
|
|
190
190
|
- MUI: no built-in. Use libraries like `qrcode.react` or `react-qr-code`.
|
|
191
191
|
- shadcn-ui: no built-in. Use libraries.
|
|
192
192
|
|
|
@@ -155,9 +155,9 @@ function PaymentMethodPicker({ value, onChange }: Props) {
|
|
|
155
155
|
|
|
156
156
|
## References
|
|
157
157
|
|
|
158
|
-
- Ant: [`Radio`](../
|
|
159
|
-
- MUI: [`Radio`](../
|
|
160
|
-
- shadcn-ui: [`radio-group`](../
|
|
158
|
+
- Ant: [`Radio`](../docs/reference/ant-design.md#radio)
|
|
159
|
+
- MUI: [`Radio`](../docs/reference/mui.md#radio)
|
|
160
|
+
- shadcn-ui: [`radio-group`](../docs/reference/shadcn-ui.md#radio-group)
|
|
161
161
|
- WAI-ARIA: [Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
|
|
162
162
|
|
|
163
163
|
## Cross-reference
|
|
@@ -192,8 +192,8 @@ For display mode (readOnly):
|
|
|
192
192
|
|
|
193
193
|
## References
|
|
194
194
|
|
|
195
|
-
- Ant Design: [`refs/ant-design/components/rate/`](../
|
|
196
|
-
- MUI: [`refs/mui/packages/mui-material/src/Rating/`](../
|
|
195
|
+
- Ant Design: [`refs/ant-design/components/rate/`](../docs/reference/ant-design.md#rate) — `Rate` with `count`, `allowHalf`, `tooltips`, custom `character`. Most flexible.
|
|
196
|
+
- MUI: [`refs/mui/packages/mui-material/src/Rating/`](../docs/reference/mui.md#rating) — `Rating` with `precision`, `IconContainerComponent`, `getLabelText` for a11y. Solid impl.
|
|
197
197
|
- shadcn-ui: no built-in. Compose from icons + state.
|
|
198
198
|
|
|
199
199
|
## Cross-reference
|
|
@@ -153,7 +153,7 @@ function IDEShell() {
|
|
|
153
153
|
|
|
154
154
|
## References
|
|
155
155
|
|
|
156
|
-
- shadcn-ui: [`resizable`](../
|
|
156
|
+
- shadcn-ui: [`resizable`](../docs/reference/shadcn-ui.md#resizable) — wraps `react-resizable-panels`
|
|
157
157
|
- VS Code, Linear, Cursor — IDE layout pattern
|
|
158
158
|
|
|
159
159
|
## Cross-reference
|
|
@@ -252,7 +252,7 @@ Horizontal compact. Icon left, text right. For inside small cards/sidebars where
|
|
|
252
252
|
|
|
253
253
|
## References
|
|
254
254
|
|
|
255
|
-
- Ant Design: [`refs/ant-design/components/result/`](../
|
|
255
|
+
- Ant Design: [`refs/ant-design/components/result/`](../docs/reference/ant-design.md#result) (Result) + [`refs/ant-design/components/empty/`](../docs/reference/ant-design.md#empty) (Empty). Both well-developed.
|
|
256
256
|
- MUI: no dedicated components. Compose with Card + Typography.
|
|
257
257
|
- shadcn-ui: no built-in. Compose from primitives.
|
|
258
258
|
|
|
@@ -189,7 +189,7 @@ function Sidebar() {
|
|
|
189
189
|
|
|
190
190
|
## References
|
|
191
191
|
|
|
192
|
-
- shadcn-ui: [`scroll-area`](../
|
|
192
|
+
- shadcn-ui: [`scroll-area`](../docs/reference/shadcn-ui.md#scroll-area) (Radix)
|
|
193
193
|
- CSS `scrollbar-color`, `scrollbar-width` properties (browser-specific styling alternative)
|
|
194
194
|
|
|
195
195
|
## Cross-reference
|
|
@@ -167,9 +167,9 @@ For Korean apps: short labels (1–4 syllables) work best.
|
|
|
167
167
|
|
|
168
168
|
## References
|
|
169
169
|
|
|
170
|
-
- Ant Design: [`refs/ant-design/components/segmented/`](../
|
|
171
|
-
- MUI: [`refs/mui/packages/mui-material/src/ToggleButtonGroup/`](../
|
|
172
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/`](../
|
|
170
|
+
- Ant Design: [`refs/ant-design/components/segmented/`](../docs/reference/ant-design.md#segmented) — `Segmented` with options, sizes, block mode, custom rendering. Modern Ant addition.
|
|
171
|
+
- MUI: [`refs/mui/packages/mui-material/src/ToggleButtonGroup/`](../docs/reference/mui.md#toggle-button-group) — supports both single and multiple. Set `exclusive={true}` for segmented behavior.
|
|
172
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/`](../docs/reference/shadcn-ui.md) — `toggle-group.tsx`. Radix Toggle Group primitive.
|
|
173
173
|
|
|
174
174
|
## Cross-reference
|
|
175
175
|
|
|
@@ -239,11 +239,11 @@ This is one of the more complex a11y components. Use a battle-tested primitive (
|
|
|
239
239
|
|
|
240
240
|
## References
|
|
241
241
|
|
|
242
|
-
- Ant Design: [`refs/ant-design/components/select/`](../
|
|
242
|
+
- Ant Design: [`refs/ant-design/components/select/`](../docs/reference/ant-design.md#select) — `Select`, supports `mode="multiple"`, `mode="tags"` (creatable). Has `Cascader` for hierarchical select.
|
|
243
243
|
- MUI: `<Select>` (basic, like native) and `<Autocomplete>` (combobox). Autocomplete is the canonical reference for the searchable variant.
|
|
244
244
|
- shadcn-ui:
|
|
245
|
-
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/select.tsx`](../
|
|
246
|
-
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/command.tsx`](../
|
|
245
|
+
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/select.tsx`](../docs/reference/shadcn-ui.md#select) — Radix Select. No search.
|
|
246
|
+
- [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/command.tsx`](../docs/reference/shadcn-ui.md#command) — cmdk-based searchable. Combine with Popover for combobox pattern.
|
|
247
247
|
|
|
248
248
|
API choices made:
|
|
249
249
|
- **`Select` and `MultiSelect` as separate top-level exports** for type safety on `value` (single value vs array). Internally same primitive with `multiple={true|false}`.
|
|
@@ -168,7 +168,7 @@ For Korean print contexts (receipt-style dotted dividers): `border-style: dotted
|
|
|
168
168
|
## References
|
|
169
169
|
|
|
170
170
|
- HTML5 `<hr>` element
|
|
171
|
-
- shadcn-ui: [`separator`](../
|
|
171
|
+
- shadcn-ui: [`separator`](../docs/reference/shadcn-ui.md#separator) (Radix)
|
|
172
172
|
- Ant Design `Divider` is the equivalent name there
|
|
173
173
|
|
|
174
174
|
## Cross-reference
|
|
@@ -265,7 +265,7 @@ function FilterSheet({ filters, onChange, onApply }: Props) {
|
|
|
265
265
|
|
|
266
266
|
## References
|
|
267
267
|
|
|
268
|
-
- shadcn-ui: [`sheet`](../
|
|
268
|
+
- shadcn-ui: [`sheet`](../docs/reference/shadcn-ui.md#sheet) (Radix Dialog primitive)
|
|
269
269
|
- Material 3: bottom sheet pattern
|
|
270
270
|
- iOS: UISheetPresentationController detents
|
|
271
271
|
|
|
@@ -246,7 +246,7 @@ function AppShell({ children }: Props) {
|
|
|
246
246
|
|
|
247
247
|
## References
|
|
248
248
|
|
|
249
|
-
- shadcn-ui: [`sidebar`](../
|
|
249
|
+
- shadcn-ui: [`sidebar`](../docs/reference/shadcn-ui.md#sidebar) — flagship primitive
|
|
250
250
|
- Patterns: VS Code, Linear, Notion sidebars
|
|
251
251
|
|
|
252
252
|
## Cross-reference
|
|
@@ -168,9 +168,9 @@ The skeleton still renders (showing layout); just no animation.
|
|
|
168
168
|
|
|
169
169
|
## References
|
|
170
170
|
|
|
171
|
-
- Ant Design: [`refs/ant-design/components/skeleton/`](../
|
|
172
|
-
- MUI: [`refs/mui/packages/mui-material/src/Skeleton/`](../
|
|
173
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/skeleton.tsx`](../
|
|
171
|
+
- Ant Design: [`refs/ant-design/components/skeleton/`](../docs/reference/ant-design.md#skeleton) — most exhaustive: `Skeleton.Avatar`, `Skeleton.Button`, `Skeleton.Image`, `Skeleton.Input`, `Skeleton.Node`. Pre-composed shapes for common components.
|
|
172
|
+
- MUI: [`refs/mui/packages/mui-material/src/Skeleton/`](../docs/reference/mui.md#skeleton) — primitive only. Composition is up to the consumer.
|
|
173
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/skeleton.tsx`](../docs/reference/shadcn-ui.md#skeleton) — minimal Tailwind-based primitive.
|
|
174
174
|
|
|
175
175
|
## Cross-reference
|
|
176
176
|
|
|
@@ -198,9 +198,9 @@ For range slider with overlapping thumbs: each thumb maintains independent focus
|
|
|
198
198
|
|
|
199
199
|
## References
|
|
200
200
|
|
|
201
|
-
- Ant Design: [`refs/ant-design/components/slider/`](../
|
|
202
|
-
- MUI: [`refs/mui/packages/mui-material/src/Slider/`](../
|
|
203
|
-
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/slider.tsx`](../
|
|
201
|
+
- Ant Design: [`refs/ant-design/components/slider/`](../docs/reference/ant-design.md#slider) — `Slider` with `range`, `marks`, `step`, `included` (whether range fill shows). Solid impl.
|
|
202
|
+
- MUI: [`refs/mui/packages/mui-material/src/Slider/`](../docs/reference/mui.md#slider) — `Slider` with rich `marks`, `valueLabelDisplay`, `track="normal" | "false" | "inverted"`. Most comprehensive.
|
|
203
|
+
- shadcn-ui: [`refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/slider.tsx`](../docs/reference/shadcn-ui.md#slider) — Radix Slider primitive. Simplest API.
|
|
204
204
|
|
|
205
205
|
## Cross-reference
|
|
206
206
|
|
|
@@ -111,7 +111,7 @@ async function deleteItem(id: string) {
|
|
|
111
111
|
|
|
112
112
|
## References
|
|
113
113
|
|
|
114
|
-
- MUI: [`Snackbar`](../
|
|
114
|
+
- MUI: [`Snackbar`](../docs/reference/mui.md#snackbar)
|
|
115
115
|
- Material 3: Snackbar pattern
|
|
116
116
|
|
|
117
117
|
## Cross-reference
|
|
@@ -156,7 +156,7 @@ async function handleSave() {
|
|
|
156
156
|
|
|
157
157
|
## References
|
|
158
158
|
|
|
159
|
-
- shadcn-ui: [`sonner`](../
|
|
159
|
+
- shadcn-ui: [`sonner`](../docs/reference/shadcn-ui.md#sonner)
|
|
160
160
|
- Sonner library by emilkowalski
|
|
161
161
|
|
|
162
162
|
## Cross-reference
|
|
@@ -115,7 +115,7 @@ Modern CSS makes Space largely unnecessary — `display: flex; gap: var(--space-
|
|
|
115
115
|
|
|
116
116
|
## References
|
|
117
117
|
|
|
118
|
-
- Ant: [`Space`](../
|
|
118
|
+
- Ant: [`Space`](../docs/reference/ant-design.md#space)
|
|
119
119
|
- CSS Flex / Grid `gap` property
|
|
120
120
|
|
|
121
121
|
## Cross-reference
|
|
@@ -167,7 +167,7 @@ function MobileApp() {
|
|
|
167
167
|
|
|
168
168
|
## References
|
|
169
169
|
|
|
170
|
-
- MUI: [`SpeedDial`](../
|
|
170
|
+
- MUI: [`SpeedDial`](../docs/reference/mui.md#speed-dial)
|
|
171
171
|
- Material Design: SpeedDial pattern
|
|
172
172
|
- Patterns: Twitter / Instagram compose FAB
|
|
173
173
|
|