@open-slide/core 0.0.11 → 0.0.13

package/src/app/components/present/laser-pointer.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+type Pos = { x: number; y: number } | null;
+
+/**
+ * Soft red dot that follows the cursor when the laser tool is active.
+ * Hides the system cursor on the player root via a `cursor-none` class
+ * applied by the parent.
+ */
+export function PresentLaserPointer({ enabled }: { enabled: boolean }) {
+  const [pos, setPos] = useState<Pos>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setPos(null);
+      return;
+    }
+    const onMove = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
+    window.addEventListener('mousemove', onMove, { passive: true });
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [enabled]);
+
+  if (!enabled || !pos) return null;
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none fixed z-[60]"
+      style={{
+        left: pos.x,
+        top: pos.y,
+        width: 18,
+        height: 18,
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, oklch(0.66 0.24 28 / 0.95) 30%, transparent 70%)',
+        boxShadow: '0 0 18px 4px oklch(0.66 0.24 28 / 0.55)',
+      }}
+    />
+  );
+}

package/src/app/components/present/overview-grid.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+import type { DesignSystem } from '../../lib/design';
+import type { Page } from '../../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../../lib/sdk';
+import { SlideCanvas } from '../slide-canvas';
+
+const THUMB_W = 320;
+const THUMB_H = (THUMB_W * CANVAS_HEIGHT) / CANVAS_WIDTH;
+
+type Props = {
+  pages: Page[];
+  design?: DesignSystem;
+  open: boolean;
+  current: number;
+  onClose: () => void;
+  onSelect: (index: number) => void;
+};
+
+/**
+ * Full-screen grid of slide thumbnails. Reuses SlideCanvas at fixed scale
+ * so each preview is rendered with the slide's design tokens but with
+ * motion frozen. Arrow keys move focus; Enter/click jumps and closes.
+ */
+export function PresentOverviewGrid({
+  pages,
+  design,
+  open,
+  current,
+  onClose,
+  onSelect,
+}: Props) {
+  const [focused, setFocused] = useState(current);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef<HTMLButtonElement | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only re-sync on open transition
+  useEffect(() => {
+    if (open) setFocused(current);
+  }, [open]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `focused` swaps which button holds the ref; we must re-run to focus the new node
+  useEffect(() => {
+    if (!open) return;
+    focusedRef.current?.focus();
+    focusedRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [focused, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
+      const cols = computeCols(gridRef.current);
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.min(pages.length - 1, i + 1));
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.max(0, i - 1));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.min(pages.length - 1, i + cols));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.max(0, i - cols));
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused(0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused(pages.length - 1);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect(focused);
+        onClose();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [open, pages.length, focused, onClose, onSelect]);
+
+  if (!open) return null;
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Slide overview"
+      className="absolute inset-0 z-50 flex flex-col bg-black/95 backdrop-blur-sm"
+    >
+      <div className="flex shrink-0 items-baseline justify-between px-8 pt-6 pb-3">
+        <span className="eyebrow text-white/55">Overview</span>
+        <span className="font-mono text-[11px] text-white/55 tabular-nums">
+          {(focused + 1).toString().padStart(2, '0')} · {pages.length.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div ref={gridRef} className="min-h-0 flex-1 overflow-auto px-8 pb-8">
+        <div
+          className="grid gap-5"
+          style={{
+            gridTemplateColumns: `repeat(auto-fill, minmax(${THUMB_W}px, 1fr))`,
+          }}
+        >
+          {pages.map((PageComp, i) => {
+            const isFocused = i === focused;
+            const isCurrent = i === current;
+            return (
+              <button
+                // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
+                key={i}
+                ref={isFocused ? focusedRef : undefined}
+                type="button"
+                onClick={() => {
+                  onSelect(i);
+                  onClose();
+                }}
+                onMouseEnter={() => setFocused(i)}
+                aria-label={`Go to slide ${i + 1}`}
+                aria-current={isCurrent ? 'true' : undefined}
+                className={cn(
+                  'group/thumb flex flex-col items-start gap-2 rounded-[6px] p-1.5 outline-none transition-colors',
+                  isFocused ? 'bg-white/10' : 'hover:bg-white/5',
+                )}
+              >
+                <div
+                  className={cn(
+                    'relative w-full overflow-hidden rounded-[4px] bg-black ring-1 ring-white/10 transition-shadow',
+                    isFocused && 'ring-2 ring-[var(--brand,#ef4444)]',
+                  )}
+                  style={{ height: THUMB_H }}
+                >
+                  <SlideCanvas
+                    scale={THUMB_W / CANVAS_WIDTH}
+                    center={false}
+                    flat
+                    freezeMotion
+                    design={design}
+                  >
+                    <PageComp />
+                  </SlideCanvas>
+                  {isCurrent && (
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute top-1.5 right-1.5 rounded-[3px] bg-[var(--brand,#ef4444)] px-1.5 py-0.5 font-mono text-[9.5px] tracking-[0.06em] uppercase text-white"
+                    >
+                      Now
+                    </span>
+                  )}
+                </div>
+                <span
+                  className={cn(
+                    'font-mono text-[10.5px] tracking-[0.08em] tabular-nums uppercase',
+                    isFocused || isCurrent ? 'text-white/85' : 'text-white/45',
+                  )}
+                >
+                  {(i + 1).toString().padStart(2, '0')}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function computeCols(grid: HTMLDivElement | null) {
+  if (!grid) return 4;
+  const inner = grid.firstElementChild as HTMLElement | null;
+  if (!inner) return 4;
+  const cs = getComputedStyle(inner);
+  const cols = cs.gridTemplateColumns.split(' ').filter(Boolean).length;
+  return Math.max(1, cols);
+}

package/src/app/components/present/progress-bar.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+
+type Props = {
+  index: number;
+  total: number;
+  visible: boolean;
+};
+
+export function PresentProgressBar({ index, total, visible }: Props) {
+  const pct = total > 0 ? ((index + 1) / total) * 100 : 0;
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-x-0 top-0 z-30 h-[2px] bg-white/8',
+        'motion-safe:transition-opacity motion-safe:duration-200',
+        visible ? 'opacity-100' : 'opacity-0',
+      )}
+    >
+      <div
+        className="h-full bg-[var(--brand,#ef4444)] transition-[width] duration-200 ease-out"
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}

package/src/app/components/present/use-idle.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Reports whether the user has been idle (no pointer / key / touch input)
+ * for at least `delayMs`. Resets on any input event. The hook starts in
+ * the non-idle state so freshly-mounted UI is visible while the user
+ * orients themselves.
+ *
+ * Pass `enabled = false` to short-circuit (useful when the player is
+ * paused on an overlay and we don't want to hide chrome behind it).
+ */
+export function useIdle(delayMs: number, enabled = true) {
+  const [idle, setIdle] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setIdle(false);
+      return;
+    }
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const reset = () => {
+      setIdle(false);
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setIdle(true), delayMs);
+    };
+    reset();
+    const opts = { passive: true } as const;
+    window.addEventListener('mousemove', reset, opts);
+    window.addEventListener('mousedown', reset, opts);
+    window.addEventListener('keydown', reset);
+    window.addEventListener('touchstart', reset, opts);
+    window.addEventListener('wheel', reset, opts);
+    return () => {
+      if (timer) clearTimeout(timer);
+      window.removeEventListener('mousemove', reset);
+      window.removeEventListener('mousedown', reset);
+      window.removeEventListener('keydown', reset);
+      window.removeEventListener('touchstart', reset);
+      window.removeEventListener('wheel', reset);
+    };
+  }, [delayMs, enabled]);
+
+  return idle;
+}

package/src/app/components/present/use-pointer-near-bottom.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns true while the mouse pointer sits within `thresholdPx` of the
+ * viewport's bottom edge. Pure pointer-position tracking — keyboard input
+ * does not affect the result, so arrow-key navigation won't reveal the
+ * control chrome.
+ *
+ * Pass `enabled = false` to short-circuit (e.g. when an overlay owns
+ * visibility) and reset to false.
+ */
+export function usePointerNearBottom(thresholdPx: number, enabled = true) {
+  const [near, setNear] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setNear(false);
+      return;
+    }
+    const update = (clientY: number) => {
+      setNear(clientY >= window.innerHeight - thresholdPx);
+    };
+    const onMove = (e: MouseEvent) => update(e.clientY);
+    const onLeave = () => setNear(false);
+    window.addEventListener('mousemove', onMove, { passive: true });
+    document.addEventListener('mouseleave', onLeave);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseleave', onLeave);
+    };
+  }, [thresholdPx, enabled]);
+
+  return near;
+}

package/src/app/components/present/use-presenter-channel.ts

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export type PresenterState = {
+  index: number;
+  pageCount: number;
+  blackout: 'black' | 'white' | null;
+  startedAt: number; // epoch ms when present mode began
+};
+
+export type PresenterCommand =
+  | { type: 'state'; state: PresenterState }
+  | { type: 'goto'; index: number }
+  | { type: 'next' }
+  | { type: 'prev' }
+  | { type: 'request-state' }
+  | { type: 'restart-timer' }
+  | { type: 'toggle-blackout'; mode: 'black' | 'white' };
+
+type Handler = (msg: PresenterCommand) => void;
+
+const SUPPORTED = typeof window !== 'undefined' && typeof BroadcastChannel !== 'undefined';
+
+/**
+ * BroadcastChannel wrapper used by both the projection window (Player) and
+ * the Presenter View. The channel is keyed by slideId so multiple decks
+ * open in different tabs do not cross-talk. Falls back to no-op when the
+ * API is missing (older browsers, SSR).
+ *
+ * The channel is owned by the effect (not useMemo) so React 18 StrictMode's
+ * double-invoke creates a fresh channel on the second mount instead of
+ * leaving a closed one behind that throws on the next `send()`.
+ */
+export function usePresenterChannel(slideId: string, onMessage?: Handler) {
+  const onMessageRef = useRef(onMessage);
+  onMessageRef.current = onMessage;
+
+  const channelRef = useRef<BroadcastChannel | null>(null);
+  const [available, setAvailable] = useState(false);
+
+  useEffect(() => {
+    if (!SUPPORTED) return;
+    const channel = new BroadcastChannel(`open-slide:presenter:${slideId}`);
+    channelRef.current = channel;
+    setAvailable(true);
+    const handler = (e: MessageEvent<PresenterCommand>) => {
+      onMessageRef.current?.(e.data);
+    };
+    channel.addEventListener('message', handler);
+    return () => {
+      channel.removeEventListener('message', handler);
+      channel.close();
+      if (channelRef.current === channel) channelRef.current = null;
+      setAvailable(false);
+    };
+  }, [slideId]);
+
+  return useMemo(
+    () => ({
+      send(msg: PresenterCommand) {
+        try {
+          channelRef.current?.postMessage(msg);
+        } catch {
+          // Channel may have been closed between the availability check
+          // and the send (e.g. StrictMode unmount mid-flush). Treat as no-op.
+        }
+      },
+      available,
+    }),
+    [available],
+  );
+}

package/src/app/components/present/use-touch-swipe.ts

@@ -0,0 +1,63 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+const MIN_SWIPE_PX = 50;
+const MAX_SWIPE_MS = 600;
+
+type Options<T extends HTMLElement> = {
+  ref: RefObject<T | null>;
+  enabled?: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+/**
+ * Single-finger horizontal swipe → prev/next. Vertical-dominant gestures
+ * are left alone so scroll-y on tablets keeps working. The handler only
+ * binds when `enabled`, so overlay layers can suppress it.
+ */
+export function useTouchSwipe<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  onPrev,
+  onNext,
+}: Options<T>) {
+  const start = useRef<{ x: number; y: number; t: number } | null>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onStart = (e: TouchEvent) => {
+      if (e.touches.length !== 1) {
+        start.current = null;
+        return;
+      }
+      const t = e.touches[0];
+      start.current = { x: t.clientX, y: t.clientY, t: performance.now() };
+    };
+    const onEnd = (e: TouchEvent) => {
+      const s = start.current;
+      start.current = null;
+      if (!s) return;
+      const t = e.changedTouches[0];
+      if (!t) return;
+      const dx = t.clientX - s.x;
+      const dy = t.clientY - s.y;
+      if (performance.now() - s.t > MAX_SWIPE_MS) return;
+      if (Math.abs(dx) < MIN_SWIPE_PX) return;
+      if (Math.abs(dx) <= Math.abs(dy)) return;
+      if (dx < 0) onNext();
+      else onPrev();
+    };
+
+    el.addEventListener('touchstart', onStart, { passive: true });
+    el.addEventListener('touchend', onEnd);
+    el.addEventListener('touchcancel', () => {
+      start.current = null;
+    });
+    return () => {
+      el.removeEventListener('touchstart', onStart);
+      el.removeEventListener('touchend', onEnd);
+    };
+  }, [ref, enabled, onPrev, onNext]);
+}

package/src/app/components/sidebar/{FolderItem.tsx → folder-item.tsx}

@@ -1,24 +1,43 @@
 import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
-import { useState } from 'react';
-import type { Folder, FolderIcon } from '@/lib/sdk';
-import { cn } from '@/lib/utils';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useEffect, useRef, useState } from 'react';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { IconPicker } from './IconPicker';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { cn } from '@/lib/utils';
+import { IconPicker } from './icon-picker';
 
 export const SLIDE_DND_MIME = 'application/x-slide-id';
 
+function useSlideDragActive() {
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const onStart = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes(SLIDE_DND_MIME)) setActive(true);
+    };
+    const onEnd = () => setActive(false);
+    document.addEventListener('dragstart', onStart);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('drop', onEnd);
+    return () => {
+      document.removeEventListener('dragstart', onStart);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('drop', onEnd);
+    };
+  }, []);
+  return active;
+}
+
 export function FolderIconChip({ icon, className }: { icon: FolderIcon; className?: string }) {
   if (icon.type === 'emoji') {
     return (
       <span
         className={cn(
-          'inline-flex size-5 items-center justify-center text-base leading-none',
+          'inline-flex size-5 items-center justify-center text-[15px] leading-none',
           className,
         )}
       >
@@ -28,7 +47,10 @@ export function FolderIconChip({ icon, className }: { icon: FolderIcon; classNam
   }
   return (
     <span
-      className={cn('inline-block size-4 rounded-[4px] ring-1 ring-black/10', className)}
+      className={cn(
+        'inline-block size-3 rounded-[3px] ring-1 ring-foreground/15 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)]',
+        className,
+      )}
       style={{ background: icon.value }}
     />
   );
@@ -61,18 +83,29 @@ export function FolderItem({
 }) {
   const [renaming, setRenaming] = useState(false);
   const [dragOver, setDragOver] = useState(false);
+  const dragDepth = useRef(0);
   const [draftName, setDraftName] = useState(row.kind === 'folder' ? row.folder.name : '');
+  const slideDragActive = useSlideDragActive();
 
+  const isSlideDrag = (e: React.DragEvent) => e.dataTransfer.types.includes(SLIDE_DND_MIME);
+  const handleDragEnter = (e: React.DragEvent) => {
+    if (!isSlideDrag(e)) return;
+    dragDepth.current += 1;
+    if (dragDepth.current === 1) setDragOver(true);
+  };
   const handleDragOver = (e: React.DragEvent) => {
-    if (e.dataTransfer.types.includes(SLIDE_DND_MIME)) {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-      setDragOver(true);
-    }
+    if (!isSlideDrag(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!isSlideDrag(e)) return;
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragOver(false);
   };
-  const handleDragLeave = () => setDragOver(false);
   const handleDrop = (e: React.DragEvent) => {
     const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
+    dragDepth.current = 0;
     setDragOver(false);
     if (!slideId) return;
     e.preventDefault();
@@ -94,15 +127,22 @@ export function FolderItem({
     // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target wraps interactive children
     <div
       className={cn(
-        'group relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
-        selected ? 'bg-muted text-foreground' : 'text-foreground/80 hover:bg-muted/60',
-        dragOver && 'ring-2 ring-primary ring-offset-1 ring-offset-background',
+        'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-colors',
+        // Editorial selected state: subtle warm tint + a thin vermillion
+        // ink-mark on the leading edge. Avoids the heavy "filled pill" look.
+        selected
+          ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
+          : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',
+        slideDragActive && !dragOver && 'ring-1 ring-foreground/10',
+        dragOver &&
+          'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01] motion-safe:transition-transform',
       )}
+      onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      {row.kind === 'folder' ? (
+      {row.kind === 'folder' && import.meta.env.DEV ? (
         <Popover>
           <PopoverTrigger asChild>
             <button
@@ -137,7 +177,7 @@ export function FolderItem({
             }
           }}
           maxLength={40}
-          className="min-w-0 flex-1 rounded-sm bg-background px-1 text-sm outline-none ring-1 ring-ring/40"
+          className="min-w-0 flex-1 rounded-[3px] bg-card px-1 text-[12.5px] outline-none ring-1 ring-foreground/20"
         />
       ) : (
         <button type="button" onClick={onSelect} className="min-w-0 flex-1 truncate text-left">
@@ -145,22 +185,17 @@ export function FolderItem({
         </button>
       )}
 
-      <span
-        className={cn(
-          'shrink-0 text-xs tabular-nums text-muted-foreground',
-          count === 0 && 'opacity-0 group-hover:opacity-100',
-        )}
-      >
-        {count}
+      <span className={cn('folio shrink-0', count === 0 && 'opacity-0 group-hover:opacity-100')}>
+        {count.toString().padStart(2, '0')}
       </span>
 
-      {row.kind === 'folder' && (
+      {row.kind === 'folder' && import.meta.env.DEV && (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <button
               type="button"
               onClick={(e) => e.stopPropagation()}
-              className="size-5 shrink-0 rounded opacity-0 transition-opacity hover:bg-muted-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+              className="size-5 shrink-0 rounded opacity-0 transition-opacity hover:bg-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
               aria-label="Folder actions"
             >
               <MoreHorizontal className="mx-auto size-3.5" />

package/src/app/components/sidebar/{IconPicker.tsx → icon-picker.tsx}

@@ -1,16 +1,19 @@
 import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
-import type { FolderIcon } from '@/lib/sdk';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { FolderIcon } from '@/lib/sdk';
 
+// Editorial palette — restrained warm/earth tones, no shadcn defaults
+// (no #8b5cf6 violet, no #3b82f6 blue, etc.). Picked to coexist with the
+// vermillion brand accent without shouting over it.
 export const PRESET_COLORS = [
-  '#8b5cf6',
-  '#6366f1',
-  '#3b82f6',
-  '#10b981',
-  '#f59e0b',
-  '#ef4444',
-  '#ec4899',
-  '#64748b',
+  '#c0392b', // vermillion
+  '#b8743e', // ochre
+  '#6f7a3a', // olive
+  '#2f6a4f', // forest
+  '#3a5a7c', // ink blue
+  '#6b4675', // plum
+  '#a3543b', // terracotta
+  '#3a3a3a', // graphite
 ];
 
 export function IconPicker({
@@ -47,7 +50,7 @@ export function IconPicker({
               key={c}
               type="button"
               onClick={() => onChange({ type: 'color', value: c })}
-              className="size-6 rounded-md ring-1 ring-black/10 transition-transform hover:scale-110"
+              className="size-6 rounded-[4px] ring-1 ring-foreground/10 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] transition-transform hover:scale-110"
               style={{ background: c }}
               aria-label={c}
             />