konpeki 0.2.0 → 0.3.0

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";
@@ -50,15 +58,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,6 +82,8 @@ 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 [error, setError] = useState(loaded.error ?? "");
   const [notice, setNotice] = useState<{
@@ -130,20 +143,22 @@ 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]);
+  }, [draft, validation, blocked, loaded.exampleName, loaded.fileSession]);
   useEffect(() => {
     if (!notice) return;
     const timer = window.setTimeout(() => setToastClosing(true), 3000);
@@ -524,20 +539,64 @@ 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);
       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 selectedComponent = slide.components.find((c) => c.id === selected);
   const buildState = fileSession.building
     ? fileSession.review.request?.status === "working" ? "working" : "ready"
@@ -554,7 +613,7 @@ export function App() {
         <div className="recovery" role="alert">
           <span>{error}</span>
           <button type="button" onClick={reset}>
-            Reset saved draft
+            {loaded.exampleName ? "Reset example" : "Reset saved draft"}
           </button>
         </div>
       )}
@@ -597,10 +656,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}
@@ -620,6 +686,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)}

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,

package/src/components/InspectorPanel.tsx

@@ -1,5 +1,6 @@
 import {
   themeIds,
+  typographyIds,
   type CompositionComponent,
   type CompositionSlide,
   type ChartTemplate,
@@ -7,6 +8,7 @@ import {
   type Rect,
   type TextColor,
   type ThemeId,
+  type TypographyId,
   type VectorElement,
 } from "../../composition/types.ts";
 import {
@@ -30,6 +32,7 @@ import {
   type Draft,
 } from "../lib/model.ts";
 import { composerPalette, themeLabel } from "../lib/theme.ts";
+import { getTheme, typographyLabels } from "../../design/themes/index.ts";
 import { DiagramTypeIcon } from "./DiagramTypeIcon.tsx";
 import { Field, Select, humanize } from "./ui.tsx";
 import { moveVectorElement, removeVectorElement } from "../../composition/vector.ts";
@@ -141,7 +144,7 @@ function AppearancePicker({
   );
 }
 
-function ThemePicker({
+function PalettePicker({
   value,
   mode,
   onChange,
@@ -152,7 +155,7 @@ function ThemePicker({
 }) {
   return (
     <fieldset className="theme-picker">
-      <legend>Theme</legend>
+      <legend>Color palette</legend>
       <div className="theme-options">
         {themeIds.map((id) => {
           const palette = composerPalette(id, mode);
@@ -203,6 +206,22 @@ function SegmentedControl({ label, value, options, onChange }: {
   );
 }
 
+function AutoTemplateButton({ selected, onClick }: { selected: boolean; onClick: () => void }) {
+  return (
+    <button type="button" className={selected ? "selected" : ""} aria-pressed={selected} onClick={onClick}>
+      <svg className="diagram-type-icon" viewBox="0 0 48 32" aria-hidden="true">
+        <rect x="13" y="5" width="22" height="22" rx="4" />
+        <circle className="filled" cx="19" cy="11" r="1.5" />
+        <circle className="filled" cx="29" cy="11" r="1.5" />
+        <circle className="filled" cx="24" cy="16" r="1.5" />
+        <circle className="filled" cx="19" cy="21" r="1.5" />
+        <circle className="filled" cx="29" cy="21" r="1.5" />
+      </svg>
+      <span>YOLO</span>
+    </button>
+  );
+}
+
 function DiagramTypePicker({
   value,
   selection,
@@ -218,22 +237,7 @@ function DiagramTypePicker({
       <div className="diagram-type-options" aria-labelledby="diagram-type-label">
         <div className="diagram-type-category">
           <div>
-            <button
-              type="button"
-              className={selection === "auto" ? "selected" : ""}
-              aria-pressed={selection === "auto"}
-              onClick={() => onChange(value, "auto")}
-            >
-              <svg className="diagram-type-icon" viewBox="0 0 48 32" aria-hidden="true">
-                <rect x="13" y="5" width="22" height="22" rx="4" />
-                <circle className="filled" cx="19" cy="11" r="1.5" />
-                <circle className="filled" cx="29" cy="11" r="1.5" />
-                <circle className="filled" cx="24" cy="16" r="1.5" />
-                <circle className="filled" cx="19" cy="21" r="1.5" />
-                <circle className="filled" cx="29" cy="21" r="1.5" />
-              </svg>
-              <span>YOLO</span>
-            </button>
+            <AutoTemplateButton selected={selection === "auto"} onClick={() => onChange(value, "auto")} />
           </div>
         </div>
         {diagramCategories.map((category) => (
@@ -270,21 +274,60 @@ function ChartTypePicker({ value, selection, hasTopology, onChange }: {
 }) {
   return (
     <details className="field chart-type-field diagram-type-field">
-      <summary>{selection === "auto" ? "YOLO" : `Required form: ${chartDefinitions[value].label}`}</summary>
-      <button type="button" aria-pressed={selection === "auto"} onClick={() => onChange(value, "auto")}>YOLO</button>
-      <AppearancePicker
-        label="Chart form"
-        name="template"
-        value={selection === "explicit" ? value : ""}
-        options={chartTemplates}
-        labels={Object.fromEntries(Object.entries(chartDefinitions).map(([type, definition]) => [type, definition.label]))}
-        description={`${chartDefinitions[value].expression}${hasTopology ? " Recorded Sankey topology is preserved; remove it before changing chart type, even in YOLO." : ""}`}
-        disabledOptions={hasTopology ? new Set(chartTemplates.filter(type => type !== "sankey")) : undefined}
-        onChange={(value) => {
-          const template = chartTemplates.find(type => type === value);
-          if (template) onChange(template, "explicit");
-        }}
-      />
+      <summary id="chart-type-label">Template</summary>
+      <div className="diagram-type-options chart-type-options" aria-labelledby="chart-type-label">
+        <div className="diagram-type-category">
+          <div>
+            <AutoTemplateButton selected={selection === "auto"} onClick={() => onChange(value, "auto")} />
+          </div>
+        </div>
+        <div className="diagram-type-category" role="group" aria-label="Chart templates">
+          <div>
+            {chartTemplates.map((template) => (
+              <button
+                key={template}
+                type="button"
+                className={selection === "explicit" && value === template ? "selected" : ""}
+                aria-pressed={selection === "explicit" && value === template}
+                disabled={hasTopology && template !== "sankey"}
+                title={hasTopology && template !== "sankey"
+                  ? "Remove the recorded Sankey topology before changing chart type."
+                  : chartDefinitions[template].expression}
+                onClick={() => onChange(template, "explicit")}
+              >
+                <span className="appearance-preview" data-property="template" data-value={template} aria-hidden="true">
+                  {template === "scatter" ? (
+                    <svg viewBox="0 0 36 24">
+                      <path d="M3 2v20h31" fill="none" stroke="var(--preview-muted)" strokeWidth="1.2" />
+                      {[[7, 6], [10, 11], [14, 9], [17, 13], [20, 16], [24, 15], [28, 18], [29, 7], [32, 19]].map(([cx, cy], index) => (
+                        <circle key={index} cx={cx} cy={cy} r="1.35" fill="var(--preview-accent)" />
+                      ))}
+                    </svg>
+                  ) : template === "sankey" ? (
+                    <svg viewBox="0 0 36 24" fill="var(--preview-accent)">
+                      <g fillOpacity="0.3">
+                        <path d="M4 4C10.5 4 10.5 2 17 2V12.5C10.5 12.5 10.5 14.5 4 14.5Z" />
+                        <path d="M4 14.5C10.5 14.5 10.5 17.5 17 17.5V22C10.5 22 10.5 19 4 19Z" />
+                        <path d="M19 8C25.5 8 25.5 10 32 10V14.5C25.5 14.5 25.5 12.5 19 12.5Z" />
+                        <path d="M19 17.5C25.5 17.5 25.5 18 32 18V22.5C25.5 22.5 25.5 22 19 22Z" />
+                      </g>
+                      <path d="M19 2C25.5 2 25.5 1 32 1V7C25.5 7 25.5 8 19 8Z" fillOpacity="0.65" />
+                      <rect x="2" y="4" width="2" height="15" />
+                      <rect x="17" y="2" width="2" height="10.5" />
+                      <rect x="17" y="17.5" width="2" height="4.5" />
+                      <rect x="32" y="1" width="2" height="6" />
+                      <rect x="32" y="10" width="2" height="4.5" />
+                      <rect x="32" y="18" width="2" height="4.5" />
+                    </svg>
+                  ) : Array.from({ length: 4 }, (_, index) => <i key={index} />)}
+                </span>
+                <span>{chartDefinitions[template].label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+      {hasTopology && <small className="visualization-description">Recorded Sankey topology is preserved; remove it before changing chart type, even in YOLO.</small>}
     </details>
   );
 }
@@ -326,32 +369,42 @@ export function InspectorPanel({
     target?.scrollIntoView({ block: "nearest" });
     control?.select();
   }, [vectorEditRequest]);
+  const theme = draft.theme ?? { id: "plex", mode: "paper" };
+  const typography = getTheme(themeLabel(theme.id), theme.mode, theme.typography);
   if (!component)
     return (
       <section className="inspector-content" aria-labelledby="inspector-heading">
         <h2 id="inspector-heading">Page</h2>
         <PageSizePicker key={slide.id} slide={slide} onChange={onSlide} />
         <h2>Document appearance</h2>
-        <ThemePicker
-          value={draft.theme?.id ?? "plex"}
-          mode={draft.theme?.mode ?? "paper"}
+        <Select
+          label="Font"
+          value={typography.typographyId}
+          options={typographyIds}
+          optionLabels={typographyLabels}
+          onChange={(value) => onDraft({ theme: { ...theme, typography: value as TypographyId } })}
+        />
+        <PalettePicker
+          value={theme.id}
+          mode={theme.mode}
           onChange={(value) =>
             onDraft({
               theme: {
+                ...theme,
                 id: value,
-                mode: draft.theme?.mode ?? "paper",
+                typography: typography.typographyId,
               },
             })
           }
         />
         <SegmentedControl
-          label="Theme mode"
-          value={draft.theme?.mode ?? "paper"}
+          label="Background"
+          value={theme.mode}
           options={["paper", "night"]}
           onChange={(value) =>
             onDraft({
               theme: {
-                id: draft.theme?.id ?? "plex",
+                ...theme,
                 mode: value as "paper" | "night",
               },
             })

package/src/components/WorkspaceChrome.tsx

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 import type { CompositionComponent } from "../../composition/types.ts";
 import { componentLabels } from "../lib/model.ts";
 import mark from "../assets/konpeki-mark.png";
@@ -33,8 +33,8 @@ function DockIcon({
       ) : kind === "diagram" ? (
         <>
           <rect x="3" y="5" width="6" height="5" rx="1" />
-          <rect x="15" y="14" width="6" height="5" rx="1" />
-          <path d="M9 8h6v8M12 13l3 3 3-3" />
+          <rect x="15" y="16" width="6" height="5" rx="1" />
+          <path d="M9 8h9v8m-2.5-2.5L18 16l2.5-2.5" />
         </>
       ) : kind === "image" ? (
         <>
@@ -68,11 +68,14 @@ export function WorkspaceChrome({
   building,
   buildState,
   onBuild,
+  browserTools,
   onSelectTool,
   onComponentTool,
   leftCollapsed,
   onToggleLeftPanel,
+  children,
 }: {
+  children: ReactNode;
   leftCollapsed: boolean;
   onToggleLeftPanel: () => void;
   title: string;
@@ -88,14 +91,31 @@ export function WorkspaceChrome({
   building: boolean;
   buildState?: "ready" | "working";
   onBuild?: () => void;
+  browserTools?: {
+    example: boolean;
+    saveMessage: string;
+    onImportJSON: (file: File) => void;
+    onDownloadJSON: () => void;
+    onStartBlank: () => void;
+    onReset: () => void;
+  };
   onSelectTool: () => void;
   onComponentTool: (kind: CompositionComponent["kind"]) => void;
 }) {
+  const browserMenu = useRef<HTMLDetailsElement>(null);
+  const importInput = useRef<HTMLInputElement>(null);
+  function closeBrowserMenu() {
+    if (browserMenu.current) browserMenu.current.open = false;
+  }
+  useEffect(() => {
+    if (leftCollapsed) closeBrowserMenu();
+  }, [leftCollapsed]);
   return (
     <>
+      <div className={`left-sidebar${leftCollapsed ? " collapsed" : ""}`}>
       <header className="document-island" aria-label="Document controls">
         <img src={mark} alt="Konpeki" />
-        <label className="document-title">
+        <label className="document-title" inert={leftCollapsed}>
           <span className="sr-only">Composition title</span>
           <input
             ref={titleRef}
@@ -116,7 +136,7 @@ export function WorkspaceChrome({
         )}
         {fileStatus && fileStatus !== "saved" && (
           <span
-            className={`file-status ${fileStatus}`}
+            className={`file-status ${fileStatus}${leftCollapsed ? " sr-only" : ""}`}
             role="status"
             aria-live="polite"
             title={fileStatus === "conflict"
@@ -130,6 +150,7 @@ export function WorkspaceChrome({
         )}
         <button type="button" className="panel-toggle"
           aria-label={leftCollapsed ? "Expand left panel" : "Collapse left panel"}
+          aria-expanded={!leftCollapsed}
           onClick={onToggleLeftPanel}>
           <svg className="panel-collapse-icon" viewBox="0 0 24 24" aria-hidden="true">
             <rect x="3" y="4" width="18" height="16" rx="2" />
@@ -138,6 +159,10 @@ export function WorkspaceChrome({
         </button>
       </header>
 
+      <div className="editor-content" inert={building} aria-busy={building}>
+        {children}
+      </div>
+
       <div className="action-island" aria-label="Document actions" inert={leftCollapsed}>
         <button
           type="button"
@@ -158,6 +183,67 @@ export function WorkspaceChrome({
             <path d="M12 16v5m-4 0h8M10 7l5 3-5 3Z" />
           </svg>
         </button>
+        {browserTools && (
+          <details className="browser-menu" ref={browserMenu}>
+            <summary>Browser</summary>
+            <div className="browser-menu-popover">
+              <strong>Browser playground</strong>
+              <p role="status">
+                {browserTools.saveMessage}
+                {" "}Nothing syncs automatically.
+              </p>
+              <div className="browser-menu-actions">
+                <button type="button" onClick={() => importInput.current?.click()}>
+                  Import JSON
+                </button>
+                <input
+                  ref={importInput}
+                  hidden
+                  type="file"
+                  accept="application/json,.json"
+                  aria-label="Choose composition JSON"
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (!file) return;
+                    closeBrowserMenu();
+                    browserTools.onImportJSON(file);
+                  }}
+                />
+                <button type="button" onClick={() => {
+                  closeBrowserMenu();
+                  browserTools.onDownloadJSON();
+                }}>
+                  Download JSON
+                </button>
+                <button type="button" onClick={() => {
+                  closeBrowserMenu();
+                  browserTools.onStartBlank();
+                }}>
+                  Start blank
+                </button>
+                <button type="button" onClick={() => {
+                  closeBrowserMenu();
+                  browserTools.onReset();
+                }}>
+                  {browserTools.example ? "Reset example" : "Reset local draft"}
+                </button>
+              </div>
+              <p className="browser-agent-handoff">
+                To continue with a coding agent, download the editable JSON and
+                follow the{" "}
+                <a
+                  href="https://github.com/vcfgdev/konpeki/blob/main/SETUP.md"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  setup guidance
+                </a>
+                .
+              </p>
+            </div>
+          </details>
+        )}
         {onBuild && (
           <button
             type="button"
@@ -171,6 +257,7 @@ export function WorkspaceChrome({
           </button>
         )}
       </div>
+      </div>
 
       <nav className="component-dock" aria-label="Canvas tools" inert={building}>
         <button

package/src/lib/storage.ts

@@ -5,39 +5,67 @@ import {
   type Draft,
 } from "./model.ts";
 export const storageKey = "konpeki-composer/v1";
+export const exampleStorageKey = (name: string) =>
+  `konpeki-composer/examples/v1/${encodeURIComponent(name)}`;
 export type LoadedDraft = {
   draft: Draft;
   storageBlocked: boolean;
   error?: string;
 };
-export function loadDraft(): LoadedDraft {
+function loadStoredDraft(
+  key: string,
+  fallback: Draft,
+  unreadableMessage: string,
+): LoadedDraft {
   try {
-    const saved = localStorage.getItem(storageKey);
-    if (saved === null) return { draft: initialDraft(true), storageBlocked: false };
+    const saved = localStorage.getItem(key);
+    if (saved === null) return { draft: fallback, storageBlocked: false };
     const result = parseStoredDraft(saved);
     return result.ok
       ? { draft: result.draft, storageBlocked: false }
       : {
-          draft: initialDraft(true),
+          draft: fallback,
           storageBlocked: true,
-          error:
-            "Saved data could not be read. It has not been changed. Reset saved draft to recover.",
+          error: unreadableMessage,
         };
   } catch {
     return {
-      draft: initialDraft(true),
+      draft: fallback,
       storageBlocked: true,
       error:
-        "Storage is unavailable. You can still export your work; reset to retry saving.",
+        "Browser storage is unavailable. You can still download JSON; reset to retry saving.",
     };
   }
 }
-export function persistDraft(draft: Draft) {
+function persistStoredDraft(key: string, draft: Draft) {
   const value = serializeDraft(draft);
   if (!parseStoredDraft(value).ok)
     throw new Error("Invalid draft cannot be saved.");
-  localStorage.setItem(storageKey, value);
+  localStorage.setItem(key, value);
+}
+export function loadDraft(): LoadedDraft {
+  return loadStoredDraft(
+    storageKey,
+    initialDraft(true),
+    "Saved data could not be read. It has not been changed. Reset saved draft to recover.",
+  );
+}
+export function loadExampleDraft(name: string, bundled: Draft): LoadedDraft {
+  return loadStoredDraft(
+    exampleStorageKey(name),
+    bundled,
+    "This example's saved working copy could not be read. It has not been changed. Reset the example to recover.",
+  );
+}
+export function persistDraft(draft: Draft) {
+  persistStoredDraft(storageKey, draft);
+}
+export function persistExampleDraft(name: string, draft: Draft) {
+  persistStoredDraft(exampleStorageKey(name), draft);
 }
 export function clearStoredDraft() {
   localStorage.removeItem(storageKey);
 }
+export function clearStoredExampleDraft(name: string) {
+  localStorage.removeItem(exampleStorageKey(name));
+}

package/src/main.tsx

@@ -9,6 +9,9 @@ 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";