konpeki 0.3.1 → 0.4.0

package/src/components/LeftPanel.tsx

@@ -1,120 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-import type {
-  CompositionSlide,
-  ThemeMode,
-} from "../../composition/types.ts";
-import type { Draft } from "../lib/model.ts";
-
-export type LeftPanelView = "pages" | "notes";
-
-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,
-  view,
-  onView,
-  revisionNotes,
-  onSelectSlide,
-  onAddSlide,
-  onRemoveSlide,
-}: {
-  draft: Draft;
-  activeSlideId: string;
-  collapsed: boolean;
-  view: LeftPanelView;
-  onView: (view: LeftPanelView) => void;
-  revisionNotes?: ReactNode;
-  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">
-        {revisionNotes ? <div className="panel-tabs" aria-label="Left panel view">
-          {(["pages", "notes"] as const).map(tab => <button key={tab} type="button"
-            aria-pressed={view === tab} className={view === tab ? "active" : ""}
-            onClick={() => onView(tab)}>{tab === "pages" ? "Pages" : "Notes"}</button>)}
-        </div> : <span className="panel-heading">Pages</span>}
-      </div>
-      <div className="slide-list" hidden={!!revisionNotes && view !== "pages"}>
-        {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>
-      {revisionNotes && <div className="left-notes" hidden={view !== "notes"}>{revisionNotes}</div>}
-    </aside>
-  );
-}

package/src/components/PageSizePicker.tsx

@@ -1,30 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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/RevisionNotes.tsx

@@ -1,55 +0,0 @@
-import { useState } from "react";
-import type { CompositionDocument } from "../../composition/types.ts";
-import { componentInstanceLabel } from "../lib/model.ts";
-import { activeRequest, type ReviewState, type ReviewTarget } from "../lib/review.ts";
-
-export function RevisionNotes({ document, target, review, disabled, onAdd, onRemove, onSelect, onNotice }: {
-  document: CompositionDocument;
-  target: ReviewTarget;
-  review: ReviewState;
-  disabled: boolean;
-  onAdd: (target: ReviewTarget, text: string) => Promise<void>;
-  onRemove: (id: string) => Promise<void>;
-  onSelect: (target: ReviewTarget) => void;
-  onNotice: (message: string) => void;
-}) {
-  const [drafts, setDrafts] = useState<Record<string, string>>({});
-  const [saving, setSaving] = useState(false);
-  const key = JSON.stringify(target);
-  const text = drafts[key] ?? "";
-  function label(value: ReviewTarget) {
-    const slide = document.slides.find(s => s.id === value.slideId);
-    if (!slide) return "Deleted page";
-    const component = slide.components.find(c => c.id === value.componentId);
-    if (value.componentId && !component) return `${slide.name} · Deleted component`;
-    const name = component ? componentInstanceLabel(slide.components, component.id) : "Page";
-    const element = value.elementId && component?.customVisual?.format === "vector"
-      ? component.customVisual.elements.find(e => e.id === value.elementId) : undefined;
-    return `${slide.name} · ${name}${value.elementId ? ` · ${element ? value.elementId : "Deleted element"}` : ""}`;
-  }
-  async function run(action: () => Promise<void>) {
-    setSaving(true);
-    try { await action(); onNotice(""); }
-    catch (error) { onNotice(error instanceof Error ? error.message : "Could not save revision note"); }
-    finally { setSaving(false); }
-  }
-  const pending = review.notes.filter(n => !n.resolved);
-  return <section className="revision-notes" aria-label="Revision notes">
-    <form onSubmit={event => { event.preventDefault(); void run(async () => {
-      await onAdd(target, text);
-      setDrafts(current => ({ ...current, [key]: current[key] === text ? "" : current[key] }));
-    }); }}>
-      <label htmlFor="revision-note">Request a change</label>
-      <p className="revision-note-scope">{label(target)}</p>
-      <textarea id="revision-note" value={text} maxLength={4000} rows={3} placeholder="Describe what to change…" disabled={disabled || saving}
-        onChange={event => setDrafts(current => ({ ...current, [key]: event.target.value }))} />
-      <div className="revision-note-submit"><button type="submit" disabled={disabled || saving || !text.trim()}>{saving ? "Saving…" : "Add note"}</button></div>
-    </form>
-    <p className="revision-note-count">{pending.length} pending</p>
-    {pending.length > 0 && <ol className="revision-note-list">{pending.map((note, i) => <li key={note.id} id={`note-${note.id}`}>
-      <button type="button" className="revision-note-target" onClick={() => onSelect(note)}><span>{i + 1}</span>{label(note)}</button>
-      <p>{note.text}</p>
-      <button type="button" className="revision-note-remove" disabled={disabled || saving || activeRequest(review.request)} aria-label={`Remove note ${i + 1}`} onClick={() => { void run(() => onRemove(note.id)); }}>Remove</button>
-    </li>)}</ol>}
-  </section>;
-}

package/src/components/RightPanel.tsx

@@ -1,233 +0,0 @@
-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";
-import { VectorOverflowWarning } from "./VectorOverflowWarning.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 [dropIndex, setDropIndex] = useState<number>();
-  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"
-          onDragOver={(event) => {
-            if (!dragging) return;
-            event.preventDefault();
-            const rows = [...event.currentTarget.querySelectorAll<HTMLElement>(".layer-row")];
-            const next = rows.findIndex((row) => {
-              const rect = row.getBoundingClientRect();
-              return event.clientY < rect.top + rect.height / 2;
-            });
-            const boundary = next < 0 ? layers.length : next;
-            const sourceIndex = layers.indexOf(dragging);
-            const unchanged = boundary === sourceIndex || boundary === sourceIndex + 1;
-            event.dataTransfer.dropEffect = unchanged ? "none" : "move";
-            setDropIndex(unchanged ? undefined : boundary);
-          }}
-          onDragLeave={(event) => {
-            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
-              setDropIndex(undefined);
-            }
-          }}
-          onDrop={(event) => {
-            if (!dragging) return;
-            event.preventDefault();
-            if (dropIndex !== undefined) {
-              moveLayer(dragging, dropIndex > layers.indexOf(dragging) ? dropIndex - 1 : dropIndex);
-            }
-            setDragging(undefined);
-            setDropIndex(undefined);
-          }}
-        >
-          {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}
-                data-drop-edge={dropIndex === index ? "before" : dropIndex === layers.length && index === layers.length - 1 ? "after" : undefined}
-                className={`layer-row ${selectedComponentId === id ? "selected" : ""} ${dragging === id ? "dragging" : ""}`}
-                draggable
-                onDragStart={(event) => {
-                  setDragging(id);
-                  setDropIndex(undefined);
-                  event.dataTransfer.effectAllowed = "move";
-                  event.dataTransfer.setData("text/plain", id);
-                }}
-                onDragEnd={() => {
-                  setDragging(undefined);
-                  setDropIndex(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,
-  onSelectOverflow,
-  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;
-  onSelectOverflow: (componentId: string, elementId?: 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>
-        <div className="overflow-control" inert={collapsed}>
-          <VectorOverflowWarning slide={slide} theme={draft.theme} onSelect={onSelectOverflow} />
-        </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
-          key={component?.id ?? slide.id}
-          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

@@ -1,73 +0,0 @@
-import { useEffect, useId, useRef, useState } from "react";
-import type { CompositionSlide, CompositionDocument } from "../../composition/types.ts";
-import { componentInstanceLabel } from "../lib/model.ts";
-
-/** Measure rendered text, including nested SVG transforms, after fonts settle. */
-export function VectorOverflowWarning({ slide, theme, onSelect }: {
-  slide: CompositionSlide;
-  theme: CompositionDocument["theme"];
-  onSelect: (componentId: string, elementId?: string) => void;
-}) {
-  const [issues, setIssues] = useState<{ componentId: string; elementId?: string; text: string }[]>([]);
-  const id = useId();
-  const popover = useRef<HTMLDivElement>(null);
-  useEffect(() => { popover.current?.hidePopover(); }, [slide.id]);
-  useEffect(() => {
-    let cancelled = false;
-    let frame = 0;
-    function measure() {
-      frame = requestAnimationFrame(() => {
-        if (cancelled) return;
-        const overflow: typeof issues = [];
-        function add(text: Element) {
-          const componentId = text.closest<HTMLElement>("[data-component]")?.dataset.component;
-          if (componentId) overflow.push({ componentId, elementId: text.getAttribute("data-vector-element") ?? undefined, text: text.textContent?.trim().slice(0, 80) ?? "Text" });
-        }
-        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)) add(text);
-        });
-        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;
-            })) add(text);
-          });
-        });
-        setIssues(overflow);
-        if (!overflow.length) popover.current?.hidePopover();
-      });
-    }
-    void document.fonts.ready.then(measure);
-    document.fonts.addEventListener("loadingdone", measure);
-    return () => { cancelled = true; cancelAnimationFrame(frame); document.fonts.removeEventListener("loadingdone", measure); };
-  }, [slide, theme]);
-  return <>
-    <span className="sr-only" role="status">{issues.length ? `${issues.length} text overflow ${issues.length === 1 ? "warning" : "warnings"} on this page` : ""}</span>
-    <button type="button" className="overflow-trigger" popoverTarget={id} disabled={!issues.length}
-      aria-label={`${issues.length} text overflow warnings`} title="Text overflow warnings">
-      <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3 18 17H2ZM10 8v4m0 2v.5" /></svg>
-      <span>{issues.length}</span>
-    </button>
-    <div id={id} ref={popover} popover="auto" className="overflow-popover">
-      <strong>Text outside its frame</strong>
-      <p>Select an item to revise its text or size. Nothing was resized automatically.</p>
-      <ul>{issues.map(issue => <li key={`${issue.componentId}:${issue.elementId ?? "native"}`}>
-        <button type="button" onClick={() => { popover.current?.hidePopover(); onSelect(issue.componentId, issue.elementId); }}>
-          <strong>{componentInstanceLabel(slide.components, issue.componentId)}{issue.elementId ? ` · ${issue.elementId}` : ""}</strong>
-          <span>{issue.text}</span>
-        </button>
-      </li>)}</ul>
-    </div>
-  </>;
-}