@a-company/atelier 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-company/atelier",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "CLI tool — validate, preview, render, info commands",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -27,7 +27,6 @@
     "universityPack": "university/"
   },
   "dependencies": {
-    "@a-company/atelier-studio": ">=0.25.1",
     "@modelcontextprotocol/sdk": "^1.0.0",
     "@napi-rs/canvas": "^0.1.0",
     "commander": "^13.0.0",
@@ -35,7 +34,8 @@
     "ws": "^8.20.1",
     "yaml": "^2.7.0",
     "zod": "^3.25.0",
-    "@a-company/atelier-mcp": "0.27.2"
+    "@a-company/atelier-mcp": "0.27.2",
+    "@a-company/atelier-studio": "^0.28.1"
   },
   "peerDependencies": {
     "canvas": ">=2.0.0"
@@ -54,12 +54,12 @@
     "tsup": "^8.4.0",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0",
-    "@a-company/atelier-lottie": "0.25.1",
-    "@a-company/atelier-schema": "0.28.0",
     "@a-company/atelier-canvas": "0.26.0",
+    "@a-company/atelier-lottie": "0.25.1",
     "@a-company/atelier-svg": "0.25.1",
     "@a-company/atelier-core": "0.26.0",
-    "@a-company/atelier-types": "0.31.0"
+    "@a-company/atelier-types": "0.31.0",
+    "@a-company/atelier-schema": "0.28.0"
   },
   "scripts": {
     "build": "tsup",

package/src/web/inline-app.ts

@@ -72,11 +72,42 @@ interface FileEntry {
 }
 
 /**
- * Boot the in-browser Atelier Studio client. Wires up the file sidebar, the
+ * Boot the in-browser Atelier Studio client.
+ *
+ * Two modes:
+ *   - **workspace** — when the server reports `/api/workspace` 200 OK, the
+ *     workspace-aware UI (sidebar tree + main-panel adapter + drop-zone)
+ *     boots from `workspace-app.ts`. This is the v1 UX bundle.
+ *   - **project** — legacy single-document UI, untouched (see below).
+ *
+ * The dispatch happens BEFORE any of the legacy DOM is built so workspace mode
+ * gets a clean root; the legacy code path runs only when `/api/workspace`
+ * responds 404 (project mode or detached).
+ */
+export async function bootStudioApp(config: StudioAppConfig): Promise<void> {
+  // Probe the workspace endpoint. A 200 means we're rooted at a workspace dir
+  // and should render the workspace UI; anything else falls through to the
+  // legacy single-document path.
+  try {
+    const probe = await fetch("/api/workspace");
+    if (probe.ok) {
+      const mod = await import("./workspace-app.js");
+      await mod.bootWorkspaceApp();
+      return;
+    }
+  } catch {
+    // Endpoint missing or network failure → legacy path. Non-fatal.
+  }
+
+  bootLegacyApp(config);
+}
+
+/**
+ * Legacy single-document client. Wires up the flat file sidebar, the
  * AtelierStudio editor + autosave, image drag-drop, the WS bridge, and the
- * export-all flow. Called once by the temp-dir entry shim.
+ * export-all flow. Behavior preserved exactly from pre-workspace days.
  */
-export function bootStudioApp(config: StudioAppConfig): void {
+function bootLegacyApp(config: StudioAppConfig): void {
   // ── State ──
   let studio: AtelierStudio | null = null;
   let currentFile: string | null = null;
@@ -203,7 +234,7 @@ export function bootStudioApp(config: StudioAppConfig): void {
     const overlay = document.createElement("div");
     overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:10000";
     const card = document.createElement("div");
-    card.style.cssText = "background:#333;border:1px solid #4A4A4A;border-radius:8px;padding:32px 40px;min-width:360px;color:#F5F0EB;font-family:'Cormorant Garamond',Georgia,serif";
+    card.style.cssText = "background:#333;border:1px solid #4A4A4A;border-radius:8px;padding:32px 40px;min-width:360px;color:#F5F0EB;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
     overlay.appendChild(card);
     document.body.appendChild(overlay);
 
@@ -560,6 +591,13 @@ export function bootStudioApp(config: StudioAppConfig): void {
     const result = parseAtelier(content);
 
     if (!result.success) {
+      // Destroy the prior studio BEFORE wiping the container — otherwise the
+      // next loadFile's destroy() call would try to removeChild on a node
+      // that's already been wiped via innerHTML="" (NotFoundError).
+      if (studio) {
+        studio.destroy();
+        studio = null;
+      }
       editorContainer.innerHTML = "";
       const err = document.createElement("div");
       err.className = "main__empty";
@@ -647,6 +685,19 @@ export function bootStudioApp(config: StudioAppConfig): void {
       mode: "full",
       initialTab: "yaml",
       allowSave: true,
+      // Resolve doc-relative srcs against the currently-loaded file's
+      // directory. inline-app reuses one studio instance across file
+      // switches, so we read `currentFile` at call time (not closure time)
+      // — otherwise switching docs would leave the resolver pinned to the
+      // first one. See workspace-app for the same builder.
+      srcResolver: (src: string): string => {
+        if (/^([a-z]+:|\/|data:)/i.test(src)) return src;
+        const path = currentFile;
+        if (!path) return src;
+        const docDir = path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+        const full = docDir ? `${docDir}/${src}` : src;
+        return `/api/file?path=${encodeURIComponent(full)}`;
+      },
       onDocumentChange: (doc) => {
         // Auto-save with debounce — flip to "saving" immediately so the user
         // knows their edit was registered even while the timeout is pending.

package/src/web/timeline-state-types.ts

@@ -0,0 +1,28 @@
+/**
+ * Browser-side shared state types for the bottom timeline UI (TD-2026-05-28).
+ *
+ * The timeline is a READ-ONLY view of the active doc's `timeline` block in
+ * v1.0 — click to select, no drag-to-reposition (that's v1.1). These types
+ * model the selection + frame-conversion helpers shared between the
+ * canvas-panel and the new TimelineView component.
+ */
+
+/** What's currently selected on the timeline, if anything. */
+export interface TimelineSelection {
+  /** Layer id of the selected clip — matches a layer in doc.layers. */
+  layerId: string;
+  /** Track id the clip belongs to (e.g. "track-video-1"). */
+  trackId: string;
+}
+
+/** Convert a composition frame to a horizontal pixel offset in the timeline. */
+export function frameToPixel(frame: number, totalFrames: number, widthPx: number): number {
+  if (totalFrames <= 0) return 0;
+  return Math.max(0, Math.min(widthPx, (frame / totalFrames) * widthPx));
+}
+
+/** Inverse — convert a pixel offset back to a composition frame. */
+export function pixelToFrame(px: number, totalFrames: number, widthPx: number): number {
+  if (widthPx <= 0) return 0;
+  return Math.max(0, Math.min(totalFrames, Math.round((px / widthPx) * totalFrames)));
+}

package/src/web/timeline-view.test.ts

@@ -0,0 +1,99 @@
+// Tests for #bottom-timeline-view's pure layout helper (`computeClipPositions`).
+//
+// The DOM-bound parts of TimelineView are manually verified — there's no jsdom
+// harness in this repo (Kit-D from an earlier session). Anything pure lands
+// here so the math is regression-guarded.
+
+import { describe, it, expect } from "vitest";
+
+import { computeClipPositions } from "./timeline-view.js";
+
+describe("computeClipPositions", () => {
+  it("places a single clip at the start of the lane", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-1", startFrame: 0, endFrame: 30, source: "media/IMG_7346.MOV" }],
+      "track-video-1",
+      150,
+      1000,
+    );
+    expect(out).toHaveLength(1);
+    expect(out[0].leftPx).toBe(0);
+    // 30 / 150 * 1000 = 200
+    expect(out[0].widthPx).toBeCloseTo(200);
+    expect(out[0].trackId).toBe("track-video-1");
+    expect(out[0].layerId).toBe("clip-1");
+  });
+
+  it("derives the label from the source basename without extension", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-1", startFrame: 0, endFrame: 30, source: "media/IMG_7346.MOV" }],
+      "track-video-1",
+      150,
+      1000,
+    );
+    expect(out[0].label).toBe("IMG_7346");
+  });
+
+  it("falls back to layerId when source is empty", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-fallback", startFrame: 0, endFrame: 30, source: "" }],
+      "track-video-1",
+      150,
+      1000,
+    );
+    expect(out[0].label).toBe("clip-fallback");
+  });
+
+  it("positions sequential clips proportionally to startFrame/endFrame", () => {
+    const out = computeClipPositions(
+      [
+        { layerId: "clip-a", startFrame: 0, endFrame: 60, source: "a.mov" },
+        { layerId: "clip-b", startFrame: 60, endFrame: 120, source: "b.mov" },
+      ],
+      "track-video-1",
+      120,
+      600,
+    );
+    expect(out[0].leftPx).toBe(0);
+    expect(out[0].widthPx).toBeCloseTo(300);
+    expect(out[1].leftPx).toBeCloseTo(300);
+    expect(out[1].widthPx).toBeCloseTo(300);
+  });
+
+  it("clamps zero-length clips to a minimum 4px width", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-zero", startFrame: 30, endFrame: 30, source: "z.mov" }],
+      "track-video-1",
+      150,
+      1000,
+    );
+    expect(out[0].widthPx).toBe(4);
+  });
+
+  it("returns an empty array for an empty clip list", () => {
+    const out = computeClipPositions([], "track-video-1", 150, 1000);
+    expect(out).toEqual([]);
+  });
+
+  it("handles totalFrames=0 by collapsing every clip to the lane origin", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-1", startFrame: 0, endFrame: 30, source: "a.mov" }],
+      "track-video-1",
+      0,
+      1000,
+    );
+    expect(out[0].leftPx).toBe(0);
+    // endPx - leftPx === 0, so the 4px floor kicks in.
+    expect(out[0].widthPx).toBe(4);
+  });
+
+  it("strips only the last extension from a dotted basename", () => {
+    const out = computeClipPositions(
+      [{ layerId: "clip-1", startFrame: 0, endFrame: 30, source: "media/scene.take.1.mov" }],
+      "track-video-1",
+      150,
+      1000,
+    );
+    expect(out[0].label).toBe("scene.take.1");
+  });
+});

package/src/web/timeline-view.ts

@@ -0,0 +1,339 @@
+/**
+ * #bottom-timeline-view — read-only timeline UI mounted BELOW the canvas in
+ * the workspace studio (TD-2026-05-28, Wave A — Unit B).
+ *
+ * v1.0 scope is viewer-only:
+ *   - click a clip block to select it (emits `onSelectClip`)
+ *   - click the ruler to seek (emits `onSeek`)
+ *   - the canvas-panel's scrubber drives `setFrame()` to position the playhead
+ *
+ * Drag-to-reposition is v1.1 territory. The doc remains untouched by this
+ * component — selections and seeks are emitted upward; mutation is the
+ * caller's job (and not in scope for v1.0).
+ *
+ * Reads from `doc.timeline` — the derived summary block. When that block is
+ * missing or empty, the view renders a muted "No clips" placeholder so empty
+ * docs and image-only projects degrade gracefully.
+ *
+ * Vanilla DOM + inline styles to match the workspace-app convention (no
+ * framework, no new dep). All atel- prefixed classes are scoped via the
+ * injected stylesheet in workspace-app.ts.
+ */
+
+import type { AtelierDocument } from "@a-company/atelier-types";
+
+import {
+  type TimelineSelection,
+  frameToPixel,
+  pixelToFrame,
+} from "./timeline-state-types.js";
+
+export interface TimelineViewOptions {
+  /** Container element to mount into (typically below the canvas). */
+  container: HTMLElement;
+  /** Called when the user clicks a clip block to select it. */
+  onSelectClip: (selection: TimelineSelection | null) => void;
+  /** Called when the user clicks somewhere on the ruler to seek. */
+  onSeek: (frame: number) => void;
+}
+
+/** Per-clip layout slot, output of the pure `computeClipPositions` helper. */
+export interface ClipPosition {
+  layerId: string;
+  trackId: string;
+  /** Display label — `layerId` or the source basename without extension. */
+  label: string;
+  startFrame: number;
+  endFrame: number;
+  leftPx: number;
+  widthPx: number;
+}
+
+interface ClipLike {
+  layerId: string;
+  startFrame: number;
+  endFrame: number;
+  source: string;
+}
+
+/**
+ * Pure layout helper — converts a clip array into pixel-positioned slots.
+ * Extracted so the math is unit-testable without a DOM harness (the project
+ * has no jsdom; everything else is verified manually).
+ *
+ * Each slot's `widthPx` clamps to a minimum of 4px so a zero-length clip
+ * stays clickable. A `leftPx + widthPx` past the lane edge stays anchored at
+ * the lane width — `frameToPixel` already clamps to `[0, widthPx]`.
+ */
+export function computeClipPositions(
+  clips: ClipLike[],
+  trackId: string,
+  totalFrames: number,
+  laneWidthPx: number,
+): ClipPosition[] {
+  const out: ClipPosition[] = [];
+  for (const clip of clips) {
+    const leftPx = frameToPixel(clip.startFrame, totalFrames, laneWidthPx);
+    const endPx = frameToPixel(clip.endFrame, totalFrames, laneWidthPx);
+    const rawWidth = endPx - leftPx;
+    const widthPx = Math.max(4, rawWidth);
+    out.push({
+      layerId: clip.layerId,
+      trackId,
+      label: deriveClipLabel(clip),
+      startFrame: clip.startFrame,
+      endFrame: clip.endFrame,
+      leftPx,
+      widthPx,
+    });
+  }
+  return out;
+}
+
+function deriveClipLabel(clip: ClipLike): string {
+  // Prefer the source basename (without extension) — it's the artifact name
+  // the creator recognizes from the sidebar. Falls back to the layerId when
+  // the source is empty or odd.
+  if (clip.source && clip.source.length > 0) {
+    const base = clip.source.split("/").pop() ?? clip.source;
+    const dot = base.lastIndexOf(".");
+    return dot > 0 ? base.slice(0, dot) : base;
+  }
+  return clip.layerId;
+}
+
+/** Escape minimal HTML — duplicated locally to avoid a cross-module import. */
+function esc(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export class TimelineView {
+  private readonly opts: TimelineViewOptions;
+  private rootEl: HTMLElement | null = null;
+  private rulerEl: HTMLElement | null = null;
+  private laneEl: HTMLElement | null = null;
+  private playheadEl: HTMLElement | null = null;
+  private emptyEl: HTMLElement | null = null;
+
+  private doc: AtelierDocument | null = null;
+  private selection: TimelineSelection | null = null;
+  private currentFrame: number = 0;
+
+  /** Cached clip DOM, keyed by `${trackId}::${layerId}` for selection updates. */
+  private clipEls = new Map<string, HTMLElement>();
+
+  constructor(opts: TimelineViewOptions) {
+    this.opts = opts;
+  }
+
+  /** Mount the timeline DOM into the container. Idempotent. */
+  mount(): void {
+    if (this.rootEl) return;
+
+    const root = document.createElement("div");
+    root.className = "atel-timeline-view";
+    this.rootEl = root;
+
+    // Ruler row — frame ticks + numbers (every fps frames = every second).
+    const ruler = document.createElement("div");
+    ruler.className = "atel-timeline-view__ruler";
+    ruler.addEventListener("click", (ev) => this.handleRulerClick(ev));
+    root.appendChild(ruler);
+    this.rulerEl = ruler;
+
+    // Track lane — single row (video track only in v1.0).
+    const lane = document.createElement("div");
+    lane.className = "atel-timeline-view__lane";
+    // Background click on the lane clears the selection.
+    lane.addEventListener("click", (ev) => {
+      if (ev.target === lane) {
+        this.setSelection(null);
+        this.opts.onSelectClip(null);
+      }
+    });
+    root.appendChild(lane);
+    this.laneEl = lane;
+
+    // Playhead — vertical line drawn above ruler + lane.
+    const playhead = document.createElement("div");
+    playhead.className = "atel-timeline-view__playhead";
+    playhead.style.display = "none";
+    root.appendChild(playhead);
+    this.playheadEl = playhead;
+
+    // Empty-state — shown when no doc or no clips.
+    const empty = document.createElement("div");
+    empty.className = "atel-timeline-view__empty";
+    empty.textContent = "No clips";
+    empty.style.display = "none";
+    root.appendChild(empty);
+    this.emptyEl = empty;
+
+    this.opts.container.appendChild(root);
+
+    // Recompute layout on resize so clip block widths track the lane width.
+    // The browser fires `resize` on the window; the workspace-main column is
+    // flex-driven, so a window resize is the only trigger we need to handle
+    // here (no internal resizers in v1.0).
+    this.resizeHandler = (): void => this.renderClips();
+    window.addEventListener("resize", this.resizeHandler);
+
+    this.renderAll();
+  }
+
+  private resizeHandler: (() => void) | null = null;
+
+  /** Update with a new doc. Pass null to clear. */
+  setDoc(doc: AtelierDocument | null): void {
+    this.doc = doc;
+    // Reset selection + playhead when the doc changes — they belong to the
+    // old doc's layer ids, which won't match the new one.
+    this.selection = null;
+    this.currentFrame = 0;
+    this.renderAll();
+  }
+
+  /** Position the playhead — typically driven by the canvas-panel's scrubber. */
+  setFrame(frame: number): void {
+    this.currentFrame = Math.max(0, frame);
+    this.renderPlayhead();
+  }
+
+  /** Highlight a clip as selected, or clear. */
+  setSelection(selection: TimelineSelection | null): void {
+    this.selection = selection;
+    this.applySelectionClasses();
+  }
+
+  /** Remove from DOM. */
+  destroy(): void {
+    if (this.resizeHandler) {
+      window.removeEventListener("resize", this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.rootEl) {
+      this.rootEl.remove();
+      this.rootEl = null;
+    }
+    this.rulerEl = null;
+    this.laneEl = null;
+    this.playheadEl = null;
+    this.emptyEl = null;
+    this.clipEls.clear();
+  }
+
+  // ── render passes ─────────────────────────────────────────────────
+
+  private renderAll(): void {
+    this.renderRuler();
+    this.renderClips();
+    this.renderPlayhead();
+  }
+
+  private getTotalFrames(): number {
+    return this.doc?.timeline?.totalFrames ?? 0;
+  }
+
+  private getFps(): number {
+    return this.doc?.timeline?.fps ?? this.doc?.canvas?.fps ?? 30;
+  }
+
+  private renderRuler(): void {
+    if (!this.rulerEl) return;
+    this.rulerEl.innerHTML = "";
+    const totalFrames = this.getTotalFrames();
+    if (totalFrames <= 0) return;
+
+    const width = this.rulerEl.clientWidth || this.opts.container.clientWidth || 800;
+    const fps = this.getFps();
+    // One label per second — every `fps` frames.
+    const step = Math.max(1, fps);
+    for (let frame = 0; frame <= totalFrames; frame += step) {
+      const leftPx = frameToPixel(frame, totalFrames, width);
+      const tick = document.createElement("div");
+      tick.className = "atel-timeline-view__tick";
+      tick.style.left = `${leftPx}px`;
+      tick.textContent = String(frame);
+      this.rulerEl.appendChild(tick);
+    }
+  }
+
+  private renderClips(): void {
+    if (!this.laneEl) return;
+    this.laneEl.innerHTML = "";
+    this.clipEls.clear();
+
+    const totalFrames = this.getTotalFrames();
+    const tracks = this.doc?.timeline?.tracks ?? [];
+    const videoTracks = tracks.filter((t) => t.kind === "video");
+    const hasClips = videoTracks.some((t) => t.clips.length > 0);
+
+    if (!this.doc || totalFrames <= 0 || !hasClips) {
+      if (this.emptyEl) this.emptyEl.style.display = "";
+      this.renderRuler();
+      return;
+    }
+    if (this.emptyEl) this.emptyEl.style.display = "none";
+
+    const laneWidth = this.laneEl.clientWidth || this.opts.container.clientWidth || 800;
+    // Re-render the ruler now that we know the lane is laid out — the ruler
+    // and lane share the same width column, so a single render pass is fine.
+    this.renderRuler();
+
+    for (const track of videoTracks) {
+      const slots = computeClipPositions(track.clips, track.id, totalFrames, laneWidth);
+      for (const slot of slots) {
+        const el = document.createElement("div");
+        el.className = "atel-timeline-view__clip";
+        el.style.left = `${slot.leftPx}px`;
+        el.style.width = `${slot.widthPx}px`;
+        el.title = `${slot.label} · frames ${slot.startFrame}–${slot.endFrame}`;
+        el.innerHTML = `<span class="atel-timeline-view__clip-label">${esc(slot.label)}</span>`;
+        el.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          const next: TimelineSelection = { trackId: slot.trackId, layerId: slot.layerId };
+          this.setSelection(next);
+          this.opts.onSelectClip(next);
+        });
+        this.laneEl.appendChild(el);
+        this.clipEls.set(`${slot.trackId}::${slot.layerId}`, el);
+      }
+    }
+
+    this.applySelectionClasses();
+  }
+
+  private applySelectionClasses(): void {
+    for (const [key, el] of this.clipEls.entries()) {
+      const isSel = this.selection !== null &&
+        key === `${this.selection.trackId}::${this.selection.layerId}`;
+      el.classList.toggle("atel-timeline-view__clip--selected", isSel);
+    }
+  }
+
+  private renderPlayhead(): void {
+    if (!this.playheadEl || !this.rootEl) return;
+    const totalFrames = this.getTotalFrames();
+    if (totalFrames <= 0 || !this.doc) {
+      this.playheadEl.style.display = "none";
+      return;
+    }
+    const width = this.rootEl.clientWidth || 800;
+    const leftPx = frameToPixel(this.currentFrame, totalFrames, width);
+    this.playheadEl.style.display = "";
+    this.playheadEl.style.left = `${leftPx}px`;
+  }
+
+  // ── input handlers ────────────────────────────────────────────────
+
+  private handleRulerClick(ev: MouseEvent): void {
+    if (!this.rulerEl) return;
+    const totalFrames = this.getTotalFrames();
+    if (totalFrames <= 0) return;
+    const rect = this.rulerEl.getBoundingClientRect();
+    const xPx = ev.clientX - rect.left;
+    const frame = pixelToFrame(xPx, totalFrames, rect.width);
+    this.setFrame(frame);
+    this.opts.onSeek(frame);
+  }
+}