konpeki 0.3.1 → 0.4.0

package/src/lib/use-file-session.ts

@@ -1,249 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { canonicalJSON } from "../../composition/compile.ts";
-import { validateComposition } from "../../composition/validate.ts";
-import type { Draft } from "./model.ts";
-import { activeRequest, emptyReview, type ReviewState, type ReviewTarget } from "./review.ts";
-import {
-  addNote,
-  removeNote,
-  cancelRequest,
-  FileSessionError,
-  fileSessionToken,
-  loadFileSession,
-  saveFileSession,
-  sendBuildRequest,
-} from "./file-session.ts";
-
-export type FileStatus = "loading" | "saved" | "saving" | "conflict" | "error";
-
-type Callbacks = {
-  onOpen: (draft: Draft, name: string) => void;
-  onExternalChange: (draft: Draft) => void;
-  onNotice: (message: string, tone?: "neutral" | "error") => void;
-  onError: (message: string) => void;
-};
-
-export function useFileSession(
-  enabled: boolean,
-  draft: Draft,
-  callbacks: Callbacks,
-) {
-  const token = fileSessionToken();
-  const [status, setStatus] = useState<FileStatus>(enabled ? "loading" : "saved");
-  const [building, setBuilding] = useState(false);
-  const [review, setReview] = useState<ReviewState>(emptyReview);
-  const reviewRef = useRef(review);
-  const buildPending = useRef(false);
-  const submittingBuild = useRef(false);
-  const loading = useRef(false);
-  const loadGeneration = useRef(0);
-  const callbacksRef = useRef(callbacks);
-  callbacksRef.current = callbacks;
-  const draftRef = useRef(draft);
-  draftRef.current = draft;
-  const state = useRef<{
-    ready: boolean;
-    revision: string;
-    savedJSON: string;
-    pending?: { draft: Draft; serialized: string };
-    drain?: Promise<void>;
-  }>({ ready: false, revision: "", savedJSON: "" });
-
-  useEffect(() => {
-    if (!enabled || !token) return;
-    void reload();
-    return () => {
-      loadGeneration.current++;
-      loading.current = false;
-    };
-  }, [enabled, token]);
-
-  useEffect(() => {
-    if (!enabled || !state.current.ready || ["loading", "conflict", "error"].includes(status))
-      return;
-    if (!validateComposition(draft).ok) return;
-    const timer = window.setTimeout(() => { void save(draft); }, 250);
-    return () => window.clearTimeout(timer);
-  }, [draft, enabled, status]);
-
-  useEffect(() => {
-    if (!enabled || !token) return;
-    let cancelled = false;
-    const timer = window.setInterval(() => {
-      if (!state.current.ready || loading.current || state.current.drain || submittingBuild.current) return;
-      const revision = state.current.revision;
-      const generation = loadGeneration.current;
-      void loadFileSession(token).then((remote) => {
-        if (cancelled || generation !== loadGeneration.current || loading.current || state.current.drain || submittingBuild.current || revision !== state.current.revision) return;
-        receiveReview(remote.review);
-        if (canonicalJSON(draftRef.current) === state.current.savedJSON) {
-          setStatus("saved");
-          callbacksRef.current.onError("");
-        }
-        if (remote.revision === revision) return;
-        if (canonicalJSON(draftRef.current) !== state.current.savedJSON) {
-          setStatus("conflict");
-          callbacksRef.current.onError("The file changed elsewhere. Your browser edits are not saved; neither version was overwritten.");
-          return;
-        }
-        state.current = {
-          ready: true,
-          revision: remote.revision,
-          savedJSON: canonicalJSON(remote.document),
-        };
-        setStatus("saved");
-        callbacksRef.current.onExternalChange(remote.document);
-      }).catch((error) => {
-        if (cancelled || generation !== loadGeneration.current || loading.current || state.current.drain || submittingBuild.current || revision !== state.current.revision) return;
-        setStatus("error");
-        callbacksRef.current.onError(`Could not load the latest file. ${error instanceof Error ? error.message : "Check the local file service."}`);
-      });
-    }, 1000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, [enabled, token]);
-
-  function finishBuild() {
-    buildPending.current = false;
-    setBuilding(false);
-  }
-
-  function receiveReview(next: ReviewState) {
-    if (next.version < reviewRef.current.version) return;
-    reviewRef.current = next;
-    setReview(next);
-    buildPending.current = activeRequest(next.request);
-    setBuilding(buildPending.current);
-  }
-
-  async function noteAction(action: () => Promise<ReviewState>, saveFirst = false) {
-    if (loading.current || !state.current.ready) throw new Error("Wait for the file to open before submitting.");
-    if (submittingBuild.current) throw new Error("Wait for the current save before submitting.");
-    submittingBuild.current = true;
-    try {
-      if (saveFirst && !await save(draftRef.current)) throw new Error("Save the composition before adding a note.");
-      receiveReview(await action());
-    } finally { submittingBuild.current = false; }
-  }
-
-  function save(next: Draft): Promise<string | undefined> {
-    if (!token || loading.current || !state.current.ready || activeRequest(reviewRef.current.request)) return Promise.resolve(undefined);
-    if (!validateComposition(next).ok) return Promise.resolve(undefined);
-    const serialized = canonicalJSON(next);
-    if (serialized === state.current.savedJSON && !state.current.drain)
-      return Promise.resolve(state.current.revision);
-    state.current.pending = { draft: next, serialized };
-    if (!state.current.drain) {
-      state.current.drain = drain(token).finally(() => {
-        state.current.drain = undefined;
-      });
-    }
-    return state.current.drain.then(() =>
-      state.current.savedJSON === serialized ? state.current.revision : undefined,
-    );
-  }
-
-  async function drain(activeToken: string) {
-    while (state.current.pending) {
-      const pending = state.current.pending;
-      state.current.pending = undefined;
-      setStatus("saving");
-      try {
-        const result = await saveFileSession(
-          activeToken,
-          state.current.revision,
-          pending.draft,
-        );
-        state.current.revision = result.revision;
-        state.current.savedJSON = pending.serialized;
-        setStatus("saved");
-        callbacksRef.current.onError("");
-      } catch (error) {
-        state.current.pending = undefined;
-        const conflict = error instanceof FileSessionError && error.status === 409;
-        setStatus(conflict ? "conflict" : "error");
-        callbacksRef.current.onError(
-          conflict
-            ? "The file changed elsewhere. Your browser edits are not saved; neither version was overwritten."
-            : `Changes are not saved. ${error instanceof Error ? error.message : "Could not save the composition file."}`,
-        );
-        return;
-      }
-    }
-  }
-
-  async function build(
-    instruction: string,
-    slideId: string,
-    componentId?: string,
-    elementId?: string,
-  ) {
-    if (!token || loading.current || !state.current.ready || buildPending.current) return false;
-    if (submittingBuild.current) throw new Error("Wait for your note to finish saving before building.");
-    buildPending.current = true;
-    submittingBuild.current = true;
-    setBuilding(true);
-    try {
-      const revision = await save(draftRef.current);
-      if (!revision) {
-        finishBuild();
-        return false;
-      }
-      receiveReview(await sendBuildRequest(token, {
-        revision,
-        instruction,
-        slideId,
-        ...(componentId ? { componentId } : {}),
-        ...(elementId ? { elementId } : {}),
-      }));
-      return true;
-    } catch (error) {
-      finishBuild();
-      throw error;
-    } finally {
-      submittingBuild.current = false;
-    }
-  }
-
-  async function reload() {
-    if (!token || loading.current || state.current.drain || submittingBuild.current) return;
-    loading.current = true;
-    const generation = ++loadGeneration.current;
-    const requestedJSON = canonicalJSON(draftRef.current);
-    setStatus("loading");
-    try {
-      const session = await loadFileSession(token);
-      if (generation !== loadGeneration.current) return;
-      if (canonicalJSON(draftRef.current) !== requestedJSON) {
-        setStatus("conflict");
-        callbacksRef.current.onError("Your browser edits changed while opening the file. Neither version was overwritten. Download JSON before loading the file again.");
-        return;
-      }
-      state.current = { ready: true, revision: session.revision, savedJSON: canonicalJSON(session.document) };
-      draftRef.current = session.document;
-      receiveReview(session.review);
-      callbacksRef.current.onOpen(session.document, session.name);
-      callbacksRef.current.onError("");
-      setStatus("saved");
-    } catch (error) {
-      if (generation !== loadGeneration.current) return;
-      setStatus("error");
-      callbacksRef.current.onError(error instanceof Error ? error.message : "Could not open the file.");
-    } finally {
-      if (generation === loadGeneration.current) loading.current = false;
-    }
-  }
-
-  return {
-    status, build, building, review,
-    opening: status === "loading",
-    ready: state.current.ready,
-    reload,
-    retry: () => state.current.ready && !activeRequest(reviewRef.current.request) ? save(draftRef.current) : reload(),
-    addNote: (target: ReviewTarget, text: string) => noteAction(() => addNote(token!, target, text), true),
-    removeNote: (id: string) => noteAction(() => removeNote(token!, id)),
-    cancel: () => noteAction(() => cancelRequest(token!, reviewRef.current.request!.id)),
-  };
-}

package/src/main.tsx

@@ -1,29 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "@fontsource/ibm-plex-sans/400.css";
-import "@fontsource/ibm-plex-sans/500.css";
-import "@fontsource/ibm-plex-sans/600.css";
-import "@fontsource/ibm-plex-serif/latin-400.css";
-import "@fontsource/ibm-plex-serif/latin-500.css";
-import "@fontsource/ibm-plex-serif/latin-600.css";
-import "@fontsource/noto-sans/latin-400.css";
-import "@fontsource/noto-sans/latin-500.css";
-import "@fontsource/noto-sans/latin-600.css";
-import "@fontsource/hanken-grotesk/latin-400.css";
-import "@fontsource/hanken-grotesk/latin-500.css";
-import "@fontsource/hanken-grotesk/latin-600.css";
-import { App } from "./app/App.tsx";
-import "./styles/base.css";
-import "./styles/shell.css";
-import "./styles/chrome.css";
-import "./styles/left-panel.css";
-import "./styles/right-panel.css";
-import "./styles/canvas.css";
-import "./styles/component-previews.css";
-import "./styles/feedback.css";
-import "./styles/presentation.css";
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

package/src/styles/canvas.css

@@ -1,299 +0,0 @@
-.canvas {
-  width: 100%;
-  aspect-ratio: var(--page-ratio);
-  background: var(--slide-bg);
-  position: relative;
-  outline: 1px solid #dedede;
-  box-shadow: 0 7px 26px #00000012;
-  container-type: inline-size;
-}
-.presentation-canvas .slide-component:hover {
-  outline: 0;
-}
-.presentation-canvas .component-surface {
-  cursor: default;
-  touch-action: auto;
-}
-.canvas .component-heading {
-  font-family: var(--vector-heading-font);
-}
-.canvas {
-  font-family: var(--vector-body-font);
-}
-.slide-component {
-  position: absolute;
-  background: var(--slide-bg);
-  color: var(--slide-ink);
-  border: 1px solid transparent;
-  --component-accent: var(--slide-accent);
-  --component-context: var(--slide-context);
-}
-.slide-component:hover {
-  outline: 1px solid #a9a9a9;
-}
-.slide-component.selected {
-  outline: 1px solid var(--accent);
-}
-.slide-component:has(.component-surface:focus-visible) {
-  outline: 2px solid var(--accent);
-}
-.component-surface {
-  border: 0;
-  border-radius: 0;
-  color: inherit;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  padding: 1.4cqw;
-  text-align: inherit;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  cursor: move;
-  touch-action: none;
-}
-.component-surface:focus-visible {
-  outline: 0;
-}
-.component-surface:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-}
-.custom-visual .component-surface {
-  padding: 0;
-}
-.custom-visual.border-none.rule-none {
-  border: 0;
-}
-.custom-visual-art {
-  display: block;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  user-select: none;
-}
-.custom-visual-art.fit-contain {
-  object-fit: contain;
-}
-.custom-visual-art.fit-cover {
-  object-fit: cover;
-}
-.custom-visual-art.fit-stretch {
-  object-fit: fill;
-}
-.custom-vector-art {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-.custom-vector-art.editing .vector-element {
-  pointer-events: all;
-  cursor: pointer;
-}
-.custom-vector-art.editing .vector-element.selected {
-  outline: 2px solid #0974e9;
-  outline-offset: 3px;
-  filter: drop-shadow(0 0 5px #0974e980);
-}
-.vector-handles circle {
-  fill: #ffffff;
-  stroke: #0974e9;
-  stroke-width: 3;
-  vector-effect: non-scaling-stroke;
-  cursor: crosshair;
-}
-.component-heading {
-  font-size: max(1.7cqw, 11px);
-  font-weight: 500;
-  line-height: 1.3;
-}
-.title-prominent .component-heading {
-  font-weight: 600;
-  font-size: 2.2cqw;
-}
-.component-intent {
-  display: block;
-  color: var(--slide-muted);
-  font-size: max(1.7cqw, 11px);
-  margin-top: 0.7cqw;
-  line-height: 1.5;
-  cursor: text;
-}
-.inline-intent-editor {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  width: 100%;
-  height: max(100%, 8.5cqw);
-  min-height: calc(1.5em + 2.8cqw + 2px);
-  margin: 0;
-  padding: 1.4cqw;
-  box-sizing: border-box;
-  border: 1px solid var(--slide-accent);
-  border-radius: 2px;
-  outline: 0;
-  background: var(--slide-bg);
-  color: var(--slide-ink);
-  font: inherit;
-  line-height: 1.5;
-  resize: none;
-}
-.kind-text-block.role-title:not(.custom-visual) .component-surface {
-  justify-content: flex-end;
-  padding: 0.5cqw 0;
-}
-.kind-text-block.role-title .component-heading {
-  font-size: max(2.6cqw, 20px);
-  font-weight: 600;
-  line-height: 1.18;
-}
-.kind-text-block.role-title .component-intent {
-  font-size: max(1.7cqw, 11px);
-  margin-top: 0.4cqw;
-}
-.kind-text-block.role-footnote:not(.custom-visual) .component-surface {
-  padding: 1cqw 0;
-}
-.kind-text-block.role-footnote .component-heading {
-  display: none;
-}
-.kind-text-block.role-footnote .component-intent {
-  font-size: max(1.7cqw, 11px);
-  margin: 0;
-}
-.slide-page-number {
-  position: absolute;
-  z-index: var(--component-layers);
-  right: 5.833333%;
-  bottom: 2.2%;
-  font-size: max(1.5cqw, 11px);
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-.color-muted {
-  color: var(--slide-muted);
-}
-.color-accent {
-  color: var(--slide-accent);
-}
-.border-outline {
-  border: 1px solid var(--slide-context);
-}
-.border-filled {
-  background: color-mix(in srgb, var(--slide-context) 22%, var(--slide-bg));
-}
-.rule-top {
-  border-top: 1px solid var(--slide-context);
-}
-.rule-bottom {
-  border-bottom: 1px solid var(--slide-context);
-}
-.resize-handle {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  touch-action: none;
-  z-index: 2;
-}
-.resize-handle::after {
-  position: absolute;
-  top: 17px;
-  left: 17px;
-  width: 6px;
-  height: 6px;
-  border: 1px solid var(--accent);
-  background: white;
-  content: "";
-}
-.resize-handle:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-}
-.resize-nw {
-  top: -20px;
-  left: -20px;
-  cursor: nwse-resize;
-}
-.resize-ne {
-  top: -20px;
-  right: -20px;
-  cursor: nesw-resize;
-}
-.resize-sw {
-  bottom: -20px;
-  left: -20px;
-  cursor: nesw-resize;
-}
-.resize-se {
-  right: -20px;
-  bottom: -20px;
-  cursor: nwse-resize;
-}
-.guide {
-  position: absolute;
-  pointer-events: none;
-  z-index: calc(var(--component-layers) + 1);
-}
-.guide-x {
-  top: 0;
-  bottom: 0;
-  border-left: 1px solid var(--accent);
-}
-.guide-y {
-  left: 0;
-  right: 0;
-  border-top: 1px solid var(--accent);
-}
-
-.kind-text-block:not(.custom-visual) .component-surface {
-  padding: 0;
-  justify-content: flex-start;
-}
-.text-block-content {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  flex: none;
-  width: 100%;
-}
-.kind-text-block:not(.custom-visual) .inline-intent-editor {
-  padding: 0;
-  text-align: inherit;
-  min-height: 100%;
-  height: 100%;
-}
-.revision-pin {
-  position: absolute;
-  display: grid;
-  place-items: center;
-  width: 40px;
-  height: 40px;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle,
-    var(--accent) 0 10px,
-    var(--ui-surface) 10.5px 11.5px,
-    transparent 12px
-  );
-  color: white;
-  font: 500 11px "IBM Plex Sans", sans-serif;
-  box-shadow: none;
-  filter: drop-shadow(0 1px 2px #0003);
-}
-.revision-pin:hover:not(:disabled),
-.revision-pin:active:not(:disabled) {
-  border-color: transparent;
-  background: radial-gradient(
-    circle,
-    #006aa1 0 10px,
-    var(--ui-surface) 10.5px 11.5px,
-    transparent 12px
-  );
-}