@open-slide/core 0.0.11 → 0.0.12

package/src/app/components/style-panel/use-design.ts

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { DesignSystem } from '../../../design';
+
+type FetchedState = {
+  design: DesignSystem | null;
+  exists: boolean;
+  warning: string | null;
+  loaded: boolean;
+};
+
+export type UseDesignReturn = FetchedState & {
+  refresh: () => Promise<void>;
+  save: (patch: Partial<DesignSystem>) => Promise<{ ok: boolean; error?: string }>;
+  reset: () => Promise<{ ok: boolean; error?: string }>;
+};
+
+export function useDesign(slideId: string): UseDesignReturn {
+  const [state, setState] = useState<FetchedState>({
+    design: null,
+    exists: false,
+    warning: null,
+    loaded: false,
+  });
+  const slideIdRef = useRef(slideId);
+  slideIdRef.current = slideId;
+
+  const refresh = useCallback(async () => {
+    const id = slideIdRef.current;
+    if (!id) return;
+    try {
+      const res = await fetch(`/__design?slideId=${encodeURIComponent(id)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const body = (await res.json()) as {
+        design: DesignSystem;
+        exists: boolean;
+        warning: string | null;
+      };
+      setState({
+        design: body.design,
+        exists: body.exists,
+        warning: body.warning,
+        loaded: true,
+      });
+    } catch (err) {
+      setState((s) => ({ ...s, warning: String((err as Error).message), loaded: true }));
+    }
+  }, []);
+
+  useEffect(() => {
+    setState({ design: null, exists: false, warning: null, loaded: false });
+    void refresh();
+  }, [refresh]);
+
+  const save = useCallback(async (patch: Partial<DesignSystem>) => {
+    const id = slideIdRef.current;
+    if (!id) return { ok: false, error: 'no slide id' };
+    try {
+      const res = await fetch(`/__design?slideId=${encodeURIComponent(id)}`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ patch }),
+      });
+      const body = (await res.json()) as {
+        ok?: boolean;
+        error?: string;
+        design?: DesignSystem;
+        created?: boolean;
+      };
+      if (!res.ok || !body.ok) {
+        return { ok: false, error: body.error ?? `HTTP ${res.status}` };
+      }
+      if (body.design) {
+        setState((s) => ({
+          ...s,
+          design: body.design ?? s.design,
+          exists: true,
+          warning: null,
+        }));
+      }
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: String((err as Error).message) };
+    }
+  }, []);
+
+  const reset = useCallback(async () => {
+    const id = slideIdRef.current;
+    if (!id) return { ok: false, error: 'no slide id' };
+    try {
+      const res = await fetch(`/__design/reset?slideId=${encodeURIComponent(id)}`, {
+        method: 'POST',
+      });
+      const body = (await res.json()) as { ok?: boolean; error?: string; design?: DesignSystem };
+      if (!res.ok || !body.ok) {
+        return { ok: false, error: body.error ?? `HTTP ${res.status}` };
+      }
+      if (body.design) {
+        setState((s) => ({
+          ...s,
+          design: body.design ?? s.design,
+          exists: true,
+          warning: null,
+        }));
+      }
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: String((err as Error).message) };
+    }
+  }, []);
+
+  return { ...state, refresh, save, reset };
+}

package/src/app/components/theme-toggle.tsx

@@ -0,0 +1,57 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        type="button"
+        aria-label="Toggle theme"
+        title="Theme"
+        className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
+      >
+        <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        <DropdownMenuItem
+          onSelect={() => setTheme('light')}
+          data-active={mounted && theme === 'light'}
+        >
+          <Sun />
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => setTheme('dark')}
+          data-active={mounted && theme === 'dark'}
+        >
+          <Moon />
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => setTheme('system')}
+          data-active={mounted && theme === 'system'}
+        >
+          <Monitor />
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/app/components/thumbnail-rail.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import type { DesignSystem } from '../../design';
+import type { Page } from '../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
+import { SlideCanvas } from './slide-canvas';
+
+type Orientation = 'vertical' | 'horizontal';
+
+type Props = {
+  pages: Page[];
+  design?: DesignSystem;
+  current: number;
+  onSelect: (index: number) => void;
+  orientation?: Orientation;
+};
+
+const VERTICAL_THUMB_WIDTH = 184;
+const HORIZONTAL_THUMB_HEIGHT = 64;
+
+export function ThumbnailRail({
+  pages,
+  design,
+  current,
+  onSelect,
+  orientation = 'vertical',
+}: Props) {
+  const activeRef = useRef<HTMLButtonElement | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `current` triggers re-scroll on selection change
+  useEffect(() => {
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    activeRef.current?.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+      behavior: reduceMotion ? 'auto' : 'smooth',
+    });
+  }, [current]);
+
+  if (orientation === 'horizontal') {
+    const scale = HORIZONTAL_THUMB_HEIGHT / CANVAS_HEIGHT;
+    const width = CANVAS_WIDTH * scale;
+    return (
+      <div className="bg-sidebar">
+        <div className="overflow-x-auto overflow-y-hidden">
+          <div className="flex items-center gap-2 px-3 py-2.5">
+            {pages.map((PageComp, i) => {
+              const active = i === current;
+              return (
+                <button
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
+                  key={i}
+                  type="button"
+                  ref={active ? activeRef : undefined}
+                  onClick={() => onSelect(i)}
+                  aria-label={`Go to page ${i + 1}`}
+                  aria-current={active ? 'true' : undefined}
+                  className={cn('group/thumb relative flex shrink-0 flex-col items-center gap-1.5')}
+                >
+                  <span
+                    className={cn(
+                      'font-mono text-[9.5px] font-medium tracking-[0.06em] tabular-nums uppercase',
+                      active ? 'text-brand' : 'text-muted-foreground/70',
+                    )}
+                  >
+                    {(i + 1).toString().padStart(2, '0')}
+                  </span>
+                  <div
+                    className={cn(
+                      'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+                      active
+                        ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
+                        : 'border-hairline group-hover/thumb:border-foreground/25',
+                    )}
+                    style={{ width, height: HORIZONTAL_THUMB_HEIGHT }}
+                  >
+                    <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
+                      <PageComp />
+                    </SlideCanvas>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
+  const height = CANVAS_HEIGHT * scale;
+  return (
+    <ScrollArea className="h-full border-r border-hairline bg-sidebar">
+      <aside className="flex flex-col gap-2 px-3 py-3">
+        <div className="flex items-baseline justify-between px-1 pb-1">
+          <span className="eyebrow">Pages</span>
+          <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
+        </div>
+        {pages.map((PageComp, i) => {
+          const active = i === current;
+          return (
+            <button
+              // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
+              key={i}
+              type="button"
+              ref={active ? activeRef : undefined}
+              onClick={() => onSelect(i)}
+              aria-label={`Go to page ${i + 1}`}
+              aria-current={active ? 'true' : undefined}
+              className={cn(
+                'group/thumb flex items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
+                'hover:bg-muted/60',
+                active && 'bg-muted',
+              )}
+            >
+              <span
+                className={cn(
+                  'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
+                  active ? 'text-brand' : 'text-muted-foreground/70',
+                )}
+              >
+                {(i + 1).toString().padStart(2, '0')}
+              </span>
+              <div
+                className={cn(
+                  'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+                  active
+                    ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
+                    : 'border-hairline group-hover/thumb:border-foreground/25',
+                )}
+                style={{ width: VERTICAL_THUMB_WIDTH, height }}
+              >
+                <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
+                  <PageComp />
+                </SlideCanvas>
+                {active && (
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
+                  />
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </aside>
+    </ScrollArea>
+  );
+}

package/src/app/components/ui/button.tsx

@@ -4,33 +4,65 @@ import { Slot } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/*
+ * Editorial button. Tight square-ish radius, hairline borders instead of
+ * shadcn's default ring/shadow stack. The default variant is the strongest
+ * affordance — solid ink with subtle inner highlight on hover so the press
+ * feels physical without glow.
+ */
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  [
+    "group/button relative inline-flex shrink-0 items-center justify-center",
+    "rounded-[6px] text-[13px] font-medium whitespace-nowrap select-none",
+    "outline-none transition-[background-color,color,border-color,box-shadow,transform] duration-100",
+    "focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "active:not-aria-[haspopup]:translate-y-px",
+    "disabled:pointer-events-none disabled:opacity-45",
+    "aria-invalid:border-destructive aria-invalid:ring-destructive/30",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  ].join(' '),
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        outline:
-          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        default: [
+          'bg-foreground text-background',
+          'shadow-[inset_0_1px_0_oklch(1_0_0/0.12),0_1px_0_oklch(0_0_0/0.12)]',
+          'hover:bg-foreground/90',
+          'aria-expanded:bg-foreground/85',
+        ].join(' '),
+        brand: [
+          'bg-brand text-brand-foreground',
+          'shadow-[inset_0_1px_0_oklch(1_0_0/0.18),0_1px_0_oklch(0_0_0/0.16)]',
+          'hover:brightness-105 active:brightness-95',
+        ].join(' '),
+        outline: [
+          'border border-border bg-card text-foreground',
+          'hover:bg-muted/60 hover:border-foreground/20',
+          'aria-expanded:bg-muted aria-expanded:border-foreground/25',
+          'data-[state=on]:bg-foreground data-[state=on]:text-background data-[state=on]:border-foreground',
+        ].join(' '),
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-        ghost:
-          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-        destructive:
-          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary/90',
+        ghost: [
+          'text-foreground/75 hover:text-foreground hover:bg-muted',
+          'aria-expanded:bg-muted aria-expanded:text-foreground',
+        ].join(' '),
+        destructive: [
+          'bg-destructive text-white',
+          'shadow-[inset_0_1px_0_oklch(1_0_0/0.16),0_1px_0_oklch(0_0_0/0.12)]',
+          'hover:brightness-105 active:brightness-95',
+          'focus-visible:ring-destructive/35',
+        ].join(' '),
+        link: 'text-foreground underline decoration-foreground/30 decoration-1 underline-offset-[3px] hover:decoration-foreground/70 [&_svg]:hidden',
       },
       size: {
-        default:
-          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        default: 'h-8 gap-1.5 px-3',
+        xs: 'h-6 gap-1 rounded-[5px] px-2 text-[11.5px]',
+        sm: 'h-7 gap-1.5 rounded-[5px] px-2.5 text-[12px]',
+        lg: 'h-9 gap-1.5 px-3.5 text-[13.5px]',
         icon: 'size-8',
-        'icon-xs':
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm':
-          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-xs': 'size-6 rounded-[5px]',
+        'icon-sm': 'size-7 rounded-[5px]',
         'icon-lg': 'size-9',
       },
     },

package/src/app/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+        'group/card flex flex-col gap-4 overflow-hidden rounded-[10px] bg-card py-4 text-sm text-card-foreground border border-border has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[10px] *:[img:last-child]:rounded-b-[10px]',
         className,
       )}
       {...props}

package/src/app/components/ui/dialog.tsx

@@ -28,7 +28,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'fixed inset-0 z-50 bg-foreground/35 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className,
       )}
       {...props}
@@ -40,17 +40,26 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  container,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
 }) {
   return (
-    <DialogPortal data-slot="dialog-portal">
+    <DialogPortal data-slot="dialog-portal" container={container}>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
+          // Crisp paper card with hairline edge + soft drop. No oversized
+          // shadcn-glow ring; sits cleanly on the dimmed canvas.
+          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5',
+          'rounded-[10px] border border-border bg-card p-6 text-card-foreground',
+          'shadow-overlay outline-none',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'duration-200 sm:max-w-md',
           className,
         )}
         {...props}
@@ -59,9 +68,10 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            aria-label="Close"
+            className="absolute top-3.5 right-3.5 inline-flex size-7 items-center justify-center rounded-[5px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
           >
-            <XIcon />
+            <XIcon className="size-3.5" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
@@ -74,7 +84,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn('flex flex-col gap-1.5 text-left', className)}
       {...props}
     />
   );
@@ -91,7 +101,10 @@ function DialogFooter({
   return (
     <div
       data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      className={cn(
+        'flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end sm:gap-1.5',
+        className,
+      )}
       {...props}
     >
       {children}
@@ -108,7 +121,10 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn(
+        'font-heading text-[15px] font-semibold leading-tight tracking-tight text-foreground',
+        className,
+      )}
       {...props}
     />
   );
@@ -121,7 +137,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-[13px] leading-relaxed text-muted-foreground', className)}
       {...props}
     />
   );

package/src/app/components/ui/dropdown-menu.tsx

@@ -24,7 +24,7 @@ function DropdownMenuTrigger({
 
 function DropdownMenuContent({
   className,
-  sideOffset = 4,
+  sideOffset = 6,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
@@ -33,7 +33,11 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[9rem] origin-(--radix-dropdown-menu-content-transform-origin)',
+          'overflow-x-hidden overflow-y-auto rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+          'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -61,7 +65,12 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        'relative flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none transition-colors',
+        'focus:bg-foreground focus:text-background',
+        'data-[active=true]:bg-muted data-[active=true]:text-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[inset]:pl-8',
+        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive data-[variant=destructive]:focus:text-white',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-current [&_svg]:opacity-80",
         className,
       )}
       {...props}
@@ -79,7 +88,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
         className,
       )}
       checked={checked}
@@ -87,7 +96,7 @@ function DropdownMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <CheckIcon className="size-3.5" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -110,7 +119,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
         className,
       )}
       {...props}
@@ -136,7 +145,10 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+      className={cn(
+        'eyebrow px-2 py-1.5 data-[inset]:pl-8',
+        className,
+      )}
       {...props}
     />
   );
@@ -149,7 +161,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn('-mx-1 my-1 h-px bg-hairline', className)}
       {...props}
     />
   );
@@ -159,7 +171,10 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'spa
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn(
+        'ml-auto font-mono text-[10.5px] tracking-[0.06em] text-muted-foreground/80',
+        className,
+      )}
       {...props}
     />
   );
@@ -182,13 +197,13 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        'flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[inset]:pl-8 data-[state=open]:bg-muted',
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <ChevronRightIcon className="ml-auto size-3.5 opacity-60" />
     </DropdownMenuPrimitive.SubTrigger>
   );
 }
@@ -201,7 +216,9 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        'z-50 min-w-[9rem] overflow-hidden rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}