@redvars/peacock 3.9.0 → 3.9.1

package/dist/src/flow-designer/types.d.ts

@@ -1,142 +0,0 @@
-/**
- * Workflow Data Types for Flow Designer
- * Defines the structure for low-code business process workflows
- */
-/**
- * Supported node types in a workflow
- */
-export type NodeType = 'trigger' | 'action' | 'decision' | 'loop_start' | 'loop_end' | 'fork' | 'join';
-/**
- * Payload for workflow-changed event
- */
-export interface WorkflowChangeEvent {
-    type: 'node-added' | 'node-deleted' | 'node-edited' | 'node-moved' | 'undo' | 'redo';
-    nodeId?: string;
-    workflow: Workflow;
-}
-/**
- * Core workflow node structure
- */
-export interface WorkflowNode {
-    id: string;
-    type: NodeType;
-    label: string;
-    description?: string;
-    icon?: string;
-    /**
-     * For sequential nodes in parallel execution (fork tasks)
-     */
-    tasks?: WorkflowNode[];
-    /**
-     * For conditional branching (decision nodes)
-     * Keys are branch conditions like "yes", "no"
-     */
-    branches?: Record<string, WorkflowNode[]>;
-    /**
-     * Child nodes for sequential flow
-     */
-    children?: WorkflowNode[];
-    /**
-     * For loop_end: points to the loop_start node id to repeat
-     */
-    target_id?: string;
-    /**
-     * For fork: join node that collects parallel paths
-     */
-    join?: WorkflowNode;
-    /**
-     * Custom metadata - can store domain-specific data
-     */
-    metadata?: Record<string, any>;
-}
-/**
- * Complete workflow definition
- */
-export interface Workflow {
-    workflow_id: string;
-    nodes: WorkflowNode;
-    metadata?: Record<string, any>;
-}
-/**
- * Layout engine output - node with calculated position
- */
-export interface PositionedNode {
-    node: WorkflowNode;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    lane: string;
-    depth: number;
-    branchPath?: string;
-    parentId?: string;
-    connectorPoints?: {
-        from: {
-            x: number;
-            y: number;
-        };
-        to: {
-            x: number;
-            y: number;
-        };
-        type: 'straight' | 'curved' | 'branch' | 'fork' | 'join';
-    }[];
-}
-/**
- * Validation error result
- */
-export interface ValidationError {
-    nodeId: string;
-    type: 'circular_loop' | 'orphaned_node' | 'invalid_branch' | 'missing_target' | 'invalid_fork_join';
-    message: string;
-    severity: 'error' | 'warning';
-}
-/**
- * State for a single undo/redo operation
- */
-export interface HistoryEntry {
-    command: WorkflowCommand;
-    workflow: Workflow;
-    timestamp: number;
-}
-/**
- * Command interface for undo/redo pattern
- */
-export interface WorkflowCommand {
-    execute(workflow: Workflow): Workflow;
-    undo(workflow: Workflow): Workflow;
-    description: string;
-}
-/**
- * Swimlane configuration
- */
-export interface SwimlaneConfig {
-    id: string;
-    name: string;
-    nodes: PositionedNode[];
-    isParallel: boolean;
-}
-/**
- * Editor state
- */
-export interface EditorState {
-    selectedNodeId: string | null;
-    isEditing: boolean;
-    editingNode: Partial<WorkflowNode> | null;
-    hoveredNodeId: string | null;
-    isDragging: boolean;
-    draggedNodeId: string | null;
-    zoom: number;
-    panX: number;
-    panY: number;
-}
-/**
- * Node template configuration for slots
- */
-export interface NodeTemplate {
-    type: NodeType;
-    defaultIcon?: string;
-    defaultHeight?: number;
-    allowedChildren?: NodeType[];
-    allowedBranches?: string[];
-}

package/dist/src/flow-designer/validation.d.ts

@@ -1,43 +0,0 @@
-import type { Workflow, ValidationError } from './types.js';
-/**
- * Workflow validation - checks for common errors and inconsistencies
- */
-export declare class WorkflowValidator {
-    /**
-     * Validate entire workflow
-     */
-    static validate(workflow: Workflow): ValidationError[];
-    /**
-     * Detect circular loop references
-     * A loop_end cannot point to a node that is its own descendant (after the loop_start)
-     */
-    private static _checkCircularLoops;
-    /**
-     * Check for orphaned nodes (not reachable from root)
-     */
-    private static _checkOrphanedNodes;
-    /**
-     * Check that decision nodes have valid branches
-     */
-    private static _checkValidBranches;
-    /**
-     * Check that loop_end nodes reference valid loop_start nodes
-     */
-    private static _checkMissingTargets;
-    /**
-     * Check that fork nodes have corresponding join nodes
-     */
-    private static _checkForkJoinPairs;
-    /**
-     * Check if workflow would create a valid execution path
-     */
-    static isExecutable(workflow: Workflow): boolean;
-    /**
-     * Get validation warnings only
-     */
-    static getWarnings(workflow: Workflow): ValidationError[];
-    /**
-     * Get validation errors only
-     */
-    static getErrors(workflow: Workflow): ValidationError[];
-}

package/dist/src/flow-designer/workflow-utils.d.ts

@@ -1,40 +0,0 @@
-import type { Workflow, WorkflowNode } from './types.js';
-/**
- * Workflow utility functions for tree traversal and manipulation
- */
-/**
- * Deep clone a workflow to ensure immutability
- */
-export declare function cloneWorkflow(workflow: Workflow): Workflow;
-/**
- * Deep clone a workflow node
- */
-export declare function cloneNode(node: WorkflowNode): WorkflowNode;
-/**
- * Find a node by ID anywhere in the workflow tree
- */
-export declare function findNodeById(node: WorkflowNode, id: string): WorkflowNode | null;
-/**
- * Remove a node by ID from the workflow tree
- */
-export declare function removeNodeById(node: WorkflowNode, id: string): WorkflowNode;
-/**
- * Insert a node into the workflow tree at a specific location
- */
-export declare function insertNodeIntoWorkflow(parent: WorkflowNode, nodeToInsert: WorkflowNode, connectionType?: 'child' | 'branch' | 'task', branchKey?: string): void;
-/**
- * Collect all nodes in the workflow (depth-first)
- */
-export declare function getAllNodes(node: WorkflowNode): WorkflowNode[];
-/**
- * Get all parent node IDs for a given node (path from root to node)
- */
-export declare function getNodePath(rootNode: WorkflowNode, targetId: string): string[];
-/**
- * Check if a node is a descendant of another node
- */
-export declare function isDescendant(rootNode: WorkflowNode, potentialParentId: string, nodeId: string): boolean;
-/**
- * Replace a node in the tree
- */
-export declare function replaceNode(node: WorkflowNode, targetId: string, replacement: WorkflowNode): WorkflowNode;

package/src/canvas/canvas.scss

@@ -1,72 +0,0 @@
-@use '../../scss/mixin';
-
-@include mixin.base-styles;
-
-:host {
-  display: block;
-  --canvas-background: var(--color-surface-container-low);
-  --canvas-dot-color: var(--color-outline-variant);
-  --canvas-line-color: var(--color-on-surface);
-  --canvas-hover-color: var(--color-primary);
-  --canvas-arrow-color: var(--color-on-surface);
-}
-
-.canvas-wrapper {
-  position: relative;
-  background: var(--canvas-background);
-}
-
-.canvas {
-  display: block;
-}
-
-.canvas-background,
-.canvas-shapes {
-  position: absolute;
-  inset: 0;
-}
-
-.canvas-background {
-  pointer-events: none;
-}
-
-#canvas-background circle {
-  fill: var(--canvas-dot-color);
-}
-
-#endarrow polyline {
-  fill: none;
-  stroke: context-stroke;
-  vector-effect: non-scaling-stroke;
-  stroke-width: 2;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-.line {
-  &.variant-dashed {
-    stroke-dasharray: 6 6;
-  }
-
-  &.variant-animated-dashed {
-    animation: canvas-dash-flow 600ms linear infinite;
-  }
-}
-
-.clickable {
-  cursor: pointer;
-
-  &:hover .line {
-    stroke: var(--canvas-hover-color);
-  }
-}
-
-.line.clickable:hover {
-  stroke: var(--canvas-hover-color);
-}
-
-@keyframes canvas-dash-flow {
-  to {
-    stroke-dashoffset: -12;
-  }
-}

package/src/canvas/canvas.ts

@@ -1,413 +0,0 @@
-import { html, LitElement, svg, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from '@/IndividualComponent.js';
-import styles from './canvas.scss';
-
-export type CanvasDirection = 'up' | 'down' | 'left' | 'right';
-
-export type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';
-
-export interface CanvasPoint {
-  x: number;
-  y: number;
-}
-
-export interface CanvasPathSegment {
-  direction: CanvasDirection;
-  length: number;
-}
-
-interface BaseCanvasShape {
-  color?: string;
-}
-
-interface BaseCanvasStrokeShape extends BaseCanvasShape {
-  variant?: CanvasStrokeVariant;
-  showArrow?: boolean;
-  clickable?: boolean;
-}
-
-export interface CanvasCircleShape extends BaseCanvasShape {
-  type: 'circle';
-  x?: number;
-  y?: number;
-  radius?: number;
-}
-
-export interface CanvasRectShape extends BaseCanvasShape {
-  type: 'rect';
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-}
-
-export interface CanvasLineShape extends BaseCanvasStrokeShape {
-  type: 'line';
-  start?: CanvasPoint;
-  end?: CanvasPoint;
-}
-
-export interface CanvasConnectorShape extends BaseCanvasStrokeShape {
-  type: 'connector';
-  start?: CanvasPoint;
-  path?: CanvasPathSegment[];
-}
-
-export type CanvasShape =
-  | CanvasCircleShape
-  | CanvasRectShape
-  | CanvasLineShape
-  | CanvasConnectorShape;
-
-const GRID_GAP = 10;
-const GRID_DOT_RADIUS = 1;
-
-interface CanvasBounds {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface CanvasExtents {
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
-}
-
-interface CanvasViewBox {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-/**
- * @label Canvas
- * @tag wc-canvas
- * @rawTag canvas
- * @summary A SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
- *
- * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.
- * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.
- * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.
- * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.
- * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.
- *
- * @example
- * ```html
- * <wc-canvas id="my-canvas"></wc-canvas>
- * <script>
- *   document.querySelector('#my-canvas').shapes = [
- *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },
- *   ];
- * </script>
- * ```
- */
-@IndividualComponent
-export class Canvas extends LitElement {
-  static styles = [styles];
-
-  /**
-   * Array of shape objects to render on the canvas.
-   */
-  @property({ type: Array })
-  shapes: CanvasShape[] = [];
-
-  /**
-   * Padding around the computed viewbox (in grid units).
-   */
-  @property({ type: Number, reflect: true })
-  padding: number = 1;
-
-  /**
-   * Zoom multiplier for the canvas dimensions.
-   */
-  @property({ type: Number, reflect: true })
-  zoom: number = 1;
-
-  /**
-   * Optional viewbox override string (e.g. "0 0 100 100").
-   */
-  @property({ type: String })
-  viewbox?: string;
-
-  private static getNextPoint(
-    point: CanvasPoint,
-    direction: CanvasDirection,
-    length: number,
-  ): CanvasPoint {
-    if (direction === 'down') return { x: point.x, y: point.y + length };
-    if (direction === 'up') return { x: point.x, y: point.y - length };
-    if (direction === 'left') return { x: point.x - length, y: point.y };
-    if (direction === 'right') return { x: point.x + length, y: point.y };
-    return { x: point.x, y: point.y };
-  }
-
-  private static updateExtents(
-    extents: CanvasExtents,
-    x: number,
-    y: number,
-  ) {
-    if (x < extents.minX) extents.minX = x;
-    if (x > extents.maxX) extents.maxX = x;
-    if (y < extents.minY) extents.minY = y;
-    if (y > extents.maxY) extents.maxY = y;
-  }
-
-  private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {
-    return {
-      line: true,
-      'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',
-      'variant-animated-dashed': variant === 'animated-dashed',
-    };
-  }
-
-  private computeShapes(initialBounds: CanvasBounds) {
-    // Track world-space bounds (grid units) as shapes are processed.
-    const extents: CanvasExtents = {
-      minX: initialBounds.x,
-      minY: initialBounds.y,
-      maxX: initialBounds.x + initialBounds.width,
-      maxY: initialBounds.y + initialBounds.height,
-    };
-
-    const shapes = this.shapes.map(shape => {
-      switch (shape.type) {
-        case 'circle': {
-          const r = shape.radius || 1;
-          const cx = shape.x || 0;
-          const cy = shape.y || 0;
-          Canvas.updateExtents(extents, cx - r, cy - r);
-          Canvas.updateExtents(extents, cx + r, cy + r);
-
-          // Convert from grid units to SVG pixels using the fixed gap.
-          return svg`<circle
-            cx=${cx * GRID_GAP + GRID_DOT_RADIUS}
-            cy=${cy * GRID_GAP + GRID_DOT_RADIUS}
-            r=${r * GRID_GAP}
-            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
-          />`;
-        }
-        case 'rect': {
-          const w = shape.width || 1;
-          const h = shape.height || 1;
-          const rx = shape.x || 0;
-          const ry = shape.y || 0;
-          Canvas.updateExtents(extents, rx, ry);
-          Canvas.updateExtents(extents, rx + w, ry + h);
-
-          return svg`<rect
-            x=${rx * GRID_GAP + GRID_DOT_RADIUS}
-            y=${ry * GRID_GAP}
-            width=${w * GRID_GAP + GRID_DOT_RADIUS}
-            height=${h * GRID_GAP + GRID_DOT_RADIUS}
-            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
-          />`;
-        }
-        case 'line': {
-          const start = shape.start || { x: 0, y: 0 };
-          const end = shape.end || { x: 0, y: 0 };
-          Canvas.updateExtents(extents, start.x, start.y);
-          Canvas.updateExtents(extents, end.x, end.y);
-          const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;
-          const strokeColor =
-            shape.color ||
-            'var(--canvas-line-color, var(--color-on-surface))';
-
-          return svg`<path
-            class=${classMap({
-              ...Canvas.getStrokeVariantClasses(shape.variant),
-              clickable: !!shape.clickable,
-            })}
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke=${strokeColor}
-            marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}
-            d=${pathString}
-            stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}
-            fill="none"
-          />`;
-        }
-        case 'connector': {
-          const start = shape.start || { x: 0, y: 0 };
-          let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;
-          let current = { ...start };
-          Canvas.updateExtents(extents, current.x, current.y);
-
-          const pathSegments = shape.path || [];
-          for (let i = 0; i < pathSegments.length; i += 1) {
-            const path = pathSegments[i];
-
-            if (i === 0) {
-              // Move one unit first so curved corner joins don't overlap start.
-              const point = Canvas.getNextPoint(current, path.direction, 1);
-              pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
-              current = { ...point };
-              Canvas.updateExtents(extents, current.x, current.y);
-            }
-
-            const point = Canvas.getNextPoint(
-              current,
-              path.direction,
-              path.length - 2,
-            );
-            pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
-            current = { ...point };
-            Canvas.updateExtents(extents, current.x, current.y);
-
-            if (i === pathSegments.length - 1) {
-              const endPoint = Canvas.getNextPoint(current, path.direction, 1);
-              pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
-              current = { ...endPoint };
-              Canvas.updateExtents(extents, current.x, current.y);
-            } else {
-              const nextPath = pathSegments[i + 1];
-              const midPoint = Canvas.getNextPoint(current, path.direction, 1);
-              Canvas.updateExtents(extents, midPoint.x, midPoint.y);
-              const nextPoint = Canvas.getNextPoint(
-                midPoint,
-                nextPath.direction,
-                1,
-              );
-              // Use a quadratic segment to round corners between directions.
-              pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
-              current = { ...nextPoint };
-              Canvas.updateExtents(extents, current.x, current.y);
-            }
-          }
-
-          const strokeColor =
-            shape.color ||
-            'var(--canvas-line-color, var(--color-on-surface))';
-
-          return svg`<g class=${classMap({ clickable: !!shape.clickable })}>
-            <path
-              class=${classMap({
-                ...Canvas.getStrokeVariantClasses(shape.variant),
-              })}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke=${strokeColor}
-              marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}
-              d=${pathString}
-              stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}
-              fill="none"
-            />
-            <path
-              stroke-width="10"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke="transparent"
-              d=${pathString}
-              fill="none"
-            />
-          </g>`;
-        }
-        default:
-          return nothing;
-      }
-    });
-
-    // Expand bounds with padding so shapes are not flush to the edge.
-    const computedViewbox = {
-      x: extents.minX - this.padding,
-      y: extents.minY - this.padding,
-      width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),
-      height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),
-    };
-
-    return { shapes, computedViewbox };
-  }
-
-  private renderBackgroundSvg(computedViewBox: CanvasViewBox, svgViewBox: string) {
-    return html`
-      <svg
-        class="canvas canvas-background"
-        height="100%"
-        width="100%"
-        viewBox=${svgViewBox}
-        aria-hidden="true"
-      >
-        <defs>
-          <pattern
-            id="canvas-background"
-            patternUnits="userSpaceOnUse"
-            width=${GRID_GAP}
-            height=${GRID_GAP}
-          >
-            <circle cx="1" cy="1" r=${GRID_DOT_RADIUS} />
-          </pattern>
-        </defs>
-
-        <rect
-          x=${computedViewBox.x * GRID_GAP}
-          y=${computedViewBox.y * GRID_GAP}
-          width="100%"
-          height="100%"
-          fill="url(#canvas-background)"
-        />
-      </svg>
-    `;
-  }
-
-  private renderShapesSvg(shapes: unknown[], svgViewBox: string) {
-    return html`
-      <svg
-        class="canvas canvas-shapes"
-        height="100%"
-        width="100%"
-        viewBox=${svgViewBox}
-      >
-        <defs>
-          <marker id="endarrow" markerWidth="10" markerHeight="10" refX="5" refY="5" markerUnits="strokeWidth" orient="auto">
-            <polyline  points="0 2, 5 5, 0 8"></polyline>
-          </marker>
-        </defs>
-
-        ${shapes}
-      </svg>
-    `;
-  }
-
-  protected render() {
-    let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };
-
-    const { shapes, computedViewbox } = this.computeShapes(computedViewBox);
-    computedViewBox = computedViewbox;
-
-    if (this.viewbox) {
-      const viewBox = this.viewbox.split(' ');
-      computedViewBox = {
-        x: parseInt(viewBox[0], 10),
-        y: parseInt(viewBox[1], 10),
-        width: parseInt(viewBox[2], 10),
-        height: parseInt(viewBox[3], 10),
-      };
-    }
-
-    // Zoom scales the outer viewport size while the SVG viewBox stays in world units.
-    const wrapperWidth =
-      (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
-    const wrapperHeight =
-      (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
-
-    // viewBox maps world-space extents into the internal SVG coordinate system.
-    const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;
-
-    return html`
-      <div
-        class="canvas-wrapper"
-        style="width: ${wrapperWidth}px; height: ${wrapperHeight}px;"
-      >
-        ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}
-        ${this.renderShapesSvg(shapes, svgViewBox)}
-      </div>
-    `;
-  }
-}