konpeki 0.1.0

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

@@ -0,0 +1,162 @@
+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 {
+  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) => 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 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;
+    let cancelled = false;
+    void loadFileSession(token).then((session) => {
+      if (cancelled) return;
+      state.current = {
+        ready: true,
+        revision: session.revision,
+        savedJSON: canonicalJSON(session.document),
+      };
+      setStatus("saved");
+      callbacksRef.current.onOpen(session.document, session.name);
+    }).catch((error) => {
+      if (cancelled) return;
+      setStatus("error");
+      callbacksRef.current.onError(
+        error instanceof Error ? error.message : "Could not open the file-backed composition.",
+      );
+    });
+    return () => { cancelled = true; };
+  }, [enabled, token]);
+
+  useEffect(() => {
+    if (!enabled || !state.current.ready || ["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 || state.current.drain) return;
+      void loadFileSession(token).then((remote) => {
+        if (cancelled || remote.revision === state.current.revision) return;
+        if (canonicalJSON(draftRef.current) !== state.current.savedJSON) {
+          setStatus("conflict");
+          callbacksRef.current.onNotice(
+            "The file changed elsewhere. Neither version was overwritten.",
+          );
+          return;
+        }
+        state.current = {
+          ready: true,
+          revision: remote.revision,
+          savedJSON: canonicalJSON(remote.document),
+        };
+        setStatus("saved");
+        callbacksRef.current.onExternalChange(remote.document);
+      }).catch(() => {
+        if (!cancelled) setStatus("error");
+      });
+    }, 1000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [enabled, token]);
+
+  function save(next: Draft): Promise<string | undefined> {
+    if (!token || !state.current.ready) 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");
+      } catch (error) {
+        state.current.pending = undefined;
+        const conflict = error instanceof FileSessionError && error.status === 409;
+        setStatus(conflict ? "conflict" : "error");
+        callbacksRef.current.onNotice(conflict
+          ? "The composition changed outside this browser. Your edits were not overwritten."
+          : error instanceof Error ? error.message : "Could not save the composition file.");
+        return;
+      }
+    }
+  }
+
+  async function build(
+    instruction: string,
+    slideId: string,
+    componentId?: string,
+  ) {
+    if (!token) return false;
+    const revision = await save(draftRef.current);
+    if (!revision) return false;
+    await sendBuildRequest(token, {
+      revision,
+      instruction,
+      slideId,
+      ...(componentId ? { componentId } : {}),
+    });
+    return true;
+  }
+
+  return { status, build };
+}

package/src/main.tsx

@@ -0,0 +1,26 @@
+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 { 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/base.css

@@ -0,0 +1,105 @@
+:root {
+  font-family: "IBM Plex Sans", sans-serif;
+  color: #202020;
+  background: #f4f4f4;
+  font-synthesis: none;
+  --accent: #007bbb;
+  --muted: #626262;
+  --ui-bg: #f4f4f4;
+  --ui-surface: #fff;
+  --ui-subtle: #fafafa;
+  --ui-text: #202020;
+  --ui-muted: #626262;
+  --ui-border: #e5e5e5;
+  --ui-control: #d4d4d4;
+  --ui-hover: #f2f2f2;
+  --ui-selected: #edf6fa;
+  --ui-shadow: 0 8px 28px #00000014, 0 1px 3px #00000012;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+button,
+select {
+  cursor: pointer;
+}
+button {
+  border: 1px solid var(--ui-control);
+  border-radius: 4px;
+  color: inherit;
+  background: #fff;
+  padding: 7px 10px;
+}
+button:hover:not(:disabled) {
+  background: #f1f1f1;
+  border-color: #aaa;
+}
+button:disabled {
+  cursor: default;
+  color: #767676;
+}
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+input,
+textarea,
+select {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+  background: #fff;
+  color: var(--ui-text);
+  padding: 7px 9px;
+}
+input:hover,
+textarea:hover,
+select:hover {
+  border-color: #aaa;
+}
+textarea {
+  resize: vertical;
+  min-height: 100px;
+  line-height: 1.55;
+}
+h1,
+h2,
+p {
+  margin: 0;
+}
+h2 {
+  font-size: 14px;
+  font-weight: 600;
+}
+.primary {
+  background: #202020;
+  color: white;
+  border-color: #202020;
+  font-weight: 500;
+}
+.primary:hover:not(:disabled) {
+  background: #383838;
+  border-color: #383838;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/styles/canvas.css

@@ -0,0 +1,268 @@
+.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: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+  z-index: 2;
+}
+.resize-handle::after {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  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: -12px;
+  left: -12px;
+  cursor: nwse-resize;
+}
+.resize-ne {
+  top: -12px;
+  right: -12px;
+  cursor: nesw-resize;
+}
+.resize-sw {
+  bottom: -12px;
+  left: -12px;
+  cursor: nesw-resize;
+}
+.resize-se {
+  right: -12px;
+  bottom: -12px;
+  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%;
+}