konpeki 0.3.0 → 0.4.0

package/composition/types.ts

@@ -1,269 +0,0 @@
-import type { ChartTemplate, DiagramType } from "./visualizations.ts";
-export type { ChartTemplate, DiagramType } from "./visualizations.ts";
-
-export const compositionSchema = "konpeki-composition/v1" as const;
-export type CanvasSize = { width: number; height: number };
-export const canvasSize = { width: 1920, height: 1080 } as const;
-export const canvasPadding = {
-  top: 72,
-  right: 112,
-  bottom: 0,
-  left: 112,
-} as const;
-export const authoringModes = ["default", "dynamic"] as const;
-export type AuthoringMode = (typeof authoringModes)[number];
-export const themeIds = [
-  "plex",
-  "precision",
-  "editorial",
-  "blue-cyan",
-  "orange-coral",
-  "yellow",
-  "green",
-  "graphite",
-] as const;
-export type ThemeId = (typeof themeIds)[number];
-export const themeModes = ["paper", "night"] as const;
-export type ThemeMode = (typeof themeModes)[number];
-export const typographyIds = ["plex-sans", "noto-sans", "plex-serif", "hanken-grotesk"] as const;
-export type TypographyId = (typeof typographyIds)[number];
-export type Rect = { x: number; y: number; width: number; height: number };
-export type Alignment = "start" | "center" | "end";
-export type TitleStyle = "plain" | "prominent";
-export type BorderTreatment = "none" | "outline" | "filled";
-export type TextColor = "ink" | "muted" | "accent";
-export type TextLayout =
-  | "single"
-  | "two-column"
-  | "three-column"
-  | "two-plus-two"
-  | "four-column"
-  | "one-plus-three"
-  | "three-plus-one";
-export type TextPurpose = "narrative" | "comparison" | "emphasis";
-export type TextTreatment = "plain" | "subtle" | "strong";
-export type TextLogicalOrder =
-  | "none"
-  | "parallel"
-  | "progressive"
-  | "cyclical"
-  | "general-to-specific"
-  | "hierarchical";
-export type TextRole = "title" | "subtitle" | "body" | "caption" | "footnote";
-export type ColorScheme =
-  | "monochrome"
-  | "accent-with-muted-context"
-  | "categorical"
-  | "sequential"
-  | "status";
-export type Density = "sparse" | "standard";
-export type Emphasis = "none" | "primary" | "latest-series" | "exception";
-export const vectorElementKinds = [
-  "g",
-  "rect",
-  "circle",
-  "ellipse",
-  "line",
-  "polyline",
-  "polygon",
-  "path",
-  "text",
-  "tspan",
-] as const;
-export type VectorElementKind = (typeof vectorElementKinds)[number];
-export type VectorElement = {
-  id: string;
-  kind: VectorElementKind;
-  parentId?: string;
-  attributes: Record<string, string | number>;
-  text?: string;
-};
-type VisualBase = {
-  viewBox: { x: number; y: number; width: number; height: number };
-  description: string;
-  fit?: "contain" | "cover" | "stretch";
-};
-export type CustomVisual = VisualBase & (
-  | { format: "vector"; elements: VectorElement[] }
-  | { format: "svg"; source: string }
-);
-type ComponentBase = {
-  id: string;
-  preferredRect: Rect;
-  slotIds: string[];
-  intent?: string;
-  customVisual?: CustomVisual;
-};
-export type TextBlockComponent = ComponentBase & {
-  kind: "text-block";
-  content?: string;
-  textStyle?: {
-    size?: number;
-    weight?: 400 | 500 | 600;
-    lineHeight?: number;
-    color?: "ink" | "muted" | "accent";
-    font?: "heading" | "body";
-  };
-  appearance: {
-    role: TextRole;
-    alignment?: Alignment;
-    border?: BorderTreatment;
-    layout?: TextLayout;
-    orientation?: "horizontal" | "vertical";
-    purpose?: TextPurpose;
-    treatment?: TextTreatment;
-    logicalOrder?: TextLogicalOrder;
-    titleStyle?: TitleStyle;
-    rule?: "none" | "top" | "bottom";
-  };
-};
-type ChartAppearance = {
-  selection?: "auto" | "explicit";
-  border?: BorderTreatment;
-  colorScheme?: ColorScheme;
-  orientation?: "horizontal" | "vertical";
-  emphasis?: Emphasis;
-  density?: Density;
-  legend?: "none" | "top" | "right" | "bottom";
-};
-export type ChartComponent = ComponentBase & ({
-  kind: "chart";
-  appearance: ChartAppearance & { template: "sankey" };
-  topology?: ExplicitTopology;
-} | {
-  kind: "chart";
-  appearance: ChartAppearance & {
-    template: Exclude<ChartTemplate, "sankey">;
-  };
-  topology?: never;
-});
-export type ExplicitTopology = {
-  kind: "explicit";
-  nodes: {
-    id: string;
-    slotId: string;
-    visible?: boolean;
-    preferredRect?: Rect;
-    primitive?:
-      | {
-          kind: "shape";
-          shape: "rectangle" | "rounded-rectangle" | "circle" | "line";
-          color?: TextColor;
-          fill?: "none" | "solid" | "wash";
-        }
-      | {
-          kind: "icon";
-          name?: string;
-          style?: "outline" | "filled";
-          color?: TextColor;
-        };
-  }[];
-  edges: { from: string; to: string; label?: string }[];
-};
-export type DiagramComponent = ComponentBase & {
-  kind: "diagram";
-  appearance: {
-    type: DiagramType;
-    selection?: "auto" | "explicit";
-    border?: BorderTreatment;
-    colorScheme?: ColorScheme;
-    emphasis?: Emphasis;
-    density?: Density;
-  };
-  topology?: ExplicitTopology;
-};
-export type ImageComponent = ComponentBase & {
-  kind: "image";
-  appearance?: {
-    border?: BorderTreatment;
-    fit?: "cover" | "contain";
-  };
-};
-export type TableComponent = ComponentBase & {
-  kind: "table";
-  appearance?: {
-    header?: "none" | "row" | "column" | "both";
-    grid?: "none" | "rows" | "all";
-    border?: BorderTreatment;
-    colorScheme?: ColorScheme;
-    density?: Density;
-  };
-};
-export type CompositionComponent =
-  | TextBlockComponent
-  | ChartComponent
-  | DiagramComponent
-  | ImageComponent
-  | TableComponent;
-export const componentKinds = [
-  "text-block",
-  "chart",
-  "diagram",
-  "image",
-  "table",
-] as const satisfies readonly CompositionComponent["kind"][];
-export type ContentSlotRole =
-  | "takeaway"
-  | "body"
-  | "evidence"
-  | "comparison-item"
-  | "process-step"
-  | "entity"
-  | "qualification"
-  | "source"
-  | "image"
-  | "table";
-type ContentSlotBase = {
-  id: string;
-  label: string;
-  required: boolean;
-  instruction: string;
-};
-export type ContentSlot =
-  | (ContentSlotBase & {
-      role: Exclude<ContentSlotRole, "qualification" | "source">;
-    })
-  | (ContentSlotBase & { role: "qualification" | "source"; targets: string[] });
-export type ManipulationGroup = {
-  id: string;
-  label?: string;
-  childIds: string[];
-};
-export type ReadingOrderEntry =
-  { kind: "component"; id: string } | { kind: "group"; id: string };
-export type RelationshipEndpoint = { nodeId: string; slotId?: string };
-export type SemanticRelationship = {
-  id: string;
-  kind:
-    "flows-to" | "qualifies" | "compares-with" | "depends-on" | "connects-to";
-  direction: "forward" | "bidirectional" | "undirected";
-  from: RelationshipEndpoint;
-  to: RelationshipEndpoint;
-  label?: string;
-};
-export type CompositionSlide = {
-  id: string;
-  name: string;
-  canvas: CanvasSize;
-  innerPadding?: { top: number; right: number; bottom: number; left: number };
-  pageNumber?: {
-    style: "none" | "01" | "01/02";
-    color: TextColor;
-  };
-  audience: string;
-  question: string;
-  intendedViewingSize: "presentation" | "social" | "article" | "custom";
-  contentSlots: ContentSlot[];
-  components: CompositionComponent[];
-  groups: ManipulationGroup[];
-  readingOrder: ReadingOrderEntry[];
-  paintOrder: string[];
-  relationships: SemanticRelationship[];
-};
-export type CompositionDocument = {
-  schema: typeof compositionSchema;
-  title: string;
-  authoringMode?: AuthoringMode;
-  theme?: { id: ThemeId; mode: ThemeMode; typography?: TypographyId };
-  slides: CompositionSlide[];
-};

package/composition/validate.ts

@@ -1,226 +0,0 @@
-import { Ajv2020 } from "ajv/dist/2020.js";
-import { schema } from "./schema.ts";
-import {
-  type CompositionDocument,
-} from "./types.ts";
-import { vectorAttributeNames } from "./vector.ts";
-import { validThemeBinding } from "./theme-tokens.ts";
-
-export type ValidationIssue = { path: string; message: string };
-export type ValidationResult =
-  | { ok: true; document: CompositionDocument }
-  | { ok: false; issues: ValidationIssue[] };
-const structural = new Ajv2020({
-  allErrors: true,
-  strict: false,
-}).compile<CompositionDocument>(schema);
-export function validateComposition(input: unknown): ValidationResult {
-  if (!structural(input))
-    return {
-      ok: false,
-      issues: (structural.errors ?? []).map((error) => ({
-        path: error.instancePath,
-        message: error.message ?? "Invalid value",
-      })),
-    };
-  const candidate = input;
-  const issues: ValidationIssue[] = [];
-  const fail = (path: string, message: string) =>
-    issues.push({ path, message });
-  const unique = (ids: string[], path: string) => {
-    if (new Set(ids).size !== ids.length) fail(path, "IDs must be unique");
-  };
-  unique(
-    candidate.slides.map((slide) => slide.id),
-    "/slides",
-  );
-  candidate.slides.forEach((slide, slideIndex) => {
-    const base = `/slides/${slideIndex}`;
-    const padding = slide.innerPadding;
-    if (padding && (padding.left + padding.right >= slide.canvas.width || padding.top + padding.bottom >= slide.canvas.height))
-      fail(`${base}/innerPadding`, "Padding leaves no page content area");
-    const components = new Map(slide.components.map((item) => [item.id, item]));
-    const slots = new Set(slide.contentSlots.map((item) => item.id));
-    const groups = new Map(slide.groups.map((item) => [item.id, item]));
-    unique([...components.keys(), ...groups.keys()], `${base}/groups`);
-    unique(
-      slide.components.map((item) => item.id),
-      `${base}/components`,
-    );
-  unique(
-    slide.contentSlots.map((item) => item.id),
-    `${base}/contentSlots`,
-  );
-  unique(
-    slide.groups.map((item) => item.id),
-    `${base}/groups`,
-  );
-  unique(
-    slide.relationships.map((item) => item.id),
-    `${base}/relationships`,
-  );
-  const assigned: string[] = [];
-  for (const component of slide.components) {
-    const path = `${base}/components/${component.id}`;
-    const r = component.preferredRect;
-    if (r.x + r.width > slide.canvas.width || r.y + r.height > slide.canvas.height)
-      fail(path, "Rectangle exceeds canvas");
-    assigned.push(...component.slotIds);
-    for (const id of component.slotIds)
-      if (!slots.has(id)) fail(path, `Unknown slot: ${id}`);
-    if (component.customVisual) {
-      if (component.customVisual.format === "svg") {
-        const source = component.customVisual.source;
-        if (
-          /<script\b|<foreignObject\b|<\?xml-stylesheet\b|<!DOCTYPE\b|\son[a-z]+\s*=|(?:href|src)\s*=\s*["'](?!data:|#)|url\(\s*["']?(?!data:|#)/i.test(
-            source,
-          )
-        )
-          fail(path, "Custom SVG must be self-contained and cannot include scripts, foreign objects, event handlers, document declarations, or external resources");
-        const sourceViewBox = source
-          .match(/<svg\b[^>]*\bviewBox\s*=\s*(["'])([^"']+)\1/i)?.[2]
-          ?.trim()
-          .split(/[\s,]+/)
-          .map(Number);
-        const declaredViewBox = component.customVisual.viewBox;
-        if (
-          sourceViewBox?.length !== 4 ||
-          sourceViewBox.some((value) => !Number.isFinite(value)) ||
-          sourceViewBox[0] !== declaredViewBox.x ||
-          sourceViewBox[1] !== declaredViewBox.y ||
-          sourceViewBox[2] !== declaredViewBox.width ||
-          sourceViewBox[3] !== declaredViewBox.height
-        )
-          fail(path, "Custom SVG root viewBox must match the declared local viewport");
-      } else {
-        const known = new Set<string>();
-        const kinds = new Map(component.customVisual.elements.map((element) => [element.id, element.kind]));
-        for (const element of component.customVisual.elements) {
-          if (known.has(element.id)) fail(path, `Duplicate vector element ID: ${element.id}`);
-          if (element.parentId && !known.has(element.parentId))
-            fail(path, `Vector parent must precede its child: ${element.parentId}`);
-          const parentKind = element.parentId ? kinds.get(element.parentId) : undefined;
-          if (element.parentId && parentKind !== "g" &&
-              !(element.kind === "tspan" && (parentKind === "text" || parentKind === "tspan")))
-            fail(path, "Vector children require a group or a text/tspan parent for tspans");
-          if (element.kind === "tspan" && parentKind !== "text" && parentKind !== "tspan")
-            fail(path, "Vector tspans require a text or tspan parent");
-          if (element.text !== undefined && element.kind !== "text" && element.kind !== "tspan")
-            fail(path, "Only vector text and tspans may contain text");
-          known.add(element.id);
-          for (const [name, value] of Object.entries(element.attributes)) {
-            if (!validThemeBinding(name, value))
-              fail(path, `Invalid theme binding for vector attribute: ${name}`);
-            if (!vectorAttributeNames.has(name))
-              fail(path, `Unsupported vector attribute: ${name}`);
-            if (typeof value === "string" && /url\s*\(|javascript:|data:/i.test(value))
-              fail(path, `Unsafe vector attribute value: ${name}`);
-          }
-        }
-      }
-    }
-    if (component.kind === "chart" && component.topology && component.appearance.template !== "sankey")
-      fail(path, "Only Sankey charts may define topology");
-    if ((component.kind === "diagram" || component.kind === "chart") && component.topology) {
-      const { nodes, edges } = component.topology;
-      unique(
-        nodes.map((node) => node.id),
-        path,
-      );
-      unique(
-        nodes.map((node) => node.slotId),
-        path,
-      );
-      unique(
-        edges.map((edge) =>
-          JSON.stringify([edge.from, edge.to, edge.label ?? ""]),
-        ),
-        path,
-      );
-      const known = new Set(nodes.map((node) => node.id));
-      if (nodes.length !== component.slotIds.length)
-        fail(path, "Topology must represent every component slot");
-      for (const node of nodes) {
-        if (!component.slotIds.includes(node.slotId))
-          fail(path, "Topology slot must belong to its component");
-        const nodeRect = node.preferredRect;
-        if (
-          nodeRect &&
-          (nodeRect.x < r.x ||
-            nodeRect.y < r.y ||
-            nodeRect.x + nodeRect.width > r.x + r.width ||
-            nodeRect.y + nodeRect.height > r.y + r.height)
-        )
-          fail(path, "Topology node rectangle must stay within its component");
-      }
-      for (const edge of edges) {
-        if (!known.has(edge.from) || !known.has(edge.to))
-          fail(path, "Unknown topology endpoint");
-        if (edge.from === edge.to)
-          fail(path, "Topology self-edges are not supported");
-      }
-    }
-  }
-  for (const id of slots)
-    if (!assigned.includes(id))
-      fail(`${base}/contentSlots`, `Unassigned content slot: ${id}`);
-  const grouped: string[] = [];
-  for (const group of slide.groups)
-    for (const id of group.childIds) {
-      grouped.push(id);
-      if (!components.has(id))
-        fail(`${base}/groups`, "Groups may contain only components");
-    }
-  unique(grouped, `${base}/groups`);
-  const reading = slide.readingOrder.flatMap((entry) => {
-    if (entry.kind === "component") {
-      if (!components.has(entry.id))
-        fail(`${base}/readingOrder`, "Unknown component");
-      return [entry.id];
-    }
-    const group = groups.get(entry.id);
-    if (!group) fail(`${base}/readingOrder`, "Unknown group");
-    return group?.childIds ?? [];
-  });
-  for (const [path, order] of [
-    ["readingOrder", reading],
-    ["paintOrder", slide.paintOrder],
-  ] as const) {
-    if (
-      order.length !== components.size ||
-      new Set(order).size !== components.size ||
-      order.some((id) => !components.has(id))
-    )
-      fail(`${base}/${path}`, "Must contain every component exactly once");
-  }
-  for (const slot of slide.contentSlots)
-    if ("targets" in slot)
-      for (const id of slot.targets) {
-        if (!components.has(id) && !slots.has(id))
-          fail(`${base}/contentSlots`, "Unknown qualification/source target");
-      }
-  for (const relationship of slide.relationships)
-    for (const endpoint of [relationship.from, relationship.to]) {
-      const component = components.get(endpoint.nodeId);
-      if (!component) fail(`${base}/relationships`, "Unknown relationship node");
-      if (endpoint.slotId && !component?.slotIds.includes(endpoint.slotId))
-        fail(
-          `${base}/relationships`,
-          "Relationship slot must belong to its endpoint",
-        );
-    }
-  });
-  return issues.length
-    ? { ok: false, issues }
-    : { ok: true, document: input };
-}
-export function assertComposition(input: unknown): CompositionDocument {
-  const result = validateComposition(input);
-  if (!result.ok)
-    throw new Error(
-      result.issues
-        .map((issue) => `${issue.path}: ${issue.message}`)
-        .join("\n"),
-    );
-  return result.document;
-}

package/composition/vector.ts

@@ -1,143 +0,0 @@
-import { DOMParser } from "@xmldom/xmldom";
-import {
-  vectorElementKinds,
-  type VectorElement,
-  type VectorElementKind,
-} from "./types.ts";
-
-export const vectorAttributeNames = new Set([
-  "x", "y", "dx", "dy", "x1", "y1", "x2", "y2", "width", "height", "rx", "ry",
-  "cx", "cy", "r", "d", "points", "transform", "fill", "fill-opacity",
-  "stroke", "stroke-width", "stroke-opacity", "stroke-linecap", "stroke-linejoin",
-  "stroke-dasharray", "opacity", "font-family", "font-size", "font-weight",
-  "font-style", "text-anchor", "dominant-baseline", "vector-effect",
-]);
-
-/** Remove a subtree, never leaving orphaned descendants. */
-export function removeVectorElement(elements: VectorElement[], id: string) {
-  const removed = new Set([id]);
-  for (const element of elements) {
-    if (element.parentId && removed.has(element.parentId)) removed.add(element.id);
-  }
-  return elements.filter((element) => !removed.has(element.id));
-}
-
-/** Swap sibling subtrees while retaining parent-before-child serialization. */
-export function moveVectorElement(elements: VectorElement[], id: string, direction: -1 | 1) {
-  const selected = elements.find((element) => element.id === id);
-  if (!selected) return elements;
-  const children = new Map<string | undefined, VectorElement[]>();
-  for (const element of elements) {
-    const peers = children.get(element.parentId) ?? [];
-    peers.push(element);
-    children.set(element.parentId, peers);
-  }
-  const siblings = children.get(selected.parentId)!;
-  const index = siblings.indexOf(selected);
-  const other = siblings[index + direction];
-  if (!other) return elements;
-  [siblings[index], siblings[index + direction]] = [other, selected];
-  const result: VectorElement[] = [];
-  function visit(parentId?: string) {
-    for (const child of children.get(parentId) ?? []) {
-      result.push(child);
-      visit(child.id);
-    }
-  }
-  visit();
-  return result;
-}
-
-function uniqueId(preferred: string, used: Set<string>, index: number) {
-  const base = preferred.trim().replace(/[^a-zA-Z0-9_-]+/g, "-") || `vector-${index}`;
-  if (!used.has(base)) return base;
-  let suffix = 2;
-  while (used.has(`${base}-${suffix}`)) suffix += 1;
-  return `${base}-${suffix}`;
-}
-
-function attributesOf(element: Element) {
-  const attributes: Record<string, string | number> = {};
-  for (let index = 0; index < element.attributes.length; index += 1) {
-    const attribute = element.attributes.item(index);
-    if (!attribute || attribute.name === "id") continue;
-    if (attribute.name === "style") {
-      for (const declaration of attribute.value.split(";")) {
-        const separator = declaration.indexOf(":");
-        if (separator < 0) continue;
-        const name = declaration.slice(0, separator).trim();
-        const value = declaration.slice(separator + 1).trim();
-        if (vectorAttributeNames.has(name) && value && !/url\s*\(/i.test(value))
-          attributes[name] = value;
-      }
-      continue;
-    }
-    if (vectorAttributeNames.has(attribute.name)) attributes[attribute.name] = attribute.value;
-  }
-  return attributes;
-}
-
-export function parseEditableSvg(source: string) {
-  const document = new DOMParser().parseFromString(source, "image/svg+xml");
-  const root = document.documentElement;
-  if (!root || root.localName !== "svg") throw new Error("The visual must have an SVG root.");
-  const values = root.getAttribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
-  if (!values || values.length !== 4 || values.some((value) => !Number.isFinite(value)))
-    throw new Error("The SVG root needs a numeric viewBox.");
-  const [x, y, width, height] = values;
-  if (width <= 0 || height <= 0) throw new Error("The SVG viewBox must be positive.");
-
-  const elements: VectorElement[] = [];
-  const used = new Set<string>();
-  function visit(element: Element, parentId?: string) {
-    const kind = element.localName as VectorElementKind;
-    if (!vectorElementKinds.includes(kind))
-      throw new Error(`Unsupported editable SVG element: ${element.localName}.`);
-    const id = uniqueId(element.getAttribute("id") ?? "", used, elements.length + 1);
-    used.add(id);
-    const mixedText = (kind === "text" || kind === "tspan") &&
-      Array.from({ length: element.childNodes.length }, (_, index) =>
-        element.childNodes.item(index),
-      ).some((node) => node?.nodeType === 1);
-    const text = [...Array.from({ length: element.childNodes.length }, (_, index) =>
-      element.childNodes.item(index),
-    )]
-      .filter((node) => node?.nodeType === 3)
-      .map((node) => node?.nodeValue ?? "")
-      .join("");
-    elements.push({
-      id,
-      kind,
-      ...(parentId ? { parentId } : {}),
-      attributes: attributesOf(element),
-      ...(!mixedText && text && (kind === "text" || kind === "tspan") ? { text } : {}),
-    });
-    for (let index = 0; index < element.childNodes.length; index += 1) {
-      const child = element.childNodes.item(index);
-      if (mixedText && child?.nodeType === 3 && child.nodeValue) {
-        const textId = uniqueId("", used, elements.length + 1);
-        used.add(textId);
-        elements.push({ id: textId, kind: "tspan", parentId: id, attributes: {}, text: child.nodeValue });
-      }
-      if (child?.nodeType !== 1) continue;
-      visit(child as unknown as Element, id);
-    }
-  }
-
-  const rootAttributes = attributesOf(root as unknown as Element);
-  let parentId: string | undefined;
-  if (Object.keys(rootAttributes).length) {
-    parentId = "vector-root";
-    used.add(parentId);
-    elements.push({ id: parentId, kind: "g", attributes: rootAttributes });
-  }
-  for (let index = 0; index < root.childNodes.length; index += 1) {
-    const child = root.childNodes.item(index);
-    if (child?.nodeType !== 1) continue;
-    const name = (child as unknown as Element).localName;
-    if (name === "title" || name === "desc") continue;
-    visit(child as unknown as Element, parentId);
-  }
-  if (!elements.length) throw new Error("The SVG contains no editable elements.");
-  return { viewBox: { x, y, width, height }, elements };
-}