From 8b2b03d2761f08195a35b9a71c82f96b2f3b2ea7 Mon Sep 17 00:00:00 2001 From: Calcium-Ion Date: Wed, 6 May 2026 12:39:36 +0800 Subject: [PATCH 01/21] =?UTF-8?q?feat(web/default):=20unified=20UI=20overh?= =?UTF-8?q?aul=20=E2=80=94=20Base=20UI=20migration,=20theme=20presets,=20r?= =?UTF-8?q?ankings=20dashboard,=20and=20table=20toolbar=20refactor=20(#463?= =?UTF-8?q?3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage. Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on . Wrap the tree in main.tsx. Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark). Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi. * 🎨 fix(web): align segmented controls with theme radius tokens - Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart toolbars with radius-md so the active state follows --radius when users change Radius in Theme Settings. - Use nested radii consistent with TabsList/TabsTrigger: outer rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px)) so the track and active thumb stay concentric at small scales (e.g. 0.3rem) instead of a squared “focus” block inside a rounded shell. - Apply the same pattern to pricing SegmentedControl and the segmented groups in consumption-distribution-chart, model-charts, and user-charts. Verified: bun run typecheck (web/default) * ✨ feat(pricing): enrich model details with uptime sparkline and API documentation Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with per-day tooltips, surface it in a status row under quick stats and in the per-group performance table, and extend mock data so uptime series are stable and optionally scoped by group. Introduce an API tab with Shiki-highlighted code samples (cURL, Python, TypeScript, JavaScript), endpoint-type switching, authentication guidance, a supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer vendor, tokenizer, license, and data-retention hints for a provider & data privacy card on the Overview tab (capabilities/modalities stay with model identity; rate limits stay with the API tab). Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi. * 🏆 feat(rankings): add comprehensive rankings dashboard Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending. Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales. * fix(theme): correct theme preset selection state - update Base UI Radio selectors to use data-checked/data-unchecked states. - fix unchecked theme options still showing selected indicators. - isolate the default theme preview tokens to prevent preset changes from leaking into it. * fix(setup): correct usage mode radio state - use Base UI data-checked/data-unchecked states for RadioGroup styling. - hide radio indicators when options are unchecked to avoid setup page display issues. - drive usage mode card and icon selection styles from Base UI state. * fix(auth): submit sign-in and sign-up forms * 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`) and reinstall full component registry with `--overwrite`, including Hugeicons-backed widgets and newly added registry components. - Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies, preset UI from config drawer); rely on official semantic CSS tokens + light/dark only. - Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and `@theme inline` mappings (plus skeleton token vars for existing shimmer usage). - Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`; clarify scroll-lock override comment. Application compatibility: - Keep minimal shims where app code diverged from official APIs (popover collision props, combobox legacy `options` callers, Spinner prop typing). - Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.) Tooling / docs / build: - Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`. - Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack. - Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.) Verified: `bun run typecheck` passes. Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere; not addressed in this change. * 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters - Refactor DataTableToolbar to a single wrapping flex row with a right-aligned action cluster (Reset / Search / View / Expand) for a cleaner Ant Design Pro–style filter bar; remove the dedicated stats row and the toolbar `stats` prop. - Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive- data visibility toggle into the page header via CommonLogsHeaderActions and SectionPageLayout.Actions so the toolbar stays focused on filters. - Slim CommonLogsFilterBar props (no stats / preActions eye control). - Improve CompactDateTimeRangePicker: show minute-precision labels on the trigger (seconds omitted; aligns with datetime-local inputs); widen the trigger on sm+ breakpoints so the full range is visible without truncation; apply the same width in task logs filters. - Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon. - Earlier layout tweak: extra top padding on SectionPageLayout scroll content so control focus rings are not clipped by overflow. * feat(web/default): Base UI migration and component foundation Migrate from Radix UI to Base UI, rewrite core UI primitives, update dependencies (recharts, date-fns, next-themes), add shadcn agent skill documentation, and refresh AI element components. This is the foundational work from the v2/localmain lineage that was not covered by the individual feature commits above. --------- Co-authored-by: t0ng7u Co-authored-by: QuentinHsu --- .../skills/classic-to-default-sync/SKILL.md | 4 +- .agents/skills/shadcn-ui/SKILL.md | 105 ++ .../skills/shadcn-ui/vendor/shadcn/SKILL.md | 260 ++++ .../shadcn-ui/vendor/shadcn/UPSTREAM.txt | 3 + .agents/skills/shadcn-ui/vendor/shadcn/cli.md | 276 +++++ .../shadcn-ui/vendor/shadcn/customization.md | 209 ++++ .agents/skills/shadcn-ui/vendor/shadcn/mcp.md | 94 ++ .../vendor/shadcn/rules/base-vs-radix.md | 306 +++++ .../vendor/shadcn/rules/composition.md | 195 +++ .../shadcn-ui/vendor/shadcn/rules/forms.md | 192 +++ .../shadcn-ui/vendor/shadcn/rules/icons.md | 101 ++ .../shadcn-ui/vendor/shadcn/rules/styling.md | 162 +++ .github/FUNDING.yml | 12 + AGENTS.md | 4 +- CLAUDE.md | 4 +- web/default/AGENTS.md | 2 +- web/default/bun.lock | 178 ++- web/default/components.json | 2 +- web/default/package.json | 29 +- web/default/rsbuild.config.ts | 6 +- .../src/assets/custom/icon-theme-system.tsx | 2 +- .../src/components/ai-elements/actions.tsx | 2 +- .../src/components/ai-elements/artifact.tsx | 2 +- .../ai-elements/chain-of-thought.tsx | 4 +- .../src/components/ai-elements/context.tsx | 24 +- .../ai-elements/inline-citation.tsx | 38 +- .../components/ai-elements/open-in-chat.tsx | 167 +-- .../src/components/ai-elements/plan.tsx | 38 +- .../components/ai-elements/prompt-input.tsx | 110 +- .../src/components/ai-elements/queue.tsx | 28 +- .../src/components/ai-elements/reasoning.tsx | 4 +- .../src/components/ai-elements/sources.tsx | 2 +- .../src/components/ai-elements/task.tsx | 22 +- .../src/components/ai-elements/tool.tsx | 6 +- .../components/ai-elements/web-preview.tsx | 52 +- web/default/src/components/command-menu.tsx | 99 +- web/default/src/components/config-drawer.tsx | 421 +++++-- web/default/src/components/confirm-dialog.tsx | 4 +- web/default/src/components/copy-button.tsx | 2 +- .../components/data-table/bulk-actions.tsx | 28 +- .../components/data-table/column-header.tsx | 44 +- .../components/data-table/data-table-page.tsx | 372 ++++++ .../components/data-table/faceted-filter.tsx | 80 +- .../src/components/data-table/index.ts | 1 + .../data-table/mobile-card-list.tsx | 2 +- .../src/components/data-table/pagination.tsx | 12 +- .../src/components/data-table/toolbar.tsx | 283 +++-- .../components/data-table/view-options.tsx | 63 +- web/default/src/components/date-picker.tsx | 28 +- .../src/components/datetime-picker.tsx | 24 +- .../src/components/language-switcher.tsx | 16 +- .../layout/components/app-header.tsx | 24 +- .../layout/components/app-sidebar.tsx | 13 +- .../components/authenticated-layout.tsx | 26 +- .../layout/components/chat-presets-item.tsx | 100 +- .../components/layout/components/footer.tsx | 9 +- .../components/layout/components/header.tsx | 11 +- .../layout/components/mobile-drawer.tsx | 11 +- .../layout/components/nav-group.tsx | 126 +- .../layout/components/public-header.tsx | 4 +- .../layout/components/public-layout.tsx | 2 +- .../layout/components/section-page-layout.tsx | 19 +- .../components/layout/components/top-nav.tsx | 51 +- .../layout/components/workspace-switcher.tsx | 141 ++- web/default/src/components/learn-more.tsx | 16 +- web/default/src/components/long-text.tsx | 18 +- .../src/components/masked-value-display.tsx | 10 +- .../src/components/model-group-selector.tsx | 38 +- .../src/components/profile-dropdown.tsx | 194 ++- .../src/components/select-dropdown.tsx | 65 - web/default/src/components/status-badge.tsx | 3 +- web/default/src/components/theme-switch.tsx | 18 +- web/default/src/components/ui/accordion.tsx | 61 +- .../src/components/ui/alert-dialog.tsx | 100 +- web/default/src/components/ui/alert.tsx | 20 +- .../src/components/ui/aspect-ratio.tsx | 22 + web/default/src/components/ui/avatar.tsx | 78 +- web/default/src/components/ui/badge.tsx | 48 +- web/default/src/components/ui/breadcrumb.tsx | 125 ++ .../src/components/ui/button-group.tsx | 86 ++ web/default/src/components/ui/button.tsx | 61 +- web/default/src/components/ui/calendar.tsx | 200 +--- web/default/src/components/ui/card.tsx | 23 +- web/default/src/components/ui/carousel.tsx | 16 +- web/default/src/components/ui/chart.tsx | 370 ++++++ web/default/src/components/ui/checkbox.tsx | 19 +- web/default/src/components/ui/collapsible.tsx | 26 +- web/default/src/components/ui/combobox.tsx | 467 +++++--- web/default/src/components/ui/command.tsx | 74 +- .../src/components/ui/context-menu.tsx | 276 +++++ web/default/src/components/ui/dialog.tsx | 84 +- web/default/src/components/ui/direction.tsx | 4 + web/default/src/components/ui/drawer.tsx | 16 +- .../src/components/ui/dropdown-menu.tsx | 264 +++-- web/default/src/components/ui/empty.tsx | 15 +- web/default/src/components/ui/field.tsx | 235 ++++ web/default/src/components/ui/form.tsx | 35 +- web/default/src/components/ui/hover-card.tsx | 53 +- web/default/src/components/ui/input-group.tsx | 44 +- web/default/src/components/ui/input-otp.tsx | 22 +- web/default/src/components/ui/input.tsx | 7 +- web/default/src/components/ui/item.tsx | 200 ++++ web/default/src/components/ui/kbd.tsx | 26 + web/default/src/components/ui/label.tsx | 52 +- web/default/src/components/ui/menubar.tsx | 284 +++++ .../src/components/ui/native-select.tsx | 67 ++ .../src/components/ui/navigation-menu.tsx | 173 +++ web/default/src/components/ui/pagination.tsx | 141 +++ web/default/src/components/ui/popover.tsx | 94 +- web/default/src/components/ui/progress.tsx | 76 +- web/default/src/components/ui/radio-group.tsx | 33 +- web/default/src/components/ui/resizable.tsx | 49 + web/default/src/components/ui/scroll-area.tsx | 20 +- web/default/src/components/ui/select.tsx | 155 ++- web/default/src/components/ui/separator.tsx | 11 +- web/default/src/components/ui/sheet.tsx | 85 +- web/default/src/components/ui/sidebar.tsx | 339 +++--- web/default/src/components/ui/skeleton.tsx | 2 +- web/default/src/components/ui/slider.tsx | 51 + web/default/src/components/ui/sonner.tsx | 63 +- web/default/src/components/ui/spinner.tsx | 25 + web/default/src/components/ui/switch.tsx | 15 +- web/default/src/components/ui/table.tsx | 10 +- web/default/src/components/ui/tabs.tsx | 60 +- web/default/src/components/ui/textarea.tsx | 2 +- web/default/src/components/ui/titled-card.tsx | 14 +- .../src/components/ui/toggle-group.tsx | 86 ++ web/default/src/components/ui/toggle.tsx | 44 + web/default/src/components/ui/tooltip.tsx | 61 +- .../src/context/direction-provider.tsx | 4 +- .../context/theme-customization-provider.tsx | 208 ++++ .../auth/components/legal-consent.tsx | 2 +- .../sign-in/components/user-auth-form.tsx | 1 + .../auth/sign-up/components/sign-up-form.tsx | 1 + .../channels/components/channels-columns.tsx | 150 +-- .../components/channels-primary-buttons.tsx | 6 +- .../channels/components/channels-table.tsx | 183 +-- .../components/data-table-bulk-actions.tsx | 108 +- .../components/data-table-row-actions.tsx | 92 +- .../components/data-table-tag-row-actions.tsx | 18 +- .../dialogs/channel-test-dialog.tsx | 43 +- .../components/dialogs/edit-tag-dialog.tsx | 3 +- .../dialogs/fetch-models-dialog.tsx | 6 +- .../missing-models-confirmation-dialog.tsx | 30 +- .../dialogs/multi-key-manage-dialog.tsx | 2 +- .../dialogs/param-override-editor-dialog.tsx | 6 + .../drawers/channel-mutate-drawer.tsx | 72 +- .../models/consumption-distribution-chart.tsx | 20 +- .../components/models/log-stat-cards.tsx | 2 +- .../components/models/model-charts.tsx | 4 +- .../models/models-chart-preferences.tsx | 10 +- .../models/models-filter-dialog.tsx | 12 +- .../components/overview/api-info-item.tsx | 6 +- .../components/overview/faq-panel.tsx | 2 +- .../components/overview/summary-cards.tsx | 8 +- .../dashboard/components/ui/stat-card.tsx | 4 +- .../components/users/user-charts.tsx | 12 +- web/default/src/features/dashboard/index.tsx | 13 +- .../src/features/dashboard/lib/charts.ts | 20 +- .../src/features/dashboard/lib/filters.ts | 4 +- .../features/home/components/hero-buttons.tsx | 18 +- .../home/components/hero-terminal-demo.tsx | 40 +- .../features/home/components/sections/cta.tsx | 12 +- .../home/components/sections/hero.tsx | 26 +- .../components/api-key-group-combobox.tsx | 59 +- .../keys/components/api-keys-cells.tsx | 80 +- .../keys/components/api-keys-columns.tsx | 58 +- .../components/api-keys-mutate-drawer.tsx | 61 +- .../keys/components/api-keys-table.tsx | 143 +-- .../components/data-table-bulk-actions.tsx | 56 +- .../components/data-table-row-actions.tsx | 64 +- web/default/src/features/keys/index.tsx | 4 + .../src/features/legal/legal-document.tsx | 14 +- .../components/data-table-bulk-actions.tsx | 104 +- .../components/data-table-row-actions.tsx | 18 +- .../models/components/deployments-table.tsx | 119 +- .../dialogs/create-deployment-drawer.tsx | 4 +- .../dialogs/missing-models-dialog.tsx | 6 +- .../prefill-group-management-dialog.tsx | 20 +- .../components/dialogs/sync-wizard-dialog.tsx | 6 +- .../dialogs/upstream-conflict-dialog.tsx | 32 +- .../dialogs/view-details-dialog.tsx | 8 +- .../components/dialogs/view-logs-dialog.tsx | 2 +- .../drawers/model-mutate-drawer.tsx | 40 +- .../drawers/prefill-group-form-drawer.tsx | 15 +- .../models/components/models-columns.tsx | 30 +- .../components/models-primary-buttons.tsx | 6 +- .../models/components/models-table.tsx | 161 +-- web/default/src/features/models/index.tsx | 4 +- .../components/message-action-button.tsx | 24 +- .../playground/components/message-actions.tsx | 2 +- .../components/playground-input.tsx | 22 +- .../components/dynamic-pricing-breakdown.tsx | 3 +- .../pricing/components/filter-bar.tsx | 727 ------------ .../src/features/pricing/components/index.ts | 7 +- .../pricing/components/model-card.tsx | 62 +- .../pricing/components/model-details-api.tsx | 871 ++++++++++++++ .../pricing/components/model-details-apps.tsx | 212 ++++ .../components/model-details-capabilities.tsx | 163 +++ .../components/model-details-charts.tsx | 298 +++++ .../components/model-details-modalities.tsx | 155 +++ .../components/model-details-performance.tsx | 335 ++++++ .../components/model-details-quick-stats.tsx | 129 ++ .../model-details-uptime-sparkline.tsx | 211 ++++ .../pricing/components/model-details.tsx | 466 +++++--- .../pricing/components/pricing-columns.tsx | 22 +- .../pricing/components/pricing-sidebar.tsx | 23 +- .../pricing/components/pricing-toolbar.tsx | 44 +- .../src/features/pricing/hooks/use-filters.ts | 23 +- web/default/src/features/pricing/index.tsx | 32 +- .../src/features/pricing/lib/dynamic-price.ts | 6 +- web/default/src/features/pricing/lib/index.ts | 3 + .../src/features/pricing/lib/mock-stats.ts | 844 +++++++++++++ .../features/pricing/lib/model-metadata.ts | 548 +++++++++ web/default/src/features/pricing/lib/seed.ts | 45 + web/default/src/features/pricing/types.ts | 32 + web/default/src/features/profile/api.ts | 4 +- .../components/checkin-calendar-card.tsx | 4 +- .../components/language-preferences-card.tsx | 61 +- .../profile/components/passkey-card.tsx | 92 +- .../components/profile-security-card.tsx | 60 +- .../components/profile-settings-card.tsx | 62 +- web/default/src/features/profile/index.tsx | 77 +- .../rankings/components/apps-section.tsx | 97 ++ .../rankings/components/category-section.tsx | 205 ++++ .../rankings/components/entity-links.tsx | 63 + .../rankings/components/growth-text.tsx | 42 + .../src/features/rankings/components/index.ts | 9 + .../components/market-share-section.tsx | 284 +++++ .../rankings/components/model-leaderboard.tsx | 119 ++ .../rankings/components/models-section.tsx | 203 ++++ .../rankings/components/pulse-section.tsx | 172 +++ .../rankings/components/rankings-hero.tsx | 79 ++ .../features/rankings/hooks/use-rankings.ts | 15 + web/default/src/features/rankings/index.tsx | 92 ++ .../src/features/rankings/lib/format.ts | 35 + .../src/features/rankings/lib/index.ts | 2 + .../features/rankings/lib/mock-rankings.ts | 1048 +++++++++++++++++ web/default/src/features/rankings/types.ts | 199 ++++ .../components/data-table-bulk-actions.tsx | 26 +- .../components/data-table-row-actions.tsx | 27 +- .../components/redemptions-columns.tsx | 24 +- .../components/redemptions-mutate-drawer.tsx | 4 +- .../components/redemptions-table.tsx | 150 +-- .../setup/components/usage-mode-step.tsx | 8 +- .../components/data-table-row-actions.tsx | 8 +- .../dialogs/subscription-purchase-dialog.tsx | 6 +- .../dialogs/user-subscriptions-dialog.tsx | 5 +- .../components/subscriptions-columns.tsx | 4 +- .../subscriptions-mutate-drawer.tsx | 4 +- .../components/subscriptions-table.tsx | 96 +- .../components/preset-selector.tsx | 5 +- .../general/channel-affinity/index.tsx | 10 +- .../channel-affinity/rule-editor-dialog.tsx | 26 +- .../src/features/system-settings/index.tsx | 15 +- .../payment-methods-visual-editor.tsx | 12 +- .../maintenance/performance-section.tsx | 30 +- .../models/channel-selector-dialog.tsx | 11 +- .../models/group-ratio-visual-editor.tsx | 8 +- .../models/group-special-usable-editor.tsx | 22 +- .../models/model-ratio-dialog.tsx | 26 +- .../models/tiered-pricing-editor.tsx | 31 +- .../models/upstream-ratio-sync-columns.tsx | 35 +- .../models/upstream-ratio-sync-table.tsx | 2 +- .../components/columns/column-helpers.tsx | 11 +- .../columns/common-logs-columns.tsx | 182 ++- .../columns/drawing-logs-columns.tsx | 2 +- .../components/columns/task-logs-columns.tsx | 107 +- .../components/common-logs-filter-bar.tsx | 247 ++-- .../components/common-logs-header-actions.tsx | 46 + .../components/common-logs-stats.tsx | 4 +- .../compact-date-time-range-picker.tsx | 41 +- .../components/dialogs/details-dialog.tsx | 4 +- .../components/dialogs/filter-components.tsx | 60 - .../dialogs/usage-logs-filter-dialog.tsx | 371 ------ .../usage-logs/components/model-badge.tsx | 14 +- .../components/task-logs-filter-bar.tsx | 106 +- .../components/usage-logs-primary-buttons.tsx | 32 - .../components/usage-logs-table.tsx | 152 +-- web/default/src/features/usage-logs/index.tsx | 15 +- .../src/features/usage-logs/lib/format.ts | 68 +- .../components/data-table-row-actions.tsx | 18 +- .../dialogs/user-binding-dialog.tsx | 30 +- .../users/components/users-columns.tsx | 90 +- .../users/components/users-mutate-drawer.tsx | 6 +- .../features/users/components/users-table.tsx | 152 +-- .../components/affiliate-rewards-card.tsx | 2 +- .../dialogs/billing-history-dialog.tsx | 4 +- .../wallet/components/recharge-form-card.tsx | 514 ++++---- .../components/subscription-plans-card.tsx | 630 +++++----- web/default/src/hooks/use-mobile.ts | 19 + web/default/src/hooks/use-top-nav-links.ts | 8 + .../i18n/locales/_reports/_sync-report.json | 6 +- .../locales/_reports/fr.untranslated.json | 5 +- .../locales/_reports/ja.untranslated.json | 3 + .../locales/_reports/ru.untranslated.json | 3 + .../locales/_reports/vi.untranslated.json | 5 +- .../locales/_reports/zh.untranslated.json | 3 + web/default/src/i18n/locales/en.json | 302 ++++- web/default/src/i18n/locales/fr.json | 302 ++++- web/default/src/i18n/locales/ja.json | 302 ++++- web/default/src/i18n/locales/ru.json | 302 ++++- web/default/src/i18n/locales/vi.json | 302 ++++- web/default/src/i18n/locales/zh.json | 306 ++++- .../lib/avatar-color.ts => lib/avatar.ts} | 13 +- web/default/src/lib/colors.ts | 18 +- web/default/src/lib/theme-customization.ts | 99 ++ web/default/src/lib/use-chart-theme.ts | 42 + web/default/src/lib/use-controllable-state.ts | 68 ++ web/default/src/routeTree.gen.ts | 21 + web/default/src/routes/__root.tsx | 5 +- .../routes/_authenticated/chat/$chatId.tsx | 8 +- .../_authenticated/playground/index.tsx | 11 +- web/default/src/routes/rankings/index.tsx | 15 + web/default/src/styles/index.css | 11 +- web/default/src/styles/theme-presets.css | 327 +++++ web/default/src/styles/theme.css | 163 +-- 317 files changed, 19871 insertions(+), 7008 deletions(-) create mode 100644 .agents/skills/shadcn-ui/SKILL.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/SKILL.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/cli.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/customization.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/mcp.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md create mode 100644 .agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md create mode 100644 .github/FUNDING.yml create mode 100644 web/default/src/components/data-table/data-table-page.tsx delete mode 100644 web/default/src/components/select-dropdown.tsx create mode 100644 web/default/src/components/ui/aspect-ratio.tsx create mode 100644 web/default/src/components/ui/breadcrumb.tsx create mode 100644 web/default/src/components/ui/button-group.tsx create mode 100644 web/default/src/components/ui/chart.tsx create mode 100644 web/default/src/components/ui/context-menu.tsx create mode 100644 web/default/src/components/ui/direction.tsx create mode 100644 web/default/src/components/ui/field.tsx create mode 100644 web/default/src/components/ui/item.tsx create mode 100644 web/default/src/components/ui/kbd.tsx create mode 100644 web/default/src/components/ui/menubar.tsx create mode 100644 web/default/src/components/ui/native-select.tsx create mode 100644 web/default/src/components/ui/navigation-menu.tsx create mode 100644 web/default/src/components/ui/pagination.tsx create mode 100644 web/default/src/components/ui/resizable.tsx create mode 100644 web/default/src/components/ui/slider.tsx create mode 100644 web/default/src/components/ui/spinner.tsx create mode 100644 web/default/src/components/ui/toggle-group.tsx create mode 100644 web/default/src/components/ui/toggle.tsx create mode 100644 web/default/src/context/theme-customization-provider.tsx delete mode 100644 web/default/src/features/pricing/components/filter-bar.tsx create mode 100644 web/default/src/features/pricing/components/model-details-api.tsx create mode 100644 web/default/src/features/pricing/components/model-details-apps.tsx create mode 100644 web/default/src/features/pricing/components/model-details-capabilities.tsx create mode 100644 web/default/src/features/pricing/components/model-details-charts.tsx create mode 100644 web/default/src/features/pricing/components/model-details-modalities.tsx create mode 100644 web/default/src/features/pricing/components/model-details-performance.tsx create mode 100644 web/default/src/features/pricing/components/model-details-quick-stats.tsx create mode 100644 web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx create mode 100644 web/default/src/features/pricing/lib/mock-stats.ts create mode 100644 web/default/src/features/pricing/lib/model-metadata.ts create mode 100644 web/default/src/features/pricing/lib/seed.ts create mode 100644 web/default/src/features/rankings/components/apps-section.tsx create mode 100644 web/default/src/features/rankings/components/category-section.tsx create mode 100644 web/default/src/features/rankings/components/entity-links.tsx create mode 100644 web/default/src/features/rankings/components/growth-text.tsx create mode 100644 web/default/src/features/rankings/components/index.ts create mode 100644 web/default/src/features/rankings/components/market-share-section.tsx create mode 100644 web/default/src/features/rankings/components/model-leaderboard.tsx create mode 100644 web/default/src/features/rankings/components/models-section.tsx create mode 100644 web/default/src/features/rankings/components/pulse-section.tsx create mode 100644 web/default/src/features/rankings/components/rankings-hero.tsx create mode 100644 web/default/src/features/rankings/hooks/use-rankings.ts create mode 100644 web/default/src/features/rankings/index.tsx create mode 100644 web/default/src/features/rankings/lib/format.ts create mode 100644 web/default/src/features/rankings/lib/index.ts create mode 100644 web/default/src/features/rankings/lib/mock-rankings.ts create mode 100644 web/default/src/features/rankings/types.ts create mode 100644 web/default/src/features/usage-logs/components/common-logs-header-actions.tsx delete mode 100644 web/default/src/features/usage-logs/components/dialogs/filter-components.tsx delete mode 100644 web/default/src/features/usage-logs/components/dialogs/usage-logs-filter-dialog.tsx delete mode 100644 web/default/src/features/usage-logs/components/usage-logs-primary-buttons.tsx create mode 100644 web/default/src/hooks/use-mobile.ts rename web/default/src/{features/usage-logs/lib/avatar-color.ts => lib/avatar.ts} (58%) create mode 100644 web/default/src/lib/theme-customization.ts create mode 100644 web/default/src/lib/use-chart-theme.ts create mode 100644 web/default/src/lib/use-controllable-state.ts create mode 100644 web/default/src/routes/rankings/index.tsx create mode 100644 web/default/src/styles/theme-presets.css diff --git a/.agents/skills/classic-to-default-sync/SKILL.md b/.agents/skills/classic-to-default-sync/SKILL.md index 5689fe0633a..282e0492e15 100644 --- a/.agents/skills/classic-to-default-sync/SKILL.md +++ b/.agents/skills/classic-to-default-sync/SKILL.md @@ -26,7 +26,7 @@ Read every changed file in `web/classic`. Identify the **logical changes** (new For each logical change found in Step 1, locate the equivalent file(s) in `web/default/src/`. Use Glob/Grep/SemanticSearch as needed. Consider that: - `web/classic` uses **React 18 + Vite + Semi Design** -- `web/default` uses **React 19 + Rsbuild + Radix UI + Tailwind CSS** +- `web/default` uses **React 19 + Rsbuild + Base UI + Tailwind CSS** - Component names, file paths, and API shapes may differ; match by **functionality**, not filename. ### Step 3 — Triage each change @@ -46,7 +46,7 @@ For each **⚠️** or **❌** item: 1. **Read the target file(s) in `web/default`** before editing (required by project conventions). 2. Implement using `web/default` conventions: - React 19 patterns (hooks, Suspense, etc.) - - Radix UI primitives where applicable + - Base UI primitives where applicable - Tailwind CSS for styling (no inline styles or Semi Design imports) - `useTranslation()` + `t('English key')` for all user-visible strings - TypeScript — explicit types, no `any` diff --git a/.agents/skills/shadcn-ui/SKILL.md b/.agents/skills/shadcn-ui/SKILL.md new file mode 100644 index 00000000000..8307cdc1529 --- /dev/null +++ b/.agents/skills/shadcn-ui/SKILL.md @@ -0,0 +1,105 @@ +--- +name: shadcn-ui +description: >- + Give the assistant project-aware shadcn/ui context: components.json, + composition patterns, CLI, registries, theming, and MCP. Use when working on + web/default UI, shadcn components, or presets. Overview aligns with + https://ui.shadcn.com/docs/skills.md; full upstream skill text is vendored + under vendor/shadcn/. +--- + + + +# Skills (shadcn/ui) + +Skills give AI assistants project-aware context about shadcn/ui. When used, the assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project. + +For example, you can ask: + +- _"Add a login form with email and password fields."_ +- _"Create a settings page with a form for updating profile information."_ +- _"Build a dashboard with a sidebar, stats cards, and a data table."_ +- _"Switch to --preset [CODE]"_ +- _"Can you add a hero from @tailark?"_ + +The skill reads your project's `components.json` and provides your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try. + +--- + +## Install (ecosystem vs this repo) + +Official install from [Skills — shadcn/ui](https://ui.shadcn.com/docs/skills.md): + +```bash +npx skills add shadcn/ui +``` + +That installs the skill where the `skills` CLI is available. **This repository** keeps the same intent under `.agents/skills/shadcn-ui/` (overview here + **vendored** upstream docs in [`vendor/shadcn/`](./vendor/shadcn/)) and runs the shadcn CLI from the frontend app root: + +```bash +cd web/default && bunx shadcn@latest info --json +``` + +Learn more about skills at [skills.sh](https://skills.sh). + +--- + +## What's included (and where) + +### Project context + +Run **`shadcn info --json`** (here: `cd web/default && bunx shadcn@latest info --json`) for framework, Tailwind version, aliases, base (`radix` | `base`), icon library, installed components, and resolved paths. + +### CLI commands + +Full command reference (vendored): [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md). + +### Theming and customization + +Vendored: [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md). Live docs: [Theming](https://ui.shadcn.com/docs/theming). + +### Registry authoring + +Not duplicated as a single file in the vendor tree; see [Registry](https://ui.shadcn.com/docs/registry) and `build` in [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md). + +### MCP server + +Vendored: [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md). Live docs: [MCP Server](https://ui.shadcn.com/docs/mcp). + +--- + +## How it works + +1. **Project detection** — Applies when `components.json` exists (here: `web/default/components.json`). +2. **Context injection** — Use `shadcn info --json` as ground truth for imports and APIs. +3. **Pattern enforcement** — Follow rules in [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) and [`vendor/shadcn/rules/`](./vendor/shadcn/rules/). +4. **Component discovery** — `shadcn docs`, `shadcn search`, MCP, or registries — see vendored SKILL + MCP doc. + +--- + +## Learn more (web) + +- [CLI](https://ui.shadcn.com/docs/cli) — complements [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md) +- [Theming](https://ui.shadcn.com/docs/theming) +- [Registry](https://ui.shadcn.com/docs/registry) +- [skills.sh](https://skills.sh) + +--- + +## Vendored upstream bundle (deep rules) + +Snapshot from [shadcn-ui/ui `skills/shadcn`](https://github.com/shadcn-ui/ui/tree/main/skills/shadcn); revision note in [`vendor/shadcn/UPSTREAM.txt`](./vendor/shadcn/UPSTREAM.txt). + +| Doc | Path | +| --- | --- | +| Full official skill body | [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) | +| CLI reference | [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md) | +| Theming / customization | [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md) | +| MCP | [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md) | +| Forms | [`vendor/shadcn/rules/forms.md`](./vendor/shadcn/rules/forms.md) | +| Composition | [`vendor/shadcn/rules/composition.md`](./vendor/shadcn/rules/composition.md) | +| Icons | [`vendor/shadcn/rules/icons.md`](./vendor/shadcn/rules/icons.md) | +| Styling | [`vendor/shadcn/rules/styling.md`](./vendor/shadcn/rules/styling.md) | +| Base vs Radix | [`vendor/shadcn/rules/base-vs-radix.md`](./vendor/shadcn/rules/base-vs-radix.md) | + +**Workflow:** Prefer this **root** `SKILL.md` for repo paths (`web/default`, Bun). Read **`vendor/shadcn/SKILL.md`** for the complete upstream workflow, patterns, and CLI quick reference. Use **`vendor/shadcn/rules/*.md`** when validating concrete markup. diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md b/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md new file mode 100644 index 00000000000..016f824d179 --- /dev/null +++ b/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md @@ -0,0 +1,260 @@ +--- +name: shadcn +description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". +user-invocable: false +allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) +--- + +# shadcn/ui + +A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. + +> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +## Current Project Context + +```json +!`npx shadcn@latest info --json` +``` + +The JSON above contains the project config and installed components. Use `npx shadcn@latest docs ` to get documentation and example URLs for any component. + +## Principles + +1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. +2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. +3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. +4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. + +## Critical Rules + +These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. + +### Styling & Tailwind → [styling.md](./rules/styling.md) + +- **`className` for layout, not styling.** Never override component colors or typography. +- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. +- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. +- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. +- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). +- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. +- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. + +### Forms & Inputs → [forms.md](./rules/forms.md) + +- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout. +- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`. +- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.** +- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state. +- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading. +- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control. + +### Component Structure → [composition.md](./rules/composition.md) + +- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`. +- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden. +- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`. +- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`. +- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`. +- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load. + +### Use Components, Not Custom Markup → [composition.md](./rules/composition.md) + +- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`. +- **Callouts use `Alert`.** Don't build custom styled divs. +- **Empty states use `Empty`.** Don't build custom empty state markup. +- **Toast via `sonner`.** Use `toast()` from `sonner`. +- **Use `Separator`** instead of `
` or `
`. +- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs. +- **Use `Badge`** instead of custom styled spans. + +### Icons → [icons.md](./rules/icons.md) + +- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon. +- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`. +- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup. + +### CLI + +- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode `, `preset url `, or `preset open `. For project-aware preset detection, use `npx shadcn@latest preset resolve`. +- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply ` for existing projects, or `npx shadcn@latest init --preset ` when initializing. + +## Key Patterns + +These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above. + +```tsx +// Form layout: FieldGroup + Field, not div + Label. + + + Email + + + + +// Validation: data-invalid on Field, aria-invalid on the control. + + Email + + Invalid email. + + +// Icons in buttons: data-icon, no sizing classes. + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). +- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information. + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**? + - **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values. + - **Inspect incoming preset**: `npx shadcn@latest preset decode `. Use `preset url ` or `preset open ` to share or open the preset builder. + - **Overwrite**: `npx shadcn@latest apply `. Overwrites detected components, fonts, and CSS variables. + - **Partial**: `npx shadcn@latest apply --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + - **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base ` explicitly — preset codes do not encode the base. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=nova (base style implied) + +# Apply a preset to an existing project. +npx shadcn@latest apply a2r6bw +npx shadcn@latest apply a2r6bw --only theme +npx shadcn@latest apply a2r6bw --only font +npx shadcn@latest apply a2r6bw --only theme,font + +# Inspect preset codes and project preset state. +npx shadcn@latest preset decode a2r6bw +npx shadcn@latest preset url a2r6bw +npx shadcn@latest preset open a2r6bw +npx shadcn@latest preset resolve +npx shadcn@latest preset resolve --json + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +``` + +**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt b/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt new file mode 100644 index 00000000000..c065d2e6ec3 --- /dev/null +++ b/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt @@ -0,0 +1,3 @@ +Source: https://github.com/shadcn-ui/ui/tree/56161142f1b83f612462772d18883807b5f0d601/skills/shadcn +Branch: main +Fetched: 2026-04-29 diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/cli.md b/.agents/skills/shadcn-ui/vendor/shadcn/cli.md new file mode 100644 index 00000000000..c3a0f0aa748 --- /dev/null +++ b/.agents/skills/shadcn-ui/vendor/shadcn/cli.md @@ -0,0 +1,276 @@ +# shadcn CLI Reference + +Configuration is read from `components.json`. + +> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template