@vllnt/ui 0.2.1-canary.c0bc557 → 0.2.1-canary.d519db2
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/CHANGELOG.md +3 -0
- package/dist/components/accordion/accordion.js +2 -2
- package/dist/components/activity-heatmap/activity-heatmap.js +17 -14
- package/dist/components/activity-log/activity-log.js +5 -5
- package/dist/components/agent-activity/agent-activity.js +8 -8
- package/dist/components/ai-artifact/ai-artifact.js +16 -16
- package/dist/components/ai-chat-input/ai-chat-input.js +2 -2
- package/dist/components/ai-message-bubble/ai-message-bubble.js +1 -1
- package/dist/components/ai-sidebar/ai-sidebar.js +8 -8
- package/dist/components/ai-source-citation/ai-source-citation.js +2 -2
- package/dist/components/ai-tool-call-display/ai-tool-call-display.js +4 -4
- package/dist/components/animated-text/animated-text.js +7 -7
- package/dist/components/auto-reload/auto-reload.js +14 -4
- package/dist/components/avatar/avatar.js +1 -1
- package/dist/components/avatar-group/avatar-group.js +4 -4
- package/dist/components/banner/banner.js +3 -3
- package/dist/components/blog-card/blog-card.js +3 -1
- package/dist/components/bottom-activity-strip/bottom-activity-strip.js +3 -3
- package/dist/components/breadcrumb/breadcrumb.js +33 -26
- package/dist/components/button/button.js +1 -1
- package/dist/components/calendar/calendar.js +6 -6
- package/dist/components/callout/callout.js +1 -1
- package/dist/components/candlestick-chart/candlestick-chart.js +3 -2
- package/dist/components/canvas-shell/canvas-foundation-demo.js +4 -4
- package/dist/components/carousel/carousel.js +18 -10
- package/dist/components/chat-dock-section/chat-dock-section.js +1 -1
- package/dist/components/checkbox/checkbox.js +2 -2
- package/dist/components/checklist/checklist.js +38 -10
- package/dist/components/checklist/index.js +8 -2
- package/dist/components/chronological-timeline/chronological-timeline.js +8 -7
- package/dist/components/civilization-card/civilization-card.js +1 -1
- package/dist/components/code-block/code-block.js +2 -2
- package/dist/components/code-playground/code-playground.js +10 -8
- package/dist/components/combobox/combobox.js +46 -27
- package/dist/components/command/command.js +1 -1
- package/dist/components/comment-pin/comment-pin.js +3 -3
- package/dist/components/comparison/comparison.js +11 -10
- package/dist/components/completion-dialog/completion-dialog.js +19 -11
- package/dist/components/content-intro/content-intro.js +24 -20
- package/dist/components/context-menu/context-menu.js +4 -4
- package/dist/components/conversation-thread/conversation-thread.js +8 -8
- package/dist/components/cookie-consent/cookie-consent.js +1 -1
- package/dist/components/copy-button/copy-button.js +3 -3
- package/dist/components/countdown-timer/countdown-timer.js +8 -7
- package/dist/components/credit-badge/credit-badge.js +1 -7
- package/dist/components/curriculum/curriculum.js +10 -10
- package/dist/components/data-list/data-list.js +1 -1
- package/dist/components/data-table/data-table.js +5 -4
- package/dist/components/date-picker/date-picker.js +1 -6
- package/dist/components/dialog/dialog.js +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +3 -3
- package/dist/components/empty-state/empty-state.js +3 -3
- package/dist/components/exercise/exercise.js +14 -6
- package/dist/components/faq/faq.js +8 -4
- package/dist/components/file-upload/file-upload.js +3 -8
- package/dist/components/filter-bar/filter-bar.js +8 -7
- package/dist/components/flashcard/flashcard.js +1 -1
- package/dist/components/floating-action-button/floating-action-button.js +1 -1
- package/dist/components/floating-toolbar/floating-toolbar.js +3 -3
- package/dist/components/flow-diagram/flow-controls.js +9 -9
- package/dist/components/flow-diagram/flow-error-boundary.js +2 -2
- package/dist/components/flow-diagram/flow-fullscreen.js +2 -2
- package/dist/components/gantt-chart/gantt-chart.js +22 -19
- package/dist/components/globe-3d/globe-3d.js +16 -4
- package/dist/components/handoff-beacon/handoff-beacon.js +1 -1
- package/dist/components/historic-timeline/historic-timeline.js +2 -2
- package/dist/components/historical-figure-card/historical-figure-card.js +4 -7
- package/dist/components/horizontal-scroll-row/horizontal-scroll-row.js +6 -5
- package/dist/components/input-otp/input-otp.js +1 -1
- package/dist/components/interactive-timeline/interactive-timeline.js +12 -9
- package/dist/components/jarvis-dock/jarvis-dock.js +4 -4
- package/dist/components/key-concept/key-concept.js +6 -5
- package/dist/components/keyboard-shortcuts-help/keyboard-shortcuts-help.js +4 -3
- package/dist/components/knowledge-check/knowledge-check.js +5 -5
- package/dist/components/lang-provider/lang-provider.js +3 -3
- package/dist/components/learning-objectives/learning-objectives.js +14 -13
- package/dist/components/live-feed/live-feed.js +16 -14
- package/dist/components/map-2d/map-2d.js +3 -3
- package/dist/components/map-timeline/map-timeline.js +5 -5
- package/dist/components/market-treemap/market-treemap.js +3 -3
- package/dist/components/mdx-content/mdx-content.js +19 -9
- package/dist/components/menubar/menubar.js +4 -4
- package/dist/components/metric-cluster/metric-cluster.js +1 -1
- package/dist/components/metric-gauge/metric-gauge.js +1 -1
- package/dist/components/model-comparison/model-comparison.js +2 -2
- package/dist/components/model-selector/model-selector.js +2 -2
- package/dist/components/multi-select/multi-select.js +3 -3
- package/dist/components/navbar-saas/navbar-saas.js +4 -2
- package/dist/components/navigation-menu/navigation-menu.js +2 -2
- package/dist/components/newsletter-signup/newsletter-signup.js +3 -3
- package/dist/components/number-input/number-input.js +1 -1
- package/dist/components/number-ticker/number-ticker.js +11 -4
- package/dist/components/object-inspector/object-inspector.js +1 -1
- package/dist/components/order-book/order-book.js +2 -2
- package/dist/components/parallel-timeline/parallel-timeline.js +2 -2
- package/dist/components/password-input/password-input.js +1 -1
- package/dist/components/plan-badge/plan-badge.js +1 -7
- package/dist/components/policy-delivery-panel/policy-delivery-panel.js +2 -2
- package/dist/components/presence-stack/presence-stack.js +2 -2
- package/dist/components/presence-sync-indicator/presence-sync-indicator.js +1 -1
- package/dist/components/pricing-table/pricing-table.js +3 -3
- package/dist/components/pro-tip/pro-tip.js +6 -6
- package/dist/components/profile-section/profile-section.js +3 -2
- package/dist/components/progress-card/progress-card.js +4 -3
- package/dist/components/progress-tracker/progress-tracker.js +23 -13
- package/dist/components/prompt-templates/prompt-templates.js +4 -4
- package/dist/components/quiz/quiz.js +7 -6
- package/dist/components/radio-group/radio-group.js +2 -2
- package/dist/components/rating/rating.js +3 -3
- package/dist/components/relationship-inspector/relationship-inspector.js +2 -2
- package/dist/components/resizable/resizable.js +1 -1
- package/dist/components/routing-assignment-panel/routing-assignment-panel.js +2 -2
- package/dist/components/run-timeline/run-timeline.js +2 -2
- package/dist/components/runtime-overview-panel/runtime-overview-panel.js +1 -1
- package/dist/components/scope-selector/scope-selector.js +7 -7
- package/dist/components/search-bar/search-bar.js +24 -2
- package/dist/components/search-dialog/search-dialog.js +483 -50
- package/dist/components/select/select.js +5 -5
- package/dist/components/selection-halo/selection-halo.js +1 -1
- package/dist/components/severity-badge/severity-badge.js +2 -2
- package/dist/components/share-dialog/share-dialog.js +2 -2
- package/dist/components/share-section/share-section.js +2 -1
- package/dist/components/sheet/sheet.js +1 -1
- package/dist/components/sidebar/sidebar.js +21 -20
- package/dist/components/sidebar-toggle/sidebar-toggle.js +2 -2
- package/dist/components/slider/slider.js +1 -1
- package/dist/components/slideshow/slideshow.js +14 -12
- package/dist/components/social-fab/social-fab.js +12 -11
- package/dist/components/sparkline-grid/sparkline-grid.js +1 -1
- package/dist/components/spinner/spinner.js +4 -4
- package/dist/components/spinner/unicode-spinner.js +4 -2
- package/dist/components/stat-card/stat-card.js +4 -4
- package/dist/components/state-badge-overlay/state-badge-overlay.js +1 -1
- package/dist/components/status-board/status-board.js +13 -6
- package/dist/components/status-indicator/status-indicator.js +3 -3
- package/dist/components/step-by-step/step-by-step.js +10 -8
- package/dist/components/step-navigation/step-navigation.js +2 -2
- package/dist/components/stepper/stepper.js +3 -3
- package/dist/components/sticky-metric/sticky-metric.js +1 -1
- package/dist/components/subscription-card/subscription-card.js +1 -1
- package/dist/components/switch/switch.js +1 -1
- package/dist/components/table-of-contents/table-of-contents.js +5 -2
- package/dist/components/table-of-contents-panel/table-of-contents-panel.js +8 -6
- package/dist/components/tabs/tabs.js +26 -8
- package/dist/components/tags-input/tags-input.js +12 -4
- package/dist/components/terminal/terminal.js +58 -36
- package/dist/components/theme-toggle/theme-toggle.js +2 -2
- package/dist/components/thinking-block/thinking-block.js +3 -3
- package/dist/components/ticker-tape/ticker-tape.js +3 -3
- package/dist/components/timeline/timeline.js +2 -2
- package/dist/components/timeline-scrubber/timeline-scrubber.js +2 -2
- package/dist/components/tldr-section/tldr-section.js +11 -9
- package/dist/components/tour/tour.js +1 -1
- package/dist/components/transaction-list/transaction-list.js +30 -9
- package/dist/components/tree-view/tree-view.js +2 -2
- package/dist/components/tutorial-complete/tutorial-complete.js +15 -13
- package/dist/components/tutorial-filters/tutorial-filters.js +1 -1
- package/dist/components/tutorial-intro-content/tutorial-intro-content.js +5 -5
- package/dist/components/tutorial-mdx/tutorial-mdx.js +5 -5
- package/dist/components/usage-breakdown/usage-breakdown.js +9 -5
- package/dist/components/video-embed/video-embed.js +2 -2
- package/dist/components/viewport-bookmarks/viewport-bookmarks.js +3 -3
- package/dist/components/wallet-card/wallet-card.js +1 -1
- package/dist/components/watchlist/watchlist.js +7 -6
- package/dist/components/world-breadcrumbs/world-breadcrumbs.js +2 -2
- package/dist/components/world-clock-bar/world-clock-bar.js +34 -13
- package/dist/index.d.ts +114 -30
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
|
10
10
|
|
|
11
11
|
### Added
|
|
12
12
|
|
|
13
|
+
- **Release intelligence surface** — `/changelog`, `/releases`, `/rss.xml`, and `/atom.xml` expose one changelog source through HTML, GitHub release cards, and feed readers. `/docs/changelog` redirects to `/changelog`.
|
|
13
14
|
- **Hooks + utility primitives** — `CopyButton` (+ `useCopyToClipboard` hook), `Banner` + `BannerAction`, `Kbd`, `EmptyState`, `DocumentSiblingNav`.
|
|
14
15
|
- **Pricing + identity cards** — `PricingTable` + `PricingPlan`, `HistoricalFigureCard`, `CivilizationCard` (+ `CivilizationComparison`).
|
|
15
16
|
- **Newsletter** — `NewsletterSignup` (state-machine driven submit flow).
|
|
@@ -29,6 +30,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
|
29
30
|
- **Time navigation** — `TimelineScrubber`, `PlaybackGhost`, `BottomActivityStrip`, `RunTimeline`.
|
|
30
31
|
- Total component count: **225** (up from 140).
|
|
31
32
|
|
|
33
|
+
- **A11y heading-level override** — every title-bearing component (`ProfileSection`, `FAQ`, `Slideshow`, `WorldClockBar`, `TableOfContentsPanel`, `TableOfContents`, `KeyboardShortcutsHelp`, `Watchlist`, `OrderBook`, `HorizontalScrollRow`, `MarketTreemap`, `ActivityHeatmap`, `Glossary`, `StatusBoard`, `CodePlayground`, `Comparison`, `Quiz`, `Exercise`, `ShareSection`, `CompletionDialog`, `Checklist`, `LearningObjectives`, `CandlestickChart`, `StepByStep`) accepts an `as` prop (`"h1"`–`"h6"`); multi-title components (`ContentIntro`, `TutorialComplete`) expose `titleAs` + `tocLabelAs` / `sectionLabelAs`. Defaults preserve existing heading tags. `HeadingTag` is re-exported from `@vllnt/ui`.
|
|
34
|
+
|
|
32
35
|
### Changed
|
|
33
36
|
|
|
34
37
|
- Registry installs use a **hybrid CLI strategy** — leaf component source is inlined, sibling registry items resolve via `@vllnt/ui` to keep installs minimal and dedupe shared primitives.
|
|
@@ -104,7 +104,7 @@ function AccordionTrigger({
|
|
|
104
104
|
"span",
|
|
105
105
|
{
|
|
106
106
|
className: cn(
|
|
107
|
-
"
|
|
107
|
+
"size-4 flex-shrink-0 transition-transform duration-200",
|
|
108
108
|
isOpen && "rotate-180"
|
|
109
109
|
),
|
|
110
110
|
children: icon
|
|
@@ -113,7 +113,7 @@ function AccordionTrigger({
|
|
|
113
113
|
"svg",
|
|
114
114
|
{
|
|
115
115
|
className: cn(
|
|
116
|
-
"
|
|
116
|
+
"size-4 flex-shrink-0 transition-transform duration-200",
|
|
117
117
|
isOpen && "rotate-180"
|
|
118
118
|
),
|
|
119
119
|
fill: "none",
|
|
@@ -72,19 +72,21 @@ function getGridData(data, endDate, weeks) {
|
|
|
72
72
|
});
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
|
+
const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
|
|
76
|
+
month: "short",
|
|
77
|
+
timeZone: "UTC"
|
|
78
|
+
});
|
|
79
|
+
const TOOLTIP_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
|
|
80
|
+
day: "numeric",
|
|
81
|
+
month: "short",
|
|
82
|
+
timeZone: "UTC",
|
|
83
|
+
year: "numeric"
|
|
84
|
+
});
|
|
75
85
|
function formatMonthLabel(date) {
|
|
76
|
-
return
|
|
77
|
-
month: "short",
|
|
78
|
-
timeZone: "UTC"
|
|
79
|
-
}).format(date);
|
|
86
|
+
return MONTH_LABEL_FORMATTER.format(date);
|
|
80
87
|
}
|
|
81
88
|
function formatTooltip(date, count) {
|
|
82
|
-
const formattedDate =
|
|
83
|
-
day: "numeric",
|
|
84
|
-
month: "short",
|
|
85
|
-
timeZone: "UTC",
|
|
86
|
-
year: "numeric"
|
|
87
|
-
}).format(date);
|
|
89
|
+
const formattedDate = TOOLTIP_DATE_FORMATTER.format(date);
|
|
88
90
|
return `${count} activity ${count === 1 ? "event" : "events"} on ${formattedDate}`;
|
|
89
91
|
}
|
|
90
92
|
function HeatmapGrid({
|
|
@@ -127,15 +129,15 @@ function HeatmapGrid({
|
|
|
127
129
|
),
|
|
128
130
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [
|
|
129
131
|
/* @__PURE__ */ jsx("span", { children: "Less" }),
|
|
130
|
-
LEVEL_CLASS_NAMES.map((className
|
|
132
|
+
LEVEL_CLASS_NAMES.map((className) => /* @__PURE__ */ jsx(
|
|
131
133
|
"span",
|
|
132
134
|
{
|
|
133
135
|
className: cn(
|
|
134
|
-
"
|
|
136
|
+
"size-3 rounded-[3px] border border-border/40",
|
|
135
137
|
className
|
|
136
138
|
)
|
|
137
139
|
},
|
|
138
|
-
`legend-${
|
|
140
|
+
`legend-${className}`
|
|
139
141
|
)),
|
|
140
142
|
/* @__PURE__ */ jsx("span", { children: "More" })
|
|
141
143
|
] })
|
|
@@ -143,6 +145,7 @@ function HeatmapGrid({
|
|
|
143
145
|
}
|
|
144
146
|
const ActivityHeatmap = React.forwardRef(
|
|
145
147
|
({
|
|
148
|
+
as: Heading = "h2",
|
|
146
149
|
className,
|
|
147
150
|
data,
|
|
148
151
|
description,
|
|
@@ -155,7 +158,7 @@ const ActivityHeatmap = React.forwardRef(
|
|
|
155
158
|
const gridData = getGridData(data, normalizedEndDate, weeks);
|
|
156
159
|
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
|
|
157
160
|
/* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
158
|
-
/* @__PURE__ */ jsx(
|
|
161
|
+
/* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
|
|
159
162
|
description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
|
|
160
163
|
] }),
|
|
161
164
|
/* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })
|
|
@@ -82,7 +82,7 @@ function PaginationControls({
|
|
|
82
82
|
size: "sm",
|
|
83
83
|
variant: "outline",
|
|
84
84
|
children: [
|
|
85
|
-
/* @__PURE__ */ jsx(ChevronLeft, { className: "
|
|
85
|
+
/* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
|
|
86
86
|
"Previous"
|
|
87
87
|
]
|
|
88
88
|
}
|
|
@@ -111,7 +111,7 @@ function PaginationControls({
|
|
|
111
111
|
variant: "outline",
|
|
112
112
|
children: [
|
|
113
113
|
"Next",
|
|
114
|
-
/* @__PURE__ */ jsx(ChevronRight, { className: "
|
|
114
|
+
/* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
|
|
115
115
|
]
|
|
116
116
|
}
|
|
117
117
|
)
|
|
@@ -132,18 +132,18 @@ function ActivityRow({ item }) {
|
|
|
132
132
|
{
|
|
133
133
|
"aria-hidden": "true",
|
|
134
134
|
className: cn(
|
|
135
|
-
"absolute left-4 top-3
|
|
135
|
+
"absolute left-4 top-3 size-3 rounded-full ring-4 ring-background",
|
|
136
136
|
palette.markerClassName
|
|
137
137
|
)
|
|
138
138
|
}
|
|
139
139
|
),
|
|
140
140
|
/* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
|
|
141
141
|
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
|
|
142
|
-
/* @__PURE__ */ jsx(Avatar, { className: "
|
|
142
|
+
/* @__PURE__ */ jsx(Avatar, { className: "size-9 border bg-muted", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(item.actor) }) }),
|
|
143
143
|
/* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
|
|
144
144
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
145
145
|
/* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.actor }),
|
|
146
|
-
/* @__PURE__ */ jsx(ArrowRight, { className: "
|
|
146
|
+
/* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5 text-muted-foreground" }),
|
|
147
147
|
/* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: item.action }),
|
|
148
148
|
item.target ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.target }) : null
|
|
149
149
|
] }),
|
|
@@ -46,11 +46,11 @@ const STATUS_CLASSES = {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const DEFAULT_STATUS_ICON = {
|
|
49
|
-
completed: /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "
|
|
50
|
-
error: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true", className: "
|
|
51
|
-
pending: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "
|
|
52
|
-
running: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "
|
|
53
|
-
skipped: /* @__PURE__ */ jsx(MinusCircle, { "aria-hidden": "true", className: "
|
|
49
|
+
completed: /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "size-4" }),
|
|
50
|
+
error: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true", className: "size-4" }),
|
|
51
|
+
pending: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "size-4" }),
|
|
52
|
+
running: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }),
|
|
53
|
+
skipped: /* @__PURE__ */ jsx(MinusCircle, { "aria-hidden": "true", className: "size-4" })
|
|
54
54
|
};
|
|
55
55
|
const StepContext = createContext({ status: "pending" });
|
|
56
56
|
const DEFAULT_LABELS = {
|
|
@@ -148,7 +148,7 @@ function StepRow({
|
|
|
148
148
|
{
|
|
149
149
|
"aria-hidden": "true",
|
|
150
150
|
className: cn(
|
|
151
|
-
"mt-0.5 inline-flex
|
|
151
|
+
"mt-0.5 inline-flex size-5 shrink-0 items-center justify-center",
|
|
152
152
|
iconClass
|
|
153
153
|
),
|
|
154
154
|
children: icon
|
|
@@ -161,7 +161,7 @@ function StepRow({
|
|
|
161
161
|
"aria-controls": detailsId,
|
|
162
162
|
"aria-expanded": open,
|
|
163
163
|
"aria-label": open ? labels.collapse : labels.expand,
|
|
164
|
-
className: "ml-auto inline-flex
|
|
164
|
+
className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
165
165
|
onClick: onToggle,
|
|
166
166
|
type: "button",
|
|
167
167
|
children: /* @__PURE__ */ jsx(
|
|
@@ -169,7 +169,7 @@ function StepRow({
|
|
|
169
169
|
{
|
|
170
170
|
"aria-hidden": "true",
|
|
171
171
|
className: cn(
|
|
172
|
-
"
|
|
172
|
+
"size-4 transition-transform",
|
|
173
173
|
open ? "rotate-180" : "rotate-0"
|
|
174
174
|
)
|
|
175
175
|
}
|
|
@@ -259,7 +259,7 @@ const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE
|
|
|
259
259
|
AIArtifactToolbar.displayName = "AIArtifactToolbar";
|
|
260
260
|
const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
261
261
|
const { copied, copy, labels } = useAIArtifact();
|
|
262
|
-
const
|
|
262
|
+
const handleCopyArtifact = useCallback(
|
|
263
263
|
(event) => {
|
|
264
264
|
onClick?.(event);
|
|
265
265
|
if (event.defaultPrevented) return;
|
|
@@ -271,21 +271,21 @@ const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) =
|
|
|
271
271
|
Button,
|
|
272
272
|
{
|
|
273
273
|
"aria-label": copied ? labels.copied : labels.copy,
|
|
274
|
-
className: cn("
|
|
275
|
-
onClick:
|
|
274
|
+
className: cn("size-8", className),
|
|
275
|
+
onClick: handleCopyArtifact,
|
|
276
276
|
ref,
|
|
277
277
|
size: "icon",
|
|
278
278
|
type: "button",
|
|
279
279
|
variant: "ghost",
|
|
280
280
|
...rest,
|
|
281
|
-
children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "
|
|
281
|
+
children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "size-4" })
|
|
282
282
|
}
|
|
283
283
|
);
|
|
284
284
|
});
|
|
285
285
|
AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
|
|
286
286
|
const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
287
287
|
const { hasOnEdit, labels, onEdit } = useAIArtifact();
|
|
288
|
-
const
|
|
288
|
+
const handleEditArtifact = useCallback(
|
|
289
289
|
(event) => {
|
|
290
290
|
onClick?.(event);
|
|
291
291
|
if (event.defaultPrevented) return;
|
|
@@ -298,21 +298,21 @@ const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) =
|
|
|
298
298
|
Button,
|
|
299
299
|
{
|
|
300
300
|
"aria-label": labels.edit,
|
|
301
|
-
className: cn("
|
|
302
|
-
onClick:
|
|
301
|
+
className: cn("size-8", className),
|
|
302
|
+
onClick: handleEditArtifact,
|
|
303
303
|
ref,
|
|
304
304
|
size: "icon",
|
|
305
305
|
type: "button",
|
|
306
306
|
variant: "ghost",
|
|
307
307
|
...rest,
|
|
308
|
-
children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "
|
|
308
|
+
children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" })
|
|
309
309
|
}
|
|
310
310
|
);
|
|
311
311
|
});
|
|
312
312
|
AIArtifactEditButton.displayName = "AIArtifactEditButton";
|
|
313
313
|
const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
314
314
|
const { download, labels } = useAIArtifact();
|
|
315
|
-
const
|
|
315
|
+
const handleDownloadArtifact = useCallback(
|
|
316
316
|
(event) => {
|
|
317
317
|
onClick?.(event);
|
|
318
318
|
if (event.defaultPrevented) return;
|
|
@@ -324,21 +324,21 @@ const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, re
|
|
|
324
324
|
Button,
|
|
325
325
|
{
|
|
326
326
|
"aria-label": labels.download,
|
|
327
|
-
className: cn("
|
|
328
|
-
onClick:
|
|
327
|
+
className: cn("size-8", className),
|
|
328
|
+
onClick: handleDownloadArtifact,
|
|
329
329
|
ref,
|
|
330
330
|
size: "icon",
|
|
331
331
|
type: "button",
|
|
332
332
|
variant: "ghost",
|
|
333
333
|
...rest,
|
|
334
|
-
children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "
|
|
334
|
+
children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "size-4" })
|
|
335
335
|
}
|
|
336
336
|
);
|
|
337
337
|
});
|
|
338
338
|
AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
|
|
339
339
|
const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
340
340
|
const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
|
|
341
|
-
const
|
|
341
|
+
const handleToggleArtifactFullscreen = useCallback(
|
|
342
342
|
(event) => {
|
|
343
343
|
onClick?.(event);
|
|
344
344
|
if (event.defaultPrevented) return;
|
|
@@ -351,14 +351,14 @@ const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest },
|
|
|
351
351
|
{
|
|
352
352
|
"aria-label": fullscreen ? labels.exitFullscreen : labels.enterFullscreen,
|
|
353
353
|
"aria-pressed": fullscreen,
|
|
354
|
-
className: cn("
|
|
355
|
-
onClick:
|
|
354
|
+
className: cn("size-8", className),
|
|
355
|
+
onClick: handleToggleArtifactFullscreen,
|
|
356
356
|
ref,
|
|
357
357
|
size: "icon",
|
|
358
358
|
type: "button",
|
|
359
359
|
variant: "ghost",
|
|
360
360
|
...rest,
|
|
361
|
-
children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "
|
|
361
|
+
children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "size-4" })
|
|
362
362
|
}
|
|
363
363
|
);
|
|
364
364
|
});
|
|
@@ -36,7 +36,7 @@ function AIChatInputFooter({
|
|
|
36
36
|
disabled: isSubmitDisabled,
|
|
37
37
|
type: "submit",
|
|
38
38
|
children: [
|
|
39
|
-
isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2
|
|
39
|
+
isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 size-4" }),
|
|
40
40
|
submitLabel
|
|
41
41
|
]
|
|
42
42
|
}
|
|
@@ -72,7 +72,7 @@ const AIChatInput = forwardRef(
|
|
|
72
72
|
/* @__PURE__ */ jsx(
|
|
73
73
|
Textarea,
|
|
74
74
|
{
|
|
75
|
-
className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent
|
|
75
|
+
className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
|
|
76
76
|
disabled,
|
|
77
77
|
onChange: (event) => {
|
|
78
78
|
textareaProps?.onChange?.(event);
|
|
@@ -73,7 +73,7 @@ const AIMessageBubble = forwardRef(
|
|
|
73
73
|
isUser ? "flex-row-reverse text-right" : "flex-row"
|
|
74
74
|
),
|
|
75
75
|
children: [
|
|
76
|
-
/* @__PURE__ */ jsx(Avatar, { className: "mt-0.5
|
|
76
|
+
/* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 size-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
|
|
77
77
|
/* @__PURE__ */ jsxs(
|
|
78
78
|
"div",
|
|
79
79
|
{
|
|
@@ -160,7 +160,7 @@ const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
|
|
|
160
160
|
ref,
|
|
161
161
|
...rest,
|
|
162
162
|
children: [
|
|
163
|
-
/* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "
|
|
163
|
+
/* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
|
|
164
164
|
children ?? labels.defaultTitle
|
|
165
165
|
]
|
|
166
166
|
}
|
|
@@ -169,7 +169,7 @@ const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
|
|
|
169
169
|
AISidebarTitle.displayName = "AISidebarTitle";
|
|
170
170
|
const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
171
171
|
const { close, labels } = useAISidebar();
|
|
172
|
-
const
|
|
172
|
+
const handleCloseSidebar = useCallback(
|
|
173
173
|
(event) => {
|
|
174
174
|
onClick?.(event);
|
|
175
175
|
if (event.defaultPrevented) return;
|
|
@@ -181,14 +181,14 @@ const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
|
|
|
181
181
|
Button,
|
|
182
182
|
{
|
|
183
183
|
"aria-label": labels.close,
|
|
184
|
-
className: cn("
|
|
185
|
-
onClick:
|
|
184
|
+
className: cn("size-8", className),
|
|
185
|
+
onClick: handleCloseSidebar,
|
|
186
186
|
ref,
|
|
187
187
|
size: "icon",
|
|
188
188
|
type: "button",
|
|
189
189
|
variant: "ghost",
|
|
190
190
|
...rest,
|
|
191
|
-
children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "
|
|
191
|
+
children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
|
|
192
192
|
}
|
|
193
193
|
);
|
|
194
194
|
});
|
|
@@ -215,7 +215,7 @@ const AISidebarFooter = forwardRef(({ children, className, ...rest }, ref) => /*
|
|
|
215
215
|
AISidebarFooter.displayName = "AISidebarFooter";
|
|
216
216
|
const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest }, ref) => {
|
|
217
217
|
const { labels, openState, toggle } = useAISidebar();
|
|
218
|
-
const
|
|
218
|
+
const handleToggleSidebar = useCallback(
|
|
219
219
|
(event) => {
|
|
220
220
|
onClick?.(event);
|
|
221
221
|
if (event.defaultPrevented) return;
|
|
@@ -230,13 +230,13 @@ const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest },
|
|
|
230
230
|
"aria-label": children ? void 0 : labels.open,
|
|
231
231
|
className: cn(className),
|
|
232
232
|
"data-state": openState ? "open" : "closed",
|
|
233
|
-
onClick:
|
|
233
|
+
onClick: handleToggleSidebar,
|
|
234
234
|
ref,
|
|
235
235
|
size: children ? "sm" : "icon",
|
|
236
236
|
type: "button",
|
|
237
237
|
variant: "outline",
|
|
238
238
|
...rest,
|
|
239
|
-
children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "
|
|
239
|
+
children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "size-4" })
|
|
240
240
|
}
|
|
241
241
|
);
|
|
242
242
|
});
|
|
@@ -18,13 +18,13 @@ const AISourceCitation = forwardRef(
|
|
|
18
18
|
...props,
|
|
19
19
|
children: [
|
|
20
20
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
|
|
21
|
-
/* @__PURE__ */ jsx(Quote, { className: "mt-0.5
|
|
21
|
+
/* @__PURE__ */ jsx(Quote, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
|
|
22
22
|
/* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
|
|
23
23
|
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
24
24
|
/* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
|
|
25
25
|
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
|
|
26
26
|
] }),
|
|
27
|
-
/* @__PURE__ */ jsx(ExternalLink, { className: "
|
|
27
|
+
/* @__PURE__ */ jsx(ExternalLink, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
|
|
28
28
|
] }) })
|
|
29
29
|
] }),
|
|
30
30
|
snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null
|
|
@@ -21,10 +21,10 @@ const statusVariants = cva(
|
|
|
21
21
|
}
|
|
22
22
|
);
|
|
23
23
|
const statusIconMap = {
|
|
24
|
-
complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "
|
|
25
|
-
error: /* @__PURE__ */ jsx(AlertCircle, { className: "
|
|
26
|
-
queued: /* @__PURE__ */ jsx(Clock3, { className: "
|
|
27
|
-
running: /* @__PURE__ */ jsx(Wrench, { className: "
|
|
24
|
+
complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
|
|
25
|
+
error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
|
|
26
|
+
queued: /* @__PURE__ */ jsx(Clock3, { className: "size-4" }),
|
|
27
|
+
running: /* @__PURE__ */ jsx(Wrench, { className: "size-4 animate-pulse" })
|
|
28
28
|
};
|
|
29
29
|
const AIToolCallDisplay = forwardRef(
|
|
30
30
|
({
|
|
@@ -24,10 +24,7 @@ const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
|
|
|
24
24
|
const DEFAULT_RANDOM_CHARACTERS = ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS.matrix;
|
|
25
25
|
function getSegments(text, splitBy) {
|
|
26
26
|
if (splitBy === "character") {
|
|
27
|
-
|
|
28
|
-
granularity: "grapheme"
|
|
29
|
-
});
|
|
30
|
-
return Array.from(segmenter.segment(text), ({ segment }) => segment);
|
|
27
|
+
return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
|
|
31
28
|
}
|
|
32
29
|
return text.match(/\S+\s*/g) ?? [];
|
|
33
30
|
}
|
|
@@ -90,13 +87,16 @@ function buildRevealPlan(direction, length, randomness) {
|
|
|
90
87
|
return revealPlan;
|
|
91
88
|
}
|
|
92
89
|
function useRevealProgress(active, length, stagger) {
|
|
93
|
-
const [progress, setProgress] = React.useState(0);
|
|
90
|
+
const [progress, setProgress] = React.useState(() => active ? 0 : length);
|
|
91
|
+
const [revealKey, setRevealKey] = React.useState({ active, length, stagger });
|
|
92
|
+
if (revealKey.active !== active || revealKey.length !== length || revealKey.stagger !== stagger) {
|
|
93
|
+
setRevealKey({ active, length, stagger });
|
|
94
|
+
setProgress(active ? 0 : length);
|
|
95
|
+
}
|
|
94
96
|
React.useEffect(() => {
|
|
95
97
|
if (!active) {
|
|
96
|
-
setProgress(length);
|
|
97
98
|
return;
|
|
98
99
|
}
|
|
99
|
-
setProgress(0);
|
|
100
100
|
const revealInterval = window.setInterval(
|
|
101
101
|
() => {
|
|
102
102
|
setProgress((current) => {
|
|
@@ -34,11 +34,21 @@ function valueToCents(value) {
|
|
|
34
34
|
if (Number.isNaN(parsed)) return 0;
|
|
35
35
|
return Math.round(parsed * CENTS_PER_UNIT);
|
|
36
36
|
}
|
|
37
|
+
const CURRENCY_FORMATTER_CACHE = /* @__PURE__ */ new Map();
|
|
38
|
+
function getCurrencyFormatter(locale, currency) {
|
|
39
|
+
const key = `${locale}|${currency}`;
|
|
40
|
+
let formatter = CURRENCY_FORMATTER_CACHE.get(key);
|
|
41
|
+
if (!formatter) {
|
|
42
|
+
formatter = Intl.NumberFormat(locale, {
|
|
43
|
+
currency,
|
|
44
|
+
style: "currency"
|
|
45
|
+
});
|
|
46
|
+
CURRENCY_FORMATTER_CACHE.set(key, formatter);
|
|
47
|
+
}
|
|
48
|
+
return formatter;
|
|
49
|
+
}
|
|
37
50
|
function getCurrencySymbol(locale, currency) {
|
|
38
|
-
const formatted =
|
|
39
|
-
currency,
|
|
40
|
-
style: "currency"
|
|
41
|
-
}).format(0);
|
|
51
|
+
const formatted = getCurrencyFormatter(locale, currency).format(0);
|
|
42
52
|
const symbol = formatted.replaceAll(/[\d\s,.]/g, "");
|
|
43
53
|
return symbol.length > 0 ? symbol : currency;
|
|
44
54
|
}
|
|
@@ -7,7 +7,7 @@ const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
|
7
7
|
AvatarPrimitive.Root,
|
|
8
8
|
{
|
|
9
9
|
className: cn(
|
|
10
|
-
"relative flex
|
|
10
|
+
"relative flex size-10 shrink-0 overflow-hidden rounded-full",
|
|
11
11
|
className
|
|
12
12
|
),
|
|
13
13
|
ref,
|
|
@@ -23,9 +23,9 @@ const avatarItemVariants = cva(
|
|
|
23
23
|
},
|
|
24
24
|
variants: {
|
|
25
25
|
size: {
|
|
26
|
-
lg: "
|
|
27
|
-
md: "
|
|
28
|
-
sm: "
|
|
26
|
+
lg: "size-12 text-sm",
|
|
27
|
+
md: "size-10 text-xs",
|
|
28
|
+
sm: "size-8 text-[11px]"
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -66,7 +66,7 @@ const AvatarGroup = React.forwardRef(
|
|
|
66
66
|
/* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
|
|
67
67
|
]
|
|
68
68
|
},
|
|
69
|
-
|
|
69
|
+
item.src ?? item.alt
|
|
70
70
|
)),
|
|
71
71
|
hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
|
|
72
72
|
]
|
|
@@ -108,7 +108,7 @@ const Banner = forwardRef(
|
|
|
108
108
|
"span",
|
|
109
109
|
{
|
|
110
110
|
"aria-hidden": "true",
|
|
111
|
-
className: "mt-0.5 flex
|
|
111
|
+
className: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
|
|
112
112
|
children: icon
|
|
113
113
|
}
|
|
114
114
|
) : null,
|
|
@@ -117,10 +117,10 @@ const Banner = forwardRef(
|
|
|
117
117
|
"button",
|
|
118
118
|
{
|
|
119
119
|
"aria-label": dismissLabel,
|
|
120
|
-
className: "ml-auto inline-flex
|
|
120
|
+
className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
121
121
|
onClick: handleDismiss,
|
|
122
122
|
type: "button",
|
|
123
|
-
children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "
|
|
123
|
+
children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
|
|
124
124
|
}
|
|
125
125
|
) : null
|
|
126
126
|
]
|
|
@@ -23,7 +23,7 @@ const ChipBody = (props) => {
|
|
|
23
23
|
"span",
|
|
24
24
|
{
|
|
25
25
|
"aria-hidden": "true",
|
|
26
|
-
className: cn("
|
|
26
|
+
className: cn("size-1.5 rounded-full", TONE_DOT[tone])
|
|
27
27
|
}
|
|
28
28
|
),
|
|
29
29
|
/* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
|
|
@@ -34,7 +34,7 @@ const Chip = (props) => {
|
|
|
34
34
|
const { event } = props;
|
|
35
35
|
const tone = event.tone ?? "neutral";
|
|
36
36
|
if (event.onActivate) {
|
|
37
|
-
const
|
|
37
|
+
const handleActivateEvent = () => {
|
|
38
38
|
event.onActivate?.();
|
|
39
39
|
};
|
|
40
40
|
return /* @__PURE__ */ jsx(
|
|
@@ -43,7 +43,7 @@ const Chip = (props) => {
|
|
|
43
43
|
className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
44
44
|
"data-strip-event": event.id,
|
|
45
45
|
"data-strip-event-tone": tone,
|
|
46
|
-
onClick:
|
|
46
|
+
onClick: handleActivateEvent,
|
|
47
47
|
type: "button",
|
|
48
48
|
children: /* @__PURE__ */ jsx(ChipBody, { event })
|
|
49
49
|
}
|