From a5fad7862afb3ab0cef9af66576eb713f6059266 Mon Sep 17 00:00:00 2001 From: bntvllnt Date: Wed, 13 May 2026 03:33:23 +0200 Subject: [PATCH 1/3] fix: migrate components to React 19 refs --- .../registry/default/accordion/accordion.tsx | 10 +- .../activity-heatmap/activity-heatmap.tsx | 59 ++- .../default/activity-log/activity-log.tsx | 100 +++-- .../default/agent-activity/agent-activity.tsx | 263 ++++++------ .../default/ai-artifact/ai-artifact.tsx | 213 +++++----- .../default/ai-chat-input/ai-chat-input.tsx | 113 +++-- .../ai-message-bubble/ai-message-bubble.tsx | 97 ++--- .../default/ai-sidebar/ai-sidebar.tsx | 140 +++--- .../ai-source-citation/ai-source-citation.tsx | 81 ++-- .../ai-streaming-text/ai-streaming-text.tsx | 69 ++- .../ai-tool-call-display.tsx | 139 +++--- .../default/alert-dialog/alert-dialog.tsx | 98 +++-- .../default/alert-pulse/alert-pulse.tsx | 121 +++--- .../registry/registry/default/alert/alert.tsx | 45 +- .../default/anchor-port/anchor-port.tsx | 57 ++- .../default/animated-text/animated-text.tsx | 143 +++---- .../default/auto-reload/auto-reload.tsx | 210 ++++----- .../default/avatar-group/avatar-group.tsx | 64 +-- .../registry/default/avatar/avatar.tsx | 43 +- .../registry/default/banner/banner.tsx | 177 ++++---- .../default/border-beam/border-beam.tsx | 90 ++-- .../bottom-activity-strip.tsx | 17 +- .../registry/default/button/button.tsx | 33 +- .../candlestick-chart/candlestick-chart.tsx | 103 +++-- .../default/canvas-shell/canvas-shell.tsx | 16 +- .../default/canvas-view/canvas-view.tsx | 130 +++--- apps/registry/registry/default/card/card.tsx | 72 ++-- .../registry/default/carousel/carousel.tsx | 170 ++++---- .../registry/default/checkbox/checkbox.tsx | 12 +- .../default/choropleth-map/choropleth-map.tsx | 181 ++++---- .../chronological-timeline.tsx | 134 +++--- .../civilization-card/civilization-card.tsx | 112 +++-- .../registry/default/combobox/combobox.tsx | 120 +++--- .../registry/default/command/command.tsx | 86 ++-- .../default/comment-pin/comment-pin.tsx | 129 +++--- .../default/connector-edge/connector-edge.tsx | 97 ++--- .../default/context-lens/context-lens.tsx | 128 +++--- .../default/context-menu/context-menu.tsx | 146 ++++--- .../default/copy-button/copy-button.tsx | 227 +++++----- .../countdown-timer/countdown-timer.tsx | 106 +++-- .../default/credit-badge/credit-badge.tsx | 49 ++- .../registry/default/data-list/data-list.tsx | 104 ++--- .../default/date-picker/date-picker.tsx | 118 +++--- .../registry/default/dialog/dialog.tsx | 51 ++- .../document-sibling-nav.tsx | 27 +- .../registry/default/drawer/drawer.tsx | 64 +-- .../default/dropdown-menu/dropdown-menu.tsx | 129 ++++-- .../default/edge-label/edge-label.tsx | 32 +- .../default/empty-state/empty-state.tsx | 83 ++-- .../default/era-comparison/era-comparison.tsx | 226 +++++----- .../default/file-upload/file-upload.tsx | 34 +- .../floating-toolbar/floating-toolbar.tsx | 106 +++-- .../default/follow-mode/follow-mode.tsx | 105 +++-- apps/registry/registry/default/form/form.tsx | 350 ++++++++------- .../default/gantt-chart/gantt-chart.tsx | 94 ++--- .../geography-quiz-map/geography-quiz-map.tsx | 186 ++++---- .../registry/default/globe-3d/globe-3d.tsx | 122 +++--- .../default/group-hull/group-hull.tsx | 71 ++-- .../default/handoff-beacon/handoff-beacon.tsx | 115 +++-- .../heat-map-overlay/heat-map-overlay.tsx | 110 ++--- .../default/heat-overlay/heat-overlay.tsx | 97 ++--- .../historic-timeline/historic-timeline.tsx | 110 +++-- .../historical-figure-card.tsx | 11 +- .../default/hover-card/hover-card.tsx | 23 +- .../default/infinite-plane/infinite-plane.tsx | 73 ++-- .../registry/default/input-otp/input-otp.tsx | 54 ++- .../registry/registry/default/input/input.tsx | 33 +- .../interactive-timeline.tsx | 77 ++-- .../default/jarvis-dock/jarvis-dock.tsx | 84 ++-- apps/registry/registry/default/kbd/kbd.tsx | 84 ++-- .../knowledge-check/knowledge-check.tsx | 114 ++--- .../registry/default/left-rail/left-rail.tsx | 52 +-- .../default/live-cursor/live-cursor.tsx | 104 +++-- .../registry/default/live-feed/live-feed.tsx | 120 +++--- .../registry/default/map-2d/map-2d.tsx | 243 ++++++----- .../default/map-timeline/map-timeline.tsx | 397 +++++++++--------- .../default/market-treemap/market-treemap.tsx | 12 +- .../registry/default/marquee/marquee.tsx | 120 +++--- .../registry/default/menubar/menubar.tsx | 196 +++++---- .../default/metric-cluster/metric-cluster.tsx | 103 +++-- .../default/metric-gauge/metric-gauge.tsx | 94 ++--- .../default/mini-map-panel/mini-map-panel.tsx | 124 +++--- .../model-comparison/model-comparison.tsx | 139 +++--- .../multi-select-lasso/multi-select-lasso.tsx | 17 +- .../default/multi-select/multi-select.tsx | 221 +++++----- .../navigation-menu/navigation-menu.tsx | 97 +++-- .../newsletter-signup/newsletter-signup.tsx | 13 +- .../default/number-input/number-input.tsx | 34 +- .../default/number-ticker/number-ticker.tsx | 135 +++--- .../default/object-card/object-card.tsx | 85 ++-- .../default/object-handle/object-handle.tsx | 53 +-- .../object-inspector/object-inspector.tsx | 87 ++-- .../default/order-book/order-book.tsx | 99 ++--- .../parallel-timeline/parallel-timeline.tsx | 106 +++-- .../default/password-input/password-input.tsx | 68 ++- .../default/plan-badge/plan-badge.tsx | 55 +-- .../default/playback-ghost/playback-ghost.tsx | 113 +++-- .../policy-delivery-panel.tsx | 24 +- .../registry/default/popover/popover.tsx | 22 +- .../default/presence-stack/presence-stack.tsx | 87 ++-- .../presence-sync-indicator.tsx | 17 +- .../default/pricing-table/pricing-table.tsx | 153 ++++--- .../primary-source-viewer.tsx | 167 ++++---- .../prompt-templates/prompt-templates.tsx | 65 ++- .../property-section/property-section.tsx | 61 ++- .../default/radio-group/radio-group.tsx | 30 +- .../relationship-inspector.tsx | 24 +- .../default/right-dock/right-dock.tsx | 57 +-- .../default/role-badge/role-badge.tsx | 40 +- .../registry/default/route-map/route-map.tsx | 8 +- .../routing-assignment-panel.tsx | 24 +- .../default/run-timeline/run-timeline.tsx | 99 +++-- .../runtime-overview-panel.tsx | 17 +- .../default/scope-selector/scope-selector.tsx | 88 ++-- .../default/scroll-area/scroll-area.tsx | 36 +- .../segmented-control/segmented-control.tsx | 30 +- .../registry/default/select/select.tsx | 108 +++-- .../default/selection-halo/selection-halo.tsx | 119 +++--- .../selection-presence/selection-presence.tsx | 17 +- .../registry/default/separator/separator.tsx | 44 +- .../registry/registry/default/sheet/sheet.tsx | 65 +-- .../sidebar-provider/sidebar-provider.tsx | 10 +- .../registry/default/slider/slider.tsx | 17 +- .../default/snap-guides/snap-guides.tsx | 80 ++-- .../default/sparkline-grid/sparkline-grid.tsx | 14 +- .../registry/default/stat-card/stat-card.tsx | 104 +++-- .../state-badge-overlay.tsx | 16 +- .../default/status-board/status-board.tsx | 56 ++- .../status-indicator/status-indicator.tsx | 74 ++-- .../default/sticky-metric/sticky-metric.tsx | 111 +++-- .../registry/default/story-map/story-map.tsx | 138 +++--- .../subscription-card/subscription-card.tsx | 128 +++--- .../registry/registry/default/table/table.tsx | 106 +++-- apps/registry/registry/default/tabs/tabs.tsx | 4 +- .../default/tags-input/tags-input.tsx | 116 +++-- .../registry/default/textarea/textarea.tsx | 35 +- .../default/thread-bubble/thread-bubble.tsx | 147 +++---- .../default/threshold-ring/threshold-ring.tsx | 141 +++---- .../default/ticker-tape/ticker-tape.tsx | 70 +-- .../timeline-scrubber/timeline-scrubber.tsx | 11 +- .../registry/default/timeline/timeline.tsx | 136 +++--- .../registry/registry/default/toast/toast.tsx | 64 +-- .../default/toggle-group/toggle-group.tsx | 42 +- .../registry/default/toggle/toggle.tsx | 20 +- .../registry/default/tooltip/tooltip.tsx | 21 +- .../registry/default/top-bar/top-bar.tsx | 85 ++-- .../transaction-list/transaction-list.tsx | 131 +++--- .../registry/default/tree-view/tree-view.tsx | 145 ++++--- .../usage-breakdown/usage-breakdown.tsx | 104 +++-- .../viewport-bookmarks/viewport-bookmarks.tsx | 16 +- .../default/wallet-card/wallet-card.tsx | 111 +++-- .../registry/default/watchlist/watchlist.tsx | 102 +++-- .../workspace-switcher/workspace-switcher.tsx | 123 +++--- .../world-breadcrumbs/world-breadcrumbs.tsx | 90 ++-- .../world-clock-bar/world-clock-bar.tsx | 75 ++-- .../registry/default/zoom-hud/zoom-hud.tsx | 89 ++-- packages/ui/package.json | 4 +- .../ui/src/components/accordion/accordion.tsx | 10 +- .../activity-heatmap/activity-heatmap.tsx | 59 ++- .../components/activity-log/activity-log.tsx | 100 +++-- .../agent-activity/agent-activity.tsx | 263 ++++++------ .../components/ai-artifact/ai-artifact.tsx | 213 +++++----- .../ai-chat-input/ai-chat-input.tsx | 113 +++-- .../ai-message-bubble/ai-message-bubble.tsx | 97 ++--- .../src/components/ai-sidebar/ai-sidebar.tsx | 140 +++--- .../ai-source-citation/ai-source-citation.tsx | 81 ++-- .../ai-streaming-text/ai-streaming-text.tsx | 69 ++- .../ai-tool-call-display.tsx | 139 +++--- .../components/alert-dialog/alert-dialog.tsx | 98 +++-- .../components/alert-pulse/alert-pulse.tsx | 121 +++--- packages/ui/src/components/alert/alert.tsx | 45 +- .../components/anchor-port/anchor-port.tsx | 57 ++- .../animated-text/animated-text.tsx | 143 +++---- .../components/auto-reload/auto-reload.tsx | 210 ++++----- .../components/avatar-group/avatar-group.tsx | 64 +-- packages/ui/src/components/avatar/avatar.tsx | 43 +- packages/ui/src/components/banner/banner.tsx | 177 ++++---- .../components/border-beam/border-beam.tsx | 90 ++-- .../bottom-activity-strip.tsx | 17 +- .../src/components/bottom-bar/bottom-bar.tsx | 46 +- packages/ui/src/components/button/button.tsx | 33 +- .../candlestick-chart/candlestick-chart.tsx | 103 +++-- .../components/canvas-shell/canvas-shell.tsx | 16 +- .../components/canvas-view/canvas-view.tsx | 130 +++--- packages/ui/src/components/card/card.tsx | 72 ++-- .../ui/src/components/carousel/carousel.tsx | 170 ++++---- .../ui/src/components/chart/area-chart.tsx | 122 +++--- .../ui/src/components/chart/bar-chart.tsx | 136 +++--- .../ui/src/components/chart/line-chart.tsx | 136 +++--- .../chat-dock-section/chat-dock-section.tsx | 105 +++-- .../ui/src/components/checkbox/checkbox.tsx | 12 +- .../choropleth-map/choropleth-map.tsx | 181 ++++---- .../chronological-timeline.tsx | 134 +++--- .../civilization-card/civilization-card.tsx | 112 +++-- .../ui/src/components/combobox/combobox.tsx | 120 +++--- .../ui/src/components/command/command.tsx | 86 ++-- .../components/comment-pin/comment-pin.tsx | 129 +++--- .../connector-edge/connector-edge.tsx | 97 ++--- .../components/context-lens/context-lens.tsx | 128 +++--- .../components/context-menu/context-menu.tsx | 146 ++++--- .../conversation-thread.tsx | 179 ++++---- .../cookie-consent/cookie-consent.tsx | 234 +++++------ .../components/copy-button/copy-button.tsx | 227 +++++----- .../countdown-timer/countdown-timer.tsx | 106 +++-- .../components/credit-badge/credit-badge.tsx | 49 ++- .../src/components/curriculum/curriculum.tsx | 4 +- .../ui/src/components/data-list/data-list.tsx | 104 ++--- .../components/date-picker/date-picker.tsx | 118 +++--- packages/ui/src/components/dialog/dialog.tsx | 51 ++- .../document-sibling-nav.tsx | 27 +- packages/ui/src/components/drawer/drawer.tsx | 64 +-- .../dropdown-menu/dropdown-menu.tsx | 129 ++++-- .../src/components/edge-label/edge-label.tsx | 32 +- .../components/empty-state/empty-state.tsx | 83 ++-- .../era-comparison/era-comparison.tsx | 226 +++++----- .../components/file-upload/file-upload.tsx | 34 +- .../floating-toolbar/floating-toolbar.tsx | 106 +++-- .../components/follow-mode/follow-mode.tsx | 105 +++-- packages/ui/src/components/form/form.tsx | 350 ++++++++------- .../components/gantt-chart/gantt-chart.tsx | 94 ++--- .../geography-quiz-map/geography-quiz-map.tsx | 186 ++++---- .../components/glass-panel/glass-panel.tsx | 33 +- .../ui/src/components/globe-3d/globe-3d.tsx | 122 +++--- .../src/components/group-hull/group-hull.tsx | 71 ++-- .../handoff-beacon/handoff-beacon.tsx | 115 +++-- .../heat-map-overlay/heat-map-overlay.tsx | 110 ++--- .../components/heat-overlay/heat-overlay.tsx | 97 ++--- .../historic-timeline/historic-timeline.tsx | 110 +++-- .../historical-figure-card.tsx | 11 +- .../src/components/hover-card/hover-card.tsx | 23 +- .../infinite-plane/infinite-plane.tsx | 73 ++-- .../ui/src/components/input-otp/input-otp.tsx | 54 ++- packages/ui/src/components/input/input.tsx | 33 +- .../interactive-timeline.tsx | 77 ++-- .../components/jarvis-dock/jarvis-dock.tsx | 84 ++-- packages/ui/src/components/kbd/kbd.tsx | 84 ++-- .../knowledge-check/knowledge-check.tsx | 114 ++--- packages/ui/src/components/label/label.tsx | 14 +- .../ui/src/components/left-rail/left-rail.tsx | 52 +-- .../components/live-cursor/live-cursor.tsx | 104 +++-- .../ui/src/components/live-feed/live-feed.tsx | 120 +++--- packages/ui/src/components/map-2d/map-2d.tsx | 243 ++++++----- .../components/map-timeline/map-timeline.tsx | 397 +++++++++--------- .../market-treemap/market-treemap.tsx | 12 +- .../ui/src/components/marquee/marquee.tsx | 120 +++--- .../ui/src/components/menubar/menubar.tsx | 196 +++++---- .../metric-cluster/metric-cluster.tsx | 103 +++-- .../components/metric-gauge/metric-gauge.tsx | 94 ++--- .../mini-map-panel/mini-map-panel.tsx | 124 +++--- .../model-comparison/model-comparison.tsx | 139 +++--- .../multi-select-lasso/multi-select-lasso.tsx | 17 +- .../components/multi-select/multi-select.tsx | 221 +++++----- .../navigation-menu/navigation-menu.tsx | 97 +++-- .../newsletter-signup/newsletter-signup.tsx | 13 +- .../components/number-input/number-input.tsx | 34 +- .../number-ticker/number-ticker.tsx | 135 +++--- .../components/object-card/object-card.tsx | 85 ++-- .../object-handle/object-handle.tsx | 53 +-- .../object-inspector/object-inspector.tsx | 87 ++-- .../src/components/order-book/order-book.tsx | 99 ++--- .../overview-board/overview-board.tsx | 198 +++++---- .../parallel-timeline/parallel-timeline.tsx | 106 +++-- .../password-input/password-input.tsx | 68 ++- .../src/components/plan-badge/plan-badge.tsx | 55 +-- .../playback-ghost/playback-ghost.tsx | 113 +++-- .../policy-delivery-panel.tsx | 24 +- .../ui/src/components/popover/popover.tsx | 22 +- .../presence-stack/presence-stack.tsx | 87 ++-- .../presence-sync-indicator.tsx | 17 +- .../pricing-table/pricing-table.tsx | 153 ++++--- .../primary-source-viewer.tsx | 167 ++++---- .../progress-tracker/progress-tracker.tsx | 2 +- .../prompt-templates/prompt-templates.tsx | 65 ++- .../property-section/property-section.tsx | 61 ++- .../components/radio-group/radio-group.tsx | 30 +- .../relationship-inspector.tsx | 24 +- .../src/components/right-dock/right-dock.tsx | 57 +-- .../src/components/role-badge/role-badge.tsx | 40 +- .../ui/src/components/route-map/route-map.tsx | 8 +- .../routing-assignment-panel.tsx | 24 +- .../components/run-timeline/run-timeline.tsx | 99 +++-- .../runtime-overview-panel.tsx | 17 +- .../scope-selector/scope-selector.tsx | 88 ++-- .../components/scroll-area/scroll-area.tsx | 36 +- .../segmented-control/segmented-control.tsx | 30 +- packages/ui/src/components/select/select.tsx | 108 +++-- .../selection-halo/selection-halo.tsx | 119 +++--- .../selection-presence/selection-presence.tsx | 17 +- .../ui/src/components/separator/separator.tsx | 44 +- packages/ui/src/components/sheet/sheet.tsx | 65 +-- .../sidebar-provider/sidebar-provider.tsx | 10 +- packages/ui/src/components/slider/slider.tsx | 17 +- .../components/snap-guides/snap-guides.tsx | 80 ++-- .../sparkline-grid/sparkline-grid.tsx | 14 +- .../components/spinner/unicode-spinner.tsx | 107 +++-- .../ui/src/components/stat-card/stat-card.tsx | 104 +++-- .../state-badge-overlay.tsx | 16 +- .../components/status-board/status-board.tsx | 56 ++- .../status-indicator/status-indicator.tsx | 74 ++-- .../sticky-metric/sticky-metric.tsx | 111 +++-- .../ui/src/components/story-map/story-map.tsx | 138 +++--- .../subscription-card/subscription-card.tsx | 128 +++--- packages/ui/src/components/switch/switch.tsx | 12 +- packages/ui/src/components/table/table.tsx | 106 +++-- packages/ui/src/components/tabs/tabs.tsx | 4 +- .../src/components/tags-input/tags-input.tsx | 116 +++-- .../ui/src/components/textarea/textarea.tsx | 35 +- .../thread-bubble/thread-bubble.tsx | 147 +++---- .../threshold-ring/threshold-ring.tsx | 141 +++---- .../components/ticker-tape/ticker-tape.tsx | 70 +-- .../timeline-scrubber/timeline-scrubber.tsx | 11 +- .../ui/src/components/timeline/timeline.tsx | 136 +++--- packages/ui/src/components/toast/toast.tsx | 64 +-- .../components/toggle-group/toggle-group.tsx | 42 +- packages/ui/src/components/toggle/toggle.tsx | 20 +- .../ui/src/components/tooltip/tooltip.tsx | 21 +- .../ui/src/components/top-bar/top-bar.tsx | 85 ++-- .../transaction-list/transaction-list.tsx | 131 +++--- .../ui/src/components/tree-view/tree-view.tsx | 145 ++++--- .../usage-breakdown/usage-breakdown.tsx | 104 +++-- .../viewport-bookmarks/viewport-bookmarks.tsx | 16 +- .../components/wallet-card/wallet-card.tsx | 111 +++-- .../ui/src/components/watchlist/watchlist.tsx | 102 +++-- .../workspace-switcher/workspace-switcher.tsx | 123 +++--- .../world-breadcrumbs/world-breadcrumbs.tsx | 90 ++-- .../world-clock-bar/world-clock-bar.tsx | 75 ++-- .../ui/src/components/zoom-hud/zoom-hud.tsx | 89 ++-- pnpm-lock.yaml | 4 +- 328 files changed, 15179 insertions(+), 14773 deletions(-) diff --git a/apps/registry/registry/default/accordion/accordion.tsx b/apps/registry/registry/default/accordion/accordion.tsx index 6d5818a6..b5255ece 100644 --- a/apps/registry/registry/default/accordion/accordion.tsx +++ b/apps/registry/registry/default/accordion/accordion.tsx @@ -1,12 +1,6 @@ "use client"; -import { - createContext, - useCallback, - useContext, - useMemo, - useState, -} from "react"; +import { createContext, use, useCallback, useMemo, useState } from "react"; import type { ReactNode } from "react"; @@ -22,7 +16,7 @@ type AccordionContextValue = { const AccordionContext = createContext(null); function useAccordionContext(): AccordionContextValue { - const context = useContext(AccordionContext); + const context = use(AccordionContext); if (!context) { throw new Error("AccordionItem must be used within an Accordion"); } diff --git a/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx b/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx index 566cb81c..a0e7d20a 100644 --- a/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx +++ b/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx @@ -204,40 +204,33 @@ function HeatmapGrid({ ); } -export const ActivityHeatmap = React.forwardRef< - HTMLDivElement, - ActivityHeatmapProps ->( - ( - { - className, - data, - description, - endDate = new Date(), - title = "Activity heatmap", - weeks = 12, - ...props - }, - ref, - ) => { - const normalizedEndDate = normalizeDate(endDate); - const gridData = getGridData(data, normalizedEndDate, weeks); - - return ( -
-
-

{title}

- {description ? ( -

{description}

- ) : null} -
+export const ActivityHeatmap = ({ + className, + data, + description, + endDate = new Date(), + ref, + title = "Activity heatmap", + weeks = 12, + ...props +}: ActivityHeatmapProps & React.RefAttributes) => { + const normalizedEndDate = normalizeDate(endDate); + const gridData = getGridData(data, normalizedEndDate, weeks); -
- -
+ return ( +
+
+

{title}

+ {description ? ( +

{description}

+ ) : null} +
+ +
+
- ); - }, -); +
+ ); +}; ActivityHeatmap.displayName = "ActivityHeatmap"; diff --git a/apps/registry/registry/default/activity-log/activity-log.tsx b/apps/registry/registry/default/activity-log/activity-log.tsx index e89f8b98..362bef06 100644 --- a/apps/registry/registry/default/activity-log/activity-log.tsx +++ b/apps/registry/registry/default/activity-log/activity-log.tsx @@ -1,6 +1,6 @@ "use client"; -import { forwardRef, useMemo, useState } from "react"; +import { useMemo, useState } from "react"; import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react"; @@ -294,63 +294,59 @@ function ActivityLogBody({ ); } -const ActivityLog = forwardRef( - ( - { - className, - defaultPage = 1, - description, - emptyMessage = "No activity recorded yet.", - items, - onPageChange, - page, - pageSize = 5, - title = "Activity log", - ...props - }, - ref, - ) => { - const totalPages = Math.max(1, Math.ceil(items.length / pageSize)); - const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage); - const currentPage = Math.min( - Math.max(page ?? uncontrolledPage, 1), - totalPages, - ); - const pageNumbers = useMemo( - () => buildPageNumbers(currentPage, totalPages), - [currentPage, totalPages], - ); +const ActivityLog = ({ + className, + defaultPage = 1, + description, + emptyMessage = "No activity recorded yet.", + items, + onPageChange, + page, + pageSize = 5, + ref, + title = "Activity log", + ...props +}: ActivityLogProps & React.RefAttributes) => { + const totalPages = Math.max(1, Math.ceil(items.length / pageSize)); + const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage); + const currentPage = Math.min( + Math.max(page ?? uncontrolledPage, 1), + totalPages, + ); + const pageNumbers = useMemo( + () => buildPageNumbers(currentPage, totalPages), + [currentPage, totalPages], + ); - function handlePageChange(nextPage: number) { - if (page === undefined) { - setUncontrolledPage(nextPage); - } - onPageChange?.(nextPage); + function handlePageChange(nextPage: number) { + if (page === undefined) { + setUncontrolledPage(nextPage); } + onPageChange?.(nextPage); + } - return ( - - + + + - - - - - ); - }, -); + + + ); +}; ActivityLog.displayName = "ActivityLog"; diff --git a/apps/registry/registry/default/agent-activity/agent-activity.tsx b/apps/registry/registry/default/agent-activity/agent-activity.tsx index 0f682da4..ce36a479 100644 --- a/apps/registry/registry/default/agent-activity/agent-activity.tsx +++ b/apps/registry/registry/default/agent-activity/agent-activity.tsx @@ -3,10 +3,9 @@ import { type ComponentPropsWithoutRef, createContext, - forwardRef, type ReactNode, + use, useCallback, - useContext, useId, useMemo, useState, @@ -155,47 +154,48 @@ const ACTIVITY_LIVE_REGION_ROLE: Record = * * @public */ -export const AgentActivity = forwardRef( - (props, ref) => { - const { - children, - className, - elapsed, - labels, - status = "idle", - ...rest - } = props; - const resolvedLabels = { ...DEFAULT_LABELS, ...labels }; - return ( -
-
-

- {resolvedLabels.activity} -

- {elapsed ? ( - - {elapsed} - - ) : null} -
-
    {children}
-
- ); - }, -); +export const AgentActivity = ( + props: AgentActivityProps & React.RefAttributes, +) => { + const { + children, + className, + elapsed, + labels, + ref, + status = "idle", + ...rest + } = props; + const resolvedLabels = { ...DEFAULT_LABELS, ...labels }; + return ( +
+
+

+ {resolvedLabels.activity} +

+ {elapsed ? ( + + {elapsed} + + ) : null} +
+
    {children}
+
+ ); +}; AgentActivity.displayName = "AgentActivity"; /** @@ -314,68 +314,66 @@ function StepRow({ ); } -export const AgentStep = forwardRef( - (props, ref) => { - const { - children, - className, - defaultOpen = true, - icon, - status, - ...rest - } = props; - const split = useMemo(() => splitChildren(children), [children]); - const palette = STATUS_CLASSES[status]; - const hasDetails = split.body.length > 0; - const [open, setOpen] = useState(defaultOpen); - const detailsId = useId(); - - const handleToggle = useCallback(() => { - setOpen((value) => !value); - }, []); - - const contextValue = useMemo( - () => ({ status }), - [status], - ); - const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status]; - - return ( -
  • - - - {hasDetails && open ? ( -
    -
    {split.body}
    -
    - ) : null} -     -
    • - ); - }, -); +export const AgentStep = ( + props: AgentStepProps & React.RefAttributes, +) => { + const { + children, + className, + defaultOpen = true, + icon, + ref, + status, + ...rest + } = props; + const split = useMemo(() => splitChildren(children), [children]); + const palette = STATUS_CLASSES[status]; + const hasDetails = split.body.length > 0; + const [open, setOpen] = useState(defaultOpen); + const detailsId = useId(); + + const handleToggle = useCallback(() => { + setOpen((value) => !value); + }, []); + + const contextValue = useMemo(() => ({ status }), [status]); + const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status]; + + return ( +
  • + + + {hasDetails && open ? ( +
    +
    {split.body}
    +
    + ) : null} +     +
    • + ); +}; AgentStep.displayName = "AgentStep"; /** @@ -390,10 +388,11 @@ export type AgentStepTitleProps = ComponentPropsWithoutRef<"p">; * * @public */ -export const AgentStepTitle = forwardRef< - HTMLParagraphElement, - AgentStepTitleProps ->(({ className, ...rest }, ref) => ( +export const AgentStepTitle = ({ + className, + ref, + ...rest +}: AgentStepTitleProps & React.RefAttributes) => (

    -)); +); AgentStepTitle.displayName = "AgentStepTitle"; /** @@ -417,16 +416,17 @@ export type AgentStepDurationProps = ComponentPropsWithoutRef<"span">; * * @public */ -export const AgentStepDuration = forwardRef< - HTMLSpanElement, - AgentStepDurationProps ->(({ className, ...rest }, ref) => ( +export const AgentStepDuration = ({ + className, + ref, + ...rest +}: AgentStepDurationProps & React.RefAttributes) => ( -)); +); AgentStepDuration.displayName = "AgentStepDuration"; /** @@ -446,10 +446,13 @@ export type AgentStepProgressProps = { * * @public */ -export const AgentStepProgress = forwardRef< - HTMLDivElement, - AgentStepProgressProps ->(({ className, label = "Step progress", value, ...rest }, ref) => { +export const AgentStepProgress = ({ + className, + label = "Step progress", + ref, + value, + ...rest +}: AgentStepProgressProps & React.RefAttributes) => { const clamped = Math.max(0, Math.min(100, value)); return (

    ); -}); +}; AgentStepProgress.displayName = "AgentStepProgress"; /** @@ -484,14 +487,16 @@ export type AgentStepDetailProps = ComponentPropsWithoutRef<"div">; * * @public */ -export const AgentStepDetail = forwardRef( - ({ className, ...rest }, ref) => ( -
    - ), +export const AgentStepDetail = ({ + className, + ref, + ...rest +}: AgentStepDetailProps & React.RefAttributes) => ( +
    ); AgentStepDetail.displayName = "AgentStepDetail"; @@ -501,5 +506,5 @@ AgentStepDetail.displayName = "AgentStepDetail"; * @public */ export function useAgentStepStatus(): AgentStepStatus { - return useContext(StepContext).status; + return use(StepContext).status; } diff --git a/apps/registry/registry/default/ai-artifact/ai-artifact.tsx b/apps/registry/registry/default/ai-artifact/ai-artifact.tsx index 784648c0..51afa18a 100644 --- a/apps/registry/registry/default/ai-artifact/ai-artifact.tsx +++ b/apps/registry/registry/default/ai-artifact/ai-artifact.tsx @@ -3,10 +3,9 @@ import { type ComponentPropsWithoutRef, createContext, - forwardRef, type ReactNode, + use, useCallback, - useContext, useMemo, useState, } from "react"; @@ -114,7 +113,7 @@ const AIArtifactContext = * @public */ export function useAIArtifact(): AIArtifactContextValue { - return useContext(AIArtifactContext); + return use(AIArtifactContext); } function pickExtension(type: AIArtifactType, language: string): string { @@ -375,62 +374,63 @@ function useArtifactController( ); } -export const AIArtifact = forwardRef( - (props, ref) => { - const { - children, - className, - defaultFullscreen = false, - filename, - labels, - language = "", - onEdit, - subtitle, - title, - type = "code", - value = "", - ...rest - } = props; - const resolvedLabels = useMemo( - () => ({ ...DEFAULT_LABELS, ...labels }), - [labels], - ); - const contextValue = useArtifactController({ - defaultFullscreen, - filename, - labels: resolvedLabels, - language, - onEdit, - title, - type, - value, - }); - - return ( - -
    - - {children} -
    -     - ); - }, -); +export const AIArtifact = ( + props: AIArtifactProps & React.RefAttributes, +) => { + const { + children, + className, + defaultFullscreen = false, + filename, + labels, + language = "", + onEdit, + ref, + subtitle, + title, + type = "code", + value = "", + ...rest + } = props; + const resolvedLabels = useMemo( + () => ({ ...DEFAULT_LABELS, ...labels }), + [labels], + ); + const contextValue = useArtifactController({ + defaultFullscreen, + filename, + labels: resolvedLabels, + language, + onEdit, + title, + type, + value, + }); + + return ( + +
    + + {children} +
    +     + ); +}; AIArtifact.displayName = "AIArtifact"; /** @@ -438,10 +438,11 @@ AIArtifact.displayName = "AIArtifact"; * * @public */ -export const AIArtifactToolbar = forwardRef< - HTMLDivElement, - ComponentPropsWithoutRef<"div"> ->(({ className, ...rest }, ref) => ( +export const AIArtifactToolbar = ({ + className, + ref, + ...rest +}: ComponentPropsWithoutRef<"div"> & React.RefAttributes) => (
    -)); +); AIArtifactToolbar.displayName = "AIArtifactToolbar"; type ToolbarButtonProps = Omit< @@ -465,10 +466,12 @@ type ToolbarButtonProps = Omit< * * @public */ -export const AIArtifactCopyButton = forwardRef< - HTMLButtonElement, - ToolbarButtonProps ->(({ className, onClick, ...rest }, ref) => { +export const AIArtifactCopyButton = ({ + className, + onClick, + ref, + ...rest +}: ToolbarButtonProps & React.RefAttributes) => { const { copied, copy, labels } = useAIArtifact(); const handleClick = useCallback( (event: React.MouseEvent) => { @@ -496,7 +499,7 @@ export const AIArtifactCopyButton = forwardRef< )} ); -}); +}; AIArtifactCopyButton.displayName = "AIArtifactCopyButton"; /** @@ -505,10 +508,12 @@ AIArtifactCopyButton.displayName = "AIArtifactCopyButton"; * * @public */ -export const AIArtifactEditButton = forwardRef< - HTMLButtonElement, - ToolbarButtonProps ->(({ className, onClick, ...rest }, ref) => { +export const AIArtifactEditButton = ({ + className, + onClick, + ref, + ...rest +}: ToolbarButtonProps & React.RefAttributes) => { const { hasOnEdit, labels, onEdit } = useAIArtifact(); const handleClick = useCallback( (event: React.MouseEvent) => { @@ -533,7 +538,7 @@ export const AIArtifactEditButton = forwardRef<