konpeki 0.1.0

package/src/lib/examples.ts

@@ -0,0 +1,42 @@
+import { validateComposition } from "../../composition/validate.ts";
+import { parseEditableSvg } from "../../composition/vector.ts";
+import { initialDraft, type Draft } from "./model.ts";
+import migratedReactPage from "./examples/react-page-migration.json" with { type: "json" };
+import introducingKonpeki from "../../slides/introducing-konpeki/composition.json" with { type: "json" };
+
+const customVisualSource = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 530"><rect width="1080" height="530" rx="28" fill="#F5F7F8"/><text x="54" y="66" font-family="Arial,sans-serif" font-size="24" font-weight="700" fill="#13242C">A shared canvas keeps intent and output together</text><line x1="253" y1="272" x2="407" y2="272" stroke="#007BBB" stroke-width="8"/><path d="M397 258L425 272 397 286Z" fill="#007BBB"/><line x1="672" y1="272" x2="826" y2="272" stroke="#007BBB" stroke-width="8"/><path d="M816 258L844 272 816 286Z" fill="#007BBB"/><g font-family="Arial,sans-serif" text-anchor="middle"><rect x="54" y="152" width="200" height="240" rx="24" fill="#FFFFFF" stroke="#CAD4D8" stroke-width="3"/><circle cx="154" cy="224" r="35" fill="#D9EDF5"/><path d="M135 224h38M154 205v38" stroke="#007BBB" stroke-width="6"/><text x="154" y="302" font-size="25" font-weight="700" fill="#13242C">Draft</text><text x="154" y="338" font-size="18" fill="#52666F">Human places intent</text><rect x="425" y="152" width="248" height="240" rx="24" fill="#007BBB"/><path d="M492 220h112v82H492z" fill="none" stroke="#FFFFFF" stroke-width="6"/><path d="M514 249h67M514 272h45" stroke="#FFFFFF" stroke-width="5"/><text x="549" y="334" font-size="25" font-weight="700" fill="#FFFFFF">Agent renders</text><text x="549" y="367" font-size="18" fill="#E4F2F7">SVG stays inside</text><rect x="844" y="152" width="182" height="240" rx="24" fill="#FFFFFF" stroke="#CAD4D8" stroke-width="3"/><path d="M900 217a45 45 0 1 1-4 62" fill="none" stroke="#007BBB" stroke-width="7"/><path d="M887 274l11 23 18-18" fill="#007BBB"/><text x="935" y="327" font-size="25" font-weight="700" fill="#13242C">Revise</text><text x="935" y="360" font-size="18" fill="#52666F">One document</text></g><text x="54" y="475" font-family="Arial,sans-serif" font-size="17" fill="#52666F">Outer geometry remains editable; vector elements own this interior.</text></svg>`;
+
+export function exampleDraft(name: string | null): Draft | undefined {
+  if (name === "introducing-konpeki") {
+    const validation = validateComposition(introducingKonpeki);
+    if (!validation.ok) throw new Error("Invalid Konpeki introduction deck");
+    return validation.document;
+  }
+  if (name === "react-page-migration") {
+    const validation = validateComposition(migratedReactPage);
+    if (!validation.ok) throw new Error("Invalid migrated React page example");
+    return validation.document;
+  }
+  if (name !== "custom-visual") return undefined;
+  const draft = initialDraft();
+  draft.title = "Custom visual round-trip";
+  draft.slides[0].name = "Agent visual";
+  draft.slides[0].components[0].intent = "Editable output, not a flattened render";
+  const visual = draft.slides[0].components[1];
+  visual.intent = "Draft to agent render to revision workflow.";
+  const parsed = parseEditableSvg(customVisualSource);
+  visual.customVisual = {
+    format: "vector",
+    elements: parsed.elements,
+    viewBox: parsed.viewBox,
+    description: "Draft to agent render to revision workflow",
+    fit: "contain",
+  };
+  draft.slides[0].components[2].intent =
+    "Slide structure stays semantic; vector elements remain individually editable.";
+  draft.slides[0].components[3].intent =
+    "Double-click the diagram, then select a line, shape, path, or text element to revise it.";
+  const validation = validateComposition(draft);
+  if (!validation.ok) throw new Error("Invalid bundled example composition");
+  return validation.document;
+}

package/src/lib/export-png.ts

@@ -0,0 +1,101 @@
+import type { CanvasSize } from "../../composition/types.ts";
+
+function dataURL(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error("Could not embed export resources."));
+    reader.readAsDataURL(blob);
+  });
+}
+
+// Serialize the actual renderer, not a second approximation of the composition.
+// Resolve computed values (including container units) and embed fonts so the SVG
+// image has no external resources when rasterized by the browser.
+export async function exportPagePNG(
+  source: HTMLElement,
+  size: CanvasSize,
+): Promise<Blob> {
+  await document.fonts.ready;
+  await Promise.all(
+    Array.from(source.querySelectorAll("img"), (image) => image.decode()),
+  );
+  const clone = source.cloneNode(true) as HTMLElement;
+  const originals = [source, ...source.querySelectorAll("*")];
+  const copies = [clone, ...clone.querySelectorAll("*")];
+  originals.forEach((node, index) => {
+    const target = copies[index];
+    if (!(target instanceof HTMLElement || target instanceof SVGElement)) return;
+    const computed = getComputedStyle(node);
+    for (const key of computed)
+      target.style.setProperty(key, computed.getPropertyValue(key));
+    target.style.animation = "none";
+    target.style.transition = "none";
+    target.style.outline = "none";
+    if (node === source || node.classList.contains("slide-component"))
+      target.style.boxShadow = "none";
+    // Table preview cells use generated bars. Materialize these decorations too.
+    if (target instanceof HTMLElement)
+      for (const pseudo of ["::before", "::after"]) {
+        const decoration = getComputedStyle(node, pseudo);
+        if (decoration.content !== '""') continue;
+        const span = document.createElement("span");
+        for (const key of decoration)
+          span.style.setProperty(key, decoration.getPropertyValue(key));
+        if (pseudo === "::before") target.prepend(span);
+        else target.append(span);
+      }
+  });
+  clone
+    .querySelectorAll(
+      ".resize-handle, .guide, .vector-handles, .inline-intent-editor",
+    )
+    .forEach((node) => node.remove());
+  const rect = source.getBoundingClientRect();
+  clone.style.width = `${rect.width}px`;
+  clone.style.height = `${rect.height}px`;
+  clone.style.margin = "0";
+  clone.style.overflow = "hidden";
+  const fontRules = Array.from(document.styleSheets).flatMap((sheet) =>
+    Array.from(sheet.cssRules).filter(
+      (rule): rule is CSSFontFaceRule => rule instanceof CSSFontFaceRule,
+    ),
+  );
+  const fontCSS = await Promise.all(
+    fontRules.map(async (rule) => {
+      let css = rule.cssText;
+      for (const match of css.matchAll(/url\(["']?([^"')]+)["']?\)/g)) {
+        const response = await fetch(
+          new URL(match[1], rule.parentStyleSheet?.href ?? document.baseURI),
+        );
+        if (!response.ok) throw new Error("Could not load export font.");
+        css = css.replace(
+          match[0],
+          `url("${await dataURL(await response.blob())}")`,
+        );
+      }
+      return css;
+    }),
+  );
+  const style = document.createElement("style");
+  style.textContent = fontCSS.join("\n");
+  clone.prepend(style);
+  const markup = new XMLSerializer().serializeToString(clone);
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size.width}" height="${size.height}" viewBox="0 0 ${rect.width} ${rect.height}"><foreignObject width="100%" height="100%">${markup}</foreignObject></svg>`;
+  const image = new Image();
+  image.src = await dataURL(new Blob([svg], { type: "image/svg+xml" }));
+  await image.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = size.width;
+  canvas.height = size.height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("PNG export is unavailable in this browser.");
+  context.drawImage(image, 0, 0);
+  return new Promise((resolve, reject) =>
+    canvas.toBlob(
+      (blob) =>
+        blob ? resolve(blob) : reject(new Error("PNG encoding failed.")),
+      "image/png",
+    ),
+  );
+}

package/src/lib/file-session.ts

@@ -0,0 +1,74 @@
+import type { CompositionDocument } from "../../composition/types.ts";
+
+export type FileSessionDocument = {
+  document: CompositionDocument;
+  revision: string;
+  name: string;
+};
+
+export class FileSessionError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+    readonly revision?: string,
+  ) {
+    super(message);
+  }
+}
+
+export function fileSessionToken() {
+  return new URLSearchParams(window.location.search).get("session");
+}
+
+async function request<T>(
+  token: string,
+  path = "",
+  init?: RequestInit,
+): Promise<T> {
+  const response = await fetch(`/__konpeki/session${path}`, {
+    ...init,
+    headers: {
+      ...init?.headers,
+      "x-konpeki-session": token,
+      ...(init?.body ? { "content-type": "application/json" } : {}),
+    },
+  });
+  const body = await response.json() as { error?: string; revision?: string } & T;
+  if (!response.ok)
+    throw new FileSessionError(
+      body.error || "The local Konpeki service could not complete the request.",
+      response.status,
+      body.revision,
+    );
+  return body;
+}
+
+export function loadFileSession(token: string) {
+  return request<FileSessionDocument>(token);
+}
+
+export function saveFileSession(
+  token: string,
+  revision: string,
+  document: CompositionDocument,
+) {
+  return request<{ revision: string }>(token, "", {
+    method: "PUT",
+    body: JSON.stringify({ revision, document }),
+  });
+}
+
+export function sendBuildRequest(
+  token: string,
+  requestBody: {
+    revision: string;
+    instruction: string;
+    slideId: string;
+    componentId?: string;
+  },
+) {
+  return request<{ ok: true }>(token, "/build", {
+    method: "POST",
+    body: JSON.stringify(requestBody),
+  });
+}

package/src/lib/history.ts

@@ -0,0 +1,53 @@
+export type History<T> = {
+  past: T[];
+  present: T;
+  future: T[];
+  mergeKey?: string;
+};
+
+const historyLimit = 100;
+
+export function createHistory<T>(present: T): History<T> {
+  return { past: [], present, future: [] };
+}
+
+export function commitHistory<T>(
+  history: History<T>,
+  present: T,
+  mergeKey?: string,
+): History<T> {
+  if (Object.is(history.present, present)) return history;
+  const merging = mergeKey !== undefined && mergeKey === history.mergeKey;
+  return {
+    past: merging
+      ? history.past
+      : [...history.past, history.present].slice(-historyLimit),
+    present,
+    future: [],
+    ...(mergeKey ? { mergeKey } : {}),
+  };
+}
+
+export function finishHistoryEdit<T>(history: History<T>): History<T> {
+  return history.mergeKey ? { ...history, mergeKey: undefined } : history;
+}
+
+export function undoHistory<T>(history: History<T>): History<T> {
+  if (!history.past.length) return finishHistoryEdit(history);
+  const present = history.past.at(-1)!;
+  return {
+    past: history.past.slice(0, -1),
+    present,
+    future: [history.present, ...history.future],
+  };
+}
+
+export function redoHistory<T>(history: History<T>): History<T> {
+  if (!history.future.length) return finishHistoryEdit(history);
+  const [present, ...future] = history.future;
+  return {
+    past: [...history.past, history.present].slice(-historyLimit),
+    present,
+    future,
+  };
+}

package/src/lib/model.ts

@@ -0,0 +1,188 @@
+import {
+  canvasPadding,
+  canvasSize,
+  type CanvasSize,
+  type CompositionComponent,
+  type CompositionSlide,
+  type Rect,
+} from "../../composition/types.ts";
+import { componentLabels } from "../../composition/document.ts";
+
+export * from "../../composition/document.ts";
+
+export type Guide = { axis: "x" | "y"; value: number };
+
+export function componentInstanceLabel(
+  components: CompositionComponent[],
+  id: string,
+) {
+  const component = components.find((item) => item.id === id);
+  if (!component) return id;
+  const peers = components.filter((item) => item.kind === component.kind);
+  if (peers.length === 1) return componentLabels[component.kind];
+  return `${componentLabels[component.kind]} ${peers.indexOf(component) + 1}`;
+}
+
+export function clamp(value: number, minimum: number, maximum: number) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function alignmentTargets(
+  others: Rect[],
+  size: CanvasSize,
+  padding: CompositionSlide["innerPadding"] = canvasPadding,
+) {
+  return {
+    x: [
+      0,
+      padding?.left ?? 0,
+      size.width / 2,
+      size.width - (padding?.right ?? 0),
+      size.width,
+      ...others.flatMap((rect) => [
+        rect.x,
+        rect.x + rect.width / 2,
+        rect.x + rect.width,
+      ]),
+    ],
+    y: [
+      0,
+      padding?.top ?? 0,
+      size.height / 2,
+      size.height - (padding?.bottom ?? 0),
+      size.height,
+      ...others.flatMap((rect) => [
+        rect.y,
+        rect.y + rect.height / 2,
+        rect.y + rect.height,
+      ]),
+    ],
+  };
+}
+
+function closest(points: number[], targets: number[], threshold: number) {
+  let match: { delta: number; target: number } | undefined;
+  for (const point of points)
+    for (const target of targets) {
+      const delta = target - point;
+      if (
+        Math.abs(delta) <= threshold &&
+        (!match || Math.abs(delta) < Math.abs(match.delta))
+      )
+        match = { delta, target };
+    }
+  return match;
+}
+
+export function snapRect(
+  rect: Rect,
+  others: Rect[],
+  threshold = 14,
+  bounds: CanvasSize = canvasSize,
+  padding?: CompositionSlide["innerPadding"],
+): { rect: Rect; guides: Guide[] } {
+  const result = {
+    ...rect,
+    x: clamp(rect.x, 0, bounds.width - rect.width),
+    y: clamp(rect.y, 0, bounds.height - rect.height),
+  };
+  const targets = alignmentTargets(others, bounds, padding);
+  const guides: Guide[] = [];
+  for (const [axis, size, limit] of [
+    ["x", "width", bounds.width],
+    ["y", "height", bounds.height],
+  ] as const) {
+    const points = [
+      result[axis],
+      result[axis] + result[size] / 2,
+      result[axis] + result[size],
+    ];
+    const match =
+      result[axis] <= threshold
+        ? { delta: -result[axis], target: 0 }
+        : limit - result[axis] - result[size] <= threshold
+          ? {
+              delta: limit - result[axis] - result[size],
+              target: limit,
+            }
+          : closest(points, targets[axis], threshold);
+    if (
+      match &&
+      result[axis] + match.delta >= 0 &&
+      result[axis] + match.delta + result[size] <= limit
+    ) {
+      result[axis] += match.delta;
+      guides.push({ axis, value: match.target });
+    }
+  }
+  return { rect: result, guides };
+}
+
+export function snapResizeRect(
+  rect: Rect,
+  others: Rect[],
+  threshold = 14,
+  edges: { left?: boolean; top?: boolean; right?: boolean; bottom?: boolean } = {
+    right: true,
+    bottom: true,
+  },
+  bounds: CanvasSize = canvasSize,
+  padding?: CompositionSlide["innerPadding"],
+): { rect: Rect; guides: Guide[] } {
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  const result = { ...rect };
+  if (edges.left) {
+    const minimum = Math.min(180, right);
+    result.x = clamp(rect.x, 0, right - minimum);
+    result.width = right - result.x;
+  } else {
+    result.width = clamp(
+      rect.width,
+      Math.min(180, bounds.width - rect.x),
+      bounds.width - rect.x,
+    );
+  }
+  if (edges.top) {
+    const minimum = Math.min(72, bottom);
+    result.y = clamp(rect.y, 0, bottom - minimum);
+    result.height = bottom - result.y;
+  } else {
+    result.height = clamp(
+      rect.height,
+      Math.min(72, bounds.height - rect.y),
+      bounds.height - rect.y,
+    );
+  }
+  const targets = alignmentTargets(others, bounds, padding);
+  const guides: Guide[] = [];
+  for (const [axis, size, configuredMinimum, limit, leading] of [
+    ["x", "width", 180, bounds.width, Boolean(edges.left)],
+    ["y", "height", 72, bounds.height, Boolean(edges.top)],
+  ] as const) {
+    const point = leading ? result[axis] : result[axis] + result[size];
+    const minimum = leading
+      ? Math.min(configuredMinimum, point + result[size])
+      : configuredMinimum;
+    const match = closest(
+      [point],
+      targets[axis].filter((target) =>
+        leading
+          ? target >= 0 && target <= point + result[size] - minimum
+          : target >= result[axis] + minimum && target <= limit,
+      ),
+      threshold,
+    );
+    if (match) {
+      if (leading) {
+        const trailing = result[axis] + result[size];
+        result[axis] = match.target;
+        result[size] = trailing - match.target;
+      } else {
+        result[size] = match.target - result[axis];
+      }
+      guides.push({ axis, value: match.target });
+    }
+  }
+  return { rect: result, guides };
+}

package/src/lib/page-size.ts

@@ -0,0 +1,24 @@
+import type { CanvasSize, CompositionSlide } from "../../composition/types.ts";
+
+export const pagePresets = [
+  { name: "Presentation", width: 1920, height: 1080, destination: "presentation" },
+  { name: "Square post", width: 1080, height: 1080, destination: "social" },
+  { name: "Portrait post", width: 1080, height: 1350, destination: "social" },
+  { name: "Link preview / OG", width: 1200, height: 630, destination: "social" },
+  { name: "Article header", width: 1600, height: 600, destination: "article" },
+] as const;
+
+export function pageSizeIssue(slide: CompositionSlide, size: CanvasSize): string | undefined {
+  if (![size.width, size.height].every((value) => Number.isInteger(value) && value >= 256 && value <= 4096))
+    return "Use whole pixels from 256 to 4096 for each dimension.";
+  if (slide.components.some(({ preferredRect: r }) => r.x + r.width > size.width || r.y + r.height > size.height))
+    return "Existing content would fall outside this page. Move or resize it first, or ask your agent to adapt the composition. Nothing has changed.";
+  const p = slide.innerPadding;
+  if (p && (p.left + p.right >= size.width || p.top + p.bottom >= size.height))
+    return "The existing content margins do not fit this size. Ask your agent to adapt the margins.";
+}
+
+export function resizePage(slide: CompositionSlide, size: CanvasSize, destination: CompositionSlide["intendedViewingSize"] = "custom"): CompositionSlide {
+  if (pageSizeIssue(slide, size)) return slide;
+  return { ...slide, canvas: { width: size.width, height: size.height }, intendedViewingSize: destination };
+}

package/src/lib/presentation.ts

@@ -0,0 +1,17 @@
+export type PresentationAction = number | "exit" | undefined;
+
+export function presentationAction(
+  key: string,
+  current: number,
+  slideCount: number,
+  interactiveTarget = false,
+): PresentationAction {
+  if (interactiveTarget) return undefined;
+  if (key === "Escape") return "exit";
+  if (key === "Home") return 0;
+  if (key === "End") return Math.max(0, slideCount - 1);
+  if (["ArrowRight", "PageDown", " "].includes(key))
+    return Math.min(slideCount - 1, current + 1);
+  if (["ArrowLeft", "PageUp"].includes(key)) return Math.max(0, current - 1);
+  return undefined;
+}

package/src/lib/storage.ts

@@ -0,0 +1,43 @@
+import {
+  initialDraft,
+  parseStoredDraft,
+  serializeDraft,
+  type Draft,
+} from "./model.ts";
+export const storageKey = "konpeki-composer/v1";
+export type LoadedDraft = {
+  draft: Draft;
+  storageBlocked: boolean;
+  error?: string;
+};
+export function loadDraft(): LoadedDraft {
+  try {
+    const saved = localStorage.getItem(storageKey);
+    if (saved === null) return { draft: initialDraft(true), storageBlocked: false };
+    const result = parseStoredDraft(saved);
+    return result.ok
+      ? { draft: result.draft, storageBlocked: false }
+      : {
+          draft: initialDraft(true),
+          storageBlocked: true,
+          error:
+            "Saved data could not be read. It has not been changed. Reset saved draft to recover.",
+        };
+  } catch {
+    return {
+      draft: initialDraft(true),
+      storageBlocked: true,
+      error:
+        "Storage is unavailable. You can still export your work; reset to retry saving.",
+    };
+  }
+}
+export function persistDraft(draft: Draft) {
+  const value = serializeDraft(draft);
+  if (!parseStoredDraft(value).ok)
+    throw new Error("Invalid draft cannot be saved.");
+  localStorage.setItem(storageKey, value);
+}
+export function clearStoredDraft() {
+  localStorage.removeItem(storageKey);
+}

package/src/lib/theme.ts

@@ -0,0 +1,25 @@
+import {
+  resolvePalette,
+  type PaletteMode,
+  type PaletteName,
+} from "../../design/palettes/index.ts";
+import type { ThemeId } from "../../composition/types.ts";
+
+const themeLabels: Record<ThemeId, PaletteName> = {
+  plex: "Plex",
+  precision: "Precision",
+  editorial: "Editorial",
+  "blue-cyan": "Blue–cyan",
+  "orange-coral": "Orange–coral",
+  yellow: "Yellow",
+  green: "Green",
+  graphite: "Graphite",
+};
+
+export function themeLabel(id: ThemeId) {
+  return themeLabels[id];
+}
+
+export function composerPalette(id: ThemeId, mode: PaletteMode) {
+  return resolvePalette(themeLabel(id), mode);
+}