konpeki 0.1.0

package/src/components/LeftPanel.tsx

@@ -0,0 +1,107 @@
+import type { CSSProperties } from "react";
+import type {
+  CompositionSlide,
+  ThemeMode,
+} from "../../composition/types.ts";
+import type { Draft } from "../lib/model.ts";
+
+function ThumbnailCanvas({
+  slide,
+  themeMode,
+  pageIndex,
+  pageTotal,
+}: {
+  slide: CompositionSlide;
+  themeMode: ThemeMode;
+  pageIndex: number;
+  pageTotal: number;
+}) {
+  return (
+    <span className={`slide-thumbnail-canvas ${themeMode}`} style={{ aspectRatio: slide.canvas.width / slide.canvas.height }}>
+      {slide.components.map((component) => {
+        const rect = component.preferredRect;
+        const style = {
+          left: `${rect.x * 100 / slide.canvas.width}%`,
+          top: `${rect.y * 100 / slide.canvas.height}%`,
+          width: `${rect.width * 100 / slide.canvas.width}%`,
+          height: `${rect.height * 100 / slide.canvas.height}%`,
+        } as CSSProperties;
+        return (
+          <span
+            key={component.id}
+            className={`thumbnail-component kind-${component.kind} ${component.kind === "text-block" ? `role-${component.appearance.role}` : ""}`}
+            style={style}
+          />
+        );
+      })}
+      {slide.pageNumber?.style !== "none" && (
+        <span className="thumbnail-page-number">
+          {String(pageIndex).padStart(2, "0")}
+          {slide.pageNumber?.style === "01/02"
+            ? `/${String(pageTotal).padStart(2, "0")}`
+            : ""}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function LeftPanel({
+  draft,
+  activeSlideId,
+  collapsed,
+  onSelectSlide,
+  onAddSlide,
+  onRemoveSlide,
+}: {
+  draft: Draft;
+  activeSlideId: string;
+  collapsed: boolean;
+  onSelectSlide: (id: string) => void;
+  onAddSlide: () => void;
+  onRemoveSlide: (id: string) => void;
+}) {
+  return (
+    <aside className={`left-panel${collapsed ? " collapsed" : ""}`} aria-label="Workspace panel" inert={collapsed}>
+      <div className="panel-toolbar">
+        <span className="panel-heading">Pages</span>
+      </div>
+      <div className="slide-list">
+        {draft.slides.map((item, index) => (
+          <div key={item.id} className="slide-thumbnail-item">
+            <button
+              type="button"
+              className={`slide-thumbnail ${item.id === activeSlideId ? "selected" : ""}`}
+              aria-current={item.id === activeSlideId ? "page" : undefined}
+              onClick={() => onSelectSlide(item.id)}
+            >
+              <ThumbnailCanvas
+                slide={item}
+                themeMode={draft.theme?.mode ?? "paper"}
+                pageIndex={index + 1}
+                pageTotal={draft.slides.length}
+              />
+              <span>{item.name}</span>
+            </button>
+            <button
+              type="button"
+              className="remove-slide"
+              aria-label={`Remove ${item.name}`}
+              onClick={() => onRemoveSlide(item.id)}
+            >
+              <span className="panel-close-icon" aria-hidden="true" />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          className="add-slide"
+          aria-label="Add page"
+          onClick={onAddSlide}
+        >
+          <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    </aside>
+  );
+}

package/src/components/PageSizePicker.tsx

@@ -0,0 +1,30 @@
+import type { CompositionSlide } from "../../composition/types.ts";
+import { pagePresets, pageSizeIssue, resizePage } from "../lib/page-size.ts";
+
+export function PageSizePicker({ slide, onChange }: { slide: CompositionSlide; onChange: (slide: CompositionSlide) => void }) {
+  const preset = pagePresets.find((item) => item.width === slide.canvas.width && item.height === slide.canvas.height);
+  function apply(w: number, h: number, destination: CompositionSlide["intendedViewingSize"] = "custom") {
+    const size = { width: w, height: h };
+    if (!pageSizeIssue(slide, size)) {
+      onChange(resizePage(slide, size, destination));
+    }
+  }
+  return <fieldset>
+    <legend>Size</legend>
+    <label className="field">
+      <span className="sr-only">Size</span>
+      <select name="page-format" value={preset?.name ?? "Imported"} onChange={(event) => {
+        const next = pagePresets.find((item) => item.name === event.target.value);
+        if (next) apply(next.width, next.height, next.destination);
+      }}>
+        {!preset && <option value="Imported" disabled>{slide.canvas.width} × {slide.canvas.height} · Imported size</option>}
+        {pagePresets.map((item) => {
+          const unavailable = Boolean(pageSizeIssue(slide, item));
+          return <option key={item.name} value={item.name} disabled={unavailable}>
+            {item.name} · {item.width} × {item.height}{unavailable ? " · unavailable" : ""}
+          </option>;
+        })}
+      </select>
+    </label>
+  </fieldset>;
+}

package/src/components/Presentation.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from "react";
+import type { Draft } from "../lib/model.ts";
+import { presentationAction } from "../lib/presentation.ts";
+import { Canvas } from "./Canvas.tsx";
+
+const noop = () => {};
+
+export function Presentation({
+  draft,
+  initialSlideId,
+  onExit,
+}: {
+  draft: Draft;
+  initialSlideId: string;
+  onExit: () => void;
+}) {
+  const [index, setIndex] = useState(() =>
+    Math.max(0, draft.slides.findIndex((slide) => slide.id === initialSlideId)),
+  );
+  const overlay = useRef<HTMLDivElement>(null);
+  const slide = draft.slides[index];
+
+  useEffect(() => {
+    overlay.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    function keydown(event: KeyboardEvent) {
+      const interactiveTarget =
+        event.target instanceof Element &&
+        Boolean(event.target.closest("button,a,input,textarea,select,[contenteditable=true]"));
+      const action = presentationAction(
+        event.key,
+        index,
+        draft.slides.length,
+        interactiveTarget,
+      );
+      if (action === undefined) return;
+      event.preventDefault();
+      if (action === "exit") onExit();
+      else setIndex(action);
+    }
+    window.addEventListener("keydown", keydown);
+    return () => window.removeEventListener("keydown", keydown);
+  }, [draft.slides.length, index, onExit]);
+
+  return (
+    <div
+      ref={overlay}
+      className="presentation"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Presentation mode"
+      tabIndex={-1}
+    >
+      <Canvas
+        key={slide.id}
+        mode="present"
+        draft={draft}
+        activeSlideId={slide.id}
+        onSelect={noop}
+        onSlideName={noop}
+        onComponent={noop}
+        onEditEnd={noop}
+        onAdd={noop}
+        onNotice={noop}
+      />
+      <nav className="presentation-controls" aria-label="Presentation controls">
+        <button
+          type="button"
+          disabled={index === 0}
+          aria-label="Previous page"
+          onClick={() => setIndex((value) => Math.max(0, value - 1))}
+        >
+          ←
+        </button>
+        <span aria-live="polite">
+          {index + 1} / {draft.slides.length}
+        </span>
+        <button
+          type="button"
+          disabled={index === draft.slides.length - 1}
+          aria-label="Next page"
+          onClick={() =>
+            setIndex((value) => Math.min(draft.slides.length - 1, value + 1))
+          }
+        >
+          →
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            if (document.fullscreenElement) void document.exitFullscreen();
+            else void overlay.current?.requestFullscreen();
+          }}
+        >
+          Full screen
+        </button>
+        <button type="button" onClick={onExit}>
+          Exit
+        </button>
+      </nav>
+    </div>
+  );
+}

package/src/components/RightPanel.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import type {
+  CompositionComponent,
+  CompositionSlide,
+} from "../../composition/types.ts";
+import { componentInstanceLabel, type Draft } from "../lib/model.ts";
+import { InspectorPanel } from "./InspectorPanel.tsx";
+
+export type RightPanelView = "settings" | "layers";
+
+function LayersPanel({
+  slide,
+  selectedComponentId,
+  onSelectComponent,
+  onReorderPaintOrder,
+}: {
+  slide: CompositionSlide;
+  selectedComponentId?: string;
+  onSelectComponent: (id: string) => void;
+  onReorderPaintOrder: (ids: string[]) => void;
+}) {
+  const [dragging, setDragging] = useState<string>();
+  const layers = [...slide.paintOrder].reverse();
+  function moveLayer(id: string, toIndex: number) {
+    const next = layers.filter((item) => item !== id);
+    next.splice(Math.max(0, Math.min(toIndex, next.length)), 0, id);
+    onReorderPaintOrder(next.reverse());
+  }
+  return (
+    <section className="layers-panel" aria-labelledby="layers-heading">
+      <div className="layers-heading-row">
+        <h2 id="layers-heading">Components & layers</h2>
+        <span>Front to back</span>
+      </div>
+      {layers.length ? (
+        <div className="layer-list">
+          {layers.map((id, index) => {
+            const component = slide.components.find((item) => item.id === id)!;
+            const groups = slide.groups
+              .filter((group) => group.childIds.includes(id))
+              .map((group) => group.label?.trim() || group.id);
+            const label = componentInstanceLabel(slide.components, id);
+            return (
+              <div
+                key={id}
+                data-layer={id}
+                className={`layer-row ${selectedComponentId === id ? "selected" : ""} ${dragging === id ? "dragging" : ""}`}
+                draggable
+                onDragStart={(event) => {
+                  setDragging(id);
+                  event.dataTransfer.effectAllowed = "move";
+                  event.dataTransfer.setData("text/plain", id);
+                }}
+                onDragEnd={() => setDragging(undefined)}
+                onDragOver={(event) => {
+                  event.preventDefault();
+                  event.dataTransfer.dropEffect = "move";
+                }}
+                onDrop={(event) => {
+                  event.preventDefault();
+                  const source = dragging || event.dataTransfer.getData("text/plain");
+                  if (source && source !== id) moveLayer(source, index);
+                  setDragging(undefined);
+                }}
+              >
+                <span className="layer-drag" aria-hidden="true">⠿</span>
+                <button
+                  type="button"
+                  className="layer-select"
+                  onClick={() => onSelectComponent(id)}
+                >
+                  <strong>{label}</strong>
+                  <span>{groups.length ? groups.join(", ") : "Page root"}</span>
+                </button>
+                <span className="layer-actions">
+                  <button
+                    type="button"
+                    aria-label={`Move ${label} forward`}
+                    disabled={index === 0}
+                    onClick={() => moveLayer(id, index - 1)}
+                  >↑</button>
+                  <button
+                    type="button"
+                    aria-label={`Move ${label} backward`}
+                    disabled={index === layers.length - 1}
+                    onClick={() => moveLayer(id, index + 1)}
+                  >↓</button>
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="layers-empty">No components yet.</p>
+      )}
+    </section>
+  );
+}
+
+export function RightPanel({
+  view,
+  collapsed,
+  component,
+  componentLabel,
+  selectedComponentId,
+  selectedVectorElementId,
+  vectorEditRequest,
+  slide,
+  draft,
+  onView,
+  onCollapsedChange,
+  onSelectSlide,
+  onSelectComponent,
+  onSelectVectorElement,
+  onReorderPaintOrder,
+  onComponent,
+  onSlide,
+  onDraft,
+  onEditEnd,
+}: {
+  view: RightPanelView;
+  collapsed: boolean;
+  component?: CompositionComponent;
+  componentLabel?: string;
+  selectedComponentId?: string;
+  selectedVectorElementId?: string;
+  vectorEditRequest?: number;
+  slide: CompositionSlide;
+  draft: Draft;
+  onView: (view: RightPanelView) => void;
+  onCollapsedChange: (collapsed: boolean) => void;
+  onSelectSlide: () => void;
+  onSelectComponent: (id: string) => void;
+  onSelectVectorElement: (id?: string) => void;
+  onReorderPaintOrder: (ids: string[]) => void;
+  onComponent: (component: CompositionComponent, mergeKey?: string) => void;
+  onSlide: (slide: CompositionSlide, mergeKey?: string) => void;
+  onDraft: (patch: Partial<Draft>, mergeKey?: string) => void;
+  onEditEnd: () => void;
+}) {
+  return (
+    <aside className={`right-panel${collapsed ? " collapsed" : ""}`} aria-label="Inspector panel">
+      <div className="panel-toolbar">
+        <div className="panel-tabs" aria-label="Right panel view" inert={collapsed}>
+          {(["settings", "layers"] as const).map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              aria-pressed={view === tab}
+              className={view === tab ? "active" : ""}
+              onClick={() => onView(tab)}
+            >
+              {tab === "settings" ? "Settings" : "Layers"}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          className="panel-toggle"
+          aria-label={collapsed ? "Expand right panel" : "Collapse right panel"}
+          aria-expanded={!collapsed}
+          onClick={() => onCollapsedChange(!collapsed)}
+        >
+          <svg
+            className="panel-collapse-icon"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <rect x="3" y="4" width="18" height="16" rx="2" />
+            <path d={collapsed ? "M15 4v16M11 9l-3 3 3 3" : "M15 4v16M8 9l3 3-3 3"} />
+          </svg>
+        </button>
+      </div>
+      <div className="right-panel-body" inert={collapsed}>
+      {view === "settings" ? (
+        <InspectorPanel
+          component={component}
+          componentLabel={componentLabel}
+          slide={slide}
+          draft={draft}
+          selectedVectorElementId={selectedVectorElementId}
+          vectorEditRequest={vectorEditRequest}
+          onSelectSlide={onSelectSlide}
+          onSelectVectorElement={onSelectVectorElement}
+          onComponent={onComponent}
+          onSlide={onSlide}
+          onDraft={onDraft}
+          onEditEnd={onEditEnd}
+        />
+      ) : (
+        <LayersPanel
+          slide={slide}
+          selectedComponentId={selectedComponentId}
+          onSelectComponent={onSelectComponent}
+          onReorderPaintOrder={onReorderPaintOrder}
+        />
+      )}
+      </div>
+    </aside>
+  );
+}

package/src/components/VectorOverflowWarning.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import type { CompositionSlide, CompositionDocument } from "../../composition/types.ts";
+
+/** Measure rendered text, including nested SVG transforms, after fonts settle. */
+export function VectorOverflowWarning({ slide, theme }: {
+  slide: CompositionSlide;
+  theme: CompositionDocument["theme"];
+}) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    let frame = 0;
+    function measure() {
+      frame = requestAnimationFrame(() => {
+        if (cancelled) return;
+        let overflow = 0;
+        document.querySelectorAll<HTMLElement>(".stage .text-block-content").forEach((text) => {
+          const surface = text.parentElement;
+          if (surface && (text.scrollHeight > surface.clientHeight + 1 || text.scrollWidth > surface.clientWidth + 1)) overflow++;
+        });
+        document.querySelectorAll<SVGSVGElement>(".stage .custom-vector-art").forEach((svg) => {
+          const root = svg.getScreenCTM();
+          if (!root) return;
+          const view = svg.viewBox.baseVal;
+          svg.querySelectorAll<SVGTextElement>("text").forEach((text) => {
+            const matrix = text.getScreenCTM();
+            if (!matrix) return;
+            const box = text.getBBox();
+            const transform = root.inverse().multiply(matrix);
+            const corners = [[box.x, box.y], [box.x + box.width, box.y],
+              [box.x, box.y + box.height], [box.x + box.width, box.y + box.height]];
+            if (corners.some(([x, y]) => {
+              const p = new DOMPoint(x, y).matrixTransform(transform);
+              return p.x < view.x - 1 || p.y < view.y - 1 || p.x > view.x + view.width + 1 || p.y > view.y + view.height + 1;
+            })) overflow++;
+          });
+        });
+        setCount(overflow);
+      });
+    }
+    void document.fonts.ready.then(measure);
+    document.fonts.addEventListener("loadingdone", measure);
+    return () => { cancelled = true; cancelAnimationFrame(frame); document.fonts.removeEventListener("loadingdone", measure); };
+  }, [slide, theme]);
+  return count ? <p role="status" className="field-error">{count} text {count === 1 ? "element exceeds" : "elements exceed"} its component viewport on this slide. Revise the text or geometry; nothing was resized.</p> : null;
+}

package/src/components/WorkspaceChrome.tsx

@@ -0,0 +1,199 @@
+import type { RefObject } from "react";
+import type { CompositionComponent } from "../../composition/types.ts";
+import { componentLabels } from "../lib/model.ts";
+import mark from "../assets/konpeki-mark.png";
+
+const dockItems: {
+  kind: CompositionComponent["kind"];
+}[] = [
+  { kind: "text-block" },
+  { kind: "diagram" },
+  { kind: "chart" },
+  { kind: "image" },
+  { kind: "table" },
+];
+
+function DockIcon({
+  kind,
+}: {
+  kind: CompositionComponent["kind"] | "select";
+}) {
+  return (
+    <svg className="dock-glyph" viewBox="0 0 24 24" aria-hidden="true">
+      {kind === "select" ? (
+        <path d="M5 3.8 18 12l-6.2 1.2L8.6 19Z" />
+      ) : kind === "text-block" ? (
+        <path d="M5 6h14M5 10h14M5 14h10M5 18h12" />
+      ) : kind === "chart" ? (
+        <>
+          <path d="M5 19V5M5 19h14" />
+          <path d="M8 16v-4M12 16V8M16 16v-7" />
+        </>
+      ) : 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" />
+        </>
+      ) : kind === "image" ? (
+        <>
+          <rect x="4" y="5" width="16" height="14" rx="1" />
+          <circle cx="15.5" cy="9" r="1.5" />
+          <path d="m6 17 4.5-5 3 3 2-2 2.5 4" />
+        </>
+      ) : kind === "table" ? (
+        <>
+          <rect x="3" y="5" width="18" height="14" rx="1" />
+          <path d="M3 10h18M9 5v14M15 5v14" />
+        </>
+      ) : (
+        <path d="M5 7h14M5 12h10M5 17h14" />
+      )}
+    </svg>
+  );
+}
+
+export function WorkspaceChrome({
+  title,
+  titleRef,
+  titleError,
+  selectedKind,
+  onTitle,
+  onEditEnd,
+  onExportPNG,
+  exporting,
+  onPresent,
+  fileStatus,
+  building,
+  onBuild,
+  onSelectTool,
+  onComponentTool,
+  leftCollapsed,
+  onToggleLeftPanel,
+}: {
+  leftCollapsed: boolean;
+  onToggleLeftPanel: () => void;
+  title: string;
+  titleRef: RefObject<HTMLInputElement | null>;
+  titleError: boolean;
+  selectedKind?: CompositionComponent["kind"];
+  onTitle: (title: string, mergeKey?: string) => void;
+  onEditEnd: () => void;
+  onExportPNG: () => void;
+  exporting: boolean;
+  onPresent: () => void;
+  fileStatus?: "loading" | "saved" | "saving" | "conflict" | "error";
+  building: boolean;
+  onBuild?: () => void;
+  onSelectTool: () => void;
+  onComponentTool: (kind: CompositionComponent["kind"]) => void;
+}) {
+  return (
+    <>
+      <header className="document-island" aria-label="Document controls">
+        <img src={mark} alt="Konpeki" />
+        <label className="document-title">
+          <span className="sr-only">Composition title</span>
+          <input
+            ref={titleRef}
+            aria-invalid={titleError || undefined}
+            aria-describedby={titleError ? "title-error" : undefined}
+            name="composition-title"
+            autoComplete="off"
+            value={title}
+            onChange={(event) => onTitle(event.target.value, "title")}
+            onBlur={onEditEnd}
+          />
+        </label>
+        {titleError && (
+          <span className="document-title-error" id="title-error">
+            Enter a title.
+          </span>
+        )}
+        {fileStatus && fileStatus !== "saved" && (
+          <span
+            className={`file-status ${fileStatus}`}
+            role="status"
+            aria-live="polite"
+            title={fileStatus === "conflict"
+              ? "The file changed elsewhere while this browser has edits."
+              : undefined}
+          >
+            {fileStatus === "loading" ? "Opening"
+              : fileStatus === "saving" ? "Saving"
+              : fileStatus === "conflict" ? "Conflict" : "Save error"}
+          </span>
+        )}
+        <button type="button" className="panel-toggle"
+          aria-label={leftCollapsed ? "Expand left panel" : "Collapse left panel"}
+          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" />
+            <path d={leftCollapsed ? "M9 4v16M13 9l3 3-3 3" : "M9 4v16M16 9l-3 3 3 3"} />
+          </svg>
+        </button>
+      </header>
+
+      <div className="action-island" aria-label="Document actions" inert={leftCollapsed}>
+        <button
+          type="button"
+          className="icon-only"
+          aria-label="Export PNG"
+          title="Export active page as PNG"
+          disabled={exporting}
+          onClick={onExportPNG}
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="4" y="4" width="16" height="12" rx="2" />
+            <path d="m7 14 3.5-4 3 3 2-2 2.5 3M12 16v5m-3-3 3 3 3-3" />
+          </svg>
+        </button>
+        <button type="button" onClick={onPresent}>
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="4" width="18" height="12" rx="2" />
+            <path d="M12 16v5m-4 0h8M10 7l5 3-5 3Z" />
+          </svg>
+          Present
+        </button>
+        {onBuild && (
+          <button
+            type="button"
+            className="primary"
+            disabled={fileStatus !== "saved" || building}
+            onClick={onBuild}
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="m5 19 10-10 3 3L8 22Zm10-10 2-2 3 3-2 2M5 3v6M2 6h6m10-5v4m-2-2h4" />
+            </svg>
+            {building ? "Building…" : "Build it"}
+          </button>
+        )}
+      </div>
+
+      <nav className="component-dock" aria-label="Canvas tools">
+        <button
+          type="button"
+          className={!selectedKind ? "active" : ""}
+          aria-pressed={!selectedKind}
+          onClick={onSelectTool}
+        >
+          <DockIcon kind="select" />
+          <span>Select</span>
+        </button>
+        {dockItems.map(({ kind }) => (
+          <button
+            key={kind}
+            type="button"
+            className={selectedKind === kind ? "active" : ""}
+            aria-pressed={selectedKind === kind}
+            title={`Add or select ${componentLabels[kind]}`}
+            onClick={() => onComponentTool(kind)}
+          >
+            <DockIcon kind={kind} />
+            <span>{componentLabels[kind]}</span>
+          </button>
+        ))}
+      </nav>
+    </>
+  );
+}