retake-dev 0.5.0 → 0.5.1

package/src/shell/shell.css

@@ -277,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; }
@@ -284,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 ---- */
@@ -340,3 +342,25 @@ body.branching .track, body.branching .track * { cursor: crosshair !important; }
 .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; 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

@@ -56,6 +56,7 @@
     <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
 }
 

package/types/index.d.ts

@@ -85,6 +85,8 @@ export interface ShellOptions {
    * 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
 }

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>