penseat 0.3.0 → 0.3.1

package/package.json

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

package/templates/components/penseat-bar.tsx

@@ -252,19 +252,12 @@ function ColorDot({ color: c, index: i, active, onChange, pressedId }: { color:
 }
 
 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',
@@ -274,9 +267,9 @@ function ActionButton({ icon, ariaLabel, onClick, pressed }: { icon: ReactNode;
         flexShrink: 0,
         cursor: 'pointer',
         transition: 'all 150ms',
-        transform: isDown ? 'scale(0.9)' : undefined,
-        color: (isDown || hovered) ? '#f4f4f5' : '#a1a1aa',
-        backgroundColor: (isDown || hovered) ? '#3f3f46' : 'transparent',
+        transform: pressed ? 'scale(0.9)' : undefined,
+        color: pressed ? '#f4f4f5' : '#a1a1aa',
+        backgroundColor: pressed ? 'rgba(63,63,70,1)' : 'rgba(63,63,70,0)',
         border: 'none',
         outline: 'none',
         borderRadius: '6px',
@@ -332,7 +325,6 @@ 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 (
@@ -341,8 +333,6 @@ 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}
-      onPointerEnter={() => setHovered(true)}
-      onPointerLeave={() => setHovered(false)}
       style={{
         position: 'relative',
         display: 'flex',
@@ -350,7 +340,7 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
         justifyContent: 'center',
         flexShrink: 0,
         cursor: 'pointer',
-        backgroundColor: hovered ? '#3f3f46' : 'transparent',
+        backgroundColor: 'rgba(63,63,70,0)',
         borderRadius: '9999px',
         border: 'none',
         outline: 'none',
@@ -410,9 +400,7 @@ function AnchorIcon({ expanded, onToggle, onPointerDown, wasDragRef, pressed, ri
 }
 
 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 isDown = pressed && !shake;
   const anim = copied ? "copy-bounce 600ms ease-out" : shake ? "nope-shake 320ms ease-out" : undefined;
   return (
     <div style={{
@@ -426,10 +414,6 @@ function DoneBtn({ onClick, disabled, capturing, copied, pressed, shake }: { onC
           tabIndex={-1}
           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"
           style={{
@@ -446,8 +430,8 @@ function DoneBtn({ onClick, disabled, capturing, copied, pressed, shake }: { onC
             outline: 'none',
             padding: 0,
             borderRadius: '6px',
-            backgroundColor: (isDown || hovered) ? '#3f3f46' : 'transparent',
-            color: (isDown || hovered) ? '#f4f4f5' : '#a1a1aa',
+            backgroundColor: isDown ? 'rgba(63,63,70,1)' : 'rgba(63,63,70,0)',
+            color: isDown ? '#f4f4f5' : '#a1a1aa',
             opacity: (disabled && !copied) ? 0.5 : 1,
           }}
         >
@@ -515,6 +499,13 @@ function DoneBtn({ onClick, disabled, capturing, copied, pressed, shake }: { onC
           [data-penseat-btn]:active {
             transform: scale(0.9) !important;
           }
+          [data-penseat-btn]:hover {
+            background-color: rgba(63,63,70,1) !important;
+            color: #f4f4f5 !important;
+          }
+          [data-penseat="trigger"]:hover {
+            background-color: rgba(63,63,70,1) !important;
+          }
         `}</style>
       )}
     </div>