@redvars/peacock 3.5.0 → 3.6.0

package/dist/src/fab/fab.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, nothing } from 'lit';
-import { IconProvider } from '../icon/icon.js';
+import { nothing } from 'lit';
+import { BaseButton } from '@/button/BaseButton.js';
 /**
  * @label FAB
  * @tag wc-fab
@@ -18,25 +18,13 @@ import { IconProvider } from '../icon/icon.js';
  *
  * @example
  * ```html
- * <wc-fab name="add"></wc-fab>
+ * <wc-fab><wc-icon name="add"></wc-icon></wc-fab>
  * ```
  * @tags controls
  */
-export declare class Fab extends LitElement {
+export declare class Fab extends BaseButton {
     #private;
     static styles: import("lit").CSSResultGroup[];
-    /**
-     * Name of the icon to display inside the FAB.
-     */
-    name?: string;
-    /**
-     * Source URL for a custom icon.
-     */
-    src?: string;
-    /**
-     * Icon provider. Defaults to `"material-symbols"`.
-     */
-    provider: IconProvider;
     /**
      * Optional label text for the extended FAB variant.
      * When set, the FAB displays both the icon and a text label.
@@ -67,18 +55,6 @@ export declare class Fab extends LitElement {
      * If `true`, the FAB is in a lowered (resting) state with reduced elevation.
      */
     lowered: boolean;
-    /**
-     * If `true`, the user cannot interact with the FAB.
-     */
-    disabled: boolean;
-    /**
-     * Hyperlink to navigate to on click.
-     */
-    href?: string;
-    /**
-     * Sets or retrieves the window or frame at which to target content.
-     */
-    target: string;
     /**
      * Additional ARIA attributes to pass to the inner button/anchor element.
      */
@@ -94,18 +70,11 @@ export declare class Fab extends LitElement {
      */
     tooltip?: string;
     isPressed: boolean;
-    readonly fabElement: HTMLElement | null;
     focus(): void;
     blur(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     firstUpdated(): void;
-    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
-    __isLink(): boolean;
-    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
     __getDisabledReasonID(): string | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     __renderFabContent(isExtended: boolean): import("lit-html").TemplateResult<1>;
-    __renderTooltip(): typeof nothing | import("lit-html").TemplateResult<1>;
 }

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

@@ -0,0 +1,66 @@
+import type { Workflow, WorkflowNode, WorkflowCommand } from './types.js';
+/**
+ * Add Node Command
+ */
+export declare class AddNodeCommand implements WorkflowCommand {
+    private nodeToAdd;
+    private parentNodeId;
+    private connectionType;
+    private branchKey?;
+    description: string;
+    constructor(nodeToAdd: WorkflowNode, parentNodeId: string, connectionType?: 'child' | 'branch' | 'task', branchKey?: string | undefined);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Delete Node Command
+ */
+export declare class DeleteNodeCommand implements WorkflowCommand {
+    private nodeId;
+    description: string;
+    private deletedNode;
+    private parentReference;
+    constructor(nodeId: string, workflow?: Workflow);
+    private captureNodeContext;
+    private findParentReference;
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Edit Node Command
+ */
+export declare class EditNodeCommand implements WorkflowCommand {
+    private nodeId;
+    private updates;
+    description: string;
+    private previousState;
+    constructor(nodeId: string, updates: Partial<WorkflowNode>, workflow?: Workflow);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Move Node Command - reorder in array or change parent
+ */
+export declare class MoveNodeCommand implements WorkflowCommand {
+    private nodeId;
+    private newParentId;
+    private newIndex;
+    private newConnectionType;
+    private newBranchKey?;
+    description: string;
+    private previousState;
+    constructor(nodeId: string, newParentId: string, newIndex: number, newConnectionType?: 'child' | 'branch' | 'task', newBranchKey?: string | undefined, workflow?: Workflow);
+    private captureCurrentPosition;
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Batch Command - combine multiple commands into one undo/redo step
+ */
+export declare class BatchCommand implements WorkflowCommand {
+    private commands;
+    description: string;
+    constructor(commands: WorkflowCommand[], description?: string);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}

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

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import type { WorkflowNode } from './types.js';
+/**
+ * Individual node component for flow designer
+ * Renders a single workflow node with customizable slot templates
+ *
+ * @tag wc-flow-designer-node
+ * @rawTag flow-designer-node
+ * @wip true
+ */
+export declare class FlowDesignerNode extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The workflow node to render
+     */
+    node: WorkflowNode;
+    /**
+     * Whether this node is currently selected
+     */
+    isSelected: boolean;
+    /**
+     * Whether this node is in edit mode
+     */
+    isEditing: boolean;
+    /**
+     * Whether this node is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show the delete button
+     */
+    showDelete: boolean;
+    private _handleClick;
+    private _handleDoubleClick;
+    private _handleDelete;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDefaultHeader;
+    private _renderDefaultBody;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wc-flow-designer-node': FlowDesignerNode;
+    }
+}

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

@@ -0,0 +1,133 @@
+import { LitElement } from 'lit';
+import '../toolbar/toolbar.js';
+import '../button/icon-button/icon-button.js';
+import '../icon/icon.js';
+import './flow-designer-node.js';
+import type { Workflow, WorkflowNode } from './types.js';
+/**
+ * @label Flow Designer
+ * @tag wc-flow-designer
+ * @rawTag flow-designer
+ * @summary Low-code business process flow designer with swimlane layout, undo/redo, and interactive editing.
+ *
+ * @cssprop --flow-designer-height - Height of the flow designer container. Defaults to 400px.
+ * @cssprop --flow-designer-border-color - Border color of the flow designer. Defaults to outline-variant.
+ * @cssprop --flow-designer-background - Background color of the designer. Defaults to surface.
+ * @cssprop --flow-designer-border-radius - Corner radius. Defaults to medium shape.
+ * @cssprop --flow-designer-action-bar-bg - Background color of the action bar. Defaults to surface-container.
+ *
+ * @example
+ * ```html
+ * <wc-flow-designer id="editor"></wc-flow-designer>
+ * <script>
+ *   const workflow = {
+ *     workflow_id: "demo",
+ *     nodes: {
+ *       id: "node_1",
+ *       type: "trigger",
+ *       label: "Start"
+ *     }
+ *   };
+ *   document.querySelector('#editor').workflow = workflow;
+ * </script>
+ * ```
+ */
+export declare class FlowDesigner extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The workflow definition to display and edit
+     */
+    workflow: Workflow;
+    /**
+     * Whether the flow designer is in read-only mode
+     */
+    readonly: boolean;
+    /**
+     * Whether the flow designer is disabled
+     */
+    disabled: boolean;
+    /**
+     * Show validation errors/warnings
+     */
+    showValidation: boolean;
+    private _editor;
+    private _positionedNodes;
+    private _history;
+    private _historyIndex;
+    private scrollElm?;
+    private _isDragScrolling;
+    private _dragStartX;
+    private _dragStartY;
+    private _scrollStartX;
+    private _scrollStartY;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    /**
+     * Recalculate layout when workflow changes
+     */
+    private _recalculateLayout;
+    /**
+     * Add a new node
+     */
+    addNode(newNode: WorkflowNode, parentNodeId: string, connectionType?: 'child' | 'branch' | 'task', branchKey?: string): void;
+    /**
+     * Delete a node by ID
+     */
+    deleteNode(nodeId: string): void;
+    /**
+     * Edit a node
+     */
+    editNode(nodeId: string, updates: Partial<WorkflowNode>): void;
+    /**
+     * Move a node to a different parent/position
+     */
+    moveNode(nodeId: string, newParentId: string, newIndex: number, connectionType?: 'child' | 'branch' | 'task', branchKey?: string): void;
+    /**
+     * Execute a command and add to history
+     */
+    private _executeCommand;
+    /**
+     * Undo last operation
+     */
+    undo(): void;
+    /**
+     * Redo last undone operation
+     */
+    redo(): void;
+    /**
+     * Check if undo is available
+     */
+    canUndo(): boolean;
+    /**
+     * Check if redo is available
+     */
+    canRedo(): boolean;
+    /**
+     * Export current workflow as JSON
+     */
+    exportWorkflow(): string;
+    /**
+     * Validate workflow
+     */
+    validate(): void;
+    private _emitWorkflowChange;
+    private _handleKeyDown;
+    private _handleMouseUp;
+    private _handleCanvasMouseDown;
+    private _handleCanvasMouseMove;
+    private _handleNodeClick;
+    private _handleNodeDelete;
+    private _handleNodeEdit;
+    private _handleZoomIn;
+    private _handleZoomOut;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private _renderConnectors;
+    private _renderSwimlanes;
+    private _renderNodes;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wc-flow-designer': FlowDesigner;
+    }
+}

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

@@ -0,0 +1,7 @@
+export { FlowDesigner } from './flow-designer.js';
+export { FlowDesignerNode } from './flow-designer-node.js';
+export type { Workflow, WorkflowNode, WorkflowCommand, PositionedNode, ValidationError, HistoryEntry, EditorState, NodeType, WorkflowChangeEvent, SwimlaneConfig, NodeTemplate, } from './types.js';
+export { SwimlaneLayout } from './layout.js';
+export { WorkflowValidator } from './validation.js';
+export { cloneWorkflow, cloneNode, findNodeById, removeNodeById, insertNodeIntoWorkflow, getAllNodes, getNodePath, isDescendant, replaceNode, } from './workflow-utils.js';
+export { AddNodeCommand, DeleteNodeCommand, EditNodeCommand, MoveNodeCommand, BatchCommand, } from './commands.js';

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

@@ -0,0 +1,30 @@
+import type { WorkflowNode, PositionedNode, SwimlaneConfig } from './types.js';
+export declare class SwimlaneLayout {
+    /**
+     * Calculate layout positions for all nodes in a workflow
+     */
+    static calculateLayout(rootNode: WorkflowNode): PositionedNode[];
+    /**
+     * Traverse workflow tree and assign lane/depth to each node
+     */
+    private static _traverseAndAssignLanes;
+    /**
+     * Calculate SVG connector points between nodes
+     */
+    private static _calculateConnectors;
+    /**
+     * Get swimlane configurations for rendering
+     */
+    static getSwimlanes(positionedNodes: PositionedNode[]): SwimlaneConfig[];
+    /**
+     * Generate human-readable swimlane name
+     */
+    private static _getSwimlaneName;
+    /**
+     * Calculate canvas bounds for sizing
+     */
+    static getCanvasBounds(positionedNodes: PositionedNode[]): {
+        width: number;
+        height: number;
+    };
+}

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

@@ -0,0 +1,142 @@
+/**
+ * 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,40 @@
+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/dist/src/focus-ring/focus-ring.d.ts

@@ -14,17 +14,23 @@ export declare class FocusRing extends LitElement {
     static styles: import("lit").CSSResultGroup[];
     visible: boolean;
     for: string;
+    private __boundFocusin;
+    private __boundFocusout;
+    private __boundPointerdown;
     render(): symbol;
-    _control?: HTMLElement;
-    _focusTarget?: HTMLElement;
-    get control(): HTMLElement | null;
-    set control(control: HTMLElement | null);
-    set forElement(value: HTMLElement | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
     __focusin(): void;
     __focusout(): void;
     __pointerdown(): void;
+    /**
+     * Resolves the element that should receive focus-ring event listeners by id.
+     * Prefers lookup from the current control's root node, then falls back to a
+     * document-level lookup.
+     *
+     * @returns The resolved focus target, if one can be found.
+     */
     __getFocusTarget(): HTMLElement | undefined;
     attach(): void;
     detach(): void;

package/dist/src/html-editor/html-editor.d.ts

@@ -0,0 +1,56 @@
+import BaseInput from '../input/BaseInput.js';
+/**
+ * @label HTML Editor
+ * @tag wc-html-editor
+ * @rawTag html-editor
+ *
+ * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.
+ * @overview
+ * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in
+ * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled
+ * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>
+ *
+ * <p>Get and set the HTML content via the <code>value</code> property. The component
+ * dispatches a <code>change</code> event whenever the content is modified.</p>
+ *
+ * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.
+ * @cssprop --html-editor-toolbar-background - Background color of the toolbar.
+ * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.
+ *
+ * @fires {Event} change - Fired whenever the editable content changes.
+ *
+ * @example
+ * ```html
+ * <wc-html-editor label="Description" value="<p>Hello <strong>world</strong></p>"></wc-html-editor>
+ * ```
+ * @tags input editor
+ */
+export declare class HtmlEditor extends BaseInput {
+    static styles: import("lit").CSSResultGroup[];
+    /** Current HTML value of the editor. */
+    value: string;
+    /** Label displayed above the editor. */
+    label: string;
+    /** Placeholder text shown when the editor is empty. */
+    placeholder: string;
+    /** Visual style of the wrapping field. */
+    variant: 'filled' | 'outlined' | 'default';
+    /** Helper text displayed below the editor. */
+    helperText: string;
+    /** Whether to show an error state. */
+    error: boolean;
+    /** Error message text. */
+    errorText: string;
+    private _focused;
+    private _editorEl;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _execCmd;
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _insertLink;
+    private _toolbarButton;
+    private _renderToolbar;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/html-editor/index.d.ts

@@ -0,0 +1,2 @@
+import { HtmlEditor } from './html-editor.js';
+export { HtmlEditor };