konpeki 0.1.0

package/composition/schema.ts

@@ -0,0 +1,435 @@
+import {
+  authoringModes,
+  componentKinds,
+  compositionSchema,
+  themeIds,
+  themeModes,
+  vectorElementKinds,
+} from "./types.ts";
+import { chartTemplates, diagramTypes } from "./visualizations.ts";
+import { tokensForAttribute } from "./theme-tokens.ts";
+
+const literalVectorAttribute = { oneOf: [{ type: "string", maxLength: 10000, pattern: "^(?!theme:)" }, { type: "number" }] };
+
+// Shared constrained vocabulary for schema validation and canvas controls.
+const alignment = ["start", "center", "end"];
+const titleStyle = ["plain", "prominent"];
+const border = ["none", "outline", "filled"];
+const colorScheme = [
+  "monochrome",
+  "accent-with-muted-context",
+  "categorical",
+  "sequential",
+  "status",
+];
+const emphasis = ["none", "primary", "latest-series", "exception"];
+const density = ["sparse", "standard"];
+export const tableStyles = [
+  "header-rule",
+  "top-header-bottom",
+  "row-rules",
+  "full-grid",
+] as const;
+export type TableStyle = (typeof tableStyles)[number];
+
+export function tableAppearanceForStyle(style: TableStyle) {
+  if (style === "top-header-bottom")
+    return {
+      header: "both" as const,
+      grid: "none" as const,
+      border: "none" as const,
+    };
+  if (style === "row-rules")
+    return {
+      header: "row" as const,
+      grid: "rows" as const,
+      border: "none" as const,
+    };
+  if (style === "full-grid")
+    return {
+      header: "row" as const,
+      grid: "all" as const,
+      border: "none" as const,
+    };
+  return {
+    header: "row" as const,
+    grid: "none" as const,
+    border: "none" as const,
+  };
+}
+
+export function tableStyleForAppearance(appearance?: {
+  header?: string;
+  grid?: string;
+  border?: string;
+}): TableStyle {
+  if (appearance?.grid === "all" || appearance?.header === "column")
+    return "full-grid";
+  if (appearance?.grid === "rows") return "row-rules";
+  if (appearance?.header === "both" || appearance?.border === "outline")
+    return "top-header-bottom";
+  return "header-rule";
+}
+
+export const appearanceOptions: Record<
+  (typeof componentKinds)[number],
+  Record<string, readonly string[]>
+> = {
+  "text-block": {
+    role: ["title", "subtitle", "body", "caption", "footnote"],
+    alignment,
+    border,
+    layout: [
+      "single",
+      "two-column",
+      "three-column",
+      "two-plus-two",
+      "four-column",
+      "one-plus-three",
+      "three-plus-one",
+    ],
+    orientation: ["horizontal", "vertical"],
+    purpose: ["narrative", "comparison", "emphasis"],
+    treatment: ["plain", "subtle", "strong"],
+    logicalOrder: [
+      "none",
+      "parallel",
+      "progressive",
+      "cyclical",
+      "general-to-specific",
+      "hierarchical",
+    ],
+    titleStyle,
+    rule: ["none", "top", "bottom"],
+  },
+  chart: {
+    template: chartTemplates,
+    selection: ["auto", "explicit"],
+    border,
+    colorScheme,
+    orientation: ["horizontal", "vertical"],
+    emphasis,
+    density,
+    legend: ["none", "top", "right", "bottom"],
+  },
+  diagram: {
+    type: diagramTypes,
+    selection: ["auto", "explicit"],
+    border,
+    colorScheme,
+    emphasis,
+    density,
+  },
+  image: { border, fit: ["cover", "contain"] },
+  table: {
+    header: ["row", "none", "column", "both"],
+    grid: ["none", "rows", "all"],
+    border,
+    colorScheme,
+    density,
+  },
+};
+const text = { type: "string", minLength: 1, pattern: "\\S" };
+const string = { type: "string" };
+const enumeration = (values: readonly string[]) => ({
+  type: "string",
+  enum: values,
+});
+const object = (
+  properties: Record<string, unknown>,
+  required = Object.keys(properties),
+) => ({ type: "object", properties, required, additionalProperties: false });
+const array = (items: unknown, minItems = 0) => ({
+  type: "array",
+  items,
+  minItems,
+});
+const ids = { ...array(text, 1), uniqueItems: true };
+const endpoint = object({ nodeId: text, slotId: text }, ["nodeId"]);
+const rect = object({
+  x: { type: "number", minimum: 0, maximum: 4096 },
+  y: { type: "number", minimum: 0, maximum: 4096 },
+  width: { type: "number", exclusiveMinimum: 0, maximum: 4096 },
+  height: { type: "number", exclusiveMinimum: 0, maximum: 4096 },
+});
+const visualBase = {
+  viewBox: object({
+    x: { type: "number" },
+    y: { type: "number" },
+    width: { type: "number", exclusiveMinimum: 0, maximum: 100000 },
+    height: { type: "number", exclusiveMinimum: 0, maximum: 100000 },
+  }),
+  description: { ...text, maxLength: 1000 },
+  fit: enumeration(["contain", "cover", "stretch"]),
+};
+const customVisual = {
+  oneOf: [
+    object(
+      {
+        format: { const: "vector" },
+        elements: {
+          ...array(
+            object(
+              {
+                id: text,
+                kind: enumeration(vectorElementKinds),
+                parentId: text,
+                attributes: {
+                  type: "object",
+                  maxProperties: 40,
+                  properties: Object.fromEntries(["fill", "stroke", "color", "font-family"].map((name) => [name, {
+                    anyOf: [literalVectorAttribute, { enum: tokensForAttribute(name).map((token) => `theme:${token}`) }],
+                  }])),
+                  additionalProperties: literalVectorAttribute,
+                },
+                text: { type: "string", maxLength: 10000 },
+              },
+              ["id", "kind", "attributes"],
+            ),
+            0,
+          ),
+          maxItems: 2000,
+        },
+        ...visualBase,
+      },
+      ["format", "elements", "viewBox", "description"],
+    ),
+    object(
+      {
+        format: { const: "svg" },
+        source: {
+          type: "string",
+          minLength: 1,
+          maxLength: 500000,
+          pattern: "^\\s*<svg(?:\\s|>)",
+        },
+        ...visualBase,
+      },
+      ["format", "source", "viewBox", "description"],
+    ),
+  ],
+};
+const topology = object({
+  kind: { const: "explicit" },
+  nodes: {
+    ...array(object({
+      id: text,
+      slotId: text,
+      visible: { type: "boolean" },
+      preferredRect: rect,
+      primitive: {
+        oneOf: [
+          object({
+            kind: { const: "shape" },
+            shape: enumeration(["rectangle", "rounded-rectangle", "circle", "line"]),
+            color: enumeration(["ink", "muted", "accent"]),
+            fill: enumeration(["none", "solid", "wash"]),
+          }, ["kind", "shape"]),
+          object({
+            kind: { const: "icon" },
+            name: text,
+            style: enumeration(["outline", "filled"]),
+            color: enumeration(["ink", "muted", "accent"]),
+          }, ["kind"]),
+        ],
+      },
+    }, ["id", "slotId"]), 1),
+    maxItems: 24,
+  },
+  edges: {
+    ...array(
+      object({ from: text, to: text, label: { ...text, maxLength: 120 } }, [
+        "from",
+        "to",
+      ]),
+      0,
+    ),
+    maxItems: 48,
+  },
+});
+const components = componentKinds.map((kind) => {
+  const options = appearanceOptions[kind];
+  const requiredAppearance = [
+    ...(kind === "chart" ? ["template"] : []),
+    ...(kind === "text-block" ? ["role"] : []),
+    ...(kind === "diagram" ? ["type"] : []),
+  ];
+  const component = object(
+    {
+      id: text,
+      kind: { const: kind },
+      preferredRect: rect,
+      slotIds: ids,
+      intent: string,
+      customVisual,
+      ...(kind === "text-block" ? {
+        content: { type: "string", maxLength: 50000 },
+        textStyle: object({
+          size: { type: "number", minimum: 8, maximum: 240 },
+          weight: { enum: [400, 500, 600] },
+          lineHeight: { type: "number", minimum: 1, maximum: 3 },
+          color: enumeration(["ink", "muted", "accent"]),
+          font: enumeration(["heading", "body"]),
+        }, []),
+      } : {}),
+      appearance: object(
+        Object.fromEntries(
+          Object.entries(options).map(([key, values]) => [
+            key,
+            enumeration(values),
+          ]),
+        ),
+        requiredAppearance,
+      ),
+      ...(kind === "diagram" || kind === "chart" ? { topology } : {}),
+    },
+    [
+      "id",
+      "kind",
+      "preferredRect",
+      "slotIds",
+      ...(requiredAppearance.length ? ["appearance"] : []),
+    ],
+  );
+  return kind === "chart"
+    ? {
+        ...component,
+        allOf: [{
+          if: { required: ["topology"] },
+          then: {
+            properties: {
+              appearance: {
+                properties: { template: { const: "sankey" } },
+              },
+            },
+          },
+        }],
+      }
+    : component;
+});
+export const schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  $id: "https://vcfgdev.github.io/konpeki/composition/v18/schema.json",
+  title: compositionSchema,
+  ...object(
+    {
+      schema: { const: compositionSchema },
+      title: text,
+      authoringMode: enumeration(authoringModes),
+      theme: object({
+        id: enumeration(themeIds),
+        mode: enumeration(themeModes),
+      }),
+      slides: array(
+        object(
+          {
+          id: text,
+          name: text,
+          canvas: object({
+            width: { type: "integer", minimum: 256, maximum: 4096 },
+            height: { type: "integer", minimum: 256, maximum: 4096 },
+          }),
+          innerPadding: object({
+            top: { type: "number", minimum: 0 },
+            right: { type: "number", minimum: 0 },
+            bottom: { type: "number", minimum: 0 },
+            left: { type: "number", minimum: 0 },
+          }),
+          pageNumber: object({
+            style: enumeration(["none", "01", "01/02"]),
+            color: enumeration(["ink", "muted", "accent"]),
+          }),
+          audience: text,
+          question: text,
+          intendedViewingSize: enumeration(["presentation", "social", "article", "custom"]),
+          contentSlots: array(
+            {
+              oneOf: [
+                object({
+                  id: text,
+                  label: text,
+                  required: { type: "boolean" },
+                  instruction: text,
+                  role: enumeration([
+                    "takeaway",
+                    "body",
+                    "evidence",
+                    "comparison-item",
+                    "process-step",
+                    "entity",
+                    "image",
+                    "table",
+                  ]),
+                }),
+                object({
+                  id: text,
+                  label: text,
+                  required: { type: "boolean" },
+                  instruction: text,
+                  role: enumeration(["qualification", "source"]),
+                  targets: ids,
+                }),
+              ],
+            },
+            0,
+          ),
+          components: array({ oneOf: components }, 0),
+          groups: array(
+            object({ id: text, label: string, childIds: ids }, [
+              "id",
+              "childIds",
+            ]),
+          ),
+          readingOrder: {
+            ...array(
+              object({ kind: enumeration(["component", "group"]), id: text }),
+              0,
+            ),
+            uniqueItems: true,
+          },
+          paintOrder: { ...array(text, 0), uniqueItems: true },
+          relationships: array(
+            object(
+              {
+                id: text,
+                kind: enumeration([
+                  "flows-to",
+                  "qualifies",
+                  "compares-with",
+                  "depends-on",
+                  "connects-to",
+                ]),
+                direction: enumeration([
+                  "forward",
+                  "bidirectional",
+                  "undirected",
+                ]),
+                from: endpoint,
+                to: endpoint,
+                label: string,
+              },
+              ["id", "kind", "direction", "from", "to"],
+            ),
+          ),
+          },
+          [
+          "id",
+          "name",
+          "canvas",
+          "audience",
+          "question",
+          "intendedViewingSize",
+          "contentSlots",
+          "components",
+          "groups",
+          "readingOrder",
+          "paintOrder",
+          "relationships",
+          ],
+        ),
+        1,
+      ),
+    },
+    ["schema", "title", "slides"],
+  ),
+};

package/composition/theme-tokens.ts

@@ -0,0 +1,16 @@
+/** Explicit opt-in bindings. Literal SVG attributes always remain fixed. */
+export const colorTokens = ["ink", "muted", "background", "surface", "divider", "accent", "on-accent", "wash"] as const;
+export const fontTokens = ["heading-font", "body-font"] as const;
+export type ThemeToken = typeof colorTokens[number] | typeof fontTokens[number];
+export function tokensForAttribute(name: string): readonly ThemeToken[] {
+  return name === "font-family" ? fontTokens
+    : ["fill", "stroke", "color"].includes(name) ? colorTokens : [];
+}
+export function validThemeBinding(name: string, value: string | number): boolean {
+  return typeof value !== "string" || !value.startsWith("theme:") ||
+    tokensForAttribute(name).some((token) => value === `theme:${token}`);
+}
+export function resolveVectorAttribute(name: string, value: string | number): string | number {
+  return typeof value === "string" && value.startsWith("theme:") && validThemeBinding(name, value)
+    ? `var(--vector-${value.slice(6)})` : value;
+}