Merge branch 'main' into fix/calendar-full-width-new

Author: yetval

apps/v4/app/(app)/create/components/customizer.tsx

@@ -22,6 +22,7 @@ import { FontPicker } from "@/app/(app)/create/components/font-picker"
 import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
 import { MainMenu } from "@/app/(app)/create/components/main-menu"
 import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
+import { ProjectForm } from "@/app/(app)/create/components/project-form"
 import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
 import { RandomButton } from "@/app/(app)/create/components/random-button"
 import { ResetDialog } from "@/app/(app)/create/components/reset-button"
@@ -56,7 +57,6 @@ export function Customizer({
       </CardHeader>
       <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
         <FieldGroup className="flex-row gap-2.5 py-px **:data-[slot=field-separator]:-mx-4 **:data-[slot=field-separator]:w-auto md:flex-col md:gap-3.25">
-          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
           <StylePicker
             styles={STYLES}
             isMobile={isMobile}
@@ -91,14 +91,18 @@ export function Customizer({
           <FieldSeparator className="hidden md:block" />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
         </FieldGroup>
       </CardContent>
-      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:**:[button,a]:w-full">
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
         <CopyPreset className="flex-1 md:flex-none" />
         <RandomButton className="flex-1 md:flex-none" />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>
+      <CardFooter className="-mt-3 hidden min-w-0 gap-2 md:flex md:flex-col md:**:[button,a]:w-full">
+        <ProjectForm />
+      </CardFooter>
     </Card>
   )
 }

apps/v4/app/(app)/create/components/font-picker.tsx

@@ -97,7 +97,7 @@ export function FontPicker({
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-xs text-muted-foreground">{label}</div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
               {displayFontName}
             </div>
           </div>

apps/v4/app/(app)/create/components/picker.tsx

@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       className={cn(
-        "relative w-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
+        "relative w-36 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
         className
       )}
       {...props}

apps/v4/app/(app)/create/components/preset-picker.tsx

@@ -112,13 +112,6 @@ export function PresetPicker({
                   closeOnClick={isMobile}
                 >
                   <div className="flex items-center gap-2">
-                    {style?.icon && (
-                      <div className="flex size-4 shrink-0 items-center justify-center">
-                        {React.cloneElement(style.icon, {
-                          className: "size-4",
-                        })}
-                      </div>
-                    )}
                     {preset.description}
                   </div>
                 </PickerRadioItem>

apps/v4/app/(app)/create/components/preview-switcher.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const PREVIEW_ITEMS = [
+  { label: "01", value: "preview-02" },
+  { label: "02", value: "preview" },
+]
+
+export function PreviewSwitcher() {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const isPreview =
+    params.item === "preview" || params.item.startsWith("preview-0")
+
+  if (!isPreview) {
+    return null
+  }
+
+  return (
+    <div className="dark absolute right-3 bottom-3 z-20 flex items-center gap-1 rounded-xl bg-card/90 p-1 shadow-xl backdrop-blur-xl">
+      {PREVIEW_ITEMS.map((item) => (
+        <Button
+          key={item.value}
+          variant="ghost"
+          size="sm"
+          data-active={params.item === item.value}
+          className="h-7 min-w-8 cursor-pointer rounded-lg px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+          onClick={() => setParams({ item: item.value })}
+        >
+          {item.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/preview.tsx

@@ -8,6 +8,7 @@ import {
   UNDO_FORWARD_TYPE,
 } from "@/app/(app)/create/components/history-buttons"
 import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher"
+import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
 import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
 import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
@@ -147,6 +148,7 @@ export function Preview() {
           title="Preview"
         />
       </div>
+      <PreviewSwitcher />
     </div>
   )
 }

apps/v4/app/(app)/create/hooks/use-reset.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import useSWR from "swr"
 
-import { DEFAULT_CONFIG } from "@/registry/config"
+import { DEFAULT_CONFIG, PRESETS } from "@/registry/config"
 import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const RESET_DIALOG_KEY = "create:reset-dialog-open"
@@ -20,22 +20,27 @@ export function useReset() {
     })
 
   const reset = React.useCallback(() => {
+    const preset =
+      PRESETS.find(
+        (preset) => preset.base === params.base && preset.style === params.style
+      ) ?? DEFAULT_CONFIG
+
     setParams({
       base: params.base,
-      style: DEFAULT_CONFIG.style,
-      baseColor: DEFAULT_CONFIG.baseColor,
-      theme: DEFAULT_CONFIG.theme,
-      chartColor: DEFAULT_CONFIG.chartColor,
-      iconLibrary: DEFAULT_CONFIG.iconLibrary,
-      font: DEFAULT_CONFIG.font,
-      fontHeading: DEFAULT_CONFIG.fontHeading,
-      menuAccent: DEFAULT_CONFIG.menuAccent,
-      menuColor: DEFAULT_CONFIG.menuColor,
-      radius: DEFAULT_CONFIG.radius,
+      style: params.style,
+      baseColor: preset.baseColor,
+      theme: preset.theme,
+      chartColor: preset.chartColor,
+      iconLibrary: preset.iconLibrary,
+      font: preset.font,
+      fontHeading: preset.fontHeading,
+      menuAccent: preset.menuAccent,
+      menuColor: preset.menuColor,
+      radius: preset.radius,
       template: DEFAULT_CONFIG.template,
       item: params.item,
     })
-  }, [setParams, params.base, params.item])
+  }, [setParams, params.base, params.style, params.item])
 
   const handleShowResetDialogChange = React.useCallback(
     (open: boolean) => {

apps/v4/app/(app)/create/lib/search-params.ts

@@ -41,11 +41,11 @@ import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
 import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
 
 const designSystemSearchParams = {
-  preset: parseAsString.withDefault("b0"),
+  preset: parseAsString.withDefault("b2D0wqNxT"),
   base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
     DEFAULT_CONFIG.base
   ),
-  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
+  item: parseAsString.withDefault("preview-02").withOptions({ shallow: true }),
   iconLibrary: parseAsStringLiteral<IconLibraryName>(
     Object.values(iconLibraries).map((i) => i.name)
   ).withDefault(DEFAULT_CONFIG.iconLibrary),

apps/v4/app/(app)/create/page.tsx

@@ -48,9 +48,9 @@ export default async function CreatePage() {
       >
         <Preview />
         <Customizer itemsByBase={itemsByBase} />
-        <PresetHandler />
-        <WelcomeDialog />
       </div>
+      <PresetHandler />
+      <WelcomeDialog />
     </div>
   )
 }

apps/v4/app/(app)/layout.tsx

@@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-slot="layout"
-      className="group/layout relative z-10 flex min-h-svh flex-col bg-background"
+      className="group/layout relative z-10 flex min-h-svh flex-col bg-background has-data-[slot=designer]:h-svh has-data-[slot=designer]:overflow-hidden"
     >
       <SiteHeader />
       <main className="flex min-h-0 flex-1 flex-col">{children}</main>