retake-dev 0.4.0 → 0.5.1

package/src/shell/shell.css

@@ -54,11 +54,40 @@ body.dragging #wb-stage, body.scrubbing #wb-stage { pointer-events: none; }
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36px), var(--glass);
   -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 -8px 32px rgba(0, 0, 0, 0.35); }
+/* Folded away (the divider dragged to the bottom edge, or ⌥T): it slides down
+   out of sight and the round button in the corner brings it back. */
+#wb-dock { padding-bottom: env(safe-area-inset-bottom, 0px);
+  transition: transform .24s var(--ease), opacity .2s var(--ease), visibility 0s linear 0s; }
+#wb-dock.will-collapse { opacity: .55; }
+/* Mid-drag it follows the pointer exactly (translateY below the minimum height,
+   see 10-dock.js); let go and it eases from there into the icon or back up. */
+body.dragging #wb-dock { transition: opacity .12s var(--ease); will-change: transform; }
+body.collapsed #wb-dock { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
+  transition: transform .24s var(--ease), opacity .2s var(--ease), visibility 0s linear .24s; }
+/* Placed by 10-dock.js (left/top: dragged anywhere, snapped to a side edge). */
+#wb-fab { position: fixed; z-index: 10; left: calc(100vw - 60px); top: calc(100vh - 60px); touch-action: none; cursor: grab;
+  width: 44px; height: 44px; border-radius: 999px; color: var(--blue);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), var(--glass);
+  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px var(--hair), var(--shadow); animation: fab-in .22s var(--ease); }
+#wb-fab[hidden] { display: none; }
+#wb-fab.moving { cursor: grabbing; transform: scale(1.06); transition: transform .12s var(--ease); }
+#wb-fab.snapping { transition: left .28s var(--ease), top .28s var(--ease), transform .12s var(--ease); }
+@media (hover: hover) { #wb-fab:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), var(--glass); } }
+#wb-fab svg { display: block; }
+/* The phase, as the readout shows it: green live, blue playing, amber paused. */
+#wb-fab .dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--dim); box-shadow: 0 0 0 2px rgba(22, 22, 26, 0.9); }
+#wb-fab[data-phase="live"] .dot { background: var(--green); }
+#wb-fab[data-phase="playing"] .dot { background: var(--blue); }
+#wb-fab[data-phase="paused"] .dot, #wb-fab[data-phase="scrubbing"] .dot { background: var(--amber); }
+@keyframes fab-in { from { opacity: 0; transform: scale(.6) translateY(8px); } }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  #wb-fab { background: rgba(20, 20, 24, 0.92); }
   #wb-dock { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36px), rgba(20, 20, 24, 0.92); }
 }
 /* The grab handle at the top centre: always there, brighter on hover. */
-.divider { position: absolute; left: 0; right: 0; top: 0; height: 12px; cursor: ns-resize; z-index: 3; display: flex; justify-content: center; }
+/* touch-action: a finger drag on it is the dock's, never the page's scroll. */
+.divider { position: absolute; left: 0; right: 0; top: 0; height: 12px; cursor: ns-resize; z-index: 3; display: flex; justify-content: center; touch-action: none; }
 .divider span { margin-top: 4px; width: 36px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background .15s var(--ease), width .15s var(--ease); }
 .divider:hover span, body.dragging .divider span { background: rgba(255, 255, 255, 0.45); width: 44px; }
 
@@ -71,12 +100,11 @@ button:active { transform: scale(0.96); }
 .head { position: relative; flex: none; height: 48px; margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
 .left, .right { display: flex; align-items: center; gap: 8px; flex: none; }
 .right { margin-left: auto; }
-/* Phone width: the tools scroll sideways rather than run off the edge. */
-@media (max-width: 520px) { .head { padding: 0 10px; gap: 6px; } .readout .phase { display: none; } .right { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .right::-webkit-scrollbar { display: none; } }
 /* One button style for the text controls: 32px, full round, a ghost fill. */
 .btn { flex: none; height: 32px; padding: 0 14px; gap: 8px; border-radius: 999px; background: var(--fill); color: var(--muted);
   font: 500 13px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hair); }
 @media (hover: hover) { .btn:hover { color: var(--white); background: var(--fill-2); } }
+.btn.fresh svg { display: none; }
 
 /* Transport: play and the clock in one capsule. */
 .transport { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 4px; border-radius: 999px;
@@ -118,6 +146,29 @@ button:active { transform: scale(0.96); }
   box-shadow: 0 0 0 2px rgba(22, 22, 26, 0.9); transform: scale(0); opacity: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
 .notes-count.has .n { transform: none; opacity: 1; }
 
+/* Phone width: the phase word goes, the row tightens, and Start fresh becomes
+   its icon; anything still too wide scrolls sideways rather than run off the edge. */
+@media (max-width: 520px) { .head { padding: 0 10px; gap: 6px; } .readout .phase { display: none; } .right { gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .right::-webkit-scrollbar { display: none; } }
+@media (max-width: 440px) { .btn.fresh { width: 32px; padding: 0; } .btn.fresh span { display: none; } .btn.fresh svg { display: block; } }
+/* Fingers (and phone widths): 40px targets. The handle's strip reaches 16px
+   above the dock; lane names get a narrower gutter so the track keeps its
+   width; the glass is denser, so the page under it doesn't muddy the dock. */
+@media (pointer: coarse), (max-width: 520px) {
+  .divider { top: -16px; height: 32px; }
+  .divider span { margin-top: 20px; }
+  .head { height: 56px; }
+  .transport { height: 44px; gap: 8px; padding: 0 12px 0 2px; }
+  .play { width: 40px; height: 40px; }
+  .tools { height: 44px; padding: 2px; }
+  .tool { width: 40px; height: 40px; }
+  .btn { height: 40px; }
+  .notes-count { width: 32px; }
+}
+@media (max-width: 440px) { .btn.fresh { width: 40px; } }
+@media (max-width: 520px) {
+  :root { --glass: rgba(20, 20, 24, 0.9); }
+  .gutter { width: 76px; }
+}
 /* The one hint: a small pill. */
 /* Warnings only, centred on the dock. */
 .hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px;
@@ -163,10 +214,6 @@ body.scrubbing, body.scrubbing .track { cursor: ew-resize; }
 body.branching .track, body.branching .track * { cursor: crosshair !important; }
 
 /* Following was stopped by hand: this brings it back. */
-.live-btn { position: absolute; right: 8px; top: 24px; z-index: 2; height: 24px; padding: 0 10px; border-radius: 999px;
-  background: var(--fill-2); color: var(--white); font: 500 12px/1 var(--sans); }
-@media (hover: hover) { .live-btn:hover { background: rgba(255, 255, 255, 0.18); } }
-.live-btn[hidden] { display: none; }
 
 /* ruler: numbers are monospace */
 .lines .rule { stroke: var(--hair); stroke-width: 1; }
@@ -230,6 +277,7 @@ body.branching .track, body.branching .track * { cursor: crosshair !important; }
 #wb-layers .layer.pseudo { padding-left: 14px; }
 #wb-layers .layer.on { color: var(--ink); background: var(--amber); }
 #wb-layers .more { padding: 2px 6px; color: var(--dim); }
+#wb-layers .layer.skipped:not(.on) { color: var(--dim); }
 #wb-hl.select::after { background: var(--white); }
 #wb-scope { position: fixed; pointer-events: none; border: 1px dashed var(--muted); border-radius: 8px; z-index: 14; display: none; }
 #wb-pins { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
@@ -237,6 +285,7 @@ body.branching .track, body.branching .track * { cursor: crosshair !important; }
   color: var(--ink); font: 600 11px/1 var(--mono); box-shadow: 0 0 0 2px rgba(22, 22, 26, 0.85), var(--shadow); transition: transform .12s var(--ease), opacity .15s var(--ease); }
 @media (hover: hover) { .canvas-pin:hover { transform: scale(1.12); } }
 .canvas-pin.away { opacity: .45; }
+body.picking-notes .canvas-pin { pointer-events: none; }
 @media (hover: hover) { .canvas-pin.away:hover { opacity: 1; } }
 
 /* ---- popovers: a note, a context menu ---- */
@@ -292,4 +341,26 @@ body.branching .track, body.branching .track * { cursor: crosshair !important; }
 .ctx button.danger { color: var(--red); }
 .ctx .menu-note { padding: 8px; color: var(--dim); font-size: 12px; line-height: 16px; }
 
-@media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; } }
+@media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } }
+
+/* The focused element's own row (32-anims.js): its name in the gutter, where it is on its clock in the hint. */
+.focus-name { position: absolute; left: 0; right: 0; padding: 0 8px; display: flex; align-items: center; font: 500 10px/1 var(--mono); color: #fde68a;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gutter.dots .focus-name { padding: 0 2px; font-size: 0; }
+.gutter.dots .focus-name::before { content: ""; width: 8px; height: 8px; margin: 0 auto; border-radius: 2px; background: #fde68a; transform: rotate(45deg); }
+.hint.readout { max-width: max(0px, calc(100% - 420px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; display: block; line-height: 24px; }
+@media (max-width: 760px) { .hint.readout { display: none; } }
+.note-at { margin-top: 6px; font: 500 11px/15px var(--mono); color: #fde68a; }
+.note-asked { all: unset; cursor: pointer; display: block; margin-top: 6px; padding: 3px 8px; border-radius: 6px; font: 400 11px/15px var(--sans); color: var(--muted);
+  background: rgba(253, 230, 138, 0.08); border: 1px solid rgba(253, 230, 138, 0.2); }
+.note-asked[hidden] { display: none; }
+@media (hover: hover) { .note-asked:hover { color: var(--fg); } }
+/* Where the open clip moves the element, on the app: its start and end boxes, the path of its centre, the range in full colour. */
+#wb-path { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 14; overflow: visible; }
+#wb-path[hidden] { display: none; }
+#wb-path .edge { fill: none; stroke: #fde68a; stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 4 3; }
+#wb-path .edge.on { stroke-opacity: 1; }
+#wb-path .path { fill: none; stroke: #fde68a; stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; }
+#wb-path .path.on { stroke-opacity: 1; stroke-dasharray: none; stroke-width: 2; }
+#wb-path .tick { fill: #fff; }
+#wb-path text { font: 600 10px var(--mono); fill: #fde68a; }

package/src/shell/shell.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Prototype</title>
     <style>/*CSS*/</style>
   </head>
@@ -35,21 +35,28 @@
             <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
             <span class="n">0</span>
           </span>
-          <button class="btn fresh" data-a="fresh">Start fresh</button>
+          <button class="btn fresh" data-a="fresh" aria-label="Start fresh" title="Start fresh">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+            <span>Start fresh</span>
+          </button>
         </div>
       </div>
       <div class="body">
         <div class="gutter" aria-label="Timelines"></div>
         <div class="track">
           <canvas class="lines" aria-label="Timeline"></canvas>
-          <button class="live-btn" data-a="live" hidden>Live →</button>
         </div>
       </div>
     </div>
+    <button id="wb-fab" data-a="expand" aria-label="Show timeline" title="Show timeline (⌥T)" hidden>
+      <!--MARK-->
+      <i class="dot" aria-hidden="true"></i>
+    </button>
     <div id="wb-tip" class="tip" hidden></div>
     <div id="wb-layers" hidden></div>
     <div id="wb-hl"></div>
     <div id="wb-scope"></div>
+    <svg id="wb-path" hidden aria-hidden="true"></svg>
     <div id="wb-pins"></div>
     <div id="wb-note" class="card" hidden></div>
     <div id="wb-menu" class="card ctx" hidden></div>

package/types/client.d.ts

@@ -25,6 +25,13 @@ export interface RetakeClip {
   property?: string
   path: Array<string | number>
   iterations?: "infinite" | number
+  /** One iteration's duration (ms), for clips that repeat. */
+  dur?: number
+  /** Start delay (ms), included in `start`..`end`. */
+  delay?: number
+  /** First and last keyframe's values (up to 4 properties), e.g. `{ opacity: "0" }` → `{ opacity: "1" }`. */
+  from?: Record<string, string>
+  to?: Record<string, string>
   pseudoElement?: string
 }
 
@@ -69,5 +76,14 @@ export interface RetakeRuntime {
 declare global {
   interface Window {
     __retake?: RetakeRuntime | { readonly inert: true }
+    /**
+     * In the dock's frame: how many px the dock covers at the bottom of the
+     * page (0 when it's folded away). A `retake:dock` event on `window`
+     * (`detail: { height }`) says when it changes.
+     */
+    __retakeDockHeight?: number
+  }
+  interface WindowEventMap {
+    "retake:dock": CustomEvent<{ height: number }>
   }
 }

package/types/index.d.ts

@@ -78,6 +78,15 @@ export interface ShellOptions {
   marker?: "url" | "header"
   /** Rebuilds ask the server for the page as it was recorded (front server only). */
   docs?: boolean
+  /**
+   * `false`: there's no Retake server behind the dock (a static or serverless
+   * deploy). It never requests `/__retake/` (no session, no events) and keeps
+   * the session in memory for the page. Default: a server is assumed, and a 404
+   * from it falls back to memory.
+   */
+  server?: boolean
+  /** The project folder: source paths in notes are written relative to it. */
+  root?: string
   /** The token mutating `/__retake/` requests carry. */
   token?: string
 }
@@ -85,6 +94,13 @@ export interface ShellOptions {
 /** The dock page: a complete HTML document with the app in a frame. */
 export function shellHtml(options?: ShellOptions): string
 
+/**
+ * Retake's mark as an SVG string (24×24 viewBox, no width or height): a
+ * playhead on a track with an arc back to it. The arc and the played part are
+ * `currentColor`, the rest white, so it reads on a dark background.
+ */
+export function markSvg(): string
+
 export interface RuntimeTagOptions {
   /** The runtime's setup. */
   rt?: RuntimeConfig

package/types/next.d.ts

@@ -0,0 +1,50 @@
+// Types for `retake-dev/next`: Retake from a Next.js app's middleware
+// (src/next.js). Dev only: outside `next dev` every request goes straight on.
+
+/**
+ * A middleware (Next 16's `proxy.ts`, Next 15's `middleware.ts`): in `next dev`
+ * a top-level page load gets the dock, the dock's frame gets the page with the
+ * time runtime first in `<head>`, and `/__retake/*` is the session API (kept
+ * in `.retake/`, read by `retake mcp`). Everything else goes on as it was.
+ *
+ * ```ts
+ * // proxy.ts (Next 16)
+ * export { default } from "retake-dev/next"
+ * ```
+ *
+ * ```ts
+ * // middleware.ts (Next 15: the Node.js runtime)
+ * import retake from "retake-dev/next"
+ * export default retake
+ * export const config = { runtime: "nodejs" }
+ * ```
+ *
+ * Next reads `config` from your file as written (it can't be re-exported).
+ * With a matcher of your own, add these entries to it:
+ *
+ * ```ts
+ * "/__retake/:path*",
+ * { source: "/((?!_next/static|_next/image).*)", has: [{ type: "header", key: "sec-fetch-mode", value: "navigate" }] },
+ * ```
+ */
+declare const retake: (req: Request, event?: unknown) => Promise<Response | undefined>
+export default retake
+
+/**
+ * Wraps a middleware of your own: in `next dev` Retake answers page loads and
+ * `/__retake/*` first; every other request (and every request outside
+ * `next dev`) goes to yours. The dock's frame is fetched through your
+ * middleware too, so its redirects, rewrites and headers apply to the page.
+ *
+ * ```ts
+ * import { withRetake } from "retake-dev/next"
+ * export default withRetake(async (req) => { ... })
+ * ```
+ */
+export function withRetake<M extends (req: any, event?: any) => any>(middleware?: M): (req: Request, event?: unknown) => Promise<Awaited<ReturnType<M>> | Response | undefined>
+
+/**
+ * Retake's answer to a request, or `undefined` to let it through (always
+ * `undefined` outside `next dev`). For a middleware that decides itself.
+ */
+export function retakeResponse(req: Request): Promise<Response | undefined>