konpeki 0.2.0 → 0.3.1

package/src/app/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { CompositionComponent } from "../../composition/types.ts";
 import { validateComposition } from "../../composition/validate.ts";
 import { removeVectorElement } from "../../composition/vector.ts";
@@ -25,7 +25,15 @@ import {
   redoHistory,
   undoHistory,
 } from "../lib/history.ts";
-import { clearStoredDraft, loadDraft, persistDraft } from "../lib/storage.ts";
+import {
+  clearStoredDraft,
+  clearStoredExampleDraft,
+  loadDraft,
+  loadExampleDraft,
+  persistDraft,
+  persistExampleDraft,
+} from "../lib/storage.ts";
+import { canonicalJSON } from "../../composition/compile.ts";
 import { diagramDefinition } from "../../composition/visualizations.ts";
 import { Canvas } from "../components/Canvas.tsx";
 import { BuildOrb } from "../components/BuildOrb.tsx";
@@ -36,6 +44,7 @@ import {
   type RightPanelView,
 } from "../components/RightPanel.tsx";
 import { WorkspaceChrome } from "../components/WorkspaceChrome.tsx";
+import { FeedbackNotice } from "../components/ui.tsx";
 import { exampleDraft } from "../lib/examples.ts";
 import { exportPagePNG } from "../lib/export-png.ts";
 import { fileSessionToken } from "../lib/file-session.ts";
@@ -50,15 +59,18 @@ function loadInitialDraft() {
     return {
       draft: initialDraft(true),
       storageBlocked: false,
-      example: false,
+      exampleName: undefined,
       fileSession: true,
     };
-  const example = exampleDraft(
-    new URLSearchParams(window.location.search).get("example"),
-  );
+  const exampleName = new URLSearchParams(window.location.search).get("example");
+  const example = exampleDraft(exampleName);
   return example
-    ? { draft: example, storageBlocked: false, example: true, fileSession: false }
-    : { ...loadDraft(), example: false, fileSession: false };
+    ? {
+        ...loadExampleDraft(exampleName!, example),
+        exampleName: exampleName!,
+        fileSession: false,
+      }
+    : { ...loadDraft(), exampleName: undefined, fileSession: false };
 }
 
 export function App() {
@@ -71,13 +83,16 @@ export function App() {
   );
   const { draft, selected, activeSlideId } = history.present;
   const slide = getSlide(draft, activeSlideId);
+  const validation = useMemo(() => validateComposition(draft), [draft]);
+  const [savedDraft, setSavedDraft] = useState<Draft>();
   const [blocked, setBlocked] = useState(loaded.storageBlocked);
+  const [requiresReset, setRequiresReset] = useState(loaded.storageBlocked);
   const [error, setError] = useState(loaded.error ?? "");
   const [notice, setNotice] = useState<{
     message: string;
     tone: "neutral" | "error";
   }>();
-  const [toastClosing, setToastClosing] = useState(false);
+  const [toastPaused, setToastPaused] = useState(false);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [leftView, setLeftView] = useState<LeftPanelView>("pages");
   const [rightCollapsed, setRightCollapsed] = useState(false);
@@ -112,6 +127,7 @@ export function App() {
     onNotice: showNotice,
     onError: setError,
   });
+  const fileLocked = loaded.fileSession && (!fileSession.ready || fileSession.opening);
   useEffect(() => {
     if (!focusAfterHistory.current) return;
     focusAfterHistory.current = false;
@@ -130,33 +146,27 @@ export function App() {
   }, [history.present]);
   useEffect(() => {
     if (loaded.fileSession) return;
-    if (blocked || loaded.example) return;
-    if (!validateComposition(draft).ok) return;
+    if (blocked) return;
+    if (!validation.ok) return;
     const timer = setTimeout(() => {
       try {
-        persistDraft(draft);
+        if (loaded.exampleName) persistExampleDraft(loaded.exampleName, draft);
+        else persistDraft(draft);
+        setSavedDraft(draft);
       } catch {
         setError(
-          "Unable to save this draft. Export your work or reset saved draft to retry.",
+          "Unable to save this browser-local draft. Download JSON or reset to retry.",
         );
         setBlocked(true);
       }
     }, 250);
     return () => clearTimeout(timer);
-  }, [draft, blocked, loaded.example, loaded.fileSession]);
-  useEffect(() => {
-    if (!notice) return;
-    const timer = window.setTimeout(() => setToastClosing(true), 3000);
-    return () => window.clearTimeout(timer);
-  }, [notice]);
+  }, [draft, validation, blocked, loaded.exampleName, loaded.fileSession]);
   useEffect(() => {
-    if (!toastClosing) return;
-    const timer = window.setTimeout(() => {
-      setNotice(undefined);
-      setToastClosing(false);
-    }, 280);
+    if (!notice || notice.tone === "error" || toastPaused) return;
+    const timer = window.setTimeout(() => setNotice(undefined), 3000);
     return () => window.clearTimeout(timer);
-  }, [toastClosing]);
+  }, [notice, toastPaused]);
   useEffect(() => {
     const narrow = window.matchMedia("(max-width: 1200px)");
     const compact = window.matchMedia("(max-width: 900px)");
@@ -174,7 +184,7 @@ export function App() {
   }, []);
   useEffect(() => {
     function keydown(event: KeyboardEvent) {
-      if (presenting || fileSession.building) return;
+      if (presenting || fileLocked || fileSession.building) return;
       const modifier = event.metaKey || event.ctrlKey;
       const target = event.target;
       const editable =
@@ -231,10 +241,18 @@ export function App() {
     }
     window.addEventListener("keydown", keydown);
     return () => window.removeEventListener("keydown", keydown);
-  }, [draft, presenting, selected, vectorSelection, fileSession.building]);
+  }, [draft, presenting, selected, vectorSelection, fileSession.building, fileLocked]);
   function showNotice(message: string, tone: "neutral" | "error" = "neutral") {
-    setToastClosing(false);
-    setNotice({ message: message.replace(/\.$/, ""), tone });
+    if (!message) setToastPaused(false);
+    setNotice(message ? { message: message.replace(/\.$/, ""), tone } : undefined);
+  }
+  function changeLeftPanel(collapsed: boolean) {
+    setLeftCollapsed(collapsed);
+    if (!collapsed && window.matchMedia("(max-width: 900px)").matches) setRightCollapsed(true);
+  }
+  function changeRightPanel(collapsed: boolean) {
+    setRightCollapsed(collapsed);
+    if (!collapsed && window.matchMedia("(max-width: 900px)").matches) setLeftCollapsed(true);
   }
   function updateDraft(
     next: Draft,
@@ -439,7 +457,7 @@ export function App() {
     const page = draft.slides.find(s => s.id === target.slideId);
     if (!page) return;
     selectSlide(page.id);
-    setLeftCollapsed(false);
+    changeLeftPanel(false);
     setLeftView("notes");
     const component = page.components.find(c => c.id === target.componentId);
     if (component) {
@@ -459,7 +477,7 @@ export function App() {
       const requested = await fileSession.build(instruction, slide.id, selected, vectorSelection?.componentId === selected ? vectorSelection?.elementId : undefined);
       if (requested) {
         setNotice(undefined);
-        setToastClosing(false);
+        setToastPaused(false);
       }
     } catch (requestError) {
       showNotice(requestError instanceof Error ? requestError.message : "Could not send the build request.", "error");
@@ -524,20 +542,70 @@ export function App() {
       setExportBusy(false);
     }
   }
+  function downloadJSON() {
+    const validation = validateComposition(draft);
+    if (!validation.ok) {
+      showNotice("Fix the composition before downloading JSON.", "error");
+      return;
+    }
+    const blob = new Blob([canonicalJSON(draft)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${draft.title.replace(/[^a-z0-9_-]+/gi, "-") || "konpeki-composition"}.json`;
+    link.click();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+    showNotice("Editable composition JSON downloaded.");
+  }
+  function startBlank() {
+    if (!window.confirm(
+      "Start with a blank composition? You can undo this replacement until you reload.",
+    )) return;
+    const next = initialDraft(true);
+    focusAfterHistory.current = true;
+    updateDraft(next, {
+      activeSlideId: next.slides[0].id,
+      selected: undefined,
+    });
+    setTitleError(false);
+    showNotice("Blank composition started. Undo restores the previous document.");
+  }
   function reset() {
+    const target = loaded.exampleName ? "example" : "saved local draft";
+    if (!window.confirm(
+      `Reset this ${target}? This removes its browser-local working copy.`,
+    )) return;
     try {
-      clearStoredDraft();
-      const next = initialDraft(true);
+      if (loaded.exampleName) clearStoredExampleDraft(loaded.exampleName);
+      else clearStoredDraft();
+      const next = loaded.exampleName
+        ? structuredClone(exampleDraft(loaded.exampleName)!)
+        : initialDraft(true);
       setHistory(
         createHistory({ draft: next, activeSlideId: next.slides[0].id }),
       );
       setBlocked(false);
+      setRequiresReset(false);
       setError("");
-      showNotice("Saved draft reset.");
+      setTitleError(false);
+      showNotice(loaded.exampleName ? "Example reset." : "Saved draft reset.");
     } catch {
+      setBlocked(true);
       setError("Storage remains unavailable. Export your work to keep it.");
     }
   }
+  const browserSaveMessage = !validation.ok
+    ? `Autosave paused: ${validation.issues[0]?.path || "document"} ${validation.issues[0]?.message || "is invalid"}. Fix this to resume saving.`
+    : blocked
+      ? "Changes are not being saved. Download JSON to keep your work."
+      : savedDraft !== draft
+        ? "Saving changes in this browser…"
+        : "Your editable composition is saved only in this browser.";
+  const recoveryMessage = fileSession.opening
+    ? "Opening the file… Editing is paused."
+    : !validation.ok
+    ? `Changes are not saved: ${validation.issues[0]?.path || "document"} ${validation.issues[0]?.message || "is invalid"}. Undo the edit or correct this value.`
+    : error;
   const selectedComponent = slide.components.find((c) => c.id === selected);
   const buildState = fileSession.building
     ? fileSession.review.request?.status === "working" ? "working" : "ready"
@@ -550,25 +618,36 @@ export function App() {
       <a className="skip-link" href="#canvas-stage">
         Skip to canvas
       </a>
-      {error && (
-        <div className="recovery" role="alert">
-          <span>{error}</span>
-          <button type="button" onClick={reset}>
-            Reset saved draft
-          </button>
-        </div>
-      )}
+      <FeedbackNotice kind="recovery">
+        {recoveryMessage ? <>
+          <span>{recoveryMessage}</span>
+          <div className="recovery-actions">
+            {!validation.ok ? <button type="button" onClick={() => setHistory(current => undoHistory(current))}>Undo edit</button> : <>
+              {(!loaded.fileSession || fileSession.ready) && <button type="button" onClick={downloadJSON}>Download JSON</button>}
+              {loaded.fileSession ? fileSession.status === "conflict" ? (
+                <button type="button" onClick={() => {
+                  if (window.confirm("Replace your browser edits with the current file? Download JSON first to keep a copy.")) void fileSession.reload();
+                }}>Load file version</button>
+              ) : <button type="button" disabled={fileSession.opening} onClick={() => { void fileSession.retry(); }}>{fileSession.opening ? "Opening…" : fileSession.ready ? "Retry save" : "Retry open"}</button> : <>
+                {!requiresReset && <button type="button" onClick={() => { setBlocked(false); setError(""); }}>Retry save</button>}
+                <button type="button" onClick={reset}>{loaded.exampleName ? "Reset example" : "Reset saved draft"}</button>
+              </>}
+            </>}
+          </div>
+        </> : null}
+      </FeedbackNotice>
       <div
         className={`workspace ${fileSession.building ? "is-building" : ""} ${leftCollapsed ? "left-collapsed" : ""} ${rightCollapsed ? "right-collapsed" : ""}`}
         aria-hidden={presenting || undefined}
-        inert={presenting || undefined}
+        inert={presenting || fileLocked || undefined}
+        aria-busy={fileSession.opening || undefined}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
           event.preventDefault();
           event.dataTransfer.dropEffect = "copy";
         }}
         onDrop={(event) => {
-          if (fileSession.building) {
+          if (fileLocked || fileSession.building) {
             event.preventDefault();
             return;
           }
@@ -580,7 +659,7 @@ export function App() {
       >
         <WorkspaceChrome
           leftCollapsed={leftCollapsed}
-          onToggleLeftPanel={() => setLeftCollapsed(!leftCollapsed)}
+          onToggleLeftPanel={() => changeLeftPanel(!leftCollapsed)}
           title={draft.title}
           titleRef={title}
           titleError={titleError}
@@ -597,10 +676,17 @@ export function App() {
           building={fileSession.building}
           buildState={buildState}
           onBuild={loaded.fileSession ? () => { void requestBuild(); } : undefined}
+          browserTools={loaded.fileSession ? undefined : {
+            example: Boolean(loaded.exampleName),
+            saveMessage: browserSaveMessage,
+            onImportJSON: (file) => { void openComposition(file); },
+            onDownloadJSON: downloadJSON,
+            onStartBlank: startBlank,
+            onReset: reset,
+          }}
           onSelectTool={() => selectComponent()}
           onComponentTool={useComponentTool}
-        />
-        <div className="editor-content" inert={fileSession.building} aria-busy={fileSession.building}>
+        >
         <LeftPanel
           draft={draft}
           view={leftView}
@@ -613,6 +699,7 @@ export function App() {
             onAdd={fileSession.addNote}
             onRemove={fileSession.removeNote}
             onSelect={selectNoteTarget}
+            onNotice={(message) => showNotice(message, "error")}
           />}
           activeSlideId={slide.id}
           collapsed={leftCollapsed}
@@ -620,6 +707,8 @@ export function App() {
           onAddSlide={addNewSlide}
           onRemoveSlide={removeExistingSlide}
         />
+        </WorkspaceChrome>
+        <div className="editor-content" inert={fileSession.building} aria-busy={fileSession.building}>
         <Canvas
           key={slide.id}
           revisionNotes={fileSession.review.notes.filter(note => !note.resolved)}
@@ -635,7 +724,7 @@ export function App() {
               setVectorSelection(selection);
               setRightView("settings");
               if (edit) {
-                setRightCollapsed(false);
+                changeRightPanel(false);
                 setVectorEditRequest((request) => request + 1);
               }
             } else setVectorSelection(undefined);
@@ -684,12 +773,19 @@ export function App() {
           slide={slide}
           draft={draft}
           onView={setRightView}
-          onCollapsedChange={setRightCollapsed}
+          onCollapsedChange={changeRightPanel}
           onSelectSlide={() => selectComponent()}
           onSelectComponent={selectComponent}
           onSelectVectorElement={(elementId) =>
             selected && setVectorSelection({ componentId: selected, elementId })
           }
+          onSelectOverflow={(componentId, elementId) => {
+            selectComponent(componentId);
+            setVectorSelection(elementId ? { componentId, elementId } : undefined);
+            setRightView("settings");
+            changeRightPanel(false);
+            if (elementId) setVectorEditRequest(request => request + 1);
+          }}
           onReorderPaintOrder={updatePaintOrder}
           onComponent={updateComponent}
           onSlide={(nextSlide, mergeKey) =>
@@ -740,13 +836,10 @@ export function App() {
           onExit={() => setPresenting(false)}
         />
       )}
-      <div
-        className={`toast ${notice ? "visible" : ""} ${notice?.tone === "error" ? "error" : ""} ${toastClosing ? "closing" : ""}`}
-      >
-        <span role={notice?.tone === "error" ? "alert" : "status"} aria-live={notice?.tone === "error" ? "assertive" : "polite"}>
-          {notice?.message}
-        </span>
-      </div>
+      <FeedbackNotice kind="toast" tone={notice?.tone} onPauseChange={setToastPaused}
+        onDismiss={() => { setNotice(undefined); setToastPaused(false); }}>
+        {notice?.message}
+      </FeedbackNotice>
     </>
   );
 }

package/src/components/Canvas.tsx

@@ -760,7 +760,7 @@ export function Canvas({
   const themeId = draft.theme?.id ?? "plex";
   const themeMode = draft.theme?.mode ?? "paper";
   const palette = composerPalette(themeId, themeMode);
-  const typography = getTheme(themeLabel(themeId), themeMode);
+  const typography = getTheme(themeLabel(themeId), themeMode, draft.theme?.typography);
   const canvasStyle = {
     "--component-layers": slide.paintOrder.length,
     "--slide-bg": palette.bg,
@@ -791,8 +791,10 @@ export function Canvas({
         if (
           event.target instanceof Element &&
           !event.target.closest(".canvas")
-        )
+        ) {
+          event.currentTarget.focus({ preventScroll: true });
           onSelect();
+        }
       }}
     >
       <div className="slide-wrap">
@@ -802,6 +804,7 @@ export function Canvas({
               aria-label="Page name"
               autoFocus
               value={nextSlideName}
+              onPointerDown={(event) => event.stopPropagation()}
               onChange={(event) => setNextSlideName(event.target.value)}
               onBlur={() => {
                 const name = nextSlideName.trim();
@@ -850,7 +853,10 @@ export function Canvas({
           style={canvasStyle}
           aria-label="Page canvas"
           onPointerDown={(e) => {
-            if (interactive && e.target === e.currentTarget) onSelect();
+            if (interactive && e.target === e.currentTarget) {
+              e.currentTarget.closest<HTMLElement>(".stage")?.focus({ preventScroll: true });
+              onSelect();
+            }
           }}
           onPointerMove={interactive ? move : undefined}
           onPointerUp={interactive ? () => end() : undefined}