From 51371c978281f472ae05313c568941234fd8e2b1 Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:11:36 +0800
Subject: [PATCH 1/7] refactor(confirmer): compose action with
 AlertDialogAction

Replace the raw Button with AlertDialogAction, move the description
inside AlertDialogHeader to match the alert-dialog composition, and
group exports at the bottom per shadcn convention.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../v4/src/registry/new-york/ui/confirmer.tsx | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/v4/src/registry/new-york/ui/confirmer.tsx b/apps/v4/src/registry/new-york/ui/confirmer.tsx
index f662ef2..620528d 100644
--- a/apps/v4/src/registry/new-york/ui/confirmer.tsx
+++ b/apps/v4/src/registry/new-york/ui/confirmer.tsx
@@ -4,6 +4,7 @@ import { createCallable } from "react-call";
 
 import {
   AlertDialog,
+  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -11,7 +12,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
 
 interface ConfirmOptions {
   title?: React.ReactNode;
@@ -19,7 +19,7 @@ interface ConfirmOptions {
   cancelText?: React.ReactNode;
   actionText?: React.ReactNode;
   CancelProps?: React.ComponentProps<typeof AlertDialogCancel>;
-  ActionProps?: React.ComponentProps<typeof Button>;
+  ActionProps?: React.ComponentProps<typeof AlertDialogAction>;
 }
 
 const defaultOptions = {
@@ -44,15 +44,20 @@ const CallableConfirm = createCallable<ConfirmOptions, ConfirmResponse>(
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{options.title}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {options.description}
+            </AlertDialogDescription>
           </AlertDialogHeader>
-          <AlertDialogDescription>{options.description}</AlertDialogDescription>
           <AlertDialogFooter>
             <AlertDialogCancel {...options.CancelProps}>
               {options.cancelText}
             </AlertDialogCancel>
-            <Button {...options.ActionProps} onClick={() => call.end(true)}>
+            <AlertDialogAction
+              {...options.ActionProps}
+              onClick={() => call.end(true)}
+            >
               {options.actionText}
-            </Button>
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -61,6 +66,8 @@ const CallableConfirm = createCallable<ConfirmOptions, ConfirmResponse>(
   UNMOUNTING_DELAY,
 );
 
-export const Confirmer = CallableConfirm.Root;
+const Confirmer = CallableConfirm.Root;
 
-export const confirm = CallableConfirm.call;
+const confirm = CallableConfirm.call;
+
+export { Confirmer, confirm };

From 7157fcdc45e3eeb3afcb20887add703343387608 Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:11:47 +0800
Subject: [PATCH 2/7] refactor(registry): align component code with shadcn
 idioms

Drop the stray displayName from badge-group, use namespace React
imports in description-list, switch time to React.ComponentProps,
replace the hand-rolled label in the password-input checkbox example
with the Label component, and pass the phone-input render prop inline
instead of wrapping it in useMemo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/examples/password-input-checkbox.tsx   | 8 ++------
 .../examples/phone-input-primitive-preferred-country.tsx  | 4 +---
 apps/v4/src/registry/new-york/ui/badge-group.tsx          | 1 -
 apps/v4/src/registry/new-york/ui/description-list.tsx     | 2 +-
 apps/v4/src/registry/new-york/ui/time.tsx                 | 2 +-
 5 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/apps/v4/src/components/examples/password-input-checkbox.tsx b/apps/v4/src/components/examples/password-input-checkbox.tsx
index 58d466e..56a5b8e 100644
--- a/apps/v4/src/components/examples/password-input-checkbox.tsx
+++ b/apps/v4/src/components/examples/password-input-checkbox.tsx
@@ -3,6 +3,7 @@
 import * as React from "react";
 
 import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import {
   PasswordInput,
   PasswordInputInput,
@@ -22,12 +23,7 @@ export default function PasswordInputCheckbox() {
           checked={visible}
           onCheckedChange={(checked) => setVisible(Boolean(checked))}
         />
-        <label
-          htmlFor="toggle-password"
-          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Show password
-        </label>
+        <Label htmlFor="toggle-password">Show password</Label>
       </div>
     </div>
   );
diff --git a/apps/v4/src/components/examples/phone-input-primitive-preferred-country.tsx b/apps/v4/src/components/examples/phone-input-primitive-preferred-country.tsx
index 9db266f..db9e624 100644
--- a/apps/v4/src/components/examples/phone-input-primitive-preferred-country.tsx
+++ b/apps/v4/src/components/examples/phone-input-primitive-preferred-country.tsx
@@ -22,9 +22,7 @@ export default function PhoneInputPrimitivePreferredCountry() {
         preferredCountry="MY"
         defaultInternationalForPreferredCountry
       >
-        <PhoneInputPrimitive.Input
-          render={React.useMemo(() => <Input />, [])}
-        />
+        <PhoneInputPrimitive.Input render={<Input />} />
       </PhoneInputPrimitive.Root>
       <p className="text-muted-foreground text-sm">
         Preferred country has been set to{" "}
diff --git a/apps/v4/src/registry/new-york/ui/badge-group.tsx b/apps/v4/src/registry/new-york/ui/badge-group.tsx
index f2f8083..07af2f8 100644
--- a/apps/v4/src/registry/new-york/ui/badge-group.tsx
+++ b/apps/v4/src/registry/new-york/ui/badge-group.tsx
@@ -121,7 +121,6 @@ function BadgeGroup<T extends BadgeGroupType = "single">({
     </ToggleGroup>
   );
 }
-BadgeGroup.displayName = "BadgeGroup";
 
 interface BadgeGroupItemProps extends Toggle.Props {
   value: string;
diff --git a/apps/v4/src/registry/new-york/ui/description-list.tsx b/apps/v4/src/registry/new-york/ui/description-list.tsx
index 835c10a..c812241 100644
--- a/apps/v4/src/registry/new-york/ui/description-list.tsx
+++ b/apps/v4/src/registry/new-york/ui/description-list.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/v4/src/registry/new-york/ui/time.tsx b/apps/v4/src/registry/new-york/ui/time.tsx
index 3797f90..08a2489 100644
--- a/apps/v4/src/registry/new-york/ui/time.tsx
+++ b/apps/v4/src/registry/new-york/ui/time.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export interface TimeProps
-  extends Omit<React.ComponentPropsWithoutRef<"time">, "children"> {
+  extends Omit<React.ComponentProps<"time">, "children"> {
   children: Parameters<typeof format>[0];
   dateTimeFormatStr?: Parameters<typeof format>[1];
   formatStr?: Parameters<typeof format>[1];

From 1e97ea1fbe38a015c157aeba193151c421abcf2c Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:11:58 +0800
Subject: [PATCH 3/7] fix(calendar): rebuild vendored calendar for
 react-day-picker v9

The vendored copy still used the react-day-picker v8 classNames API
(caption, nav_button, head_row, cell) whose keys don't exist in the
installed v9, so every class was dead and the calendar rendered on
v9 defaults. Replace it with the current base-nova calendar
(getDefaultClassNames, --cell-size/--cell-radius, captionLayout,
CalendarDayButton), resolving the site-internal IconPlaceholder to
lucide chevrons and the unreleased cn-calendar-* utilities to their
released equivalents.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/v4/src/components/ui/calendar.tsx | 262 +++++++++++++++++++------
 1 file changed, 198 insertions(+), 64 deletions(-)

diff --git a/apps/v4/src/components/ui/calendar.tsx b/apps/v4/src/components/ui/calendar.tsx
index 5a0a502..b2cb743 100644
--- a/apps/v4/src/components/ui/calendar.tsx
+++ b/apps/v4/src/components/ui/calendar.tsx
@@ -1,95 +1,229 @@
 "use client";
 
 import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
 } from "lucide-react";
 import * as React from "react";
-import { DayPicker } from "react-day-picker";
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker";
 
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col gap-2 sm:flex-row",
-        month: "flex flex-col gap-4",
-        caption: "relative flex w-full items-center justify-center pt-1",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal",
-        row: "mt-2 flex w-full",
-        cell: cn(
-          "[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months,
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "border-input has-focus:border-ring has-focus:ring-ring/50 relative rounded-(--cell-radius) border shadow-xs has-focus:ring-[3px]",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-(--cell-radius) pr-1 pl-2 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          "text-muted-foreground text-[0.8rem] select-none",
+          defaultClassNames.week_number,
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100",
-        ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          "bg-muted after:bg-muted relative isolate z-0 rounded-l-(--cell-radius) after:absolute after:inset-y-0 after:right-0 after:w-4",
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "bg-muted after:bg-muted relative isolate z-0 rounded-r-(--cell-radius) after:absolute after:inset-y-0 after:left-0 after:w-4",
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled,
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
         Chevron: ({ className, orientation, ...props }) => {
-          switch (orientation) {
-            case "up":
-              return (
-                <ChevronUp className={cn("size-4", className)} {...props} />
-              );
-            case "down":
-              return (
-                <ChevronDown className={cn("size-4", className)} {...props} />
-              );
-            case "left":
-              return (
-                <ChevronLeft className={cn("size-4", className)} {...props} />
-              );
-            case "right":
-            default:
-              return (
-                <ChevronRight className={cn("size-4", className)} {...props} />
-              );
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
           }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
         },
+        ...components,
       }}
       {...props}
     />
   );
 }
 
-export { Calendar };
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

From 49fbf404a148cc7a7b53960f734f2f88fe8c286c Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:12:10 +0800
Subject: [PATCH 4/7] fix(attachment): restore shimmer and scroll-fade-x
 utilities

shimmer and scroll-fade-x ship in the released shadcn tailwind.css,
so the animate-pulse substitute and the missing group scroll fade
were over-substitutions; no-scrollbar stays in place of the still
unreleased scrollbar-none.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/v4/src/components/ui/attachment.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/v4/src/components/ui/attachment.tsx b/apps/v4/src/components/ui/attachment.tsx
index 56bea8f..c476b41 100644
--- a/apps/v4/src/components/ui/attachment.tsx
+++ b/apps/v4/src/components/ui/attachment.tsx
@@ -103,7 +103,7 @@ function AttachmentTitle({
     <span
       data-slot="attachment-title"
       className={cn(
-        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse",
+        "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0 truncate font-medium",
         className,
       )}
       {...props}
@@ -119,7 +119,7 @@ function AttachmentDescription({
     <span
       data-slot="attachment-description"
       className={cn(
-        "mt-0.5 block max-w-full min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block max-w-full min-w-0 truncate text-xs",
         className,
       )}
       {...props}
@@ -187,7 +187,7 @@ function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="attachment-group"
       className={cn(
-        "no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        "no-scrollbar scroll-fade-x flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
         className,
       )}
       {...props}

From f77a75ccaa265c96befdc62e805b551ad4b9afb3 Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:12:12 +0800
Subject: [PATCH 5/7] fix(registry): address internal deps via the GitHub
 registry

registryDependencies pointed at https://ui-x.junwen-k.dev/r/*.json,
which no longer exists on next (no public/r output), breaking
transitive resolution of shadcn add. Use the GitHub item address form
(junwen-k/ui-x/<item>) shadcn documents for same-repo dependencies;
plain shadcn item names are untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/v4/registry.json | 121 +++++++++++-------------------------------
 1 file changed, 32 insertions(+), 89 deletions(-)

diff --git a/apps/v4/registry.json b/apps/v4/registry.json
index 839af18..875675f 100644
--- a/apps/v4/registry.json
+++ b/apps/v4/registry.json
@@ -8,9 +8,7 @@
       "type": "registry:component",
       "title": "BProgress Provider Next App",
       "description": "A smooth progress bar for page transitions in Next.js apps, using the App Router.",
-      "dependencies": [
-        "@bprogress/next"
-      ],
+      "dependencies": ["@bprogress/next"],
       "files": [
         {
           "path": "src/registry/new-york/components/bprogress-provider-next-app.tsx",
@@ -24,9 +22,7 @@
       "type": "registry:component",
       "title": "BProgress Provider Next Pages",
       "description": "A smooth progress bar for page transitions in Next.js pages, using the Pages Router.",
-      "dependencies": [
-        "@bprogress/next"
-      ],
+      "dependencies": ["@bprogress/next"],
       "files": [
         {
           "path": "src/registry/new-york/components/bprogress-provider-next-pages.tsx",
@@ -40,13 +36,8 @@
       "type": "registry:ui",
       "title": "Date Time Field Primitive",
       "description": "Date Time Field Primitive allows user to enter date and time value.",
-      "dependencies": [
-        "@base-ui/react",
-        "timescape"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/use-timescape.json"
-      ],
+      "dependencies": ["@base-ui/react", "timescape"],
+      "registryDependencies": ["junwen-k/ui-x/use-timescape"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-time-field-primitive.tsx",
@@ -59,14 +50,8 @@
       "type": "registry:ui",
       "title": "Emoji Picker",
       "description": "A emoji picker is a component that allows users to select an emoji from a list of emojis.",
-      "dependencies": [
-        "@base-ui/react",
-        "frimousse"
-      ],
-      "registryDependencies": [
-        "button",
-        "popover"
-      ],
+      "dependencies": ["@base-ui/react", "frimousse"],
+      "registryDependencies": ["button", "popover"],
       "files": [
         {
           "path": "src/registry/new-york/ui/emoji-picker.tsx",
@@ -79,11 +64,7 @@
       "type": "registry:hook",
       "title": "Use Timescape",
       "description": "A reactive wrapper around Timescape that provides controlled and uncontrolled state management for date/time input.",
-      "dependencies": [
-        "@base-ui/utils",
-        "react-day-picker",
-        "timescape"
-      ],
+      "dependencies": ["@base-ui/utils", "react-day-picker", "timescape"],
       "files": [
         {
           "path": "src/registry/new-york/hooks/use-timescape.ts",
@@ -96,13 +77,8 @@
       "type": "registry:ui",
       "title": "Date Time Range Field Primitive",
       "description": "Date Time Range Field Primitive allows user to enter date and time value for a range of dates.",
-      "dependencies": [
-        "@base-ui/react",
-        "timescape"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/use-timescape.json"
-      ],
+      "dependencies": ["@base-ui/react", "timescape"],
+      "registryDependencies": ["junwen-k/ui-x/use-timescape"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-time-range-field-primitive.tsx",
@@ -122,8 +98,8 @@
         "react-day-picker"
       ],
       "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field-primitive.json",
-        "https://ui-x.junwen-k.dev/r/date-time-range-field-primitive.json"
+        "junwen-k/ui-x/date-time-field-primitive",
+        "junwen-k/ui-x/date-time-range-field-primitive"
       ],
       "files": [
         {
@@ -137,10 +113,7 @@
       "type": "registry:ui",
       "title": "Dropzone Primitive",
       "description": "A dropzone is an area into which one or multiple objects can be dragged and dropped.",
-      "dependencies": [
-        "@base-ui/react",
-        "react-dropzone"
-      ],
+      "dependencies": ["@base-ui/react", "react-dropzone"],
       "files": [
         {
           "path": "src/registry/new-york/ui/dropzone-primitive.tsx",
@@ -153,10 +126,7 @@
       "type": "registry:ui",
       "title": "Password Input Primitive",
       "description": "Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.",
-      "dependencies": [
-        "@base-ui/react",
-        "@base-ui/utils"
-      ],
+      "dependencies": ["@base-ui/react", "@base-ui/utils"],
       "files": [
         {
           "path": "src/registry/new-york/ui/password-input-primitive.tsx",
@@ -204,10 +174,7 @@
       "type": "registry:ui",
       "title": "Virtualized",
       "description": "A virtualized component that allows you to efficiently render large lists and tabular data.",
-      "dependencies": [
-        "@base-ui/react",
-        "virtua"
-      ],
+      "dependencies": ["@base-ui/react", "virtua"],
       "files": [
         {
           "path": "src/registry/new-york/ui/virtualized.tsx",
@@ -220,13 +187,8 @@
       "type": "registry:ui",
       "title": "Badge Group",
       "description": "A badge group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.",
-      "dependencies": [
-        "@base-ui/react",
-        "@base-ui/utils"
-      ],
-      "registryDependencies": [
-        "badge"
-      ],
+      "dependencies": ["@base-ui/react", "@base-ui/utils"],
+      "registryDependencies": ["badge"],
       "files": [
         {
           "path": "src/registry/new-york/ui/badge-group.tsx",
@@ -239,13 +201,8 @@
       "type": "registry:ui",
       "title": "Confirmer",
       "description": "Imperative confirm dialog implementation.",
-      "dependencies": [
-        "react-call"
-      ],
-      "registryDependencies": [
-        "alert-dialog",
-        "button"
-      ],
+      "dependencies": ["react-call"],
+      "registryDependencies": ["alert-dialog", "button"],
       "files": [
         {
           "path": "src/registry/new-york/ui/confirmer.tsx",
@@ -258,9 +215,7 @@
       "type": "registry:ui",
       "title": "Date Field",
       "description": "Date Field allows user to enter date value.",
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field.json"
-      ],
+      "registryDependencies": ["junwen-k/ui-x/date-time-field"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-field.tsx",
@@ -275,7 +230,7 @@
       "description": "Date Time Field allows user to enter date and time value.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/date-time-field-primitive.json"
+        "junwen-k/ui-x/date-time-field-primitive"
       ],
       "files": [
         {
@@ -291,8 +246,8 @@
       "description": "Date Time Range Field allows user to enter date and time value for a range of dates.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/date-time-field.json",
-        "https://ui-x.junwen-k.dev/r/date-time-range-field-primitive.json"
+        "junwen-k/ui-x/date-time-field",
+        "junwen-k/ui-x/date-time-range-field-primitive"
       ],
       "files": [
         {
@@ -310,8 +265,8 @@
         "button",
         "input-group",
         "calendar",
-        "https://ui-x.junwen-k.dev/r/date-field.json",
-        "https://ui-x.junwen-k.dev/r/date-picker-primitive.json"
+        "junwen-k/ui-x/date-field",
+        "junwen-k/ui-x/date-picker-primitive"
       ],
       "files": [
         {
@@ -337,12 +292,8 @@
       "type": "registry:ui",
       "title": "Dropzone",
       "description": "A dropzone is an area into which one or multiple objects can be dragged and dropped.",
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/dropzone-primitive.json"
-      ],
+      "dependencies": ["@base-ui/react"],
+      "registryDependencies": ["junwen-k/ui-x/dropzone-primitive"],
       "files": [
         {
           "path": "src/registry/new-york/ui/dropzone.tsx",
@@ -357,7 +308,7 @@
       "description": "Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/password-input-primitive.json"
+        "junwen-k/ui-x/password-input-primitive"
       ],
       "files": [
         {
@@ -372,7 +323,7 @@
       "title": "Phone Input",
       "description": "Phone Input allows user to enter phone number in E.164 format.",
       "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/phone-input-primitive.json",
+        "junwen-k/ui-x/phone-input-primitive",
         "input",
         "select"
       ],
@@ -388,9 +339,7 @@
       "type": "registry:ui",
       "title": "Time Field",
       "description": "Time Field allows user to enter time value.",
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field.json"
-      ],
+      "registryDependencies": ["junwen-k/ui-x/date-time-field"],
       "files": [
         {
           "path": "src/registry/new-york/ui/time-field.tsx",
@@ -403,9 +352,7 @@
       "type": "registry:ui",
       "title": "Time",
       "description": "Displays a specific time (or datetime).",
-      "dependencies": [
-        "date-fns"
-      ],
+      "dependencies": ["date-fns"],
       "files": [
         {
           "path": "src/registry/new-york/ui/time.tsx",
@@ -418,9 +365,7 @@
       "type": "registry:ui",
       "title": "Timeline",
       "description": "Timeline displays a list of events in chronological order.",
-      "dependencies": [
-        "@base-ui/react"
-      ],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "src/registry/new-york/ui/timeline.tsx",
@@ -433,9 +378,7 @@
       "type": "registry:ui",
       "title": "Wheel Picker",
       "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
-      "dependencies": [
-        "@ncdai/react-wheel-picker"
-      ],
+      "dependencies": ["@ncdai/react-wheel-picker"],
       "files": [
         {
           "path": "src/registry/new-york/ui/wheel-picker.tsx",

From d6f0d0bf1f62a52f087b257b178dfa0a521ffcbc Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Thu, 16 Jul 2026 21:12:21 +0800
Subject: [PATCH 6/7] docs(roadmap): sync 4b/4c status after the Base UI port

Mark the Radix removal, component ports, demo rewrite and
registry.json/install-docs items shipped (PR #63 and this branch).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ROADMAP.md | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 0ba9b0a..d586e78 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -127,15 +127,15 @@ twice. Reference sources: `https://ui.shadcn.com/r/styles/base-nova/<name>.json`
 ### 4b. Site foundation (nova)
 
 - [x] Re-vendor the docs site's `components/ui/` from the `base-nova` preset;
-      nova theme adopted. Remaining straggler: `ui/form.tsx` still imports
-      `@radix-ui/react-label`/`react-slot` — replace with Base UI
-      `Field`/`Form` when demo form plumbing is reworked (see 4c).
-- [ ] Remove Radix dependencies from `apps/v4` — **all of them** (re-decided
+      nova theme adopted. The `ui/form.tsx` straggler (Radix label/slot) was
+      replaced with base-nova `field.tsx` in PR #63 (2026-07-16).
+- [x] Remove Radix dependencies from `apps/v4` — **all of them** (re-decided
       2026-07-15 with the clean-cut policy: the earlier "no maintained
       component imports Radix" carve-out for frozen superseded components no
-      longer applies since those are removed rather than frozen). Zero
-      `@radix-ui/*` packages remain after the 4c ports, the superseded-
-      component removal, and the `ui/form.tsx` replacement.
+      longer applies since those are removed rather than frozen). Shipped
+      2026-07-16 (PR #63): zero `@radix-ui/*` packages remain after the 4c
+      ports, the superseded-component removal, and the `ui/form.tsx` →
+      base-nova `field.tsx` replacement.
 - [x] Fix site-header vertical separators — shipped 2026-07-15
       (PR #61, `fix/header-separator`).
 
@@ -176,9 +176,10 @@ demos.
       (PR #62): combobox, date-picker, date/time fields, native-select,
       password-input and all examples migrated; phone-input 4px height
       mismatch fixed; every page browser-verified.
-- [ ] Port each kept component: swap Radix building blocks for Base UI
-      equivalents and apply classes from the `base-nova` sources. Concrete
-      Radix → Base UI swaps (surveyed 2026-07-15):
+- [x] Port each kept component: swap Radix building blocks for Base UI
+      equivalents and apply classes from the `base-nova` sources — shipped
+      2026-07-16 (PR #63). Concrete Radix → Base UI swaps (surveyed
+      2026-07-15):
       - Full primitives: `date-picker-primitive` popover → Base UI Popover;
         `badge-group` + `emoji-picker` toggle-group → Base UI Toggle Group;
         `sortable` portal → React DOM `createPortal`.
@@ -195,14 +196,19 @@ demos.
       registry.json 34 → 26 items; entangled keeper examples rewritten
       against vendored shadcn `kbd`/`button-group`/`attachment`/`combobox`
       (Base UI) in `apps/v4/src/components/ui/`.
-- [ ] Rewrite demos/examples against the nova metrics (adopt Base UI
+- [x] Rewrite demos/examples against the nova metrics (adopt Base UI
       `Field`/`Form` for form plumbing, replacing `ui/form.tsx`); verify
-      every page.
+      every page — shipped 2026-07-16 (PR #63); form demos stay controlled
+      from first render (`field.value ?? null`).
 - [ ] Styling polish during the ports: date/time field segments render
       taller than desired (noted 2026-07-16) — revisit segment height when
       applying nova classes to the field components.
-- [ ] Update registry.json (single style) and install docs after the
-      removals + ports.
+- [x] Update registry.json (single style) and install docs after the
+      removals + ports — done 2026-07-16: internal `registryDependencies`
+      switched from dead self-hosted `https://ui-x.junwen-k.dev/r/*.json`
+      URLs to GitHub-registry addresses (`junwen-k/ui-x/<item>`), registry
+      validated (`shadcn registry validate`, 26 items); `installation.mdx`
+      already documents the `junwen-k/ui-x/<item>` install form.
 
 ### 4d. Docs content — API Reference & Accessibility sections (after ports)
 

From c5ac40cb21251a858216469c840411c4c9fdcd97 Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:42:22 +0800
Subject: [PATCH 7/7] fix(phone-input): use static locale labels to avoid
 hydration mismatch

Intl.DisplayNames resolves region names against the runtime ICU data,
and Node and Chrome disagree on a few regions (e.g. FK renders as
"Falkland Islands (Islas Malvinas)" on the server but "Falkland
Islands" in the browser), causing a React hydration error. Use the
static en locale labels from react-phone-number-input, which is
already a dependency of phone-input-primitive.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/examples/phone-input-combobox.tsx | 16 +++++++---------
 .../examples/phone-input-primitive-demo.tsx      |  8 +++-----
 .../examples/phone-input-primitive-disabled.tsx  |  8 +++-----
 apps/v4/src/registry/new-york/ui/phone-input.tsx |  9 ++-------
 4 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/apps/v4/src/components/examples/phone-input-combobox.tsx b/apps/v4/src/components/examples/phone-input-combobox.tsx
index b775729..6bfe676 100644
--- a/apps/v4/src/components/examples/phone-input-combobox.tsx
+++ b/apps/v4/src/components/examples/phone-input-combobox.tsx
@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { getCountryCallingCode } from "react-phone-number-input";
+import en from "react-phone-number-input/locale/en";
 
 import { Button } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
@@ -23,10 +24,6 @@ import {
 } from "@/registry/new-york/ui/phone-input";
 import * as PhoneInputPrimitive from "@/registry/new-york/ui/phone-input-primitive";
 
-const regionNames = new Intl.DisplayNames(["en"], {
-  type: "region",
-});
-
 const countries = PhoneInputPrimitive.getCountryOptions().map(
   (option) => option.countryCode,
 );
@@ -41,14 +38,17 @@ export default function PhoneInputCombobox() {
         items={countries}
         value={country}
         onValueChange={(value) => setCountry(value as Country)}
-        itemToStringLabel={(value) => regionNames.of(value as Country) ?? ""}
+        itemToStringLabel={(value) => en[value as Country] ?? ""}
       >
         <ButtonGroup ref={anchor}>
           <ComboboxTrigger
             render={<Button variant="outline" />}
             aria-label="Select country"
           >
-            <PhoneInputFlag country={country} title={country ?? "International"} />
+            <PhoneInputFlag
+              country={country}
+              title={country ?? "International"}
+            />
           </ComboboxTrigger>
           <InputGroup>
             <PhoneInputPrimitive.Input render={<InputGroupInput />} />
@@ -61,9 +61,7 @@ export default function PhoneInputCombobox() {
             {(countryCode: Country) => (
               <ComboboxItem key={countryCode} value={countryCode}>
                 <PhoneInputFlag country={countryCode} title={countryCode} />
-                <span className="line-clamp-1">
-                  {regionNames.of(countryCode)}
-                </span>
+                <span className="line-clamp-1">{en[countryCode]}</span>
                 <span className="text-muted-foreground ml-auto">
                   {`+${getCountryCallingCode(countryCode)}`}
                 </span>
diff --git a/apps/v4/src/components/examples/phone-input-primitive-demo.tsx b/apps/v4/src/components/examples/phone-input-primitive-demo.tsx
index 1205663..c0f17c9 100644
--- a/apps/v4/src/components/examples/phone-input-primitive-demo.tsx
+++ b/apps/v4/src/components/examples/phone-input-primitive-demo.tsx
@@ -1,10 +1,8 @@
 "use client";
 
-import * as PhoneInputPrimitive from "@/registry/new-york/ui/phone-input-primitive";
+import en from "react-phone-number-input/locale/en";
 
-const regionNames = new Intl.DisplayNames(["en"], {
-  type: "region",
-});
+import * as PhoneInputPrimitive from "@/registry/new-york/ui/phone-input-primitive";
 
 export default function PhoneInputPrimitiveDemo() {
   return (
@@ -18,7 +16,7 @@ export default function PhoneInputPrimitiveDemo() {
             key={option.countryCode}
             value={option.countryCode}
           >
-            {`${regionNames.of(option.countryCode)} +${option.countryCallingCode}`}
+            {`${en[option.countryCode]} +${option.countryCallingCode}`}
           </PhoneInputPrimitive.CountrySelectOption>
         ))}
       </PhoneInputPrimitive.CountrySelect>
diff --git a/apps/v4/src/components/examples/phone-input-primitive-disabled.tsx b/apps/v4/src/components/examples/phone-input-primitive-disabled.tsx
index 3d5ec09..5d6ad86 100644
--- a/apps/v4/src/components/examples/phone-input-primitive-disabled.tsx
+++ b/apps/v4/src/components/examples/phone-input-primitive-disabled.tsx
@@ -1,10 +1,8 @@
 "use client";
 
-import * as PhoneInputPrimitive from "@/registry/new-york/ui/phone-input-primitive";
+import en from "react-phone-number-input/locale/en";
 
-const regionNames = new Intl.DisplayNames(["en"], {
-  type: "region",
-});
+import * as PhoneInputPrimitive from "@/registry/new-york/ui/phone-input-primitive";
 
 export default function PhoneInputPrimitiveDisabled() {
   return (
@@ -18,7 +16,7 @@ export default function PhoneInputPrimitiveDisabled() {
             key={option.countryCode}
             value={option.countryCode}
           >
-            {`${regionNames.of(option.countryCode)} +${option.countryCallingCode}`}
+            {`${en[option.countryCode]} +${option.countryCallingCode}`}
           </PhoneInputPrimitive.CountrySelectOption>
         ))}
       </PhoneInputPrimitive.CountrySelect>
diff --git a/apps/v4/src/registry/new-york/ui/phone-input.tsx b/apps/v4/src/registry/new-york/ui/phone-input.tsx
index 3d58ba8..4331fae 100644
--- a/apps/v4/src/registry/new-york/ui/phone-input.tsx
+++ b/apps/v4/src/registry/new-york/ui/phone-input.tsx
@@ -5,6 +5,7 @@ import { CheckIcon, GlobeIcon } from "lucide-react";
 import * as React from "react";
 import { getCountryCallingCode } from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
+import en from "react-phone-number-input/locale/en";
 
 import { Input } from "@/components/ui/input";
 import {
@@ -170,10 +171,6 @@ interface PhoneInputCountrySelectItemProps
   value: PhoneInputPrimitive.Country;
 }
 
-const regionNames = new Intl.DisplayNames(["en"], {
-  type: "region",
-});
-
 function PhoneInputCountrySelectItem({
   className,
   value,
@@ -193,9 +190,7 @@ function PhoneInputCountrySelectItem({
         <div>
           <PhoneInputFlag country={value} title={value} />
         </div>
-        <SelectPrimitive.ItemText>
-          {regionNames.of(value)}
-        </SelectPrimitive.ItemText>
+        <SelectPrimitive.ItemText>{en[value]}</SelectPrimitive.ItemText>
       </div>
       <div className="text-muted-foreground">
         {`+${getCountryCallingCode(value)}`}