@lark-apaas/coding-registry-buildless 0.1.1 → 0.1.2-beta.0

package/components/android-frame.jsx

@@ -123,7 +123,6 @@ function AndroidDevice({
       width, height, borderRadius: 18, overflow: 'hidden',
       background: dark ? '#1d1b20' : MD_C.surface,
       border: `8px solid ${MD_C.frameBorder}`,
-      boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
       display: 'flex', flexDirection: 'column', boxSizing: 'border-box',
     }}>
       <AndroidStatusBar dark={dark} />

package/components/animations.jsx

@@ -12,6 +12,8 @@
 //
 // <Stage> auto-scales to the viewport and provides the scrubber, play/pause,
 // ←/→ seek, space, and 0-to-reset controls, and persists the playhead.
+// Set the optional `poster` prop (seconds) to the moment your opening scene is
+// fully composed — the product thumbnail freezes on that frame (default ~1s).
 // Inside <Stage>, any child can call useTime() to read the current
 // playhead (seconds). Or wrap content in <Sprite start={1} end={4}>...</Sprite>
 // to only render during that window -- children receive a `localTime` and
@@ -335,17 +337,24 @@ function Stage({
   fps = 60,
   loop = true,
   autoplay = true,
+  poster = null,
   persistKey = 'animstage',
   children,
 }) {
+  // Thumbnail capture mode: the host appends ?thumbnail=1 before screenshotting.
+  // Freeze on a representative still — the author-declared `poster` second, or
+  // ~1s as a fallback — paused, with the playback bar hidden, so the product
+  // thumbnail is a deterministic frame of the first composed scene.
+  const captureMode = typeof location !== 'undefined' && /[?&]thumbnail=/.test(location.search || '');
+
   const [time, setTime] = React.useState(() => {
+    if (captureMode) return clamp(poster == null ? 1 : poster, 0, duration);
     try {
       const v = parseFloat(localStorage.getItem(persistKey + ':t') || '0');
       return isFinite(v) ? clamp(v, 0, duration) : 0;
     } catch { return 0; }
   });
-  const [playing, setPlaying] = React.useState(autoplay);
-  const [hoverTime, setHoverTime] = React.useState(null);
+  const [playing, setPlaying] = React.useState(captureMode ? false : autoplay);
   const [scale, setScale] = React.useState(1);
 
   const stageRef = React.useRef(null);
@@ -363,7 +372,7 @@ function Stage({
     if (!stageRef.current) return;
     const el = stageRef.current;
     const measure = () => {
-      const barH = 44; // playback bar height
+      const barH = captureMode ? 0 : 44; // playback bar height (hidden in capture mode)
       const s = Math.min(
         el.clientWidth / width,
         (el.clientHeight - barH) / height
@@ -426,11 +435,9 @@ function Stage({
     return () => window.removeEventListener('keydown', onKey);
   }, [duration]);
 
-  const displayTime = hoverTime != null ? hoverTime : time;
-
   const ctxValue = React.useMemo(
-    () => ({ time: displayTime, duration, playing, setTime, setPlaying }),
-    [displayTime, duration, playing]
+    () => ({ time, duration, playing, setTime, setPlaying }),
+    [time, duration, playing]
   );
 
   return (
@@ -471,17 +478,18 @@ function Stage({
         </div>
       </div>
 
-      {/* Playback bar — stacked below canvas, never overlapping */}
-      <PlaybackBar
-        time={displayTime}
-        actualTime={time}
-        duration={duration}
-        playing={playing}
-        onPlayPause={() => setPlaying(p => !p)}
-        onReset={() => { setTime(0); }}
-        onSeek={(t) => setTime(t)}
-        onHover={(t) => setHoverTime(t)}
-      />
+      {/* Playback bar — stacked below canvas, never overlapping. Hidden in
+          capture mode so the thumbnail is just the frame, no chrome. */}
+      {!captureMode && (
+        <PlaybackBar
+          time={time}
+          duration={duration}
+          playing={playing}
+          onPlayPause={() => setPlaying(p => !p)}
+          onReset={() => { setTime(0); }}
+          onSeek={(t) => setTime(t)}
+        />
+      )}
     </div>
   );
 }
@@ -490,43 +498,56 @@ function Stage({
 // Play/pause, return-to-begin, scrub track, time display.
 // Uses fixed-width time fields so layout doesn't thrash.
 
-function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek, onHover }) {
+function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek }) {
   const trackRef = React.useRef(null);
   const [dragging, setDragging] = React.useState(false);
+  const [trackHover, setTrackHover] = React.useState(null); // { x, t } — px within track + hovered time
 
-  const timeFromEvent = React.useCallback((e) => {
+  const posFromEvent = React.useCallback((e) => {
     const rect = trackRef.current.getBoundingClientRect();
-    const x = clamp((e.clientX - rect.left) / rect.width, 0, 1);
-    return x * duration;
+    const x = clamp(e.clientX - rect.left, 0, rect.width);
+    const t = rect.width > 0 ? (x / rect.width) * duration : 0;
+    return { x, t };
   }, [duration]);
 
   const onTrackMove = (e) => {
     if (!trackRef.current) return;
-    const t = timeFromEvent(e);
-    if (dragging) {
-      onSeek(t);
-    } else {
-      onHover(t);
-    }
+    const { x, t } = posFromEvent(e);
+    setTrackHover({ x, t });
+    if (dragging) onSeek(t);
   };
 
   const onTrackLeave = () => {
-    if (!dragging) onHover(null);
+    if (!dragging) setTrackHover(null);
   };
 
   const onTrackDown = (e) => {
+    const { x, t } = posFromEvent(e);
     setDragging(true);
-    const t = timeFromEvent(e);
+    setTrackHover({ x, t });
     onSeek(t);
-    onHover(null);
+  };
+
+  // Grab the knob in place: begin dragging without seeking (no jump).
+  // stopPropagation keeps the track's click-to-seek from also firing.
+  const onBallDown = (e) => {
+    e.stopPropagation();
+    setDragging(true);
+    setTrackHover(posFromEvent(e));
   };
 
   React.useEffect(() => {
     if (!dragging) return;
-    const onUp = () => setDragging(false);
+    const prevCursor = document.body.style.cursor;
+    document.body.style.cursor = 'grabbing'; // stays grabbing even if the pointer leaves the knob mid-drag
+    const onUp = () => {
+      setDragging(false);
+      setTrackHover(null);
+    };
     const onMove = (e) => {
       if (!trackRef.current) return;
-      const t = timeFromEvent(e);
+      const { x, t } = posFromEvent(e);
+      setTrackHover({ x, t });
       onSeek(t);
     };
     window.addEventListener('mouseup', onUp);
@@ -534,66 +555,60 @@ function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek, on
     return () => {
       window.removeEventListener('mouseup', onUp);
       window.removeEventListener('mousemove', onMove);
+      document.body.style.cursor = prevCursor;
     };
-  }, [dragging, timeFromEvent, onSeek]);
+  }, [dragging, posFromEvent, onSeek]);
 
   const pct = duration > 0 ? (time / duration) * 100 : 0;
   const fmt = (t) => {
     const total = Math.max(0, t);
     const m = Math.floor(total / 60);
     const s = Math.floor(total % 60);
-    const cs = Math.floor((total * 100) % 100);
-    return `${String(m).padStart(1, '0')}:${String(s).padStart(2, '0')}.${String(cs).padStart(2, '0')}`;
+    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
   };
 
-  const mono = 'JetBrains Mono, ui-monospace, SFMono-Regular, monospace';
+  const numFont = '"PingFang SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif';
 
   return (
     <div style={{
       display: 'flex', alignItems: 'center', gap: 12,
-      padding: '8px 16px',
-      background: 'rgba(20,20,20,0.92)',
-      borderTop: '1px solid rgba(255,255,255,0.08)',
+      padding: '12px',
+      background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%)',
       width: '100%',
-      maxWidth: 680,
-      alignSelf: 'center',
-
-      borderRadius: 8,
-      color: '#f6f4ef',
-      fontFamily: 'Inter, system-ui, sans-serif',
+      color: '#fff',
+      fontFamily: numFont,
       userSelect: 'none',
       flexShrink: 0,
+      boxSizing: 'border-box',
     }}>
-      <IconButton onClick={onReset} title="Return to start (0)">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <path d="M3 2v10M12 2L5 7l7 5V2z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"/>
-        </svg>
-      </IconButton>
-      <IconButton onClick={onPlayPause} title="Play/pause (space)">
+      {/* Play / pause — bare white triangle, no button chrome */}
+      <IconButton onClick={onPlayPause} tooltip={playing ? '暂停' : '播放'}>
         {playing ? (
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <rect x="3" y="2" width="3" height="10" fill="currentColor"/>
-            <rect x="8" y="2" width="3" height="10" fill="currentColor"/>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3.33333 1.33398C2.59695 1.33398 2 1.93094 2 2.66732V13.334C2 14.0704 2.59695 14.6673 3.33333 14.6673H4.66667C5.40305 14.6673 6 14.0704 6 13.334V2.66732C6 1.93094 5.40305 1.33398 4.66667 1.33398H3.33333Z" fill="currentColor"/>
+            <path d="M11.3333 1.33398C10.597 1.33398 10 1.93094 10 2.66732V13.334C10 14.0704 10.597 14.6673 11.3333 14.6673H12.6667C13.403 14.6673 14 14.0704 14 13.334V2.66732C14 1.93094 13.403 1.33398 12.6667 1.33398H11.3333Z" fill="currentColor"/>
           </svg>
         ) : (
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path d="M3 2l9 5-9 5V2z" fill="currentColor"/>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.0489 9.13127C14.873 8.60116 14.873 7.39754 14.0489 6.86743L4.74461 0.882617C3.84764 0.305661 2.66699 0.948902 2.66699 2.01454V13.9842C2.66699 15.0498 3.84764 15.693 4.74461 15.1161L14.0489 9.13127Z" fill="currentColor"/>
           </svg>
         )}
       </IconButton>
 
-      {/* Current time: fixed width so it doesn't thrash */}
+      {/* Current time */}
       <div style={{
-        fontFamily: mono,
-        fontSize: 12,
+        fontFamily: numFont,
+        fontSize: 14,
+        fontWeight: 400,
         fontVariantNumeric: 'tabular-nums',
-        width: 64, textAlign: 'right',
-        color: '#f6f4ef',
+        color: '#fff',
+        minWidth: 40,
+        textAlign: 'center'
       }}>
         {fmt(time)}
       </div>
 
-      {/* Scrub track */}
+      {/* Scrub track — white fill on translucent-white rail + draggable knob */}
       <div
         ref={trackRef}
         onMouseMove={onTrackMove}
@@ -601,7 +616,7 @@ function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek, on
         onMouseDown={onTrackDown}
         style={{
           flex: 1,
-          height: 22,
+          height: 20,
           position: 'relative',
           cursor: 'pointer',
           display: 'flex', alignItems: 'center',
@@ -610,33 +625,62 @@ function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek, on
         <div style={{
           position: 'absolute',
           left: 0, right: 0, height: 4,
-          background: 'rgba(255,255,255,0.12)',
+          background: 'rgba(255,255,255,0.6)',
           borderRadius: 2,
         }}/>
         <div style={{
           position: 'absolute',
           left: 0, width: `${pct}%`, height: 4,
-          background: 'oklch(72% 0.12 250)',
+          background: 'rgba(255,255,255,0.9)',
           borderRadius: 2,
         }}/>
-        <div style={{
-          position: 'absolute',
-          left: `${pct}%`, top: '50%',
-          width: 12, height: 12,
-          marginLeft: -6, marginTop: -6,
-          background: '#fff',
-          borderRadius: 6,
-          boxShadow: '0 2px 4px rgba(0,0,0,0.4)',
-        }}/>
+        {/* Progress knob — outer div is an enlarged transparent hit area for easier grabbing */}
+        <div
+          onMouseDown={onBallDown}
+          style={{
+            position: 'absolute',
+            left: `${pct}%`, top: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 20, height: 20,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: dragging ? 'grabbing' : 'grab',
+            zIndex: 5,
+          }}
+        >
+          <div style={{
+            width: dragging ? 14 : 12,
+            height: dragging ? 14 : 12,
+            background: '#fff',
+            borderRadius: '50%',
+            border: '0.5px solid #D2D5D8',
+            boxShadow: '0 2px 6px rgba(0,0,0,0.35)',
+            transition: 'width 100ms, height 100ms',
+          }}/>
+        </div>
+        {trackHover && (
+          <div style={{
+            position: 'absolute',
+            left: trackHover.x,
+            bottom: '100%',
+            transform: 'translateX(-50%)',
+            marginBottom: 2,
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}>
+            <TooltipBubble text={fmt(trackHover.t)} />
+          </div>
+        )}
       </div>
 
-      {/* Duration: fixed width */}
+      {/* Duration — dimmed */}
       <div style={{
-        fontFamily: mono,
-        fontSize: 12,
+        fontFamily: numFont,
+        fontSize: 14,
+        fontWeight: 400,
         fontVariantNumeric: 'tabular-nums',
-        width: 64, textAlign: 'left',
-        color: 'rgba(246,244,239,0.55)',
+        color: 'rgba(255,255,255,0.6)',
+        minWidth: 40,
+        textAlign: 'center',
       }}>
         {fmt(duration)}
       </div>
@@ -644,31 +688,80 @@ function PlaybackBar({ time, duration, playing, onPlayPause, onReset, onSeek, on
   );
 }
 
-function IconButton({ children, onClick, title }) {
+
+function IconButton({ children, onClick, tooltip }) {
   const [hover, setHover] = React.useState(false);
   return (
     <button
       onClick={onClick}
-      title={title}
+      aria-label={tooltip}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
-        width: 28, height: 28,
+        position: 'relative',
+        width: 24, height: 24,
         display: 'flex', alignItems: 'center', justifyContent: 'center',
-        background: hover ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.04)',
-        border: '1px solid rgba(255,255,255,0.1)',
+        background: hover ? 'rgba(255,255,255,0.1)' : 'transparent',
+        border: 'none',
         borderRadius: 6,
-        color: '#f6f4ef',
+        color: '#fff',
         cursor: 'pointer',
         padding: 0,
         transition: 'background 120ms',
       }}
     >
       {children}
+      {tooltip && (
+        <div style={{
+          position: 'absolute',
+          bottom: '100%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          marginBottom: 8,
+          pointerEvents: 'none',
+          opacity: hover ? 1 : 0,
+          transition: 'opacity 120ms',
+          zIndex: 10,
+        }}>
+          <TooltipBubble text={tooltip} />
+        </div>
+      )}
     </button>
   );
 }
 
+// ── Tooltip bubble ────────────────────────────────────────────────────────────
+// Dark rounded bubble with a downward tail. Positioning is up to the caller.
+function TooltipBubble({ text }) {
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <div style={{
+        background: '#1F2329',
+        color: '#fff',
+        fontSize: 12,
+        lineHeight: '16px',
+        padding: '6px 12px',
+        borderRadius: 6,
+        whiteSpace: 'nowrap',
+        fontFamily: '"PingFang SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
+        fontVariantNumeric: 'tabular-nums',
+        boxShadow: '0 4px 8px -8px rgba(0, 0, 0, 0.06), 0 6px 12px 0 rgba(0, 0, 0, 0.04), 0 8px 24px 8px rgba(0, 0, 0, 0.04)',
+      }}>
+        {text}
+      </div>
+      <div style={{
+        position: 'absolute',
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)',
+        width: 9, height: 9,
+        borderRadius: '0 0 3px 0',
+        background: '#1F2329',
+      }}/>
+    </div>
+  );
+}
+
 
 Object.assign(window, {
   Easing, interpolate, animate, clamp,

package/components/browser-window.jsx

@@ -105,7 +105,7 @@ function ChromeWindow({
   return (
     <div style={{
       width, height, borderRadius: 10, overflow: 'hidden',
-      boxShadow: '0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1)',
+      border: '1px solid #DEE0E3',
       display: 'flex', flexDirection: 'column', background: CHROME_C.tabBg,
     }}>
       <ChromeTabBar tabs={tabs} activeIndex={activeIndex} />