diff --git a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
index 21d01890d..97ab05926 100644
--- a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
+++ b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
@@ -41,12 +41,20 @@ import { cn } from "@coss/ui/lib/utils";
 import {
   type Column,
   type ColumnDef,
-  type ColumnSizingState,
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -127,6 +135,21 @@ type Member = {
   avatarUrl?: string;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: Member[] = [
   {
     avatarUrl:
@@ -352,25 +375,30 @@ function OptionalBadge({ value }: { value?: string }) {
 const FILLER_EXCLUDED_COLUMN_IDS = new Set(["select", "actions"]);
 
 const INITIAL_COLUMN_PINNING = {
-  left: ["select", "name"],
-  right: ["actions"],
+  end: ["actions"],
+  start: ["select", "name"],
 };
 
-function getPinningStyles(column: Column<Member>): CSSProperties {
+function getPinningStyles(
+  column: Column<typeof features, Member, unknown>,
+): CSSProperties {
   const isPinned = column.getIsPinned();
 
   return {
-    "--pinned-left-offset":
-      isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    left: undefined,
-    position: isPinned === "right" ? "sticky" : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    "--pinned-start-offset":
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart: undefined,
+    position: isPinned === "end" ? "sticky" : undefined,
     zIndex: isPinned ? 1 : 0,
   } as CSSProperties;
 }
 
-function getPinnedDataAttribute(column: Column<Member>): {
-  "data-pinned"?: "left" | "right";
+function getPinnedDataAttribute(
+  column: Column<typeof features, Member, unknown>,
+): {
+  "data-pinned"?: "end" | "start";
 } {
   const isPinned = column.getIsPinned();
   return isPinned ? { "data-pinned": isPinned } : {};
@@ -421,8 +449,8 @@ function getColumnDisplayWidth({
 
 function getColumns(
   columnVisibility: Record<ColumnKey, boolean>,
-): ColumnDef<Member>[] {
-  const cols: ColumnDef<Member>[] = [
+): ColumnDef<typeof features, Member>[] {
+  const cols: ColumnDef<typeof features, Member>[] = [
     {
       cell: ({ row }) => (
         <Label>
@@ -595,10 +623,8 @@ export function MembersPageClient() {
   const [columnVisibility, setColumnVisibility] = useState(
     DEFAULT_COLUMN_VISIBILITY,
   );
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -663,35 +689,25 @@ export function MembersPageClient() {
     return () => observer.disconnect();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
-    initialState: {
-      columnPinning: INITIAL_COLUMN_PINNING,
-    },
-    onColumnSizingChange: setColumnSizing,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      columnSizing,
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      initialState: {
+        columnPinning: INITIAL_COLUMN_PINNING,
+      },
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
-
-  const headers = table.getHeaderGroups()[0]?.headers ?? [];
-  const columnsTotalSize = table.getCenterTotalSize();
-  const tableWidth =
-    containerWidth > 0
-      ? Math.max(containerWidth + 2, columnsTotalSize)
-      : columnsTotalSize;
-  const fillerColumnId = getFillerColumnId(headers);
+    () => null,
+  );
 
   return (
     <>
@@ -809,175 +825,204 @@ export function MembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame
-          className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-          ref={tableContainerRef}
+        <table.Subscribe
+          selector={(state) => ({
+            columnSizing: state.columnSizing,
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
         >
-          <Table
-            render={
-              <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
-            }
-            className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
-            variant="card"
-          >
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <TableHead
-                      aria-sort={
-                        header.column.getIsSorted() === "asc"
-                          ? "ascending"
-                          : header.column.getIsSorted() === "desc"
-                            ? "descending"
-                            : "none"
-                      }
-                      className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-                      colSpan={header.colSpan}
-                      key={header.id}
-                      {...getPinnedDataAttribute(header.column)}
-                      style={{
-                        ...getPinningStyles(header.column),
-                        width: getColumnDisplayWidth({
-                          columnId: header.column.id,
-                          columnsTotalSize,
-                          fillerColumnId,
-                          headers,
-                          size: header.getSize(),
-                          tableWidth,
-                        }),
-                      }}
-                    >
-                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                        <div
-                          className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              header.column.getToggleSortingHandler()?.(event);
+          {() => {
+            const headers = table.getHeaderGroups()[0]?.headers ?? [];
+            const columnsTotalSize = table.getCenterTotalSize();
+            const tableWidth =
+              containerWidth > 0
+                ? Math.max(containerWidth + 2, columnsTotalSize)
+                : columnsTotalSize;
+            const fillerColumnId = getFillerColumnId(headers);
+
+            return (
+              <CardFrame
+                className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                ref={tableContainerRef}
+              >
+                <Table
+                  render={
+                    <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
+                  }
+                  className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
+                  variant="card"
+                >
+                  <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
                             }
-                          }}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <span className="truncate text-sm">
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
+                            className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                            colSpan={header.colSpan}
+                            key={header.id}
+                            {...getPinnedDataAttribute(header.column)}
+                            style={{
+                              ...getPinningStyles(header.column),
+                              width: getColumnDisplayWidth({
+                                columnId: header.column.id,
+                                columnsTotalSize,
+                                fillerColumnId,
+                                headers,
+                                size: header.getSize(),
+                                tableWidth,
+                              }),
+                            }}
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                <span className="truncate text-sm">
+                                  {flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                                </span>
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              <span className="truncate">
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </span>
                             )}
-                          </span>
-                          {{
-                            asc: (
-                              <ChevronUpIcon
-                                aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
-                              />
-                            ),
-                            desc: (
-                              <ChevronDownIcon
+                            {header.column.getCanResize() ? (
+                              <div
                                 aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
+                                className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
+                                data-slot="column-resize-handle"
+                                onDoubleClick={() => header.column.resetSize()}
+                                onMouseDown={header.getResizeHandler()}
+                                style={{ cursor: "col-resize" }}
+                                onTouchStart={header.getResizeHandler()}
                               />
-                            ),
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      ) : (
-                        <span className="truncate">
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                        </span>
-                      )}
-                      {header.column.getCanResize() ? (
-                        <div
-                          aria-hidden="true"
-                          className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
-                          data-slot="column-resize-handle"
-                          onDoubleClick={() => header.column.resetSize()}
-                          onMouseDown={header.getResizeHandler()}
-                          style={{ cursor: "col-resize" }}
-                          onTouchStart={header.getResizeHandler()}
-                        />
-                      ) : null}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                    onClick={(event) => {
-                      if (shouldIgnoreRowSelectionClick(event.target)) return;
-                      row.toggleSelected();
-                    }}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
-                        key={cell.id}
-                        {...getPinnedDataAttribute(cell.column)}
-                        style={{
-                          ...getPinningStyles(cell.column),
-                          width: getColumnDisplayWidth({
-                            columnId: cell.column.id,
-                            columnsTotalSize,
-                            fillerColumnId,
-                            headers,
-                            size: cell.column.getSize(),
-                            tableWidth,
-                          }),
-                        }}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
+                            ) : null}
+                          </TableHead>
+                        ))}
+                      </TableRow>
                     ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-          <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
-            <p className="text-muted-foreground text-sm">
-              {table.getFilteredSelectedRowModel().rows.length > 0 ? (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredSelectedRowModel().rows.length}
-                  </strong>{" "}
-                  of{" "}
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  selected
-                </>
-              ) : (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  members
-                </>
-              )}
-            </p>
-          </CardFrameFooter>
-        </CardFrame>
+                  </TableHeader>
+                  <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
+                    {table.getRowModel().rows.length ? (
+                      table.getRowModel().rows.map((row) => (
+                        <TableRow
+                          data-state={
+                            row.getIsSelected() ? "selected" : undefined
+                          }
+                          key={row.id}
+                          onClick={(event) => {
+                            if (shouldIgnoreRowSelectionClick(event.target))
+                              return;
+                            row.toggleSelected();
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell
+                              className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
+                              key={cell.id}
+                              {...getPinnedDataAttribute(cell.column)}
+                              style={{
+                                ...getPinningStyles(cell.column),
+                                width: getColumnDisplayWidth({
+                                  columnId: cell.column.id,
+                                  columnsTotalSize,
+                                  fillerColumnId,
+                                  headers,
+                                  size: cell.column.getSize(),
+                                  tableWidth,
+                                }),
+                              }}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell
+                          className="h-24 text-center"
+                          colSpan={columns.length}
+                        >
+                          No members found.
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+                <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
+                  <p className="text-muted-foreground text-sm">
+                    {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredSelectedRowModel().rows.length}
+                        </strong>{" "}
+                        of{" "}
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        selected
+                      </>
+                    ) : (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        members
+                      </>
+                    )}
+                  </p>
+                </CardFrameFooter>
+              </CardFrame>
+            );
+          }}
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx b/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
index f6159df57..66d80257a 100644
--- a/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
@@ -475,6 +475,7 @@ export function AnalyticsAppsContent() {
         {isSmallScreen ? (
           <ScrollArea
             className="-mx-4 w-[calc(100%+--spacing(4)*2)]"
+            overscrollContain
             scrollbarGutter
           >
             <div className="flex w-max gap-0.5 px-4">
diff --git a/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx b/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
index b6bc0f754..502570b44 100644
--- a/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
@@ -45,10 +45,10 @@ import {
   PopoverTrigger,
 } from "@coss/ui/components/popover";
 import { SelectButton } from "@coss/ui/components/select";
+import type { DateRange } from "@daypicker/react";
 import { ExternalLinkIcon, FileTextIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import {
   AppHeader,
   AppHeaderContent,
diff --git a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
index 50b413029..a5ec1abee 100644
--- a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
@@ -220,6 +220,7 @@ export function NewWebhookFormFields() {
               <CollapsiblePanel>
                 <ScrollArea
                   className="mt-4 h-64 rounded-lg border border-input"
+                  overscrollContain
                   scrollbarGutter
                   scrollFade
                 >
diff --git a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
index ddeae8462..9bee2d2b5 100644
--- a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
@@ -48,11 +48,17 @@ import {
 } from "@coss/ui/components/table";
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -98,6 +104,18 @@ type TeamMember = {
   hasOptions?: boolean;
 };
 
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: TeamMember[] = [
   {
     avatarUrl:
@@ -147,6 +165,15 @@ const members: TeamMember[] = [
   },
 ];
 
+function shouldIgnoreRowSelectionClick(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(
+      'a, button, input, select, textarea, [role="button"], [role="checkbox"], [data-slot="checkbox"], [data-slot="label"]',
+    ) !== null
+  );
+}
+
 function getInitials(name: string): string {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 0) return "";
@@ -230,17 +257,16 @@ function getColumns({
 }: {
   showRoleColumn: boolean;
   showLastActiveColumn: boolean;
-}): ColumnDef<TeamMember>[] {
-  const cols: ColumnDef<TeamMember>[] = [
+}): ColumnDef<typeof features, TeamMember>[] {
+  const cols: ColumnDef<typeof features, TeamMember>[] = [
     {
       cell: ({ row }) => (
-        <Label className="before:absolute before:inset-0">
+        <Label>
           <Checkbox
             aria-label={`Select ${row.original.name}`}
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
           />
-          <span className="sr-only">{`Select ${row.original.name}`}</span>
         </Label>
       ),
       enableSorting: false,
@@ -330,7 +356,6 @@ export function TeamMembersPageClient() {
   const [searchValue, setSearchValue] = useState("");
   const [showRoleColumn, setShowRoleColumn] = useState(true);
   const [showLastActiveColumn, setShowLastActiveColumn] = useState(true);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -389,21 +414,21 @@ export function TeamMembersPageClient() {
     });
   }, [showLastActiveColumn, showRoleColumn]);
 
-  const table = useReactTable({
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
+    () => null,
+  );
 
   return (
     <>
@@ -521,100 +546,124 @@ export function TeamMembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame className="w-full">
-          <Table variant="card" className="table-fixed">
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    const columnSize = header.column.getSize();
-
-                    return (
-                      <TableHead
-                        className={
-                          header.column.id === "name" ? "sm:w-auto!" : undefined
-                        }
-                        key={header.id}
-                        style={
-                          columnSize ? { width: `${columnSize}px` } : undefined
+        <table.Subscribe
+          selector={(state) => ({
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
+        >
+          {() => (
+            <CardFrame className="w-full">
+              <Table variant="card" className="table-fixed">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const columnSize = header.column.getSize();
+
+                        return (
+                          <TableHead
+                            className={
+                              header.column.id === "name"
+                                ? "sm:w-auto!"
+                                : undefined
+                            }
+                            key={header.id}
+                            style={
+                              columnSize
+                                ? { width: `${columnSize}px` }
+                                : undefined
+                            }
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )
+                            )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        data-state={
+                          row.getIsSelected() ? "selected" : undefined
                         }
+                        key={row.id}
+                        onClick={(event) => {
+                          if (shouldIgnoreRowSelectionClick(event.target))
+                            return;
+                          row.toggleSelected();
+                        }}
                       >
-                        {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                          <div
-                            className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                            onClick={header.column.getToggleSortingHandler()}
-                            onKeyDown={(event) => {
-                              if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                header.column.getToggleSortingHandler()?.(
-                                  event,
-                                );
-                              }
-                            }}
-                            role="button"
-                            tabIndex={0}
-                          >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
                             {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
                             )}
-                            {{
-                              asc: (
-                                <ChevronUpIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                              desc: (
-                                <ChevronDownIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                            }[header.column.getIsSorted() as string] ?? null}
-                          </div>
-                        ) : (
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )
-                        )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        className="h-24 text-center"
+                        colSpan={columns.length}
+                      >
+                        No members found.
                       </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardFrame>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </CardFrame>
+          )}
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/examples/calcom/app/layout.tsx b/apps/examples/calcom/app/layout.tsx
index 76fb84b90..89694dd6e 100644
--- a/apps/examples/calcom/app/layout.tsx
+++ b/apps/examples/calcom/app/layout.tsx
@@ -4,7 +4,7 @@ import {
   AnchoredToastProvider,
   ToastProvider,
 } from "@coss/ui/components/toast";
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { ThemeProvider } from "@coss/ui/shared/theme-provider";
 import type { Metadata } from "next";
 import { AppCommand } from "@/components/app/app-command";
@@ -24,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontHeading.variable} ${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <ToastProvider position="bottom-center">
diff --git a/apps/examples/calcom/components/app/app-command.tsx b/apps/examples/calcom/components/app/app-command.tsx
index 742151a7e..dc229304d 100644
--- a/apps/examples/calcom/components/app/app-command.tsx
+++ b/apps/examples/calcom/components/app/app-command.tsx
@@ -631,7 +631,7 @@ export function AppCommand(): React.ReactElement {
               </Button>
             </div>
             <CommandPanel>
-              <ScrollArea scrollbarGutter scrollFade>
+              <ScrollArea overscrollContain scrollbarGutter scrollFade>
                 <div className="p-5">
                   {!aiState.isGenerating &&
                     !aiState.response &&
diff --git a/apps/examples/calcom/components/app/app-header.tsx b/apps/examples/calcom/components/app/app-header.tsx
index f22ef61d3..39e9fe8ef 100644
--- a/apps/examples/calcom/components/app/app-header.tsx
+++ b/apps/examples/calcom/components/app/app-header.tsx
@@ -21,7 +21,7 @@ export function AppHeaderContent({
 }: React.ComponentProps<"div"> & { title: string }): React.ReactElement {
   return (
     <div className={cn("flex flex-col gap-1", className)} {...props}>
-      <h1 className="font-heading font-semibold text-lg leading-none">
+      <h1 className="font-bold font-heading text-lg leading-none [font-variation-settings:'GEOM'_50,'opsz'_32]">
         {title}
       </h1>
       {children}
diff --git a/apps/examples/calcom/components/app/bookings-nav.tsx b/apps/examples/calcom/components/app/bookings-nav.tsx
index ba8590f3f..392fed626 100644
--- a/apps/examples/calcom/components/app/bookings-nav.tsx
+++ b/apps/examples/calcom/components/app/bookings-nav.tsx
@@ -14,7 +14,7 @@ const bookingTabs: Tab[] = [
 function BookingsNav(): React.ReactElement {
   return (
     <div className="max-sm:-mx-4 max-sm:-my-0.5">
-      <ScrollArea scrollbarGutter scrollFade>
+      <ScrollArea overscrollContain scrollbarGutter scrollFade>
         <div className="w-fit max-sm:px-4 max-sm:py-0.5">
           <TabbedNav
             ariaLabel="Filter bookings"
diff --git a/apps/examples/calcom/components/app/filter-chip-date-range.tsx b/apps/examples/calcom/components/app/filter-chip-date-range.tsx
index 5a446717b..2ef4b93ef 100644
--- a/apps/examples/calcom/components/app/filter-chip-date-range.tsx
+++ b/apps/examples/calcom/components/app/filter-chip-date-range.tsx
@@ -7,10 +7,10 @@ import {
   PopoverPopup,
   PopoverTrigger,
 } from "@coss/ui/components/popover";
+import type { DateRange } from "@daypicker/react";
 import { ChevronsUpDownIcon } from "lucide-react";
 import type * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { FilterChipShell } from "./filter-chip-shell";
 import type { ActiveFilter, FilterField } from "./filter-chip-types";
 
diff --git a/apps/examples/calcom/components/logo.tsx b/apps/examples/calcom/components/logo.tsx
index 48ae13170..e677b801e 100644
--- a/apps/examples/calcom/components/logo.tsx
+++ b/apps/examples/calcom/components/logo.tsx
@@ -6,7 +6,7 @@ type LogoProps = Omit<React.ComponentPropsWithoutRef<typeof Link>, "href">;
 export function Logo(props: LogoProps): React.ReactElement {
   return (
     <Link href="/" {...props}>
-      <h1 className="font-heading font-semibold text-foreground text-xl leading-none md:text-base lg:text-lg">
+      <h1 className="font-bold font-heading text-foreground text-xl leading-none [font-variation-settings:'GEOM'_50,'opsz'_32] md:text-base lg:text-lg">
         Cal<span className="md:max-lg:sr-only">.com</span>
       </h1>
     </Link>
diff --git a/apps/examples/calcom/components/ui/sidebar.tsx b/apps/examples/calcom/components/ui/sidebar.tsx
index 6a0a41e93..fdacca037 100644
--- a/apps/examples/calcom/components/ui/sidebar.tsx
+++ b/apps/examples/calcom/components/ui/sidebar.tsx
@@ -167,7 +167,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn("flex h-full flex-col gap-2 px-2", className)}
         data-sidebar="content"
diff --git a/apps/examples/calcom/package.json b/apps/examples/calcom/package.json
index ea50eaf21..1ffc54080 100644
--- a/apps/examples/calcom/package.json
+++ b/apps/examples/calcom/package.json
@@ -1,12 +1,13 @@
 {
   "dependencies": {
     "@coss/ui": "workspace:*",
+    "@daypicker/react": "^10.0.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "dompurify": "^3.3.1",
     "lucide-react": "^0.555.0",
     "marked": "^17.0.1",
diff --git a/apps/origin/package.json b/apps/origin/package.json
index a0a2f461b..22756e999 100644
--- a/apps/origin/package.json
+++ b/apps/origin/package.json
@@ -10,7 +10,7 @@
     "@origin-space/image-cropper": "^0.1.9",
     "@radix-ui/react-icons": "^1.3.2",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
diff --git a/apps/origin/public/r/comp-477.json b/apps/origin/public/r/comp-477.json
index 73fe24bb1..e150ef997 100644
--- a/apps/origin/public/r/comp-477.json
+++ b/apps/origin/public/r/comp-477.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-477.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-478.json b/apps/origin/public/r/comp-478.json
index c20953dbf..93c0f9222 100644
--- a/apps/origin/public/r/comp-478.json
+++ b/apps/origin/public/r/comp-478.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-478.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  type RowData,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ndeclare module \"@tanstack/react-table\" {\n  //allows us to define custom properties for our columns\n  // Type parameters TData and TValue must match TanStack Table's declaration exactly\n  // biome-ignore lint: Type parameters required for module augmentation compatibility\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }\n}\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({ column }: { column: Column<Item, unknown> }) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createSortedRowModel,\n  filterFn_includesString,\n  filterFn_inNumberRange,\n  flexRender,\n  metaHelper,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnVisibilityFeature,\n  facetedMinMaxValues: createFacetedMinMaxValues(),\n  facetedRowModel: createFacetedRowModel(),\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  filterFns: {\n    includesString: filterFn_includesString,\n    inNumberRange: filterFn_inNumberRange,\n  },\n  columnMeta: metaHelper<{\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }>(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const table = useTable(\n    {\n      columns,\n      data: items,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"traffic\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({\n  column,\n}: {\n  column: Column<typeof features, Item, unknown>;\n}) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-479.json b/apps/origin/public/r/comp-479.json
index 9aa20c08b..433acec77 100644
--- a/apps/origin/public/r/comp-479.json
+++ b/apps/origin/public/r/comp-479.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-479.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnSizing: state.columnSizing,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-480.json b/apps/origin/public/r/comp-480.json
index 3cc3a68fa..6ff42c2a8 100644
--- a/apps/origin/public/r/comp-480.json
+++ b/apps/origin/public/r/comp-480.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-480.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastLeftPinned =\n                  isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                const isFirstRightPinned =\n                  isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastLeftPinned\n                        ? \"left\"\n                        : isFirstRightPinned\n                          ? \"right\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"left\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to left\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"right\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to right\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastLeftPinned =\n                    isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                  const isFirstRightPinned =\n                    isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastLeftPinned\n                          ? \"left\"\n                          : isFirstRightPinned\n                            ? \"right\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  flexRender,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n});\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (\n  column: Column<typeof features, Item, unknown>,\n): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    insetInlineEnd:\n      isPinned === \"end\" ? `${column.getAfter(\"end\")}px` : undefined,\n    insetInlineStart:\n      isPinned === \"start\" ? `${column.getStart(\"start\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      features,\n    },\n    (state) => ({\n      columnPinning: state.columnPinning,\n      columnSizing: state.columnSizing,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastStartPinned =\n                  isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                const isFirstEndPinned =\n                  isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastStartPinned\n                        ? \"start\"\n                        : isFirstEndPinned\n                          ? \"end\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"start\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to start\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"end\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to end\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastStartPinned =\n                    isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                  const isFirstEndPinned =\n                    isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastStartPinned\n                          ? \"start\"\n                          : isFirstEndPinned\n                            ? \"end\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-481.json b/apps/origin/public/r/comp-481.json
index 0b3c33e18..885d04d0d 100644
--- a/apps/origin/public/r/comp-481.json
+++ b/apps/origin/public/r/comp-481.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-481.tsx",
-      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type Header,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
+      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  type Header,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nconst initialColumnOrder = columns.map((column) => column.id as string);\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        columnOrder: initialColumnOrder,\n      },\n    },\n    (state) => ({\n      columnOrder: state.columnOrder,\n      sorting: state.sorting,\n    }),\n  );\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      table.setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={table.state.columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={table.state.columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<typeof features, Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({\n  cell,\n}: {\n  cell: Cell<typeof features, Item, unknown>;\n}) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-482.json b/apps/origin/public/r/comp-482.json
index d3c576275..3e3b008ba 100644
--- a/apps/origin/public/r/comp-482.json
+++ b/apps/origin/public/r/comp-482.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-482.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  createExpandedRowModel,\n  flexRender,\n  rowExpandingFeature,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowExpandingFeature,\n  expandedRowModel: createExpandedRowModel(),\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n      getRowCanExpand: (row) => Boolean(row.original.note),\n    },\n    (state) => ({\n      expanded: state.expanded,\n      rowSelection: state.rowSelection,\n    }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-483.json b/apps/origin/public/r/comp-483.json
index 78825b091..665bf6018 100644
--- a/apps/origin/public/r/comp-483.json
+++ b/apps/origin/public/r/comp-483.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-483.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 5,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-484.json b/apps/origin/public/r/comp-484.json
index b0c1a7ee5..ca6c16e54 100644
--- a/apps/origin/public/r/comp-484.json
+++ b/apps/origin/public/r/comp-484.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-484.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.getState().pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.getState().pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive =\n                  page === table.getState().pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.state.pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.state.pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive = page === table.state.pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/origin/public/r/comp-485.json b/apps/origin/public/r/comp-485.json
index 62bbc1eaa..4b44a6bcf 100644
--- a/apps/origin/public/r/comp-485.json
+++ b/apps/origin/public/r/comp-485.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-485.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type Row,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type FilterFn,\n  flexRender,\n  type Row,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  _columnId,\n  filterValue,\n) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 10,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      columnVisibility: state.columnVisibility,\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<typeof features, Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/registry/default/components/comp-477.tsx b/apps/origin/registry/default/components/comp-477.tsx
index 85ab73cd4..0ac0e9865 100644
--- a/apps/origin/registry/default/components/comp-477.tsx
+++ b/apps/origin/registry/default/components/comp-477.tsx
@@ -2,9 +2,11 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
@@ -30,7 +32,12 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -114,11 +121,14 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+    },
+    (state) => ({ rowSelection: state.rowSelection }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-478.tsx b/apps/origin/registry/default/components/comp-478.tsx
index 9a0522c58..cb43b7192 100644
--- a/apps/origin/registry/default/components/comp-478.tsx
+++ b/apps/origin/registry/default/components/comp-478.tsx
@@ -3,17 +3,24 @@
 import {
   type Column,
   type ColumnDef,
-  type ColumnFiltersState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  filterFn_inNumberRange,
   flexRender,
-  getCoreRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  type RowData,
-  type SortingState,
-  useReactTable,
+  metaHelper,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -21,7 +28,7 @@ import {
   ExternalLinkIcon,
   SearchIcon,
 } from "lucide-react";
-import { useId, useMemo, useState } from "react";
+import { useId, useMemo } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Input } from "@/registry/default/ui/input";
@@ -42,15 +49,6 @@ import {
   TableRow,
 } from "@/registry/default/ui/table";
 
-declare module "@tanstack/react-table" {
-  //allows us to define custom properties for our columns
-  // Type parameters TData and TValue must match TanStack Table's declaration exactly
-  // biome-ignore lint: Type parameters required for module augmentation compatibility
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: "text" | "range" | "select";
-  }
-}
-
 type Item = {
   id: string;
   keyword: string;
@@ -63,7 +61,31 @@ type Item = {
   link: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnVisibilityFeature,
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    inNumberRange: filterFn_inNumberRange,
+  },
+  columnMeta: metaHelper<{
+    filterVariant?: "text" | "range" | "select";
+  }>(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -254,31 +276,27 @@ const items: Item[] = [
 ];
 
 export default function Component() {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "traffic",
+      columns,
+      data: items,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "traffic",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: items,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter
-    getFacetedRowModel: getFacetedRowModel(), // client-side faceting
-    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete
-    getFilteredRowModel: getFilteredRowModel(), //client-side filtering
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      sorting,
-    },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const keywordColumn = table.getColumn("keyword");
   const intentsColumn = table.getColumn("intents");
@@ -431,7 +449,11 @@ export default function Component() {
   );
 }
 
-function Filter({ column }: { column: Column<Item, unknown> }) {
+function Filter({
+  column,
+}: {
+  column: Column<typeof features, Item, unknown>;
+}) {
   const id = useId();
   const columnFilterValue = column.getFilterValue();
   const { filterVariant } = column.columnDef.meta ?? {};
diff --git a/apps/origin/registry/default/components/comp-479.tsx b/apps/origin/registry/default/components/comp-479.tsx
index 6473143a8..4e06625ca 100644
--- a/apps/origin/registry/default/components/comp-479.tsx
+++ b/apps/origin/registry/default/components/comp-479.tsx
@@ -2,11 +2,16 @@
 
 import {
   type ColumnDef,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  type SortingState,
-  useReactTable,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -35,7 +40,19 @@ type Item = {
   performance: "Excellent" | "Good" | "Average" | "Poor";
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -99,12 +116,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -117,18 +128,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnSizing: state.columnSizing,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div>
@@ -223,10 +243,7 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell className="truncate" key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/apps/origin/registry/default/components/comp-480.tsx b/apps/origin/registry/default/components/comp-480.tsx
index a858a0311..9ec43d1ae 100644
--- a/apps/origin/registry/default/components/comp-480.tsx
+++ b/apps/origin/registry/default/components/comp-480.tsx
@@ -3,11 +3,14 @@
 import {
   type Column,
   type ColumnDef,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  type SortingState,
-  useReactTable,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowLeftToLineIcon,
@@ -47,19 +50,31 @@ type Item = {
   performance: "Good" | "Very Good" | "Excellent" | "Outstanding";
 };
 
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+});
+
 // Helper function to compute pinning styles for columns
-const getPinningStyles = (column: Column<Item>): CSSProperties => {
+const getPinningStyles = (
+  column: Column<typeof features, Item, unknown>,
+): CSSProperties => {
   const isPinned = column.getIsPinned();
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart:
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
     position: isPinned ? "sticky" : "relative",
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
     width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
   };
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -121,7 +136,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -134,18 +148,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      features,
     },
-  });
+    (state) => ({
+      columnPinning: state.columnPinning,
+      columnSizing: state.columnSizing,
+    }),
+  );
 
   return (
     <div>
@@ -161,20 +175,20 @@ export default function Component() {
               {headerGroup.headers.map((header) => {
                 const { column } = header;
                 const isPinned = column.getIsPinned();
-                const isLastLeftPinned =
-                  isPinned === "left" && column.getIsLastColumn("left");
-                const isFirstRightPinned =
-                  isPinned === "right" && column.getIsFirstColumn("right");
+                const isLastStartPinned =
+                  isPinned === "start" && column.getIsLastColumn("start");
+                const isFirstEndPinned =
+                  isPinned === "end" && column.getIsFirstColumn("end");
 
                 return (
                   <TableHead
-                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                     colSpan={header.colSpan}
                     data-last-col={
-                      isLastLeftPinned
-                        ? "left"
-                        : isFirstRightPinned
-                          ? "right"
+                      isLastStartPinned
+                        ? "start"
+                        : isFirstEndPinned
+                          ? "end"
                           : undefined
                     }
                     data-pinned={isPinned || undefined}
@@ -227,24 +241,24 @@ export default function Component() {
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("left")}
+                                onClick={() => header.column.pin("start")}
                               >
                                 <ArrowLeftToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to left
+                                Stick to start
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("right")}
+                                onClick={() => header.column.pin("end")}
                               >
                                 <ArrowRightToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to right
+                                Stick to end
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -270,26 +284,23 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
                   const { column } = cell;
                   const isPinned = column.getIsPinned();
-                  const isLastLeftPinned =
-                    isPinned === "left" && column.getIsLastColumn("left");
-                  const isFirstRightPinned =
-                    isPinned === "right" && column.getIsFirstColumn("right");
+                  const isLastStartPinned =
+                    isPinned === "start" && column.getIsLastColumn("start");
+                  const isFirstEndPinned =
+                    isPinned === "end" && column.getIsFirstColumn("end");
 
                   return (
                     <TableCell
-                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                       data-last-col={
-                        isLastLeftPinned
-                          ? "left"
-                          : isFirstRightPinned
-                            ? "right"
+                        isLastStartPinned
+                          ? "start"
+                          : isFirstEndPinned
+                            ? "end"
                             : undefined
                       }
                       data-pinned={isPinned || undefined}
diff --git a/apps/origin/registry/default/components/comp-481.tsx b/apps/origin/registry/default/components/comp-481.tsx
index ec7dd64b1..f7511c8cd 100644
--- a/apps/origin/registry/default/components/comp-481.tsx
+++ b/apps/origin/registry/default/components/comp-481.tsx
@@ -21,12 +21,17 @@ import { CSS } from "@dnd-kit/utilities";
 import {
   type Cell,
   type ColumnDef,
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
   type Header,
-  type SortingState,
-  useReactTable,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from "lucide-react";
 import { type CSSProperties, useEffect, useId, useState } from "react";
@@ -50,7 +55,19 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -97,12 +114,10 @@ const columns: ColumnDef<Item>[] = [
   },
 ];
 
+const initialColumnOrder = columns.map((column) => column.id as string);
+
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnOrder, setColumnOrder] = useState<string[]>(
-    columns.map((column) => column.id as string),
-  );
 
   useEffect(() => {
     async function fetchPosts() {
@@ -115,26 +130,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnOrderChange: setColumnOrder,
-    onSortingChange: setSorting,
-    state: {
-      columnOrder,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        columnOrder: initialColumnOrder,
+      },
     },
-  });
+    (state) => ({
+      columnOrder: state.columnOrder,
+      sorting: state.sorting,
+    }),
+  );
 
   // reorder columns after drag & drop
   function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (active && over && active.id !== over.id) {
-      setColumnOrder((columnOrder) => {
+      table.setColumnOrder((columnOrder) => {
         const oldIndex = columnOrder.indexOf(active.id as string);
         const newIndex = columnOrder.indexOf(over.id as string);
         return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util
@@ -161,7 +177,7 @@ export default function Component() {
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow className="bg-muted/50" key={headerGroup.id}>
               <SortableContext
-                items={columnOrder}
+                items={table.state.columnOrder}
                 strategy={horizontalListSortingStrategy}
               >
                 {headerGroup.headers.map((header) => (
@@ -174,13 +190,10 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <SortableContext
-                    items={columnOrder}
+                    items={table.state.columnOrder}
                     key={cell.id}
                     strategy={horizontalListSortingStrategy}
                   >
@@ -220,7 +233,7 @@ export default function Component() {
 const DraggableTableHeader = ({
   header,
 }: {
-  header: Header<Item, unknown>;
+  header: Header<typeof features, Item, unknown>;
 }) => {
   const {
     attributes,
@@ -320,7 +333,11 @@ const DraggableTableHeader = ({
   );
 };
 
-const DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {
+const DragAlongCell = ({
+  cell,
+}: {
+  cell: Cell<typeof features, Item, unknown>;
+}) => {
   const { isDragging, setNodeRef, transform, transition } = useSortable({
     id: cell.column.id,
   });
diff --git a/apps/origin/registry/default/components/comp-482.tsx b/apps/origin/registry/default/components/comp-482.tsx
index 4d0fe53e8..d12e7f000 100644
--- a/apps/origin/registry/default/components/comp-482.tsx
+++ b/apps/origin/registry/default/components/comp-482.tsx
@@ -2,10 +2,13 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
+  createExpandedRowModel,
   flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
+  rowExpandingFeature,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, InfoIcon } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
@@ -33,7 +36,14 @@ type Item = {
   note?: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => {
       return row.getCanExpand() ? (
@@ -151,13 +161,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: (row) => Boolean(row.original.note),
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+      getRowCanExpand: (row) => Boolean(row.original.note),
+    },
+    (state) => ({
+      expanded: state.expanded,
+      rowSelection: state.rowSelection,
+    }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-483.tsx b/apps/origin/registry/default/components/comp-483.tsx
index 088f1167f..20ce40b15 100644
--- a/apps/origin/registry/default/components/comp-483.tsx
+++ b/apps/origin/registry/default/components/comp-483.tsx
@@ -2,13 +2,18 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -55,7 +60,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -134,18 +153,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -158,20 +165,31 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 5,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div className="space-y-4">
@@ -281,7 +299,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -302,15 +320,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
diff --git a/apps/origin/registry/default/components/comp-484.tsx b/apps/origin/registry/default/components/comp-484.tsx
index 5b3590636..657f4d764 100644
--- a/apps/origin/registry/default/components/comp-484.tsx
+++ b/apps/origin/registry/default/components/comp-484.tsx
@@ -2,13 +2,18 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -54,7 +59,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -134,18 +153,6 @@ const columns: ColumnDef<Item>[] = [
 export default function Component() {
   const pageSize = 5;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -158,23 +165,34 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
-    currentPage: table.getState().pagination.pageIndex + 1,
+    currentPage: table.state.pagination.pageIndex + 1,
     paginationItemsToDisplay: 5,
     totalPages: table.getPageCount(),
   });
@@ -285,7 +303,7 @@ export default function Component() {
         >
           Page{" "}
           <span className="text-foreground">
-            {table.getState().pagination.pageIndex + 1}
+            {table.state.pagination.pageIndex + 1}
           </span>{" "}
           of <span className="text-foreground">{table.getPageCount()}</span>
         </p>
@@ -317,8 +335,7 @@ export default function Component() {
 
               {/* Page number buttons */}
               {pages.map((page) => {
-                const isActive =
-                  page === table.getState().pagination.pageIndex + 1;
+                const isActive = page === table.state.pagination.pageIndex + 1;
                 return (
                   <PaginationItem key={page}>
                     <Button
@@ -364,7 +381,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger
               className="w-fit whitespace-nowrap"
diff --git a/apps/origin/registry/default/components/comp-485.tsx b/apps/origin/registry/default/components/comp-485.tsx
index fa339a46a..efeb879d6 100644
--- a/apps/origin/registry/default/components/comp-485.tsx
+++ b/apps/origin/registry/default/components/comp-485.tsx
@@ -2,19 +2,24 @@
 
 import {
   type ColumnDef,
-  type ColumnFiltersState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
   type FilterFn,
   flexRender,
-  getCoreRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
   type Row,
-  type SortingState,
-  useReactTable,
-  type VisibilityState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -101,15 +106,37 @@ type Item = {
   balance: number;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 // Custom filter function for multi-column searching
-const multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {
+const multiColumnFilterFn: FilterFn<typeof features, Item> = (
+  row,
+  _columnId,
+  filterValue,
+) => {
   const searchableRowContent =
     `${row.original.name} ${row.original.email}`.toLowerCase();
   const searchTerm = (filterValue ?? "").toLowerCase();
   return searchableRowContent.includes(searchTerm);
 };
 
-const statusFilterFn: FilterFn<Item> = (
+const statusFilterFn: FilterFn<typeof features, Item> = (
   row,
   columnId,
   filterValue: string[],
@@ -119,7 +146,7 @@ const statusFilterFn: FilterFn<Item> = (
   return filterValue.includes(status);
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -213,21 +240,8 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -249,26 +263,33 @@ export default function Component() {
     table.resetRowSelection();
   };
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      columnVisibility,
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      columnVisibility: state.columnVisibility,
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   // Get unique status values
   const uniqueStatusValues = useMemo(() => {
@@ -603,7 +624,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -624,15 +645,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
@@ -720,7 +741,7 @@ export default function Component() {
   );
 }
 
-function RowActions({ row: _row }: { row: Row<Item> }) {
+function RowActions({ row: _row }: { row: Row<typeof features, Item> }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
diff --git a/apps/ui/app/docs/[[...slug]]/page.tsx b/apps/ui/app/docs/[[...slug]]/page.tsx
index 559a9b8e0..6946d956e 100644
--- a/apps/ui/app/docs/[[...slug]]/page.tsx
+++ b/apps/ui/app/docs/[[...slug]]/page.tsx
@@ -66,7 +66,7 @@ export default async function Page(props: {
                 <div className="flex min-w-0 flex-col gap-8">
                   <div className="flex flex-col gap-2">
                     <div className="flex flex-col gap-2">
-                      <h1 className="scroll-m-20 font-heading font-semibold text-3xl xl:text-4xl">
+                      <h1 className="scroll-m-20 font-bold font-heading text-3xl xl:text-4xl">
                         {doc.title}
                       </h1>
                       {doc.description && (
@@ -113,6 +113,7 @@ export default async function Page(props: {
       <div className="sticky top-(--header-height) z-30 ms-auto hidden h-[calc(100svh-var(--header-height))] w-72 flex-col overflow-hidden overscroll-none xl:flex">
         <ScrollArea
           className="**:data-[slot=scroll-area-scrollbar]:hidden"
+          overscrollContain
           scrollFade
         >
           <div className="flex min-h-0 flex-col gap-2 py-2">
diff --git a/apps/ui/app/layout.tsx b/apps/ui/app/layout.tsx
index 157696a22..995c7c428 100644
--- a/apps/ui/app/layout.tsx
+++ b/apps/ui/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { ThemeProvider } from "@coss/ui/shared/theme-provider";
 import type { Metadata } from "next";
 import {
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <ToastProvider>
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 0ceb7705f..4e706d5ba 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -96,7 +96,7 @@ function CategoryCard({
     <CardFrame className="w-full after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64">
       <CardFrameHeader className="static grid grid-rows-[auto_1fr]">
         <CardFrameTitle
-          className="font-heading text-base"
+          className="font-bold font-heading text-base [font-variation-settings:'GEOM'_50,'opsz'_32]"
           render={
             <h2>
               <Link className="before:absolute before:inset-0" href={href}>
diff --git a/apps/ui/components/site-footer.tsx b/apps/ui/components/site-footer.tsx
index c2004cef2..a338f87b8 100644
--- a/apps/ui/components/site-footer.tsx
+++ b/apps/ui/components/site-footer.tsx
@@ -4,7 +4,10 @@ export function SiteFooter() {
   return (
     <footer className="flex flex-col gap-0.5">
       <p>
-        <Link className="font-heading font-semibold text-lg" href="/">
+        <Link
+          className="font-bold font-heading text-lg [font-variation-settings:'GEOM'_50,'opsz'_32]"
+          href="/"
+        >
           coss.com <span className="text-muted-foreground/72">ui</span>
         </Link>
       </p>
diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index 791298e02..650b81ec5 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,82 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## August 19, 2026
+
+### Tabs sizing and segmented control styles
+
+**`TabsList`** now supports a **`size`** prop with **`"sm"`**, **`"default"`**, and **`"lg"`** values. The size propagates to its **`TabsTab`** children, and an individual tab can override the inherited size when necessary.
+
+The default Tabs appearance now uses the same optical item sizing as the [Segmented Control](/ui/docs/components/segmented-control) pattern. The default rendered height is slightly smaller than before so the inset active indicator remains visually balanced beside a Button of the corresponding size.
+
+Tabs now imports its size map and **`segmentedControlItemLayoutClassName`** from the **`@coss/segmented-control`** registry library. That class covers the shared icon gap, size, and opacity treatment. **`segmentedControlItemVariants`** includes it, and **`TabsTab`** uses it instead of inlining the same utilities. **`@coss/tabs`** declares this as a registry dependency, so the shadcn CLI installs it automatically with a fresh installation or CLI-managed update.
+
+**Migration:**
+
+Existing Tabs JSX requires no changes because **`"default"`** remains the default size. If you replace your local Tabs component through the CLI, review any local customizations before accepting the overwrite:
+
+```bash
+npx shadcn@latest add @coss/tabs
+```
+
+If you update **`tabs.tsx`** manually, install the shared library first and then merge the latest Tabs implementation. Copying only the new Tabs file without this dependency results in an unresolved import.
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+After updating, remove local height or horizontal-padding utilities from **`TabsList`** and **`TabsTab`** only where they unintentionally override the new **`size`** API. Keep intentional product-specific overrides. If you maintain a local copy of the library or Tabs, also merge **`segmentedControlItemLayoutClassName`** so icons stay optically aligned with Button.
+
+**Agent migration prompt:**
+
+```text
+Update the local coss Tabs component to the latest segmented-control sizing and item layout while preserving project-specific customizations. Install the shared registry dependency with `npx shadcn@latest add @coss/segmented-control`, then merge the latest @coss/tabs implementation. TabsList now accepts size="sm" | "default" | "lg" (default: "default") and propagates it to TabsTab; a TabsTab size prop overrides the inherited value. Replace the old hard-coded TabsTab height and horizontal-padding classes with segmentedControlItemSizeClassNames from the shared library, and replace inlined icon gap/size/opacity utilities with segmentedControlItemLayoutClassName. Existing Tabs JSX does not need a size prop. Audit local h-* and px-* overrides on TabsList/TabsTab and remove only those that unintentionally conflict with the new size API. Run formatting and typechecking, then visually verify default and underline Tabs in every size used by the app.
+```
+
+## July 31, 2026
+
+### Scroll Area — overscroll contain
+
+**`ScrollArea`** no longer applies **`overscroll-behavior: contain`** by default. Use the new optional **`overscrollContain`** prop (default **`false`**) to opt in.
+
+Nested surfaces that should not chain scroll to the page already pass it: **`DialogPanel`**, **`SheetPanel`**, **`DrawerPanel`**, **`ComboboxList`**, **`AutocompleteList`**, and **`SidebarContent`**.
+
+**Migration:**
+
+No change required for those composed parts after upgrading. For custom nested scroll areas (command menus, calendar time lists, vendored **`sidebar.tsx`**, etc.), opt in explicitly:
+
+```diff
+- <ScrollArea scrollbarGutter scrollFade>
++ <ScrollArea overscrollContain scrollbarGutter scrollFade>
+```
+
+**Agent migration prompt:**
+
+```text
+After upgrading @coss/scroll-area, ScrollArea no longer applies overscroll-contain by default. Add overscrollContain only on nested scroll surfaces where wheel/touch should not chain to a parent scroller (dialogs, sheets, drawers, popups, sidebars, command panels). DialogPanel, SheetPanel, DrawerPanel, ComboboxList, AutocompleteList, and SidebarContent already pass overscrollContain—update local copies of those components if you vendor them.
+```
+
+## July 26, 2026
+
+### React DayPicker 10
+
+coss ui now targets **`@daypicker/react@10`**. The legacy **`react-day-picker`** package name remains available for compatibility, but DayPicker recommends the scoped package for v10 and newer.
+
+If you import DayPicker APIs directly, update the dependency and imports:
+
+```diff
+- import { DayPicker, type DateRange } from "react-day-picker"
++ import { DayPicker, type DateRange } from "@daypicker/react"
+```
+
+DayPicker v10 removes APIs deprecated in v9, including legacy navigation props, aliases, component slots, and `classNames` / `styles` keys. Applications with custom calendar wrappers should follow the [DayPicker v10 migration guide](https://daypicker.dev/upgrading).
+
+**Agent migration prompt:**
+
+```text
+Upgrade React DayPicker to v10. Replace the react-day-picker dependency with @daypicker/react and update all imports, including style and locale imports. Audit custom Calendar and DatePicker wrappers for APIs removed in v10: replace deprecated navigation and focus props, aliases, component slots, and classNames/styles keys according to https://daypicker.dev/upgrading. If the app uses a non-Gregorian calendar, install the corresponding @daypicker/* add-on and update its imports. Run the typecheck and test affected date-picker screens after migrating.
+```
+
 ## June 22, 2026
 
 ### Base UI 1.6.0
diff --git a/apps/ui/content/docs/(root)/get-started.mdx b/apps/ui/content/docs/(root)/get-started.mdx
index a50e2afd5..71993c502 100644
--- a/apps/ui/content/docs/(root)/get-started.mdx
+++ b/apps/ui/content/docs/(root)/get-started.mdx
@@ -78,10 +78,12 @@ coss components use three CSS custom properties for typography:
 
 - `--font-sans` — Body text, buttons, labels, and most UI elements
 - `--font-mono` — Code blocks, `<kbd>`, monospace text
-- `--font-heading` — Dialog and AlertDialog titles (defaults to Inter, same as `--font-sans`)
+- `--font-heading` — Dialog and AlertDialog titles (`--font-heading: var(--font-sans)` in theme)
 
 When you use `@coss/style`, `@coss/fonts` is installed automatically — Inter for `--font-sans` and `--font-heading`, Geist Mono for `--font-mono` — all wired in your `layout.tsx`.
 
+coss.com uses **Cal Sans 2.0** variable from `@coss/ui/fonts` for both body and headings. By default the theme aliases `--font-heading` to `--font-sans`, so one `--font-sans` variable is enough. You can wire a separate `--font-heading` when titles should use a different family — see [Styling — Font Variables](/ui/docs/styling#font-variables).
+
 ### Custom fonts
 
 To use different fonts, ensure the `variable` option in your `next/font` configuration matches the expected CSS variables:
@@ -91,10 +93,25 @@ import { Inter } from "next/font/google";
 import { JetBrains_Mono } from "next/font/google";
 
 const inter = Inter({ variable: "--font-sans", subsets: ["latin"] });
-const interHeading = Inter({ variable: "--font-heading", subsets: ["latin"] });
 const jetbrainsMono = JetBrains_Mono({ variable: "--font-mono", subsets: ["latin"] });
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it.
+
+For a separate heading font, add `--font-heading` in your layout and update the theme token:
+
+```tsx
+const interDisplay = Inter({ variable: "--font-heading", subsets: ["latin"], weight: "700" });
+
+<body className={`${inter.variable} ${interDisplay.variable} ${jetbrainsMono.variable} font-sans`}>
+```
+
+```css
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
+
 **Note:** Next.js starters default to variable names like `--font-geist-sans`, which don't match coss's expected `--font-sans`. If fonts appear broken after setup, check that the variable names match.
 
 ## Primitive exports
diff --git a/apps/ui/content/docs/(root)/styling.mdx b/apps/ui/content/docs/(root)/styling.mdx
index ff8d786e3..482c4dac6 100644
--- a/apps/ui/content/docs/(root)/styling.mdx
+++ b/apps/ui/content/docs/(root)/styling.mdx
@@ -18,7 +18,7 @@ See [Get Started](/ui/docs/get-started) for installing with the CLI. If you pref
 ```css title="app/globals.css"
 @theme inline {
   --font-sans: var(--font-sans);
-  --font-heading: var(--font-heading);
+  --font-heading: var(--font-sans);
   --font-mono: var(--font-mono);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -165,19 +165,23 @@ See [Get Started](/ui/docs/get-started) for installing with the CLI. If you pref
 
 ## Font Variables
 
-Components like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks. To use custom fonts, define these variables in your layout using `next/font`:
+Components like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks.
 
-```tsx title="app/layout.tsx"
-import { Geist, Geist_Mono } from "next/font/google";
+When you install `@coss/style` via the CLI, Inter is used for `--font-sans` and `--font-heading`, with Geist Mono for `--font-mono`. coss.com uses **Cal Sans 2.0** variable from `@coss/ui/fonts` for both body and headings.
+
+By default, `--font-heading` is aliased to `--font-sans` in the theme. Pair `font-heading` with a weight utility such as `font-bold` or `font-semibold` where needed.
 
-const fontSans = Geist({ variable: "--font-sans", subsets: ["latin"] });
-const fontHeading = Geist({ variable: "--font-heading", subsets: ["latin"], weight: "600" });
-const fontMono = Geist_Mono({ variable: "--font-mono", subsets: ["latin"] });
+### Custom fonts
+
+To use your own fonts, define the variables in your layout with `next/font`:
+
+```tsx title="app/layout.tsx"
+import { fontMono, fontSans } from "@coss/ui/fonts";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+      <body className={`${fontSans.variable} ${fontMono.variable} font-sans`}>
         {children}
       </body>
     </html>
@@ -185,6 +189,22 @@ export default function RootLayout({ children }) {
 }
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it.
+
+For a separate heading font, wire `--font-heading` in your layout and point the theme token at it:
+
+```tsx title="app/layout.tsx"
+import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+
+<body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+```
+
+```css title="app/globals.css"
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
+
 Apply the variables to `html` or `body` so they cascade. The `font-sans` class sets the default body font.
 
 ## Base UI Setup
diff --git a/apps/ui/content/docs/components/avatar.mdx b/apps/ui/content/docs/components/avatar.mdx
index 6ab5a0613..4c584671e 100644
--- a/apps/ui/content/docs/components/avatar.mdx
+++ b/apps/ui/content/docs/components/avatar.mdx
@@ -60,6 +60,20 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+Use `keepMounted` when the image relies on native lazy loading or an optimized image component. The fallback remains visible while the image loads or if it fails:
+
+```tsx
+<Avatar>
+  <AvatarImage
+    src="/avatars/01.png"
+    alt="User avatar"
+    loading="lazy"
+    keepMounted
+  />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
 ## API Reference
 
 ### Avatar
@@ -68,7 +82,7 @@ Root component. Styled wrapper for `Avatar.Root` from Base UI with default size
 
 ### AvatarImage
 
-Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI.
+Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI with support for `keepMounted` images.
 
 ### AvatarFallback
 
diff --git a/apps/ui/content/docs/components/calendar.mdx b/apps/ui/content/docs/components/calendar.mdx
index fc4b3c9ea..8eeb7f53d 100644
--- a/apps/ui/content/docs/components/calendar.mdx
+++ b/apps/ui/content/docs/components/calendar.mdx
@@ -31,7 +31,7 @@ npx shadcn@latest add @coss/calendar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker
+npm install @daypicker/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -58,7 +58,7 @@ import { Calendar } from "@/components/ui/calendar"
 
 ## API Reference
 
-This component wraps [react-day-picker](https://daypicker.dev/) with custom styling.
+This component wraps [@daypicker/react](https://daypicker.dev/) with custom styling.
 
 ### Calendar
 
@@ -77,7 +77,7 @@ A calendar component for date selection.
 | `classNames`      | `object`                                            | -          | Custom class names for calendar parts            |
 | `components`      | `object`                                            | -          | Custom components to override defaults           |
 
-For the full list of props, see the [react-day-picker documentation](https://daypicker.dev/).
+For the full list of props, see the [@daypicker/react documentation](https://daypicker.dev/).
 
 ### Customizing Cell Size
 
@@ -126,3 +126,7 @@ Calendar with a custom Select component for month and year navigation:
 Calendar with a searchable Combobox for month and year navigation:
 
 <ComponentPreview name="p-calendar-6" />
+
+## Changelog
+
+- [July 26, 2026](/ui/docs/changelog#react-daypicker-10) — Upgraded to **React DayPicker 10** and migrated from **`react-day-picker`** to **`@daypicker/react`**. Applications with custom calendar wrappers should follow the linked migration guide.
diff --git a/apps/ui/content/docs/components/combobox.mdx b/apps/ui/content/docs/components/combobox.mdx
index f8c9f1076..fc7d8c875 100644
--- a/apps/ui/content/docs/components/combobox.mdx
+++ b/apps/ui/content/docs/components/combobox.mdx
@@ -59,6 +59,7 @@ import {
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
+  createComboboxItems,
 } from "@/components/ui/combobox"
 ```
 
@@ -81,6 +82,33 @@ const items = [
 </Combobox>
 ```
 
+When your source items are objects but selection should use a stable primitive value, create a typed collection with `createComboboxItems`:
+
+```tsx
+const users = [
+  { id: "ada", name: "Ada Lovelace" },
+  { id: "grace", name: "Grace Hopper" },
+]
+
+const userItems = createComboboxItems(users, {
+  getLabel: (user) => user.name,
+  getValue: (user) => user.id,
+})
+
+<Combobox defaultValue="ada" items={userItems}>
+  <ComboboxInput placeholder="Select a user..." />
+  <ComboboxPopup>
+    <ComboboxList>
+      {(user) => (
+        <ComboboxItem key={user.id} value={user.id}>
+          {user.name}
+        </ComboboxItem>
+      )}
+    </ComboboxList>
+  </ComboboxPopup>
+</Combobox>
+```
+
 ### Multiple Selection
 
 ```tsx
@@ -145,6 +173,10 @@ The root combobox component. Manages the combobox state and provides context to
 | `open`     | `boolean`                               | Controls whether the popup is open                |
 | `...props` | `React.ComponentProps<typeof Combobox>` | All Base UI Combobox props are supported          |
 
+### createComboboxItems
+
+Creates a typed item collection that derives primitive selection values and labels from object items. Define static collections outside components and memoize dynamic collections.
+
 ### ComboboxInput
 
 The input field component for single selection mode with extended features for size variants and addon support.
@@ -328,4 +360,3 @@ Use `SelectButton` as a `render` prop on `ComboboxTrigger` to make the combobox
 ### Form Integration - Multiple
 
 <ComponentPreview name="p-combobox-12" />
-
diff --git a/apps/ui/content/docs/components/date-picker.mdx b/apps/ui/content/docs/components/date-picker.mdx
index 178e12d24..71975f6db 100644
--- a/apps/ui/content/docs/components/date-picker.mdx
+++ b/apps/ui/content/docs/components/date-picker.mdx
@@ -34,7 +34,7 @@ npx shadcn@latest add @coss/calendar @coss/popover @coss/button
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker date-fns lucide-react @base-ui/react
+npm install @daypicker/react date-fns lucide-react @base-ui/react
 ```
 
 <Step>Copy the Calendar, Popover, and Button components to your project.</Step>
diff --git a/apps/ui/content/docs/components/meta.json b/apps/ui/content/docs/components/meta.json
index 92f91f4f3..63fd3eae6 100644
--- a/apps/ui/content/docs/components/meta.json
+++ b/apps/ui/content/docs/components/meta.json
@@ -40,6 +40,7 @@
     "radio-group",
     "scroll-area",
     "select",
+    "segmented-control",
     "separator",
     "sheet",
     "skeleton",
diff --git a/apps/ui/content/docs/components/radio-group.mdx b/apps/ui/content/docs/components/radio-group.mdx
index 5765ed8d9..2954521d6 100644
--- a/apps/ui/content/docs/components/radio-group.mdx
+++ b/apps/ui/content/docs/components/radio-group.mdx
@@ -81,6 +81,8 @@ Individual radio button. Styled wrapper for `Radio.Root` from Base UI with built
 
 For accessible labelling and validation, prefer using the `Field` component to wrap radio buttons. See the related example: [Radio Group field](/ui/docs/components/field#radio-group-field).
 
+For tabs-style mutually exclusive choices, see the [Segmented Control](/ui/docs/components/segmented-control) pattern.
+
 ### Disabled
 
 <ComponentPreview name="p-radio-group-2" />
diff --git a/apps/ui/content/docs/components/scroll-area.mdx b/apps/ui/content/docs/components/scroll-area.mdx
index 6fa6472ae..54aba4ee6 100644
--- a/apps/ui/content/docs/components/scroll-area.mdx
+++ b/apps/ui/content/docs/components/scroll-area.mdx
@@ -79,6 +79,7 @@ Root component. Styled wrapper for `ScrollArea.Root` from Base UI with custom sc
 | `scrollbarGutter`       | `boolean` | `false` | Reserves space for the scrollbar to prevent layout shifts |
 | `fill`                  | `boolean` | `false` | Applies `size-full` to the scroll area content wrapper so flex layouts (e.g. `mt-auto` footers) can fill the viewport height |
 | `clampContentMinWidth`  | `boolean` | `true`  | Sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scrollbars in vertical layouts |
+| `overscrollContain`     | `boolean` | `false` | Prevents scroll chaining into parent scrollers when the viewport overflows |
 
 ### ScrollAreaViewport
 
@@ -133,6 +134,18 @@ Use `fill` when the scroll area wraps a flex column that should stretch to the f
 
 Leave `fill` at the default (`false`) for content-sized areas such as lists, comboboxes, and dialogs where overflow should track child height.
 
+### Overscroll contain
+
+Use **`overscrollContain`** to stop wheel/touch scrolling from chaining into a parent scroller once the viewport hits its edge. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in; pass it yourself for custom nested scroll surfaces.
+
+```tsx
+<ScrollArea className="h-64" overscrollContain>
+  <div className="p-4">{/* Long content */}</div>
+</ScrollArea>
+```
+
+Leave it at the default (`false`) for standalone scroll areas where natural scroll chaining is preferred.
+
 ### Content min-width
 
 Base UI sets `min-width: fit-content` on the content wrapper, which often causes unwanted horizontal scroll in vertical lists and panels (dialogs, comboboxes, sidebars). **`clampContentMinWidth`** defaults to **`true`** and applies `minWidth: 0` to prevent that.
@@ -141,4 +154,5 @@ Horizontal scroll still works when children define their own width (e.g. `w-max`
 
 ## Changelog
 
+- [July 31, 2026](/ui/docs/changelog#scroll-area--overscroll-contain) — **`ScrollArea`** no longer applies overscroll contain by default; pass optional **`overscrollContain`** for nested surfaces. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in.
 - [May 29, 2026](/ui/docs/changelog#scroll-area) — **`ScrollArea`** adds optional **`fill`** (default **`false`**); pass **`fill`** for flex layouts that need the content wrapper to stretch (e.g. sidebar footers with **`mt-auto`**).
diff --git a/apps/ui/content/docs/components/segmented-control.mdx b/apps/ui/content/docs/components/segmented-control.mdx
new file mode 100644
index 000000000..0d3905d51
--- /dev/null
+++ b/apps/ui/content/docs/components/segmented-control.mdx
@@ -0,0 +1,115 @@
+---
+title: Segmented Control
+description: A visual pattern for presenting related choices, navigation destinations, filters, or content views.
+---
+
+<ComponentPreview name="p-radio-group-8" />
+
+## About
+
+A segmented control is a visual pattern, not a standalone behavior. COSS uses the same presentation across several components while preserving the semantics, keyboard interactions, and state model of each underlying primitive.
+
+## Choose the right primitive
+
+| Intent | Use | Why |
+| ------ | --- | --- |
+| Choose one value in a form | [Radio Group](/ui/docs/components/radio-group) | Represents a mutually exclusive value and participates in form state. |
+| Navigate to another URL or route | Navigation links | Preserves link behavior, browser history, and `aria-current`. |
+| Apply an exclusive filter or mode | [Toggle Group](/ui/docs/components/toggle-group) | Represents the pressed state of an action that may be cleared. |
+| Switch between related panels | [Tabs](/ui/docs/components/tabs) | Connects each tab to an associated content panel. |
+
+Choose the primitive from the interaction first, then apply the segmented-control styling. Visual similarity alone is not a reason to use Tabs or Toggle Group.
+
+## Installation
+
+Segmented controls are provided as particles. Install the implementation and size that match your interaction:
+
+| Implementation | Small | Default | Large |
+| -------------- | ----- | ------- | ----- |
+| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
+| Navigation | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
+
+For example, install the default Radio Group version with:
+
+```bash
+npx shadcn@latest add @coss/p-radio-group-8
+```
+
+The CLI installs the shared `segmented-control` styling library and the required primitive automatically.
+
+## Shared styling
+
+For a custom composition, install the styling library directly:
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+The library exports a root class, an item recipe, and a shared item layout class for icons:
+
+```tsx
+import {
+  segmentedControlItemLayoutClassName,
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/lib/segmented-control"
+```
+
+```tsx
+const itemClassName = segmentedControlItemVariants({
+  size: "default",
+  state: "checked",
+})
+```
+
+| Option | Values | Description |
+| ------ | ------ | ----------- |
+| `size` | `"sm" \| "default" \| "lg"` | Controls item height and horizontal padding. |
+| `state` | `"checked" \| "current" \| "pressed"` | Selects the state attribute used by the underlying element. |
+
+Use `checked` with Radio Group, `current` with navigation links, and `pressed` with Toggle Group. Tabs retain their own animated indicator and do not use the shared state recipe. They reuse `segmentedControlItemLayoutClassName` so icons match the other segmented implementations.
+
+At the outside edges, the item padding and the surface's `p-0.5` inset combine to match the horizontal padding of the corresponding Button size. The outer segmented surface is slightly taller than that Button to optically balance its inset selected item when the controls appear next to each other.
+
+<ComponentSource
+  name="segmented-control"
+  title="lib/segmented-control.ts"
+/>
+
+## Radio options
+
+Use Radio Group when the selected segment represents a mutually exclusive value, especially in forms.
+
+### Small Radio Group
+
+<ComponentPreview name="p-radio-group-7" />
+
+### Default Radio Group
+
+<ComponentPreview name="p-radio-group-8" />
+
+### Large Radio Group
+
+<ComponentPreview name="p-radio-group-9" />
+
+## Navigation
+
+Use links when each segment points to a different destination. Apply `aria-current="page"` to the active link.
+
+### Small Navigation
+
+<ComponentPreview name="p-navigation-2" />
+
+### Default Navigation
+
+<ComponentPreview name="p-navigation-1" />
+
+### Large Navigation
+
+<ComponentPreview name="p-navigation-3" />
+
+## Related content
+
+Use Tabs when each segment controls an associated content panel. Tabs share the visual language of segmented controls but keep their animated indicator, orientation support, and panel semantics.
+
+<ComponentPreview name="p-tabs-1" />
diff --git a/apps/ui/content/docs/components/tabs.mdx b/apps/ui/content/docs/components/tabs.mdx
index 60e7699f3..c08dd1dca 100644
--- a/apps/ui/content/docs/components/tabs.mdx
+++ b/apps/ui/content/docs/components/tabs.mdx
@@ -22,13 +22,25 @@ links:
 npx shadcn@latest add @coss/tabs
 ```
 
+The CLI installs the shared `@coss/segmented-control` registry dependency automatically.
+
 </TabsPanel>
 
 <TabsPanel value="manual">
 
 <Steps>
 
-<Step>Copy and paste the following code into your project.</Step>
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @base-ui/react class-variance-authority
+```
+
+<Step>Copy the shared segmented control styling into your project.</Step>
+
+<ComponentSource name="segmented-control" title="lib/segmented-control.ts" />
+
+<Step>Copy and paste the Tabs component into your project.</Step>
 
 <ComponentSource name="tabs" title="components/ui/tabs.tsx" />
 
@@ -65,14 +77,15 @@ import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
 
 Root component. Styled wrapper for `Tabs.Root` from Base UI.
 
-| Prop      | Type                         | Default     | Description                                      |
-| --------- | ---------------------------- | ----------- | ------------------------------------------------ |
-| `variant` | `"default" \| "underline"`   | `"default"` | Controls the tabs styling                        |
-
 ### TabsList
 
 Container for tab triggers. Styled wrapper for `Tabs.List` from Base UI.
 
+| Prop      | Type                       | Default     | Description                         |
+| --------- | -------------------------- | ----------- | ----------------------------------- |
+| `size`    | `"sm" \| "default" \| "lg"` | `"default"` | Controls the size of all tab items. |
+| `variant` | `"default" \| "underline"` | `"default"` | Controls the tabs styling.          |
+
 ### TabsTab
 
 Individual tab trigger. Styled wrapper for `Tabs.Tab` from Base UI.
@@ -87,6 +100,18 @@ Visual indicator for the active tab. Styled wrapper for `Tabs.Indicator` from Ba
 
 ## Examples
 
+For guidance on choosing between Tabs, Radio Group, Toggle Group, and navigation links, see the [Segmented Control](/ui/docs/components/segmented-control) pattern.
+
+Tabs use the same optical sizing as segmented controls. The default surface is slightly taller than a Button of the same size so its inset active indicator remains visually balanced alongside adjacent controls.
+
+### Small
+
+<ComponentPreview name="p-tabs-14" />
+
+### Large
+
+<ComponentPreview name="p-tabs-15" />
+
 ### Underline Variant
 
 <ComponentPreview name="p-tabs-2" />
diff --git a/apps/ui/lib/docs.ts b/apps/ui/lib/docs.ts
index d9f5d1169..baff695c5 100644
--- a/apps/ui/lib/docs.ts
+++ b/apps/ui/lib/docs.ts
@@ -1,5 +1,4 @@
 export const PAGES_NEW = [
   // "/docs/components/{component-name}",
-  "/docs/components/context-menu",
-  "/docs/components/otp-field",
+  "/docs/components/segmented-control",
 ];
diff --git a/apps/ui/package.json b/apps/ui/package.json
index fc45274ff..5cf4d2bc8 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -1,11 +1,12 @@
 {
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.8.0",
     "@coss/ui": "workspace:*",
+    "@daypicker/react": "10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -15,9 +16,9 @@
     "jotai": "^2.15.1",
     "lucide-react": "^0.555.0",
     "marked": "^18.0.5",
+    "motion": "12.42.0",
     "next": "16.2.5",
     "react": "^19.2.6",
-    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.6",
     "shadcn": "^4.1.0",
     "tailwind-merge": "^3.4.0",
diff --git a/apps/ui/public/r/autocomplete.json b/apps/ui/public/r/autocomplete.json
index f1a384671..5daec578f 100644
--- a/apps/ui/public/r/autocomplete.json
+++ b/apps/ui/public/r/autocomplete.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/autocomplete.tsx",
-      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteValue({\n  ...props\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  );\n}\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
+      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteValue: typeof AutocompletePrimitive.Value =\n  AutocompletePrimitive.Value;\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteCollection: typeof AutocompletePrimitive.Collection =\n  AutocompletePrimitive.Collection;\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/avatar.json b/apps/ui/public/r/avatar.json
index d54a36f0f..677171f31 100644
--- a/apps/ui/public/r/avatar.json
+++ b/apps/ui/public/r/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/avatar.tsx",
-      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"size-full object-cover\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\n        \"absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible\",\n        className,\n      )}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 4e004f553..d6e086d4d 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -5,7 +5,8 @@
   "dependencies": [
     "isomorphic-dompurify",
     "marked",
-    "lucide-react"
+    "lucide-react",
+    "motion"
   ],
   "registryDependencies": [
     "@coss/avatar",
@@ -14,26 +15,41 @@
     "@coss/card",
     "@coss/combobox",
     "@coss/empty",
+    "@coss/field",
+    "@coss/form",
+    "@coss/group",
     "@coss/input",
     "@coss/label",
     "@coss/popover",
     "@coss/scroll-area",
     "@coss/select",
-    "@coss/size-transition",
     "@coss/skeleton",
     "@coss/switch",
+    "@coss/textarea",
     "@coss/tooltip"
   ],
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  SizeTransition,\n  SizeTransitionPanel,\n} from \"@/registry/default/ui/size-transition\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <SizeTransition\n          transitionKey={booker.step}\n          render={\n            <div className=\"h-(--size-height,auto) @3xl:w-(--size-width,auto) w-full transition-[width,height] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-transitioning:overflow-clip **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-current:transition-opacity **:data-previous:transition-opacity\" />\n          }\n        >\n          {booker.step === \"select\" ? (\n            <SizeTransitionPanel\n              render={<div className=\"flex w-full @3xl:flex-row flex-col\" />}\n            >\n              {/* Calendar */}\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              {/* Time picker */}\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </SizeTransitionPanel>\n          ) : (\n            <SizeTransitionPanel\n              render={\n                <div className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\" />\n              }\n            >\n              <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                <ArrowLeftIcon aria-hidden=\"true\" />\n                Back\n              </Button>\n              <Input className=\"w-full\" placeholder=\"Your name\" />\n            </SizeTransitionPanel>\n          )}\n        </SizeTransition>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { CalendarIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n  onCreateBookingSuccess,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const selectedDate = booker.timePickerProps.selectedDate;\n  const selectedTime = booker.confirmFormProps.selectedTime;\n  const showSelectedSlot =\n    booker.step === \"confirm\" && selectedDate != null && selectedTime != null;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {showSelectedSlot ? (\n                  <div className=\"flex gap-2\">\n                    <CalendarIcon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {formatSelectedWeekday(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmDateDetail(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmTimeRange(\n                        selectedTime,\n                        booker.durationProps.value,\n                        !booker.timePickerProps.is24Hour,\n                        booker.calendarProps.locale,\n                      )}\n                    </span>\n                  </div>\n                ) : null}\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                {...booker.confirmFormProps}\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                labels={t}\n                onSuccess={onCreateBookingSuccess}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
+    {
+      "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+      "content": "\"use client\";\n\nimport { UserPlusIcon, XIcon } from \"lucide-react\";\nimport type { FormEvent } from \"react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Group } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport { getLocationOptionValue, LocationPicker } from \"./location\";\nimport { createBookingAction } from \"@/lib/booker/actions\";\nimport type { BookerConfirmFormContext } from \"@/lib/booker/use-booker\";\nimport { toCalendarDateKey } from \"@/lib/booker/utils\";\nimport type { Booking } from \"@/lib/cal-api/types\";\n\nexport type BookerConfirmFormProps = BookerConfirmFormContext & {\n  defaultEmail?: string;\n  defaultName?: string;\n  labels: BookerLabels;\n  onSuccess?: (booking: Booking) => void;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nfunction getDefaultLocationProvider(\n  locations: BookerConfirmFormContext[\"locations\"],\n): string {\n  const location = locations?.[0];\n  if (!location) {\n    return \"\";\n  }\n\n  return location.provider || getLocationOptionValue(location, 0);\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  disableGuests = false,\n  durationMinutes,\n  includeLengthInMinutes,\n  labels,\n  locale,\n  locations = [],\n  onBack,\n  onSuccess,\n  selectedDate,\n  selectedTime,\n  target,\n  timeZone,\n}: BookerConfirmFormProps) {\n  const nextGuestIdRef = useRef(0);\n  const [guestIds, setGuestIds] = useState<number[]>([]);\n  const [locationProvider, setLocationProvider] = useState(() =>\n    getDefaultLocationProvider(locations),\n  );\n  const [submitting, setSubmitting] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [successBooking, setSuccessBooking] = useState<Booking | null>(null);\n\n  const resolvedLocationProvider =\n    locations.length > 1\n      ? locationProvider || getDefaultLocationProvider(locations)\n      : getDefaultLocationProvider(locations);\n\n  const handleAddGuest = () => {\n    const id = nextGuestIdRef.current;\n    nextGuestIdRef.current += 1;\n    setGuestIds((current) => [...current, id]);\n  };\n\n  const handleRemoveGuest = (id: number) => {\n    setGuestIds((current) => current.filter((guestId) => guestId !== id));\n  };\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitError(null);\n\n    if (!selectedDate || !selectedTime) {\n      setSubmitError(labels.confirmError);\n      return;\n    }\n\n    const formData = new FormData(event.currentTarget);\n    const name = String(formData.get(\"name\") ?? \"\").trim();\n    const email = String(formData.get(\"email\") ?? \"\").trim();\n    const notes = String(formData.get(\"notes\") ?? \"\").trim();\n    const guests = formData\n      .getAll(\"guests\")\n      .map((value) => String(value).trim())\n      .filter(Boolean);\n\n    if (!name || !email) {\n      return;\n    }\n\n    setSubmitting(true);\n\n    try {\n      const result = await createBookingAction({\n        email,\n        guests: guests.length > 0 ? guests : undefined,\n        ...(includeLengthInMinutes && durationMinutes\n          ? { lengthInMinutes: durationMinutes }\n          : {}),\n        locale,\n        locationProvider: resolvedLocationProvider || undefined,\n        name,\n        notes: notes || undefined,\n        selectedDateKey: toCalendarDateKey(selectedDate),\n        selectedTime,\n        target,\n        timeZone,\n      });\n\n      if (!result.ok) {\n        setSubmitError(result.error || labels.confirmError);\n        return;\n      }\n\n      setSuccessBooking(result.booking);\n      onSuccess?.(result.booking);\n    } catch {\n      setSubmitError(labels.confirmError);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  if (successBooking) {\n    return (\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"font-medium text-base sm:text-sm\">\n          {labels.confirmSuccess}\n        </p>\n        {successBooking.meetingUrl ? (\n          <p className=\"text-muted-foreground text-sm\">\n            <a\n              className=\"text-foreground underline-offset-4 hover:underline\"\n              href={successBooking.meetingUrl}\n              rel=\"noreferrer\"\n              target=\"_blank\"\n            >\n              {successBooking.meetingUrl}\n            </a>\n          </p>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Form className=\"flex flex-col gap-4\" onSubmit={handleSubmit}>\n        <Field name=\"name\">\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input autoFocus defaultValue={defaultName} required type=\"text\" />\n          <FieldError>{labels.confirmNameError}</FieldError>\n        </Field>\n\n        <Field name=\"email\">\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            required\n            type=\"email\"\n          />\n          <FieldError>{labels.confirmEmailError}</FieldError>\n        </Field>\n\n        <LocationPicker\n          label={labels.confirmLocation}\n          locations={locations}\n          onValueChange={setLocationProvider}\n        />\n\n        <Field name=\"notes\">\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />\n        </Field>\n\n        {guestIds.length > 0 ? (\n          <div className=\"flex flex-col gap-2\">\n            {guestIds.map((guestId) => (\n              <Group\n                key={guestId}\n                aria-label={labels.confirmGuestEmail}\n                className=\"w-full gap-2\"\n              >\n                <Input\n                  aria-label={labels.confirmGuestEmail}\n                  className=\"flex-1\"\n                  name=\"guests\"\n                  placeholder={labels.confirmGuestEmailPlaceholder}\n                  type=\"email\"\n                />\n                <div>\n                  <Button\n                    aria-label={labels.confirmRemoveGuest}\n                    onClick={() => handleRemoveGuest(guestId)}\n                    size=\"icon\"\n                    type=\"button\"\n                    variant=\"outline\"\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </Group>\n            ))}\n          </div>\n        ) : null}\n\n        {!disableGuests ? (\n          <Button\n            className=\"h-auto! self-start px-0.5\"\n            onClick={handleAddGuest}\n            type=\"button\"\n            variant=\"link\"\n          >\n            <UserPlusIcon aria-hidden=\"true\" />\n            {labels.confirmAddGuests}\n          </Button>\n        ) : null}\n\n        {submitError ? (\n          <p className=\"text-destructive-foreground text-xs\" role=\"alert\">\n            {submitError}\n          </p>\n        ) : null}\n\n        <p className=\"text-muted-foreground text-xs\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button\n            disabled={submitting}\n            onClick={onBack}\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {labels.confirmBack}\n          </Button>\n          <Button loading={submitting} type=\"submit\">\n            {submitting ? labels.confirmSubmitting : labels.confirmSubmit}\n          </Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/atoms/booker/booker-confirm-form.tsx"
+    },
+    {
+      "path": "registry/default/atoms/booker/booker-steps.tsx",
+      "content": "\"use client\";\n\nimport {\n  animate,\n  domAnimation,\n  LazyMotion,\n  MotionConfig,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { BookerStep } from \"@/lib/booker/use-booker\";\n\nconst EASE = [0.32, 0.72, 0, 1] as const;\nconst SIZE_TRANSITION = { duration: 0.3, ease: EASE } as const;\nconst ENTER_TRANSITION = { delay: 0.05, duration: 0.4, ease: EASE } as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  width: element.offsetWidth,\n  height: element.offsetHeight,\n});\n\nfunction useStepTransition(step: BookerStep) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const reducedMotion = useReducedMotion();\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) return;\n    previousStepRef.current = step;\n\n    const enteringStep = container.firstElementChild as HTMLElement | null;\n\n    if (enteringStep && !reducedMotion) {\n      enteringStep.style.opacity = \"0\";\n    }\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    if (enteringStep) enteringStep.style.width = `${end.width}px`;\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    isAnimatingRef.current = true;\n    const sizeAnimation = animate(\n      container,\n      { width: end.width, height: end.height },\n      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,\n    );\n    const enterAnimation =\n      enteringStep && !reducedMotion\n        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)\n        : null;\n\n    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(\n      () => {\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        enteringStep?.style.removeProperty(\"opacity\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      },\n    );\n\n    return () => {\n      sizeAnimation.stop();\n      enterAnimation?.stop();\n      isAnimatingRef.current = false;\n    };\n  }, [step, reducedMotion]);\n\n  return containerRef;\n}\n\nexport function BookerSteps({\n  step,\n  children,\n}: {\n  step: BookerStep;\n  children: ReactNode;\n}) {\n  const containerRef = useStepTransition(step);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <MotionConfig reducedMotion=\"user\" transition={SIZE_TRANSITION}>\n        <div\n          ref={containerRef}\n          className=\"relative w-full @3xl:flex-1 overflow-clip\"\n        >\n          {children}\n        </div>\n      </MotionConfig>\n    </LazyMotion>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/atoms/booker/booker-steps.tsx"
+    },
     {
       "path": "registry/default/atoms/booker/booker-calendar.tsx",
-      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span key={`year-${part.value}`} className=\"text-muted-foreground/72\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nexport function MonthCaption({\n  date,\n  formatter,\n  className,\n  muteYear = true,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n  muteYear?: boolean;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span\n            key={`year-${part.value}`}\n            className={muteYear ? \"text-muted-foreground/72\" : undefined}\n          >\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-calendar.tsx"
     },
@@ -57,13 +73,13 @@
     },
     {
       "path": "registry/default/atoms/booker/booker-labels.ts",
-      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
+      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNameError: string;\n  confirmEmailError: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmLocation: string;\n  confirmGuestEmail: string;\n  confirmGuestEmailPlaceholder: string;\n  confirmRemoveGuest: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmSubmitting: string;\n  confirmError: string;\n  confirmSuccess: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNameError: \"Please enter your name.\",\n  confirmEmailError: \"Please enter a valid email address.\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmLocation: \"Location\",\n  confirmGuestEmail: \"Guest email\",\n  confirmGuestEmailPlaceholder: \"guest@example.com\",\n  confirmRemoveGuest: \"Remove guest\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmSubmitting: \"Confirming…\",\n  confirmError: \"Could not create booking. Please try again.\",\n  confirmSuccess: \"Booking confirmed\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-labels.ts"
     },
     {
       "path": "registry/default/atoms/booker/location.tsx",
-      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nfunction LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"size-4.5 shrink-0 opacity-80 sm:size-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nexport function LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nexport function LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function getLocationOptionValue(\n  location: EventTypeLocationOption,\n  index: number,\n): string {\n  return location.provider || `${location.label}-${index}`;\n}\n\ntype LocationSelectItem = EventTypeLocationOption & {\n  value: string;\n};\n\ntype LocationPickerProps = {\n  locations: EventTypeLocationOption[];\n  label: string;\n  onValueChange?: (provider: string) => void;\n};\n\nfunction LocationSelectOption({ label, provider }: LocationSelectItem) {\n  return (\n    <span className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span className=\"truncate\">{label}</span>\n    </span>\n  );\n}\n\nexport function LocationPicker({\n  locations,\n  label,\n  onValueChange,\n}: LocationPickerProps) {\n  const items = useMemo(\n    (): LocationSelectItem[] =>\n      locations.map((location, index) => ({\n        ...location,\n        value: getLocationOptionValue(location, index),\n      })),\n    [locations],\n  );\n\n  if (items.length <= 1) {\n    return null;\n  }\n\n  return (\n    <Field name=\"location\">\n      <FieldLabel>{label}</FieldLabel>\n      <Select\n        aria-label={label}\n        defaultValue={items[0]}\n        itemToStringValue={(item) => item.value}\n        onValueChange={(item) => {\n          if (item) {\n            onValueChange?.(item.provider || item.value);\n          }\n        }}\n      >\n        <SelectTrigger>\n          <SelectValue>\n            {(item) => <LocationSelectOption {...item} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectPopup>\n          {items.map((item) => (\n            <SelectItem key={item.value} value={item}>\n              <LocationSelectOption {...item} />\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n    </Field>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/location.tsx"
     },
@@ -81,7 +97,7 @@
     },
     {
       "path": "registry/default/atoms/booker/timezone-picker.tsx",
-      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: timezone.replace(/_/g, \" \"),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nfunction formatTimezoneLabel(timezone: string): string {\n  return timezone.replace(/_/g, \" \");\n}\n\nexport function TimezoneDisplay({ value }: { value: string }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n        aria-hidden=\"true\"\n      />\n      <span>{formatTimezoneLabel(value)}</span>\n    </div>\n  );\n}\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: formatTimezoneLabel(timezone),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/timezone-picker.tsx"
     },
@@ -93,25 +109,25 @@
     },
     {
       "path": "registry/default/atoms/lib/booker/actions.ts",
-      "content": "\"use server\";\n\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n  getPublicEventBannerParamsFromTarget,\n  getUserSlotParamsFromTarget,\n  parseBookingUrlTarget,\n} from \"@/lib/booker/target\";\nimport { CalApiError } from \"@/lib/cal-api/client\";\nimport {\n  getDynamicEventType,\n  getEventType,\n  getEventTypeById,\n  getTeamEventType,\n  getTeamSlugEventType,\n} from \"@/lib/cal-api/event-types\";\nimport { getPublicEventInfo } from \"@/lib/cal-api/public-event\";\nimport { getAvailableSlots } from \"@/lib/cal-api/slots\";\nimport type { EventType } from \"@/lib/cal-api/types\";\n\nexport type FetchRawBookerInput = {\n  monthIso: string;\n  timeZone: string;\n  target: BookerTarget;\n  monthsToFetch?: number;\n  eventTypeId?: number;\n  fetchMeta?: boolean;\n  durationMinutes?: number;\n};\n\ntype ResolvedEventType = {\n  eventTypeId: number | null;\n  eventTypeSlug: string | null;\n  dynamic?: {\n    orgId?: number;\n    orgSlug?: string;\n    usernames: string[];\n  };\n};\n\nexport type FetchRawBookerResult =\n  | {\n      ok: true;\n      raw: {\n        me: unknown;\n        eventTypes: unknown;\n        selectedEventType: unknown | null;\n        bannerUrl: string;\n        publicDisplayName: string;\n        slots: unknown;\n      };\n      resolved: ResolvedEventType;\n    }\n  | {\n      ok: false;\n      error: string;\n      errorCode?: string;\n    };\n\nfunction buildMePayload(target: BookerTarget, eventType: EventType): unknown {\n  const owner = eventType.users?.[0] ?? eventType.hosts?.[0];\n  const dynamicContext = getDynamicContext(target);\n  const fallbackName =\n    target.type === \"user\"\n      ? target.username\n      : dynamicContext\n        ? dynamicContext.usernames.join(\" + \")\n        : (owner?.username ?? \"Unknown user\");\n\n  return {\n    data: {\n      avatarUrl: owner?.avatarUrl,\n      name: owner?.name ?? fallbackName,\n      username: owner?.username ?? fallbackName,\n    },\n  };\n}\n\nfunction buildSlotRange(monthIso: string, monthsToFetch: number) {\n  const monthDate = new Date(monthIso);\n  const safeMonthDate = Number.isNaN(monthDate.getTime())\n    ? new Date()\n    : monthDate;\n  const monthStart = new Date(\n    Date.UTC(safeMonthDate.getFullYear(), safeMonthDate.getMonth(), 1),\n  );\n  const rangeEnd = new Date(\n    Date.UTC(\n      safeMonthDate.getFullYear(),\n      safeMonthDate.getMonth() + monthsToFetch,\n      0,\n    ),\n  );\n  const now = new Date();\n  const todayUtc = new Date(\n    Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()),\n  );\n  const rangeStart = monthStart < todayUtc ? todayUtc : monthStart;\n\n  return {\n    end: rangeEnd.toISOString().slice(0, 10),\n    start: rangeStart.toISOString().slice(0, 10),\n  };\n}\n\nasync function fetchSlotsForEventType(\n  input: FetchRawBookerInput,\n  resolved: ResolvedEventType,\n): Promise<unknown> {\n  const monthsToFetch = Math.max(1, Math.floor(input.monthsToFetch ?? 1));\n  const { end, start } = buildSlotRange(input.monthIso, monthsToFetch);\n  const duration = input.durationMinutes;\n  const organizationSlug = getOrgSlugFromTarget(input.target);\n  const userSlotParams = getUserSlotParamsFromTarget(input.target);\n\n  if (resolved.dynamic) {\n    return getAvailableSlots({\n      duration,\n      end,\n      organizationSlug: resolved.dynamic.orgSlug,\n      start,\n      timeZone: input.timeZone,\n      usernames: resolved.dynamic.usernames,\n    });\n  }\n\n  // Org-hosted user events (e.g. i.cal.com/pasquale/15min) need organizationSlug\n  // on the slots request; username + slug alone resolve a different availability.\n  if (organizationSlug && userSlotParams) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeSlug: userSlotParams.eventTypeSlug,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n      username: userSlotParams.username,\n    });\n  }\n\n  if (resolved.eventTypeId != null) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeId: resolved.eventTypeId,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n    });\n  }\n\n  const eventTypeSlug = resolved.eventTypeSlug;\n  if (!eventTypeSlug) {\n    throw new CalApiError(\n      \"Missing event type slug for slot lookup.\",\n      \"MISSING_SLUG\",\n      400,\n    );\n  }\n\n  return getAvailableSlots({\n    duration,\n    end,\n    eventTypeSlug,\n    organizationSlug,\n    start,\n    timeZone: input.timeZone,\n    username: userSlotParams?.username,\n  });\n}\n\nasync function fetchPublicEventInfo(\n  target: BookerTarget,\n): Promise<{ bannerUrl: string; displayName: string }> {\n  const params = getPublicEventBannerParamsFromTarget(target);\n  if (!params) {\n    return { bannerUrl: \"\", displayName: \"\" };\n  }\n\n  return getPublicEventInfo(params);\n}\n\nfunction getHeaderBannerUrl(\n  target: BookerTarget,\n  publicInfo: { bannerUrl: string },\n): string {\n  // Cal's public booker does not show the org/team banner for dynamic bookings.\n  if (getDynamicContext(target)) {\n    return \"\";\n  }\n\n  return publicInfo.bannerUrl;\n}\n\nasync function resolveEventType(\n  target: BookerTarget,\n): Promise<EventType | null> {\n  if (target.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    });\n  }\n\n  if (target.type === \"user\") {\n    return getEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      username: target.username,\n    });\n  }\n\n  if (target.type === \"team\") {\n    return getTeamEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      teamId: target.teamId,\n    });\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (parsed.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      usernames: parsed.usernames,\n    });\n  }\n\n  if (parsed.type === \"user\") {\n    return getEventType({\n      eventSlug: parsed.eventSlug,\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    });\n  }\n\n  return getTeamSlugEventType({\n    eventSlug: parsed.eventSlug,\n    orgId: parsed.orgId,\n    orgSlug: parsed.orgSlug,\n    teamSlug: parsed.teamSlug,\n  });\n}\n\nfunction buildResolvedEventType(\n  target: BookerTarget,\n  selectedEventType: EventType,\n): ResolvedEventType {\n  const dynamic = getDynamicContext(target);\n  if (dynamic) {\n    return { dynamic, eventTypeId: null, eventTypeSlug: null };\n  }\n\n  return {\n    eventTypeId: selectedEventType.id > 0 ? selectedEventType.id : null,\n    eventTypeSlug: selectedEventType.slug,\n  };\n}\n\nexport async function fetchRawBookerDataAction(\n  input: FetchRawBookerInput,\n): Promise<FetchRawBookerResult> {\n  try {\n    if (input.eventTypeId != null) {\n      const resolved: ResolvedEventType = {\n        eventTypeId: input.eventTypeId,\n        eventTypeSlug: null,\n      };\n      const slots = await fetchSlotsForEventType(input, resolved);\n\n      if (!input.fetchMeta) {\n        return {\n          ok: true,\n          raw: {\n            bannerUrl: \"\",\n            eventTypes: null,\n            me: null,\n            publicDisplayName: \"\",\n            selectedEventType: null,\n            slots,\n          },\n          resolved,\n        };\n      }\n\n      const [selectedEventType, publicInfo] = await Promise.all([\n        getEventTypeById(input.eventTypeId),\n        fetchPublicEventInfo(input.target),\n      ]);\n\n      return {\n        ok: true,\n        raw: {\n          bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n          eventTypes: [selectedEventType],\n          me: buildMePayload(input.target, selectedEventType),\n          publicDisplayName: publicInfo.displayName,\n          selectedEventType,\n          slots,\n        },\n        resolved,\n      };\n    }\n\n    const selectedEventType = await resolveEventType(input.target);\n\n    if (!selectedEventType) {\n      return {\n        error: \"No event type found for the provided target.\",\n        errorCode: \"NOT_FOUND\",\n        ok: false,\n      };\n    }\n\n    if (selectedEventType.hidden) {\n      return {\n        error:\n          \"This event type is currently unpublished and not accepting bookings.\",\n        errorCode: \"UNPUBLISHED\",\n        ok: false,\n      };\n    }\n\n    const resolved = buildResolvedEventType(input.target, selectedEventType);\n    const [slots, publicInfo] = await Promise.all([\n      fetchSlotsForEventType(input, resolved),\n      fetchPublicEventInfo(input.target),\n    ]);\n\n    return {\n      ok: true,\n      raw: {\n        bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n        eventTypes: [selectedEventType],\n        me: buildMePayload(input.target, selectedEventType),\n        publicDisplayName: publicInfo.displayName,\n        selectedEventType,\n        slots,\n      },\n      resolved,\n    };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not load booker data.\",\n      ok: false,\n    };\n  }\n}\n",
+      "content": "\"use server\";\n\nimport { toBookingLocation } from \"@/lib/booker/booking-location\";\nimport {\n  type BookerTarget,\n  getCreateBookingParamsFromTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n  getPublicEventBannerParamsFromTarget,\n  getUserSlotParamsFromTarget,\n  parseBookingUrlTarget,\n} from \"@/lib/booker/target\";\nimport { buildBookingStartIso } from \"@/lib/booker/utils\";\nimport { createBooking } from \"@/lib/cal-api/bookings\";\nimport { CalApiError } from \"@/lib/cal-api/client\";\nimport {\n  getDynamicEventType,\n  getEventType,\n  getEventTypeById,\n  getTeamEventType,\n  getTeamSlugEventType,\n} from \"@/lib/cal-api/event-types\";\nimport { getPublicEventInfo } from \"@/lib/cal-api/public-event\";\nimport { getAvailableSlots } from \"@/lib/cal-api/slots\";\nimport type { Booking, EventType } from \"@/lib/cal-api/types\";\n\nexport type FetchRawBookerInput = {\n  monthIso: string;\n  timeZone: string;\n  target: BookerTarget;\n  monthsToFetch?: number;\n  eventTypeId?: number;\n  fetchMeta?: boolean;\n  durationMinutes?: number;\n};\n\ntype ResolvedEventType = {\n  eventTypeId: number | null;\n  eventTypeSlug: string | null;\n  dynamic?: {\n    orgId?: number;\n    orgSlug?: string;\n    usernames: string[];\n  };\n};\n\nexport type FetchRawBookerResult =\n  | {\n      ok: true;\n      raw: {\n        me: unknown;\n        eventTypes: unknown;\n        selectedEventType: unknown | null;\n        bannerUrl: string;\n        publicDisplayName: string;\n        slots: unknown;\n      };\n      resolved: ResolvedEventType;\n    }\n  | {\n      ok: false;\n      error: string;\n      errorCode?: string;\n    };\n\nfunction buildMePayload(target: BookerTarget, eventType: EventType): unknown {\n  const owner = eventType.users?.[0] ?? eventType.hosts?.[0];\n  const dynamicContext = getDynamicContext(target);\n  const fallbackName =\n    target.type === \"user\"\n      ? target.username\n      : dynamicContext\n        ? dynamicContext.usernames.join(\" + \")\n        : (owner?.username ?? \"Unknown user\");\n\n  return {\n    data: {\n      avatarUrl: owner?.avatarUrl,\n      name: owner?.name ?? fallbackName,\n      username: owner?.username ?? fallbackName,\n    },\n  };\n}\n\nfunction buildSlotRange(monthIso: string, monthsToFetch: number) {\n  const monthDate = new Date(monthIso);\n  const safeMonthDate = Number.isNaN(monthDate.getTime())\n    ? new Date()\n    : monthDate;\n  const monthStart = new Date(\n    Date.UTC(safeMonthDate.getFullYear(), safeMonthDate.getMonth(), 1),\n  );\n  const rangeEnd = new Date(\n    Date.UTC(\n      safeMonthDate.getFullYear(),\n      safeMonthDate.getMonth() + monthsToFetch,\n      0,\n    ),\n  );\n  const now = new Date();\n  const todayUtc = new Date(\n    Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()),\n  );\n  const rangeStart = monthStart < todayUtc ? todayUtc : monthStart;\n\n  return {\n    end: rangeEnd.toISOString().slice(0, 10),\n    start: rangeStart.toISOString().slice(0, 10),\n  };\n}\n\nasync function fetchSlotsForEventType(\n  input: FetchRawBookerInput,\n  resolved: ResolvedEventType,\n): Promise<unknown> {\n  const monthsToFetch = Math.max(1, Math.floor(input.monthsToFetch ?? 1));\n  const { end, start } = buildSlotRange(input.monthIso, monthsToFetch);\n  const duration = input.durationMinutes;\n  const organizationSlug = getOrgSlugFromTarget(input.target);\n  const userSlotParams = getUserSlotParamsFromTarget(input.target);\n\n  if (resolved.dynamic) {\n    return getAvailableSlots({\n      duration,\n      end,\n      organizationSlug: resolved.dynamic.orgSlug,\n      start,\n      timeZone: input.timeZone,\n      usernames: resolved.dynamic.usernames,\n    });\n  }\n\n  // Org-hosted user events (e.g. i.cal.com/pasquale/15min) need organizationSlug\n  // on the slots request; username + slug alone resolve a different availability.\n  if (organizationSlug && userSlotParams) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeSlug: userSlotParams.eventTypeSlug,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n      username: userSlotParams.username,\n    });\n  }\n\n  if (resolved.eventTypeId != null) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeId: resolved.eventTypeId,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n    });\n  }\n\n  const eventTypeSlug = resolved.eventTypeSlug;\n  if (!eventTypeSlug) {\n    throw new CalApiError(\n      \"Missing event type slug for slot lookup.\",\n      \"MISSING_SLUG\",\n      400,\n    );\n  }\n\n  return getAvailableSlots({\n    duration,\n    end,\n    eventTypeSlug,\n    organizationSlug,\n    start,\n    timeZone: input.timeZone,\n    username: userSlotParams?.username,\n  });\n}\n\nasync function fetchPublicEventInfo(\n  target: BookerTarget,\n): Promise<{ bannerUrl: string; displayName: string }> {\n  const params = getPublicEventBannerParamsFromTarget(target);\n  if (!params) {\n    return { bannerUrl: \"\", displayName: \"\" };\n  }\n\n  return getPublicEventInfo(params);\n}\n\nfunction getHeaderBannerUrl(\n  target: BookerTarget,\n  publicInfo: { bannerUrl: string },\n): string {\n  // Cal's public booker does not show the org/team banner for dynamic bookings.\n  if (getDynamicContext(target)) {\n    return \"\";\n  }\n\n  return publicInfo.bannerUrl;\n}\n\nasync function resolveEventType(\n  target: BookerTarget,\n): Promise<EventType | null> {\n  if (target.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    });\n  }\n\n  if (target.type === \"user\") {\n    return getEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      username: target.username,\n    });\n  }\n\n  if (target.type === \"team\") {\n    return getTeamEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      teamId: target.teamId,\n    });\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (parsed.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      usernames: parsed.usernames,\n    });\n  }\n\n  if (parsed.type === \"user\") {\n    return getEventType({\n      eventSlug: parsed.eventSlug,\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    });\n  }\n\n  return getTeamSlugEventType({\n    eventSlug: parsed.eventSlug,\n    orgId: parsed.orgId,\n    orgSlug: parsed.orgSlug,\n    teamSlug: parsed.teamSlug,\n  });\n}\n\nfunction buildResolvedEventType(\n  target: BookerTarget,\n  selectedEventType: EventType,\n): ResolvedEventType {\n  const dynamic = getDynamicContext(target);\n  if (dynamic) {\n    return { dynamic, eventTypeId: null, eventTypeSlug: null };\n  }\n\n  return {\n    eventTypeId: selectedEventType.id > 0 ? selectedEventType.id : null,\n    eventTypeSlug: selectedEventType.slug,\n  };\n}\n\nexport async function fetchRawBookerDataAction(\n  input: FetchRawBookerInput,\n): Promise<FetchRawBookerResult> {\n  try {\n    if (input.eventTypeId != null) {\n      const resolved: ResolvedEventType = {\n        eventTypeId: input.eventTypeId,\n        eventTypeSlug: null,\n      };\n      const slots = await fetchSlotsForEventType(input, resolved);\n\n      if (!input.fetchMeta) {\n        return {\n          ok: true,\n          raw: {\n            bannerUrl: \"\",\n            eventTypes: null,\n            me: null,\n            publicDisplayName: \"\",\n            selectedEventType: null,\n            slots,\n          },\n          resolved,\n        };\n      }\n\n      const [selectedEventType, publicInfo] = await Promise.all([\n        getEventTypeById(input.eventTypeId),\n        fetchPublicEventInfo(input.target),\n      ]);\n\n      return {\n        ok: true,\n        raw: {\n          bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n          eventTypes: [selectedEventType],\n          me: buildMePayload(input.target, selectedEventType),\n          publicDisplayName: publicInfo.displayName,\n          selectedEventType,\n          slots,\n        },\n        resolved,\n      };\n    }\n\n    const selectedEventType = await resolveEventType(input.target);\n\n    if (!selectedEventType) {\n      return {\n        error: \"No event type found for the provided target.\",\n        errorCode: \"NOT_FOUND\",\n        ok: false,\n      };\n    }\n\n    if (selectedEventType.hidden) {\n      return {\n        error:\n          \"This event type is currently unpublished and not accepting bookings.\",\n        errorCode: \"UNPUBLISHED\",\n        ok: false,\n      };\n    }\n\n    const resolved = buildResolvedEventType(input.target, selectedEventType);\n    const [slots, publicInfo] = await Promise.all([\n      fetchSlotsForEventType(input, resolved),\n      fetchPublicEventInfo(input.target),\n    ]);\n\n    return {\n      ok: true,\n      raw: {\n        bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n        eventTypes: [selectedEventType],\n        me: buildMePayload(input.target, selectedEventType),\n        publicDisplayName: publicInfo.displayName,\n        selectedEventType,\n        slots,\n      },\n      resolved,\n    };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not load booker data.\",\n      ok: false,\n    };\n  }\n}\n\nexport type CreateBookingActionInput = {\n  email: string;\n  guests?: string[];\n  lengthInMinutes?: number;\n  locale?: string;\n  locationProvider?: string;\n  name: string;\n  notes?: string;\n  selectedDateKey: string;\n  selectedTime: string;\n  target: BookerTarget;\n  timeZone: string;\n};\n\nexport type CreateBookingActionResult =\n  | { ok: true; booking: Booking }\n  | { ok: false; error: string; errorCode?: string };\n\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nfunction validateCreateBookingInput(\n  input: CreateBookingActionInput,\n): CreateBookingActionResult | null {\n  const name = input.name.trim();\n  if (!name) {\n    return {\n      error: \"Name is required.\",\n      errorCode: \"INVALID_NAME\",\n      ok: false,\n    };\n  }\n\n  const email = input.email.trim();\n  if (!email || !EMAIL_PATTERN.test(email)) {\n    return {\n      error: \"A valid email address is required.\",\n      errorCode: \"INVALID_EMAIL\",\n      ok: false,\n    };\n  }\n\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(input.selectedDateKey)) {\n    return {\n      error: \"Invalid booking date.\",\n      errorCode: \"INVALID_DATE\",\n      ok: false,\n    };\n  }\n\n  if (!/^\\d{2}:\\d{2}$/.test(input.selectedTime)) {\n    return {\n      error: \"Invalid booking time.\",\n      errorCode: \"INVALID_TIME\",\n      ok: false,\n    };\n  }\n\n  if (!input.timeZone.trim()) {\n    return {\n      error: \"Timezone is required.\",\n      errorCode: \"INVALID_TIMEZONE\",\n      ok: false,\n    };\n  }\n\n  if (input.guests?.some((guest) => !EMAIL_PATTERN.test(guest.trim()))) {\n    return {\n      error: \"All guest emails must be valid.\",\n      errorCode: \"INVALID_GUEST_EMAIL\",\n      ok: false,\n    };\n  }\n\n  return null;\n}\n\nfunction getEventTypeDurationOptions(eventType: EventType): number[] | null {\n  const options = (\n    eventType as EventType & { lengthInMinutesOptions?: number[] }\n  ).lengthInMinutesOptions;\n  if (!Array.isArray(options)) {\n    return null;\n  }\n\n  const parsed = options.filter(\n    (value): value is number => typeof value === \"number\" && value > 0,\n  );\n  return parsed.length > 1 ? parsed : null;\n}\n\nfunction resolveBookingLengthInMinutes(\n  eventType: EventType,\n  lengthInMinutes: number | undefined,\n): CreateBookingActionResult | { lengthInMinutes?: number } {\n  const durationOptions = getEventTypeDurationOptions(eventType);\n  if (!durationOptions) {\n    return {};\n  }\n\n  if (lengthInMinutes == null) {\n    return {\n      error: \"Duration is required for this event type.\",\n      errorCode: \"INVALID_DURATION\",\n      ok: false,\n    };\n  }\n\n  if (!durationOptions.includes(lengthInMinutes)) {\n    return {\n      error: \"The selected duration is not allowed for this event type.\",\n      errorCode: \"INVALID_DURATION\",\n      ok: false,\n    };\n  }\n\n  return { lengthInMinutes };\n}\n\nasync function resolveBookableEventType(\n  target: BookerTarget,\n): Promise<CreateBookingActionResult | { eventType: EventType }> {\n  const eventType = await resolveEventType(target);\n\n  if (!eventType) {\n    return {\n      error: \"No event type found for the provided target.\",\n      errorCode: \"NOT_FOUND\",\n      ok: false,\n    };\n  }\n\n  if (eventType.hidden) {\n    return {\n      error:\n        \"This event type is not currently published and is not accepting bookings.\",\n      errorCode: \"UNPUBLISHED\",\n      ok: false,\n    };\n  }\n\n  return { eventType };\n}\n\nexport async function createBookingAction(\n  input: CreateBookingActionInput,\n): Promise<CreateBookingActionResult> {\n  try {\n    const validationError = validateCreateBookingInput(input);\n    if (validationError) {\n      return validationError;\n    }\n\n    const resolvedEvent = await resolveBookableEventType(input.target);\n    if (!(\"eventType\" in resolvedEvent)) {\n      return resolvedEvent;\n    }\n\n    const { eventType } = resolvedEvent;\n\n    if (eventType.disableGuests && input.guests?.length) {\n      return {\n        error: \"Guests are not allowed for this event type.\",\n        errorCode: \"GUESTS_DISABLED\",\n        ok: false,\n      };\n    }\n\n    const lengthResult = resolveBookingLengthInMinutes(\n      eventType,\n      input.lengthInMinutes,\n    );\n    if (\"ok\" in lengthResult) {\n      return lengthResult;\n    }\n\n    const start = buildBookingStartIso(\n      input.selectedDateKey,\n      input.selectedTime,\n      input.timeZone,\n    );\n    const bookingFieldsResponses: Record<string, unknown> = {};\n\n    if (input.notes?.trim()) {\n      bookingFieldsResponses.notes = input.notes.trim();\n    }\n\n    if (input.locationProvider?.trim()) {\n      bookingFieldsResponses.location = input.locationProvider.trim();\n    }\n\n    const targetParams = getCreateBookingParamsFromTarget(input.target, {\n      eventTypeSlug: eventType.slug,\n    });\n\n    const body: Parameters<typeof createBooking>[0] = {\n      attendee: {\n        email: input.email.trim(),\n        name: input.name.trim(),\n        timeZone: input.timeZone,\n        ...(input.locale ? { language: input.locale.split(\"-\")[0] } : {}),\n      },\n      start,\n      ...(input.guests?.length ? { guests: input.guests } : {}),\n      ...(Object.keys(bookingFieldsResponses).length\n        ? { bookingFieldsResponses }\n        : {}),\n      ...(\"lengthInMinutes\" in lengthResult && lengthResult.lengthInMinutes\n        ? { lengthInMinutes: lengthResult.lengthInMinutes }\n        : {}),\n    };\n\n    if (eventType.id > 0) {\n      body.eventTypeId = eventType.id;\n    } else if (\n      eventType.slug &&\n      (targetParams.username || targetParams.teamSlug)\n    ) {\n      body.eventTypeSlug = eventType.slug;\n      if (targetParams.username) {\n        body.username = targetParams.username;\n      }\n      if (targetParams.teamSlug) {\n        body.teamSlug = targetParams.teamSlug;\n      }\n      if (targetParams.organizationSlug) {\n        body.organizationSlug = targetParams.organizationSlug;\n      }\n    } else {\n      return {\n        error: \"Missing event type for booking.\",\n        errorCode: \"MISSING_EVENT_TYPE\",\n        ok: false,\n      };\n    }\n\n    if (input.locationProvider?.trim()) {\n      body.location = toBookingLocation(input.locationProvider.trim());\n    }\n\n    const booking = await createBooking(body);\n    return { ok: true, booking };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not create booking.\",\n      ok: false,\n    };\n  }\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/actions.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/use-booker.ts",
-      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  onBack: () => void;\n  retry: () => void;\n  selectedTime: string | null;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = () => {\n    setStep(\"select\");\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    onBack: handleBack,\n    retry,\n    selectedTime: _selectedTime,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
+      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      disableGuests: eventType.disableGuests ?? false,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type BookerConfirmFormContext = {\n  disableGuests?: boolean;\n  durationMinutes: number;\n  includeLengthInMinutes: boolean;\n  locale: string;\n  locations?: BookerMeta[\"eventTypeLocations\"];\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n  target: BookerTarget;\n  timeZone: string;\n};\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  confirmFormProps: BookerConfirmFormContext;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  retry: () => void;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const [_eventTypeId, setEventTypeId] = useState<number | null>(\n    hydratedData?.resolved.eventTypeId ?? null,\n  );\n  const [_eventTypeSlug, setEventTypeSlug] = useState<string | null>(\n    hydratedData?.resolved.eventTypeSlug ?? null,\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n        setEventTypeId(result.resolved.eventTypeId);\n        setEventTypeSlug(result.resolved.eventTypeSlug);\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        setEventTypeId(null);\n        setEventTypeSlug(null);\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = useCallback(() => {\n    setStep(\"select\");\n  }, []);\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  const confirmFormProps = useMemo((): BookerConfirmFormContext => {\n    return {\n      disableGuests: meta?.disableGuests,\n      durationMinutes: selectedDurationMinutes,\n      includeLengthInMinutes: (meta?.eventTypeDurationOptions?.length ?? 0) > 1,\n      locale,\n      locations: meta?.eventTypeLocations,\n      onBack: handleBack,\n      selectedDate,\n      selectedTime: _selectedTime,\n      target,\n      timeZone: selectedTimeZone,\n    };\n  }, [\n    _selectedTime,\n    locale,\n    meta?.disableGuests,\n    meta?.eventTypeDurationOptions,\n    meta?.eventTypeLocations,\n    selectedDate,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    target,\n    handleBack,\n  ]);\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    confirmFormProps,\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    retry,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/use-booker.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/target.ts",
-      "content": "export type DynamicTargetContext = {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n};\n\nexport type BookerTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"team\";\n      teamId: number;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"link\";\n      bookingUrl: string;\n      orgId?: number;\n    };\n\nexport type LegacyBookerTargetInput = {\n  username?: string | string[];\n  eventSlug?: string;\n  isTeamEvent?: boolean;\n  teamId?: number;\n  bookingUrl?: string;\n  orgId?: number;\n};\n\nexport type ParsedLinkTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"teamSlug\";\n      teamSlug: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    };\n\nconst DYNAMIC_EVENT_SLUG = \"dynamic\";\n\nfunction parsePositiveInt(value: string | null): number | undefined {\n  if (!value) {\n    return undefined;\n  }\n\n  const parsed = Number(value);\n  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;\n}\n\nfunction toUrl(value: string): URL {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    throw new Error(\"Pass a non-empty bookingUrl.\");\n  }\n\n  if (/^https?:\\/\\//i.test(trimmed)) {\n    return new URL(trimmed);\n  }\n\n  return new URL(`https://${trimmed}`);\n}\n\nfunction parseOrgSlugFromHostname(hostname: string): string | undefined {\n  const match = hostname.match(/^([a-z0-9-]+)\\.cal\\.com$/i);\n  const subdomain = match?.[1]?.toLowerCase();\n\n  if (!subdomain) {\n    return undefined;\n  }\n\n  if ([\"api\", \"app\", \"cal\", \"www\"].includes(subdomain)) {\n    return undefined;\n  }\n\n  return subdomain;\n}\n\nfunction parseDynamicUsernames(\n  pathUsername: string,\n  userParam: string | null,\n): string[] {\n  const source = userParam ?? decodeURIComponent(pathUsername);\n  return source\n    .split(/[+,\\s]+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n}\n\nexport function getOrgSlugFromTarget(target: BookerTarget): string | undefined {\n  if (target.type === \"dynamic\") {\n    return target.orgSlug;\n  }\n\n  if (target.type === \"link\") {\n    return parseBookingUrlTarget(target.bookingUrl, target.orgId).orgSlug;\n  }\n\n  return undefined;\n}\n\nexport function getUserSlotParamsFromTarget(\n  target: BookerTarget,\n): { username: string; eventTypeSlug: string } | null {\n  if (target.type === \"user\") {\n    return { eventTypeSlug: target.eventSlug, username: target.username };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"user\") {\n      return { eventTypeSlug: parsed.eventSlug, username: parsed.username };\n    }\n  }\n\n  return null;\n}\n\nexport function getPublicEventBannerParamsFromTarget(target: BookerTarget): {\n  username: string;\n  eventSlug: string;\n  orgSlug: string;\n  isTeamEvent?: boolean;\n} | null {\n  if (target.type !== \"link\") {\n    return null;\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (!parsed.orgSlug) {\n    return null;\n  }\n\n  if (parsed.type === \"user\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    };\n  }\n\n  if (parsed.type === \"teamSlug\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      isTeamEvent: true,\n      orgSlug: parsed.orgSlug,\n      username: parsed.teamSlug,\n    };\n  }\n\n  if (parsed.type === \"dynamic\") {\n    return {\n      eventSlug: \"dynamic\",\n      orgSlug: parsed.orgSlug,\n      username: parsed.usernames.join(\"+\"),\n    };\n  }\n\n  return null;\n}\n\nexport function getDynamicContext(\n  target: BookerTarget,\n): DynamicTargetContext | null {\n  if (target.type === \"dynamic\") {\n    return {\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"dynamic\") {\n      return {\n        orgId: parsed.orgId,\n        orgSlug: parsed.orgSlug,\n        usernames: parsed.usernames,\n      };\n    }\n  }\n\n  return null;\n}\n\nexport function parseBookingUrlTarget(\n  bookingUrl: string,\n  fallbackOrgId?: number,\n): ParsedLinkTarget {\n  const url = toUrl(bookingUrl);\n  const parts = url.pathname.split(\"/\").filter(Boolean);\n  const orgId =\n    parsePositiveInt(url.searchParams.get(\"orgId\")) ?? fallbackOrgId;\n  const orgSlug = parseOrgSlugFromHostname(url.hostname);\n\n  if (parts.length < 2) {\n    throw new Error(\n      \"bookingUrl must include at least username/team and eventSlug.\",\n    );\n  }\n\n  if (parts[0] === \"team\" && parts.length >= 3) {\n    return {\n      eventSlug: decodeURIComponent(parts[2] ?? \"\"),\n      orgId,\n      orgSlug,\n      teamSlug: decodeURIComponent(parts[1] ?? \"\"),\n      type: \"teamSlug\",\n    };\n  }\n\n  const eventSlug = decodeURIComponent(parts[1] ?? \"\");\n  const pathUsername = decodeURIComponent(parts[0] ?? \"\");\n\n  if (eventSlug === DYNAMIC_EVENT_SLUG) {\n    const usernames = parseDynamicUsernames(\n      pathUsername,\n      url.searchParams.get(\"user\"),\n    );\n    if (usernames.length >= 2) {\n      return { orgId, orgSlug, type: \"dynamic\", usernames };\n    }\n  }\n\n  return {\n    eventSlug,\n    orgId,\n    orgSlug,\n    type: \"user\",\n    username: pathUsername,\n  };\n}\n\nexport function normalizeLegacyTarget(\n  props: LegacyBookerTargetInput,\n): BookerTarget {\n  if (props.bookingUrl) {\n    return { bookingUrl: props.bookingUrl, orgId: props.orgId, type: \"link\" };\n  }\n\n  if (props.isTeamEvent) {\n    if (!props.teamId || !props.eventSlug) {\n      throw new Error(\n        \"For team events, pass teamId and eventSlug in target or legacy props.\",\n      );\n    }\n\n    return {\n      eventSlug: props.eventSlug,\n      orgId: props.orgId,\n      teamId: props.teamId,\n      type: \"team\",\n    };\n  }\n\n  const username = Array.isArray(props.username)\n    ? props.username.join(\"+\")\n    : props.username;\n  if (!username || !props.eventSlug) {\n    throw new Error(\"Pass target or username + eventSlug.\");\n  }\n\n  return {\n    eventSlug: props.eventSlug,\n    orgId: props.orgId,\n    type: \"user\",\n    username,\n  };\n}\n",
+      "content": "export type DynamicTargetContext = {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n};\n\nexport type BookerTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"team\";\n      teamId: number;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"link\";\n      bookingUrl: string;\n      orgId?: number;\n    };\n\nexport type LegacyBookerTargetInput = {\n  username?: string | string[];\n  eventSlug?: string;\n  isTeamEvent?: boolean;\n  teamId?: number;\n  bookingUrl?: string;\n  orgId?: number;\n};\n\nexport type ParsedLinkTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"teamSlug\";\n      teamSlug: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    };\n\nconst DYNAMIC_EVENT_SLUG = \"dynamic\";\n\nfunction parsePositiveInt(value: string | null): number | undefined {\n  if (!value) {\n    return undefined;\n  }\n\n  const parsed = Number(value);\n  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;\n}\n\nfunction toUrl(value: string): URL {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    throw new Error(\"Pass a non-empty bookingUrl.\");\n  }\n\n  if (/^https?:\\/\\//i.test(trimmed)) {\n    return new URL(trimmed);\n  }\n\n  return new URL(`https://${trimmed}`);\n}\n\nfunction parseOrgSlugFromHostname(hostname: string): string | undefined {\n  const match = hostname.match(/^([a-z0-9-]+)\\.cal\\.com$/i);\n  const subdomain = match?.[1]?.toLowerCase();\n\n  if (!subdomain) {\n    return undefined;\n  }\n\n  if ([\"api\", \"app\", \"cal\", \"www\"].includes(subdomain)) {\n    return undefined;\n  }\n\n  return subdomain;\n}\n\nfunction parseDynamicUsernames(\n  pathUsername: string,\n  userParam: string | null,\n): string[] {\n  const source = userParam ?? decodeURIComponent(pathUsername);\n  return source\n    .split(/[+,\\s]+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n}\n\nexport function getOrgSlugFromTarget(target: BookerTarget): string | undefined {\n  if (target.type === \"dynamic\") {\n    return target.orgSlug;\n  }\n\n  if (target.type === \"link\") {\n    return parseBookingUrlTarget(target.bookingUrl, target.orgId).orgSlug;\n  }\n\n  return undefined;\n}\n\nexport function getUserSlotParamsFromTarget(\n  target: BookerTarget,\n): { username: string; eventTypeSlug: string } | null {\n  const params = getCreateBookingParamsFromTarget(target);\n  if (!params.username || !params.eventTypeSlug) {\n    return null;\n  }\n\n  return { eventTypeSlug: params.eventTypeSlug, username: params.username };\n}\n\nexport type CreateBookingTargetParams = {\n  eventTypeSlug?: string;\n  organizationSlug?: string;\n  teamSlug?: string;\n  username?: string;\n};\n\nexport function getCreateBookingParamsFromTarget(\n  target: BookerTarget,\n  resolved?: { eventTypeSlug?: string | null },\n): CreateBookingTargetParams {\n  if (target.type === \"user\") {\n    return {\n      eventTypeSlug: target.eventSlug,\n      organizationSlug: getOrgSlugFromTarget(target),\n      username: target.username,\n    };\n  }\n\n  if (target.type === \"team\") {\n    return {\n      eventTypeSlug: target.eventSlug,\n      organizationSlug: getOrgSlugFromTarget(target),\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"user\") {\n      return {\n        eventTypeSlug: parsed.eventSlug,\n        organizationSlug: parsed.orgSlug,\n        username: parsed.username,\n      };\n    }\n\n    if (parsed.type === \"teamSlug\") {\n      return {\n        eventTypeSlug: parsed.eventSlug,\n        organizationSlug: parsed.orgSlug,\n        teamSlug: parsed.teamSlug,\n      };\n    }\n  }\n\n  return {\n    eventTypeSlug: resolved?.eventTypeSlug ?? undefined,\n    organizationSlug: getOrgSlugFromTarget(target),\n  };\n}\n\nexport function getPublicEventBannerParamsFromTarget(target: BookerTarget): {\n  username: string;\n  eventSlug: string;\n  orgSlug: string;\n  isTeamEvent?: boolean;\n} | null {\n  if (target.type !== \"link\") {\n    return null;\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (!parsed.orgSlug) {\n    return null;\n  }\n\n  if (parsed.type === \"user\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    };\n  }\n\n  if (parsed.type === \"teamSlug\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      isTeamEvent: true,\n      orgSlug: parsed.orgSlug,\n      username: parsed.teamSlug,\n    };\n  }\n\n  if (parsed.type === \"dynamic\") {\n    return {\n      eventSlug: \"dynamic\",\n      orgSlug: parsed.orgSlug,\n      username: parsed.usernames.join(\"+\"),\n    };\n  }\n\n  return null;\n}\n\nexport function getDynamicContext(\n  target: BookerTarget,\n): DynamicTargetContext | null {\n  if (target.type === \"dynamic\") {\n    return {\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"dynamic\") {\n      return {\n        orgId: parsed.orgId,\n        orgSlug: parsed.orgSlug,\n        usernames: parsed.usernames,\n      };\n    }\n  }\n\n  return null;\n}\n\nexport function parseBookingUrlTarget(\n  bookingUrl: string,\n  fallbackOrgId?: number,\n): ParsedLinkTarget {\n  const url = toUrl(bookingUrl);\n  const parts = url.pathname.split(\"/\").filter(Boolean);\n  const orgId =\n    parsePositiveInt(url.searchParams.get(\"orgId\")) ?? fallbackOrgId;\n  const orgSlug = parseOrgSlugFromHostname(url.hostname);\n\n  if (parts.length < 2) {\n    throw new Error(\n      \"bookingUrl must include at least username/team and eventSlug.\",\n    );\n  }\n\n  if (parts[0] === \"team\" && parts.length >= 3) {\n    return {\n      eventSlug: decodeURIComponent(parts[2] ?? \"\"),\n      orgId,\n      orgSlug,\n      teamSlug: decodeURIComponent(parts[1] ?? \"\"),\n      type: \"teamSlug\",\n    };\n  }\n\n  const eventSlug = decodeURIComponent(parts[1] ?? \"\");\n  const pathUsername = decodeURIComponent(parts[0] ?? \"\");\n\n  if (eventSlug === DYNAMIC_EVENT_SLUG) {\n    const usernames = parseDynamicUsernames(\n      pathUsername,\n      url.searchParams.get(\"user\"),\n    );\n    if (usernames.length >= 2) {\n      return { orgId, orgSlug, type: \"dynamic\", usernames };\n    }\n  }\n\n  return {\n    eventSlug,\n    orgId,\n    orgSlug,\n    type: \"user\",\n    username: pathUsername,\n  };\n}\n\nexport function normalizeLegacyTarget(\n  props: LegacyBookerTargetInput,\n): BookerTarget {\n  if (props.bookingUrl) {\n    return { bookingUrl: props.bookingUrl, orgId: props.orgId, type: \"link\" };\n  }\n\n  if (props.isTeamEvent) {\n    if (!props.teamId || !props.eventSlug) {\n      throw new Error(\n        \"For team events, pass teamId and eventSlug in target or legacy props.\",\n      );\n    }\n\n    return {\n      eventSlug: props.eventSlug,\n      orgId: props.orgId,\n      teamId: props.teamId,\n      type: \"team\",\n    };\n  }\n\n  const username = Array.isArray(props.username)\n    ? props.username.join(\"+\")\n    : props.username;\n  if (!username || !props.eventSlug) {\n    throw new Error(\"Pass target or username + eventSlug.\");\n  }\n\n  return {\n    eventSlug: props.eventSlug,\n    orgId: props.orgId,\n    type: \"user\",\n    username,\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/target.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/utils.ts",
-      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
+      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  disableGuests: boolean;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  disableGuests?: boolean;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n      disableGuests: false,\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n    disableGuests: record.disableGuests === true,\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function formatConfirmDateDetail(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  }).format(date);\n}\n\nfunction parseTimeLabel(\n  label: string,\n): { hours: number; minutes: number } | null {\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return null;\n  }\n  return { hours, minutes };\n}\n\nfunction formatConfirmTimePart(\n  date: Date,\n  locale: string,\n  hour12: boolean,\n  includePeriod: boolean,\n): string {\n  if (!hour12) {\n    return new Intl.DateTimeFormat(\"en-GB\", {\n      hour: \"2-digit\",\n      hour12: false,\n      minute: \"2-digit\",\n    }).format(date);\n  }\n\n  const parts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n\n  return parts\n    .filter(\n      (part) =>\n        part.type === \"hour\" ||\n        part.type === \"minute\" ||\n        (includePeriod && part.type === \"dayPeriod\") ||\n        (part.type === \"literal\" && part.value.trim() !== \"\"),\n    )\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\")\n    .trim();\n}\n\nexport function formatConfirmTimeRange(\n  startTime: string,\n  durationMinutes: number,\n  hour12: boolean,\n  locale: string,\n): string {\n  const parsed = parseTimeLabel(startTime);\n  if (!parsed) {\n    return startTime;\n  }\n\n  const startDate = new Date();\n  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);\n  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);\n\n  if (!hour12) {\n    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;\n  }\n\n  const startParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(startDate);\n  const endParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(endDate);\n  const startPeriod = startParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const endPeriod = endParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const samePeriod = startPeriod === endPeriod;\n\n  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function buildBookingStartIso(\n  dateKey: string,\n  selectedTime: string,\n  timeZone: string,\n): string {\n  const parsed = parseTimeLabel(selectedTime);\n  if (!parsed) {\n    throw new Error(\"Invalid time slot.\");\n  }\n\n  const dateParts = dateKey.split(\"-\");\n  const year = Number(dateParts[0]);\n  const month = Number(dateParts[1]);\n  const day = Number(dateParts[2]);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    throw new Error(\"Invalid booking date.\");\n  }\n\n  const { hours, minutes } = parsed;\n  const utcGuess = Date.UTC(year, month - 1, day, hours, minutes, 0);\n  const formatter = new Intl.DateTimeFormat(\"en-US\", {\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    month: \"2-digit\",\n    second: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  });\n  const parts = formatter.formatToParts(new Date(utcGuess));\n  const get = (type: Intl.DateTimeFormatPartTypes) =>\n    Number(parts.find((part) => part.type === type)?.value);\n  const asUtc = Date.UTC(\n    get(\"year\"),\n    get(\"month\") - 1,\n    get(\"day\"),\n    get(\"hour\") % 24,\n    get(\"minute\"),\n    get(\"second\"),\n  );\n  const offset = asUtc - utcGuess;\n\n  return new Date(utcGuess - offset).toISOString();\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/utils.ts"
     }
diff --git a/apps/ui/public/r/cal-api.json b/apps/ui/public/r/cal-api.json
index fdf784ae6..f48f9428c 100644
--- a/apps/ui/public/r/cal-api.json
+++ b/apps/ui/public/r/cal-api.json
@@ -20,7 +20,7 @@
     },
     {
       "path": "registry/default/lib/cal-api/event-types.ts",
-      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return matches[0] ?? null;\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug ?? \"dynamic\",\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nfunction findEventTypeBySlug(\n  matches: EventType[],\n  eventSlug: string,\n): EventType | null {\n  return matches.find((event) => event.slug === eventSlug) ?? null;\n}\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const eventSlug = params.eventSlug ?? \"dynamic\";\n  const matches = await listEventTypes({\n    eventSlug,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return findEventTypeBySlug(matches, eventSlug);\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
       "type": "registry:lib",
       "target": "lib/cal-api/event-types.ts"
     },
@@ -38,9 +38,15 @@
     },
     {
       "path": "registry/default/lib/cal-api/types.ts",
-      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId: number;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
+      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type BookingLocationInput =\n  | { type: \"integration\"; integration: string }\n  | { type: \"address\" }\n  | { type: \"link\" }\n  | { type: \"phone\" }\n  | { type: \"organizersDefaultApp\" };\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId?: number;\n  eventTypeSlug?: string;\n  username?: string;\n  teamSlug?: string;\n  organizationSlug?: string;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: BookingLocationInput | string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
       "type": "registry:lib",
       "target": "lib/cal-api/types.ts"
+    },
+    {
+      "path": "registry/default/lib/cal-api/bookings.ts",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { Booking, CreateBookingInput } from \"./types\";\n\nexport async function createBooking(\n  input: CreateBookingInput,\n): Promise<Booking> {\n  return calApi<Booking>(\"/bookings\", {\n    body: input,\n    method: \"POST\",\n  });\n}\n",
+      "type": "registry:lib",
+      "target": "lib/cal-api/bookings.ts"
     }
   ],
   "type": "registry:lib"
diff --git a/apps/ui/public/r/calendar.json b/apps/ui/public/r/calendar.json
index 5937f03c7..c0d67f396 100644
--- a/apps/ui/public/r/calendar.json
+++ b/apps/ui/public/r/calendar.json
@@ -2,14 +2,14 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "calendar",
   "dependencies": [
-    "react-day-picker",
+    "@daypicker/react",
     "lucide-react"
   ],
   "registryDependencies": [],
   "files": [
     {
       "path": "registry/default/ui/calendar.tsx",
-      "content": "\"use client\";\n\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { DayPicker } from \"@daypicker/react\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/card.json b/apps/ui/public/r/card.json
index 12521aa0a..25155e8bb 100644
--- a/apps/ui/public/r/card.json
+++ b/apps/ui/public/r/card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/card.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-heading font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index aa90ef9a4..24f5c04bb 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxValue({\n  ...props\n}: ComboboxPrimitive.Value.Props): React.ReactElement {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxCollection(\n  props: ComboboxPrimitive.Collection.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<\n  Value,\n  Multiple extends boolean | undefined = false,\n  Item = Value,\n>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"wrap-anywhere col-start-2 min-w-0\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const createComboboxItems: typeof ComboboxPrimitive.createItems =\n  ComboboxPrimitive.createItems;\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/command.json b/apps/ui/public/r/command.json
index 6a16b07e9..8c2bf691d 100644
--- a/apps/ui/public/r/command.json
+++ b/apps/ui/public/r/command.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/command.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  portalProps,\n  ...props\n}: CommandDialogPrimitive.Popup.Props & {\n  portalProps?: CommandDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <CommandDialogPortal {...portalProps}>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  portalProps,\n  ...props\n}: CommandDialogPrimitive.Popup.Props & {\n  portalProps?: CommandDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <CommandDialogPortal {...portalProps}>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport const CommandCollection = AutocompleteCollection;\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/dialog.json b/apps/ui/public/r/dialog.json
index b718782df..36e9934f5 100644
--- a/apps/ui/public/r/dialog.json
+++ b/apps/ui/public/r/dialog.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/dialog.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  portalProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n  portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal {...portalProps}>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n",
+      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  portalProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n  portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal {...portalProps}>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea overscrollContain scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/drawer.json b/apps/ui/public/r/drawer.json
index 92fab4719..ef6576039 100644
--- a/apps/ui/public/r/drawer.json
+++ b/apps/ui/public/r/drawer.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/drawer.tsx",
-      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea\n        className=\"touch-auto\"\n        overscrollContain\n        scrollFade={scrollFade}\n      >\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_minmax(0,1fr)] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"wrap-anywhere col-start-1 min-w-0\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"wrap-anywhere col-start-2 min-w-0\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_minmax(0,1fr)] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"wrap-anywhere col-start-2 min-w-0\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/input-group.json b/apps/ui/public/r/input-group.json
index 6b0ab371c..19052ae10 100644
--- a/apps/ui/public/r/input-group.json
+++ b/apps/ui/public/r/input-group.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/ui/input-group.tsx",
-      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
+      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as Element;\n        if (!e.currentTarget.contains(target)) return;\n\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/input.json b/apps/ui/public/r/input.json
index bb1a1a58b..a185a0356 100644
--- a/apps/ui/public/r/input.json
+++ b/apps/ui/public/r/input.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/input.tsx",
-      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  style,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={typeof style === \"function\" ? undefined : style}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={style}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  style,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={typeof style === \"function\" ? undefined : style}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={style}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/number-field.json b/apps/ui/public/r/number-field.json
index d875a8bc5..522818b40 100644
--- a/apps/ui/public/r/number-field.json
+++ b/apps/ui/public/r/number-field.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/number-field.tsx",
-      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n",
+      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/p-autocomplete-16.json b/apps/ui/public/r/p-autocomplete-16.json
new file mode 100644
index 000000000..6f76617af
--- /dev/null
+++ b/apps/ui/public/r/p-autocomplete-16.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-autocomplete-16",
+  "description": "Address autocomplete with Google Maps Places API",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/autocomplete",
+    "@coss/spinner"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-autocomplete-16.tsx",
+      "content": "\"use client\";\n\nimport { MapPinIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\n// Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY with the Places API (New) enabled to fetch\n// live suggestions. Without a key, the demo falls back to sample addresses.\nconst GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? \"\";\n\ntype AddressSuggestion = {\n  placeId: string;\n  text: string;\n  mainText: string;\n  secondaryText: string;\n};\n\nconst sampleAddresses: AddressSuggestion[] = [\n  {\n    mainText: \"1600 Amphitheatre Parkway\",\n    secondaryText: \"Mountain View, CA 94043, USA\",\n  },\n  {\n    mainText: \"1600 Pennsylvania Avenue NW\",\n    secondaryText: \"Washington, DC 20500, USA\",\n  },\n  { mainText: \"350 Fifth Avenue\", secondaryText: \"New York, NY 10118, USA\" },\n  {\n    mainText: \"221B Baker Street\",\n    secondaryText: \"London NW1 6XE, United Kingdom\",\n  },\n  {\n    mainText: \"Champ de Mars, 5 Avenue Anatole France\",\n    secondaryText: \"75007 Paris, France\",\n  },\n  {\n    mainText: \"Piazza del Colosseo, 1\",\n    secondaryText: \"00184 Roma RM, Italy\",\n  },\n  { mainText: \"Platz der Republik 1\", secondaryText: \"11011 Berlin, Germany\" },\n  {\n    mainText: \"1 Macquarie Street\",\n    secondaryText: \"Sydney NSW 2000, Australia\",\n  },\n].map((address, index) => ({\n  ...address,\n  placeId: `sample-${index + 1}`,\n  text: `${address.mainText}, ${address.secondaryText}`,\n}));\n\n// A short-lived session token groups Autocomplete + Place Details requests\n// for billing.\nfunction newSessionToken() {\n  if (typeof crypto !== \"undefined\" && \"randomUUID\" in crypto) {\n    return crypto.randomUUID();\n  }\n  return Math.random().toString(36).slice(2);\n}\n\ntype PlacesAutocompleteResponse = {\n  suggestions?: {\n    placePrediction?: {\n      placeId?: string;\n      text?: { text?: string };\n      structuredFormat?: {\n        mainText?: { text?: string };\n        secondaryText?: { text?: string };\n      };\n    };\n  }[];\n};\n\nasync function fetchAddressSuggestions(\n  query: string,\n  sessionToken: string,\n  signal: AbortSignal,\n): Promise<AddressSuggestion[]> {\n  const response = await fetch(\n    \"https://places.googleapis.com/v1/places:autocomplete\",\n    {\n      body: JSON.stringify({ input: query, sessionToken }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n        \"X-Goog-Api-Key\": GOOGLE_MAPS_API_KEY,\n      },\n      method: \"POST\",\n      signal,\n    },\n  );\n  if (!response.ok) {\n    throw new Error(\"Places API request failed\");\n  }\n  const data = (await response.json()) as PlacesAutocompleteResponse;\n  const suggestions: AddressSuggestion[] = [];\n  for (const suggestion of data.suggestions ?? []) {\n    const prediction = suggestion.placePrediction;\n    if (!prediction?.placeId) continue;\n    const text = prediction.text?.text ?? \"\";\n    suggestions.push({\n      mainText: prediction.structuredFormat?.mainText?.text ?? text,\n      placeId: prediction.placeId,\n      secondaryText: prediction.structuredFormat?.secondaryText?.text ?? \"\",\n      text,\n    });\n  }\n  return suggestions;\n}\n\nasync function searchSampleAddresses(\n  query: string,\n): Promise<AddressSuggestion[]> {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.random() * 500 + 100),\n  );\n  const lowerQuery = query.toLowerCase();\n  return sampleAddresses.filter((address) =>\n    address.text.toLowerCase().includes(lowerQuery),\n  );\n}\n\nexport default function Particle() {\n  const [searchValue, setSearchValue] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);\n  const [error, setError] = useState<string | null>(null);\n  const sessionTokenRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    const query = searchValue.trim();\n    if (!query) {\n      setSuggestions([]);\n      setIsLoading(false);\n      setError(null);\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n    let ignore = false;\n    const controller = new AbortController();\n\n    const timeoutId = setTimeout(async () => {\n      try {\n        sessionTokenRef.current ??= newSessionToken();\n        const results = GOOGLE_MAPS_API_KEY\n          ? await fetchAddressSuggestions(\n              query,\n              sessionTokenRef.current,\n              controller.signal,\n            )\n          : await searchSampleAddresses(query);\n        if (!ignore) setSuggestions(results);\n      } catch {\n        if (!ignore && !controller.signal.aborted) {\n          setError(\"Could not load address suggestions. Please try again.\");\n          setSuggestions([]);\n        }\n      } finally {\n        if (!ignore) setIsLoading(false);\n      }\n    }, 300);\n\n    return () => {\n      ignore = true;\n      controller.abort();\n      clearTimeout(timeoutId);\n    };\n  }, [searchValue]);\n\n  let status: ReactNode = `${suggestions.length} suggestion${suggestions.length === 1 ? \"\" : \"s\"} found`;\n  if (isLoading) {\n    status = (\n      <span className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        Searching addresses...\n        <Spinner className=\"size-4.5 sm:size-4\" />\n      </span>\n    );\n  } else if (error) {\n    status = (\n      <span className=\"font-normal text-destructive text-sm\">{error}</span>\n    );\n  } else if (suggestions.length === 0 && searchValue) {\n    status = (\n      <span className=\"font-normal text-muted-foreground text-sm\">\n        No addresses found for \"{searchValue}\"\n      </span>\n    );\n  }\n\n  const shouldRenderPopup = searchValue.trim() !== \"\";\n\n  return (\n    <Autocomplete\n      autoHighlight\n      filter={null}\n      items={suggestions}\n      itemToStringValue={(item: unknown) => (item as AddressSuggestion).text}\n      onValueChange={(value, eventDetails) => {\n        setSearchValue(value);\n        if (eventDetails.reason === \"item-press\") {\n          // Selecting a suggestion ends the billing session. In a real app,\n          // fetch the place details with the same token before resetting it.\n          sessionTokenRef.current = null;\n        }\n      }}\n      value={searchValue}\n    >\n      <AutocompleteInput\n        aria-label=\"Address\"\n        autoComplete=\"off\"\n        className=\"min-w-0 *:[input]:truncate\"\n        placeholder=\"Enter an address\"\n        startAddon={<MapPinIcon />}\n      />\n      {shouldRenderPopup && (\n        <AutocompletePopup\n          aria-busy={isLoading || undefined}\n          className=\"max-w-(--anchor-width) *:min-w-0\"\n        >\n          <AutocompleteStatus className=\"text-muted-foreground\">\n            {status}\n          </AutocompleteStatus>\n          <AutocompleteList>\n            {(suggestion: AddressSuggestion) => (\n              <AutocompleteItem key={suggestion.placeId} value={suggestion}>\n                <span className=\"flex w-full min-w-0 flex-col\">\n                  <span className=\"truncate font-medium\">\n                    {suggestion.mainText}\n                  </span>\n                  <span className=\"truncate text-muted-foreground text-xs\">\n                    {suggestion.secondaryText}\n                  </span>\n                </span>\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      )}\n    </Autocomplete>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+  },
+  "categories": [
+    "autocomplete",
+    "input",
+    "async",
+    "search"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-badge-19.json b/apps/ui/public/r/p-badge-19.json
index 8903bb25d..35b928538 100644
--- a/apps/ui/public/r/p-badge-19.json
+++ b/apps/ui/public/r/p-badge-19.json
@@ -12,10 +12,13 @@
   "files": [
     {
       "path": "registry/default/particles/p-badge-19.tsx",
-      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox\n        className=\"peer sr-only after:absolute after:inset-0\"\n        defaultChecked\n        id={id}\n      />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-[state=checked]:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-unchecked:bg-muted has-data-unchecked:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox className=\"peer hidden\" defaultChecked id={id} />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-checked:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
+  "meta": {
+    "className": "**:data-[slot=preview]:flex"
+  },
   "categories": [
     "badge",
     "checkbox"
diff --git a/apps/ui/public/r/p-calendar-10.json b/apps/ui/public/r/p-calendar-10.json
index 8d501be56..427307ab9 100644
--- a/apps/ui/public/r/p-calendar-10.json
+++ b/apps/ui/public/r/p-calendar-10.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-10.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n        day_button:\n          \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n      }}\n      mode=\"range\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n        day_button:\n          \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n      }}\n      mode=\"range\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-12.json b/apps/ui/public/r/p-calendar-12.json
index 25416216e..19f86dc01 100644
--- a/apps/ui/public/r/p-calendar-12.json
+++ b/apps/ui/public/r/p-calendar-12.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-12.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { WeekNumberProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      components={{\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n          return (\n            <th {...props}>\n              <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n                {week.weekNumber}\n              </span>\n            </th>\n          );\n        },\n      }}\n      fixedWeeks\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      showWeekNumber\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { WeekNumberProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      components={{\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n          return (\n            <th {...props}>\n              <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n                {week.weekNumber}\n              </span>\n            </th>\n          );\n        },\n      }}\n      fixedWeeks\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      showWeekNumber\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-13.json b/apps/ui/public/r/p-calendar-13.json
index 922c71240..17ae976a5 100644
--- a/apps/ui/public/r/p-calendar-13.json
+++ b/apps/ui/public/r/p-calendar-13.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-13.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown-years\"\n      classNames={{\n        dropdowns: \"*:flex-1 *:[span]:text-center\",\n      }}\n      components={{ Dropdown: YearDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown-years\"\n      classNames={{\n        dropdowns: \"*:flex-1 *:[span]:text-center\",\n      }}\n      components={{ Dropdown: YearDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-14.json b/apps/ui/public/r/p-calendar-14.json
index 6bd969c41..15c94c626 100644
--- a/apps/ui/public/r/p-calendar-14.json
+++ b/apps/ui/public/r/p-calendar-14.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-14.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      classNames={{\n        month_caption: \"mx-0\",\n      }}\n      components={{\n        Dropdown: (props: DropdownProps) => {\n          const items =\n            props.options?.map((option) => ({\n              label: option.label,\n              value: String(option.value),\n            })) ?? [];\n\n          return (\n            <Select\n              items={items}\n              onValueChange={(value) => {\n                if (props.onChange && value !== null) {\n                  handleCalendarChange(value, props.onChange);\n                }\n              }}\n              value={String(props.value)}\n            >\n              <SelectTrigger className=\"min-w-none\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          );\n        },\n        DropdownNav: (props: DropdownNavProps) => {\n          return (\n            <div className=\"flex w-full items-center gap-2\">\n              {props.children}\n            </div>\n          );\n        },\n      }}\n      defaultMonth={new Date()}\n      hideNavigation\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1980, 6)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownNavProps, DropdownProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      classNames={{\n        month_caption: \"mx-0\",\n      }}\n      components={{\n        Dropdown: (props: DropdownProps) => {\n          const items =\n            props.options?.map((option) => ({\n              label: option.label,\n              value: String(option.value),\n            })) ?? [];\n\n          return (\n            <Select\n              items={items}\n              onValueChange={(value) => {\n                if (props.onChange && value !== null) {\n                  handleCalendarChange(value, props.onChange);\n                }\n              }}\n              value={String(props.value)}\n            >\n              <SelectTrigger className=\"min-w-none\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          );\n        },\n        DropdownNav: (props: DropdownNavProps) => {\n          return (\n            <div className=\"flex w-full items-center gap-2\">\n              {props.children}\n            </div>\n          );\n        },\n      }}\n      defaultMonth={new Date()}\n      hideNavigation\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1980, 6)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-19.json b/apps/ui/public/r/p-calendar-19.json
index f30e309c4..d5b5e6fc4 100644
--- a/apps/ui/public/r/p-calendar-19.json
+++ b/apps/ui/public/r/p-calendar-19.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-19.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea className=\"h-full sm:border-s\" scrollbarGutter scrollFade>\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea\n            className=\"h-full sm:border-s\"\n            overscrollContain\n            scrollbarGutter\n            scrollFade\n          >\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-21.json b/apps/ui/public/r/p-calendar-21.json
index 53843db4f..b4edd3563 100644
--- a/apps/ui/public/r/p-calendar-21.json
+++ b/apps/ui/public/r/p-calendar-21.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-21.tsx",
-      "content": "\"use client\";\n\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate({\n                from: today,\n                to: today,\n              });\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last7Days);\n              setMonth(last7Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 7 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last30Days);\n              setMonth(last30Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 30 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(monthToDate);\n              setMonth(monthToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Month to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yearToDate);\n              setMonth(yearToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Year to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"range\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate({\n                from: today,\n                to: today,\n              });\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last7Days);\n              setMonth(last7Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 7 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last30Days);\n              setMonth(last30Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 30 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(monthToDate);\n              setMonth(monthToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Month to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yearToDate);\n              setMonth(yearToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Year to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"range\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-22.json b/apps/ui/public/r/p-calendar-22.json
index 4d0cc7473..29b5166b1 100644
--- a/apps/ui/public/r/p-calendar-22.json
+++ b/apps/ui/public/r/p-calendar-22.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-22.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        months: \"gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        months: \"gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-23.json b/apps/ui/public/r/p-calendar-23.json
index f4be09139..518fe6250 100644
--- a/apps/ui/public/r/p-calendar-23.json
+++ b/apps/ui/public/r/p-calendar-23.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-23.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={3}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={3}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-24.json b/apps/ui/public/r/p-calendar-24.json
index 99c4b2944..e3e11d5b5 100644
--- a/apps/ui/public/r/p-calendar-24.json
+++ b/apps/ui/public/r/p-calendar-24.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-24.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DayButtonProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-25.json b/apps/ui/public/r/p-calendar-25.json
new file mode 100644
index 000000000..7b8184f22
--- /dev/null
+++ b/apps/ui/public/r/p-calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-calendar-25",
+  "description": "Calendar with 24-hour autocomplete time input",
+  "dependencies": [
+    "date-fns",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/calendar",
+    "@coss/autocomplete",
+    "@coss/field"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-calendar-25.tsx",
+      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { ClockIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\n\nconst times = Array.from({ length: 96 }, (_, i) => {\n  const hours = String(Math.floor(i / 4)).padStart(2, \"0\");\n  const minutes = String((i % 4) * 15).padStart(2, \"0\");\n  return `${hours}:${minutes}`;\n});\n\nfunction parseTime(value: string): string | null {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return null;\n  }\n\n  const colonMatch = /^(\\d{1,2}):(\\d{1,2})$/.exec(trimmed);\n  if (colonMatch) {\n    const hours = Number(colonMatch[1]);\n    const minutes = Number(colonMatch[2]);\n    if (hours > 23 || minutes > 59) {\n      return null;\n    }\n    return `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n  }\n\n  const digits = trimmed.replace(/\\D/g, \"\");\n  if (digits.length === 0 || digits.length > 4) {\n    return null;\n  }\n\n  let hours: number;\n  let minutes: number;\n\n  if (digits.length <= 2) {\n    hours = Number(digits);\n    minutes = 0;\n  } else if (digits.length === 3) {\n    // HMM → H:MM (215 → 02:15)\n    hours = Number(digits[0]);\n    minutes = Number(digits.slice(1));\n  } else {\n    // HHMM → HH:MM (2150 → 21:50)\n    hours = Number(digits.slice(0, 2));\n    minutes = Number(digits.slice(2));\n  }\n\n  if (hours > 23 || minutes > 59) {\n    return null;\n  }\n\n  return `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n}\n\n/**\n * Live input formatting from a digit buffer:\n * - ≤2 digits: as-is\n * - 3 digits: H:MM (unpadded hour so a 4th digit can still become HHMM)\n * - 4 digits: HH:mm\n */\nfunction formatTimeInput(value: string) {\n  const digits = value.replace(/\\D/g, \"\").slice(0, 4);\n\n  if (digits.length <= 2) {\n    return digits;\n  }\n\n  if (digits.length === 3) {\n    const minutes = Number(digits.slice(1));\n    if (minutes <= 59) {\n      return `${digits[0]}:${digits.slice(1)}`;\n    }\n    return digits;\n  }\n\n  return parseTime(digits) ?? digits;\n}\n\nfunction filterTime(item: string, query: string) {\n  const trimmed = query.trim().toLowerCase();\n  if (!trimmed) {\n    return true;\n  }\n\n  if (item.toLowerCase().startsWith(trimmed)) {\n    return true;\n  }\n\n  const itemDigits = item.replace(/\\D/g, \"\");\n  const queryDigits = trimmed.replace(/\\D/g, \"\");\n  if (!queryDigits) {\n    return false;\n  }\n\n  const itemHour = Number(itemDigits.slice(0, 2));\n  const itemMinutes = itemDigits.slice(2);\n  // Padded \"0615\" and unpadded \"615\" so \"61\" matches 06:15 while typing toward 615\n  const itemDigitsUnpadded = `${itemHour}${itemMinutes}`;\n\n  if (\n    itemDigits.startsWith(queryDigits) ||\n    itemDigitsUnpadded.startsWith(queryDigits)\n  ) {\n    return true;\n  }\n\n  if (queryDigits.length >= 3) {\n    const normalized = parseTime(queryDigits);\n    return normalized === item;\n  }\n\n  const queryHour = Number(queryDigits);\n\n  if (trimmed.includes(\":\")) {\n    const minuteQuery = trimmed.split(\":\")[1]?.replace(/\\D/g, \"\") ?? \"\";\n    return (\n      itemHour === queryHour &&\n      (!minuteQuery || itemMinutes.startsWith(minuteQuery))\n    );\n  }\n\n  if (queryDigits.length === 1) {\n    return itemHour === queryHour || String(itemHour).startsWith(queryDigits);\n  }\n\n  return queryHour <= 23 && itemHour === queryHour;\n}\n\nfunction applyTime(date: Date, time: string) {\n  const parsed = parseTime(time);\n  if (!parsed) {\n    return date;\n  }\n  const hours = Number(parsed.slice(0, 2));\n  const minutes = Number(parsed.slice(3, 5));\n  const next = new Date(date);\n  next.setHours(hours, minutes, 0, 0);\n  return next;\n}\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(() => {\n    const initial = new Date();\n    initial.setHours(12, 0, 0, 0);\n    return initial;\n  });\n  const [month, setMonth] = useState<Date>(() => new Date());\n  const [time, setTime] = useState(\"12:00\");\n  const [isEditing, setIsEditing] = useState(false);\n\n  const handleDaySelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) {\n      setDate(undefined);\n      return;\n    }\n    const next = applyTime(selectedDate, time);\n    setDate(next);\n    setMonth(next);\n  };\n\n  const handleTimeChange = (value: string) => {\n    setIsEditing(true);\n    const next = formatTimeInput(value);\n    setTime(next);\n\n    // List picks and completed HH:mm only — avoid committing mid-typing (\"2:1\" → 02:01)\n    if (date && /^\\d{2}:\\d{2}$/.test(next)) {\n      setDate(applyTime(date, next));\n    }\n  };\n\n  const handleTimeBlur = () => {\n    const normalized = parseTime(time);\n    if (normalized) {\n      setTime(normalized);\n      if (date) {\n        setDate(applyTime(date, normalized));\n      }\n    } else if (date) {\n      setTime(format(date, \"HH:mm\"));\n    }\n    setIsEditing(false);\n  };\n\n  const filterQuery = isEditing ? time : \"\";\n  const matchingTimes = times.filter((item) => filterTime(item, filterQuery));\n\n  return (\n    <div className=\"flex w-fit flex-col gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={handleDaySelect}\n        selected={date}\n      />\n      <Field className=\"w-0 min-w-full flex-row items-center gap-3\">\n        <FieldLabel className=\"whitespace-nowrap text-xs\">\n          Enter time\n        </FieldLabel>\n        <Autocomplete\n          autoHighlight\n          filter={(item, query) => filterTime(item, isEditing ? query : \"\")}\n          items={times}\n          onValueChange={handleTimeChange}\n          openOnInputClick\n          value={time}\n        >\n          <AutocompleteInput\n            aria-label=\"Enter time\"\n            inputMode=\"numeric\"\n            maxLength={5}\n            onBlur={handleTimeBlur}\n            onFocus={(event) => {\n              setIsEditing(false);\n              event.currentTarget.select();\n            }}\n            placeholder=\"HH:mm\"\n            startAddon={<ClockIcon aria-hidden=\"true\" />}\n          />\n          <AutocompletePopup\n            className={matchingTimes.length === 0 ? \"hidden\" : undefined}\n          >\n            <AutocompleteList>\n              {(item: string) => (\n                <AutocompleteItem key={item} value={item}>\n                  {item}\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompletePopup>\n        </Autocomplete>\n      </Field>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "calendar",
+    "autocomplete",
+    "field",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-calendar-3.json b/apps/ui/public/r/p-calendar-3.json
index 02e383e1d..436917ab0 100644
--- a/apps/ui/public/r/p-calendar-3.json
+++ b/apps/ui/public/r/p-calendar-3.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-3.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(),\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\n  });\n\n  return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(),\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\n  });\n\n  return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-5.json b/apps/ui/public/r/p-calendar-5.json
index a4d90371b..f8c74f531 100644
--- a/apps/ui/public/r/p-calendar-5.json
+++ b/apps/ui/public/r/p-calendar-5.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-5.tsx",
-      "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  const items =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  return (\n    <Select\n      aria-label={ariaLabel}\n      items={items}\n      onValueChange={handleValueChange}\n      value={value?.toString()}\n    >\n      <SelectTrigger className=\"min-w-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            key={item.value}\n            value={item.value}\n          >\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  const items =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  return (\n    <Select\n      aria-label={ariaLabel}\n      items={items}\n      onValueChange={handleValueChange}\n      value={value?.toString()}\n    >\n      <SelectTrigger className=\"min-w-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            key={item.value}\n            value={item.value}\n          >\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-6.json b/apps/ui/public/r/p-calendar-6.json
index 5b4a745a6..abad21a9a 100644
--- a/apps/ui/public/r/p-calendar-6.json
+++ b/apps/ui/public/r/p-calendar-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-6.tsx",
-      "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-combobox-19.json b/apps/ui/public/r/p-combobox-19.json
new file mode 100644
index 000000000..21a141aa1
--- /dev/null
+++ b/apps/ui/public/r/p-combobox-19.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-combobox-19",
+  "description": "Combobox multiple with stacked chips",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/avatar",
+    "@coss/badge",
+    "@coss/button",
+    "@coss/combobox"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-combobox-19.tsx",
+      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ntype TeamMember = {\n  avatar: string;\n  initials: string;\n  label: string;\n  priority: \"Lowest\" | \"Low\" | \"Medium\" | \"High\" | \"Highest\";\n  value: string;\n  weight: number;\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    priority: \"Highest\",\n    value: \"jenny\",\n    weight: 200,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    priority: \"Medium\",\n    value: \"paul\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    priority: \"High\",\n    value: \"luna\",\n    weight: 150,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80\",\n    initials: \"AC\",\n    label: \"Alex Chen\",\n    priority: \"Low\",\n    value: \"alex\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80\",\n    initials: \"SJ\",\n    label: \"Sarah Johnson\",\n    priority: \"Medium\",\n    value: \"sarah\",\n    weight: 50,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80\",\n    initials: \"ED\",\n    label: \"Emma Davis\",\n    priority: \"Lowest\",\n    value: \"emma\",\n    weight: 100,\n  },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<TeamMember[]>(\n    teamMembers.slice(0, 2),\n  );\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Combobox\n        autoHighlight\n        items={teamMembers}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={(value) => {\n          setSelected(value);\n          setOpen(false);\n        }}\n        open={open}\n        value={selected}\n      >\n        <ComboboxInput\n          aria-label=\"Add team members\"\n          placeholder=\"Add team members…\"\n          startAddon={<SearchIcon />}\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item: TeamMember) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      {selected.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {selected.map((member) => (\n            <li\n              className=\"flex items-center gap-2 rounded-lg border border-input p-1 ps-2 text-base sm:text-sm\"\n              key={member.value}\n            >\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={member.label} src={member.avatar} />\n                <AvatarFallback className=\"text-[.625rem]\">\n                  {member.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate font-medium\">{member.label}</span>\n              <Badge className=\"ms-auto\" variant=\"outline\">\n                {member.priority}\n              </Badge>\n              <span className=\"text-muted-foreground tabular-nums\">\n                {member.weight}%\n              </span>\n              <Button\n                aria-label={`Remove ${member.label}`}\n                onClick={() =>\n                  setSelected((current) =>\n                    current.filter((item) => item.value !== member.value),\n                  )\n                }\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+  },
+  "categories": [
+    "combobox",
+    "input"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-combobox-20.json b/apps/ui/public/r/p-combobox-20.json
new file mode 100644
index 000000000..0d1a22d6c
--- /dev/null
+++ b/apps/ui/public/r/p-combobox-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-combobox-20",
+  "description": "Combobox multiple with stacked divided chips",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/avatar",
+    "@coss/badge",
+    "@coss/button",
+    "@coss/combobox"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-combobox-20.tsx",
+      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ntype TeamMember = {\n  avatar: string;\n  initials: string;\n  label: string;\n  priority: \"Lowest\" | \"Low\" | \"Medium\" | \"High\" | \"Highest\";\n  value: string;\n  weight: number;\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    priority: \"Highest\",\n    value: \"jenny\",\n    weight: 200,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    priority: \"Medium\",\n    value: \"paul\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    priority: \"High\",\n    value: \"luna\",\n    weight: 150,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80\",\n    initials: \"AC\",\n    label: \"Alex Chen\",\n    priority: \"Low\",\n    value: \"alex\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80\",\n    initials: \"SJ\",\n    label: \"Sarah Johnson\",\n    priority: \"Medium\",\n    value: \"sarah\",\n    weight: 50,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80\",\n    initials: \"ED\",\n    label: \"Emma Davis\",\n    priority: \"Lowest\",\n    value: \"emma\",\n    weight: 100,\n  },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<TeamMember[]>(\n    teamMembers.slice(0, 2),\n  );\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Combobox\n        autoHighlight\n        items={teamMembers}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={(value) => {\n          setSelected(value);\n          setOpen(false);\n        }}\n        open={open}\n        value={selected}\n      >\n        <ComboboxInput\n          aria-label=\"Add team members\"\n          placeholder=\"Add team members…\"\n          startAddon={<SearchIcon />}\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item: TeamMember) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      {selected.length > 0 && (\n        <ul className=\"divide-y rounded-lg border\">\n          {selected.map((member) => (\n            <li\n              className=\"flex items-center gap-2 p-1 ps-2 text-base sm:text-sm\"\n              key={member.value}\n            >\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={member.label} src={member.avatar} />\n                <AvatarFallback className=\"text-[.625rem]\">\n                  {member.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate font-medium\">{member.label}</span>\n              <Badge className=\"ms-auto\" size=\"sm\" variant=\"outline\">\n                {member.priority}\n              </Badge>\n              <span className=\"text-muted-foreground text-xs tabular-nums\">\n                {member.weight}%\n              </span>\n              <Button\n                aria-label={`Remove ${member.label}`}\n                onClick={() =>\n                  setSelected((current) =>\n                    current.filter((item) => item.value !== member.value),\n                  )\n                }\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+  },
+  "categories": [
+    "combobox",
+    "input"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-command-2.json b/apps/ui/public/r/p-command-2.json
index 109f5e718..050f59862 100644
--- a/apps/ui/public/r/p-command-2.json
+++ b/apps/ui/public/r/p-command-2.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-command-2.tsx",
-      "content": "\"use client\";\n\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAutocompleteFilter } from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { EmptyMedia } from \"@/registry/default/ui/empty\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"dash\"],\n        label: \"Dashboard\",\n        shortcut: \"d\",\n        value: \"dashboard\",\n      },\n      {\n        keywords: [\"proj\"],\n        label: \"Projects\",\n        shortcut: \"p\",\n        value: \"projects\",\n      },\n      { keywords: [\"team\"], label: \"Team\", shortcut: \"t\", value: \"team\" },\n    ],\n    value: \"Pages\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"prof\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"acc\"],\n        label: \"Account\",\n        shortcut: \"a s\",\n        value: \"account\",\n      },\n      {\n        keywords: [\"pref\"],\n        label: \"Preferences\",\n        shortcut: \"p r\",\n        value: \"preferences\",\n      },\n    ],\n    value: \"Settings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"docs\"],\n        label: \"Documentation\",\n        shortcut: \"d o\",\n        value: \"docs\",\n      },\n      {\n        keywords: [\"sup\"],\n        label: \"Support\",\n        shortcut: \"s u\",\n        value: \"support\",\n      },\n      {\n        keywords: [\"feed\"],\n        label: \"Feedback\",\n        shortcut: \"f b\",\n        value: \"feedback\",\n      },\n    ],\n    value: \"Help\",\n  },\n];\n\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \"New Project\" button in the top right corner. You'll be prompted to enter a project name and description.\n\nOnce created, you can invite team members by clicking the \"Share\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \"Add Team Member\" button in the project settings.\n\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\n\nconst MOCK_REFERENCE_LINKS = [\n  { title: \"Creating Projects\", url: \"/docs/projects/create\" },\n  { title: \"Team Collaboration\", url: \"/docs/team/collaborate\" },\n  { title: \"Project Settings\", url: \"/docs/projects/settings\" },\n];\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: Array<{ title: string; url: string }>;\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nfunction markdownToSafeHTML(markdown: string): string {\n  // Simple markdown to HTML converter for demo purposes\n  return markdown\n    .split(\"\\n\\n\")\n    .map((para) => `<p>${para}</p>`)\n    .join(\"\");\n}\n\nexport default function PCommand2() {\n  const [open, setOpen] = useState(false);\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const aiInputRef = useRef<HTMLInputElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const commandResetKeyRef = useRef(0);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    commandResetKeyRef.current += 1;\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  useEffect(() => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return () => document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Cmdk with AI\n      </Button>\n      <CommandDialog\n        handle={commandHandle}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        <CommandDialogPopup>\n          {!aiState.mode ? (\n            <Command\n              filter={filterItem}\n              items={commandGroups}\n              key={commandResetKeyRef.current}\n            >\n              <div className=\"relative flex items-center *:first:flex-1\">\n                <CommandInput\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Tab\") {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                    if (\n                      e.key === \"Enter\" &&\n                      !hasResults &&\n                      searchQuery.trim()\n                    ) {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                  }}\n                  placeholder=\"Type a command or search...\"\n                  ref={searchInputRef}\n                  value={searchQuery}\n                />\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleAskAI}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                  Ask AI\n                  <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <CommandEmpty className=\"not-empty:py-12\">\n                  {searchQuery.trim() && (\n                    <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                      <EmptyMedia variant=\"icon\">\n                        <SearchIcon />\n                      </EmptyMedia>\n                      <p>No results found.</p>\n                      <p>\n                        Press <Kbd>Enter</Kbd> to ask AI about:\n                        <br />{\" \"}\n                        <strong className=\"font-medium text-foreground\">\n                          {searchQuery}\n                        </strong>\n                      </p>\n                    </div>\n                  )}\n                </CommandEmpty>\n                <CommandList>\n                  {(group: Group) => (\n                    <Fragment key={group.value}>\n                      <CommandGroup items={group.items}>\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                        <CommandCollection>\n                          {(item: Item) => (\n                            <CommandItem\n                              key={item.value}\n                              onClick={handleItemClick}\n                              value={item}\n                            >\n                              <span className=\"flex-1\">{item.label}</span>\n                              {item.shortcut && (\n                                <CommandShortcut>\n                                  {item.shortcut}\n                                </CommandShortcut>\n                              )}\n                            </CommandItem>\n                          )}\n                        </CommandCollection>\n                      </CommandGroup>\n                      <CommandSeparator />\n                    </Fragment>\n                  )}\n                </CommandList>\n              </CommandPanel>\n              <CommandFooter>\n                {hasResults ? (\n                  <>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"flex items-center gap-2\">\n                        <KbdGroup>\n                          <Kbd>\n                            <ArrowUpIcon />\n                          </Kbd>\n                          <Kbd>\n                            <ArrowDownIcon />\n                          </Kbd>\n                        </KbdGroup>\n                        <span>Navigate</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Kbd>\n                          <CornerDownLeftIcon />\n                        </Kbd>\n                        <span>Open</span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>Esc</Kbd>\n                      <span>Close</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"ms-auto flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          ) : (\n            <Command>\n              <div className=\"flex items-center *:first:flex-1\">\n                <div className=\"px-2.5 py-1.5\">\n                  <div className=\"relative w-full\">\n                    <div\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                      data-slot=\"autocomplete-start-addon\"\n                    >\n                      <SparklesIcon />\n                    </div>\n                    <Input\n                      aria-label=\"AI query input\"\n                      className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                      disabled={aiState.isGenerating}\n                      onChange={(e) =>\n                        setAIState((prev) => ({\n                          ...prev,\n                          query: e.target.value,\n                        }))\n                      }\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" && !aiState.isGenerating) {\n                          handleGenerateAI();\n                        }\n                        if (e.key === \"Escape\") {\n                          e.preventDefault();\n                          handleBackToSearch();\n                        }\n                      }}\n                      placeholder=\"Ask AI anything…\"\n                      ref={aiInputRef}\n                      size=\"lg\"\n                      value={aiState.query}\n                    />\n                  </div>\n                </div>\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleBackToSearch}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                  Back to search\n                  <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <ScrollArea scrollbarGutter scrollFade>\n                  <div className=\"p-5\">\n                    {!aiState.isGenerating &&\n                      !aiState.response &&\n                      !aiState.error && (\n                        <div className=\"flex items-center justify-center py-12\">\n                          <p className=\"text-muted-foreground text-sm\">\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\n                            started.\n                          </p>\n                        </div>\n                      )}\n\n                    {aiState.error && (\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-destructive text-sm\"\n                        role=\"alert\"\n                      >\n                        {aiState.error}\n                      </div>\n                    )}\n\n                    {aiState.isGenerating && (\n                      <div className=\"flex flex-col gap-4\">\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-1/2\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/5\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {aiState.response && !aiState.isGenerating && (\n                      <>\n                        <div\n                          aria-live=\"polite\"\n                          className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\"\n                          dangerouslySetInnerHTML={{\n                            __html: markdownToSafeHTML(aiState.response),\n                          }}\n                        />\n                        {aiState.referenceLinks.length > 0 && (\n                          <div className=\"mt-4 flex flex-wrap gap-2\">\n                            {aiState.referenceLinks.map((link, index) => (\n                              <Button\n                                key={`${link.url}-${index}`}\n                                render={<Link href={link.url} />}\n                                size=\"sm\"\n                                variant=\"secondary\"\n                              >\n                                {link.title}\n                              </Button>\n                            ))}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </ScrollArea>\n              </CommandPanel>\n\n              <CommandFooter>\n                {aiState.isGenerating ? (\n                  <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <Spinner className=\"size-3\" />\n                    </div>\n                    <span className=\"animate-pulse\">Generating response…</span>\n                  </div>\n                ) : aiState.response ? (\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <CircleQuestionMarkIcon className=\"size-3\" />\n                    </div>\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                  </div>\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>\n                      <CornerDownLeftIcon />\n                    </Kbd>\n                    <span>Ask AI</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          )}\n        </CommandDialogPopup>\n      </CommandDialog>\n    </>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAutocompleteFilter } from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { EmptyMedia } from \"@/registry/default/ui/empty\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"dash\"],\n        label: \"Dashboard\",\n        shortcut: \"d\",\n        value: \"dashboard\",\n      },\n      {\n        keywords: [\"proj\"],\n        label: \"Projects\",\n        shortcut: \"p\",\n        value: \"projects\",\n      },\n      { keywords: [\"team\"], label: \"Team\", shortcut: \"t\", value: \"team\" },\n    ],\n    value: \"Pages\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"prof\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"acc\"],\n        label: \"Account\",\n        shortcut: \"a s\",\n        value: \"account\",\n      },\n      {\n        keywords: [\"pref\"],\n        label: \"Preferences\",\n        shortcut: \"p r\",\n        value: \"preferences\",\n      },\n    ],\n    value: \"Settings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"docs\"],\n        label: \"Documentation\",\n        shortcut: \"d o\",\n        value: \"docs\",\n      },\n      {\n        keywords: [\"sup\"],\n        label: \"Support\",\n        shortcut: \"s u\",\n        value: \"support\",\n      },\n      {\n        keywords: [\"feed\"],\n        label: \"Feedback\",\n        shortcut: \"f b\",\n        value: \"feedback\",\n      },\n    ],\n    value: \"Help\",\n  },\n];\n\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \"New Project\" button in the top right corner. You'll be prompted to enter a project name and description.\n\nOnce created, you can invite team members by clicking the \"Share\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \"Add Team Member\" button in the project settings.\n\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\n\nconst MOCK_REFERENCE_LINKS = [\n  { title: \"Creating Projects\", url: \"/docs/projects/create\" },\n  { title: \"Team Collaboration\", url: \"/docs/team/collaborate\" },\n  { title: \"Project Settings\", url: \"/docs/projects/settings\" },\n];\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: Array<{ title: string; url: string }>;\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nfunction markdownToSafeHTML(markdown: string): string {\n  // Simple markdown to HTML converter for demo purposes\n  return markdown\n    .split(\"\\n\\n\")\n    .map((para) => `<p>${para}</p>`)\n    .join(\"\");\n}\n\nexport default function PCommand2() {\n  const [open, setOpen] = useState(false);\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const aiInputRef = useRef<HTMLInputElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const commandResetKeyRef = useRef(0);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    commandResetKeyRef.current += 1;\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  useEffect(() => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return () => document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Cmdk with AI\n      </Button>\n      <CommandDialog\n        handle={commandHandle}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        <CommandDialogPopup>\n          {!aiState.mode ? (\n            <Command\n              filter={filterItem}\n              items={commandGroups}\n              key={commandResetKeyRef.current}\n            >\n              <div className=\"relative flex items-center *:first:flex-1\">\n                <CommandInput\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Tab\") {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                    if (\n                      e.key === \"Enter\" &&\n                      !hasResults &&\n                      searchQuery.trim()\n                    ) {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                  }}\n                  placeholder=\"Type a command or search...\"\n                  ref={searchInputRef}\n                  value={searchQuery}\n                />\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleAskAI}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                  Ask AI\n                  <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <CommandEmpty className=\"not-empty:py-12\">\n                  {searchQuery.trim() && (\n                    <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                      <EmptyMedia variant=\"icon\">\n                        <SearchIcon />\n                      </EmptyMedia>\n                      <p>No results found.</p>\n                      <p>\n                        Press <Kbd>Enter</Kbd> to ask AI about:\n                        <br />{\" \"}\n                        <strong className=\"font-medium text-foreground\">\n                          {searchQuery}\n                        </strong>\n                      </p>\n                    </div>\n                  )}\n                </CommandEmpty>\n                <CommandList>\n                  {(group: Group) => (\n                    <Fragment key={group.value}>\n                      <CommandGroup items={group.items}>\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                        <CommandCollection>\n                          {(item: Item) => (\n                            <CommandItem\n                              key={item.value}\n                              onClick={handleItemClick}\n                              value={item}\n                            >\n                              <span className=\"flex-1\">{item.label}</span>\n                              {item.shortcut && (\n                                <CommandShortcut>\n                                  {item.shortcut}\n                                </CommandShortcut>\n                              )}\n                            </CommandItem>\n                          )}\n                        </CommandCollection>\n                      </CommandGroup>\n                      <CommandSeparator />\n                    </Fragment>\n                  )}\n                </CommandList>\n              </CommandPanel>\n              <CommandFooter>\n                {hasResults ? (\n                  <>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"flex items-center gap-2\">\n                        <KbdGroup>\n                          <Kbd>\n                            <ArrowUpIcon />\n                          </Kbd>\n                          <Kbd>\n                            <ArrowDownIcon />\n                          </Kbd>\n                        </KbdGroup>\n                        <span>Navigate</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Kbd>\n                          <CornerDownLeftIcon />\n                        </Kbd>\n                        <span>Open</span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>Esc</Kbd>\n                      <span>Close</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"ms-auto flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          ) : (\n            <Command>\n              <div className=\"flex items-center *:first:flex-1\">\n                <div className=\"px-2.5 py-1.5\">\n                  <div className=\"relative w-full\">\n                    <div\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                      data-slot=\"autocomplete-start-addon\"\n                    >\n                      <SparklesIcon />\n                    </div>\n                    <Input\n                      aria-label=\"AI query input\"\n                      className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                      disabled={aiState.isGenerating}\n                      onChange={(e) =>\n                        setAIState((prev) => ({\n                          ...prev,\n                          query: e.target.value,\n                        }))\n                      }\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" && !aiState.isGenerating) {\n                          handleGenerateAI();\n                        }\n                        if (e.key === \"Escape\") {\n                          e.preventDefault();\n                          handleBackToSearch();\n                        }\n                      }}\n                      placeholder=\"Ask AI anything…\"\n                      ref={aiInputRef}\n                      size=\"lg\"\n                      value={aiState.query}\n                    />\n                  </div>\n                </div>\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleBackToSearch}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                  Back to search\n                  <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <ScrollArea overscrollContain scrollbarGutter scrollFade>\n                  <div className=\"p-5\">\n                    {!aiState.isGenerating &&\n                      !aiState.response &&\n                      !aiState.error && (\n                        <div className=\"flex items-center justify-center py-12\">\n                          <p className=\"text-muted-foreground text-sm\">\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\n                            started.\n                          </p>\n                        </div>\n                      )}\n\n                    {aiState.error && (\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-destructive text-sm\"\n                        role=\"alert\"\n                      >\n                        {aiState.error}\n                      </div>\n                    )}\n\n                    {aiState.isGenerating && (\n                      <div className=\"flex flex-col gap-4\">\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-1/2\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/5\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {aiState.response && !aiState.isGenerating && (\n                      <>\n                        <div\n                          aria-live=\"polite\"\n                          className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\"\n                          dangerouslySetInnerHTML={{\n                            __html: markdownToSafeHTML(aiState.response),\n                          }}\n                        />\n                        {aiState.referenceLinks.length > 0 && (\n                          <div className=\"mt-4 flex flex-wrap gap-2\">\n                            {aiState.referenceLinks.map((link, index) => (\n                              <Button\n                                key={`${link.url}-${index}`}\n                                render={<Link href={link.url} />}\n                                size=\"sm\"\n                                variant=\"secondary\"\n                              >\n                                {link.title}\n                              </Button>\n                            ))}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </ScrollArea>\n              </CommandPanel>\n\n              <CommandFooter>\n                {aiState.isGenerating ? (\n                  <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <Spinner className=\"size-3\" />\n                    </div>\n                    <span className=\"animate-pulse\">Generating response…</span>\n                  </div>\n                ) : aiState.response ? (\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <CircleQuestionMarkIcon className=\"size-3\" />\n                    </div>\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                  </div>\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>\n                      <CornerDownLeftIcon />\n                    </Kbd>\n                    <span>Ask AI</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          )}\n        </CommandDialogPopup>\n      </CommandDialog>\n    </>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-2.json b/apps/ui/public/r/p-date-picker-2.json
index 7ce068a57..fc2d5a8e8 100644
--- a/apps/ui/public/r/p-date-picker-2.json
+++ b/apps/ui/public/r/p-date-picker-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-2.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-3.json b/apps/ui/public/r/p-date-picker-3.json
index 984c014b1..c395832a2 100644
--- a/apps/ui/public/r/p-date-picker-3.json
+++ b/apps/ui/public/r/p-date-picker-3.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-3.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-9.json b/apps/ui/public/r/p-date-picker-9.json
index a4e06b04a..edfc3a96a 100644
--- a/apps/ui/public/r/p-date-picker-9.json
+++ b/apps/ui/public/r/p-date-picker-9.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-9.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          numberOfMonths={2}\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          numberOfMonths={2}\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-navigation-1.json b/apps/ui/public/r/p-navigation-1.json
new file mode 100644
index 000000000..256c65ca6
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-1.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-1",
+  "description": "Segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-1.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({ state: \"current\" });\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-navigation-2.json b/apps/ui/public/r/p-navigation-2.json
new file mode 100644
index 000000000..155ad9c63
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-2.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-2",
+  "description": "Small segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-2.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"sm\",\n  state: \"current\",\n});\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-navigation-3.json b/apps/ui/public/r/p-navigation-3.json
new file mode 100644
index 000000000..bc2a61eb7
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-3.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-3",
+  "description": "Large segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-3.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"lg\",\n  state: \"current\",\n});\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-popover-4.json b/apps/ui/public/r/p-popover-4.json
new file mode 100644
index 000000000..c31aaf1d2
--- /dev/null
+++ b/apps/ui/public/r/p-popover-4.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-popover-4",
+  "description": "Split button with popover to confirm multiple occurrences",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/badge",
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-popover-4.tsx",
+      "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst occurrences = [\n  { date: \"Wed, Jul 15\", id: \"occurrence-1\", time: \"9:00 – 9:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-2\", time: \"10:00 – 10:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-3\", time: \"11:00 – 11:30am\" },\n];\n\nexport default function Particle() {\n  const [selected, setSelected] = useState(\n    occurrences.map((occurrence) => occurrence.id),\n  );\n\n  return (\n    <div className=\"flex gap-2\">\n      <Button size=\"xs\" variant=\"outline\">\n        Reject\n      </Button>\n      <Group aria-label=\"Confirm booking\">\n        <Button size=\"xs\">Confirm all</Button>\n        <GroupSeparator className=\"bg-primary/72\" />\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                aria-label=\"Choose occurrences to confirm\"\n                size=\"icon-xs\"\n              />\n            }\n          >\n            <ChevronDownIcon aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverPopup align=\"end\" className=\"w-84\">\n            <div className=\"mb-3\">\n              <PopoverTitle className=\"text-sm\">\n                Confirm occurrences\n              </PopoverTitle>\n              <PopoverDescription className=\"text-xs\">\n                {occurrences.length} pending for this booking\n              </PopoverDescription>\n            </div>\n            <CheckboxGroup\n              aria-label=\"Occurrences to confirm\"\n              className=\"gap-0 self-stretch\"\n              onValueChange={setSelected}\n              value={selected}\n            >\n              {occurrences.map((occurrence) => (\n                <Label className=\"flex w-full gap-2 py-1.5\" key={occurrence.id}>\n                  <Checkbox value={occurrence.id} />\n                  <span className=\"tabular-nums\">{occurrence.time}</span>\n                  <span className=\"ms-auto font-normal text-muted-foreground\">\n                    {occurrence.date}\n                  </span>\n                </Label>\n              ))}\n            </CheckboxGroup>\n            <div className=\"mt-3 flex justify-end gap-2\">\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" variant=\"ghost\" />}\n              >\n                Reject selected\n              </PopoverClose>\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" />}\n              >\n                Confirm selected\n                <Badge className=\"-me-1 text-primary-foreground/60\">\n                  {selected.length}\n                </Badge>\n              </PopoverClose>\n            </div>\n          </PopoverPopup>\n        </Popover>\n      </Group>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "button",
+    "checkbox",
+    "checkbox group",
+    "group",
+    "popover"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-7.json b/apps/ui/public/r/p-radio-group-7.json
new file mode 100644
index 000000000..be08b123d
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-7.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-7",
+  "description": "Small segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-7.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"sm\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-8.json b/apps/ui/public/r/p-radio-group-8.json
new file mode 100644
index 000000000..5294b70e9
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-8.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-8",
+  "description": "Segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-8.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-9.json b/apps/ui/public/r/p-radio-group-9.json
new file mode 100644
index 000000000..f81f3f5e5
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-9.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-9",
+  "description": "Large segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-9.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"lg\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-7.json b/apps/ui/public/r/p-switch-7.json
index 6fcbbe63e..7825b05d7 100644
--- a/apps/ui/public/r/p-switch-7.json
+++ b/apps/ui/public/r/p-switch-7.json
@@ -1,19 +1,37 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "p-switch-7",
-  "type": "registry:block",
-  "description": "Custom size switch",
+  "description": "Weekly availability editor with time range combobox pickers",
+  "dependencies": [
+    "lucide-react"
+  ],
   "registryDependencies": [
-    "@coss/switch"
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/select",
+    "@coss/switch",
+    "@coss/tooltip"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-switch-7.tsx",
-      "content": "import { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Switch className=\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\" />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={<SelectButton className=\"w-27 tabular-nums\" size=\"sm\" />}\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <TimeCombobox\n                          ariaLabel={`${day} start time`}\n                          items={timeOptions}\n                          onChange={(start) =>\n                            updateStart(day, range.id, start)\n                          }\n                          value={range.start}\n                        />\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"text-muted-foreground\"\n                        >\n                          –\n                        </span>\n                        <TimeCombobox\n                          ariaLabel={`${day} end time`}\n                          items={timeOptions.slice(timeIndex(range.start) + 1)}\n                          onChange={(end) => updateEnd(day, range.id, end)}\n                          value={range.end}\n                        />\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
   "categories": [
-    "switch"
-  ]
+    "switch",
+    "combobox",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
 }
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-8.json b/apps/ui/public/r/p-switch-8.json
new file mode 100644
index 000000000..9464691bd
--- /dev/null
+++ b/apps/ui/public/r/p-switch-8.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-8",
+  "description": "Weekly availability editor with grouped time range controls",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-8.tsx",
+      "content": "\"use client\";\n\nimport {\n  ArrowRightIcon,\n  CopyIcon,\n  PlusIcon,\n  SearchIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <Group aria-label={`${day} time range`}>\n                          <TimeCombobox\n                            ariaLabel={`${day} start time`}\n                            items={timeOptions}\n                            onChange={(start) =>\n                              updateStart(day, range.id, start)\n                            }\n                            value={range.start}\n                          />\n                          <GroupSeparator />\n                          <GroupText aria-hidden=\"true\" className=\"px-2\">\n                            <ArrowRightIcon className=\"size-3.5\" />\n                          </GroupText>\n                          <GroupSeparator />\n                          <TimeCombobox\n                            ariaLabel={`${day} end time`}\n                            items={timeOptions.slice(\n                              timeIndex(range.start) + 1,\n                            )}\n                            onChange={(end) => updateEnd(day, range.id, end)}\n                            value={range.end}\n                          />\n                        </Group>\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-9.json b/apps/ui/public/r/p-switch-9.json
new file mode 100644
index 000000000..bdd7a3f51
--- /dev/null
+++ b/apps/ui/public/r/p-switch-9.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-9",
+  "description": "Weekly availability editor with From/To labeled time groups",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-9.tsx",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  id,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  id: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            id={id}\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const id = useId();\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => {\n                      const startId = `${id}-start-${range.id}`;\n                      const endId = `${id}-end-${range.id}`;\n\n                      return (\n                        <div className=\"flex items-center gap-2\" key={range.id}>\n                          <Group aria-label={`${day} time range`}>\n                            <GroupText render={<Label htmlFor={startId} />}>\n                              From\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} start time`}\n                              id={startId}\n                              items={timeOptions}\n                              onChange={(start) =>\n                                updateStart(day, range.id, start)\n                              }\n                              value={range.start}\n                            />\n                            <GroupSeparator />\n                            <GroupText render={<Label htmlFor={endId} />}>\n                              To\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} end time`}\n                              id={endId}\n                              items={timeOptions.slice(\n                                timeIndex(range.start) + 1,\n                              )}\n                              onChange={(end) => updateEnd(day, range.id, end)}\n                              value={range.end}\n                            />\n                          </Group>\n                          <Tooltip disableHoverablePopup>\n                            <TooltipTrigger\n                              render={\n                                <Button\n                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                  onClick={() => removeRange(day, range.id)}\n                                  size=\"icon-sm\"\n                                  variant=\"ghost\"\n                                />\n                              }\n                            >\n                              <XIcon aria-hidden=\"true\" />\n                            </TooltipTrigger>\n                            <TooltipPopup>Delete range</TooltipPopup>\n                          </Tooltip>\n                        </div>\n                      );\n                    })\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-table-3.json b/apps/ui/public/r/p-table-3.json
index fe51cb4f9..d81e78c69 100644
--- a/apps/ui/public/r/p-table-3.json
+++ b/apps/ui/public/r/p-table-3.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-3.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-4.json b/apps/ui/public/r/p-table-4.json
index 34dc508a6..4d793a6c3 100644
--- a/apps/ui/public/r/p-table-4.json
+++ b/apps/ui/public/r/p-table-4.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-4.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-6.json b/apps/ui/public/r/p-table-6.json
index 71cbff9a3..189e1e0fb 100644
--- a/apps/ui/public/r/p-table-6.json
+++ b/apps/ui/public/r/p-table-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-6.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-8.json b/apps/ui/public/r/p-table-8.json
index a0c2e9fc5..354bb1edd 100644
--- a/apps/ui/public/r/p-table-8.json
+++ b/apps/ui/public/r/p-table-8.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-8.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-tabs-1.json b/apps/ui/public/r/p-tabs-1.json
index 7ecaecc3a..5f219095b 100644
--- a/apps/ui/public/r/p-tabs-1.json
+++ b/apps/ui/public/r/p-tabs-1.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "p-tabs-1",
-  "description": "Basic tabs",
+  "description": "Segmented control built with tabs",
   "registryDependencies": [
     "@coss/tabs"
   ],
diff --git a/apps/ui/public/r/p-tabs-14.json b/apps/ui/public/r/p-tabs-14.json
new file mode 100644
index 000000000..ba56c5454
--- /dev/null
+++ b/apps/ui/public/r/p-tabs-14.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-tabs-14",
+  "description": "Small segmented control built with tabs",
+  "registryDependencies": [
+    "@coss/tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-tabs-14.tsx",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList size=\"sm\">\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "tabs"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-tabs-15.json b/apps/ui/public/r/p-tabs-15.json
new file mode 100644
index 000000000..4e23b4a39
--- /dev/null
+++ b/apps/ui/public/r/p-tabs-15.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-tabs-15",
+  "description": "Large segmented control built with tabs",
+  "registryDependencies": [
+    "@coss/tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-tabs-15.tsx",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList size=\"lg\">\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "tabs"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 6be348fd5..bd12c57d4 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -46,7 +46,6 @@
         "@coss/separator",
         "@coss/sheet",
         "@coss/sidebar",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/slider",
         "@coss/spinner",
@@ -220,7 +219,7 @@
     },
     {
       "dependencies": [
-        "react-day-picker",
+        "@daypicker/react",
         "lucide-react"
       ],
       "files": [
@@ -729,19 +728,6 @@
       ],
       "type": "registry:ui"
     },
-    {
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "files": [
-        {
-          "path": "registry/default/ui/size-transition.tsx",
-          "type": "registry:ui"
-        }
-      ],
-      "name": "size-transition",
-      "type": "registry:ui"
-    },
     {
       "css": {
         "@keyframes skeleton": {
@@ -801,6 +787,9 @@
       "type": "registry:ui"
     },
     {
+      "dependencies": [
+        "@base-ui/react"
+      ],
       "files": [
         {
           "path": "registry/default/ui/table.tsx",
@@ -821,6 +810,9 @@
         }
       ],
       "name": "tabs",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
       "type": "registry:ui"
     },
     {
@@ -1585,6 +1577,33 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "autocomplete",
+        "input",
+        "async",
+        "search"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Address autocomplete with Google Maps Places API",
+      "files": [
+        {
+          "path": "registry/default/particles/p-autocomplete-16.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-autocomplete-16",
+      "registryDependencies": [
+        "@coss/autocomplete",
+        "@coss/spinner"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "avatar"
@@ -2157,6 +2176,9 @@
           "type": "registry:block"
         }
       ],
+      "meta": {
+        "className": "**:data-[slot=preview]:flex"
+      },
       "name": "p-badge-19",
       "registryDependencies": [
         "@coss/badge",
@@ -3577,6 +3599,32 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "calendar",
+        "autocomplete",
+        "field",
+        "time"
+      ],
+      "dependencies": [
+        "date-fns",
+        "lucide-react"
+      ],
+      "description": "Calendar with 24-hour autocomplete time input",
+      "files": [
+        {
+          "path": "registry/default/particles/p-calendar-25.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-calendar-25",
+      "registryDependencies": [
+        "@coss/calendar",
+        "@coss/autocomplete",
+        "@coss/field"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "date picker",
@@ -4781,6 +4829,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-19.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-19",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked divided chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-20.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-20",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "command",
@@ -8248,6 +8350,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-1",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Small segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-2",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Large segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-3",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "pagination"
@@ -8380,6 +8536,36 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "button",
+        "checkbox",
+        "checkbox group",
+        "group",
+        "popover"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Split button with popover to confirm multiple occurrences",
+      "files": [
+        {
+          "path": "registry/default/particles/p-popover-4.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-popover-4",
+      "registryDependencies": [
+        "@coss/badge",
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "preview card"
@@ -8581,6 +8767,63 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Small segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-7",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-8",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Large segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-9",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -9879,6 +10122,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
@@ -10105,7 +10455,7 @@
       "categories": [
         "tabs"
       ],
-      "description": "Basic tabs",
+      "description": "Segmented control built with tabs",
       "files": [
         {
           "path": "registry/default/particles/p-tabs-1.tsx",
@@ -10358,6 +10708,40 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Small segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-14.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-14",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Large segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-15.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-15",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "textarea"
@@ -11343,7 +11727,8 @@
       "dependencies": [
         "isomorphic-dompurify",
         "marked",
-        "lucide-react"
+        "lucide-react",
+        "motion"
       ],
       "description": "A full scheduling flow powered by Cal.com API v2.",
       "files": [
@@ -11352,6 +11737,16 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+          "target": "components/atoms/booker/booker-confirm-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/default/atoms/booker/booker-steps.tsx",
+          "target": "components/atoms/booker/booker-steps.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-calendar.tsx",
           "target": "components/atoms/booker/booker-calendar.tsx",
@@ -11430,14 +11825,17 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/field",
+        "@coss/form",
+        "@coss/group",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
         "@coss/select",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/switch",
+        "@coss/textarea",
         "@coss/tooltip"
       ],
       "meta": {
@@ -11555,7 +11953,7 @@
           "sidebar-ring": "var(--color-neutral-400)"
         },
         "theme": {
-          "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
           "font-mono": "var(--font-mono, ui-monospace, monospace)",
           "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
         }
@@ -11690,6 +12088,19 @@
         "dependency": "geist"
       }
     },
+    {
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        {
+          "path": "registry/default/lib/segmented-control.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:lib"
+    },
     {
       "dependencies": [
         "clsx",
@@ -11739,6 +12150,11 @@
           "path": "registry/default/lib/cal-api/types.ts",
           "target": "lib/cal-api/types.ts",
           "type": "registry:lib"
+        },
+        {
+          "path": "registry/default/lib/cal-api/bookings.ts",
+          "target": "lib/cal-api/bookings.ts",
+          "type": "registry:lib"
         }
       ],
       "name": "cal-api",
diff --git a/apps/ui/public/r/scroll-area.json b/apps/ui/public/r/scroll-area.json
index 0eaa5b800..3dd149fed 100644
--- a/apps/ui/public/r/scroll-area.json
+++ b/apps/ui/public/r/scroll-area.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/scroll-area.tsx",
-      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
+      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  overscrollContain = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n  overscrollContain?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          overscrollContain &&\n            \"data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/segmented-control.json b/apps/ui/public/r/segmented-control.json
new file mode 100644
index 000000000..a1f38b4b5
--- /dev/null
+++ b/apps/ui/public/r/segmented-control.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "segmented-control",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "registry/default/lib/segmented-control.ts",
+      "content": "import { cva } from \"class-variance-authority\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlRootClassName =\n  \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\";\n\nexport const segmentedControlItemLayoutClassName =\n  \"gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\";\n\nexport const segmentedControlItemVariants = cva(\n  [\n    \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n    segmentedControlItemLayoutClassName,\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: segmentedControlItemSizeClassNames,\n      state: {\n        checked:\n          \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n        current:\n          \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n        pressed:\n          \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      },\n    },\n  },\n);\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/select.json b/apps/ui/public/r/select.json
index 89214f52a..fe65a9599 100644
--- a/apps/ui/public/r/select.json
+++ b/apps/ui/public/r/select.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/select.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  portalProps,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  portalProps?: SelectPrimitive.Portal.Props;\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal {...portalProps}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  portalProps,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  portalProps?: SelectPrimitive.Portal.Props;\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal {...portalProps}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"wrap-anywhere col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/sheet.json b/apps/ui/public/r/sheet.json
index 5a974cbec..ee184c4e9 100644
--- a/apps/ui/public/r/sheet.json
+++ b/apps/ui/public/r/sheet.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/sheet.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n        className,\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  portalProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n  portalProps?: SheetPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal {...portalProps}>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n",
+      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n        className,\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  portalProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n  portalProps?: SheetPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal {...portalProps}>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea overscrollContain scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/sidebar.json b/apps/ui/public/r/sidebar.json
index 4c6a22456..4ed5003c3 100644
--- a/apps/ui/public/r/sidebar.json
+++ b/apps/ui/public/r/sidebar.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/ui/sidebar.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea className=\"min-h-0 flex-1\" fill scrollFade>\n      <div\n        className={cn(\n          \"flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-7 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea className=\"min-h-0 flex-1\" fill overscrollContain scrollFade>\n      <div\n        className={cn(\n          \"flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-7 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/size-transition.json b/apps/ui/public/r/size-transition.json
deleted file mode 100644
index 0c4cd6d92..000000000
--- a/apps/ui/public/r/size-transition.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "size-transition",
-  "dependencies": [
-    "@base-ui/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/size-transition.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nconst useIsoLayoutEffect =\n  typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nexport type SizeTransitionAxis = \"both\" | \"width\" | \"height\";\n\ntype SizeTransitionContextValue = {\n  currentRef: React.RefObject<HTMLElement | null>;\n  transitioning: boolean;\n  startingStyle: boolean;\n};\n\nconst SizeTransitionContext: React.Context<SizeTransitionContextValue | null> =\n  React.createContext<SizeTransitionContextValue | null>(null);\n\nfunction useSizeTransitionContext(): SizeTransitionContextValue {\n  const context = React.useContext(SizeTransitionContext);\n  if (!context) {\n    throw new Error(\n      \"`SizeTransitionPanel` must be used within a `SizeTransition`.\",\n    );\n  }\n  return context;\n}\n\nfunction measureSize(element: HTMLElement): Size {\n  return { width: element.offsetWidth, height: element.offsetHeight };\n}\n\nfunction freezeSize(\n  element: HTMLElement,\n  size: Size,\n  axis: SizeTransitionAxis,\n) {\n  if (axis !== \"height\") {\n    element.style.setProperty(\"--size-width\", `${size.width}px`);\n  }\n  if (axis !== \"width\") {\n    element.style.setProperty(\"--size-height\", `${size.height}px`);\n  }\n}\n\nfunction releaseSize(element: HTMLElement) {\n  element.style.removeProperty(\"--size-width\");\n  element.style.removeProperty(\"--size-height\");\n}\n\n/**\n * Runs `callback` once every animation currently running on `element` has\n * finished. Falls back to running synchronously when the Web Animations API is\n * unavailable (e.g. jsdom) or nothing is animating.\n */\nfunction runAfterAnimations(\n  element: HTMLElement | null,\n  callback: () => void,\n  signal: AbortSignal,\n): number {\n  if (!element || typeof element.getAnimations !== \"function\") {\n    callback();\n    return -1;\n  }\n  return requestAnimationFrame(() => {\n    if (signal.aborted) {\n      return;\n    }\n    const animations = element.getAnimations();\n    if (animations.length === 0) {\n      callback();\n      return;\n    }\n    Promise.all(animations.map((animation) => animation.finished))\n      .then(() => {\n        if (!signal.aborted) {\n          callback();\n        }\n      })\n      .catch(() => {\n        if (!signal.aborted) {\n          callback();\n        }\n      });\n  });\n}\n\nexport type SizeTransitionProps = useRender.ComponentProps<\"div\"> & {\n  /** Value whose change triggers a size animation and content cross-fade. */\n  transitionKey: React.Key;\n  /**\n   * Which dimensions to animate. Non-animated dimensions stay `auto`.\n   * @default \"both\"\n   */\n  axis?: SizeTransitionAxis;\n};\n\n/**\n * Animates between the sizes of successive `SizeTransitionPanel` children and\n * cross-fades outgoing content into incoming content when `transitionKey`\n * changes.\n *\n * Size is exposed as `--size-width` / `--size-height` (pixels during a\n * transition, `auto` at rest). Opt in via classes such as\n * `w-(--size-width,auto) h-(--size-height,auto) transition-[width,height]`.\n */\nexport function SizeTransition({\n  axis = \"both\",\n  transitionKey,\n  children,\n  render,\n  ...props\n}: SizeTransitionProps): React.ReactElement {\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const currentRef = React.useRef<HTMLElement | null>(null);\n  const previousRef = React.useRef<HTMLDivElement | null>(null);\n  const snapshotRef = React.useRef<HTMLElement | null>(null);\n  const committedSizeRef = React.useRef<Size | null>(null);\n  const previousKeyRef = React.useRef<React.Key>(transitionKey);\n  const isFirstRenderRef = React.useRef(true);\n\n  const [previousContent, setPreviousContent] =\n    React.useState<HTMLElement | null>(null);\n  const [previousSize, setPreviousSize] = React.useState<Size | null>(null);\n  const [startingStyle, setStartingStyle] = React.useState(false);\n  const [sizeTransitioning, setSizeTransitioning] = React.useState(false);\n\n  const hasPreviousLayer = previousContent !== null;\n\n  useIsoLayoutEffect(() => {\n    const element = rootRef.current;\n    if (!element) {\n      return;\n    }\n\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      previousKeyRef.current = transitionKey;\n      committedSizeRef.current = measureSize(element);\n      return;\n    }\n\n    if (previousKeyRef.current === transitionKey) {\n      return;\n    }\n    previousKeyRef.current = transitionKey;\n\n    const outgoingContent = snapshotRef.current;\n    const previousSizeValue = committedSizeRef.current;\n\n    setSizeTransitioning(true);\n\n    if (outgoingContent) {\n      setPreviousContent(outgoingContent);\n      setStartingStyle(true);\n    }\n\n    releaseSize(element);\n    currentRef.current?.style.removeProperty(\"width\");\n    currentRef.current?.style.setProperty(\"transition\", \"none\");\n    const newSize = measureSize(element);\n    committedSizeRef.current = newSize;\n\n    // Pin the entering panel to its final width so content is clipped, not reflowed.\n    if (axis !== \"height\") {\n      currentRef.current?.style.setProperty(\"width\", `${newSize.width}px`);\n    }\n\n    if (previousSizeValue) {\n      freezeSize(element, previousSizeValue, axis);\n      setPreviousSize(previousSizeValue);\n    }\n\n    const sizeAbort = new AbortController();\n    const fadeAbort = new AbortController();\n    let sizeFinishFrame = -1;\n    let fadeFinishFrame = -1;\n\n    const frame = requestAnimationFrame(() => {\n      // Force a reflow so starting styles register before ending styles apply.\n      void element.offsetHeight;\n\n      freezeSize(element, newSize, axis);\n      currentRef.current?.style.removeProperty(\"transition\");\n      ReactDOM.flushSync(() => setStartingStyle(false));\n\n      sizeFinishFrame = runAfterAnimations(\n        element,\n        () => {\n          releaseSize(element);\n          currentRef.current?.style.removeProperty(\"width\");\n          setSizeTransitioning(false);\n        },\n        sizeAbort.signal,\n      );\n      fadeFinishFrame = runAfterAnimations(\n        currentRef.current,\n        () => {\n          setPreviousContent(null);\n          setPreviousSize(null);\n          snapshotRef.current = null;\n        },\n        fadeAbort.signal,\n      );\n    });\n\n    return () => {\n      sizeAbort.abort();\n      fadeAbort.abort();\n      cancelAnimationFrame(frame);\n      cancelAnimationFrame(sizeFinishFrame);\n      cancelAnimationFrame(fadeFinishFrame);\n    };\n  }, [axis, transitionKey]);\n\n  useIsoLayoutEffect(() => {\n    const container = previousRef.current;\n    if (!container || !previousContent) {\n      return;\n    }\n    container.replaceChildren(previousContent);\n  }, [previousContent]);\n\n  // Declared last so the transition effect reads the prior render's snapshot.\n  useIsoLayoutEffect(() => {\n    const source = currentRef.current;\n    if (!source) {\n      return;\n    }\n    const clone = source.cloneNode(true) as HTMLElement;\n    clone.removeAttribute(\"data-current\");\n    clone.removeAttribute(\"data-starting-style\");\n    clone.style.removeProperty(\"width\");\n    clone.style.removeProperty(\"transition\");\n    snapshotRef.current = clone;\n  });\n\n  const contextValue = React.useMemo<SizeTransitionContextValue>(\n    () => ({\n      currentRef,\n      startingStyle,\n      transitioning: hasPreviousLayer || sizeTransitioning,\n    }),\n    [hasPreviousLayer, sizeTransitioning, startingStyle],\n  );\n\n  const content = hasPreviousLayer ? (\n    <React.Fragment>\n      {children}\n      {/* After `children` so inserting this layer never remounts the panel. */}\n      <div\n        data-ending-style={startingStyle ? undefined : \"\"}\n        data-previous=\"\"\n        inert\n        key=\"previous\"\n        ref={previousRef}\n        style={{\n          left: 0,\n          position: \"absolute\",\n          top: 0,\n          ...(previousSize\n            ? { height: previousSize.height, width: previousSize.width }\n            : null),\n        }}\n      />\n    </React.Fragment>\n  ) : (\n    children\n  );\n\n  const defaultProps = {\n    className: \"relative\",\n    \"data-slot\": \"size-transition\",\n  };\n\n  const element = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props, { children: content }),\n    render,\n    ref: rootRef,\n    state: { transitioning: sizeTransitioning },\n    stateAttributesMapping: {\n      transitioning: (value) => (value ? { \"data-transitioning\": \"\" } : null),\n    },\n  });\n\n  return (\n    <SizeTransitionContext.Provider value={contextValue}>\n      {element}\n    </SizeTransitionContext.Provider>\n  );\n}\n\nexport type SizeTransitionPanelProps = useRender.ComponentProps<\"div\">;\n\n/**\n * Active content layer of a `SizeTransition`. Uses the `render` element as\n * `data-current` so no extra wrapper is added.\n */\nexport function SizeTransitionPanel({\n  render,\n  ...props\n}: SizeTransitionPanelProps): React.ReactElement {\n  const { currentRef, startingStyle, transitioning } =\n    useSizeTransitionContext();\n\n  return useRender({\n    defaultTagName: \"div\",\n    props,\n    render,\n    ref: currentRef,\n    state: { current: true, startingStyle: transitioning && startingStyle },\n    stateAttributesMapping: {\n      current: () => ({\n        \"data-current\": \"\",\n        \"data-slot\": \"size-transition-panel\",\n      }),\n      startingStyle: (value) => (value ? { \"data-starting-style\": \"\" } : null),\n    },\n  });\n}\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/apps/ui/public/r/style.json b/apps/ui/public/r/style.json
index 98945441c..4e62799f3 100644
--- a/apps/ui/public/r/style.json
+++ b/apps/ui/public/r/style.json
@@ -18,7 +18,7 @@
   ],
   "cssVars": {
     "theme": {
-      "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+      "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
       "font-mono": "var(--font-mono, ui-monospace, monospace)",
       "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
     },
diff --git a/apps/ui/public/r/table.json b/apps/ui/public/r/table.json
index 3f66065a3..59ca9c4d6 100644
--- a/apps/ui/public/r/table.json
+++ b/apps/ui/public/r/table.json
@@ -1,6 +1,9 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "table",
+  "dependencies": [
+    "@base-ui/react"
+  ],
   "files": [
     {
       "path": "registry/default/ui/table.tsx",
diff --git a/apps/ui/public/r/tabs.json b/apps/ui/public/r/tabs.json
index 0760cba83..68df32115 100644
--- a/apps/ui/public/r/tabs.json
+++ b/apps/ui/public/r/tabs.json
@@ -4,10 +4,13 @@
   "dependencies": [
     "@base-ui/react"
   ],
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
   "files": [
     {
       "path": "registry/default/ui/tabs.tsx",
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TabsVariant = \"default\" | \"underline\";\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  ...props\n}: TabsPrimitive.Tab.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlItemLayoutClassName,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm\",\n        segmentedControlItemLayoutClassName,\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/textarea.json b/apps/ui/public/r/textarea.json
index 8188d2334..5202e6cbd 100644
--- a/apps/ui/public/r/textarea.json
+++ b/apps/ui/public/r/textarea.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/textarea.tsx",
-      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLTextAreaElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLTextAreaElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/toast.json b/apps/ui/public/r/toast.json
index 52b79f1ed..9f0452bbe 100644
--- a/apps/ui/public/r/toast.json
+++ b/apps/ui/public/r/toast.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/toast.tsx",
-      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-60 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/ui.json b/apps/ui/public/r/ui.json
index 8d590c513..81c6d2f84 100644
--- a/apps/ui/public/r/ui.json
+++ b/apps/ui/public/r/ui.json
@@ -44,7 +44,6 @@
     "@coss/separator",
     "@coss/sheet",
     "@coss/sidebar",
-    "@coss/size-transition",
     "@coss/skeleton",
     "@coss/slider",
     "@coss/spinner",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 6be348fd5..bd12c57d4 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -46,7 +46,6 @@
         "@coss/separator",
         "@coss/sheet",
         "@coss/sidebar",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/slider",
         "@coss/spinner",
@@ -220,7 +219,7 @@
     },
     {
       "dependencies": [
-        "react-day-picker",
+        "@daypicker/react",
         "lucide-react"
       ],
       "files": [
@@ -729,19 +728,6 @@
       ],
       "type": "registry:ui"
     },
-    {
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "files": [
-        {
-          "path": "registry/default/ui/size-transition.tsx",
-          "type": "registry:ui"
-        }
-      ],
-      "name": "size-transition",
-      "type": "registry:ui"
-    },
     {
       "css": {
         "@keyframes skeleton": {
@@ -801,6 +787,9 @@
       "type": "registry:ui"
     },
     {
+      "dependencies": [
+        "@base-ui/react"
+      ],
       "files": [
         {
           "path": "registry/default/ui/table.tsx",
@@ -821,6 +810,9 @@
         }
       ],
       "name": "tabs",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
       "type": "registry:ui"
     },
     {
@@ -1585,6 +1577,33 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "autocomplete",
+        "input",
+        "async",
+        "search"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Address autocomplete with Google Maps Places API",
+      "files": [
+        {
+          "path": "registry/default/particles/p-autocomplete-16.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-autocomplete-16",
+      "registryDependencies": [
+        "@coss/autocomplete",
+        "@coss/spinner"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "avatar"
@@ -2157,6 +2176,9 @@
           "type": "registry:block"
         }
       ],
+      "meta": {
+        "className": "**:data-[slot=preview]:flex"
+      },
       "name": "p-badge-19",
       "registryDependencies": [
         "@coss/badge",
@@ -3577,6 +3599,32 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "calendar",
+        "autocomplete",
+        "field",
+        "time"
+      ],
+      "dependencies": [
+        "date-fns",
+        "lucide-react"
+      ],
+      "description": "Calendar with 24-hour autocomplete time input",
+      "files": [
+        {
+          "path": "registry/default/particles/p-calendar-25.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-calendar-25",
+      "registryDependencies": [
+        "@coss/calendar",
+        "@coss/autocomplete",
+        "@coss/field"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "date picker",
@@ -4781,6 +4829,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-19.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-19",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked divided chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-20.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-20",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "command",
@@ -8248,6 +8350,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-1",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Small segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-2",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Large segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-3",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "pagination"
@@ -8380,6 +8536,36 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "button",
+        "checkbox",
+        "checkbox group",
+        "group",
+        "popover"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Split button with popover to confirm multiple occurrences",
+      "files": [
+        {
+          "path": "registry/default/particles/p-popover-4.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-popover-4",
+      "registryDependencies": [
+        "@coss/badge",
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "preview card"
@@ -8581,6 +8767,63 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Small segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-7",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-8",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Large segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-9",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -9879,6 +10122,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
@@ -10105,7 +10455,7 @@
       "categories": [
         "tabs"
       ],
-      "description": "Basic tabs",
+      "description": "Segmented control built with tabs",
       "files": [
         {
           "path": "registry/default/particles/p-tabs-1.tsx",
@@ -10358,6 +10708,40 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Small segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-14.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-14",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Large segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-15.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-15",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "textarea"
@@ -11343,7 +11727,8 @@
       "dependencies": [
         "isomorphic-dompurify",
         "marked",
-        "lucide-react"
+        "lucide-react",
+        "motion"
       ],
       "description": "A full scheduling flow powered by Cal.com API v2.",
       "files": [
@@ -11352,6 +11737,16 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+          "target": "components/atoms/booker/booker-confirm-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/default/atoms/booker/booker-steps.tsx",
+          "target": "components/atoms/booker/booker-steps.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-calendar.tsx",
           "target": "components/atoms/booker/booker-calendar.tsx",
@@ -11430,14 +11825,17 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/field",
+        "@coss/form",
+        "@coss/group",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
         "@coss/select",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/switch",
+        "@coss/textarea",
         "@coss/tooltip"
       ],
       "meta": {
@@ -11555,7 +11953,7 @@
           "sidebar-ring": "var(--color-neutral-400)"
         },
         "theme": {
-          "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
           "font-mono": "var(--font-mono, ui-monospace, monospace)",
           "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
         }
@@ -11690,6 +12088,19 @@
         "dependency": "geist"
       }
     },
+    {
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        {
+          "path": "registry/default/lib/segmented-control.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:lib"
+    },
     {
       "dependencies": [
         "clsx",
@@ -11739,6 +12150,11 @@
           "path": "registry/default/lib/cal-api/types.ts",
           "target": "lib/cal-api/types.ts",
           "type": "registry:lib"
+        },
+        {
+          "path": "registry/default/lib/cal-api/bookings.ts",
+          "target": "lib/cal-api/bookings.ts",
+          "type": "registry:lib"
         }
       ],
       "name": "cal-api",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index fe5698140..2481b8cc9 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -763,24 +763,6 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
-  "size-transition": {
-    name: "size-transition",
-    description: "",
-    type: "registry:ui",
-    registryDependencies: undefined,
-    files: [{
-      path: "registry/default/ui/size-transition.tsx",
-      type: "registry:ui",
-      target: ""
-    }],
-    component: React.lazy(async () => {
-      const mod = await import("@/registry/default/ui/size-transition.tsx")
-      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
-      return { default: mod.default || mod[exportName] }
-    }),
-    categories: undefined,
-    meta: undefined,
-  },
   "skeleton": {
     name: "skeleton",
     description: "",
@@ -875,7 +857,7 @@ export const Index: Record<string, any> = {
     name: "tabs",
     description: "",
     type: "registry:ui",
-    registryDependencies: undefined,
+    registryDependencies: ["@coss/segmented-control"],
     files: [{
       path: "registry/default/ui/tabs.tsx",
       type: "registry:ui",
@@ -1501,6 +1483,24 @@ export const Index: Record<string, any> = {
     categories: ["autocomplete","input"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-autocomplete-16": {
+    name: "p-autocomplete-16",
+    description: "Address autocomplete with Google Maps Places API",
+    type: "registry:block",
+    registryDependencies: ["@coss/autocomplete","@coss/spinner"],
+    files: [{
+      path: "registry/default/particles/p-autocomplete-16.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-autocomplete-16.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["autocomplete","input","async","search"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
+  },
   "p-avatar-1": {
     name: "p-avatar-1",
     description: "Avatar with image and fallback",
@@ -2093,7 +2093,7 @@ export const Index: Record<string, any> = {
       return { default: mod.default || mod[exportName] }
     }),
     categories: ["badge","checkbox"],
-    meta: undefined,
+    meta: {"className":"**:data-[slot=preview]:flex"},
   },
   "p-badge-20": {
     name: "p-badge-20",
@@ -3391,6 +3391,24 @@ export const Index: Record<string, any> = {
     categories: ["calendar"],
     meta: {"colSpan":2},
   },
+  "p-calendar-25": {
+    name: "p-calendar-25",
+    description: "Calendar with 24-hour autocomplete time input",
+    type: "registry:block",
+    registryDependencies: ["@coss/calendar","@coss/autocomplete","@coss/field"],
+    files: [{
+      path: "registry/default/particles/p-calendar-25.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-calendar-25.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","autocomplete","field","time"],
+    meta: undefined,
+  },
   "p-date-picker-1": {
     name: "p-date-picker-1",
     description: "Basic date picker",
@@ -4273,6 +4291,42 @@ export const Index: Record<string, any> = {
     categories: ["combobox","select"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-combobox-19": {
+    name: "p-combobox-19",
+    description: "Combobox multiple with stacked chips",
+    type: "registry:block",
+    registryDependencies: ["@coss/avatar","@coss/badge","@coss/button","@coss/combobox"],
+    files: [{
+      path: "registry/default/particles/p-combobox-19.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-combobox-19.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["combobox","input"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"},
+  },
+  "p-combobox-20": {
+    name: "p-combobox-20",
+    description: "Combobox multiple with stacked divided chips",
+    type: "registry:block",
+    registryDependencies: ["@coss/avatar","@coss/badge","@coss/button","@coss/combobox"],
+    files: [{
+      path: "registry/default/particles/p-combobox-20.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-combobox-20.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["combobox","input"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"},
+  },
   "p-command-1": {
     name: "p-command-1",
     description: "Command palette with dialog",
@@ -7135,6 +7189,60 @@ export const Index: Record<string, any> = {
     categories: ["number field","input"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-navigation-1": {
+    name: "p-navigation-1",
+    description: "Segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-1.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-1.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
+  "p-navigation-2": {
+    name: "p-navigation-2",
+    description: "Small segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-2.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-2.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
+  "p-navigation-3": {
+    name: "p-navigation-3",
+    description: "Large segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-3.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-3.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
   "p-pagination-1": {
     name: "p-pagination-1",
     description: "Pagination example",
@@ -7243,6 +7351,24 @@ export const Index: Record<string, any> = {
     categories: ["avatar","button","popover"],
     meta: undefined,
   },
+  "p-popover-4": {
+    name: "p-popover-4",
+    description: "Split button with popover to confirm multiple occurrences",
+    type: "registry:block",
+    registryDependencies: ["@coss/badge","@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/group","@coss/label","@coss/popover"],
+    files: [{
+      path: "registry/default/particles/p-popover-4.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-popover-4.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["button","checkbox","checkbox group","group","popover"],
+    meta: undefined,
+  },
   "p-preview-card-1": {
     name: "p-preview-card-1",
     description: "Preview card with popup",
@@ -7423,6 +7549,60 @@ export const Index: Record<string, any> = {
     categories: ["radio group","form"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-[320px]"},
   },
+  "p-radio-group-7": {
+    name: "p-radio-group-7",
+    description: "Small segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-7.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-7.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
+  "p-radio-group-8": {
+    name: "p-radio-group-8",
+    description: "Segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-8.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-8.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
+  "p-radio-group-9": {
+    name: "p-radio-group-9",
+    description: "Large segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-9.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-9.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
   "p-scroll-area-1": {
     name: "p-scroll-area-1",
     description: "Basic scroll area",
@@ -8575,6 +8755,60 @@ export const Index: Record<string, any> = {
     categories: ["switch"],
     meta: undefined,
   },
+  "p-switch-7": {
+    name: "p-switch-7",
+    description: "Weekly availability editor with time range combobox pickers",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/label","@coss/popover","@coss/select","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-7.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-7.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-8": {
+    name: "p-switch-8",
+    description: "Weekly availability editor with grouped time range controls",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-8.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-8.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-9": {
+    name: "p-switch-9",
+    description: "Weekly availability editor with From/To labeled time groups",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-9.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-9.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
   "p-table-1": {
     name: "p-table-1",
     description: "Basic table",
@@ -8721,7 +8955,7 @@ export const Index: Record<string, any> = {
   },
   "p-tabs-1": {
     name: "p-tabs-1",
-    description: "Basic tabs",
+    description: "Segmented control built with tabs",
     type: "registry:block",
     registryDependencies: ["@coss/tabs"],
     files: [{
@@ -8953,6 +9187,42 @@ export const Index: Record<string, any> = {
     categories: ["tabs","tooltip"],
     meta: undefined,
   },
+  "p-tabs-14": {
+    name: "p-tabs-14",
+    description: "Small segmented control built with tabs",
+    type: "registry:block",
+    registryDependencies: ["@coss/tabs"],
+    files: [{
+      path: "registry/default/particles/p-tabs-14.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-tabs-14.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["tabs"],
+    meta: undefined,
+  },
+  "p-tabs-15": {
+    name: "p-tabs-15",
+    description: "Large segmented control built with tabs",
+    type: "registry:block",
+    registryDependencies: ["@coss/tabs"],
+    files: [{
+      path: "registry/default/particles/p-tabs-15.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-tabs-15.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["tabs"],
+    meta: undefined,
+  },
   "p-textarea-1": {
     name: "p-textarea-1",
     description: "Basic textarea",
@@ -9857,11 +10127,19 @@ export const Index: Record<string, any> = {
     name: "booker-1",
     description: "A full scheduling flow powered by Cal.com API v2.",
     type: "registry:block",
-    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/size-transition","@coss/skeleton","@coss/switch","@coss/tooltip"],
+    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/field","@coss/form","@coss/group","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/textarea","@coss/tooltip"],
     files: [{
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
       target: "components/atoms/booker-1.tsx"
+    },{
+      path: "registry/default/atoms/booker/booker-confirm-form.tsx",
+      type: "registry:component",
+      target: "components/atoms/booker/booker-confirm-form.tsx"
+    },{
+      path: "registry/default/atoms/booker/booker-steps.tsx",
+      type: "registry:component",
+      target: "components/atoms/booker/booker-steps.tsx"
     },{
       path: "registry/default/atoms/booker/booker-calendar.tsx",
       type: "registry:component",
@@ -9937,6 +10215,24 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "segmented-control": {
+    name: "segmented-control",
+    description: "",
+    type: "registry:lib",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/default/lib/segmented-control.ts",
+      type: "registry:lib",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/lib/segmented-control.ts")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
   "utils": {
     name: "utils",
     description: "",
@@ -9984,6 +10280,10 @@ export const Index: Record<string, any> = {
       path: "registry/default/lib/cal-api/types.ts",
       type: "registry:lib",
       target: "lib/cal-api/types.ts"
+    },{
+      path: "registry/default/lib/cal-api/bookings.ts",
+      type: "registry:lib",
+      target: "lib/cal-api/bookings.ts"
     }],
     component: React.lazy(async () => {
       const mod = await import("@/registry/default/lib/cal-api/client.ts")
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index f6fadfa47..fe56c9f23 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -1,26 +1,28 @@
 "use client";
 
-import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
-import { Button } from "@/registry/default/ui/button";
+import { CalendarIcon, Clock3Icon } from "lucide-react";
+import { cn } from "@/registry/default/lib/utils";
 import { Card } from "@/registry/default/ui/card";
-import { Input } from "@/registry/default/ui/input";
-import {
-  SizeTransition,
-  SizeTransitionPanel,
-} from "@/registry/default/ui/size-transition";
 import { Skeleton } from "@/registry/default/ui/skeleton";
 import { BookerAvatars } from "./booker/booker-avatars";
 import { BookerCalendar } from "./booker/booker-calendar";
+import { BookerConfirmForm } from "./booker/booker-confirm-form";
 import { BookerErrorState } from "./booker/booker-error-state";
 import { type BookerLabels, getBookerLabels } from "./booker/booker-labels";
+import { BookerSteps } from "./booker/booker-steps";
 import { DurationPicker } from "./booker/duration-picker";
 import { EventDescription } from "./booker/event-description";
 import { HeaderBanner } from "./booker/header-banner";
 import { Location } from "./booker/location";
 import { TimePicker } from "./booker/time-picker";
-import { TimezonePicker } from "./booker/timezone-picker";
+import { TimezoneDisplay, TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
 import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
+import {
+  formatConfirmDateDetail,
+  formatConfirmTimeRange,
+  formatSelectedWeekday,
+} from "@/lib/booker/utils";
 
 type BookerProps = {
   target: BookerTarget;
@@ -31,7 +33,14 @@ type BookerProps = {
   labels?: Partial<BookerLabels>;
 };
 
-export function Booker({ initialData, target, timezone, labels }: BookerProps) {
+export function Booker({
+  initialData,
+  target,
+  timezone,
+  labels,
+  defaultFormValues,
+  onCreateBookingSuccess,
+}: BookerProps) {
   const t = getBookerLabels(labels);
   const booker = useBooker({ initialData, target, timezone });
 
@@ -46,19 +55,17 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
   }
 
   const displayMeta = booker.meta;
+  const selectedDate = booker.timePickerProps.selectedDate;
+  const selectedTime = booker.confirmFormProps.selectedTime;
+  const showSelectedSlot =
+    booker.step === "confirm" && selectedDate != null && selectedTime != null;
   const headerImageAlt = displayMeta
     ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)
     : "Booker header";
-  const metaContentClassName = [
-    displayMeta?.eventTypeImageUrl ? "relative -mt-11 @5xl:-mt-13" : "",
-    "flex flex-col gap-6 @5xl:p-6 p-4",
-  ]
-    .filter(Boolean)
-    .join(" ");
 
   return (
     <div
-      className="@container flex flex-col items-center gap-4"
+      className="@container flex w-full flex-col items-center gap-4"
       aria-busy={booker.loadingState.busy}
     >
       <Card className="@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]">
@@ -68,7 +75,12 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             alt={headerImageAlt}
             src={displayMeta?.eventTypeImageUrl}
           />
-          <div className={metaContentClassName}>
+          <div
+            className={cn(
+              "flex flex-col gap-6 @5xl:p-6 p-4",
+              displayMeta?.eventTypeImageUrl && "relative -mt-11 @5xl:-mt-13",
+            )}
+          >
             <div className="flex flex-col gap-4">
               <div className="flex flex-col gap-2">
                 <BookerAvatars
@@ -105,6 +117,30 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
 
             {displayMeta ? (
               <div className="flex flex-col gap-3 sm:text-sm">
+                {showSelectedSlot ? (
+                  <div className="flex gap-2">
+                    <CalendarIcon
+                      className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
+                      aria-hidden="true"
+                    />
+                    <span>
+                      {formatSelectedWeekday(
+                        selectedDate,
+                        booker.calendarProps.locale,
+                      )}{" "}
+                      {formatConfirmDateDetail(
+                        selectedDate,
+                        booker.calendarProps.locale,
+                      )}{" "}
+                      {formatConfirmTimeRange(
+                        selectedTime,
+                        booker.durationProps.value,
+                        !booker.timePickerProps.is24Hour,
+                        booker.calendarProps.locale,
+                      )}
+                    </span>
+                  </div>
+                ) : null}
                 {displayMeta.eventTypeDurationOptions ? (
                   <DurationPicker
                     formatLabel={t.durationMinutes}
@@ -114,7 +150,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                 ) : (
                   <div className="flex items-center gap-2">
                     <Clock3Icon
-                      className="size-4.5 shrink-0 opacity-80 sm:size-4"
+                      className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
                       aria-hidden="true"
                     />
                     <span>
@@ -133,7 +169,11 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                   }}
                   locations={displayMeta.eventTypeLocations}
                 />
-                <TimezonePicker {...booker.timezoneProps} />
+                {booker.step === "select" ? (
+                  <TimezonePicker {...booker.timezoneProps} />
+                ) : (
+                  <TimezoneDisplay value={booker.timezoneProps.value} />
+                )}
               </div>
             ) : (
               <div className="flex flex-col gap-1">
@@ -144,21 +184,12 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             )}
           </div>
         </div>
-        <SizeTransition
-          transitionKey={booker.step}
-          render={
-            <div className="h-(--size-height,auto) @3xl:w-(--size-width,auto) w-full transition-[width,height] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-transitioning:overflow-clip **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-current:transition-opacity **:data-previous:transition-opacity" />
-          }
-        >
+        <BookerSteps step={booker.step}>
           {booker.step === "select" ? (
-            <SizeTransitionPanel
-              render={<div className="flex w-full @3xl:flex-row flex-col" />}
-            >
-              {/* Calendar */}
+            <div key="select" className="flex w-full @3xl:flex-row flex-col">
               <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
                 <BookerCalendar {...booker.calendarProps} />
               </div>
-              {/* Time picker */}
               <TimePicker
                 labels={{
                   hour12Short: t.hour12Short,
@@ -172,21 +203,30 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                 }}
                 {...booker.timePickerProps}
               />
-            </SizeTransitionPanel>
+            </div>
           ) : (
-            <SizeTransitionPanel
-              render={
-                <div className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4" />
-              }
+            <div
+              key="confirm"
+              className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4"
             >
-              <Button variant="ghost" size="sm" onClick={booker.onBack}>
-                <ArrowLeftIcon aria-hidden="true" />
-                Back
-              </Button>
-              <Input className="w-full" placeholder="Your name" />
-            </SizeTransitionPanel>
+              <BookerConfirmForm
+                {...booker.confirmFormProps}
+                defaultEmail={
+                  typeof defaultFormValues?.email === "string"
+                    ? defaultFormValues.email
+                    : undefined
+                }
+                defaultName={
+                  typeof defaultFormValues?.name === "string"
+                    ? defaultFormValues.name
+                    : undefined
+                }
+                labels={t}
+                onSuccess={onCreateBookingSuccess}
+              />
+            </div>
           )}
-        </SizeTransition>
+        </BookerSteps>
       </Card>
       <a
         href="https://cal.com"
diff --git a/apps/ui/registry/default/atoms/booker/booker-calendar.tsx b/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
index 5b416b8c3..4f13f16b1 100644
--- a/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
@@ -325,14 +325,16 @@ function DayButton({
 
 // Month + year heading; the year is muted via formatToParts so it stays
 // locale-correct (some locales render "2026 June").
-function MonthCaption({
+export function MonthCaption({
   date,
   formatter,
   className,
+  muteYear = true,
 }: {
   date: Date;
   formatter: Intl.DateTimeFormat;
   className?: string;
+  muteYear?: boolean;
 }): ReactElement {
   return (
     <div
@@ -343,7 +345,10 @@ function MonthCaption({
     >
       {formatter.formatToParts(date).map((part) =>
         part.type === "year" ? (
-          <span key={`year-${part.value}`} className="text-muted-foreground/72">
+          <span
+            key={`year-${part.value}`}
+            className={muteYear ? "text-muted-foreground/72" : undefined}
+          >
             {part.value}
           </span>
         ) : (
diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
new file mode 100644
index 000000000..bf17d90d6
--- /dev/null
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import { UserPlusIcon, XIcon } from "lucide-react";
+import type { FormEvent } from "react";
+import { useRef, useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Field, FieldError, FieldLabel } from "@/registry/default/ui/field";
+import { Form } from "@/registry/default/ui/form";
+import { Group } from "@/registry/default/ui/group";
+import { Input } from "@/registry/default/ui/input";
+import { Textarea } from "@/registry/default/ui/textarea";
+import type { BookerLabels } from "./booker-labels";
+import { getLocationOptionValue, LocationPicker } from "./location";
+import { createBookingAction } from "@/lib/booker/actions";
+import type { BookerConfirmFormContext } from "@/lib/booker/use-booker";
+import { toCalendarDateKey } from "@/lib/booker/utils";
+import type { Booking } from "@/lib/cal-api/types";
+
+export type BookerConfirmFormProps = BookerConfirmFormContext & {
+  defaultEmail?: string;
+  defaultName?: string;
+  labels: BookerLabels;
+  onSuccess?: (booking: Booking) => void;
+};
+
+function RequiredMark() {
+  return <span className="text-destructive-foreground">*</span>;
+}
+
+function getDefaultLocationProvider(
+  locations: BookerConfirmFormContext["locations"],
+): string {
+  const location = locations?.[0];
+  if (!location) {
+    return "";
+  }
+
+  return location.provider || getLocationOptionValue(location, 0);
+}
+
+export function BookerConfirmForm({
+  defaultEmail,
+  defaultName,
+  disableGuests = false,
+  durationMinutes,
+  includeLengthInMinutes,
+  labels,
+  locale,
+  locations = [],
+  onBack,
+  onSuccess,
+  selectedDate,
+  selectedTime,
+  target,
+  timeZone,
+}: BookerConfirmFormProps) {
+  const nextGuestIdRef = useRef(0);
+  const [guestIds, setGuestIds] = useState<number[]>([]);
+  const [locationProvider, setLocationProvider] = useState(() =>
+    getDefaultLocationProvider(locations),
+  );
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [successBooking, setSuccessBooking] = useState<Booking | null>(null);
+
+  const resolvedLocationProvider =
+    locations.length > 1
+      ? locationProvider || getDefaultLocationProvider(locations)
+      : getDefaultLocationProvider(locations);
+
+  const handleAddGuest = () => {
+    const id = nextGuestIdRef.current;
+    nextGuestIdRef.current += 1;
+    setGuestIds((current) => [...current, id]);
+  };
+
+  const handleRemoveGuest = (id: number) => {
+    setGuestIds((current) => current.filter((guestId) => guestId !== id));
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitError(null);
+
+    if (!selectedDate || !selectedTime) {
+      setSubmitError(labels.confirmError);
+      return;
+    }
+
+    const formData = new FormData(event.currentTarget);
+    const name = String(formData.get("name") ?? "").trim();
+    const email = String(formData.get("email") ?? "").trim();
+    const notes = String(formData.get("notes") ?? "").trim();
+    const guests = formData
+      .getAll("guests")
+      .map((value) => String(value).trim())
+      .filter(Boolean);
+
+    if (!name || !email) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const result = await createBookingAction({
+        email,
+        guests: guests.length > 0 ? guests : undefined,
+        ...(includeLengthInMinutes && durationMinutes
+          ? { lengthInMinutes: durationMinutes }
+          : {}),
+        locale,
+        locationProvider: resolvedLocationProvider || undefined,
+        name,
+        notes: notes || undefined,
+        selectedDateKey: toCalendarDateKey(selectedDate),
+        selectedTime,
+        target,
+        timeZone,
+      });
+
+      if (!result.ok) {
+        setSubmitError(result.error || labels.confirmError);
+        return;
+      }
+
+      setSuccessBooking(result.booking);
+      onSuccess?.(result.booking);
+    } catch {
+      setSubmitError(labels.confirmError);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (successBooking) {
+    return (
+      <div className="flex flex-col gap-4">
+        <p className="font-medium text-base sm:text-sm">
+          {labels.confirmSuccess}
+        </p>
+        {successBooking.meetingUrl ? (
+          <p className="text-muted-foreground text-sm">
+            <a
+              className="text-foreground underline-offset-4 hover:underline"
+              href={successBooking.meetingUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {successBooking.meetingUrl}
+            </a>
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+        <Field name="name">
+          <FieldLabel>
+            {labels.confirmYourName} <RequiredMark />
+          </FieldLabel>
+          <Input autoFocus defaultValue={defaultName} required type="text" />
+          <FieldError>{labels.confirmNameError}</FieldError>
+        </Field>
+
+        <Field name="email">
+          <FieldLabel>
+            {labels.confirmEmail} <RequiredMark />
+          </FieldLabel>
+          <Input
+            autoComplete="email"
+            defaultValue={defaultEmail}
+            required
+            type="email"
+          />
+          <FieldError>{labels.confirmEmailError}</FieldError>
+        </Field>
+
+        <LocationPicker
+          label={labels.confirmLocation}
+          locations={locations}
+          onValueChange={setLocationProvider}
+        />
+
+        <Field name="notes">
+          <FieldLabel>{labels.confirmNotes}</FieldLabel>
+          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />
+        </Field>
+
+        {guestIds.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            {guestIds.map((guestId) => (
+              <Group
+                key={guestId}
+                aria-label={labels.confirmGuestEmail}
+                className="w-full gap-2"
+              >
+                <Input
+                  aria-label={labels.confirmGuestEmail}
+                  className="flex-1"
+                  name="guests"
+                  placeholder={labels.confirmGuestEmailPlaceholder}
+                  type="email"
+                />
+                <div>
+                  <Button
+                    aria-label={labels.confirmRemoveGuest}
+                    onClick={() => handleRemoveGuest(guestId)}
+                    size="icon"
+                    type="button"
+                    variant="outline"
+                  >
+                    <XIcon aria-hidden="true" />
+                  </Button>
+                </div>
+              </Group>
+            ))}
+          </div>
+        ) : null}
+
+        {!disableGuests ? (
+          <Button
+            className="h-auto! self-start px-0.5"
+            onClick={handleAddGuest}
+            type="button"
+            variant="link"
+          >
+            <UserPlusIcon aria-hidden="true" />
+            {labels.confirmAddGuests}
+          </Button>
+        ) : null}
+
+        {submitError ? (
+          <p className="text-destructive-foreground text-xs" role="alert">
+            {submitError}
+          </p>
+        ) : null}
+
+        <p className="text-muted-foreground text-xs">
+          {labels.confirmTermsPrefix}{" "}
+          <a
+            className="text-foreground underline-offset-4 hover:underline"
+            href="https://cal.com/terms"
+            rel="noreferrer"
+            target="_blank"
+          >
+            {labels.confirmTerms}
+          </a>{" "}
+          and{" "}
+          <a
+            className="text-foreground underline-offset-4 hover:underline"
+            href="https://cal.com/privacy"
+            rel="noreferrer"
+            target="_blank"
+          >
+            {labels.confirmPrivacyPolicy}
+          </a>
+          .
+        </p>
+
+        <div className="flex justify-end gap-2 pt-1">
+          <Button
+            disabled={submitting}
+            onClick={onBack}
+            type="button"
+            variant="ghost"
+          >
+            {labels.confirmBack}
+          </Button>
+          <Button loading={submitting} type="submit">
+            {submitting ? labels.confirmSubmitting : labels.confirmSubmit}
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/atoms/booker/booker-labels.ts b/apps/ui/registry/default/atoms/booker/booker-labels.ts
index c6e5be912..c15a24536 100644
--- a/apps/ui/registry/default/atoms/booker/booker-labels.ts
+++ b/apps/ui/registry/default/atoms/booker/booker-labels.ts
@@ -17,6 +17,25 @@ export type BookerLabels = {
   headerImageAlt: (hostName: string, eventTitle: string) => string;
   locationOptions: (count: number) => string;
   locationSelectOnNextStep: string;
+  confirmYourName: string;
+  confirmEmail: string;
+  confirmNameError: string;
+  confirmEmailError: string;
+  confirmNotes: string;
+  confirmNotesPlaceholder: string;
+  confirmLocation: string;
+  confirmGuestEmail: string;
+  confirmGuestEmailPlaceholder: string;
+  confirmRemoveGuest: string;
+  confirmAddGuests: string;
+  confirmBack: string;
+  confirmSubmit: string;
+  confirmSubmitting: string;
+  confirmError: string;
+  confirmSuccess: string;
+  confirmTermsPrefix: string;
+  confirmTerms: string;
+  confirmPrivacyPolicy: string;
 };
 
 const DEFAULT_BOOKER_LABELS: BookerLabels = {
@@ -40,6 +59,26 @@ const DEFAULT_BOOKER_LABELS: BookerLabels = {
     `Banner for ${eventTitle} with ${hostName}`,
   locationOptions: (count) => `${count} location options`,
   locationSelectOnNextStep: "Select on the next step",
+  confirmYourName: "Your name",
+  confirmEmail: "Email address",
+  confirmNameError: "Please enter your name.",
+  confirmEmailError: "Please enter a valid email address.",
+  confirmNotes: "Additional notes",
+  confirmNotesPlaceholder:
+    "Please share anything that will help prepare for our meeting.",
+  confirmLocation: "Location",
+  confirmGuestEmail: "Guest email",
+  confirmGuestEmailPlaceholder: "guest@example.com",
+  confirmRemoveGuest: "Remove guest",
+  confirmAddGuests: "Add guests",
+  confirmBack: "Back",
+  confirmSubmit: "Confirm",
+  confirmSubmitting: "Confirming…",
+  confirmError: "Could not create booking. Please try again.",
+  confirmSuccess: "Booking confirmed",
+  confirmTermsPrefix: "By proceeding, you agree to Cal.com's",
+  confirmTerms: "Terms",
+  confirmPrivacyPolicy: "Privacy Policy",
 };
 
 export function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {
diff --git a/apps/ui/registry/default/atoms/booker/booker-steps.tsx b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
new file mode 100644
index 000000000..d7d0e98b7
--- /dev/null
+++ b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  animate,
+  domAnimation,
+  LazyMotion,
+  MotionConfig,
+  useReducedMotion,
+} from "motion/react";
+import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
+import type { BookerStep } from "@/lib/booker/use-booker";
+
+const EASE = [0.32, 0.72, 0, 1] as const;
+const SIZE_TRANSITION = { duration: 0.3, ease: EASE } as const;
+const ENTER_TRANSITION = { delay: 0.05, duration: 0.4, ease: EASE } as const;
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+type Size = { width: number; height: number };
+
+const measure = (element: HTMLElement): Size => ({
+  width: element.offsetWidth,
+  height: element.offsetHeight,
+});
+
+function useStepTransition(step: BookerStep) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousStepRef = useRef(step);
+  const restingSizeRef = useRef<Size | null>(null);
+  const isAnimatingRef = useRef(false);
+  const reducedMotion = useReducedMotion();
+
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!isAnimatingRef.current) {
+        restingSizeRef.current = measure(container);
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || previousStepRef.current === step) return;
+    previousStepRef.current = step;
+
+    const enteringStep = container.firstElementChild as HTMLElement | null;
+
+    if (enteringStep && !reducedMotion) {
+      enteringStep.style.opacity = "0";
+    }
+
+    const start = restingSizeRef.current ?? measure(container);
+    container.style.width = "auto";
+    container.style.height = "auto";
+    enteringStep?.style.removeProperty("width");
+    void container.offsetHeight;
+    const end = measure(container);
+
+    if (enteringStep) enteringStep.style.width = `${end.width}px`;
+    container.style.width = `${start.width}px`;
+    container.style.height = `${start.height}px`;
+
+    isAnimatingRef.current = true;
+    const sizeAnimation = animate(
+      container,
+      { width: end.width, height: end.height },
+      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,
+    );
+    const enterAnimation =
+      enteringStep && !reducedMotion
+        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)
+        : null;
+
+    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(
+      () => {
+        container.style.width = "";
+        container.style.height = "";
+        enteringStep?.style.removeProperty("width");
+        enteringStep?.style.removeProperty("opacity");
+        restingSizeRef.current = measure(container);
+        isAnimatingRef.current = false;
+      },
+    );
+
+    return () => {
+      sizeAnimation.stop();
+      enterAnimation?.stop();
+      isAnimatingRef.current = false;
+    };
+  }, [step, reducedMotion]);
+
+  return containerRef;
+}
+
+export function BookerSteps({
+  step,
+  children,
+}: {
+  step: BookerStep;
+  children: ReactNode;
+}) {
+  const containerRef = useStepTransition(step);
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <MotionConfig reducedMotion="user" transition={SIZE_TRANSITION}>
+        <div
+          ref={containerRef}
+          className="relative w-full @3xl:flex-1 overflow-clip"
+        >
+          {children}
+        </div>
+      </MotionConfig>
+    </LazyMotion>
+  );
+}
diff --git a/apps/ui/registry/default/atoms/booker/location.tsx b/apps/ui/registry/default/atoms/booker/location.tsx
index 101769dab..1db692825 100644
--- a/apps/ui/registry/default/atoms/booker/location.tsx
+++ b/apps/ui/registry/default/atoms/booker/location.tsx
@@ -2,12 +2,20 @@
 
 import { ExternalLinkIcon, MapPinIcon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
 import {
   Popover,
   PopoverDescription,
   PopoverPopup,
   PopoverTrigger,
 } from "@/registry/default/ui/popover";
+import {
+  Select,
+  SelectItem,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select";
 import type { EventTypeLocationOption } from "@/lib/booker/utils";
 
 type LocationLabels = {
@@ -76,7 +84,7 @@ function resolveProviderIcons(provider?: string): string[] {
     .map(normalizeIconUrl);
 }
 
-function LocationIcon({ provider }: { provider?: string }) {
+export function LocationIcon({ provider }: { provider?: string }) {
   const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);
   const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(
     () => new Set(),
@@ -113,7 +121,7 @@ function LocationIcon({ provider }: { provider?: string }) {
   );
 }
 
-function LocationRow({ label, provider }: EventTypeLocationOption) {
+export function LocationRow({ label, provider }: EventTypeLocationOption) {
   return (
     <div className="flex items-center gap-2">
       <LocationIcon provider={provider} />
@@ -122,6 +130,80 @@ function LocationRow({ label, provider }: EventTypeLocationOption) {
   );
 }
 
+export function getLocationOptionValue(
+  location: EventTypeLocationOption,
+  index: number,
+): string {
+  return location.provider || `${location.label}-${index}`;
+}
+
+type LocationSelectItem = EventTypeLocationOption & {
+  value: string;
+};
+
+type LocationPickerProps = {
+  locations: EventTypeLocationOption[];
+  label: string;
+  onValueChange?: (provider: string) => void;
+};
+
+function LocationSelectOption({ label, provider }: LocationSelectItem) {
+  return (
+    <span className="flex items-center gap-2">
+      <LocationIcon provider={provider} />
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}
+
+export function LocationPicker({
+  locations,
+  label,
+  onValueChange,
+}: LocationPickerProps) {
+  const items = useMemo(
+    (): LocationSelectItem[] =>
+      locations.map((location, index) => ({
+        ...location,
+        value: getLocationOptionValue(location, index),
+      })),
+    [locations],
+  );
+
+  if (items.length <= 1) {
+    return null;
+  }
+
+  return (
+    <Field name="location">
+      <FieldLabel>{label}</FieldLabel>
+      <Select
+        aria-label={label}
+        defaultValue={items[0]}
+        itemToStringValue={(item) => item.value}
+        onValueChange={(item) => {
+          if (item) {
+            onValueChange?.(item.provider || item.value);
+          }
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            {(item) => <LocationSelectOption {...item} />}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectPopup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item}>
+              <LocationSelectOption {...item} />
+            </SelectItem>
+          ))}
+        </SelectPopup>
+      </Select>
+    </Field>
+  );
+}
+
 export function Location({ locations, labels }: LocationProps) {
   if (locations.length <= 1) {
     const location = locations[0];
@@ -136,7 +218,7 @@ export function Location({ locations, labels }: LocationProps) {
         openOnHover
         delay={0}
       >
-        <MapPinIcon className="size-4.5 shrink-0 opacity-80 sm:size-4" />
+        <MapPinIcon className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4" />
         <span>{labels.locationOptions(locations.length)}</span>
       </PopoverTrigger>
       <PopoverPopup align="start" side="top" className="*:p-3">
diff --git a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
index c4d02c87b..10db94302 100644
--- a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
+++ b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
@@ -26,6 +26,22 @@ type TimezonePickerProps = {
   onValueChange: (value: string) => void;
 };
 
+function formatTimezoneLabel(timezone: string): string {
+  return timezone.replace(/_/g, " ");
+}
+
+export function TimezoneDisplay({ value }: { value: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <GlobeIcon
+        className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
+        aria-hidden="true"
+      />
+      <span>{formatTimezoneLabel(value)}</span>
+    </div>
+  );
+}
+
 export function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {
   const timezoneOptions = useMemo<TimezoneOption[]>(() => {
     const rawTimezones =
@@ -58,7 +74,7 @@ export function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {
         const totalMinutes = sign * (hours * 60 + minutes);
 
         return {
-          label: timezone.replace(/_/g, " "),
+          label: formatTimezoneLabel(timezone),
           numericOffset: totalMinutes,
           offset: modifiedOffset,
           value: timezone,
diff --git a/apps/ui/registry/default/atoms/lib/booker/actions.ts b/apps/ui/registry/default/atoms/lib/booker/actions.ts
index 53d7adb42..4db1a2ca9 100644
--- a/apps/ui/registry/default/atoms/lib/booker/actions.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/actions.ts
@@ -1,13 +1,17 @@
 "use server";
 
+import { toBookingLocation } from "@/lib/booker/booking-location";
 import {
   type BookerTarget,
+  getCreateBookingParamsFromTarget,
   getDynamicContext,
   getOrgSlugFromTarget,
   getPublicEventBannerParamsFromTarget,
   getUserSlotParamsFromTarget,
   parseBookingUrlTarget,
 } from "@/lib/booker/target";
+import { buildBookingStartIso } from "@/lib/booker/utils";
+import { createBooking } from "@/lib/cal-api/bookings";
 import { CalApiError } from "@/lib/cal-api/client";
 import {
   getDynamicEventType,
@@ -18,7 +22,7 @@ import {
 } from "@/lib/cal-api/event-types";
 import { getPublicEventInfo } from "@/lib/cal-api/public-event";
 import { getAvailableSlots } from "@/lib/cal-api/slots";
-import type { EventType } from "@/lib/cal-api/types";
+import type { Booking, EventType } from "@/lib/cal-api/types";
 
 export type FetchRawBookerInput = {
   monthIso: string;
@@ -359,3 +363,261 @@ export async function fetchRawBookerDataAction(
     };
   }
 }
+
+export type CreateBookingActionInput = {
+  email: string;
+  guests?: string[];
+  lengthInMinutes?: number;
+  locale?: string;
+  locationProvider?: string;
+  name: string;
+  notes?: string;
+  selectedDateKey: string;
+  selectedTime: string;
+  target: BookerTarget;
+  timeZone: string;
+};
+
+export type CreateBookingActionResult =
+  | { ok: true; booking: Booking }
+  | { ok: false; error: string; errorCode?: string };
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function validateCreateBookingInput(
+  input: CreateBookingActionInput,
+): CreateBookingActionResult | null {
+  const name = input.name.trim();
+  if (!name) {
+    return {
+      error: "Name is required.",
+      errorCode: "INVALID_NAME",
+      ok: false,
+    };
+  }
+
+  const email = input.email.trim();
+  if (!email || !EMAIL_PATTERN.test(email)) {
+    return {
+      error: "A valid email address is required.",
+      errorCode: "INVALID_EMAIL",
+      ok: false,
+    };
+  }
+
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(input.selectedDateKey)) {
+    return {
+      error: "Invalid booking date.",
+      errorCode: "INVALID_DATE",
+      ok: false,
+    };
+  }
+
+  if (!/^\d{2}:\d{2}$/.test(input.selectedTime)) {
+    return {
+      error: "Invalid booking time.",
+      errorCode: "INVALID_TIME",
+      ok: false,
+    };
+  }
+
+  if (!input.timeZone.trim()) {
+    return {
+      error: "Timezone is required.",
+      errorCode: "INVALID_TIMEZONE",
+      ok: false,
+    };
+  }
+
+  if (input.guests?.some((guest) => !EMAIL_PATTERN.test(guest.trim()))) {
+    return {
+      error: "All guest emails must be valid.",
+      errorCode: "INVALID_GUEST_EMAIL",
+      ok: false,
+    };
+  }
+
+  return null;
+}
+
+function getEventTypeDurationOptions(eventType: EventType): number[] | null {
+  const options = (
+    eventType as EventType & { lengthInMinutesOptions?: number[] }
+  ).lengthInMinutesOptions;
+  if (!Array.isArray(options)) {
+    return null;
+  }
+
+  const parsed = options.filter(
+    (value): value is number => typeof value === "number" && value > 0,
+  );
+  return parsed.length > 1 ? parsed : null;
+}
+
+function resolveBookingLengthInMinutes(
+  eventType: EventType,
+  lengthInMinutes: number | undefined,
+): CreateBookingActionResult | { lengthInMinutes?: number } {
+  const durationOptions = getEventTypeDurationOptions(eventType);
+  if (!durationOptions) {
+    return {};
+  }
+
+  if (lengthInMinutes == null) {
+    return {
+      error: "Duration is required for this event type.",
+      errorCode: "INVALID_DURATION",
+      ok: false,
+    };
+  }
+
+  if (!durationOptions.includes(lengthInMinutes)) {
+    return {
+      error: "The selected duration is not allowed for this event type.",
+      errorCode: "INVALID_DURATION",
+      ok: false,
+    };
+  }
+
+  return { lengthInMinutes };
+}
+
+async function resolveBookableEventType(
+  target: BookerTarget,
+): Promise<CreateBookingActionResult | { eventType: EventType }> {
+  const eventType = await resolveEventType(target);
+
+  if (!eventType) {
+    return {
+      error: "No event type found for the provided target.",
+      errorCode: "NOT_FOUND",
+      ok: false,
+    };
+  }
+
+  if (eventType.hidden) {
+    return {
+      error:
+        "This event type is not currently published and is not accepting bookings.",
+      errorCode: "UNPUBLISHED",
+      ok: false,
+    };
+  }
+
+  return { eventType };
+}
+
+export async function createBookingAction(
+  input: CreateBookingActionInput,
+): Promise<CreateBookingActionResult> {
+  try {
+    const validationError = validateCreateBookingInput(input);
+    if (validationError) {
+      return validationError;
+    }
+
+    const resolvedEvent = await resolveBookableEventType(input.target);
+    if (!("eventType" in resolvedEvent)) {
+      return resolvedEvent;
+    }
+
+    const { eventType } = resolvedEvent;
+
+    if (eventType.disableGuests && input.guests?.length) {
+      return {
+        error: "Guests are not allowed for this event type.",
+        errorCode: "GUESTS_DISABLED",
+        ok: false,
+      };
+    }
+
+    const lengthResult = resolveBookingLengthInMinutes(
+      eventType,
+      input.lengthInMinutes,
+    );
+    if ("ok" in lengthResult) {
+      return lengthResult;
+    }
+
+    const start = buildBookingStartIso(
+      input.selectedDateKey,
+      input.selectedTime,
+      input.timeZone,
+    );
+    const bookingFieldsResponses: Record<string, unknown> = {};
+
+    if (input.notes?.trim()) {
+      bookingFieldsResponses.notes = input.notes.trim();
+    }
+
+    if (input.locationProvider?.trim()) {
+      bookingFieldsResponses.location = input.locationProvider.trim();
+    }
+
+    const targetParams = getCreateBookingParamsFromTarget(input.target, {
+      eventTypeSlug: eventType.slug,
+    });
+
+    const body: Parameters<typeof createBooking>[0] = {
+      attendee: {
+        email: input.email.trim(),
+        name: input.name.trim(),
+        timeZone: input.timeZone,
+        ...(input.locale ? { language: input.locale.split("-")[0] } : {}),
+      },
+      start,
+      ...(input.guests?.length ? { guests: input.guests } : {}),
+      ...(Object.keys(bookingFieldsResponses).length
+        ? { bookingFieldsResponses }
+        : {}),
+      ...("lengthInMinutes" in lengthResult && lengthResult.lengthInMinutes
+        ? { lengthInMinutes: lengthResult.lengthInMinutes }
+        : {}),
+    };
+
+    if (eventType.id > 0) {
+      body.eventTypeId = eventType.id;
+    } else if (
+      eventType.slug &&
+      (targetParams.username || targetParams.teamSlug)
+    ) {
+      body.eventTypeSlug = eventType.slug;
+      if (targetParams.username) {
+        body.username = targetParams.username;
+      }
+      if (targetParams.teamSlug) {
+        body.teamSlug = targetParams.teamSlug;
+      }
+      if (targetParams.organizationSlug) {
+        body.organizationSlug = targetParams.organizationSlug;
+      }
+    } else {
+      return {
+        error: "Missing event type for booking.",
+        errorCode: "MISSING_EVENT_TYPE",
+        ok: false,
+      };
+    }
+
+    if (input.locationProvider?.trim()) {
+      body.location = toBookingLocation(input.locationProvider.trim());
+    }
+
+    const booking = await createBooking(body);
+    return { ok: true, booking };
+  } catch (error) {
+    if (error instanceof CalApiError) {
+      return {
+        error: error.message,
+        errorCode: error.code,
+        ok: false,
+      };
+    }
+
+    return {
+      error:
+        error instanceof Error ? error.message : "Could not create booking.",
+      ok: false,
+    };
+  }
+}
diff --git a/apps/ui/registry/default/atoms/lib/booker/booking-location.ts b/apps/ui/registry/default/atoms/lib/booker/booking-location.ts
new file mode 100644
index 000000000..971e0dc01
--- /dev/null
+++ b/apps/ui/registry/default/atoms/lib/booker/booking-location.ts
@@ -0,0 +1,32 @@
+import type { BookingLocationInput } from "@/lib/cal-api/types";
+
+const BOOKING_INTEGRATION_MAP: Record<string, string> = {
+  "daily-video": "daily-video",
+  "google-meet": "google-meet",
+  "huddle01-video": "huddle",
+  "microsoft-teams": "office365-video",
+  whereby: "whereby-video",
+};
+
+export function toBookingLocation(provider: string): BookingLocationInput {
+  const normalized = provider.trim().toLowerCase();
+
+  if (normalized === "inperson" || normalized === "in_person") {
+    return { type: "address" };
+  }
+
+  if (normalized === "phone") {
+    return { type: "phone" };
+  }
+
+  if (normalized === "conferencing" || normalized === "organizersdefaultapp") {
+    return { type: "organizersDefaultApp" };
+  }
+
+  if (normalized === "link") {
+    return { type: "link" };
+  }
+
+  const integration = BOOKING_INTEGRATION_MAP[normalized] ?? normalized;
+  return { type: "integration", integration };
+}
diff --git a/apps/ui/registry/default/atoms/lib/booker/target.ts b/apps/ui/registry/default/atoms/lib/booker/target.ts
index a607848ea..838335a2b 100644
--- a/apps/ui/registry/default/atoms/lib/booker/target.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/target.ts
@@ -125,18 +125,63 @@ export function getOrgSlugFromTarget(target: BookerTarget): string | undefined {
 export function getUserSlotParamsFromTarget(
   target: BookerTarget,
 ): { username: string; eventTypeSlug: string } | null {
+  const params = getCreateBookingParamsFromTarget(target);
+  if (!params.username || !params.eventTypeSlug) {
+    return null;
+  }
+
+  return { eventTypeSlug: params.eventTypeSlug, username: params.username };
+}
+
+export type CreateBookingTargetParams = {
+  eventTypeSlug?: string;
+  organizationSlug?: string;
+  teamSlug?: string;
+  username?: string;
+};
+
+export function getCreateBookingParamsFromTarget(
+  target: BookerTarget,
+  resolved?: { eventTypeSlug?: string | null },
+): CreateBookingTargetParams {
   if (target.type === "user") {
-    return { eventTypeSlug: target.eventSlug, username: target.username };
+    return {
+      eventTypeSlug: target.eventSlug,
+      organizationSlug: getOrgSlugFromTarget(target),
+      username: target.username,
+    };
+  }
+
+  if (target.type === "team") {
+    return {
+      eventTypeSlug: target.eventSlug,
+      organizationSlug: getOrgSlugFromTarget(target),
+    };
   }
 
   if (target.type === "link") {
     const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);
     if (parsed.type === "user") {
-      return { eventTypeSlug: parsed.eventSlug, username: parsed.username };
+      return {
+        eventTypeSlug: parsed.eventSlug,
+        organizationSlug: parsed.orgSlug,
+        username: parsed.username,
+      };
+    }
+
+    if (parsed.type === "teamSlug") {
+      return {
+        eventTypeSlug: parsed.eventSlug,
+        organizationSlug: parsed.orgSlug,
+        teamSlug: parsed.teamSlug,
+      };
     }
   }
 
-  return null;
+  return {
+    eventTypeSlug: resolved?.eventTypeSlug ?? undefined,
+    organizationSlug: getOrgSlugFromTarget(target),
+  };
 }
 
 export function getPublicEventBannerParamsFromTarget(target: BookerTarget): {
diff --git a/apps/ui/registry/default/atoms/lib/booker/use-booker.ts b/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
index 7207f8601..b7786d322 100644
--- a/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
@@ -193,6 +193,7 @@ function deriveBookerData(
       eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,
       eventTypeLocations: eventType.eventTypeLocations,
       eventTypeTitle: eventType.eventTypeTitle,
+      disableGuests: eventType.disableGuests ?? false,
       hostAvatarUrl: host.hostAvatarUrl,
       hostAvatars,
       hostName:
@@ -345,15 +346,27 @@ type BookerTimePickerState = {
 
 export type BookerStep = "select" | "confirm";
 
+export type BookerConfirmFormContext = {
+  disableGuests?: boolean;
+  durationMinutes: number;
+  includeLengthInMinutes: boolean;
+  locale: string;
+  locations?: BookerMeta["eventTypeLocations"];
+  onBack: () => void;
+  selectedDate?: Date;
+  selectedTime: string | null;
+  target: BookerTarget;
+  timeZone: string;
+};
+
 export type UseBookerResult = {
   calendarProps: BookerCalendarState;
+  confirmFormProps: BookerConfirmFormContext;
   durationProps: BookerDurationState;
   error: BookerError | null;
   loadingState: BookerLoadingState;
   meta: BookerMeta | null;
-  onBack: () => void;
   retry: () => void;
-  selectedTime: string | null;
   step: BookerStep;
   timePickerProps: BookerTimePickerState;
   timezoneProps: BookerTimezoneState;
@@ -440,6 +453,12 @@ export function useBooker({
   const resolvedRef = useRef<ResolvedEventType>(
     hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },
   );
+  const [_eventTypeId, setEventTypeId] = useState<number | null>(
+    hydratedData?.resolved.eventTypeId ?? null,
+  );
+  const [_eventTypeSlug, setEventTypeSlug] = useState<string | null>(
+    hydratedData?.resolved.eventTypeSlug ?? null,
+  );
   const lastIdentityRef = useRef<string | null>(null);
   const lastTimeZoneRef = useRef<string | null>(null);
   const lastDurationRef = useRef<number | null>(null);
@@ -558,6 +577,8 @@ export function useBooker({
         }
 
         resolvedRef.current = result.resolved;
+        setEventTypeId(result.resolved.eventTypeId);
+        setEventTypeSlug(result.resolved.eventTypeSlug);
 
         for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {
           const month = new Date(
@@ -681,6 +702,8 @@ export function useBooker({
         inFlightMonthsRef.current.clear();
         availabilityRequestVersionRef.current += 1;
         resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };
+        setEventTypeId(null);
+        setEventTypeSlug(null);
         hasMultiDurationOptionsRef.current = false;
         slotsCacheRef.current = new Map();
         slotsByDateRef.current = {};
@@ -963,9 +986,9 @@ export function useBooker({
     setStep("confirm");
   };
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     setStep("select");
-  };
+  }, []);
 
   const initialLoading = !meta;
   const currentMonthCovered = coveredMonthsRef.current.has(
@@ -973,6 +996,32 @@ export function useBooker({
   );
   const availabilityLoading = isPending || !currentMonthCovered;
 
+  const confirmFormProps = useMemo((): BookerConfirmFormContext => {
+    return {
+      disableGuests: meta?.disableGuests,
+      durationMinutes: selectedDurationMinutes,
+      includeLengthInMinutes: (meta?.eventTypeDurationOptions?.length ?? 0) > 1,
+      locale,
+      locations: meta?.eventTypeLocations,
+      onBack: handleBack,
+      selectedDate,
+      selectedTime: _selectedTime,
+      target,
+      timeZone: selectedTimeZone,
+    };
+  }, [
+    _selectedTime,
+    locale,
+    meta?.disableGuests,
+    meta?.eventTypeDurationOptions,
+    meta?.eventTypeLocations,
+    selectedDate,
+    selectedDurationMinutes,
+    selectedTimeZone,
+    target,
+    handleBack,
+  ]);
+
   return {
     calendarProps: {
       availabilityLoading,
@@ -987,6 +1036,7 @@ export function useBooker({
       startMonth,
       today: todayStart,
     },
+    confirmFormProps,
     durationProps: {
       onValueChange: setSelectedDurationMinutes,
       value: selectedDurationMinutes,
@@ -998,9 +1048,7 @@ export function useBooker({
       initial: initialLoading,
     },
     meta,
-    onBack: handleBack,
     retry,
-    selectedTime: _selectedTime,
     step,
     timePickerProps: {
       availabilityLoading,
diff --git a/apps/ui/registry/default/atoms/lib/booker/utils.ts b/apps/ui/registry/default/atoms/lib/booker/utils.ts
index 518b6a47a..eb2664411 100644
--- a/apps/ui/registry/default/atoms/lib/booker/utils.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/utils.ts
@@ -19,6 +19,7 @@ export type BookerMeta = {
   eventTypeDurationOptions: number[] | null;
   eventTypeLocations: EventTypeLocationOption[];
   eventTypeImageUrl: string;
+  disableGuests: boolean;
   bookingWindowStart: Date | null;
   bookingWindowEnd: Date | null;
 };
@@ -30,6 +31,7 @@ export type EventTypeInfo = {
   eventTypeDurationOptions: number[] | null;
   eventTypeLocations: EventTypeLocationOption[];
   eventTypeImageUrl: string;
+  disableGuests?: boolean;
 };
 
 export function prettifyLocation(value: string): string {
@@ -423,6 +425,7 @@ export function extractEventTypeInfo(payload: unknown): EventTypeInfo {
       eventTypeDurationOptions: null,
       eventTypeLocations: [{ label: "Unknown", provider: "" }],
       eventTypeImageUrl: "",
+      disableGuests: false,
     };
   }
 
@@ -460,6 +463,7 @@ export function extractEventTypeInfo(payload: unknown): EventTypeInfo {
         record.coverImage ??
         record.coverImageUrl,
     ),
+    disableGuests: record.disableGuests === true,
   };
 }
 
@@ -675,6 +679,101 @@ export function formatSelectedMonth(date: Date, locale: string): string {
   }).format(date);
 }
 
+export function formatConfirmDateDetail(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).format(date);
+}
+
+function parseTimeLabel(
+  label: string,
+): { hours: number; minutes: number } | null {
+  const [hoursRaw, minutesRaw] = label.split(":");
+  const hours = Number(hoursRaw);
+  const minutes = Number(minutesRaw);
+  if (Number.isNaN(hours) || Number.isNaN(minutes)) {
+    return null;
+  }
+  return { hours, minutes };
+}
+
+function formatConfirmTimePart(
+  date: Date,
+  locale: string,
+  hour12: boolean,
+  includePeriod: boolean,
+): string {
+  if (!hour12) {
+    return new Intl.DateTimeFormat("en-GB", {
+      hour: "2-digit",
+      hour12: false,
+      minute: "2-digit",
+    }).format(date);
+  }
+
+  const parts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(date);
+
+  return parts
+    .filter(
+      (part) =>
+        part.type === "hour" ||
+        part.type === "minute" ||
+        (includePeriod && part.type === "dayPeriod") ||
+        (part.type === "literal" && part.value.trim() !== ""),
+    )
+    .map((part) =>
+      part.type === "dayPeriod" ? part.value.toLowerCase() : part.value,
+    )
+    .join("")
+    .trim();
+}
+
+export function formatConfirmTimeRange(
+  startTime: string,
+  durationMinutes: number,
+  hour12: boolean,
+  locale: string,
+): string {
+  const parsed = parseTimeLabel(startTime);
+  if (!parsed) {
+    return startTime;
+  }
+
+  const startDate = new Date();
+  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);
+
+  if (!hour12) {
+    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;
+  }
+
+  const startParts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(startDate);
+  const endParts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(endDate);
+  const startPeriod = startParts
+    .find((part) => part.type === "dayPeriod")
+    ?.value.toLowerCase();
+  const endPeriod = endParts
+    .find((part) => part.type === "dayPeriod")
+    ?.value.toLowerCase();
+  const samePeriod = startPeriod === endPeriod;
+
+  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;
+}
+
 export function toDateKey(date: Date, timeZone: string): string {
   return new Intl.DateTimeFormat("en-CA", {
     day: "2-digit",
@@ -693,6 +792,52 @@ export function toCalendarDateKey(date: Date): string {
   return `${year}-${month}-${day}`;
 }
 
+export function buildBookingStartIso(
+  dateKey: string,
+  selectedTime: string,
+  timeZone: string,
+): string {
+  const parsed = parseTimeLabel(selectedTime);
+  if (!parsed) {
+    throw new Error("Invalid time slot.");
+  }
+
+  const dateParts = dateKey.split("-");
+  const year = Number(dateParts[0]);
+  const month = Number(dateParts[1]);
+  const day = Number(dateParts[2]);
+  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {
+    throw new Error("Invalid booking date.");
+  }
+
+  const { hours, minutes } = parsed;
+  const utcGuess = Date.UTC(year, month - 1, day, hours, minutes, 0);
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    hour: "2-digit",
+    hour12: false,
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    timeZone,
+    year: "numeric",
+  });
+  const parts = formatter.formatToParts(new Date(utcGuess));
+  const get = (type: Intl.DateTimeFormatPartTypes) =>
+    Number(parts.find((part) => part.type === type)?.value);
+  const asUtc = Date.UTC(
+    get("year"),
+    get("month") - 1,
+    get("day"),
+    get("hour") % 24,
+    get("minute"),
+    get("second"),
+  );
+  const offset = asUtc - utcGuess;
+
+  return new Date(utcGuess - offset).toISOString();
+}
+
 export function getTodayInTimeZone(
   timeZone: string,
   now: Date = new Date(),
diff --git a/apps/ui/registry/default/lib/cal-api/bookings.ts b/apps/ui/registry/default/lib/cal-api/bookings.ts
new file mode 100644
index 000000000..2c29fec01
--- /dev/null
+++ b/apps/ui/registry/default/lib/cal-api/bookings.ts
@@ -0,0 +1,13 @@
+import "server-only";
+
+import { calApi } from "./client";
+import type { Booking, CreateBookingInput } from "./types";
+
+export async function createBooking(
+  input: CreateBookingInput,
+): Promise<Booking> {
+  return calApi<Booking>("/bookings", {
+    body: input,
+    method: "POST",
+  });
+}
diff --git a/apps/ui/registry/default/lib/cal-api/event-types.ts b/apps/ui/registry/default/lib/cal-api/event-types.ts
index e67354646..1f06e5308 100644
--- a/apps/ui/registry/default/lib/cal-api/event-types.ts
+++ b/apps/ui/registry/default/lib/cal-api/event-types.ts
@@ -5,6 +5,13 @@ import type { EventType } from "./types";
 
 const EVENT_TYPES_API_VERSION = "2024-06-14";
 
+function findEventTypeBySlug(
+  matches: EventType[],
+  eventSlug: string,
+): EventType | null {
+  return matches.find((event) => event.slug === eventSlug) ?? null;
+}
+
 export async function listEventTypes(params: {
   username?: string;
   usernames?: string[];
@@ -45,7 +52,7 @@ export async function getEventType(params: {
   orgSlug?: string;
 }): Promise<EventType | null> {
   const matches = await listEventTypes(params);
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getTeamEventType(params: {
@@ -59,7 +66,7 @@ export async function getTeamEventType(params: {
     orgId: params.orgId,
     teamId: params.teamId,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getTeamSlugEventType(params: {
@@ -75,7 +82,7 @@ export async function getTeamSlugEventType(params: {
     orgSlug: params.orgSlug,
     teamSlug: params.teamSlug,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getDynamicEventType(params: {
@@ -84,13 +91,14 @@ export async function getDynamicEventType(params: {
   orgSlug?: string;
   eventSlug?: string;
 }): Promise<EventType | null> {
+  const eventSlug = params.eventSlug ?? "dynamic";
   const matches = await listEventTypes({
-    eventSlug: params.eventSlug ?? "dynamic",
+    eventSlug,
     orgId: params.orgId,
     orgSlug: params.orgSlug,
     usernames: params.usernames,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, eventSlug);
 }
 
 export async function getEventTypeById(
diff --git a/apps/ui/registry/default/lib/cal-api/types.ts b/apps/ui/registry/default/lib/cal-api/types.ts
index c33f502e0..65970d9bb 100644
--- a/apps/ui/registry/default/lib/cal-api/types.ts
+++ b/apps/ui/registry/default/lib/cal-api/types.ts
@@ -124,13 +124,24 @@ export type Booking = {
   rescheduledFromUid?: string;
 };
 
+export type BookingLocationInput =
+  | { type: "integration"; integration: string }
+  | { type: "address" }
+  | { type: "link" }
+  | { type: "phone" }
+  | { type: "organizersDefaultApp" };
+
 export type CreateBookingInput = {
   start: string;
-  eventTypeId: number;
+  eventTypeId?: number;
+  eventTypeSlug?: string;
+  username?: string;
+  teamSlug?: string;
+  organizationSlug?: string;
   attendee: BookingAttendee;
   guests?: string[];
   bookingFieldsResponses?: Record<string, unknown>;
-  location?: string;
+  location?: BookingLocationInput | string;
   metadata?: Record<string, unknown>;
   lengthInMinutes?: number;
 };
diff --git a/apps/ui/registry/default/lib/segmented-control.ts b/apps/ui/registry/default/lib/segmented-control.ts
new file mode 100644
index 000000000..e70789c82
--- /dev/null
+++ b/apps/ui/registry/default/lib/segmented-control.ts
@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlRootClassName =
+  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
+
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
+export const segmentedControlItemVariants = cva(
+  [
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+    segmentedControlItemLayoutClassName,
+  ],
+  {
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: segmentedControlItemSizeClassNames,
+      state: {
+        checked:
+          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+        current:
+          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+        pressed:
+          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      },
+    },
+  },
+);
diff --git a/apps/ui/registry/default/particles/p-autocomplete-16.tsx b/apps/ui/registry/default/particles/p-autocomplete-16.tsx
new file mode 100644
index 000000000..479632ec4
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-autocomplete-16.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import { MapPinIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompleteStatus,
+} from "@/registry/default/ui/autocomplete";
+import { Spinner } from "@/registry/default/ui/spinner";
+
+// Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY with the Places API (New) enabled to fetch
+// live suggestions. Without a key, the demo falls back to sample addresses.
+const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "";
+
+type AddressSuggestion = {
+  placeId: string;
+  text: string;
+  mainText: string;
+  secondaryText: string;
+};
+
+const sampleAddresses: AddressSuggestion[] = [
+  {
+    mainText: "1600 Amphitheatre Parkway",
+    secondaryText: "Mountain View, CA 94043, USA",
+  },
+  {
+    mainText: "1600 Pennsylvania Avenue NW",
+    secondaryText: "Washington, DC 20500, USA",
+  },
+  { mainText: "350 Fifth Avenue", secondaryText: "New York, NY 10118, USA" },
+  {
+    mainText: "221B Baker Street",
+    secondaryText: "London NW1 6XE, United Kingdom",
+  },
+  {
+    mainText: "Champ de Mars, 5 Avenue Anatole France",
+    secondaryText: "75007 Paris, France",
+  },
+  {
+    mainText: "Piazza del Colosseo, 1",
+    secondaryText: "00184 Roma RM, Italy",
+  },
+  { mainText: "Platz der Republik 1", secondaryText: "11011 Berlin, Germany" },
+  {
+    mainText: "1 Macquarie Street",
+    secondaryText: "Sydney NSW 2000, Australia",
+  },
+].map((address, index) => ({
+  ...address,
+  placeId: `sample-${index + 1}`,
+  text: `${address.mainText}, ${address.secondaryText}`,
+}));
+
+// A short-lived session token groups Autocomplete + Place Details requests
+// for billing.
+function newSessionToken() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2);
+}
+
+type PlacesAutocompleteResponse = {
+  suggestions?: {
+    placePrediction?: {
+      placeId?: string;
+      text?: { text?: string };
+      structuredFormat?: {
+        mainText?: { text?: string };
+        secondaryText?: { text?: string };
+      };
+    };
+  }[];
+};
+
+async function fetchAddressSuggestions(
+  query: string,
+  sessionToken: string,
+  signal: AbortSignal,
+): Promise<AddressSuggestion[]> {
+  const response = await fetch(
+    "https://places.googleapis.com/v1/places:autocomplete",
+    {
+      body: JSON.stringify({ input: query, sessionToken }),
+      headers: {
+        "Content-Type": "application/json",
+        "X-Goog-Api-Key": GOOGLE_MAPS_API_KEY,
+      },
+      method: "POST",
+      signal,
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Places API request failed");
+  }
+  const data = (await response.json()) as PlacesAutocompleteResponse;
+  const suggestions: AddressSuggestion[] = [];
+  for (const suggestion of data.suggestions ?? []) {
+    const prediction = suggestion.placePrediction;
+    if (!prediction?.placeId) continue;
+    const text = prediction.text?.text ?? "";
+    suggestions.push({
+      mainText: prediction.structuredFormat?.mainText?.text ?? text,
+      placeId: prediction.placeId,
+      secondaryText: prediction.structuredFormat?.secondaryText?.text ?? "",
+      text,
+    });
+  }
+  return suggestions;
+}
+
+async function searchSampleAddresses(
+  query: string,
+): Promise<AddressSuggestion[]> {
+  await new Promise((resolve) =>
+    setTimeout(resolve, Math.random() * 500 + 100),
+  );
+  const lowerQuery = query.toLowerCase();
+  return sampleAddresses.filter((address) =>
+    address.text.toLowerCase().includes(lowerQuery),
+  );
+}
+
+export default function Particle() {
+  const [searchValue, setSearchValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const sessionTokenRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const query = searchValue.trim();
+    if (!query) {
+      setSuggestions([]);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    let ignore = false;
+    const controller = new AbortController();
+
+    const timeoutId = setTimeout(async () => {
+      try {
+        sessionTokenRef.current ??= newSessionToken();
+        const results = GOOGLE_MAPS_API_KEY
+          ? await fetchAddressSuggestions(
+              query,
+              sessionTokenRef.current,
+              controller.signal,
+            )
+          : await searchSampleAddresses(query);
+        if (!ignore) setSuggestions(results);
+      } catch {
+        if (!ignore && !controller.signal.aborted) {
+          setError("Could not load address suggestions. Please try again.");
+          setSuggestions([]);
+        }
+      } finally {
+        if (!ignore) setIsLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      ignore = true;
+      controller.abort();
+      clearTimeout(timeoutId);
+    };
+  }, [searchValue]);
+
+  let status: ReactNode = `${suggestions.length} suggestion${suggestions.length === 1 ? "" : "s"} found`;
+  if (isLoading) {
+    status = (
+      <span className="flex items-center justify-between gap-2 text-muted-foreground">
+        Searching addresses...
+        <Spinner className="size-4.5 sm:size-4" />
+      </span>
+    );
+  } else if (error) {
+    status = (
+      <span className="font-normal text-destructive text-sm">{error}</span>
+    );
+  } else if (suggestions.length === 0 && searchValue) {
+    status = (
+      <span className="font-normal text-muted-foreground text-sm">
+        No addresses found for "{searchValue}"
+      </span>
+    );
+  }
+
+  const shouldRenderPopup = searchValue.trim() !== "";
+
+  return (
+    <Autocomplete
+      autoHighlight
+      filter={null}
+      items={suggestions}
+      itemToStringValue={(item: unknown) => (item as AddressSuggestion).text}
+      onValueChange={(value, eventDetails) => {
+        setSearchValue(value);
+        if (eventDetails.reason === "item-press") {
+          // Selecting a suggestion ends the billing session. In a real app,
+          // fetch the place details with the same token before resetting it.
+          sessionTokenRef.current = null;
+        }
+      }}
+      value={searchValue}
+    >
+      <AutocompleteInput
+        aria-label="Address"
+        autoComplete="off"
+        className="min-w-0 *:[input]:truncate"
+        placeholder="Enter an address"
+        startAddon={<MapPinIcon />}
+      />
+      {shouldRenderPopup && (
+        <AutocompletePopup
+          aria-busy={isLoading || undefined}
+          className="max-w-(--anchor-width) *:min-w-0"
+        >
+          <AutocompleteStatus className="text-muted-foreground">
+            {status}
+          </AutocompleteStatus>
+          <AutocompleteList>
+            {(suggestion: AddressSuggestion) => (
+              <AutocompleteItem key={suggestion.placeId} value={suggestion}>
+                <span className="flex w-full min-w-0 flex-col">
+                  <span className="truncate font-medium">
+                    {suggestion.mainText}
+                  </span>
+                  <span className="truncate text-muted-foreground text-xs">
+                    {suggestion.secondaryText}
+                  </span>
+                </span>
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompletePopup>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-badge-19.tsx b/apps/ui/registry/default/particles/p-badge-19.tsx
index 6ba64860f..39d2a1d76 100644
--- a/apps/ui/registry/default/particles/p-badge-19.tsx
+++ b/apps/ui/registry/default/particles/p-badge-19.tsx
@@ -8,15 +8,11 @@ import { Checkbox } from "@/registry/default/ui/checkbox";
 export default function Particle() {
   const id = useId();
   return (
-    <Badge className="relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
-      <Checkbox
-        className="peer sr-only after:absolute after:inset-0"
-        defaultChecked
-        id={id}
-      />
+    <Badge className="relative outline-none has-focus-visible:border-ring has-data-unchecked:bg-muted has-data-unchecked:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
+      <Checkbox className="peer hidden" defaultChecked id={id} />
       <CheckIcon
         aria-hidden="true"
-        className="hidden peer-data-[state=checked]:block"
+        className="hidden peer-data-checked:block"
       />
       <label
         className="cursor-pointer select-none after:absolute after:inset-0"
diff --git a/apps/ui/registry/default/particles/p-calendar-10.tsx b/apps/ui/registry/default/particles/p-calendar-10.tsx
index 3759f1887..0d34879e6 100644
--- a/apps/ui/registry/default/particles/p-calendar-10.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-10.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-12.tsx b/apps/ui/registry/default/particles/p-calendar-12.tsx
index cbf4dcbf8..c8933b9a3 100644
--- a/apps/ui/registry/default/particles/p-calendar-12.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-12.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { WeekNumberProps } from "@daypicker/react";
 import { useState } from "react";
-import type { WeekNumberProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-13.tsx b/apps/ui/registry/default/particles/p-calendar-13.tsx
index c7fdb9d66..22acf5a34 100644
--- a/apps/ui/registry/default/particles/p-calendar-13.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-13.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Combobox,
diff --git a/apps/ui/registry/default/particles/p-calendar-14.tsx b/apps/ui/registry/default/particles/p-calendar-14.tsx
index 6952b8288..e5519854c 100644
--- a/apps/ui/registry/default/particles/p-calendar-14.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-14.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DropdownNavProps, DropdownProps } from "@daypicker/react";
 import { useState } from "react";
-import type { DropdownNavProps, DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Select,
diff --git a/apps/ui/registry/default/particles/p-calendar-19.tsx b/apps/ui/registry/default/particles/p-calendar-19.tsx
index d37034da4..7b19435a8 100644
--- a/apps/ui/registry/default/particles/p-calendar-19.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-19.tsx
@@ -49,7 +49,12 @@ export default function Particle() {
       />
       <div className="relative w-full max-sm:h-48 sm:w-40">
         <div className="absolute inset-0 max-sm:border-t">
-          <ScrollArea className="h-full sm:border-s" scrollbarGutter scrollFade>
+          <ScrollArea
+            className="h-full sm:border-s"
+            overscrollContain
+            scrollbarGutter
+            scrollFade
+          >
             <div className="flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2">
               <div className="flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5">
                 {format(date, "EEEE, d")}
diff --git a/apps/ui/registry/default/particles/p-calendar-21.tsx b/apps/ui/registry/default/particles/p-calendar-21.tsx
index e721adb63..cfc803210 100644
--- a/apps/ui/registry/default/particles/p-calendar-21.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-21.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import {
   endOfMonth,
   endOfYear,
@@ -10,7 +11,6 @@ import {
   subYears,
 } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 
diff --git a/apps/ui/registry/default/particles/p-calendar-22.tsx b/apps/ui/registry/default/particles/p-calendar-22.tsx
index 5126e3e69..b097fec34 100644
--- a/apps/ui/registry/default/particles/p-calendar-22.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-22.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-23.tsx b/apps/ui/registry/default/particles/p-calendar-23.tsx
index aaed5d606..ea2c35db2 100644
--- a/apps/ui/registry/default/particles/p-calendar-23.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-23.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-24.tsx b/apps/ui/registry/default/particles/p-calendar-24.tsx
index cd0dd5b5c..a568347c9 100644
--- a/apps/ui/registry/default/particles/p-calendar-24.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-24.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DayButtonProps } from "@daypicker/react";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
-import type { DayButtonProps } from "react-day-picker";
 import { cn } from "@/registry/default/lib/utils";
 import { Calendar } from "@/registry/default/ui/calendar";
 
diff --git a/apps/ui/registry/default/particles/p-calendar-25.tsx b/apps/ui/registry/default/particles/p-calendar-25.tsx
new file mode 100644
index 000000000..c19f76ee6
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-calendar-25.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { format } from "date-fns";
+import { ClockIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+} from "@/registry/default/ui/autocomplete";
+import { Calendar } from "@/registry/default/ui/calendar";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
+
+const times = Array.from({ length: 96 }, (_, i) => {
+  const hours = String(Math.floor(i / 4)).padStart(2, "0");
+  const minutes = String((i % 4) * 15).padStart(2, "0");
+  return `${hours}:${minutes}`;
+});
+
+function parseTime(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const colonMatch = /^(\d{1,2}):(\d{1,2})$/.exec(trimmed);
+  if (colonMatch) {
+    const hours = Number(colonMatch[1]);
+    const minutes = Number(colonMatch[2]);
+    if (hours > 23 || minutes > 59) {
+      return null;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  }
+
+  const digits = trimmed.replace(/\D/g, "");
+  if (digits.length === 0 || digits.length > 4) {
+    return null;
+  }
+
+  let hours: number;
+  let minutes: number;
+
+  if (digits.length <= 2) {
+    hours = Number(digits);
+    minutes = 0;
+  } else if (digits.length === 3) {
+    // HMM → H:MM (215 → 02:15)
+    hours = Number(digits[0]);
+    minutes = Number(digits.slice(1));
+  } else {
+    // HHMM → HH:MM (2150 → 21:50)
+    hours = Number(digits.slice(0, 2));
+    minutes = Number(digits.slice(2));
+  }
+
+  if (hours > 23 || minutes > 59) {
+    return null;
+  }
+
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+/**
+ * Live input formatting from a digit buffer:
+ * - ≤2 digits: as-is
+ * - 3 digits: H:MM (unpadded hour so a 4th digit can still become HHMM)
+ * - 4 digits: HH:mm
+ */
+function formatTimeInput(value: string) {
+  const digits = value.replace(/\D/g, "").slice(0, 4);
+
+  if (digits.length <= 2) {
+    return digits;
+  }
+
+  if (digits.length === 3) {
+    const minutes = Number(digits.slice(1));
+    if (minutes <= 59) {
+      return `${digits[0]}:${digits.slice(1)}`;
+    }
+    return digits;
+  }
+
+  return parseTime(digits) ?? digits;
+}
+
+function filterTime(item: string, query: string) {
+  const trimmed = query.trim().toLowerCase();
+  if (!trimmed) {
+    return true;
+  }
+
+  if (item.toLowerCase().startsWith(trimmed)) {
+    return true;
+  }
+
+  const itemDigits = item.replace(/\D/g, "");
+  const queryDigits = trimmed.replace(/\D/g, "");
+  if (!queryDigits) {
+    return false;
+  }
+
+  const itemHour = Number(itemDigits.slice(0, 2));
+  const itemMinutes = itemDigits.slice(2);
+  // Padded "0615" and unpadded "615" so "61" matches 06:15 while typing toward 615
+  const itemDigitsUnpadded = `${itemHour}${itemMinutes}`;
+
+  if (
+    itemDigits.startsWith(queryDigits) ||
+    itemDigitsUnpadded.startsWith(queryDigits)
+  ) {
+    return true;
+  }
+
+  if (queryDigits.length >= 3) {
+    const normalized = parseTime(queryDigits);
+    return normalized === item;
+  }
+
+  const queryHour = Number(queryDigits);
+
+  if (trimmed.includes(":")) {
+    const minuteQuery = trimmed.split(":")[1]?.replace(/\D/g, "") ?? "";
+    return (
+      itemHour === queryHour &&
+      (!minuteQuery || itemMinutes.startsWith(minuteQuery))
+    );
+  }
+
+  if (queryDigits.length === 1) {
+    return itemHour === queryHour || String(itemHour).startsWith(queryDigits);
+  }
+
+  return queryHour <= 23 && itemHour === queryHour;
+}
+
+function applyTime(date: Date, time: string) {
+  const parsed = parseTime(time);
+  if (!parsed) {
+    return date;
+  }
+  const hours = Number(parsed.slice(0, 2));
+  const minutes = Number(parsed.slice(3, 5));
+  const next = new Date(date);
+  next.setHours(hours, minutes, 0, 0);
+  return next;
+}
+
+export default function Particle() {
+  const [date, setDate] = useState<Date | undefined>(() => {
+    const initial = new Date();
+    initial.setHours(12, 0, 0, 0);
+    return initial;
+  });
+  const [month, setMonth] = useState<Date>(() => new Date());
+  const [time, setTime] = useState("12:00");
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleDaySelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) {
+      setDate(undefined);
+      return;
+    }
+    const next = applyTime(selectedDate, time);
+    setDate(next);
+    setMonth(next);
+  };
+
+  const handleTimeChange = (value: string) => {
+    setIsEditing(true);
+    const next = formatTimeInput(value);
+    setTime(next);
+
+    // List picks and completed HH:mm only — avoid committing mid-typing ("2:1" → 02:01)
+    if (date && /^\d{2}:\d{2}$/.test(next)) {
+      setDate(applyTime(date, next));
+    }
+  };
+
+  const handleTimeBlur = () => {
+    const normalized = parseTime(time);
+    if (normalized) {
+      setTime(normalized);
+      if (date) {
+        setDate(applyTime(date, normalized));
+      }
+    } else if (date) {
+      setTime(format(date, "HH:mm"));
+    }
+    setIsEditing(false);
+  };
+
+  const filterQuery = isEditing ? time : "";
+  const matchingTimes = times.filter((item) => filterTime(item, filterQuery));
+
+  return (
+    <div className="flex w-fit flex-col gap-2">
+      <Calendar
+        mode="single"
+        month={month}
+        onMonthChange={setMonth}
+        onSelect={handleDaySelect}
+        selected={date}
+      />
+      <Field className="w-0 min-w-full flex-row items-center gap-3">
+        <FieldLabel className="whitespace-nowrap text-xs">
+          Enter time
+        </FieldLabel>
+        <Autocomplete
+          autoHighlight
+          filter={(item, query) => filterTime(item, isEditing ? query : "")}
+          items={times}
+          onValueChange={handleTimeChange}
+          openOnInputClick
+          value={time}
+        >
+          <AutocompleteInput
+            aria-label="Enter time"
+            inputMode="numeric"
+            maxLength={5}
+            onBlur={handleTimeBlur}
+            onFocus={(event) => {
+              setIsEditing(false);
+              event.currentTarget.select();
+            }}
+            placeholder="HH:mm"
+            startAddon={<ClockIcon aria-hidden="true" />}
+          />
+          <AutocompletePopup
+            className={matchingTimes.length === 0 ? "hidden" : undefined}
+          >
+            <AutocompleteList>
+              {(item: string) => (
+                <AutocompleteItem key={item} value={item}>
+                  {item}
+                </AutocompleteItem>
+              )}
+            </AutocompleteList>
+          </AutocompletePopup>
+        </Autocomplete>
+      </Field>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-calendar-3.tsx b/apps/ui/registry/default/particles/p-calendar-3.tsx
index d7a048f2c..3e01dbd8a 100644
--- a/apps/ui/registry/default/particles/p-calendar-3.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-3.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import * as React from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-5.tsx b/apps/ui/registry/default/particles/p-calendar-5.tsx
index ab9a50118..f74602800 100644
--- a/apps/ui/registry/default/particles/p-calendar-5.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-5.tsx
@@ -1,6 +1,6 @@
 "use client";
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Select,
diff --git a/apps/ui/registry/default/particles/p-calendar-6.tsx b/apps/ui/registry/default/particles/p-calendar-6.tsx
index cb484d34c..c9baf8352 100644
--- a/apps/ui/registry/default/particles/p-calendar-6.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-6.tsx
@@ -1,6 +1,6 @@
 "use client";
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Combobox,
diff --git a/apps/ui/registry/default/particles/p-combobox-19.tsx b/apps/ui/registry/default/particles/p-combobox-19.tsx
new file mode 100644
index 000000000..ed6241cbb
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-combobox-19.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+} from "@/registry/default/ui/combobox";
+
+type TeamMember = {
+  avatar: string;
+  initials: string;
+  label: string;
+  priority: "Lowest" | "Low" | "Medium" | "High" | "Highest";
+  value: string;
+  weight: number;
+};
+
+const teamMembers: TeamMember[] = [
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80",
+    initials: "JH",
+    label: "Jenny Hamilton",
+    priority: "Highest",
+    value: "jenny",
+    weight: 200,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80",
+    initials: "PS",
+    label: "Paul Smith",
+    priority: "Medium",
+    value: "paul",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80",
+    initials: "LW",
+    label: "Luna Wyen",
+    priority: "High",
+    value: "luna",
+    weight: 150,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80",
+    initials: "AC",
+    label: "Alex Chen",
+    priority: "Low",
+    value: "alex",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80",
+    initials: "SJ",
+    label: "Sarah Johnson",
+    priority: "Medium",
+    value: "sarah",
+    weight: 50,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80",
+    initials: "ED",
+    label: "Emma Davis",
+    priority: "Lowest",
+    value: "emma",
+    weight: 100,
+  },
+];
+
+export default function Particle() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<TeamMember[]>(
+    teamMembers.slice(0, 2),
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Combobox
+        autoHighlight
+        items={teamMembers}
+        multiple
+        onOpenChange={setOpen}
+        onValueChange={(value) => {
+          setSelected(value);
+          setOpen(false);
+        }}
+        open={open}
+        value={selected}
+      >
+        <ComboboxInput
+          aria-label="Add team members"
+          placeholder="Add team members…"
+          startAddon={<SearchIcon />}
+        />
+        <ComboboxPopup>
+          <ComboboxEmpty>No team members found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item: TeamMember) => (
+              <ComboboxItem key={item.value} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </Combobox>
+      {selected.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {selected.map((member) => (
+            <li
+              className="flex items-center gap-2 rounded-lg border border-input p-1 ps-2 text-base sm:text-sm"
+              key={member.value}
+            >
+              <Avatar className="size-5">
+                <AvatarImage alt={member.label} src={member.avatar} />
+                <AvatarFallback className="text-[.625rem]">
+                  {member.initials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate font-medium">{member.label}</span>
+              <Badge className="ms-auto" variant="outline">
+                {member.priority}
+              </Badge>
+              <span className="text-muted-foreground tabular-nums">
+                {member.weight}%
+              </span>
+              <Button
+                aria-label={`Remove ${member.label}`}
+                onClick={() =>
+                  setSelected((current) =>
+                    current.filter((item) => item.value !== member.value),
+                  )
+                }
+                size="icon-xs"
+                variant="ghost"
+              >
+                <XIcon />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-combobox-20.tsx b/apps/ui/registry/default/particles/p-combobox-20.tsx
new file mode 100644
index 000000000..04670f1f8
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-combobox-20.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+} from "@/registry/default/ui/combobox";
+
+type TeamMember = {
+  avatar: string;
+  initials: string;
+  label: string;
+  priority: "Lowest" | "Low" | "Medium" | "High" | "Highest";
+  value: string;
+  weight: number;
+};
+
+const teamMembers: TeamMember[] = [
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80",
+    initials: "JH",
+    label: "Jenny Hamilton",
+    priority: "Highest",
+    value: "jenny",
+    weight: 200,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80",
+    initials: "PS",
+    label: "Paul Smith",
+    priority: "Medium",
+    value: "paul",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80",
+    initials: "LW",
+    label: "Luna Wyen",
+    priority: "High",
+    value: "luna",
+    weight: 150,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80",
+    initials: "AC",
+    label: "Alex Chen",
+    priority: "Low",
+    value: "alex",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80",
+    initials: "SJ",
+    label: "Sarah Johnson",
+    priority: "Medium",
+    value: "sarah",
+    weight: 50,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80",
+    initials: "ED",
+    label: "Emma Davis",
+    priority: "Lowest",
+    value: "emma",
+    weight: 100,
+  },
+];
+
+export default function Particle() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<TeamMember[]>(
+    teamMembers.slice(0, 2),
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Combobox
+        autoHighlight
+        items={teamMembers}
+        multiple
+        onOpenChange={setOpen}
+        onValueChange={(value) => {
+          setSelected(value);
+          setOpen(false);
+        }}
+        open={open}
+        value={selected}
+      >
+        <ComboboxInput
+          aria-label="Add team members"
+          placeholder="Add team members…"
+          startAddon={<SearchIcon />}
+        />
+        <ComboboxPopup>
+          <ComboboxEmpty>No team members found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item: TeamMember) => (
+              <ComboboxItem key={item.value} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </Combobox>
+      {selected.length > 0 && (
+        <ul className="divide-y rounded-lg border">
+          {selected.map((member) => (
+            <li
+              className="flex items-center gap-2 p-1 ps-2 text-base sm:text-sm"
+              key={member.value}
+            >
+              <Avatar className="size-5">
+                <AvatarImage alt={member.label} src={member.avatar} />
+                <AvatarFallback className="text-[.625rem]">
+                  {member.initials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate font-medium">{member.label}</span>
+              <Badge className="ms-auto" size="sm" variant="outline">
+                {member.priority}
+              </Badge>
+              <span className="text-muted-foreground text-xs tabular-nums">
+                {member.weight}%
+              </span>
+              <Button
+                aria-label={`Remove ${member.label}`}
+                onClick={() =>
+                  setSelected((current) =>
+                    current.filter((item) => item.value !== member.value),
+                  )
+                }
+                size="icon-xs"
+                variant="ghost"
+              >
+                <XIcon />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-command-2.tsx b/apps/ui/registry/default/particles/p-command-2.tsx
index 834ce46b4..e7f05cfe5 100644
--- a/apps/ui/registry/default/particles/p-command-2.tsx
+++ b/apps/ui/registry/default/particles/p-command-2.tsx
@@ -511,7 +511,7 @@ export default function PCommand2() {
                 </Button>
               </div>
               <CommandPanel>
-                <ScrollArea scrollbarGutter scrollFade>
+                <ScrollArea overscrollContain scrollbarGutter scrollFade>
                   <div className="p-5">
                     {!aiState.isGenerating &&
                       !aiState.response &&
diff --git a/apps/ui/registry/default/particles/p-date-picker-2.tsx b/apps/ui/registry/default/particles/p-date-picker-2.tsx
index 59c94344e..fe432351f 100644
--- a/apps/ui/registry/default/particles/p-date-picker-2.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-2.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/particles/p-date-picker-3.tsx b/apps/ui/registry/default/particles/p-date-picker-3.tsx
index 9acca1be2..ce381b43e 100644
--- a/apps/ui/registry/default/particles/p-date-picker-3.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-3.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DropdownProps } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/particles/p-date-picker-9.tsx b/apps/ui/registry/default/particles/p-date-picker-9.tsx
index 5b6d86206..e1872ef1f 100644
--- a/apps/ui/registry/default/particles/p-date-picker-9.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-9.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/particles/p-navigation-1.tsx b/apps/ui/registry/default/particles/p-navigation-1.tsx
new file mode 100644
index 000000000..c5c23baa8
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-1.tsx
@@ -0,0 +1,24 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({ state: "current" });
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-navigation-2.tsx b/apps/ui/registry/default/particles/p-navigation-2.tsx
new file mode 100644
index 000000000..ccce03d86
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-2.tsx
@@ -0,0 +1,27 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({
+  size: "sm",
+  state: "current",
+});
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-navigation-3.tsx b/apps/ui/registry/default/particles/p-navigation-3.tsx
new file mode 100644
index 000000000..53dd2ce37
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-3.tsx
@@ -0,0 +1,27 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({
+  size: "lg",
+  state: "current",
+});
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-popover-4.tsx b/apps/ui/registry/default/particles/p-popover-4.tsx
new file mode 100644
index 000000000..66a9edf01
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-popover-4.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import { Group, GroupSeparator } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+
+const occurrences = [
+  { date: "Wed, Jul 15", id: "occurrence-1", time: "9:00 – 9:30am" },
+  { date: "Wed, Jul 15", id: "occurrence-2", time: "10:00 – 10:30am" },
+  { date: "Wed, Jul 15", id: "occurrence-3", time: "11:00 – 11:30am" },
+];
+
+export default function Particle() {
+  const [selected, setSelected] = useState(
+    occurrences.map((occurrence) => occurrence.id),
+  );
+
+  return (
+    <div className="flex gap-2">
+      <Button size="xs" variant="outline">
+        Reject
+      </Button>
+      <Group aria-label="Confirm booking">
+        <Button size="xs">Confirm all</Button>
+        <GroupSeparator className="bg-primary/72" />
+        <Popover>
+          <PopoverTrigger
+            render={
+              <Button
+                aria-label="Choose occurrences to confirm"
+                size="icon-xs"
+              />
+            }
+          >
+            <ChevronDownIcon aria-hidden="true" />
+          </PopoverTrigger>
+          <PopoverPopup align="end" className="w-84">
+            <div className="mb-3">
+              <PopoverTitle className="text-sm">
+                Confirm occurrences
+              </PopoverTitle>
+              <PopoverDescription className="text-xs">
+                {occurrences.length} pending for this booking
+              </PopoverDescription>
+            </div>
+            <CheckboxGroup
+              aria-label="Occurrences to confirm"
+              className="gap-0 self-stretch"
+              onValueChange={setSelected}
+              value={selected}
+            >
+              {occurrences.map((occurrence) => (
+                <Label className="flex w-full gap-2 py-1.5" key={occurrence.id}>
+                  <Checkbox value={occurrence.id} />
+                  <span className="tabular-nums">{occurrence.time}</span>
+                  <span className="ms-auto font-normal text-muted-foreground">
+                    {occurrence.date}
+                  </span>
+                </Label>
+              ))}
+            </CheckboxGroup>
+            <div className="mt-3 flex justify-end gap-2">
+              <PopoverClose
+                disabled={selected.length === 0}
+                render={<Button size="xs" variant="ghost" />}
+              >
+                Reject selected
+              </PopoverClose>
+              <PopoverClose
+                disabled={selected.length === 0}
+                render={<Button size="xs" />}
+              >
+                Confirm selected
+                <Badge className="-me-1 text-primary-foreground/60">
+                  {selected.length}
+                </Badge>
+              </PopoverClose>
+            </div>
+          </PopoverPopup>
+        </Popover>
+      </Group>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-7.tsx b/apps/ui/registry/default/particles/p-radio-group-7.tsx
new file mode 100644
index 000000000..1e31a259c
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-7.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  size: "sm",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-8.tsx b/apps/ui/registry/default/particles/p-radio-group-8.tsx
new file mode 100644
index 000000000..40683b050
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-8.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-9.tsx b/apps/ui/registry/default/particles/p-radio-group-9.tsx
new file mode 100644
index 000000000..8c8ddab39
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-9.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  size: "lg",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-7.tsx b/apps/ui/registry/default/particles/p-switch-7.tsx
new file mode 100644
index 000000000..9e13362ea
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-7.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { SelectButton } from "@/registry/default/ui/select";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={<SelectButton className="w-27 tabular-nums" size="sm" />}
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <TimeCombobox
+                          ariaLabel={`${day} start time`}
+                          items={timeOptions}
+                          onChange={(start) =>
+                            updateStart(day, range.id, start)
+                          }
+                          value={range.start}
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="text-muted-foreground"
+                        >
+                          –
+                        </span>
+                        <TimeCombobox
+                          ariaLabel={`${day} end time`}
+                          items={timeOptions.slice(timeIndex(range.start) + 1)}
+                          onChange={(end) => updateEnd(day, range.id, end)}
+                          value={range.end}
+                        />
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-8.tsx b/apps/ui/registry/default/particles/p-switch-8.tsx
new file mode 100644
index 000000000..90f64aa62
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-8.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+import {
+  ArrowRightIcon,
+  CopyIcon,
+  PlusIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <Group aria-label={`${day} time range`}>
+                          <TimeCombobox
+                            ariaLabel={`${day} start time`}
+                            items={timeOptions}
+                            onChange={(start) =>
+                              updateStart(day, range.id, start)
+                            }
+                            value={range.start}
+                          />
+                          <GroupSeparator />
+                          <GroupText aria-hidden="true" className="px-2">
+                            <ArrowRightIcon className="size-3.5" />
+                          </GroupText>
+                          <GroupSeparator />
+                          <TimeCombobox
+                            ariaLabel={`${day} end time`}
+                            items={timeOptions.slice(
+                              timeIndex(range.start) + 1,
+                            )}
+                            onChange={(end) => updateEnd(day, range.id, end)}
+                            value={range.end}
+                          />
+                        </Group>
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-9.tsx b/apps/ui/registry/default/particles/p-switch-9.tsx
new file mode 100644
index 000000000..08c8ba745
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-9.tsx
@@ -0,0 +1,406 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  id,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  id: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            id={id}
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const id = useId();
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => {
+                      const startId = `${id}-start-${range.id}`;
+                      const endId = `${id}-end-${range.id}`;
+
+                      return (
+                        <div className="flex items-center gap-2" key={range.id}>
+                          <Group aria-label={`${day} time range`}>
+                            <GroupText render={<Label htmlFor={startId} />}>
+                              From
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} start time`}
+                              id={startId}
+                              items={timeOptions}
+                              onChange={(start) =>
+                                updateStart(day, range.id, start)
+                              }
+                              value={range.start}
+                            />
+                            <GroupSeparator />
+                            <GroupText render={<Label htmlFor={endId} />}>
+                              To
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} end time`}
+                              id={endId}
+                              items={timeOptions.slice(
+                                timeIndex(range.start) + 1,
+                              )}
+                              onChange={(end) => updateEnd(day, range.id, end)}
+                              value={range.end}
+                            />
+                          </Group>
+                          <Tooltip disableHoverablePopup>
+                            <TooltipTrigger
+                              render={
+                                <Button
+                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                  onClick={() => removeRange(day, range.id)}
+                                  size="icon-sm"
+                                  variant="ghost"
+                                />
+                              }
+                            >
+                              <XIcon aria-hidden="true" />
+                            </TooltipTrigger>
+                            <TooltipPopup>Delete range</TooltipPopup>
+                          </Tooltip>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-table-3.tsx b/apps/ui/registry/default/particles/p-table-3.tsx
index 07f1e0c00..9dc86f5a1 100644
--- a/apps/ui/registry/default/particles/p-table-3.tsx
+++ b/apps/ui/registry/default/particles/p-table-3.tsx
@@ -2,12 +2,12 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Frame } from "@/registry/default/ui/frame";
@@ -89,42 +89,30 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
-    enableSorting: false,
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -173,27 +161,20 @@ const getColumns = (): ColumnDef<Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useReactTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-4.tsx b/apps/ui/registry/default/particles/p-table-4.tsx
index 7f09c9dd8..74a486e62 100644
--- a/apps/ui/registry/default/particles/p-table-4.tsx
+++ b/apps/ui/registry/default/particles/p-table-4.tsx
@@ -2,16 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -67,7 +71,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -186,32 +204,31 @@ const columns: ColumnDef<Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
-    },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <Frame className="w-full">
@@ -302,9 +319,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +330,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +341,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/apps/ui/registry/default/particles/p-table-6.tsx b/apps/ui/registry/default/particles/p-table-6.tsx
index de2fcdc61..366f7642a 100644
--- a/apps/ui/registry/default/particles/p-table-6.tsx
+++ b/apps/ui/registry/default/particles/p-table-6.tsx
@@ -2,12 +2,12 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { CardFrame } from "@/registry/default/ui/card";
 import { Checkbox } from "@/registry/default/ui/checkbox";
@@ -89,42 +89,30 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
-    enableSorting: false,
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -173,27 +161,20 @@ const getColumns = (): ColumnDef<Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useReactTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-8.tsx b/apps/ui/registry/default/particles/p-table-8.tsx
index d8e5d2990..3f48a78db 100644
--- a/apps/ui/registry/default/particles/p-table-8.tsx
+++ b/apps/ui/registry/default/particles/p-table-8.tsx
@@ -2,16 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -67,7 +71,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -186,32 +204,31 @@ const columns: ColumnDef<Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
-    },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <CardFrame className="w-full">
@@ -302,9 +319,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +330,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +341,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/apps/ui/registry/default/particles/p-tabs-14.tsx b/apps/ui/registry/default/particles/p-tabs-14.tsx
new file mode 100644
index 000000000..16895371e
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-tabs-14.tsx
@@ -0,0 +1,28 @@
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs";
+
+export default function Particle() {
+  return (
+    <Tabs defaultValue="tab-1">
+      <TabsList size="sm">
+        <TabsTab value="tab-1">Tab 1</TabsTab>
+        <TabsTab value="tab-2">Tab 2</TabsTab>
+        <TabsTab value="tab-3">Tab 3</TabsTab>
+      </TabsList>
+      <TabsPanel value="tab-1">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 1 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-2">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 2 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-3">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 3 content
+        </p>
+      </TabsPanel>
+    </Tabs>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-tabs-15.tsx b/apps/ui/registry/default/particles/p-tabs-15.tsx
new file mode 100644
index 000000000..092228198
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-tabs-15.tsx
@@ -0,0 +1,28 @@
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs";
+
+export default function Particle() {
+  return (
+    <Tabs defaultValue="tab-1">
+      <TabsList size="lg">
+        <TabsTab value="tab-1">Tab 1</TabsTab>
+        <TabsTab value="tab-2">Tab 2</TabsTab>
+        <TabsTab value="tab-3">Tab 3</TabsTab>
+      </TabsList>
+      <TabsPanel value="tab-1">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 1 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-2">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 2 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-3">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 3 content
+        </p>
+      </TabsPanel>
+    </Tabs>
+  );
+}
diff --git a/apps/ui/registry/default/ui/autocomplete.tsx b/apps/ui/registry/default/ui/autocomplete.tsx
index 8635fead4..0f0c4f337 100644
--- a/apps/ui/registry/default/ui/autocomplete.tsx
+++ b/apps/ui/registry/default/ui/autocomplete.tsx
@@ -223,20 +223,15 @@ export function AutocompleteRow({
   );
 }
 
-export function AutocompleteValue({
-  ...props
-}: AutocompletePrimitive.Value.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
-  );
-}
+export const AutocompleteValue: typeof AutocompletePrimitive.Value =
+  AutocompletePrimitive.Value;
 
 export function AutocompleteList({
   className,
   ...props
 }: AutocompletePrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <AutocompletePrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
@@ -283,16 +278,8 @@ export function AutocompleteStatus({
   );
 }
 
-export function AutocompleteCollection({
-  ...props
-}: AutocompletePrimitive.Collection.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Collection
-      data-slot="autocomplete-collection"
-      {...props}
-    />
-  );
-}
+export const AutocompleteCollection: typeof AutocompletePrimitive.Collection =
+  AutocompletePrimitive.Collection;
 
 export function AutocompleteTrigger({
   className,
diff --git a/apps/ui/registry/default/ui/avatar.tsx b/apps/ui/registry/default/ui/avatar.tsx
index 6aaa0b80d..1e9c551e0 100644
--- a/apps/ui/registry/default/ui/avatar.tsx
+++ b/apps/ui/registry/default/ui/avatar.tsx
@@ -11,7 +11,7 @@ export function Avatar({
   return (
     <AvatarPrimitive.Root
       className={cn(
-        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
+        "relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
         className,
       )}
       data-slot="avatar"
@@ -26,7 +26,10 @@ export function AvatarImage({
 }: AvatarPrimitive.Image.Props): React.ReactElement {
   return (
     <AvatarPrimitive.Image
-      className={cn("size-full object-cover", className)}
+      className={cn(
+        "absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible",
+        className,
+      )}
       data-slot="avatar-image"
       {...props}
     />
@@ -40,7 +43,7 @@ export function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
+        "absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted",
         className,
       )}
       data-slot="avatar-fallback"
diff --git a/apps/ui/registry/default/ui/calendar.tsx b/apps/ui/registry/default/ui/calendar.tsx
index aca7b0b81..6eea1a602 100644
--- a/apps/ui/registry/default/ui/calendar.tsx
+++ b/apps/ui/registry/default/ui/calendar.tsx
@@ -1,12 +1,12 @@
 "use client";
 
+import { DayPicker } from "@daypicker/react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsUpDownIcon,
 } from "lucide-react";
 import type * as React from "react";
-import { DayPicker } from "react-day-picker";
 import { cn } from "@/registry/default/lib/utils";
 
 const buttonClassNames =
@@ -28,7 +28,7 @@ export function Calendar({
     day: "size-(--cell-size) text-sm py-px",
     day_button: cn(
       buttonClassNames,
-      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
     ),
     dropdown: "absolute bg-popover inset-0 opacity-0",
     dropdown_root:
@@ -47,7 +47,7 @@ export function Calendar({
     range_middle: "range-middle",
     range_start: "range-start",
     today:
-      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
     week_number:
       "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
     weekday:
diff --git a/apps/ui/registry/default/ui/card.tsx b/apps/ui/registry/default/ui/card.tsx
index ab7f285aa..e2e490993 100644
--- a/apps/ui/registry/default/ui/card.tsx
+++ b/apps/ui/registry/default/ui/card.tsx
@@ -162,7 +162,7 @@ export function CardTitle({
   ...props
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
-    className: cn("font-semibold text-lg leading-none", className),
+    className: cn("font-heading font-semibold text-lg leading-none", className),
     "data-slot": "card-title",
   };
 
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 174e38853..4ed0c9fc7 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -18,8 +18,12 @@ export const ComboboxContext: React.Context<{
   multiple: false,
 });
 
-export function Combobox<Value, Multiple extends boolean | undefined = false>(
-  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+export function Combobox<
+  Value,
+  Multiple extends boolean | undefined = false,
+  Item = Value,
+>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,
 ): React.ReactElement {
   const chipsRef = React.useRef<Element | null>(null);
   return (
@@ -42,7 +46,7 @@ export function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       className={cn(
-        "min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
+        "min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
         sizeValue === "sm" ? "ps-1.5" : "ps-2",
         className,
       )}
@@ -210,7 +214,7 @@ export function ComboboxItem({
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="combobox-item"
@@ -232,7 +236,7 @@ export function ComboboxItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </ComboboxPrimitive.ItemIndicator>
-      <div className="col-start-2">{children}</div>
+      <div className="wrap-anywhere col-start-2 min-w-0">{children}</div>
     </ComboboxPrimitive.Item>
   );
 }
@@ -308,18 +312,15 @@ export function ComboboxRow({
   );
 }
 
-export function ComboboxValue({
-  ...props
-}: ComboboxPrimitive.Value.Props): React.ReactElement {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
-}
+export const ComboboxValue: typeof ComboboxPrimitive.Value =
+  ComboboxPrimitive.Value;
 
 export function ComboboxList({
   className,
   ...props
 }: ComboboxPrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <ComboboxPrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
@@ -361,13 +362,8 @@ export function ComboboxStatus({
   );
 }
 
-export function ComboboxCollection(
-  props: ComboboxPrimitive.Collection.Props,
-): React.ReactElement {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  );
-}
+export const ComboboxCollection: typeof ComboboxPrimitive.Collection =
+  ComboboxPrimitive.Collection;
 
 export function ComboboxChips({
   className,
@@ -382,7 +378,7 @@ export function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       className={cn(
-        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="combobox-chips"
@@ -437,6 +433,9 @@ export function ComboboxChipRemove(
   );
 }
 
+export const createComboboxItems: typeof ComboboxPrimitive.createItems =
+  ComboboxPrimitive.createItems;
+
 export const useComboboxFilter: typeof ComboboxPrimitive.useFilter =
   ComboboxPrimitive.useFilter;
 
diff --git a/apps/ui/registry/default/ui/command.tsx b/apps/ui/registry/default/ui/command.tsx
index b111999e6..f68092efa 100644
--- a/apps/ui/registry/default/ui/command.tsx
+++ b/apps/ui/registry/default/ui/command.tsx
@@ -200,11 +200,7 @@ export function CommandGroupLabel({
   );
 }
 
-export function CommandCollection({
-  ...props
-}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {
-  return <AutocompleteCollection data-slot="command-collection" {...props} />;
-}
+export const CommandCollection = AutocompleteCollection;
 
 export function CommandItem({
   className,
diff --git a/apps/ui/registry/default/ui/dialog.tsx b/apps/ui/registry/default/ui/dialog.tsx
index 4bf111f0b..d72827fd4 100644
--- a/apps/ui/registry/default/ui/dialog.tsx
+++ b/apps/ui/registry/default/ui/dialog.tsx
@@ -203,7 +203,7 @@ export function DialogPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/apps/ui/registry/default/ui/drawer.tsx b/apps/ui/registry/default/ui/drawer.tsx
index fd70f2fe4..45fda93c8 100644
--- a/apps/ui/registry/default/ui/drawer.tsx
+++ b/apps/ui/registry/default/ui/drawer.tsx
@@ -119,7 +119,7 @@ export function DrawerViewport({
   return (
     <DrawerPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]",
+        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]",
         "touch-none",
         position === "bottom" && "grid grid-rows-[1fr_auto] pt-12",
         position === "top" && "grid grid-rows-[auto_1fr] pb-12",
@@ -339,7 +339,11 @@ export function DrawerPanel({
 
   if (scrollable) {
     return (
-      <ScrollArea className="touch-auto" scrollFade={scrollFade}>
+      <ScrollArea
+        className="touch-auto"
+        overscrollContain
+        scrollFade={scrollFade}
+      >
         {content}
       </ScrollArea>
     );
@@ -523,8 +527,8 @@ export function DrawerMenuCheckboxItem({
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
         variant === "switch"
-          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
-          : "grid-cols-[1rem_1fr] pe-4",
+          ? "grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_minmax(0,1fr)] pe-4",
         className,
       )}
       data-slot="drawer-menu-checkbox-item"
@@ -536,7 +540,7 @@ export function DrawerMenuCheckboxItem({
     >
       {variant === "switch" ? (
         <>
-          <span className="col-start-1">{children}</span>
+          <span className="wrap-anywhere col-start-1 min-w-0">{children}</span>
           <CheckboxPrimitive.Indicator
             className="inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
             keepMounted
@@ -561,7 +565,7 @@ export function DrawerMenuCheckboxItem({
               <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
             </svg>
           </CheckboxPrimitive.Indicator>
-          <span className="col-start-2">{children}</span>
+          <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
         </>
       )}
     </CheckboxPrimitive.Root>
@@ -596,7 +600,7 @@ export function DrawerMenuRadioItem({
     <RadioPrimitive.Root
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
-        "grid-cols-[1rem_1fr] items-center pe-4",
+        "grid-cols-[1rem_minmax(0,1fr)] items-center pe-4",
         className,
       )}
       data-slot="drawer-menu-radio-item"
@@ -620,7 +624,7 @@ export function DrawerMenuRadioItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </RadioPrimitive.Indicator>
-      <span className="col-start-2">{children}</span>
+      <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
     </RadioPrimitive.Root>
   );
 }
diff --git a/apps/ui/registry/default/ui/input-group.tsx b/apps/ui/registry/default/ui/input-group.tsx
index ef5c0baa7..581557266 100644
--- a/apps/ui/registry/default/ui/input-group.tsx
+++ b/apps/ui/registry/default/ui/input-group.tsx
@@ -7,7 +7,7 @@ import { Input, type InputProps } from "@/registry/default/ui/input";
 import { Textarea, type TextareaProps } from "@/registry/default/ui/textarea";
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
   {
     defaultVariants: {
       align: "inline-start",
@@ -56,7 +56,9 @@ export function InputGroupAddon({
       data-align={align}
       data-slot="input-group-addon"
       onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-        const target = e.target as HTMLElement;
+        const target = e.target as Element;
+        if (!e.currentTarget.contains(target)) return;
+
         const isInteractive = target.closest(
           "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
         );
@@ -82,7 +84,7 @@ export function InputGroupText({
   return (
     <span
       className={cn(
-        "line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
+        "flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
         className,
       )}
       {...props}
diff --git a/apps/ui/registry/default/ui/input.tsx b/apps/ui/registry/default/ui/input.tsx
index f686b1c15..b2113b9b7 100644
--- a/apps/ui/registry/default/ui/input.tsx
+++ b/apps/ui/registry/default/ui/input.tsx
@@ -22,7 +22,7 @@ export function Input({
   ...props
 }: InputProps): React.ReactElement {
   const inputClassName = cn(
-    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5",
+    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]",
     size === "sm" &&
       "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
@@ -37,7 +37,7 @@ export function Input({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
diff --git a/apps/ui/registry/default/ui/number-field.tsx b/apps/ui/registry/default/ui/number-field.tsx
index 957743620..b5d11272c 100644
--- a/apps/ui/registry/default/ui/number-field.tsx
+++ b/apps/ui/registry/default/ui/number-field.tsx
@@ -43,7 +43,7 @@ export function NumberFieldGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
+        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
         className,
       )}
       data-slot="number-field-group"
@@ -95,7 +95,7 @@ export function NumberFieldInput({
   return (
     <NumberFieldPrimitive.Input
       className={cn(
-        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
+        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
         className,
       )}
       data-slot="number-field-input"
diff --git a/apps/ui/registry/default/ui/scroll-area.tsx b/apps/ui/registry/default/ui/scroll-area.tsx
index 10fa99050..276a7e5b7 100644
--- a/apps/ui/registry/default/ui/scroll-area.tsx
+++ b/apps/ui/registry/default/ui/scroll-area.tsx
@@ -11,12 +11,14 @@ export function ScrollArea({
   scrollbarGutter = false,
   fill = false,
   clampContentMinWidth = true,
+  overscrollContain = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
   fill?: boolean;
   clampContentMinWidth?: boolean;
+  overscrollContain?: boolean;
 }): React.ReactElement {
   return (
     <ScrollAreaPrimitive.Root
@@ -25,7 +27,9 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+          "h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          overscrollContain &&
+            "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
           scrollbarGutter &&
diff --git a/apps/ui/registry/default/ui/select.tsx b/apps/ui/registry/default/ui/select.tsx
index d40415ce5..d7782d0c0 100644
--- a/apps/ui/registry/default/ui/select.tsx
+++ b/apps/ui/registry/default/ui/select.tsx
@@ -178,7 +178,7 @@ export function SelectItem({
   return (
     <SelectPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="select-item"
@@ -200,7 +200,7 @@ export function SelectItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </SelectPrimitive.ItemIndicator>
-      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+      <SelectPrimitive.ItemText className="wrap-anywhere col-start-2 min-w-0">
         {children}
       </SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
diff --git a/apps/ui/registry/default/ui/sheet.tsx b/apps/ui/registry/default/ui/sheet.tsx
index df84ad6fb..28d3122a4 100644
--- a/apps/ui/registry/default/ui/sheet.tsx
+++ b/apps/ui/registry/default/ui/sheet.tsx
@@ -214,7 +214,7 @@ export function SheetPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/apps/ui/registry/default/ui/sidebar.tsx b/apps/ui/registry/default/ui/sidebar.tsx
index 61b989b17..e6f284ee9 100644
--- a/apps/ui/registry/default/ui/sidebar.tsx
+++ b/apps/ui/registry/default/ui/sidebar.tsx
@@ -412,7 +412,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn(
           "flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden",
diff --git a/apps/ui/registry/default/ui/size-transition.tsx b/apps/ui/registry/default/ui/size-transition.tsx
deleted file mode 100644
index 0432e194c..000000000
--- a/apps/ui/registry/default/ui/size-transition.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-"use client";
-
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-
-type Size = { width: number; height: number };
-
-export type SizeTransitionAxis = "both" | "width" | "height";
-
-type SizeTransitionContextValue = {
-  currentRef: React.RefObject<HTMLElement | null>;
-  transitioning: boolean;
-  startingStyle: boolean;
-};
-
-const SizeTransitionContext: React.Context<SizeTransitionContextValue | null> =
-  React.createContext<SizeTransitionContextValue | null>(null);
-
-function useSizeTransitionContext(): SizeTransitionContextValue {
-  const context = React.useContext(SizeTransitionContext);
-  if (!context) {
-    throw new Error(
-      "`SizeTransitionPanel` must be used within a `SizeTransition`.",
-    );
-  }
-  return context;
-}
-
-function measureSize(element: HTMLElement): Size {
-  return { width: element.offsetWidth, height: element.offsetHeight };
-}
-
-function freezeSize(
-  element: HTMLElement,
-  size: Size,
-  axis: SizeTransitionAxis,
-) {
-  if (axis !== "height") {
-    element.style.setProperty("--size-width", `${size.width}px`);
-  }
-  if (axis !== "width") {
-    element.style.setProperty("--size-height", `${size.height}px`);
-  }
-}
-
-function releaseSize(element: HTMLElement) {
-  element.style.removeProperty("--size-width");
-  element.style.removeProperty("--size-height");
-}
-
-/**
- * Runs `callback` once every animation currently running on `element` has
- * finished. Falls back to running synchronously when the Web Animations API is
- * unavailable (e.g. jsdom) or nothing is animating.
- */
-function runAfterAnimations(
-  element: HTMLElement | null,
-  callback: () => void,
-  signal: AbortSignal,
-): number {
-  if (!element || typeof element.getAnimations !== "function") {
-    callback();
-    return -1;
-  }
-  return requestAnimationFrame(() => {
-    if (signal.aborted) {
-      return;
-    }
-    const animations = element.getAnimations();
-    if (animations.length === 0) {
-      callback();
-      return;
-    }
-    Promise.all(animations.map((animation) => animation.finished))
-      .then(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      })
-      .catch(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      });
-  });
-}
-
-export type SizeTransitionProps = useRender.ComponentProps<"div"> & {
-  /** Value whose change triggers a size animation and content cross-fade. */
-  transitionKey: React.Key;
-  /**
-   * Which dimensions to animate. Non-animated dimensions stay `auto`.
-   * @default "both"
-   */
-  axis?: SizeTransitionAxis;
-};
-
-/**
- * Animates between the sizes of successive `SizeTransitionPanel` children and
- * cross-fades outgoing content into incoming content when `transitionKey`
- * changes.
- *
- * Size is exposed as `--size-width` / `--size-height` (pixels during a
- * transition, `auto` at rest). Opt in via classes such as
- * `w-(--size-width,auto) h-(--size-height,auto) transition-[width,height]`.
- */
-export function SizeTransition({
-  axis = "both",
-  transitionKey,
-  children,
-  render,
-  ...props
-}: SizeTransitionProps): React.ReactElement {
-  const rootRef = React.useRef<HTMLElement | null>(null);
-  const currentRef = React.useRef<HTMLElement | null>(null);
-  const previousRef = React.useRef<HTMLDivElement | null>(null);
-  const snapshotRef = React.useRef<HTMLElement | null>(null);
-  const committedSizeRef = React.useRef<Size | null>(null);
-  const previousKeyRef = React.useRef<React.Key>(transitionKey);
-  const isFirstRenderRef = React.useRef(true);
-
-  const [previousContent, setPreviousContent] =
-    React.useState<HTMLElement | null>(null);
-  const [previousSize, setPreviousSize] = React.useState<Size | null>(null);
-  const [startingStyle, setStartingStyle] = React.useState(false);
-  const [sizeTransitioning, setSizeTransitioning] = React.useState(false);
-
-  const hasPreviousLayer = previousContent !== null;
-
-  useIsoLayoutEffect(() => {
-    const element = rootRef.current;
-    if (!element) {
-      return;
-    }
-
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      previousKeyRef.current = transitionKey;
-      committedSizeRef.current = measureSize(element);
-      return;
-    }
-
-    if (previousKeyRef.current === transitionKey) {
-      return;
-    }
-    previousKeyRef.current = transitionKey;
-
-    const outgoingContent = snapshotRef.current;
-    const previousSizeValue = committedSizeRef.current;
-
-    setSizeTransitioning(true);
-
-    if (outgoingContent) {
-      setPreviousContent(outgoingContent);
-      setStartingStyle(true);
-    }
-
-    releaseSize(element);
-    currentRef.current?.style.removeProperty("width");
-    currentRef.current?.style.setProperty("transition", "none");
-    const newSize = measureSize(element);
-    committedSizeRef.current = newSize;
-
-    // Pin the entering panel to its final width so content is clipped, not reflowed.
-    if (axis !== "height") {
-      currentRef.current?.style.setProperty("width", `${newSize.width}px`);
-    }
-
-    if (previousSizeValue) {
-      freezeSize(element, previousSizeValue, axis);
-      setPreviousSize(previousSizeValue);
-    }
-
-    const sizeAbort = new AbortController();
-    const fadeAbort = new AbortController();
-    let sizeFinishFrame = -1;
-    let fadeFinishFrame = -1;
-
-    const frame = requestAnimationFrame(() => {
-      // Force a reflow so starting styles register before ending styles apply.
-      void element.offsetHeight;
-
-      freezeSize(element, newSize, axis);
-      currentRef.current?.style.removeProperty("transition");
-      ReactDOM.flushSync(() => setStartingStyle(false));
-
-      sizeFinishFrame = runAfterAnimations(
-        element,
-        () => {
-          releaseSize(element);
-          currentRef.current?.style.removeProperty("width");
-          setSizeTransitioning(false);
-        },
-        sizeAbort.signal,
-      );
-      fadeFinishFrame = runAfterAnimations(
-        currentRef.current,
-        () => {
-          setPreviousContent(null);
-          setPreviousSize(null);
-          snapshotRef.current = null;
-        },
-        fadeAbort.signal,
-      );
-    });
-
-    return () => {
-      sizeAbort.abort();
-      fadeAbort.abort();
-      cancelAnimationFrame(frame);
-      cancelAnimationFrame(sizeFinishFrame);
-      cancelAnimationFrame(fadeFinishFrame);
-    };
-  }, [axis, transitionKey]);
-
-  useIsoLayoutEffect(() => {
-    const container = previousRef.current;
-    if (!container || !previousContent) {
-      return;
-    }
-    container.replaceChildren(previousContent);
-  }, [previousContent]);
-
-  // Declared last so the transition effect reads the prior render's snapshot.
-  useIsoLayoutEffect(() => {
-    const source = currentRef.current;
-    if (!source) {
-      return;
-    }
-    const clone = source.cloneNode(true) as HTMLElement;
-    clone.removeAttribute("data-current");
-    clone.removeAttribute("data-starting-style");
-    clone.style.removeProperty("width");
-    clone.style.removeProperty("transition");
-    snapshotRef.current = clone;
-  });
-
-  const contextValue = React.useMemo<SizeTransitionContextValue>(
-    () => ({
-      currentRef,
-      startingStyle,
-      transitioning: hasPreviousLayer || sizeTransitioning,
-    }),
-    [hasPreviousLayer, sizeTransitioning, startingStyle],
-  );
-
-  const content = hasPreviousLayer ? (
-    <React.Fragment>
-      {children}
-      {/* After `children` so inserting this layer never remounts the panel. */}
-      <div
-        data-ending-style={startingStyle ? undefined : ""}
-        data-previous=""
-        inert
-        key="previous"
-        ref={previousRef}
-        style={{
-          left: 0,
-          position: "absolute",
-          top: 0,
-          ...(previousSize
-            ? { height: previousSize.height, width: previousSize.width }
-            : null),
-        }}
-      />
-    </React.Fragment>
-  ) : (
-    children
-  );
-
-  const defaultProps = {
-    className: "relative",
-    "data-slot": "size-transition",
-  };
-
-  const element = useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props, { children: content }),
-    render,
-    ref: rootRef,
-    state: { transitioning: sizeTransitioning },
-    stateAttributesMapping: {
-      transitioning: (value) => (value ? { "data-transitioning": "" } : null),
-    },
-  });
-
-  return (
-    <SizeTransitionContext.Provider value={contextValue}>
-      {element}
-    </SizeTransitionContext.Provider>
-  );
-}
-
-export type SizeTransitionPanelProps = useRender.ComponentProps<"div">;
-
-/**
- * Active content layer of a `SizeTransition`. Uses the `render` element as
- * `data-current` so no extra wrapper is added.
- */
-export function SizeTransitionPanel({
-  render,
-  ...props
-}: SizeTransitionPanelProps): React.ReactElement {
-  const { currentRef, startingStyle, transitioning } =
-    useSizeTransitionContext();
-
-  return useRender({
-    defaultTagName: "div",
-    props,
-    render,
-    ref: currentRef,
-    state: { current: true, startingStyle: transitioning && startingStyle },
-    stateAttributesMapping: {
-      current: () => ({
-        "data-current": "",
-        "data-slot": "size-transition-panel",
-      }),
-      startingStyle: (value) => (value ? { "data-starting-style": "" } : null),
-    },
-  });
-}
diff --git a/apps/ui/registry/default/ui/tabs.tsx b/apps/ui/registry/default/ui/tabs.tsx
index 7a4b82ee7..e53f93c27 100644
--- a/apps/ui/registry/default/ui/tabs.tsx
+++ b/apps/ui/registry/default/ui/tabs.tsx
@@ -1,10 +1,19 @@
 "use client";
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import type React from "react";
+import * as React from "react";
+import {
+  type SegmentedControlSize,
+  segmentedControlItemLayoutClassName,
+  segmentedControlItemSizeClassNames,
+} from "@/registry/default/lib/segmented-control";
 import { cn } from "@/registry/default/lib/utils";
 
-export type TabsVariant = "default" | "underline";
+type TabsVariant = "default" | "underline";
+type TabsSize = SegmentedControlSize;
+
+const TabsListContext: React.Context<TabsSize> =
+  React.createContext<TabsSize>("default");
 
 export function Tabs({
   className,
@@ -24,10 +33,12 @@ export function Tabs({
 
 export function TabsList({
   variant = "default",
+  size = "default",
   className,
   children,
   ...props
 }: TabsPrimitive.List.Props & {
+  size?: TabsSize;
   variant?: TabsVariant;
 }): React.ReactElement {
   return (
@@ -40,10 +51,13 @@ export function TabsList({
           : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
         className,
       )}
+      data-size={size}
       data-slot="tabs-list"
       {...props}
     >
-      {children}
+      <TabsListContext.Provider value={size}>
+        {children}
+      </TabsListContext.Provider>
       <TabsPrimitive.Indicator
         className={cn(
           "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
@@ -59,14 +73,23 @@ export function TabsList({
 
 export function TabsTab({
   className,
+  size,
   ...props
-}: TabsPrimitive.Tab.Props): React.ReactElement {
+}: TabsPrimitive.Tab.Props & {
+  size?: TabsSize;
+}): React.ReactElement {
+  const contextSize: TabsSize = React.useContext(TabsListContext);
+  const resolvedSize: TabsSize = size ?? contextSize;
+
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm",
+        segmentedControlItemLayoutClassName,
+        segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
+      data-size={resolvedSize}
       data-slot="tabs-tab"
       {...props}
     />
@@ -86,4 +109,10 @@ export function TabsPanel({
   );
 }
 
-export { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  type TabsSize,
+  type TabsVariant,
+};
diff --git a/apps/ui/registry/default/ui/textarea.tsx b/apps/ui/registry/default/ui/textarea.tsx
index 0d0a52221..36d8b62c8 100644
--- a/apps/ui/registry/default/ui/textarea.tsx
+++ b/apps/ui/registry/default/ui/textarea.tsx
@@ -23,7 +23,7 @@ export function Textarea({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
@@ -40,7 +40,7 @@ export function Textarea({
         render={(defaultProps: React.ComponentProps<"textarea">) => (
           <textarea
             className={cn(
-              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5",
               size === "sm" &&
                 "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
               size === "lg" &&
diff --git a/apps/ui/registry/default/ui/toast.tsx b/apps/ui/registry/default/ui/toast.tsx
index 4acb3e350..30ed9bf95 100644
--- a/apps/ui/registry/default/ui/toast.tsx
+++ b/apps/ui/registry/default/ui/toast.tsx
@@ -124,7 +124,8 @@ function Toasts({
                 "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:opacity-0",
                 // Ending animations (direction-aware)
-                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
@@ -208,7 +209,7 @@ function AnchoredToasts({
           return (
             <Toast.Positioner
               key={toast.id}
-              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              className="z-60 max-w-[min(--spacing(64),var(--available-width))]"
               data-slot="toast-positioner"
               sideOffset={positionerProps.sideOffset ?? 4}
               toast={toast}
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index 3e21df0d5..e829246f4 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -16,7 +16,7 @@ type AtomItem = Omit<Registry["items"][number], "meta"> & {
 
 export const atoms: AtomItem[] = [
   {
-    dependencies: ["isomorphic-dompurify", "marked", "lucide-react"],
+    dependencies: ["isomorphic-dompurify", "marked", "lucide-react", "motion"],
     description: "A full scheduling flow powered by Cal.com API v2.",
     files: [
       {
@@ -24,6 +24,16 @@ export const atoms: AtomItem[] = [
         target: "components/atoms/booker-1.tsx",
         type: "registry:block",
       },
+      {
+        path: "atoms/booker/booker-confirm-form.tsx",
+        target: "components/atoms/booker/booker-confirm-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "atoms/booker/booker-steps.tsx",
+        target: "components/atoms/booker/booker-steps.tsx",
+        type: "registry:component",
+      },
       {
         path: "atoms/booker/booker-calendar.tsx",
         target: "components/atoms/booker/booker-calendar.tsx",
@@ -102,14 +112,17 @@ export const atoms: AtomItem[] = [
       "@coss/card",
       "@coss/combobox",
       "@coss/empty",
+      "@coss/field",
+      "@coss/form",
+      "@coss/group",
       "@coss/input",
       "@coss/label",
       "@coss/popover",
       "@coss/scroll-area",
       "@coss/select",
-      "@coss/size-transition",
       "@coss/skeleton",
       "@coss/switch",
+      "@coss/textarea",
       "@coss/tooltip",
     ],
     meta: {
diff --git a/apps/ui/registry/registry-cal.ts b/apps/ui/registry/registry-cal.ts
index 3a3f3a211..004f2f3a6 100644
--- a/apps/ui/registry/registry-cal.ts
+++ b/apps/ui/registry/registry-cal.ts
@@ -31,6 +31,11 @@ const calApiFiles: Registry["items"][number]["files"] = [
     target: "lib/cal-api/types.ts",
     type: "registry:lib",
   },
+  {
+    path: "lib/cal-api/bookings.ts",
+    target: "lib/cal-api/bookings.ts",
+    type: "registry:lib",
+  },
 ];
 
 export const cal: Registry["items"] = [
diff --git a/apps/ui/registry/registry-categories.ts b/apps/ui/registry/registry-categories.ts
index 3891865fd..dd8e332f1 100644
--- a/apps/ui/registry/registry-categories.ts
+++ b/apps/ui/registry/registry-categories.ts
@@ -40,6 +40,7 @@ export const registryCategories = [
   "label",
   "menu",
   "meter",
+  "navigation",
   "number field",
   "otp field",
   "pagination",
@@ -49,6 +50,7 @@ export const registryCategories = [
   "radio group",
   "scroll area",
   "select",
+  "segmented control",
   "separator",
   "sheet",
   "skeleton",
diff --git a/apps/ui/registry/registry-lib.ts b/apps/ui/registry/registry-lib.ts
index 9d4db687b..7cedb75f6 100644
--- a/apps/ui/registry/registry-lib.ts
+++ b/apps/ui/registry/registry-lib.ts
@@ -1,6 +1,17 @@
 import type { Registry } from "shadcn/schema";
 
 export const lib: Registry["items"] = [
+  {
+    dependencies: ["class-variance-authority"],
+    files: [
+      {
+        path: "lib/segmented-control.ts",
+        type: "registry:lib",
+      },
+    ],
+    name: "segmented-control",
+    type: "registry:lib",
+  },
   {
     dependencies: ["clsx", "tailwind-merge"],
     files: [
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 52bf8085f..843eee8e8 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -356,6 +356,21 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/autocomplete"],
     type: "registry:block",
   },
+  {
+    categories: categories("autocomplete", "input", "async", "search"),
+    dependencies: ["lucide-react"],
+    description: "Address autocomplete with Google Maps Places API",
+    files: [
+      { path: "particles/p-autocomplete-16.tsx", type: "registry:block" },
+    ],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64",
+    },
+    name: "p-autocomplete-16",
+    registryDependencies: ["@coss/autocomplete", "@coss/spinner"],
+    type: "registry:block",
+  },
   {
     categories: categories("avatar"),
     description: "Avatar with image and fallback",
@@ -619,6 +634,9 @@ export const particles: ParticleItem[] = [
     dependencies: ["lucide-react"],
     description: "Selectable badge with checkbox",
     files: [{ path: "particles/p-badge-19.tsx", type: "registry:block" }],
+    meta: {
+      className: "**:data-[slot=preview]:flex",
+    },
     name: "p-badge-19",
     registryDependencies: ["@coss/badge", "@coss/checkbox"],
     type: "registry:block",
@@ -1285,6 +1303,19 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/calendar"],
     type: "registry:block",
   },
+  {
+    categories: categories("calendar", "autocomplete", "field", "time"),
+    dependencies: ["date-fns", "lucide-react"],
+    description: "Calendar with 24-hour autocomplete time input",
+    files: [{ path: "particles/p-calendar-25.tsx", type: "registry:block" }],
+    name: "p-calendar-25",
+    registryDependencies: [
+      "@coss/calendar",
+      "@coss/autocomplete",
+      "@coss/field",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("date picker", "calendar", "popover", "button"),
     dependencies: ["date-fns", "lucide-react"],
@@ -2005,6 +2036,42 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/combobox", "@coss/select"],
     type: "registry:block",
   },
+  {
+    categories: categories("combobox", "input"),
+    dependencies: ["lucide-react"],
+    description: "Combobox multiple with stacked chips",
+    files: [{ path: "particles/p-combobox-19.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80",
+    },
+    name: "p-combobox-19",
+    registryDependencies: [
+      "@coss/avatar",
+      "@coss/badge",
+      "@coss/button",
+      "@coss/combobox",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("combobox", "input"),
+    dependencies: ["lucide-react"],
+    description: "Combobox multiple with stacked divided chips",
+    files: [{ path: "particles/p-combobox-20.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80",
+    },
+    name: "p-combobox-20",
+    registryDependencies: [
+      "@coss/avatar",
+      "@coss/badge",
+      "@coss/button",
+      "@coss/combobox",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("command", "dialog"),
     dependencies: ["lucide-react"],
@@ -3887,6 +3954,30 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/number-field"],
     type: "registry:block",
   },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-1.tsx", type: "registry:block" }],
+    name: "p-navigation-1",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Small segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-2.tsx", type: "registry:block" }],
+    name: "p-navigation-2",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Large segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-3.tsx", type: "registry:block" }],
+    name: "p-navigation-3",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
   {
     categories: categories("pagination"),
     description: "Pagination example",
@@ -3949,6 +4040,29 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/avatar", "@coss/button", "@coss/popover"],
     type: "registry:block",
   },
+  {
+    categories: categories(
+      "button",
+      "checkbox",
+      "checkbox group",
+      "group",
+      "popover",
+    ),
+    dependencies: ["lucide-react"],
+    description: "Split button with popover to confirm multiple occurrences",
+    files: [{ path: "particles/p-popover-4.tsx", type: "registry:block" }],
+    name: "p-popover-4",
+    registryDependencies: [
+      "@coss/badge",
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("preview card"),
     dependencies: ["lucide-react"],
@@ -4057,6 +4171,30 @@ export const particles: ParticleItem[] = [
     ],
     type: "registry:block",
   },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Small segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-7.tsx", type: "registry:block" }],
+    name: "p-radio-group-7",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-8.tsx", type: "registry:block" }],
+    name: "p-radio-group-8",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Large segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-9.tsx", type: "registry:block" }],
+    name: "p-radio-group-9",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
   {
     categories: categories("scroll area"),
     description: "Basic scroll area",
@@ -4799,6 +4937,78 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/switch"],
     type: "registry:block",
   },
+  {
+    categories: categories("switch", "combobox", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with time range combobox pickers",
+    files: [{ path: "particles/p-switch-7.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-7",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/select",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with grouped time range controls",
+    files: [{ path: "particles/p-switch-8.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-8",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with From/To labeled time groups",
+    files: [{ path: "particles/p-switch-9.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-9",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("table"),
     description: "Basic table",
@@ -4948,7 +5158,7 @@ export const particles: ParticleItem[] = [
   },
   {
     categories: categories("tabs"),
-    description: "Basic tabs",
+    description: "Segmented control built with tabs",
     files: [{ path: "particles/p-tabs-1.tsx", type: "registry:block" }],
     name: "p-tabs-1",
     registryDependencies: ["@coss/tabs"],
@@ -5069,6 +5279,22 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/tabs", "@coss/tooltip"],
     type: "registry:block",
   },
+  {
+    categories: categories("tabs"),
+    description: "Small segmented control built with tabs",
+    files: [{ path: "particles/p-tabs-14.tsx", type: "registry:block" }],
+    name: "p-tabs-14",
+    registryDependencies: ["@coss/tabs"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("tabs"),
+    description: "Large segmented control built with tabs",
+    files: [{ path: "particles/p-tabs-15.tsx", type: "registry:block" }],
+    name: "p-tabs-15",
+    registryDependencies: ["@coss/tabs"],
+    type: "registry:block",
+  },
   {
     categories: categories("textarea"),
     description: "Basic textarea",
diff --git a/apps/ui/registry/registry-styles.ts b/apps/ui/registry/registry-styles.ts
index 093db0566..efd004307 100644
--- a/apps/ui/registry/registry-styles.ts
+++ b/apps/ui/registry/registry-styles.ts
@@ -120,7 +120,7 @@ export const styles: Registry["items"] = [
       },
       theme: {
         "font-heading":
-          "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
         "font-mono": "var(--font-mono, ui-monospace, monospace)",
         "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
       },
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index c8fc02df1..17c9e01ef 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -46,7 +46,6 @@ export const ui: Registry["items"] = [
       "@coss/separator",
       "@coss/sheet",
       "@coss/sidebar",
-      "@coss/size-transition",
       "@coss/skeleton",
       "@coss/slider",
       "@coss/spinner",
@@ -200,7 +199,7 @@ export const ui: Registry["items"] = [
     type: "registry:ui",
   },
   {
-    dependencies: ["react-day-picker", "lucide-react"],
+    dependencies: ["@daypicker/react", "lucide-react"],
     files: [
       {
         path: "ui/calendar.tsx",
@@ -628,17 +627,6 @@ export const ui: Registry["items"] = [
     ],
     type: "registry:ui",
   },
-  {
-    dependencies: ["@base-ui/react"],
-    files: [
-      {
-        path: "ui/size-transition.tsx",
-        type: "registry:ui",
-      },
-    ],
-    name: "size-transition",
-    type: "registry:ui",
-  },
   {
     css: {
       "@keyframes skeleton": {
@@ -694,6 +682,7 @@ export const ui: Registry["items"] = [
     type: "registry:ui",
   },
   {
+    dependencies: ["@base-ui/react"],
     files: [
       {
         path: "ui/table.tsx",
@@ -712,6 +701,7 @@ export const ui: Registry["items"] = [
       },
     ],
     name: "tabs",
+    registryDependencies: ["@coss/segmented-control"],
     type: "registry:ui",
   },
   {
diff --git a/apps/ui/skills/coss-particles/SKILL.md b/apps/ui/skills/coss-particles/SKILL.md
index 19f5c4a8c..2978e5367 100644
--- a/apps/ui/skills/coss-particles/SKILL.md
+++ b/apps/ui/skills/coss-particles/SKILL.md
@@ -37,25 +37,26 @@ Run the generator script from the coss repo root:
 node apps/ui/scripts/generate-particle-index.cjs
 ```
 
-Total: **484 particles** across **52 component types**
+Total: **508 particles** across **54 component types**
 
 ## Component types
 
 - [accordion](#accordion) (4)
 - [alert](#alert) (7)
 - [alert-dialog](#alert-dialog) (2)
-- [autocomplete](#autocomplete) (15)
+- [autocomplete](#autocomplete) (16)
 - [avatar](#avatar) (14)
 - [badge](#badge) (20)
 - [breadcrumb](#breadcrumb) (7)
 - [button](#button) (40)
-- [calendar](#calendar) (24)
+- [calendar](#calendar) (25)
 - [card](#card) (11)
 - [checkbox](#checkbox) (5)
 - [checkbox-group](#checkbox-group) (5)
 - [collapsible](#collapsible) (1)
-- [combobox](#combobox) (18)
+- [combobox](#combobox) (20)
 - [command](#command) (2)
+- [context-menu](#context-menu) (8)
 - [date-picker](#date-picker) (9)
 - [dialog](#dialog) (6)
 - [drawer](#drawer) (14)
@@ -70,13 +71,14 @@ Total: **484 particles** across **52 component types**
 - [kbd](#kbd) (1)
 - [menu](#menu) (9)
 - [meter](#meter) (4)
+- [navigation](#navigation) (3)
 - [number-field](#number-field) (11)
 - [otp-field](#otp-field) (9)
 - [pagination](#pagination) (3)
-- [popover](#popover) (3)
+- [popover](#popover) (4)
 - [preview-card](#preview-card) (1)
 - [progress](#progress) (3)
-- [radio-group](#radio-group) (6)
+- [radio-group](#radio-group) (9)
 - [scroll-area](#scroll-area) (5)
 - [select](#select) (23)
 - [separator](#separator) (1)
@@ -84,9 +86,9 @@ Total: **484 particles** across **52 component types**
 - [skeleton](#skeleton) (2)
 - [slider](#slider) (23)
 - [spinner](#spinner) (1)
-- [switch](#switch) (6)
+- [switch](#switch) (9)
 - [table](#table) (8)
-- [tabs](#tabs) (13)
+- [tabs](#tabs) (15)
 - [textarea](#textarea) (15)
 - [toast](#toast) (13)
 - [toggle](#toggle) (8)
@@ -135,6 +137,7 @@ Total: **484 particles** across **52 component types**
 - Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-13.json)
 - Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-14.json)
 - Pill-shaped autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-15.json)
+- Address autocomplete with Google Maps Places API | [JSON](https://coss.com/ui/r/p-autocomplete-16.json)
 
 ### avatar
 
@@ -255,6 +258,7 @@ Total: **484 particles** across **52 component types**
 - Two months calendar | [JSON](https://coss.com/ui/r/p-calendar-22.json)
 - Three months calendar | [JSON](https://coss.com/ui/r/p-calendar-23.json)
 - Pricing calendar with custom day buttons | [JSON](https://coss.com/ui/r/p-calendar-24.json)
+- Calendar with 24-hour autocomplete time input | [JSON](https://coss.com/ui/r/p-calendar-25.json)
 
 ### card
 
@@ -310,12 +314,25 @@ Total: **484 particles** across **52 component types**
 - Timezone combobox | [JSON](https://coss.com/ui/r/p-combobox-16.json)
 - Timezone combobox with search input | [JSON](https://coss.com/ui/r/p-combobox-17.json)
 - Combobox with select trigger | [JSON](https://coss.com/ui/r/p-combobox-18.json)
+- Combobox multiple with stacked chips | [JSON](https://coss.com/ui/r/p-combobox-19.json)
+- Combobox multiple with stacked divided chips | [JSON](https://coss.com/ui/r/p-combobox-20.json)
 
 ### command
 
 - Command palette with dialog | [JSON](https://coss.com/ui/r/p-command-1.json)
 - Command palette with AI assistant | [JSON](https://coss.com/ui/r/p-command-2.json)
 
+### context-menu
+
+- Basic context menu | [JSON](https://coss.com/ui/r/p-context-menu-1.json)
+- Context menu with link items | [JSON](https://coss.com/ui/r/p-context-menu-2.json)
+- Nested context menu | [JSON](https://coss.com/ui/r/p-context-menu-3.json)
+- Context menu with checkbox items | [JSON](https://coss.com/ui/r/p-context-menu-4.json)
+- Context menu with group labels | [JSON](https://coss.com/ui/r/p-context-menu-5.json)
+- Context menu with icons | [JSON](https://coss.com/ui/r/p-context-menu-6.json)
+- Context menu with radio group | [JSON](https://coss.com/ui/r/p-context-menu-7.json)
+- Context menu with switch checkbox items | [JSON](https://coss.com/ui/r/p-context-menu-8.json)
+
 ### date-picker
 
 - Basic date picker | [JSON](https://coss.com/ui/r/p-date-picker-1.json)
@@ -496,6 +513,12 @@ Total: **484 particles** across **52 component types**
 - Meter with formatted value | [JSON](https://coss.com/ui/r/p-meter-3.json)
 - Meter with range | [JSON](https://coss.com/ui/r/p-meter-4.json)
 
+### navigation
+
+- Segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-1.json)
+- Small segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-2.json)
+- Large segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-3.json)
+
 ### number-field
 
 - Basic number field | [JSON](https://coss.com/ui/r/p-number-field-1.json)
@@ -533,6 +556,7 @@ Total: **484 particles** across **52 component types**
 - Popover with a form | [JSON](https://coss.com/ui/r/p-popover-1.json)
 - Popover with close button | [JSON](https://coss.com/ui/r/p-popover-2.json)
 - Animated popovers | [JSON](https://coss.com/ui/r/p-popover-3.json)
+- Split button with popover to confirm multiple occurrences | [JSON](https://coss.com/ui/r/p-popover-4.json)
 
 ### preview-card
 
@@ -552,6 +576,9 @@ Total: **484 particles** across **52 component types**
 - Radio group card | [JSON](https://coss.com/ui/r/p-radio-group-4.json)
 - Radio group in form | [JSON](https://coss.com/ui/r/p-radio-group-5.json)
 - Theme selector with image cards | [JSON](https://coss.com/ui/r/p-radio-group-6.json)
+- Small segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-7.json)
+- Segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-8.json)
+- Large segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-9.json)
 
 ### scroll-area
 
@@ -640,6 +667,9 @@ Total: **484 particles** across **52 component types**
 - Switch card | [JSON](https://coss.com/ui/r/p-switch-4.json)
 - Switch in form | [JSON](https://coss.com/ui/r/p-switch-5.json)
 - Custom size switch | [JSON](https://coss.com/ui/r/p-switch-6.json)
+- Weekly availability editor with time range combobox pickers | [JSON](https://coss.com/ui/r/p-switch-7.json)
+- Weekly availability editor with grouped time range controls | [JSON](https://coss.com/ui/r/p-switch-8.json)
+- Weekly availability editor with From/To labeled time groups | [JSON](https://coss.com/ui/r/p-switch-9.json)
 
 ### table
 
@@ -654,7 +684,7 @@ Total: **484 particles** across **52 component types**
 
 ### tabs
 
-- Basic tabs | [JSON](https://coss.com/ui/r/p-tabs-1.json)
+- Segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-1.json)
 - Tabs with underline | [JSON](https://coss.com/ui/r/p-tabs-2.json)
 - Vertical tabs | [JSON](https://coss.com/ui/r/p-tabs-3.json)
 - Vertical tabs with underline | [JSON](https://coss.com/ui/r/p-tabs-4.json)
@@ -667,6 +697,8 @@ Total: **484 particles** across **52 component types**
 - Vertical tabs with underline and icon before name | [JSON](https://coss.com/ui/r/p-tabs-11.json)
 - Tabs with icon only and count badge | [JSON](https://coss.com/ui/r/p-tabs-12.json)
 - Tabs with icon only and grouped tooltips | [JSON](https://coss.com/ui/r/p-tabs-13.json)
+- Small segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-14.json)
+- Large segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-15.json)
 
 ### textarea
 
diff --git a/apps/ui/skills/coss/SKILL.md b/apps/ui/skills/coss/SKILL.md
index 8cbda0751..c17ca3053 100644
--- a/apps/ui/skills/coss/SKILL.md
+++ b/apps/ui/skills/coss/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: coss
-description: Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
+description: Helps implement coss UI components correctly. Use when building UIs with coss primitives and patterns (buttons, dialogs, selects, forms, menus, tabs, segmented controls, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
 compatibility: Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
 license: MIT
 metadata:
@@ -60,6 +60,7 @@ Rule references (read on demand when the task touches these areas):
 - `./references/rules/forms.md` — Field composition, validation, input patterns
 - `./references/rules/composition.md` — Trigger/popup hierarchies, grouped controls
 - `./references/rules/migration.md` — shadcn/Radix to coss/Base UI migration patterns
+- `./references/segmented-control.md` — choose Radio Group, links, Toggle Group, or Tabs before applying segmented-control styling
 - `./references/portal-props.md` — optional `portalProps` on composed popups and toast providers (`keepMounted`, `container`, which surfaces support it)
 
 ## Component discovery
@@ -115,4 +116,3 @@ Before returning code:
 - composition structure is valid for selected primitive(s)
 - accessibility and explicit control types (`button`, `input`, etc.) are present
 - migration-sensitive flows are verified (type/lint, keyboard/a11y behavior, and SSR-sensitive primitives like Select/Command)
-
diff --git a/apps/ui/skills/coss/references/component-registry.md b/apps/ui/skills/coss/references/component-registry.md
index 1a3a2b291..9fd564bce 100644
--- a/apps/ui/skills/coss/references/component-registry.md
+++ b/apps/ui/skills/coss/references/component-registry.md
@@ -4,6 +4,9 @@ Use this file to quickly identify the right coss primitive for a UI task. Each e
 
 For optional **`portalProps`** on composed `*Popup` components and **toast** providers (Base UI portal forwarding), see `./references/portal-props.md`.
 
+## Cross-component patterns
+- **Segmented Control** — Shared visual treatment for radio choices, navigation links, exclusive toggles, or tabbed panels; choose semantics first. `./references/segmented-control.md`
+
 ## Overlays & Popups
 - **Dialog** — Centered modal requiring user focus. `./references/primitives/dialog.md`
 - **AlertDialog** — Destructive/critical confirmation modal. `./references/primitives/alert-dialog.md`
diff --git a/apps/ui/skills/coss/references/primitives/autocomplete.md b/apps/ui/skills/coss/references/primitives/autocomplete.md
index d1045119f..624e7e3ff 100644
--- a/apps/ui/skills/coss/references/primitives/autocomplete.md
+++ b/apps/ui/skills/coss/references/primitives/autocomplete.md
@@ -112,7 +112,7 @@ Form integration: place `Autocomplete` inside `Field name="..."` with `FieldLabe
 
 ### More examples
 
-See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior, groups, limited results, async, form integration, and pill input patterns.
+See `p-autocomplete-1` through `p-autocomplete-16` for sizes, matching behavior, groups, limited results, async integrations, forms, and pill input patterns.
 
 ## Common pitfalls
 
@@ -121,6 +121,7 @@ See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior,
 - Mixing combobox/select assumptions into autocomplete APIs without checking docs.
 - Missing explicit labels (`FieldLabel` or `aria-label`) on the input.
 - Not handling async race/error states (`loading`, `error`, stale response cancellation).
+- Exposing an unrestricted browser API key in an external address integration; apply provider restrictions and cancel stale requests.
 
 ## Useful particle references
 
@@ -132,3 +133,4 @@ See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior,
 - async search with loading/error status: `p-autocomplete-12`
 - form integration: `p-autocomplete-13`
 - style variant (pill input): `p-autocomplete-15`
+- Google Maps Places address suggestions with debouncing, cancellation, status feedback, and session tokens: `p-autocomplete-16`
diff --git a/apps/ui/skills/coss/references/primitives/avatar.md b/apps/ui/skills/coss/references/primitives/avatar.md
index 96b24a676..5e98f1c6e 100644
--- a/apps/ui/skills/coss/references/primitives/avatar.md
+++ b/apps/ui/skills/coss/references/primitives/avatar.md
@@ -32,6 +32,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+Use `keepMounted` on `AvatarImage` when the image relies on native lazy loading or an optimized image component. The image and fallback are layered so the fallback remains visible while the image loads or if it fails.
+
 ## Patterns from coss particles
 
 ### Key patterns
diff --git a/apps/ui/skills/coss/references/primitives/calendar.md b/apps/ui/skills/coss/references/primitives/calendar.md
index 8b86f08a2..d2c04facd 100644
--- a/apps/ui/skills/coss/references/primitives/calendar.md
+++ b/apps/ui/skills/coss/references/primitives/calendar.md
@@ -14,7 +14,7 @@ npx shadcn@latest add @coss/calendar
 Manual deps from docs:
 
 ```bash
-npm install react-day-picker
+npm install @daypicker/react
 ```
 
 ## Canonical imports
@@ -66,3 +66,4 @@ See `p-calendar-1` through `p-calendar-6` for single, range, dropdown navigation
 - dropdown navigation: `p-calendar-4`
 - select dropdown for month/year: `p-calendar-5`
 - combobox dropdown for month/year: `p-calendar-6`
+- date plus a validated 24-hour autocomplete time input: `p-calendar-25`
diff --git a/apps/ui/skills/coss/references/primitives/combobox.md b/apps/ui/skills/coss/references/primitives/combobox.md
index aa965a61b..176617f31 100644
--- a/apps/ui/skills/coss/references/primitives/combobox.md
+++ b/apps/ui/skills/coss/references/primitives/combobox.md
@@ -39,6 +39,7 @@ import {
   ComboboxPopup,
   ComboboxSeparator,
   ComboboxValue,
+  createComboboxItems,
   useComboboxFilter,
 } from "@/components/ui/combobox"
 ```
@@ -66,6 +67,8 @@ const items = [
 
 For form-bound comboboxes, prefer `Field` composition (`Field` + `FieldLabel` + `FieldError`) instead of standalone controls.
 
+Use `createComboboxItems` when object items should derive stable primitive selection values and labels. Define static collections at module scope and memoize dynamic collections.
+
 ## Patterns from coss particles
 
 - **Portal forwarding**: optional `portalProps` on `ComboboxPopup` → Base UI `Combobox.Portal` (`keepMounted`, `container`, …). See [portal-props.md](../portal-props.md).
@@ -111,4 +114,6 @@ See `p-combobox-1` through `p-combobox-9` for sizes, label, auto-highlight, clea
 - with clear button: `p-combobox-7`
 - with groups: `p-combobox-8`
 - with multiple selection: `p-combobox-9`
+- multiple team selection rendered as separate stacked rows: `p-combobox-19`
+- multiple team selection rendered as a divided stack: `p-combobox-20`
 - related search/selection references: `p-autocomplete-1`, `p-select-1`, `p-input-group-1`
diff --git a/apps/ui/skills/coss/references/primitives/popover.md b/apps/ui/skills/coss/references/primitives/popover.md
index 88eed648a..7b920da72 100644
--- a/apps/ui/skills/coss/references/primitives/popover.md
+++ b/apps/ui/skills/coss/references/primitives/popover.md
@@ -72,4 +72,5 @@ import {
 - baseline popover with form content: `p-popover-1`
 - close controls (icon + action button): `p-popover-2`
 - detached trigger handle pattern: `p-popover-3`
+- split-button confirmation flow with selectable occurrences: `p-popover-4`
 - tooltip-style popover usage example: `p-input-group-7`
diff --git a/apps/ui/skills/coss/references/primitives/radio-group.md b/apps/ui/skills/coss/references/primitives/radio-group.md
index d7ff91391..001a06158 100644
--- a/apps/ui/skills/coss/references/primitives/radio-group.md
+++ b/apps/ui/skills/coss/references/primitives/radio-group.md
@@ -10,6 +10,7 @@
 - If multiple options can be selected -> use CheckboxGroup instead.
 - If options are many and need search/filtering -> use Select or Combobox instead.
 - If the choices are binary (on/off) -> use Switch or Checkbox instead.
+- If each option reveals a content panel rather than selecting a value -> use Tabs instead.
 
 ## Install
 
@@ -85,7 +86,7 @@ const [value, setValue] = useState("default")
 
 ### More examples
 
-See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns.
+See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns. For a segmented presentation, use `p-radio-group-7`, `p-radio-group-8`, or `p-radio-group-9`; read `../segmented-control.md` before choosing the underlying primitive.
 
 ## Common pitfalls
 
@@ -99,4 +100,5 @@ See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-
 - with description: `p-radio-group-3`
 - card style: `p-radio-group-4`
 - form integration: `p-radio-group-5`
+- segmented, small/default/large: `p-radio-group-7`, `p-radio-group-8`, `p-radio-group-9`
 - form composition references: `p-form-1`, `p-form-2`, `p-input-group-24`
diff --git a/apps/ui/skills/coss/references/primitives/scroll-area.md b/apps/ui/skills/coss/references/primitives/scroll-area.md
index 524ce409e..3d9a9d55b 100644
--- a/apps/ui/skills/coss/references/primitives/scroll-area.md
+++ b/apps/ui/skills/coss/references/primitives/scroll-area.md
@@ -77,6 +77,16 @@ Fill viewport for flex layouts (e.g. sidebar footers with `mt-auto`):
 
 `fill` defaults to `false`. Use it only when the content wrapper must stretch to the viewport height—not for lists, comboboxes, or other content-sized scroll areas.
 
+Prevent scroll chaining into parent scrollers:
+
+```tsx
+<ScrollArea className="h-64" overscrollContain>
+  <div className="p-4">{/* Long content */}</div>
+</ScrollArea>
+```
+
+`overscrollContain` defaults to `false`. Opt in for nested surfaces (dialogs, sheets, drawers, popups, sidebars) where wheel/touch should not propagate past the scroll area.
+
 `ScrollArea` always renders both scrollbars internally -- horizontal scroll is driven by inner content width exceeding the container, not by a prop. Also supports `scrollbarGutter` for reserving scrollbar space.
 
 `clampContentMinWidth` defaults to `true` and sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scroll in vertical layouts (Base UI uses `min-width: fit-content`). Wide children (`w-max`, table min-width) still scroll horizontally. Set `clampContentMinWidth={false}` only if horizontal scroll breaks and the child has no explicit width.
@@ -91,6 +101,7 @@ See `p-scroll-area-1` through `p-scroll-area-5` for vertical, horizontal, both a
 - Nesting multiple scroll areas that compete for wheel/touch events.
 - Using scroll area where native page scrolling is simpler and clearer.
 - Using `fill` on every scroll area—default is `false`; opt in only for flex layouts that need full viewport height (e.g. `mt-auto` footers). Pair with `flex-1 min-h-0` on the root and `h-full flex-col` on the inner wrapper.
+- Forgetting `overscrollContain` on nested scroll surfaces (dialogs, popups, sidebars) when scroll should not chain to the page—default is `false`.
 - Disabling `clampContentMinWidth` unless horizontal scroll actually regresses—default `true` fixes spurious horizontal bars in vertical-first layouts.
 
 ## Useful particle references
diff --git a/apps/ui/skills/coss/references/primitives/switch.md b/apps/ui/skills/coss/references/primitives/switch.md
index 55db1b4fd..98efe15b5 100644
--- a/apps/ui/skills/coss/references/primitives/switch.md
+++ b/apps/ui/skills/coss/references/primitives/switch.md
@@ -74,6 +74,7 @@ Disabled switch:
 - customizing size: `p-switch-6`
 - card style: `p-switch-4`
 - form integration: `p-switch-5`
+- weekly availability editors with searchable time ranges: `p-switch-7`, `p-switch-8`, `p-switch-9`
 
 ## Common pitfalls
 
@@ -83,4 +84,4 @@ Disabled switch:
 
 ## Useful particle references
 
-See `p-switch-1` through `p-switch-6` for label, disabled, description, card, form, and size patterns.
+See `p-switch-1` through `p-switch-6` for label, disabled, description, card, form, and size patterns. See `p-switch-7` through `p-switch-9` for complete weekly availability editors using Switch, Combobox, Popover, and grouped controls.
diff --git a/apps/ui/skills/coss/references/primitives/tabs.md b/apps/ui/skills/coss/references/primitives/tabs.md
index 769e700e1..350a852c7 100644
--- a/apps/ui/skills/coss/references/primitives/tabs.md
+++ b/apps/ui/skills/coss/references/primitives/tabs.md
@@ -14,9 +14,11 @@ npx shadcn@latest add @coss/tabs
 Manual deps from docs:
 
 ```bash
-# No extra runtime dependency required for this primitive.
+npm install @base-ui/react class-variance-authority
 ```
 
+The CLI installs the shared `@coss/segmented-control` registry dependency automatically. For a manual installation, also copy `lib/segmented-control.ts` before copying the Tabs component.
+
 ## Canonical imports
 
 ```tsx
@@ -57,11 +59,20 @@ const [value, setValue] = useState("tab-1")
 </Tabs>
 ```
 
+Sizes are set on `TabsList` and inherited by its tabs. An individual `TabsTab` can override the inherited size.
+
+```tsx
+<TabsList size="sm">
+  <TabsTab value="tab-1">Tab 1</TabsTab>
+  <TabsTab size="lg" value="tab-2">Tab 2</TabsTab>
+</TabsList>
+```
+
 Underline variant:
 
 ```tsx
-<Tabs defaultValue="tab-1" variant="underline">
-  <TabsList>
+<Tabs defaultValue="tab-1">
+  <TabsList variant="underline">
     <TabsTab value="tab-1">Tab 1</TabsTab>
     <TabsTab value="tab-2">Tab 2</TabsTab>
   </TabsList>
@@ -79,8 +90,9 @@ Underline variant:
 
 - Mismatching `TabsTab value` and `TabsPanel value` pairs.
 - Using tabs for workflows that require route-level navigation instead.
+- Using tabs for a form value or reversible filter just because it looks like a segmented control. Read `../segmented-control.md` and choose semantics first.
 - Mounting expensive panel content without considering visibility/performance.
 
 ## Useful particle references
 
-See `p-tabs-1` through `p-tabs-4` for variants and orientations. Related: `p-toolbar-1`, `p-card-1`.
+See `p-tabs-1` through `p-tabs-4` for variants and orientations, plus `p-tabs-14` and `p-tabs-15` for small and large segmented Tabs. Related: `p-toolbar-1`, `p-card-1`.
diff --git a/apps/ui/skills/coss/references/primitives/toggle-group.md b/apps/ui/skills/coss/references/primitives/toggle-group.md
index 45d6ff556..66212ad55 100644
--- a/apps/ui/skills/coss/references/primitives/toggle-group.md
+++ b/apps/ui/skills/coss/references/primitives/toggle-group.md
@@ -53,7 +53,7 @@ Toggle group with icon buttons:
 </ToggleGroup>
 ```
 
-Multiple selection (default). For single selection use `type="single"`.
+Toggle Group is exclusive by default and may be cleared. Add `multiple` only when more than one item may be pressed.
 
 Controlled toggle group:
 
@@ -68,7 +68,7 @@ const [value, setValue] = useState(["bold"])
 
 ### More examples
 
-See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns.
+See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns. Read `../segmented-control.md` before applying segmented styling to a custom reversible mode.
 
 ## Common pitfalls
 
diff --git a/apps/ui/skills/coss/references/rules/styling.md b/apps/ui/skills/coss/references/rules/styling.md
index e65d8f4c1..a1345d4df 100644
--- a/apps/ui/skills/coss/references/rules/styling.md
+++ b/apps/ui/skills/coss/references/rules/styling.md
@@ -40,7 +40,7 @@ coss components use three CSS custom properties for typography:
 |---|---|---|
 | `--font-sans` | Body text, buttons, labels, most UI | `ui-sans-serif, system-ui, sans-serif` |
 | `--font-mono` | `<code>`, `<kbd>`, `<pre>`, code blocks | `ui-monospace, monospace` |
-| `--font-heading` | Dialog/AlertDialog titles, headings | Defaults to Inter (same as `--font-sans`) |
+| `--font-heading` | Dialog/AlertDialog titles, headings | `var(--font-sans)` (override with `--font-heading`) |
 
 **CLI setup (recommended):** `npx shadcn@latest init @coss/style` automatically installs `@coss/fonts` — Inter for `--font-sans` and `--font-heading`, Geist Mono for `--font-mono` — via `registry:font` items and configures them in `layout.tsx`.
 
@@ -48,10 +48,11 @@ coss components use three CSS custom properties for typography:
 
 ```tsx
 const inter = Inter({ variable: "--font-sans", subsets: ["latin"] });
-const interHeading = Inter({ variable: "--font-heading", subsets: ["latin"] });
 const geistMono = Geist_Mono({ variable: "--font-mono", subsets: ["latin"] });
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it (`--font-heading: var(--font-sans)`). For a separate heading font, wire `--font-heading` in your layout and set `--font-heading: var(--font-heading)` in `@theme inline`.
+
 **Common pitfall:** Next.js starters default to `--font-geist-sans` and `--font-geist-mono`, which do not match coss's `--font-sans` / `--font-mono`. Fonts will silently fall back to system UI. Always rename the variables or remap them.
 
 ## Do / Don't
diff --git a/apps/ui/skills/coss/references/segmented-control.md b/apps/ui/skills/coss/references/segmented-control.md
new file mode 100644
index 000000000..e2ce8fc57
--- /dev/null
+++ b/apps/ui/skills/coss/references/segmented-control.md
@@ -0,0 +1,60 @@
+# coss Segmented Control Pattern
+
+A segmented control is a shared visual treatment, not a standalone behavior. Choose the underlying primitive from the interaction before applying the styling.
+
+## Choose the behavior
+
+| Intent | Use | State model |
+| --- | --- | --- |
+| Choose one value, especially in a form | Radio Group | Exactly one mutually exclusive value |
+| Navigate to another URL or route | Links | Browser navigation with `aria-current="page"` on the current link |
+| Apply an exclusive filter or reversible mode | Toggle Group | At most one pressed item by default; the current item may be cleared |
+| Switch between associated content panels | Tabs | Each tab controls a matching panel |
+
+Do not use Tabs for navigation links, form values, or filters merely because the result should look segmented. Do not use Toggle Group when one value must always remain selected; use Radio Group instead.
+
+## Install a particle
+
+| Implementation | Small | Default | Large |
+| --- | --- | --- | --- |
+| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
+| Navigation links | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
+
+The CLI installs the relevant primitive and the shared `@coss/segmented-control` styling library automatically.
+
+COSS does not publish a Toggle Group segmented particle. Use the shared styling directly only when a reversible mode genuinely allows no active option.
+
+## Custom composition
+
+Install the styling library directly when none of the particles matches:
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+```tsx
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/lib/segmented-control"
+```
+
+Apply `segmentedControlRootClassName` to the group surface. Generate one item class with the matching state selector:
+
+```tsx
+const itemClassName = segmentedControlItemVariants({
+  size: "default",
+  state: "checked",
+})
+```
+
+- `state: "checked"` for Radio Group
+- `state: "current"` for navigation links
+- `state: "pressed"` for Toggle Group
+- `size: "sm" | "default" | "lg"`
+
+Use the exported Radio Group primitives for a custom segmented radio presentation so the native radio indicator is not rendered. Keep a default or controlled value when the interface requires one option to remain selected.
+
+Tabs do not use the shared state recipe because they retain their animated indicator. They import the shared size map and `segmentedControlItemLayoutClassName`: set `size="sm" | "default" | "lg"` on `TabsList`, and use a `TabsTab` size only as an item-level override.
+
+Reuse the shared root, item, and layout recipes instead of copying their classes into a new segmented particle. This keeps Tabs and the radio, navigation, and toggle implementations optically aligned.
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index fe22c36b7..50448f8ce 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { SiteCta } from "@coss/ui/shared/site-cta";
 import { SiteFooter } from "@coss/ui/shared/site-footer";
 import { SiteHeader } from "@coss/ui/shared/site-header";
@@ -21,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <div className="relative isolate flex min-h-svh flex-col overflow-clip [--header-height:4rem]">
diff --git a/bun.lock b/bun.lock
index 86b831bc1..917f63e11 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3,9 +3,6 @@
   "workspaces": {
     "": {
       "name": "cosscom",
-      "dependencies": {
-        "react-day-picker": "^9.13.0",
-      },
       "devDependencies": {
         "@biomejs/biome": "2.3.10",
         "husky": "^9.1.7",
@@ -19,12 +16,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@coss/ui": "workspace:*",
+        "@daypicker/react": "^10.0.1",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "dompurify": "^3.3.1",
         "lucide-react": "^0.555.0",
         "marked": "^17.0.1",
@@ -57,7 +55,7 @@
         "@origin-space/image-cropper": "^0.1.9",
         "@radix-ui/react-icons": "^1.3.2",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "1.1.1",
@@ -106,12 +104,13 @@
       "name": "ui",
       "version": "0.1.0",
       "dependencies": {
-        "@base-ui/react": "1.6.0",
+        "@base-ui/react": "1.8.0",
         "@coss/ui": "workspace:*",
+        "@daypicker/react": "10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -121,9 +120,9 @@
         "jotai": "^2.15.1",
         "lucide-react": "^0.555.0",
         "marked": "^18.0.5",
+        "motion": "12.42.0",
         "next": "16.2.5",
         "react": "^19.2.6",
-        "react-day-picker": "^9.13.0",
         "react-dom": "^19.2.6",
         "shadcn": "^4.1.0",
         "tailwind-merge": "^3.4.0",
@@ -176,7 +175,8 @@
       "name": "@coss/ui",
       "version": "0.0.0",
       "dependencies": {
-        "@base-ui/react": "1.6.0",
+        "@base-ui/react": "1.8.0",
+        "@daypicker/react": "^10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@shikijs/transformers": "^3.15.0",
@@ -203,6 +203,7 @@
       "peerDependencies": {
         "next": "^16.2.5",
         "react": "^19.2.6",
+        "tailwindcss": ">=4.1.17 <5",
       },
     },
   },
@@ -211,13 +212,9 @@
 
     "@antfu/ni": ["@antfu/ni@23.3.1", "", { "bin": { "na": "bin/na.mjs", "ni": "bin/ni.mjs", "nr": "bin/nr.mjs", "nu": "bin/nu.mjs", "nci": "bin/nci.mjs", "nlx": "bin/nlx.mjs", "nun": "bin/nun.mjs" } }, "sha512-C90iyzm/jLV7Lomv2UzwWUzRv9WZr1oRsFRKsX5HjQL4EXrbi9H/RtBkjCP+NF+ABZXUKpAa4F1dkoTaea4zHg=="],
 
-    "@asamuzakjp/css-color": ["@asamuzakjp/css-color@5.1.11", "", { "dependencies": { "@asamuzakjp/generational-cache": "^1.0.1", "@csstools/css-calc": "^3.2.0", "@csstools/css-color-parser": "^4.1.0", "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg=="],
-
-    "@asamuzakjp/dom-selector": ["@asamuzakjp/dom-selector@7.1.1", "", { "dependencies": { "@asamuzakjp/generational-cache": "^1.0.1", "@asamuzakjp/nwsapi": "^2.3.9", "bidi-js": "^1.0.3", "css-tree": "^3.2.1", "is-potential-custom-element-name": "^1.0.1" } }, "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ=="],
+    "@asamuzakjp/css-color": ["@asamuzakjp/css-color@6.0.7", "", { "dependencies": { "@csstools/css-calc": "^3.3.0", "@csstools/css-color-parser": "^4.1.10", "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0", "lru-cache": "^11.5.2" } }, "sha512-vC/bk1Lz7Tn/EfU9/apOTBk80/8dyGyWMowPoV1tJ52muDGsDqt2HPT2klrFUiY60MQmQv9q8yIht15JnBgDGw=="],
 
-    "@asamuzakjp/generational-cache": ["@asamuzakjp/generational-cache@1.0.1", "", {}, "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg=="],
-
-    "@asamuzakjp/nwsapi": ["@asamuzakjp/nwsapi@2.3.9", "", {}, "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q=="],
+    "@asamuzakjp/dom-selector": ["@asamuzakjp/dom-selector@8.3.2", "", { "dependencies": { "bidi-js": "^1.0.3", "css-tree": "^3.2.1", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.5.2" } }, "sha512-93Z1N+BQNXysodoicpOIyNh2drHfz/CTf9nnT0FEx72GJcIiwgydD7tGAr78j41LsYn3hlRn+LdGPuBLn1Bl8Q=="],
 
     "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "7.27.1", "js-tokens": "4.0.0", "picocolors": "1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
 
@@ -269,7 +266,7 @@
 
     "@babel/preset-typescript": ["@babel/preset-typescript@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "7.27.1", "@babel/helper-validator-option": "7.27.1", "@babel/plugin-syntax-jsx": "7.27.1", "@babel/plugin-transform-modules-commonjs": "7.27.1", "@babel/plugin-transform-typescript": "7.28.0" }, "peerDependencies": { "@babel/core": "7.28.4" } }, "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ=="],
 
-    "@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+    "@babel/runtime": ["@babel/runtime@7.29.7", "", {}, "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw=="],
 
     "@babel/runtime-corejs3": ["@babel/runtime-corejs3@7.28.2", "", { "dependencies": { "core-js-pure": "3.45.0" } }, "sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ=="],
 
@@ -279,9 +276,9 @@
 
     "@babel/types": ["@babel/types@7.28.4", "", { "dependencies": { "@babel/helper-string-parser": "7.27.1", "@babel/helper-validator-identifier": "7.27.1" } }, "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q=="],
 
-    "@base-ui/react": ["@base-ui/react@1.6.0", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.3.1", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw=="],
+    "@base-ui/react": ["@base-ui/react@1.8.0", "", { "dependencies": { "@babel/runtime": "^7.29.7", "@base-ui/utils": "0.4.0", "@floating-ui/react-dom": "^2.1.9", "@floating-ui/utils": "^0.2.12", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-P0/1sxo6SBVZOklKMIedvTWqw2s2IQzi9x5bIVsXu980cuSOD4NeuRSs+/L7LZQfDkZP/uRZyGPyfFl/B1oH+Q=="],
 
-    "@base-ui/utils": ["@base-ui/utils@0.3.1", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.2.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg=="],
+    "@base-ui/utils": ["@base-ui/utils@0.4.0", "", { "dependencies": { "@babel/runtime": "^7.29.7", "@floating-ui/utils": "^0.2.12", "reselect": "^5.2.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-bO9fz25kKtPf+aZVyfQrC0PDmJdmVni31W2hCS5/Owb+inwdIL3XU26pCPRPlt4LSxZrBgLwubXQXQlKaFEZzw=="],
 
     "@biomejs/biome": ["@biomejs/biome@2.3.10", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.10", "@biomejs/cli-darwin-x64": "2.3.10", "@biomejs/cli-linux-arm64": "2.3.10", "@biomejs/cli-linux-arm64-musl": "2.3.10", "@biomejs/cli-linux-x64": "2.3.10", "@biomejs/cli-linux-x64-musl": "2.3.10", "@biomejs/cli-win32-arm64": "2.3.10", "@biomejs/cli-win32-x64": "2.3.10" }, "bin": { "biome": "bin/biome" } }, "sha512-/uWSUd1MHX2fjqNLHNL6zLYWBbrJeG412/8H7ESuK8ewoRoMPUgHDebqKrPTx/5n6f17Xzqc9hdg3MEqA5hXnQ=="],
 
@@ -313,20 +310,22 @@
 
     "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
 
-    "@csstools/color-helpers": ["@csstools/color-helpers@6.1.0", "", {}, "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg=="],
+    "@csstools/color-helpers": ["@csstools/color-helpers@6.1.1", "", {}, "sha512-gLNsunvwf3mCi5u5o46/Z/JcJMnhbHSaZ69rkgPzNM3J4s8hWwpPUQB6/tt0EDFyCiWzxANlx+2LJwpYj4zS1w=="],
 
-    "@csstools/css-calc": ["@csstools/css-calc@3.2.1", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg=="],
+    "@csstools/css-calc": ["@csstools/css-calc@3.3.0", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ=="],
 
-    "@csstools/css-color-parser": ["@csstools/css-color-parser@4.1.9", "", { "dependencies": { "@csstools/color-helpers": "^6.1.0", "@csstools/css-calc": "^3.2.1" }, "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A=="],
+    "@csstools/css-color-parser": ["@csstools/css-color-parser@4.2.2", "", { "dependencies": { "@csstools/color-helpers": "^6.1.1", "@csstools/css-calc": "^3.3.0" }, "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-3QKjR/vxyjcSXBLgb6lP0S3MGdvwbmqSsvLPbYdVORqPDc8FX1HAJ0Spk38bxaRXgvENTA47tlhhbb5Z2e8hEg=="],
 
     "@csstools/css-parser-algorithms": ["@csstools/css-parser-algorithms@4.0.0", "", { "peerDependencies": { "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w=="],
 
-    "@csstools/css-syntax-patches-for-csstree": ["@csstools/css-syntax-patches-for-csstree@1.1.6", "", { "peerDependencies": { "css-tree": "^3.2.1" }, "optionalPeers": ["css-tree"] }, "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ=="],
+    "@csstools/css-syntax-patches-for-csstree": ["@csstools/css-syntax-patches-for-csstree@1.1.12", "", { "peerDependencies": { "css-tree": "^3.2.1" }, "optionalPeers": ["css-tree"] }, "sha512-3vLQK+dXxhBMR2Wx99PTCifE+vHtW2ndZWyla8yK813ev6oGhyn8Lja8jCyGAWTJ+LEYZK7EVtJxrDj8ztevJw=="],
 
     "@csstools/css-tokenizer": ["@csstools/css-tokenizer@4.0.0", "", {}, "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA=="],
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
+    "@daypicker/react": ["@daypicker/react@10.0.1", "", { "dependencies": { "react-day-picker": "10.0.1" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-lH4YQz4iMBWP8hsI1bD9Eg0T7t503IkSUR/WDGGkV5mKZvwVv+ukCkJz7yN+uVFBv7vHTK+ww7a5EvlkeFwPYQ=="],
+
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
 
     "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "3.1.1", "@dnd-kit/utilities": "3.2.2", "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
@@ -405,13 +404,13 @@
 
     "@exodus/bytes": ["@exodus/bytes@1.15.1", "", { "peerDependencies": { "@noble/hashes": "^1.8.0 || ^2.0.0" }, "optionalPeers": ["@noble/hashes"] }, "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q=="],
 
-    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
+    "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
 
-    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
+    "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
 
-    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.9", "", { "dependencies": { "@floating-ui/dom": "^1.8.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg=="],
 
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
 
     "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.4", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.1", "decimal.js": "10.6.0", "tslib": "2.8.1" } }, "sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA=="],
 
@@ -929,6 +928,8 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
+    "@tabby_ai/hijri-converter": ["@tabby_ai/hijri-converter@1.0.5", "", {}, "sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
@@ -959,9 +960,13 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "postcss": "^8.4.41", "tailwindcss": "4.1.17" } }, "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw=="],
 
-    "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
+    "@tanstack/react-store": ["@tanstack/react-store@0.11.1", "", { "dependencies": { "@tanstack/store": "0.11.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ=="],
+
+    "@tanstack/react-table": ["@tanstack/react-table@9.2.4", "", { "dependencies": { "@tanstack/react-store": "^0.11.1", "@tanstack/table-core": "9.2.4" }, "peerDependencies": { "react": ">=18" } }, "sha512-Rzp1Q4e0/nIgEjmISYR5HeEgLTNtrG+C7NFZf/AbCxPO5hg+zC3yNGwcoECigUk8SFzzvhXbd2rFdtP2ZiGrfA=="],
 
-    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+    "@tanstack/store": ["@tanstack/store@0.11.1", "", {}, "sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA=="],
+
+    "@tanstack/table-core": ["@tanstack/table-core@9.2.4", "", { "dependencies": { "@tanstack/store": "^0.11.1" } }, "sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw=="],
 
     "@tootallnate/quickjs-emscripten": ["@tootallnate/quickjs-emscripten@0.23.0", "", {}, "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="],
 
@@ -1073,7 +1078,7 @@
 
     "basic-ftp": ["basic-ftp@5.0.5", "", {}, "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg=="],
 
-    "bidi-js": ["bidi-js@1.0.3", "", { "dependencies": { "require-from-string": "^2.0.2" } }, "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw=="],
+    "bidi-js": ["bidi-js@1.1.0", "", { "dependencies": { "require-from-string": "^2.0.2" } }, "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg=="],
 
     "bl": ["bl@4.1.0", "", { "dependencies": { "buffer": "5.7.1", "inherits": "2.0.4", "readable-stream": "3.6.2" } }, "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="],
 
@@ -1269,7 +1274,7 @@
 
     "enhanced-resolve": ["enhanced-resolve@5.18.3", "", { "dependencies": { "graceful-fs": "4.2.11", "tapable": "2.2.2" } }, "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww=="],
 
-    "entities": ["entities@8.0.0", "", {}, "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA=="],
+    "entities": ["entities@8.1.0", "", {}, "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA=="],
 
     "env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="],
 
@@ -1363,6 +1368,8 @@
 
     "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],
 
+    "framer-motion": ["framer-motion@12.43.0", "", { "dependencies": { "motion-dom": "^12.43.0", "motion-utils": "^12.39.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g=="],
+
     "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
 
     "fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "4.2.11", "jsonfile": "6.1.0", "universalify": "2.0.1" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
@@ -1551,7 +1558,7 @@
 
     "isexe": ["isexe@3.1.1", "", {}, "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ=="],
 
-    "isomorphic-dompurify": ["isomorphic-dompurify@3.18.0", "", { "dependencies": { "dompurify": "^3.4.11", "jsdom": "^29.1.1" } }, "sha512-ajp0D8laIHeoYlhBTevpE2HUhqWaqLXFk6K/wV3Ok8kDraBZpZsifwVWaY8IfJntMRIo1VSksgKV+lXyet9Q7A=="],
+    "isomorphic-dompurify": ["isomorphic-dompurify@3.23.0", "", { "dependencies": { "dompurify": "^3.4.12", "jsdom": "^30.0.0" } }, "sha512-RuYFgdNApoTlR3QxVUyWdS/1ATpLEWEVg3H2tMImbfr6HkYPnuW1sdEtW4PRGlFhp04VbQQjcjXnucHYpXT44A=="],
 
     "jackspeak": ["jackspeak@4.1.1", "", { "dependencies": { "@isaacs/cliui": "8.0.2" } }, "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ=="],
 
@@ -1567,7 +1574,7 @@
 
     "jsbn": ["jsbn@1.1.0", "", {}, "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="],
 
-    "jsdom": ["jsdom@29.1.1", "", { "dependencies": { "@asamuzakjp/css-color": "^5.1.11", "@asamuzakjp/dom-selector": "^7.1.1", "@bramus/specificity": "^2.4.2", "@csstools/css-syntax-patches-for-csstree": "^1.1.3", "@exodus/bytes": "^1.15.0", "css-tree": "^3.2.1", "data-urls": "^7.0.0", "decimal.js": "^10.6.0", "html-encoding-sniffer": "^6.0.0", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.3.5", "parse5": "^8.0.1", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^6.0.1", "undici": "^7.25.0", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^8.0.1", "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.1", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.0.0" }, "optionalPeers": ["canvas"] }, "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q=="],
+    "jsdom": ["jsdom@30.0.1", "", { "dependencies": { "@asamuzakjp/css-color": "^6.0.5", "@asamuzakjp/dom-selector": "^8.3.0", "@bramus/specificity": "^2.4.2", "@csstools/css-syntax-patches-for-csstree": "^1.1.7", "@exodus/bytes": "^1.15.1", "css-tree": "^3.2.1", "data-urls": "^7.0.0", "decimal.js": "^10.6.0", "html-encoding-sniffer": "^6.0.0", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.5.2", "parse5": "^8.0.1", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^6.0.2", "undici": "^8.9.0", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^8.0.1", "whatwg-mimetype": "^5.0.0", "whatwg-url": "^17.1.0", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.2.3" }, "optionalPeers": ["canvas"] }, "sha512-52v7mUVUfNQVYYqE1lcdaymWL0njO7lTLUog6ZvW2U5KsbiLk/GnZlVJ+qx0xfNJZ6Gn+KSpPNE52vurbxZwrA=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
@@ -1777,6 +1784,12 @@
 
     "mkdirp": ["mkdirp@0.5.6", "", { "dependencies": { "minimist": "1.2.8" }, "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="],
 
+    "motion": ["motion@12.42.0", "", { "dependencies": { "framer-motion": "^12.42.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-Qhwvu9sVl5/URSq5CNzwMCpSKK8Uhnrwb6VO977kZyj/wOCS7mWebJUnBoHx5cZU1Zv8a9BD5CSICWKAlrLJgA=="],
+
+    "motion-dom": ["motion-dom@12.43.0", "", { "dependencies": { "motion-utils": "^12.39.0" } }, "sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag=="],
+
+    "motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "msw": ["msw@2.11.2", "", { "dependencies": { "@bundled-es-modules/cookie": "2.0.1", "@bundled-es-modules/statuses": "1.0.1", "@inquirer/confirm": "5.1.18", "@mswjs/interceptors": "0.39.6", "@open-draft/deferred-promise": "2.2.0", "@open-draft/until": "2.1.0", "@types/cookie": "0.6.0", "@types/statuses": "2.0.6", "graphql": "16.11.0", "headers-polyfill": "4.0.3", "is-node-process": "1.2.0", "outvariant": "1.4.3", "path-to-regexp": "6.3.0", "picocolors": "1.1.1", "rettime": "0.7.0", "strict-event-emitter": "0.5.1", "tough-cookie": "6.0.0", "type-fest": "4.41.0", "yargs": "17.7.2" }, "optionalDependencies": { "typescript": "5.9.2" }, "bin": { "msw": "cli/index.js" } }, "sha512-MI54hLCsrMwiflkcqlgYYNJJddY5/+S0SnONvhv1owOplvqohKSQyGejpNdUGyCwgs4IH7PqaNbPw/sKOEze9Q=="],
@@ -1929,7 +1942,7 @@
 
     "react-aria-components": ["react-aria-components@1.13.0", "", { "dependencies": { "@internationalized/date": "^3.10.0", "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.3", "@react-aria/collections": "^3.0.0", "@react-aria/dnd": "^3.11.3", "@react-aria/focus": "^3.21.2", "@react-aria/interactions": "^3.25.6", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.30.0", "@react-aria/ssr": "^3.9.10", "@react-aria/textfield": "^3.18.2", "@react-aria/toolbar": "3.0.0-beta.21", "@react-aria/utils": "^3.31.0", "@react-aria/virtualizer": "^4.1.10", "@react-stately/autocomplete": "3.0.0-beta.3", "@react-stately/layout": "^4.5.1", "@react-stately/selection": "^3.20.6", "@react-stately/table": "^3.15.1", "@react-stately/utils": "^3.10.8", "@react-stately/virtualizer": "^4.4.4", "@react-types/form": "^3.7.16", "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.44.0", "react-stately": "^3.42.0", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-t1mm3AVy/MjUJBZ7zrb+sFC5iya8Vvw3go3mGKtTm269bXGZho7BLA4IgT+0nOS3j+ku6ChVi8NEoQVFoYzJJA=="],
 
-    "react-day-picker": ["react-day-picker@9.13.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0", "date-fns-jalali": "^4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ=="],
+    "react-day-picker": ["react-day-picker@9.14.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "@tabby_ai/hijri-converter": "1.0.5", "date-fns": "^4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA=="],
 
     "react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="],
 
@@ -2213,7 +2226,7 @@
 
     "ui": ["ui@workspace:apps/ui"],
 
-    "undici": ["undici@7.28.0", "", {}, "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA=="],
+    "undici": ["undici@8.10.2", "", {}, "sha512-/y4/bH9YNU5hi9NIrpOuvGXFcxrj3CMrV+/AYpowAYTpHn8gX/XPFjNy766FPoYY0miQhdW977JFWKGNhBdwyQ=="],
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
 
@@ -2283,7 +2296,7 @@
 
     "whatwg-mimetype": ["whatwg-mimetype@5.0.0", "", {}, "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw=="],
 
-    "whatwg-url": ["whatwg-url@16.0.1", "", { "dependencies": { "@exodus/bytes": "^1.11.0", "tr46": "^6.0.0", "webidl-conversions": "^8.0.1" } }, "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw=="],
+    "whatwg-url": ["whatwg-url@17.1.0", "", { "dependencies": { "@exodus/bytes": "^1.15.1", "tr46": "^6.0.0", "webidl-conversions": "^8.0.1" } }, "sha512-3GeworPmc2ZfEEHP7lEbUfBX/L75wdEsi0rLNhXcXxnoN5jyq0SL5gCy06SGW2cyTIZdTvWIDQNQoza++vKeaw=="],
 
     "which": ["which@4.0.0", "", { "dependencies": { "isexe": "3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],
 
@@ -2325,6 +2338,10 @@
 
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
+    "@asamuzakjp/css-color/lru-cache": ["lru-cache@11.5.2", "", {}, "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g=="],
+
+    "@asamuzakjp/dom-selector/lru-cache": ["lru-cache@11.5.2", "", {}, "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g=="],
+
     "@babel/code-frame/picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -2337,6 +2354,8 @@
 
     "@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.4" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
+    "@daypicker/react/react-day-picker": ["react-day-picker@10.0.1", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w=="],
+
     "@dnd-kit/accessibility/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
 
     "@dnd-kit/core/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
@@ -2687,10 +2706,6 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "@tanstack/react-table/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
-
-    "@tanstack/react-table/react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "0.27.0" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],
-
     "@ts-morph/common/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@turbo/gen/commander": ["commander@10.0.1", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],
@@ -2735,6 +2750,8 @@
 
     "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
+    "data-urls/whatwg-url": ["whatwg-url@16.0.1", "", { "dependencies": { "@exodus/bytes": "^1.11.0", "tr46": "^6.0.0", "webidl-conversions": "^8.0.1" } }, "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw=="],
+
     "degenerator/ast-types": ["ast-types@0.13.4", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w=="],
 
     "del/rimraf": ["rimraf@3.0.2", "", { "dependencies": { "glob": "7.2.3" }, "bin": { "rimraf": "bin.js" } }, "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="],
@@ -2779,11 +2796,11 @@
 
     "inquirer/wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "4.3.0", "string-width": "4.2.3", "strip-ansi": "6.0.1" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
 
-    "isomorphic-dompurify/dompurify": ["dompurify@3.4.11", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw=="],
+    "isomorphic-dompurify/dompurify": ["dompurify@3.4.15", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-EUBjM+B+lkDE41iE82DDSCfkoPGfXx8IxFxPMjNzm/Uk4xDet77rTN9wqlxlVg71kK7XGuUMv6wUxJUwwv+Xyw=="],
 
-    "jsdom/lru-cache": ["lru-cache@11.5.1", "", {}, "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A=="],
+    "jsdom/lru-cache": ["lru-cache@11.5.2", "", {}, "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g=="],
 
-    "jsdom/tough-cookie": ["tough-cookie@6.0.1", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw=="],
+    "jsdom/tough-cookie": ["tough-cookie@6.0.2", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA=="],
 
     "log-symbols/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
 
@@ -2905,7 +2922,7 @@
 
     "ts-node/diff": ["diff@4.0.2", "", {}, "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="],
 
-    "ui/marked": ["marked@18.0.5", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w=="],
+    "ui/marked": ["marked@18.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-LEm4ga2YeI2T3GVHj9b0BaDPPk93LLTHMFeMyQbNIzPxc8vCI0y/scy0ZA6z6lXKyT9j9Nhl/OC6ZYKYGuFScA=="],
 
     "ui/shadcn": ["shadcn@4.1.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/plugin-transform-typescript": "^7.28.0", "@babel/preset-typescript": "^7.27.1", "@dotenvx/dotenvx": "^1.48.4", "@modelcontextprotocol/sdk": "^1.26.0", "@types/validate-npm-package-name": "^4.0.2", "browserslist": "^4.26.2", "commander": "^14.0.0", "cosmiconfig": "^9.0.0", "dedent": "^1.6.0", "deepmerge": "^4.3.1", "diff": "^8.0.2", "execa": "^9.6.0", "fast-glob": "^3.3.3", "fs-extra": "^11.3.1", "fuzzysort": "^3.1.0", "https-proxy-agent": "^7.0.6", "kleur": "^4.1.5", "msw": "^2.10.4", "node-fetch": "^3.3.2", "open": "^11.0.0", "ora": "^8.2.0", "postcss": "^8.5.6", "postcss-selector-parser": "^7.1.0", "prompts": "^2.4.2", "recast": "^0.23.11", "stringify-object": "^5.0.0", "tailwind-merge": "^3.0.1", "ts-morph": "^26.0.0", "tsconfig-paths": "^4.2.0", "validate-npm-package-name": "^7.0.1", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.6" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-3zETJ+0Ezj69FS6RL0HOkLKKAR5yXisXx1iISJdfLQfrUqj/VIQlanQi1Ukk+9OE+XHZVj4FQNTBSfbr2CyCYg=="],
 
diff --git a/package.json b/package.json
index b882cbd7a..eb9902dca 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
-  "dependencies": {
-    "react-day-picker": "^9.13.0"
-  },
+  "name": "cosscom",
+  "version": "0.0.1",
   "devDependencies": {
     "@biomejs/biome": "2.3.10",
     "husky": "^9.1.7",
@@ -13,7 +12,6 @@
     "bun": ">=1.3.1"
   },
   "license": "AGPL-3.0-or-later",
-  "name": "cosscom",
   "packageManager": "bun@1.3.1",
   "private": true,
   "scripts": {
@@ -27,7 +25,6 @@
     "test": "bun test --pass-with-no-tests",
     "typecheck": "turbo run typecheck"
   },
-  "version": "0.0.1",
   "workspaces": [
     "apps/*",
     "apps/examples/*",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b85027393..7bb9f1ba4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.8.0",
+    "@daypicker/react": "^10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@shikijs/transformers": "^3.15.0",
@@ -38,7 +39,8 @@
   "name": "@coss/ui",
   "peerDependencies": {
     "next": "^16.2.5",
-    "react": "^19.2.6"
+    "react": "^19.2.6",
+    "tailwindcss": ">=4.1.17 <5"
   },
   "scripts": {
     "clean": "rm -rf node_modules",
diff --git a/packages/ui/src/components/autocomplete.tsx b/packages/ui/src/components/autocomplete.tsx
index be8303d26..ca7a95469 100644
--- a/packages/ui/src/components/autocomplete.tsx
+++ b/packages/ui/src/components/autocomplete.tsx
@@ -223,20 +223,15 @@ export function AutocompleteRow({
   );
 }
 
-export function AutocompleteValue({
-  ...props
-}: AutocompletePrimitive.Value.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
-  );
-}
+export const AutocompleteValue: typeof AutocompletePrimitive.Value =
+  AutocompletePrimitive.Value;
 
 export function AutocompleteList({
   className,
   ...props
 }: AutocompletePrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <AutocompletePrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
@@ -283,16 +278,8 @@ export function AutocompleteStatus({
   );
 }
 
-export function AutocompleteCollection({
-  ...props
-}: AutocompletePrimitive.Collection.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Collection
-      data-slot="autocomplete-collection"
-      {...props}
-    />
-  );
-}
+export const AutocompleteCollection: typeof AutocompletePrimitive.Collection =
+  AutocompletePrimitive.Collection;
 
 export function AutocompleteTrigger({
   className,
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index 9a3cf1a92..6f658c559 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -11,7 +11,7 @@ export function Avatar({
   return (
     <AvatarPrimitive.Root
       className={cn(
-        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
+        "relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
         className,
       )}
       data-slot="avatar"
@@ -26,7 +26,10 @@ export function AvatarImage({
 }: AvatarPrimitive.Image.Props): React.ReactElement {
   return (
     <AvatarPrimitive.Image
-      className={cn("size-full object-cover", className)}
+      className={cn(
+        "absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible",
+        className,
+      )}
       data-slot="avatar-image"
       {...props}
     />
@@ -40,7 +43,7 @@ export function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
+        "absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted",
         className,
       )}
       data-slot="avatar-fallback"
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
index 9bcc5325f..01e3415a3 100644
--- a/packages/ui/src/components/calendar.tsx
+++ b/packages/ui/src/components/calendar.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { cn } from "@coss/ui/lib/utils";
+import { DayPicker } from "@daypicker/react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsUpDownIcon,
 } from "lucide-react";
 import type * as React from "react";
-import { DayPicker } from "react-day-picker";
 
 const buttonClassNames =
   "relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
@@ -28,7 +28,7 @@ export function Calendar({
     day: "size-(--cell-size) text-sm py-px",
     day_button: cn(
       buttonClassNames,
-      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
     ),
     dropdown: "absolute bg-popover inset-0 opacity-0",
     dropdown_root:
@@ -47,7 +47,7 @@ export function Calendar({
     range_middle: "range-middle",
     range_start: "range-start",
     today:
-      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
     week_number:
       "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
     weekday:
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 7d029f452..f539f83ba 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -162,7 +162,7 @@ export function CardTitle({
   ...props
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
-    className: cn("font-semibold text-lg leading-none", className),
+    className: cn("font-heading font-semibold text-lg leading-none", className),
     "data-slot": "card-title",
   };
 
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index b9d198d56..626c7ea83 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -18,8 +18,12 @@ export const ComboboxContext: React.Context<{
   multiple: false,
 });
 
-export function Combobox<Value, Multiple extends boolean | undefined = false>(
-  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+export function Combobox<
+  Value,
+  Multiple extends boolean | undefined = false,
+  Item = Value,
+>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,
 ): React.ReactElement {
   const chipsRef = React.useRef<Element | null>(null);
   return (
@@ -42,7 +46,7 @@ export function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       className={cn(
-        "min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
+        "min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
         sizeValue === "sm" ? "ps-1.5" : "ps-2",
         className,
       )}
@@ -210,7 +214,7 @@ export function ComboboxItem({
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="combobox-item"
@@ -232,7 +236,7 @@ export function ComboboxItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </ComboboxPrimitive.ItemIndicator>
-      <div className="col-start-2">{children}</div>
+      <div className="wrap-anywhere col-start-2 min-w-0">{children}</div>
     </ComboboxPrimitive.Item>
   );
 }
@@ -308,18 +312,15 @@ export function ComboboxRow({
   );
 }
 
-export function ComboboxValue({
-  ...props
-}: ComboboxPrimitive.Value.Props): React.ReactElement {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
-}
+export const ComboboxValue: typeof ComboboxPrimitive.Value =
+  ComboboxPrimitive.Value;
 
 export function ComboboxList({
   className,
   ...props
 }: ComboboxPrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <ComboboxPrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
@@ -361,13 +362,8 @@ export function ComboboxStatus({
   );
 }
 
-export function ComboboxCollection(
-  props: ComboboxPrimitive.Collection.Props,
-): React.ReactElement {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  );
-}
+export const ComboboxCollection: typeof ComboboxPrimitive.Collection =
+  ComboboxPrimitive.Collection;
 
 export function ComboboxChips({
   className,
@@ -382,7 +378,7 @@ export function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       className={cn(
-        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="combobox-chips"
@@ -437,6 +433,9 @@ export function ComboboxChipRemove(
   );
 }
 
+export const createComboboxItems: typeof ComboboxPrimitive.createItems =
+  ComboboxPrimitive.createItems;
+
 export const useComboboxFilter: typeof ComboboxPrimitive.useFilter =
   ComboboxPrimitive.useFilter;
 
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index 7d43f5c06..564c90d72 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -200,11 +200,7 @@ export function CommandGroupLabel({
   );
 }
 
-export function CommandCollection({
-  ...props
-}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {
-  return <AutocompleteCollection data-slot="command-collection" {...props} />;
-}
+export const CommandCollection = AutocompleteCollection;
 
 export function CommandItem({
   className,
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 9b4ce6549..6790ce5fb 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -203,7 +203,7 @@ export function DialogPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
index 19d9f8c3a..ba453ae3e 100644
--- a/packages/ui/src/components/drawer.tsx
+++ b/packages/ui/src/components/drawer.tsx
@@ -119,7 +119,7 @@ export function DrawerViewport({
   return (
     <DrawerPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]",
+        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]",
         "touch-none",
         position === "bottom" && "grid grid-rows-[1fr_auto] pt-12",
         position === "top" && "grid grid-rows-[auto_1fr] pb-12",
@@ -339,7 +339,11 @@ export function DrawerPanel({
 
   if (scrollable) {
     return (
-      <ScrollArea className="touch-auto" scrollFade={scrollFade}>
+      <ScrollArea
+        className="touch-auto"
+        overscrollContain
+        scrollFade={scrollFade}
+      >
         {content}
       </ScrollArea>
     );
@@ -523,8 +527,8 @@ export function DrawerMenuCheckboxItem({
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
         variant === "switch"
-          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
-          : "grid-cols-[1rem_1fr] pe-4",
+          ? "grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_minmax(0,1fr)] pe-4",
         className,
       )}
       data-slot="drawer-menu-checkbox-item"
@@ -536,7 +540,7 @@ export function DrawerMenuCheckboxItem({
     >
       {variant === "switch" ? (
         <>
-          <span className="col-start-1">{children}</span>
+          <span className="wrap-anywhere col-start-1 min-w-0">{children}</span>
           <CheckboxPrimitive.Indicator
             className="inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
             keepMounted
@@ -561,7 +565,7 @@ export function DrawerMenuCheckboxItem({
               <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
             </svg>
           </CheckboxPrimitive.Indicator>
-          <span className="col-start-2">{children}</span>
+          <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
         </>
       )}
     </CheckboxPrimitive.Root>
@@ -596,7 +600,7 @@ export function DrawerMenuRadioItem({
     <RadioPrimitive.Root
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
-        "grid-cols-[1rem_1fr] items-center pe-4",
+        "grid-cols-[1rem_minmax(0,1fr)] items-center pe-4",
         className,
       )}
       data-slot="drawer-menu-radio-item"
@@ -620,7 +624,7 @@ export function DrawerMenuRadioItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </RadioPrimitive.Indicator>
-      <span className="col-start-2">{children}</span>
+      <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
     </RadioPrimitive.Root>
   );
 }
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
index 0b322b2f3..e8f52d1c2 100644
--- a/packages/ui/src/components/input-group.tsx
+++ b/packages/ui/src/components/input-group.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
   {
     defaultVariants: {
       align: "inline-start",
@@ -56,7 +56,9 @@ export function InputGroupAddon({
       data-align={align}
       data-slot="input-group-addon"
       onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-        const target = e.target as HTMLElement;
+        const target = e.target as Element;
+        if (!e.currentTarget.contains(target)) return;
+
         const isInteractive = target.closest(
           "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
         );
@@ -82,7 +84,7 @@ export function InputGroupText({
   return (
     <span
       className={cn(
-        "line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
+        "flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 19d279441..f5c248c5e 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -22,7 +22,7 @@ export function Input({
   ...props
 }: InputProps): React.ReactElement {
   const inputClassName = cn(
-    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5",
+    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]",
     size === "sm" &&
       "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
@@ -37,7 +37,7 @@ export function Input({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
diff --git a/packages/ui/src/components/number-field.tsx b/packages/ui/src/components/number-field.tsx
index b03095116..80c993e83 100644
--- a/packages/ui/src/components/number-field.tsx
+++ b/packages/ui/src/components/number-field.tsx
@@ -43,7 +43,7 @@ export function NumberFieldGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
+        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
         className,
       )}
       data-slot="number-field-group"
@@ -95,7 +95,7 @@ export function NumberFieldInput({
   return (
     <NumberFieldPrimitive.Input
       className={cn(
-        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
+        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
         className,
       )}
       data-slot="number-field-input"
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 5184ca097..914d036b8 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -11,12 +11,14 @@ export function ScrollArea({
   scrollbarGutter = false,
   fill = false,
   clampContentMinWidth = true,
+  overscrollContain = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
   fill?: boolean;
   clampContentMinWidth?: boolean;
+  overscrollContain?: boolean;
 }): React.ReactElement {
   return (
     <ScrollAreaPrimitive.Root
@@ -25,7 +27,9 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+          "h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          overscrollContain &&
+            "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
           scrollbarGutter &&
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 4cbe94588..5cb735436 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -178,7 +178,7 @@ export function SelectItem({
   return (
     <SelectPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="select-item"
@@ -200,7 +200,7 @@ export function SelectItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </SelectPrimitive.ItemIndicator>
-      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+      <SelectPrimitive.ItemText className="wrap-anywhere col-start-2 min-w-0">
         {children}
       </SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
index 17eae1b54..d1122828a 100644
--- a/packages/ui/src/components/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -214,7 +214,7 @@ export function SheetPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 6a3d172f9..88e23680b 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -412,7 +412,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn(
           "flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden",
diff --git a/packages/ui/src/components/size-transition.tsx b/packages/ui/src/components/size-transition.tsx
deleted file mode 100644
index 0432e194c..000000000
--- a/packages/ui/src/components/size-transition.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-"use client";
-
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-
-type Size = { width: number; height: number };
-
-export type SizeTransitionAxis = "both" | "width" | "height";
-
-type SizeTransitionContextValue = {
-  currentRef: React.RefObject<HTMLElement | null>;
-  transitioning: boolean;
-  startingStyle: boolean;
-};
-
-const SizeTransitionContext: React.Context<SizeTransitionContextValue | null> =
-  React.createContext<SizeTransitionContextValue | null>(null);
-
-function useSizeTransitionContext(): SizeTransitionContextValue {
-  const context = React.useContext(SizeTransitionContext);
-  if (!context) {
-    throw new Error(
-      "`SizeTransitionPanel` must be used within a `SizeTransition`.",
-    );
-  }
-  return context;
-}
-
-function measureSize(element: HTMLElement): Size {
-  return { width: element.offsetWidth, height: element.offsetHeight };
-}
-
-function freezeSize(
-  element: HTMLElement,
-  size: Size,
-  axis: SizeTransitionAxis,
-) {
-  if (axis !== "height") {
-    element.style.setProperty("--size-width", `${size.width}px`);
-  }
-  if (axis !== "width") {
-    element.style.setProperty("--size-height", `${size.height}px`);
-  }
-}
-
-function releaseSize(element: HTMLElement) {
-  element.style.removeProperty("--size-width");
-  element.style.removeProperty("--size-height");
-}
-
-/**
- * Runs `callback` once every animation currently running on `element` has
- * finished. Falls back to running synchronously when the Web Animations API is
- * unavailable (e.g. jsdom) or nothing is animating.
- */
-function runAfterAnimations(
-  element: HTMLElement | null,
-  callback: () => void,
-  signal: AbortSignal,
-): number {
-  if (!element || typeof element.getAnimations !== "function") {
-    callback();
-    return -1;
-  }
-  return requestAnimationFrame(() => {
-    if (signal.aborted) {
-      return;
-    }
-    const animations = element.getAnimations();
-    if (animations.length === 0) {
-      callback();
-      return;
-    }
-    Promise.all(animations.map((animation) => animation.finished))
-      .then(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      })
-      .catch(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      });
-  });
-}
-
-export type SizeTransitionProps = useRender.ComponentProps<"div"> & {
-  /** Value whose change triggers a size animation and content cross-fade. */
-  transitionKey: React.Key;
-  /**
-   * Which dimensions to animate. Non-animated dimensions stay `auto`.
-   * @default "both"
-   */
-  axis?: SizeTransitionAxis;
-};
-
-/**
- * Animates between the sizes of successive `SizeTransitionPanel` children and
- * cross-fades outgoing content into incoming content when `transitionKey`
- * changes.
- *
- * Size is exposed as `--size-width` / `--size-height` (pixels during a
- * transition, `auto` at rest). Opt in via classes such as
- * `w-(--size-width,auto) h-(--size-height,auto) transition-[width,height]`.
- */
-export function SizeTransition({
-  axis = "both",
-  transitionKey,
-  children,
-  render,
-  ...props
-}: SizeTransitionProps): React.ReactElement {
-  const rootRef = React.useRef<HTMLElement | null>(null);
-  const currentRef = React.useRef<HTMLElement | null>(null);
-  const previousRef = React.useRef<HTMLDivElement | null>(null);
-  const snapshotRef = React.useRef<HTMLElement | null>(null);
-  const committedSizeRef = React.useRef<Size | null>(null);
-  const previousKeyRef = React.useRef<React.Key>(transitionKey);
-  const isFirstRenderRef = React.useRef(true);
-
-  const [previousContent, setPreviousContent] =
-    React.useState<HTMLElement | null>(null);
-  const [previousSize, setPreviousSize] = React.useState<Size | null>(null);
-  const [startingStyle, setStartingStyle] = React.useState(false);
-  const [sizeTransitioning, setSizeTransitioning] = React.useState(false);
-
-  const hasPreviousLayer = previousContent !== null;
-
-  useIsoLayoutEffect(() => {
-    const element = rootRef.current;
-    if (!element) {
-      return;
-    }
-
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      previousKeyRef.current = transitionKey;
-      committedSizeRef.current = measureSize(element);
-      return;
-    }
-
-    if (previousKeyRef.current === transitionKey) {
-      return;
-    }
-    previousKeyRef.current = transitionKey;
-
-    const outgoingContent = snapshotRef.current;
-    const previousSizeValue = committedSizeRef.current;
-
-    setSizeTransitioning(true);
-
-    if (outgoingContent) {
-      setPreviousContent(outgoingContent);
-      setStartingStyle(true);
-    }
-
-    releaseSize(element);
-    currentRef.current?.style.removeProperty("width");
-    currentRef.current?.style.setProperty("transition", "none");
-    const newSize = measureSize(element);
-    committedSizeRef.current = newSize;
-
-    // Pin the entering panel to its final width so content is clipped, not reflowed.
-    if (axis !== "height") {
-      currentRef.current?.style.setProperty("width", `${newSize.width}px`);
-    }
-
-    if (previousSizeValue) {
-      freezeSize(element, previousSizeValue, axis);
-      setPreviousSize(previousSizeValue);
-    }
-
-    const sizeAbort = new AbortController();
-    const fadeAbort = new AbortController();
-    let sizeFinishFrame = -1;
-    let fadeFinishFrame = -1;
-
-    const frame = requestAnimationFrame(() => {
-      // Force a reflow so starting styles register before ending styles apply.
-      void element.offsetHeight;
-
-      freezeSize(element, newSize, axis);
-      currentRef.current?.style.removeProperty("transition");
-      ReactDOM.flushSync(() => setStartingStyle(false));
-
-      sizeFinishFrame = runAfterAnimations(
-        element,
-        () => {
-          releaseSize(element);
-          currentRef.current?.style.removeProperty("width");
-          setSizeTransitioning(false);
-        },
-        sizeAbort.signal,
-      );
-      fadeFinishFrame = runAfterAnimations(
-        currentRef.current,
-        () => {
-          setPreviousContent(null);
-          setPreviousSize(null);
-          snapshotRef.current = null;
-        },
-        fadeAbort.signal,
-      );
-    });
-
-    return () => {
-      sizeAbort.abort();
-      fadeAbort.abort();
-      cancelAnimationFrame(frame);
-      cancelAnimationFrame(sizeFinishFrame);
-      cancelAnimationFrame(fadeFinishFrame);
-    };
-  }, [axis, transitionKey]);
-
-  useIsoLayoutEffect(() => {
-    const container = previousRef.current;
-    if (!container || !previousContent) {
-      return;
-    }
-    container.replaceChildren(previousContent);
-  }, [previousContent]);
-
-  // Declared last so the transition effect reads the prior render's snapshot.
-  useIsoLayoutEffect(() => {
-    const source = currentRef.current;
-    if (!source) {
-      return;
-    }
-    const clone = source.cloneNode(true) as HTMLElement;
-    clone.removeAttribute("data-current");
-    clone.removeAttribute("data-starting-style");
-    clone.style.removeProperty("width");
-    clone.style.removeProperty("transition");
-    snapshotRef.current = clone;
-  });
-
-  const contextValue = React.useMemo<SizeTransitionContextValue>(
-    () => ({
-      currentRef,
-      startingStyle,
-      transitioning: hasPreviousLayer || sizeTransitioning,
-    }),
-    [hasPreviousLayer, sizeTransitioning, startingStyle],
-  );
-
-  const content = hasPreviousLayer ? (
-    <React.Fragment>
-      {children}
-      {/* After `children` so inserting this layer never remounts the panel. */}
-      <div
-        data-ending-style={startingStyle ? undefined : ""}
-        data-previous=""
-        inert
-        key="previous"
-        ref={previousRef}
-        style={{
-          left: 0,
-          position: "absolute",
-          top: 0,
-          ...(previousSize
-            ? { height: previousSize.height, width: previousSize.width }
-            : null),
-        }}
-      />
-    </React.Fragment>
-  ) : (
-    children
-  );
-
-  const defaultProps = {
-    className: "relative",
-    "data-slot": "size-transition",
-  };
-
-  const element = useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props, { children: content }),
-    render,
-    ref: rootRef,
-    state: { transitioning: sizeTransitioning },
-    stateAttributesMapping: {
-      transitioning: (value) => (value ? { "data-transitioning": "" } : null),
-    },
-  });
-
-  return (
-    <SizeTransitionContext.Provider value={contextValue}>
-      {element}
-    </SizeTransitionContext.Provider>
-  );
-}
-
-export type SizeTransitionPanelProps = useRender.ComponentProps<"div">;
-
-/**
- * Active content layer of a `SizeTransition`. Uses the `render` element as
- * `data-current` so no extra wrapper is added.
- */
-export function SizeTransitionPanel({
-  render,
-  ...props
-}: SizeTransitionPanelProps): React.ReactElement {
-  const { currentRef, startingStyle, transitioning } =
-    useSizeTransitionContext();
-
-  return useRender({
-    defaultTagName: "div",
-    props,
-    render,
-    ref: currentRef,
-    state: { current: true, startingStyle: transitioning && startingStyle },
-    stateAttributesMapping: {
-      current: () => ({
-        "data-current": "",
-        "data-slot": "size-transition-panel",
-      }),
-      startingStyle: (value) => (value ? { "data-starting-style": "" } : null),
-    },
-  });
-}
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 136eb35a0..1e0baefdb 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -1,10 +1,19 @@
 "use client";
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import {
+  type SegmentedControlSize,
+  segmentedControlItemLayoutClassName,
+  segmentedControlItemSizeClassNames,
+} from "@coss/ui/lib/segmented-control";
 import { cn } from "@coss/ui/lib/utils";
-import type React from "react";
+import * as React from "react";
 
-export type TabsVariant = "default" | "underline";
+type TabsVariant = "default" | "underline";
+type TabsSize = SegmentedControlSize;
+
+const TabsListContext: React.Context<TabsSize> =
+  React.createContext<TabsSize>("default");
 
 export function Tabs({
   className,
@@ -24,10 +33,12 @@ export function Tabs({
 
 export function TabsList({
   variant = "default",
+  size = "default",
   className,
   children,
   ...props
 }: TabsPrimitive.List.Props & {
+  size?: TabsSize;
   variant?: TabsVariant;
 }): React.ReactElement {
   return (
@@ -40,10 +51,13 @@ export function TabsList({
           : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
         className,
       )}
+      data-size={size}
       data-slot="tabs-list"
       {...props}
     >
-      {children}
+      <TabsListContext.Provider value={size}>
+        {children}
+      </TabsListContext.Provider>
       <TabsPrimitive.Indicator
         className={cn(
           "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
@@ -59,14 +73,23 @@ export function TabsList({
 
 export function TabsTab({
   className,
+  size,
   ...props
-}: TabsPrimitive.Tab.Props): React.ReactElement {
+}: TabsPrimitive.Tab.Props & {
+  size?: TabsSize;
+}): React.ReactElement {
+  const contextSize: TabsSize = React.useContext(TabsListContext);
+  const resolvedSize: TabsSize = size ?? contextSize;
+
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm",
+        segmentedControlItemLayoutClassName,
+        segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
+      data-size={resolvedSize}
       data-slot="tabs-tab"
       {...props}
     />
@@ -86,4 +109,10 @@ export function TabsPanel({
   );
 }
 
-export { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  type TabsSize,
+  type TabsVariant,
+};
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 36c7e737a..862a4ff14 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -23,7 +23,7 @@ export function Textarea({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
@@ -40,7 +40,7 @@ export function Textarea({
         render={(defaultProps: React.ComponentProps<"textarea">) => (
           <textarea
             className={cn(
-              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5",
               size === "sm" &&
                 "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
               size === "lg" &&
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 413a10c39..a1dabb8ca 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -124,7 +124,8 @@ function Toasts({
                 "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:opacity-0",
                 // Ending animations (direction-aware)
-                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
@@ -208,7 +209,7 @@ function AnchoredToasts({
           return (
             <Toast.Positioner
               key={toast.id}
-              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              className="z-60 max-w-[min(--spacing(64),var(--available-width))]"
               data-slot="toast-positioner"
               sideOffset={positionerProps.sideOffset ?? 4}
               toast={toast}
diff --git a/packages/ui/src/fonts/CalSans-Regular.woff2 b/packages/ui/src/fonts/CalSans-Regular.woff2
deleted file mode 100644
index 6c83a2df3..000000000
Binary files a/packages/ui/src/fonts/CalSans-Regular.woff2 and /dev/null differ
diff --git a/packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2 b/packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2
deleted file mode 100644
index 630fb2c91..000000000
Binary files a/packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2 and /dev/null differ
diff --git a/packages/ui/src/fonts/CalSansVF.woff2 b/packages/ui/src/fonts/CalSansVF.woff2
new file mode 100644
index 000000000..71007270d
Binary files /dev/null and b/packages/ui/src/fonts/CalSansVF.woff2 differ
diff --git a/packages/ui/src/fonts/README.md b/packages/ui/src/fonts/README.md
index 6e03ca1bc..7f73ce129 100644
--- a/packages/ui/src/fonts/README.md
+++ b/packages/ui/src/fonts/README.md
@@ -7,12 +7,12 @@ This directory contains shared font files and configurations used across all app
 Import fonts directly from the shared UI package:
 
 ```tsx
-import { fontSans, fontHeading } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${fontSans.variable} ${fontHeading.variable}`}>
+      <body className={`${fontSans.variable} ${fontMono.variable} font-sans`}>
         {children}
       </body>
     </html>
@@ -20,10 +20,29 @@ export default function RootLayout({ children }) {
 }
 ```
 
+`--font-heading` is aliased to `--font-sans` in the theme (`--font-heading: var(--font-sans)`). Apply the `font-heading` class on titles and headings, with `font-bold` or `font-semibold` as needed.
+
 ## Available Fonts
 
-- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes)
-- `fontHeading` - Cal Sans Regular font
+- `fontSans` — Cal Sans 2.0 variable font (`CalSansVF.woff2`)
+- `fontHeading` — Alias of `fontSans`; use when wiring a separate `--font-heading` variable
+- `fontMono` — Paper Mono for code and monospace UI
+
+## Separate heading font
+
+To use a different family for headings, set `--font-heading` in your layout and point the theme token at it:
+
+```tsx
+import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+
+<body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+```
+
+```css
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
 
 ## Adding New Fonts
 
diff --git a/packages/ui/src/fonts/index.ts b/packages/ui/src/fonts/index.ts
index ce0cc17c5..281919c17 100644
--- a/packages/ui/src/fonts/index.ts
+++ b/packages/ui/src/fonts/index.ts
@@ -8,14 +8,10 @@ export const fontMono = localFont({
 
 export const fontSans = localFont({
   display: "swap",
-  src: "./CalSansUI[wght,GEOM].woff2",
+  src: "./CalSansVF.woff2",
   variable: "--font-sans",
   weight: "300 700",
 });
 
-export const fontHeading = localFont({
-  display: "swap",
-  src: "./CalSans-Regular.woff2",
-  variable: "--font-heading",
-  weight: "400 600",
-});
+/** Same variable font as `fontSans`; optional when wiring a separate `--font-heading`. */
+export const fontHeading = fontSans;
diff --git a/packages/ui/src/lib/segmented-control.ts b/packages/ui/src/lib/segmented-control.ts
new file mode 100644
index 000000000..e70789c82
--- /dev/null
+++ b/packages/ui/src/lib/segmented-control.ts
@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlRootClassName =
+  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
+
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
+export const segmentedControlItemVariants = cva(
+  [
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+    segmentedControlItemLayoutClassName,
+  ],
+  {
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: segmentedControlItemSizeClassNames,
+      state: {
+        checked:
+          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+        current:
+          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+        pressed:
+          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      },
+    },
+  },
+);
diff --git a/packages/ui/src/shared/page-header.tsx b/packages/ui/src/shared/page-header.tsx
index 295ffcd57..35cd3dbd1 100644
--- a/packages/ui/src/shared/page-header.tsx
+++ b/packages/ui/src/shared/page-header.tsx
@@ -20,7 +20,7 @@ function PageHeaderHeading({
 }: React.ComponentProps<"h1">) {
   return (
     <h1
-      className={cn("font-heading text-4xl lg:text-5xl", className)}
+      className={cn("font-bold font-heading text-4xl lg:text-5xl", className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/shared/products-dropdown.tsx b/packages/ui/src/shared/products-dropdown.tsx
index de936ba34..306f9ee71 100644
--- a/packages/ui/src/shared/products-dropdown.tsx
+++ b/packages/ui/src/shared/products-dropdown.tsx
@@ -67,7 +67,7 @@ export function ProductsDropdown({ items }: ProductsDropdownProps) {
               // biome-ignore lint/a11y/useAnchorContent: This is intentional
               render={isExternal ? <a href={href} /> : <Link href={href} />}
             >
-              <span className="font-heading in-data-highlighted:text-foreground text-muted-foreground">
+              <span className="font-bold font-heading in-data-highlighted:text-foreground text-muted-foreground">
                 {item.label}
               </span>
               {item.upcoming && (
diff --git a/packages/ui/src/shared/site-footer.tsx b/packages/ui/src/shared/site-footer.tsx
index f40835d2f..7ab177aa3 100644
--- a/packages/ui/src/shared/site-footer.tsx
+++ b/packages/ui/src/shared/site-footer.tsx
@@ -10,7 +10,10 @@ export function SiteFooter() {
       <div className="container flex w-full items-center justify-center gap-2 px-4 sm:px-6">
         <p>
           © {new Date().getFullYear()}{" "}
-          <Link className="font-heading text-foreground text-lg" href="/">
+          <Link
+            className="font-bold font-heading text-foreground [font-variation-settings:'GEOM'_50,'opsz'_32]"
+            href="/"
+          >
             coss.com
           </Link>{" "}
           – open source, open heart, open mind.
diff --git a/packages/ui/src/shared/site-header.tsx b/packages/ui/src/shared/site-header.tsx
index 37b55a49d..f53594e08 100644
--- a/packages/ui/src/shared/site-header.tsx
+++ b/packages/ui/src/shared/site-header.tsx
@@ -21,7 +21,7 @@ export function SiteHeader({
     <header className="sticky top-0 z-40 w-full bg-sidebar/80 backdrop-blur-sm before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border/64">
       <div className="container relative flex h-(--header-height) w-full items-center justify-between gap-2 px-4 sm:px-6">
         {mobileNav}
-        <div className="-mt-0.5 flex shrink-0 items-center gap-1.5 font-heading text-2xl sm:text-[1.625em]">
+        <div className="flex shrink-0 items-center gap-1.5 font-bold font-heading text-[1.375em] [font-variation-settings:'GEOM'_50,'opsz'_32] sm:text-2xl">
           {isExternal ? (
             <a aria-label="Home" href={gatewayHome}>
               coss.com
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 1dd31e4d2..c81abdc4b 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -12,7 +12,7 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-sans);
-  --font-heading: var(--font-heading);
+  --font-heading: var(--font-sans);
   --font-mono: var(--font-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
diff --git a/packages/ui/test/components/input-group.test.tsx b/packages/ui/test/components/input-group.test.tsx
new file mode 100644
index 000000000..2b979593d
--- /dev/null
+++ b/packages/ui/test/components/input-group.test.tsx
@@ -0,0 +1,116 @@
+import { describe, expect, mock, test } from "bun:test";
+import type * as React from "react";
+
+function componentMock() {
+  return null;
+}
+
+mock.module("@coss/ui/components/input", () => ({
+  Input: componentMock,
+}));
+
+mock.module("@coss/ui/components/textarea", () => ({
+  Textarea: componentMock,
+}));
+
+mock.module("@coss/ui/lib/utils", () => ({
+  cn: (...inputs: unknown[]) => inputs.filter(Boolean).join(" "),
+}));
+
+const { InputGroupAddon } = await import("../../src/components/input-group");
+
+type MouseDownHandler = NonNullable<React.ComponentProps<"div">["onMouseDown"]>;
+
+function getMouseDownHandler(): MouseDownHandler {
+  const element = InputGroupAddon({});
+  const props = element.props as React.ComponentProps<"div">;
+
+  if (!props.onMouseDown) {
+    throw new Error("InputGroupAddon does not have an onMouseDown handler");
+  }
+
+  return props.onMouseDown;
+}
+
+function createMouseDownEvent({
+  contains,
+  interactive = false,
+}: {
+  contains: boolean;
+  interactive?: boolean;
+}) {
+  let focused = false;
+  let prevented = false;
+
+  const target = {
+    closest: () => (interactive ? {} : null),
+  } as unknown as Element;
+  const input = {
+    focus: () => {
+      focused = true;
+    },
+  };
+  const parentElement = {
+    querySelector: (selector: string) => {
+      if (selector === "input, textarea") return input;
+      if (selector === "input:focus, textarea:focus") return null;
+      return null;
+    },
+  };
+  const currentTarget = {
+    contains: () => contains,
+    parentElement,
+  } as unknown as HTMLDivElement;
+  const event = {
+    currentTarget,
+    preventDefault: () => {
+      prevented = true;
+    },
+    target,
+  } as unknown as React.MouseEvent<HTMLDivElement>;
+
+  return {
+    event,
+    wasFocused: () => focused,
+    wasPrevented: () => prevented,
+  };
+}
+
+describe("InputGroupAddon", () => {
+  test("focuses the input for non-interactive content inside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: true,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(true);
+    expect(wasFocused()).toBe(true);
+  });
+
+  test("does not focus the input for interactive content inside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: true,
+      interactive: true,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(false);
+    expect(wasFocused()).toBe(false);
+  });
+
+  test("ignores events from portaled descendants outside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: false,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(false);
+    expect(wasFocused()).toBe(false);
+  });
+});