penseat 0.1.0 → 0.3.0

package/index.mjs

@@ -42,7 +42,6 @@ const hasSrc = existsSync(join(cwd, "src"));
 const base = hasSrc ? join(cwd, "src") : cwd;
 
 const componentsDir = join(base, "components", "penseat");
-const uiDir = join(componentsDir, "ui");
 const libDir = join(base, "lib");
 
 // ── Check if already installed ──
@@ -56,23 +55,16 @@ if (existsSync(join(componentsDir, "penseat.tsx"))) {
 console.log(`  ${dim("Installing to")} ${cyan(componentsDir.replace(cwd + "/", ""))}`);
 console.log();
 
-mkdirSync(uiDir, { recursive: true });
+mkdirSync(componentsDir, { recursive: true });
 mkdirSync(libDir, { recursive: true });
 
 const files = [
   { from: "components/penseat.tsx", to: join(componentsDir, "penseat.tsx") },
   { from: "components/penseat-bar.tsx", to: join(componentsDir, "penseat-bar.tsx") },
   { from: "components/drawing-canvas.tsx", to: join(componentsDir, "drawing-canvas.tsx") },
-  { from: "components/ui/button.tsx", to: join(componentsDir, "ui", "button.tsx") },
   { from: "lib/capture.ts", to: join(libDir, "capture.ts") },
 ];
 
-// Only copy utils.ts if it doesn't exist (shadcn projects already have it)
-const utilsTarget = join(libDir, "utils.ts");
-if (!existsSync(utilsTarget)) {
-  files.push({ from: "lib/utils.ts", to: utilsTarget });
-}
-
 for (const f of files) {
   copyFileSync(join(TEMPLATES, f.from), f.to);
 }
@@ -82,11 +74,6 @@ console.log(`  ${green("+")} Copied ${files.length} files`);
 // ── Install dependencies ──
 const needed = [
   "html2canvas-pro",
-  "lucide-react",
-  "@base-ui/react",
-  "class-variance-authority",
-  "clsx",
-  "tailwind-merge",
 ];
 
 const missing = needed.filter((d) => !deps[d]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "penseat",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Draw on your screen, copy to clipboard. A devtool for annotating and sharing.",
   "bin": {
     "penseat": "./index.mjs"

package/templates/components/drawing-canvas.tsx

@@ -601,8 +601,10 @@ const DrawingCanvas = forwardRef<DrawingCanvasHandle, DrawingCanvasProps>(
         <canvas
           ref={canvasRef}
           data-penseat="canvas"
-          className="absolute top-0 left-0"
           style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
             pointerEvents: active ? "auto" : "none",
             cursor: active
               ? color === ERASER_COLOR
@@ -616,8 +618,13 @@ const DrawingCanvas = forwardRef<DrawingCanvasHandle, DrawingCanvasProps>(
         {active && isEraser && (
           <div
             ref={eraserCursorRef}
-            className="fixed z-[99999] pointer-events-none -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
             style={{
+              position: "fixed",
+              zIndex: 99999,
+              pointerEvents: "none",
+              transform: "translate(-50%, -50%)",
+              borderRadius: "9999px",
+              border: "2px solid #ffffff",
               width: ERASER_RADIUS * 2,
               height: ERASER_RADIUS * 2,
               mixBlendMode: "difference",

package/templates/components/penseat-bar.tsx

@@ -2,8 +2,13 @@
 
 import { useState, useCallback, useRef, useEffect, createContext, useContext, type ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { Undo2, Trash2, X, Copy, Check } from "lucide-react";
-import { Button } from "./ui/button";
+// Inline SVG icons (from Lucide) — zero dependencies
+const iconProps = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
+const Undo2Icon = <svg {...iconProps}><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>;
+const Trash2Icon = <svg {...iconProps}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>;
+const XIcon = <svg {...iconProps} width={20} height={20}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>;
+const CopyIcon = <svg {...iconProps}><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>;
+const CheckIcon = <svg {...iconProps} strokeWidth={3}><path d="M20 6 9 17l-5-5"/></svg>;
 
 const TOOLTIP_DELAY = 360;
 const TOOLTIP_GAP = 10;
@@ -25,13 +30,26 @@ const CMD_ICON = (
 function Keycap({ children }: { children: ReactNode }) {
   const content = children === "command" ? CMD_ICON : children === "shift" ? SHIFT_ICON : children;
   return (
-    <kbd className="inline-flex items-center justify-center size-5 rounded bg-zinc-700 border border-zinc-600 text-[13px] font-mono leading-none text-zinc-300">
+    <kbd style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '20px',
+      height: '20px',
+      borderRadius: '4px',
+      backgroundColor: '#3f3f46',
+      border: '1px solid #52525b',
+      fontSize: '13px',
+      fontFamily: 'monospace',
+      lineHeight: 1,
+      color: '#d4d4d8',
+    }}>
       {content}
     </kbd>
   );
 }
 
-function WithTooltip({ label, shortcut, children, pressed }: { label: string; shortcut?: string[]; children: ReactNode; pressed?: boolean }) {
+function WithTooltip({ label, shortcut, children, pressed, forceShow }: { label: string; shortcut?: string[]; children: ReactNode; pressed?: boolean; forceShow?: boolean }) {
   const below = useContext(TooltipBelowCtx);
   const [hoverShow, setHoverShow] = useState(false);
   const [pos, setPos] = useState<{ x: number; top: number; bottom: number } | null>(null);
@@ -45,6 +63,11 @@ function WithTooltip({ label, shortcut, children, pressed }: { label: string; sh
     }
   }, []);
 
+  // Force-show: compute position on mount when forceShow is true
+  useEffect(() => {
+    if (forceShow) computePos();
+  }, [forceShow, computePos]);
+
   const onEnter = () => {
     timerRef.current = setTimeout(() => {
       computePos();
@@ -61,17 +84,24 @@ function WithTooltip({ label, shortcut, children, pressed }: { label: string; sh
   return (
     <div
       ref={wrapRef}
-      className="flex items-center self-stretch transition-transform duration-100"
-      style={{ transform: pressed ? "scale(0.95)" : undefined }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        transition: 'transform 100ms',
+        transform: pressed ? 'scale(0.95)' : undefined,
+      }}
       onPointerEnter={onEnter}
       onPointerLeave={onLeave}
     >
       {children}
-      {hoverShow && pos && createPortal(
+      {(hoverShow || forceShow) && pos && createPortal(
         <div
           data-penseat="tooltip"
-          className="fixed z-[99999] pointer-events-none"
           style={{
+            position: 'fixed',
+            zIndex: 99999,
+            pointerEvents: 'none',
             left: pos.x,
             top: below ? pos.bottom + TOOLTIP_GAP : pos.top - TOOLTIP_GAP,
             translate: below ? "-50% 0" : "-50% -100%",
@@ -79,10 +109,20 @@ function WithTooltip({ label, shortcut, children, pressed }: { label: string; sh
             animation: below ? "tooltip-in-below 150ms ease-out" : "tooltip-in-above 150ms ease-out",
           }}
         >
-          <div className={`flex items-center gap-2 rounded-lg bg-[#27272A] pl-3 py-1.5 ${shortcut && shortcut.length > 0 ? "pr-1.5" : "pr-3"}`}>
-            <span className="text-xs font-mono text-zinc-200">{label}</span>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            borderRadius: '8px',
+            backgroundColor: '#27272A',
+            paddingLeft: '12px',
+            paddingTop: '6px',
+            paddingBottom: '6px',
+            paddingRight: shortcut && shortcut.length > 0 ? '6px' : '12px',
+          }}>
+            <span style={{ fontSize: '12px', fontFamily: 'monospace', color: '#e4e4e7' }}>{label}</span>
             {shortcut && shortcut.length > 0 && (
-              <div className="flex items-center gap-0.5">
+              <div style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
                 {shortcut.map((key, i) => (
                   <Keycap key={i}>{key}</Keycap>
                 ))}
@@ -131,15 +171,27 @@ interface PenseatBarProps {
 }
 
 function EraserDot({ active, onClick }: { active: boolean; onClick: () => void }) {
+  const [hovered, setHovered] = useState(false);
   return (
     <div
       onClick={onClick}
-      className="size-5 rounded-full cursor-pointer transition-transform hover:scale-110 shrink-0 flex items-center justify-center"
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
       style={{
+        width: '20px',
+        height: '20px',
+        borderRadius: '9999px',
+        cursor: 'pointer',
+        transition: 'transform 150ms',
+        transform: hovered ? 'scale(1.1)' : 'scale(1)',
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         boxShadow: active ? "0 0 0 2px #18181b, 0 0 0 3px #a1a1aa" : "none",
       }}
     >
-      <svg viewBox="0 0 20 20" className="size-5">
+      <svg viewBox="0 0 20 20" style={{ width: '20px', height: '20px' }}>
         <defs>
           <clipPath id="eraser-clip">
             <circle cx="10" cy="10" r="8.5" />
@@ -158,7 +210,7 @@ function EraserDot({ active, onClick }: { active: boolean; onClick: () => void }
 
 function ColorDots({ colors, active, onChange, pressedId }: { colors: typeof COLORS; active: string; onChange: (c: string) => void; pressedId: string | null }) {
   return (
-    <div className="flex items-center gap-2 px-3 shrink-0">
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0 12px', flexShrink: 0 }}>
       {colors.map((c, i) => {
         if (c.name === "Eraser") {
           return (
@@ -168,41 +220,105 @@ function ColorDots({ colors, active, onChange, pressedId }: { colors: typeof COL
           );
         }
         return (
-          <WithTooltip key={c.value} label={c.name} shortcut={[String(i + 1)]} pressed={pressedId === `color-${i + 1}`}>
-            <div
-              onClick={() => onChange(c.value)}
-              className="size-5 rounded-full cursor-pointer transition-transform hover:scale-110 shrink-0"
-              style={{
-                backgroundColor: c.value,
-                boxShadow: active === c.value ? `0 0 0 2px #18181b, 0 0 0 3px ${c.value}` : "none",
-              }}
-            />
-          </WithTooltip>
+          <ColorDot key={c.value} color={c} index={i} active={active === c.value} onChange={onChange} pressedId={pressedId} />
         );
       })}
     </div>
   );
 }
 
+function ColorDot({ color: c, index: i, active, onChange, pressedId }: { color: typeof COLORS[number]; index: number; active: boolean; onChange: (c: string) => void; pressedId: string | null }) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <WithTooltip label={c.name} shortcut={[String(i + 1)]} pressed={pressedId === `color-${i + 1}`}>
+      <div
+        onClick={() => onChange(c.value)}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        style={{
+          width: '20px',
+          height: '20px',
+          borderRadius: '9999px',
+          cursor: 'pointer',
+          transition: 'transform 150ms',
+          transform: hovered ? 'scale(1.1)' : 'scale(1)',
+          flexShrink: 0,
+          backgroundColor: c.value,
+          boxShadow: active ? `0 0 0 2px #18181b, 0 0 0 3px ${c.value}` : "none",
+        }}
+      />
+    </WithTooltip>
+  );
+}
+
+function ActionButton({ icon, ariaLabel, onClick, pressed }: { icon: ReactNode; ariaLabel: string; onClick: () => void; pressed: boolean }) {
+  const [hovered, setHovered] = useState(false);
+  const [active, setActive] = useState(false);
+  const isDown = pressed || active;
+  return (
+    <button
+      tabIndex={-1}
+      data-penseat-btn
+      aria-label={ariaLabel}
+      onClick={onClick}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => { setHovered(false); setActive(false); }}
+      onPointerDown={() => setActive(true)}
+      onPointerUp={() => setActive(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '32px',
+        height: '32px',
+        flexShrink: 0,
+        cursor: 'pointer',
+        transition: 'all 150ms',
+        transform: isDown ? 'scale(0.9)' : undefined,
+        color: (isDown || hovered) ? '#f4f4f5' : '#a1a1aa',
+        backgroundColor: (isDown || hovered) ? '#3f3f46' : 'transparent',
+        border: 'none',
+        outline: 'none',
+        borderRadius: '6px',
+        padding: 0,
+      }}
+    >
+      {icon}
+    </button>
+  );
+}
+
 function Actions({ onUndo, onClear, pressedId }: { onUndo: () => void; onClear: () => void; pressedId: string | null }) {
   return (
-    <div className="flex items-center gap-1 px-1 animate-in fade-in duration-200">
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px',
+      padding: '0 4px',
+      opacity: 1,
+    }}>
       <WithTooltip label="Undo" shortcut={["command", "Z"]} pressed={pressedId === "undo"}>
-        <Button tabIndex={-1} variant="ghost" size="icon" aria-label="Undo" className={`size-8 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 shrink-0 cursor-pointer active:scale-[0.9] active:translate-y-0 transition-all ${pressedId === "undo" ? "bg-zinc-800 text-zinc-100" : ""}`} onClick={onUndo}>
-          <Undo2 className="size-4" />
-        </Button>
+        <ActionButton
+          icon={Undo2Icon}
+          ariaLabel="Undo"
+          onClick={onUndo}
+          pressed={pressedId === "undo"}
+        />
       </WithTooltip>
       <WithTooltip label="Clear all" shortcut={["X"]} pressed={pressedId === "clear"}>
-        <Button tabIndex={-1} variant="ghost" size="icon" aria-label="Clear all" className={`size-8 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 shrink-0 cursor-pointer active:scale-[0.9] active:translate-y-0 transition-all ${pressedId === "clear" ? "bg-zinc-800 text-zinc-100" : ""}`} onClick={onClear}>
-          <Trash2 className="size-4" />
-        </Button>
+        <ActionButton
+          icon={Trash2Icon}
+          ariaLabel="Clear all"
+          onClick={onClear}
+          pressed={pressedId === "clear"}
+        />
       </WithTooltip>
     </div>
   );
 }
 
 const PEN_ICON = (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="size-5" fill="none">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style={{ width: '20px', height: '20px' }} fill="none">
     <path fillRule="evenodd" clipRule="evenodd" d="M20.1507 2.76256C19.4673 2.07914 18.3593 2.07915 17.6759 2.76256L16.0006 4.43796L16.0001 4.4375L14.9395 5.49816L18.9091 9.46783C19.202 9.76072 19.202 10.2356 18.9091 10.5285L16.9698 12.4678C16.6769 12.7607 16.6769 13.2356 16.9698 13.5285C17.2627 13.8214 17.7375 13.8214 18.0304 13.5285L19.9698 11.5892C20.8485 10.7105 20.8485 9.28585 19.9698 8.40717L19.5612 7.99862L21.2365 6.32322C21.9199 5.63981 21.9199 4.53177 21.2365 3.84835L20.1507 2.76256ZM17.6159 9.94413L14.0552 6.38347L8.49985 11.9392L12.0605 15.4999L17.6159 9.94413ZM3.83613 16.6032L7.43923 12.9999L10.9999 16.5605L7.39683 20.1639C7.06636 20.4943 6.65711 20.7351 6.20775 20.8635L3.20606 21.7211C2.94416 21.796 2.66229 21.7229 2.46969 21.5303C2.27709 21.3377 2.20405 21.0559 2.27888 20.794L3.1365 17.7923C3.26489 17.3429 3.50567 16.9337 3.83613 16.6032Z" fill="currentColor" />
   </svg>
 );
@@ -216,6 +332,7 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
   pressed?: boolean;
   rightExpand: boolean;
 }) {
+  const [hovered, setHovered] = useState(false);
   // Spin toward the toolbar: clockwise when expanding right, counter-clockwise when left
   const spinDeg = rightExpand ? 90 : -90;
   return (
@@ -224,18 +341,39 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
       data-penseat="trigger"
       onClick={(e) => { (e.currentTarget as HTMLElement).blur(); if (!wasDragRef.current) onToggle(); }}
       onPointerDown={expanded ? undefined : onPointerDown}
-      className="relative flex items-center justify-center shrink-0 cursor-pointer transition-colors [&:hover]:bg-zinc-800 rounded-full"
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
       style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        cursor: 'pointer',
+        backgroundColor: hovered ? '#3f3f46' : 'transparent',
+        borderRadius: '9999px',
+        border: 'none',
+        outline: 'none',
+        padding: 0,
         width: BAR_HEIGHT - 4,
         height: BAR_HEIGHT - 4,
         transform: pressed ? "scale(0.9)" : undefined,
-        transition: "transform 100ms",
+        transition: "transform 100ms, background-color 150ms",
       }}
     >
       {/* Pen icon — visible when collapsed */}
       <span
-        className="absolute inset-0 flex items-center justify-center text-white transition-all duration-200 ease-in-out"
         style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#ffffff',
+          transition: 'all 200ms ease-in-out',
           opacity: expanded ? 0 : 1,
           transform: expanded ? "scale(0.5)" : "scale(1)",
           filter: expanded ? "blur(4px)" : "blur(0px)",
@@ -247,8 +385,17 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
       </span>
       {/* Close icon — spins in from the toolbar direction */}
       <span
-        className="absolute inset-0 flex items-center justify-center text-zinc-400 transition-all duration-300 ease-in-out"
         style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#a1a1aa',
+          transition: 'all 300ms ease-in-out',
           opacity: expanded ? 1 : 0,
           transform: expanded ? "scale(1) rotate(0deg)" : `scale(0.5) rotate(${-spinDeg}deg)`,
           filter: expanded ? "blur(0px)" : "blur(4px)",
@@ -256,44 +403,96 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
           transitionDelay: expanded ? "0ms" : "60ms",
         }}
       >
-        <X className="size-5" />
+        {XIcon}
       </span>
     </button>
   );
 }
 
 function DoneBtn({ onClick, disabled, capturing, copied, pressed, shake }: { onClick: () => void; disabled: boolean; capturing: boolean; copied: boolean; pressed: boolean; shake?: boolean }) {
+  const [hovered, setHovered] = useState(false);
+  const [active, setActive] = useState(false);
+  const isDown = (pressed || active) && !shake;
   const anim = copied ? "copy-bounce 600ms ease-out" : shake ? "nope-shake 320ms ease-out" : undefined;
   return (
-    <div className="flex items-center self-stretch" style={anim ? { animation: anim } : undefined}>
-      <WithTooltip key={copied ? "copied" : "copy"} label={copied ? "Copied!" : "Copy"} shortcut={copied ? undefined : ["command", "C"]} pressed={pressed}>
-        <Button
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      animation: anim,
+    }}>
+      <WithTooltip label={copied ? "Copied!" : "Copy"} shortcut={copied ? undefined : ["command", "C"]} pressed={pressed} forceShow={copied}>
+        <button
           tabIndex={-1}
-          variant="ghost"
-          size="icon"
+          data-penseat-btn
           onClick={onClick}
+          onPointerEnter={() => setHovered(true)}
+          onPointerLeave={() => { setHovered(false); setActive(false); }}
+          onPointerDown={() => setActive(true)}
+          onPointerUp={() => setActive(false)}
           disabled={disabled && !copied}
           aria-label="Done"
-          className={`size-8 shrink-0 animate-in fade-in duration-200 cursor-pointer active:scale-[0.9] active:translate-y-0 transition-all ${
-            copied
-              ? "bg-blue-500 text-white hover:bg-blue-500 hover:text-white"
-              : pressed
-                ? "bg-zinc-800 text-zinc-100"
-                : "text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800"
-          } disabled:opacity-50`}
-          style={{ borderRadius: copied ? 9999 : undefined }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            flexShrink: 0,
+            cursor: 'pointer',
+            transition: 'all 200ms',
+            transform: isDown ? 'scale(0.9)' : undefined,
+            border: 'none',
+            outline: 'none',
+            padding: 0,
+            borderRadius: '6px',
+            backgroundColor: (isDown || hovered) ? '#3f3f46' : 'transparent',
+            color: (isDown || hovered) ? '#f4f4f5' : '#a1a1aa',
+            opacity: (disabled && !copied) ? 0.5 : 1,
+          }}
         >
           {capturing ? (
-            <span className="size-3 animate-spin rounded-full border-2 border-zinc-400/30 border-t-zinc-400" />
+            <span style={{
+              width: '12px',
+              height: '12px',
+              borderRadius: '9999px',
+              border: '2px solid rgba(161,161,170,0.3)',
+              borderTopColor: '#a1a1aa',
+              animation: 'penseat-spin 1s linear infinite',
+            }} />
           ) : (
-            <span className="relative size-4">
-              <Copy className="size-4 absolute inset-0 transition-all duration-200" style={{ opacity: copied ? 0 : 1, transform: copied ? "scale(0.5)" : "scale(1)" }} />
-              <Check className="size-4 absolute inset-0 transition-all duration-200" strokeWidth={3} style={{ opacity: copied ? 1 : 0, transform: copied ? "scale(1)" : "scale(0.5)" }} />
+            <span style={{ position: 'relative', width: '16px', height: '16px' }}>
+              <span style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 180ms ease-out',
+                opacity: copied ? 0 : 1,
+                transform: copied ? "scale(0.5)" : "scale(1)",
+              }}>{CopyIcon}</span>
+              <span style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 180ms ease-out',
+                opacity: copied ? 1 : 0,
+                transform: copied ? "scale(1)" : "scale(0.5)",
+              }}>{CheckIcon}</span>
             </span>
           )}
-        </Button>
+        </button>
       </WithTooltip>
-      {(shake || copied) && (
+      {(shake || copied || capturing) && (
         <style>{`
           @keyframes nope-shake {
             0%   { transform: translateX(0); }
@@ -309,6 +508,13 @@ function DoneBtn({ onClick, disabled, capturing, copied, pressed, shake }: { onC
             70%  { transform: translateY(-2px); }
             100% { transform: translateY(0); }
           }
+          @keyframes penseat-spin {
+            from { transform: rotate(0deg); }
+            to   { transform: rotate(360deg); }
+          }
+          [data-penseat-btn]:active {
+            transform: scale(0.9) !important;
+          }
         `}</style>
       )}
     </div>
@@ -616,8 +822,17 @@ export default function PenseatBar({
       {isDragging && previewTarget && dragPos && (
         <svg
           data-penseat="projectile"
-          className="fixed inset-0 z-[9998] pointer-events-none"
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9998,
+            pointerEvents: 'none',
+            width: '100%',
+            height: '100%',
+          }}
         >
           <line
             x1={dragPos.x}
@@ -643,8 +858,18 @@ export default function PenseatBar({
       <div
         data-penseat="bar"
         onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") e.preventDefault(); }}
-        className={`fixed z-[9999] flex items-center overflow-hidden rounded-full bg-zinc-800 border-[1.5px] border-white/25 shadow-[0_0_0_0.5px_rgba(255,255,255,0.06),0_1px_3px_rgba(0,0,0,0.15),inset_0_0.5px_0_rgba(255,255,255,0.06)] ${isDragging ? "opacity-80 scale-105" : ""} ${isFlying ? "scale-95" : ""}`}
         style={{
+          position: 'fixed',
+          zIndex: 9999,
+          display: 'flex',
+          alignItems: 'center',
+          overflow: 'hidden',
+          borderRadius: '9999px',
+          backgroundColor: '#27272a',
+          border: '1.5px solid rgba(255,255,255,0.25)',
+          boxShadow: '0 0 0 0.5px rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.15), inset 0 0.5px 0 rgba(255,255,255,0.06)',
+          opacity: isDragging ? 0.8 : 1,
+          transform: isDragging ? 'scale(1.05)' : isFlying ? 'scale(0.95)' : undefined,
           ...posStyle,
           height: BAR_HEIGHT,
           width: expanded ? contentWidth + (BAR_HEIGHT - 4) + 4 : BAR_HEIGHT,
@@ -663,11 +888,18 @@ export default function PenseatBar({
         {/* Toolbar content — always in DOM, revealed/hidden by width animation */}
         <div
           ref={contentRef}
-          className="flex flex-row items-stretch self-stretch shrink-0 pr-2"
-          style={{ pointerEvents: expanded ? "auto" : "none" }}
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            alignSelf: 'stretch',
+            flexShrink: 0,
+            paddingRight: '8px',
+            pointerEvents: expanded ? 'auto' : 'none',
+          }}
         >
           <ColorDots colors={COLORS} active={color} onChange={onColorChange} pressedId={pressedId} />
-<Actions onUndo={onUndo} onClear={onClear} pressedId={pressedId} />
+          <Actions onUndo={onUndo} onClear={onClear} pressedId={pressedId} />
           <DoneBtn onClick={onDone} disabled={capturing || !!copied} capturing={capturing} copied={!!copied} pressed={pressedId === "copy"} shake={shake} />
         </div>
       </div>

package/templates/components/penseat.tsx

@@ -53,7 +53,7 @@ export default function Penseat() {
       setCopied(true);
       setTimeout(() => {
         setCopied(false);
-      }, 1200);
+      }, 2000);
     }).catch((err) => {
       console.error("Capture failed:", err);
       triggerShake();

package/templates/components/ui/button.tsx

@@ -1,60 +0,0 @@
-"use client"
-
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-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: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",
-  {
-    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",
-        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",
-      },
-      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-3 has-data-[icon=inline-start]:pl-3",
-        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-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/templates/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}