@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/code/codeBufferGuard.ts

@@ -0,0 +1,52 @@
+// The question asked before Code Studio's open buffers are dropped.
+//
+// ITS OWN FILE, WITH NO EDITOR IN IT. The header, the Components rail, home
+// and preview all ask it, and they load with the shell; `codeParts.tsx`
+// carries the CodeMirror editor, which loads only when code is opened. Kept
+// together, every visit paid for CodeMirror to ask one question.
+import { useCallback, type ReactNode } from "react";
+import { useConfirm } from "@dailies-studio/ui";
+import { useStore } from "../../state/context.js";
+import type { CodeFileState } from "../../state/types.js";
+
+/** How many open buffers hold text that is not on disk. */
+export function dirtyCodeFileCount(files: Readonly<Record<string, CodeFileState>>): number {
+  return Object.values(files).filter((f) => f.content !== f.savedContent).length;
+}
+
+/** The one question asked before open buffers are dropped. */
+export function discardBuffersMessage(count: number): string {
+  return count === 1
+    ? "One open file has edits that have not been written to disk. Close it anyway?"
+    : `${count} open files have edits that have not been written to disk. Close them anyway?`;
+}
+
+/**
+ * Leaving the code component in Components, which drops the buffers. With
+ * nothing dirty `guard` just runs `then`; otherwise it asks first. `then` is
+ * the verb that drops them (a leave, or a definition picked in its place).
+ */
+export function useCodeBufferGuard(): { guard: (then: () => void) => void; dialog: ReactNode } {
+  const store = useStore();
+  const { confirm, dialog } = useConfirm();
+  const guard = useCallback(
+    (then: () => void): void => {
+      const s = store.getState();
+      const count = s.codeComponent === null ? 0 : dirtyCodeFileCount(s.codeFiles);
+      if (count === 0) {
+        then();
+        return;
+      }
+      void confirm({
+        title: "Unsaved changes",
+        message: discardBuffersMessage(count),
+        confirmLabel: "Discard",
+        danger: true,
+      }).then((ok) => {
+        if (ok) then();
+      });
+    },
+    [confirm, store],
+  );
+  return { guard, dialog };
+}

package/src/panels/code/codeParts.tsx

@@ -0,0 +1,321 @@
+// The parts of Code Studio's editor: the editor itself, the tab strip, the
+// file strips above it and the typecheck under it.
+//
+// ONE BUFFER PER FILE, ONE 409 PATH. Every file edits the store buffers
+// (`codeFiles`), saves through `saveCodeFile` and meets a write made elsewhere
+// (a second tab, an agent through MCP, an editor outside the studio) through
+// the same conflict strip.
+import { useCallback, useEffect, useRef } from "react";
+import { useConfirm } from "@dailies-studio/ui";
+import { CodeEditor } from "@dailies-studio/ui/code";
+import * as api from "../../api.js";
+import { useStore, useShotEditor } from "../../state/context.js";
+import type { CodeFileState } from "../../state/types.js";
+import { GeneratedStrip } from "./CodeDefaultsPanel.js";
+import { agentWriting } from "../../state/agentActivity.js";
+import { AgentDots, useAgentActivity } from "../agent/AgentDots.js";
+
+/** The MCP agent writing `rel` now, or null (its dots go on the file's tab). */
+export function useAgentWriter(rel: string | null): string | null {
+  const activity = useAgentActivity();
+  return rel === null ? null : (agentWriting(activity, rel, null)?.name ?? null);
+}
+
+/** Follow mode is on for `rel` and an agent is still writing it: the buffer
+ *  is the agent's until the author takes over. */
+export function useFollowing(rel: string | null): string | null {
+  const writer = useAgentWriter(rel);
+  const follow = useShotEditor((s) => s.codeFollow);
+  return rel !== null && follow === rel ? writer : null;
+}
+
+/** The dots an agent's file tab shows. */
+export function TabWriter({ rel }: { rel: string }) {
+  const writer = useAgentWriter(rel);
+  return writer === null ? null : <AgentDots label={`${writer} is writing this file`} />;
+}
+
+/**
+ * FOLLOW MODE'S STRIP: the agent is writing this file, so the buffer shows
+ * each write as it lands and takes no typing. "Take over" makes it the
+ * author's again; a later agent write is then an ordinary conflict.
+ */
+export function FollowStrip({ rel }: { rel: string }) {
+  const store = useStore();
+  const writer = useFollowing(rel);
+  if (writer === null) return null;
+  return (
+    <div className="code-studio-strip is-follow" role="status" data-testid="code-follow">
+      <AgentDots label={`${writer} is writing this file`} />
+      <span>{writer} is writing this file. It updates as each write lands.</span>
+      <button
+        type="button"
+        className="btn"
+        data-testid="code-take-over"
+        title="Stop following and edit the file yourself"
+        onClick={() => store.takeOverCodeFile()}
+      >
+        Take over
+      </button>
+    </div>
+  );
+}
+
+/** How long the buffer sits still before it is typechecked. Long enough that
+ *  ordinary typing costs no round trips, short enough that a pause gets an
+ *  answer: the motion chrome's drawer has run this number for as long as it
+ *  has had a lint gutter. */
+const DIAG_DEBOUNCE_MS = 700;
+
+/**
+ * The typecheck, debounced, against the BUFFER rather than against disk,
+ * which is the whole point of `/api/diagnostics` taking content: the red
+ * gutter has to describe the code the author is looking at, not the code they
+ * last saved. Responses for text that has since changed are dropped.
+ *
+ * THE ACTIVE BUFFER ONLY. Typechecking every open tab on every keystroke
+ * would cost a round trip per tab for gutters nobody is looking at; a tab
+ * re-checks when it becomes active, because `rel` is a dependency here.
+ */
+export function useCodeDiagnostics(rel: string | null, content: string | null): void {
+  const store = useStore();
+  useEffect(() => {
+    if (rel === null || content === null) return;
+    const timer = setTimeout(() => {
+      void api
+        .fileDiagnostics(rel, content)
+        .then((res) => {
+          // The buffer this describes, addressed by rel: the author can have
+          // switched tabs while this was in flight, and painting these into
+          // whatever is on screen now would mark the wrong file's lines.
+          const now = store.getState().codeFiles[rel];
+          if (now === undefined || now.content !== content) return;
+          store.setCodeDiagnostics(rel, res.diagnostics);
+        })
+        // Silent: a typecheck that will not answer is not a reason to interrupt
+        // someone who is typing, and the next keystroke asks again.
+        .catch(() => {});
+    }, DIAG_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [rel, content, store]);
+}
+
+/**
+ * The file strips: what is true of the active buffer that the editor alone
+ * cannot say. Generated (writes refused), changed on disk (the 409, asked
+ * about), and a save that failed.
+ */
+export function CodeFileStrips({ file }: { file: CodeFileState | null }) {
+  if (file === null) return null;
+  return (
+    <>
+      <FollowStrip rel={file.rel} />
+      {file.generated !== null ? (
+        <GeneratedStrip
+          docName={file.generated.docName}
+          className="code-studio-strip is-generated"
+          testId="code-generated"
+        />
+      ) : null}
+      {file.status === "conflict" ? <ConflictStrip rel={file.rel} /> : null}
+      {file.status === "error" ? (
+        <div className="code-studio-strip is-error" role="alert" data-testid="code-error">
+          {file.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * The editor.
+ *
+ * SPLIT OUT so the CodeMirror host does not re-mount on every unrelated state
+ * change in the surface above it, and so the Ctrl+S wall has one owner. The
+ * keystroke is stopped here rather than filtered in the keymap: the chrome's
+ * own ⌘S saves the DOCUMENT, and a save inside a text editor means the text.
+ */
+export function CodePane({ rel }: { rel: string }) {
+  const store = useStore();
+  // BOTH READ FROM THE SAME `rel`, so `path` and `content` always describe the
+  // same buffer in the same commit. `CodeEditor` builds a fresh state from
+  // whatever content it holds when a new path arrives, so a path that led its
+  // text by one render would seed the new tab with the old tab's file and then
+  // replace the whole document as one undoable edit.
+  const content = useShotEditor((s) => s.codeFiles[rel]?.content ?? "");
+  const diagnostics = useShotEditor((s) => s.codeFiles[rel]?.diagnostics);
+  const openPaths = useShotEditor((s) => s.codeOrder);
+  // THE VIEW REFUSES THE EDIT, not just the Save button. The strip above says
+  // this file's writes are refused; letting it accept a page of typing and then
+  // fail would tell the author that only afterwards. A viewer's Project
+  // refuses every file the same way.
+  const generatedOrViewer = useShotEditor((s) => s.readOnly || (s.codeFiles[rel]?.generated ?? null) !== null);
+  // FOLLOWING AN AGENT: its writes land in this buffer, so typing here would
+  // be thrown away by the next one. Take over (the strip) gives it back.
+  const following = useFollowing(rel);
+  const readOnly = generatedOrViewer || following !== null;
+  return (
+    <div
+      className="code-studio-pane"
+      onKeyDown={(e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
+          e.preventDefault();
+          e.stopPropagation();
+          void store.saveCodeFile();
+        }
+      }}
+    >
+      <CodeEditor
+        path={rel}
+        content={content}
+        {...(diagnostics === undefined ? {} : { diagnostics })}
+        // THE WHOLE TAB SET, which is what makes the widget's per-path cache
+        // keep an undo history per tab and drop the ones the author closed.
+        openPaths={openPaths}
+        readOnly={readOnly}
+        onChange={(text) => store.updateCodeBuffer(text)}
+      />
+    </div>
+  );
+}
+
+/**
+ * The open buffers.
+ *
+ * ORDERED BY `codeOrder` AND NOT BY THE MAP, because an object's key order is a
+ * language detail and a tab strip's order is a promise: tabs that reshuffle when
+ * a buffer is replaced make the author re-find the one they were reading.
+ *
+ * Hidden at one tab, which is the state the studio opens in. A tab strip
+ * offering to close the only thing on screen is a control with nothing to do,
+ * and it costs a row of the editor's height to say so.
+ */
+export function CodeTabs() {
+  const store = useStore();
+  const order = useShotEditor((s) => s.codeOrder);
+  const active = useShotEditor((s) => s.codeActive);
+  const { confirm, dialog } = useConfirm();
+
+  // CLOSING A DIRTY BUFFER IS THE OTHER PLACE THAT CAN LOSE WORK, so it is the
+  // other place that asks. `closeCodeFile` deletes the buffer outright and the
+  // text was never on disk: there is no undo behind it and no strip left to
+  // show it, which is exactly the case the whole file already refuses on save
+  // and on adopt. A clean buffer closes without a word: nothing is at stake.
+  const close = useCallback(
+    (rel: string): void => {
+      const buffer = store.getState().codeFiles[rel];
+      if (buffer === undefined) return;
+      if (buffer.content === buffer.savedContent) {
+        store.closeCodeFile(rel);
+        return;
+      }
+      void confirm({
+        title: "Unsaved changes",
+        message: `${rel} has edits that have not been written to disk. Close it anyway?`,
+        confirmLabel: "Discard",
+        danger: true,
+      }).then((ok) => {
+        if (ok) store.closeCodeFile(rel);
+      });
+    },
+    [confirm, store],
+  );
+
+  if (order.length < 2) return null;
+  return (
+    <div className="code-tabs" role="tablist" aria-label="Open files" data-testid="code-tabs">
+      {dialog}
+      {order.map((rel) => (
+        <CodeTab key={rel} rel={rel} active={rel === active} store={store} onClose={close} />
+      ))}
+    </div>
+  );
+}
+
+function CodeTab({
+  rel,
+  active,
+  store,
+  onClose,
+}: {
+  rel: string;
+  active: boolean;
+  store: ReturnType<typeof useStore>;
+  onClose: (rel: string) => void;
+}) {
+  const buffer = useShotEditor((s) => s.codeFiles[rel]);
+  const dirty = buffer !== undefined && buffer.content !== buffer.savedContent;
+  const name = rel.slice(rel.lastIndexOf("/") + 1);
+  // THE STRIP HAS NO SCROLLBAR (code.css), so the tab that becomes active (a
+  // tree click, a new file) brings itself into view, close button and all.
+  // jsdom implements no `scrollIntoView`, hence the guard.
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (active && el !== null && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }, [active]);
+  return (
+    <div ref={ref} className="code-tab" data-active={active ? "" : undefined}>
+      <button
+        type="button"
+        className="code-tab-name"
+        role="tab"
+        aria-selected={active}
+        title={rel}
+        data-testid={`code-tab-${rel}`}
+        onClick={() => store.activateCodeFile(rel)}
+      >
+        {name}
+        <TabWriter rel={rel} />
+        {dirty ? <span className="code-tab-dirty" title="Unsaved changes" /> : null}
+      </button>
+      <button
+        type="button"
+        className="code-tab-close"
+        aria-label={`Close ${name}`}
+        title={`Close ${name}`}
+        data-testid={`code-tab-close-${rel}`}
+        onClick={() => onClose(rel)}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The file changed on disk under the buffer.
+ *
+ * BOTH TEXTS ARE REAL WORK, which is why this is a question and not a recovery:
+ * the author's buffer is theirs, and whatever landed on disk was landed by
+ * something (a second tab, an agent through MCP, an editor outside the studio).
+ * Choosing for them loses one of the two.
+ */
+export function ConflictStrip({ rel }: { rel: string }) {
+  const store = useStore();
+  return (
+    <div className="code-studio-strip is-conflict" role="alert" data-testid="code-conflict">
+      <span>This file changed on disk since you opened it.</span>
+      <button
+        type="button"
+        className="btn"
+        data-testid="code-reload"
+        title="Throw away this buffer and take what is on disk"
+        onClick={() => void store.reloadCodeFile(rel)}
+      >
+        Reload
+      </button>
+      <button
+        type="button"
+        className="btn"
+        data-testid="code-overwrite"
+        title="Write this buffer over what is on disk"
+        onClick={() => void store.saveCodeFile(true, rel)}
+      >
+        Overwrite
+      </button>
+    </div>
+  );
+}

package/src/panels/comments/CommentComposer.tsx

@@ -0,0 +1,239 @@
+// THE COMPOSER (Paper page 20): a new pin's first message, or a reply.
+//
+// ONE DRAFT PER THREAD. The text lives in the comments store under the thread
+// id (or `NEW_THREAD`), so closing a thread and coming back keeps what was
+// typed. Ctrl or Cmd+Enter posts; plain Enter is a new line.
+//
+// THE TEXTAREA IS THE COMBOBOX. Typing `@` opens the mention menu under it;
+// the arrows walk it, Enter or Tab pick, Escape closes it. Escape with the
+// menu shut cancels: the draft pin, or the thread. Every key the composer
+// answers stops here, so the board's keymap (Escape's own ladder) never sees
+// it twice.
+import { useEffect, useId, useRef, useState } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+import type { Mentionable } from "../../api.js";
+import { useStore } from "../../state/context.js";
+import {
+  COMMENT_BODY_MAX,
+  encodeMentions,
+  insertMention,
+  mentionQuery,
+  personLabel,
+} from "../../state/comments.js";
+import { MentionMenu, mentionOptions, optionId } from "./MentionMenu.js";
+import type { MentionOption } from "./MentionMenu.js";
+import { useComments } from "./parts.js";
+
+/** The counter shows once this close to the limit. */
+const COUNTER_FROM = COMMENT_BODY_MAX - 200;
+
+export function CommentComposer(props: {
+  /** A thread id, or `NEW_THREAD` for the draft pin. */
+  threadKey: string;
+  variant: "new" | "reply";
+  onCancel: () => void;
+  /** The Frame as the author sees it, kept with a new thread. */
+  picture?: () => Promise<Blob | null>;
+  /** The new pin's "where", above the field. */
+  head?: ReactNode;
+}) {
+  const store = useStore();
+  const { comments } = store;
+  const text = useComments().texts[props.threadKey] ?? "";
+  const field = useRef<HTMLTextAreaElement>(null);
+  const menuId = useId();
+  const [caret, setCaret] = useState(0);
+  const [picked, setPicked] = useState<{ id: string; label: string }[]>([]);
+  const [result, setResult] = useState<Mentionable | null>(null);
+  const [active, setActive] = useState(0);
+  /** The `@` the author dismissed with Escape: the menu stays shut for it. */
+  const [dismissed, setDismissed] = useState<number | null>(null);
+  const [refusal, setRefusal] = useState<string | null>(null);
+  const [posting, setPosting] = useState(false);
+
+  const query = mentionQuery(text, caret);
+  const menuOpen = query !== null && query.start !== dismissed && result !== null;
+  const options = result === null ? [] : mentionOptions(result);
+
+  useEffect(() => {
+    field.current?.focus();
+  }, []);
+
+  // The menu's people, asked again per query. The last answer wins.
+  const q = query === null || query.start === dismissed ? null : query.query;
+  useEffect(() => {
+    if (q === null) {
+      setResult(null);
+      return;
+    }
+    let live = true;
+    comments.mentionable(q).then(
+      (res) => {
+        if (!live) return;
+        setResult(res);
+        setActive(0);
+      },
+      () => {
+        if (live) setResult(null);
+      },
+    );
+    return () => {
+      live = false;
+    };
+  }, [comments, q]);
+
+  const write = (next: string, at: number): void => {
+    comments.setText(props.threadKey, next);
+    setCaret(at);
+    setRefusal(null);
+  };
+
+  const pick = (option: MentionOption): void => {
+    if (query === null) return;
+    const label = personLabel(option.person);
+    const next = insertMention(text, query.start, caret, label);
+    write(next.text, next.caret);
+    setPicked((list) => [...list.filter((p) => p.id !== option.person.id), { id: option.person.id, label }]);
+    // SHARE AND MENTION: the Project's access dialog, with this person
+    // picked as a Viewer, in the dashboard (granting access lives there). The
+    // chip goes in now; the post names them once the share is made.
+    if (option.share) {
+      const name = store.getState().name;
+      if (name !== null) {
+        window.open(`/projects/?share=${encodeURIComponent(`shot/${name}`)}&with=${encodeURIComponent(option.person.id)}`, "_blank");
+      }
+    }
+    requestAnimationFrame(() => field.current?.setSelectionRange(next.caret, next.caret));
+  };
+
+  const post = async (): Promise<void> => {
+    if (posting) return;
+    setPosting(true);
+    const said = await comments.post(props.threadKey, encodeMentions(text, picked), props.picture);
+    setPosting(false);
+    setRefusal(said);
+    if (said === null) setPicked([]);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (menuOpen && options.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault();
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setActive((i) => (i + step + options.length) % options.length);
+    } else if (menuOpen && options.length > 0 && (e.key === "Enter" || e.key === "Tab") && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      pick(options[Math.min(active, options.length - 1)]!);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      if (menuOpen) setDismissed(query.start);
+      else props.onCancel();
+    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      void post();
+    } else {
+      return;
+    }
+    e.stopPropagation();
+  };
+
+  const over = text.trim().length > COMMENT_BODY_MAX;
+  const empty = text.trim() === "";
+  const counter =
+    text.length >= COUNTER_FROM ? (
+      <span className={`comment-counter${over ? " is-over" : ""}`} data-testid="comment-counter">
+        {text.length}/{COMMENT_BODY_MAX}
+      </span>
+    ) : null;
+  const atButton = (
+    <button
+      type="button"
+      className="comment-at"
+      aria-label="Mention someone"
+      title="Mention someone"
+      onPointerDown={(e) => e.preventDefault()}
+      onClick={() => {
+        const el = field.current;
+        const at = el?.selectionStart ?? text.length;
+        const lead = at > 0 && !/\s/.test(text[at - 1]!) ? " @" : "@";
+        write(text.slice(0, at) + lead + text.slice(at), at + lead.length);
+        setDismissed(null);
+        requestAnimationFrame(() => {
+          el?.focus();
+          el?.setSelectionRange(at + lead.length, at + lead.length);
+        });
+      }}
+    >
+      @
+    </button>
+  );
+  const postButton = (
+    <button
+      type="button"
+      className="comment-post"
+      data-testid="comment-post"
+      disabled={empty || over || posting}
+      onClick={() => void post()}
+    >
+      Post
+    </button>
+  );
+  const textarea = (
+    <textarea
+      ref={field}
+      className="comment-field"
+      data-testid="comment-field"
+      rows={props.variant === "new" ? 2 : 1}
+      value={text}
+      placeholder={props.variant === "new" ? "Add a comment, @ to mention" : "Reply, @ to mention"}
+      aria-label={props.variant === "new" ? "Comment" : "Reply"}
+      role="combobox"
+      aria-autocomplete="list"
+      aria-expanded={menuOpen}
+      aria-controls={menuId}
+      {...(menuOpen && options.length > 0 ? { "aria-activedescendant": optionId(menuId, active) } : {})}
+      onChange={(e) => write(e.target.value, e.target.selectionStart)}
+      onSelect={(e) => setCaret(e.currentTarget.selectionStart)}
+      onKeyDown={onKeyDown}
+    />
+  );
+  const menu = menuOpen ? (
+    <MentionMenu id={menuId} result={result} active={active} onPick={pick} onActive={setActive} />
+  ) : null;
+  const error =
+    refusal === null ? null : (
+      <p className="comment-refusal" role="alert">
+        {refusal}
+      </p>
+    );
+
+  if (props.variant === "reply") {
+    return (
+      <div className="comment-reply" data-testid="comment-composer">
+        {menu}
+        {error}
+        <div className="comment-reply-row">
+          {textarea}
+          {counter}
+          {atButton}
+          {postButton}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="comment-composer" data-testid="comment-composer">
+      {props.head}
+      <div className="comment-composer-field">{textarea}</div>
+      {error}
+      <div className="comment-composer-foot">
+        <div className="comment-composer-hints">
+          {atButton}
+          <span className="comment-hint">Ctrl Enter to post · Esc to cancel</span>
+          {counter}
+        </div>
+        {postButton}
+      </div>
+      {menu}
+    </div>
+  );
+}