flowsvg 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./core.js";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./core.js";

package/dist/node-content-paint.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared node-content highlight paint for core timeline causes and browser-only hover.
+ * Paint consumes evaluated geometry and preserves explicit author colors; it never lays out text again.
+ */
+import type { NodeContentLayout } from "./node-content.js";
+/**
+ * Blend only default paint by the node highlight amount; preserve safe areas, metrics and author provenance.
+ * The evaluated fill selects readable ink during transitions: naive light-to-dark ink blending loses contrast midway.
+ */
+export declare function paintContentHighlight(layout: NodeContentLayout, amount: number, fill: string): NodeContentLayout;

package/dist/node-content-paint.js

@@ -0,0 +1,54 @@
+import { mixColor } from "./timeline.js";
+const HIGHLIGHT_CONTENT_COLORS = {
+    title: "#172033", body: "#172033", marker: "#172033", auxiliary: "#354158", tag: "#164b9b", status: "#16466b"
+};
+const HIGHLIGHT_TAG_FILL = "#eaf1ff";
+const MIN_CONTENT_CONTRAST = 4.5;
+const CONTRAST_DARK_INK = "#000000";
+const CONTRAST_LIGHT_INK = "#ffffff";
+/**
+ * Blend only default paint by the node highlight amount; preserve safe areas, metrics and author provenance.
+ * The evaluated fill selects readable ink during transitions: naive light-to-dark ink blending loses contrast midway.
+ */
+export function paintContentHighlight(layout, amount, fill) {
+    if (amount === 0)
+        return layout;
+    const tags = layout.tags.map((tag) => ({ ...tag, fill: tag.explicitFill ? tag.fill : mixColor(tag.fill, HIGHLIGHT_TAG_FILL, amount) }));
+    return {
+        ...layout, tags,
+        ...(layout.graphs ? { graphs: layout.graphs.map((graph) => ({ ...graph,
+                nodes: graph.nodes.map((node) => ({ ...node, fill: readableDefaultInk(node.fill, HIGHLIGHT_CONTENT_COLORS[node.highlighted ? "status" : "auxiliary"], amount, fill) })),
+                edges: graph.edges.map((edge) => ({ ...edge, color: readableDefaultInk(edge.color, HIGHLIGHT_CONTENT_COLORS[edge.highlighted ? "status" : "auxiliary"], amount, fill) }))
+            })) } : {}),
+        lines: layout.lines.map((line) => {
+            const tag = line.role === "tag" ? tags.find((candidate) => candidate.blockIndex === line.blockIndex
+                && candidate.itemIndex === line.itemIndex && candidate.tagIndex === line.tagIndex) : undefined;
+            const background = tag?.fill ?? fill;
+            const paint = (color) => readableDefaultInk(color, HIGHLIGHT_CONTENT_COLORS[line.role], amount, background);
+            const spans = line.spans.map((span) => ({ ...span, color: span.explicitColor ? span.color : paint(span.color) }));
+            return { ...line, spans, color: spans[0]?.color ?? paint(line.color) };
+        })
+    };
+}
+/** Retain semantic ink when it meets contrast; use opaque dark/light ink only across the transition's narrow middle. */
+function readableDefaultInk(source, target, amount, background) {
+    const blended = mixColor(source, target, amount);
+    for (const candidate of [blended, source, target]) {
+        if (contrastRatio(candidate, background) >= MIN_CONTENT_CONTRAST)
+            return candidate;
+    }
+    return contrastRatio(CONTRAST_DARK_INK, background) >= contrastRatio(CONTRAST_LIGHT_INK, background)
+        ? CONTRAST_DARK_INK : CONTRAST_LIGHT_INK;
+}
+function contrastRatio(first, second) {
+    const a = relativeLuminance(first), b = relativeLuminance(second);
+    return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+/** Source colors are validated hexadecimal RGB/RGBA; only opaque default paints promise contrast. */
+function relativeLuminance(color) {
+    const hex = color.slice(1);
+    const rgb = hex.length <= 4 ? [...hex.slice(0, 3)].map((digit) => digit + digit).join("") : hex;
+    const channels = [0, 2, 4].map((offset) => Number.parseInt(rgb.slice(offset, offset + 2), 16) / 255)
+        .map((value) => value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4);
+    return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+}

package/dist/node-content.d.ts

@@ -0,0 +1,184 @@
+/**
+ * Deterministic node-content model and layout. The core supplies current absolute node geometry and theme colors.
+ * This module does not measure browser fonts or mutate authored dimensions; SVG consumes its evaluated lines and tag backgrounds.
+ */
+import type { NodeKind, ValidationIssue } from "./core.js";
+import type { ThemePalette } from "./theme.js";
+/** Horizontal placement within the current content safe area. */
+export type ContentAlignment = "left" | "center" | "right";
+/** Controlled text appearance; omitted values use the block's semantic role. Colors are hexadecimal RGB/RGBA. */
+export interface ContentTextStyle {
+    /** Positive finite font size in diagram units. */
+    fontSize?: number;
+    /** Integer weight from 100 through 900. */
+    fontWeight?: number;
+    color?: string;
+    align?: ContentAlignment;
+}
+/** Controlled inline typography. Alignment belongs to the containing block. */
+export type ContentSpanStyle = Pick<ContentTextStyle, "fontSize" | "fontWeight" | "color">;
+/** Inline source text with optional appearance; adjacent spans share wrapping and baseline placement. */
+export interface ContentTextSpan {
+    text: string;
+    style?: ContentSpanStyle;
+}
+/** Plain text or an ordered series of inline styled spans. No span creates an independent target. */
+export type ContentText = string | ContentTextSpan[];
+/** Controlled tag typography and optional background; tags remain left-aligned within the item. */
+export interface ContentTagStyle extends ContentSpanStyle {
+    fill?: string;
+}
+/** A decorative text tag, without an independent identity or interaction. */
+export interface ContentTag {
+    text: ContentText;
+    style?: ContentTagStyle;
+}
+/** One list entry; absent parts consume no height. Explicit empty text preserves an authored line. */
+export interface ContentListItem {
+    tags?: ContentTag[];
+    status?: ContentText;
+    /** Status is always right-aligned and defaults to 12-unit accent text. */
+    statusStyle?: ContentSpanStyle;
+    body?: ContentText;
+    auxiliary?: ContentText;
+    /** Body typography; overrides the containing list style. */
+    style?: ContentTextStyle;
+    /** Auxiliary typography; defaults to muted 12-unit text. */
+    auxiliaryStyle?: ContentTextStyle;
+}
+/** Controlled list typography with a nonnegative item gap, defaulting to 12 diagram units. */
+export interface ContentListStyle extends ContentTextStyle {
+    itemGap?: number;
+    /** Space between tags and between wrapped tag rows; defaults to 6. */
+    tagGap?: number;
+}
+/** Decorative entity; x/y are center offsets from the graph block's top left, in diagram units. */
+export interface ContentGraphNode {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    highlighted?: boolean;
+}
+/** Undirected relation with IDs local to its graph block. */
+export interface ContentGraphEdge {
+    from: string;
+    to: string;
+}
+/** Fixed-height entity graph with authored coordinates and no independent hit targets. */
+export interface ContentGraphBlock {
+    type: "graph";
+    height: number;
+    nodes: ContentGraphNode[];
+    edges: ContentGraphEdge[];
+}
+/** Absolute graph primitives sharing the parent content clip. */
+export interface ContentGraphLayout {
+    blockIndex: number;
+    nodes: {
+        x: number;
+        y: number;
+        radius: number;
+        fill: string;
+        highlighted: boolean;
+    }[];
+    edges: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        color: string;
+        highlighted: boolean;
+    }[];
+}
+/** One ordered title, paragraph, list or entity graph. */
+export type ContentBlock = {
+    type: "title";
+    text: ContentText;
+    style?: ContentTextStyle;
+} | {
+    type: "paragraph";
+    text: ContentText;
+    role?: "body" | "auxiliary";
+    style?: ContentTextStyle;
+} | {
+    type: "list";
+    /** Omitted markers use unmarked records. */
+    marker?: "none" | "bullet" | "number";
+    items: ContentListItem[];
+    style?: ContentListStyle;
+} | ContentGraphBlock;
+/** Ordered fixed-node content. It replaces the simple label and never changes node dimensions. */
+export interface NodeContent {
+    blocks: ContentBlock[];
+    style?: {
+        /** Uniform inset in diagram units; defaults to 16. */
+        padding?: number;
+        /** Vertical space between content blocks in diagram units; defaults to 14. */
+        blockGap?: number;
+    };
+}
+/** Absolute rectangular clip region; empty safe areas have zero width or height. */
+export interface ContentSafeArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** One evaluated inline span. x is its left edge and y is its shared line baseline. */
+export interface ContentSpan {
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    fontSize: number;
+    fontWeight: number;
+    color: string;
+    /** True when a block or source span supplied this color; highlight paint preserves it. */
+    explicitColor: boolean;
+}
+/** One evaluated text line. x is the alignment anchor and y is the SVG baseline, in document units. */
+export interface ContentLine {
+    spans: ContentSpan[];
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    fontSize: number;
+    fontWeight: number;
+    color: string;
+    align: ContentAlignment;
+    role: "title" | "body" | "auxiliary" | "marker" | "tag" | "status";
+    blockIndex: number;
+    /** Zero-based authored entry index; skipped empty entries do not renumber later entries. */
+    itemIndex?: number;
+    /** Zero-based authored tag index, present only for tag lines. */
+    tagIndex?: number;
+}
+/** Evaluated tag background, in absolute diagram units; paint preserves authored fills. */
+export interface ContentTagBackground extends ContentSafeArea {
+    fill: string;
+    explicitFill: boolean;
+    blockIndex: number;
+    itemIndex: number;
+    tagIndex: number;
+}
+/** Complete layout before clipping; overflow flags report estimated width and height independently. */
+export interface NodeContentLayout {
+    safeArea: ContentSafeArea;
+    lines: ContentLine[];
+    tags: ContentTagBackground[];
+    graphs?: ContentGraphLayout[];
+    widthOverflow: boolean;
+    heightOverflow: boolean;
+}
+/** Supported content shapes; node validators share this restriction. */
+export declare function supportsNodeContent(kind: unknown): boolean;
+/** Lay out current content from the top left, without DOM font measurement or authored-size changes. */
+export declare function layoutNodeContent(content: NodeContent, bounds: ContentSafeArea, palette: ThemePalette, kind: NodeKind): NodeContentLayout;
+/** Validate nested content separately from shape and label-mode checks at the document boundary. */
+export declare function validateNodeContent(value: unknown, path: string, issues: ValidationIssue[]): void;
+/** Validate inline source values before evaluation; unknown fields keep their exact source position. */
+export declare function validateContentText(value: unknown, path: string, issues: ValidationIssue[]): void;
+/** Validate the controlled style shared by content blocks; no CSS expression or external resource is accepted. */
+export declare function validateContentTextStyle(value: unknown, path: string, issues: ValidationIssue[], inline?: boolean): void;