@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/point-ask/mode-pill.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { EASE_OUT, ENTER_MS } from '../../lib/point-ask/choreography'
+import { canvasRect, freeViewport } from '../../lib/point-ask/projector'
+import { usePointAsk } from '../../store/use-point-ask'
+import { finishOptionalAnimations, pointMotionCalm, usePointMotionCalm } from './optional-motion'
+
+/** The mode's presence in the viewport: a faint edge tint while it is on. */
+export function ModeVignette() {
+  const active = usePointAsk((s) => s.active)
+  return <div aria-hidden className={`pa-vignette${active ? ' on' : ''}`} />
+}
+
+/**
+ * Only when a tap latched the mode: the pill that says how to leave. It sits at the top centre of
+ * the 3D view (not of the page: the panels beside it are not part of the view) and enters 8 px up.
+ */
+export function ModePill() {
+  const active = usePointAsk((s) => s.active)
+  const latched = usePointAsk((s) => s.latched)
+  const el = useRef<HTMLDivElement>(null)
+  const optional = useRef<Animation[]>([])
+  const calm = usePointMotionCalm()
+  const shown = active && latched
+
+  useEffect(() => {
+    if (calm) finishOptionalAnimations(optional.current)
+  }, [calm])
+
+  useEffect(() => {
+    if (!shown) return
+    const node = el.current
+    if (!node) return
+    const place = () => {
+      const rect = canvasRect()
+      if (rect) node.style.left = `${rect.left + rect.width / 2}px`
+    }
+    place()
+    window.addEventListener('resize', place)
+    const quiet = pointMotionCalm()
+    const animation = node.animate(
+      quiet
+        ? [{ opacity: 0 }, { opacity: 1 }]
+        : [
+            { opacity: 0, transform: 'translate(-50%, -8px)' },
+            { opacity: 1, transform: 'translate(-50%, 0)' },
+          ],
+      { duration: ENTER_MS, easing: EASE_OUT },
+    )
+    if (!quiet) optional.current.push(animation)
+    return () => {
+      window.removeEventListener('resize', place)
+      animation.cancel()
+      optional.current = []
+    }
+  }, [shown])
+
+  if (!shown) return null
+  return (
+    <div className="pa-pill" ref={el} role="status">
+      <b>Point at anything to ask Pascal</b> · Esc to leave
+    </div>
+  )
+}
+
+/** While a compare control is held and the scene shows what it was before the turn: a small tag says so. */
+export function BeforeTag() {
+  const comparing = usePointAsk((s) => s.comparing)
+  const el = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!comparing) return
+    const node = el.current
+    if (!node) return
+    const view = freeViewport()
+    if (view) {
+      node.style.left = `${view.x0}px`
+      // Below the level selector and the view switch, which sit over the canvas's top-left corner.
+      node.style.top = `${view.y0 + 64}px`
+    }
+    node.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, easing: EASE_OUT })
+  }, [comparing])
+
+  if (!comparing) return null
+  return (
+    <div className="pa-before" ref={el} role="status">
+      <i />
+      Before
+    </div>
+  )
+}

package/src/components/point-ask/optional-motion.ts

@@ -0,0 +1,22 @@
+import { prefersReducedMotion } from '@pascal-app/core'
+import { useReducedMotion } from '../../hooks/use-reduced-motion'
+import { usePointAsk } from '../../store/use-point-ask'
+
+/** Fresh event/frame eligibility; the hook alone starts false on a reduced-motion mount. */
+export function pointMotionCalm(): boolean {
+  return !usePointAsk.getState().playful || prefersReducedMotion()
+}
+
+export function usePointMotionCalm(): boolean {
+  const playful = usePointAsk((state) => state.playful)
+  const reduced = useReducedMotion()
+  return !playful || reduced || prefersReducedMotion()
+}
+
+/** Only optional animations belong here, never retirement or other lifecycle fades. */
+export function finishOptionalAnimations(animations: Animation[]): void {
+  for (const animation of animations.splice(0)) {
+    animation.finish()
+    animation.cancel()
+  }
+}

package/src/components/point-ask/outline-corners.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { CORNER_SPRING } from '../../lib/point-ask/choreography'
+import { subscribeFrame } from '../../lib/point-ask/frame-loop'
+import { projectBox, unionRect } from '../../lib/point-ask/projector'
+import { SpringPair } from '../../lib/point-ask/spring'
+import { usePointAsk } from '../../store/use-point-ask'
+import { pointMotionCalm } from './optional-motion'
+
+const CORNERS = ['tl', 'tr', 'bl', 'br'] as const
+/** How far outside its place a corner starts when the outline first draws itself. */
+const DRAW_IN_PX = 12
+
+/**
+ * The outline's corners: four brackets around the pointed element's screen box that travel from
+ * one target to the next on a spring instead of blinking off and on (the owner's "the outline
+ * draws itself, and travels"). The 3D outline on the element itself is the viewer's; these frame
+ * it. They follow the camera every frame, and never animate a hover change that a lag would read
+ * as latency: only the travel between targets is sprung, and it is fast (response 0.16 s).
+ */
+export function OutlineCorners() {
+  const nodes = useRef<(HTMLDivElement | null)[]>([])
+  const springs = useRef(CORNERS.map(() => new SpringPair(0, 0, CORNER_SPRING)))
+  const shown = useRef(false)
+  // The frame loop runs only while the mode is on: an idle editor pays nothing for it.
+  const on = usePointAsk((s) => s.active)
+
+  useEffect(() => {
+    if (!on) {
+      shown.current = false
+      for (const el of nodes.current) if (el) el.style.opacity = '0'
+      return
+    }
+    return subscribeFrame((dt) => {
+      const state = usePointAsk.getState()
+      // The pointer's next pick leads while it names one; with none under it the bubble's targets stay framed.
+      const targets = state.hover ? [state.hover.target] : (state.bubble?.targets ?? [])
+      const boxes = state.active
+        ? targets.flatMap((t) => (t.box ? [projectBox(t.box)] : [])).flatMap((r) => (r ? [r] : []))
+        : []
+      const rect = unionRect(boxes)
+      if (!rect) {
+        if (shown.current) {
+          shown.current = false
+          for (const el of nodes.current) if (el) el.style.opacity = '0'
+        }
+        return
+      }
+      const calm = pointMotionCalm()
+      const first = !shown.current
+      shown.current = true
+      const points = {
+        tl: [rect.x0, rect.y0],
+        tr: [rect.x1, rect.y0],
+        bl: [rect.x0, rect.y1],
+        br: [rect.x1, rect.y1],
+      } as const
+      CORNERS.forEach((corner, index) => {
+        const el = nodes.current[index]
+        const spring = springs.current[index]
+        if (!(el && spring)) return
+        const [px, py] = points[corner]
+        if (calm) spring.snap(px, py)
+        else {
+          if (first)
+            spring.snap(
+              px + (corner[1] === 'l' ? -DRAW_IN_PX : DRAW_IN_PX),
+              py + (corner[0] === 't' ? -DRAW_IN_PX : DRAW_IN_PX),
+            )
+          spring.to(px, py).step(dt)
+        }
+        const { x, y } = spring.value
+        el.style.transform = `translate3d(${x}px,${y}px,0)`
+        el.style.opacity = '1'
+      })
+    })
+  }, [on])
+
+  return (
+    <>
+      {CORNERS.map((corner, index) => (
+        <div
+          className={`pa-fc ${corner}`}
+          key={corner}
+          ref={(el) => {
+            nodes.current[index] = el
+          }}
+        />
+      ))}
+    </>
+  )
+}