@almadar/std 16.173.0 → 16.175.0

package/behaviors/lolo/ui/learning/atoms/ui-algo-graph-canvas.lolo

@@ -0,0 +1,192 @@
+app ui-algo-graph-canvas "1.0.0"
+"AlgoGraphCanvas — UI factory (1:1 with the @almadar/ui algo-graph-canvas pattern)."
+orbital AlgoGraphCanvasOrbital {
+  type AlgoGraphCanvasNodesItem = {
+    id : string!
+    x : number
+    y : number
+    label : string
+    state : "unvisited" | "frontier" | "current" | "visited" | "goal" | "path"
+    color : string
+    radius : number
+    badge : AlgoGraphCanvasNodesItemBadge
+  }
+  type AlgoGraphCanvasNodesItemBadge = {
+    text : string!
+    color : string
+  }
+  type AlgoGraphCanvasEdgesItem = {
+    from : string!
+    to : string!
+    directed : boolean
+    weight : number
+    label : string
+    state : "default" | "tree" | "relaxed" | "candidate" | "path"
+    color : string
+  }
+  type AlgoGraphCanvasShapesItem = {
+    type : "line" | "arrow" | "circle" | "ellipse" | "rect" | "polygon" | "path" | "text" | "axis" | "grid" | "venn-region"!
+    id : string
+    x : number
+    y : number
+    x1 : number
+    y1 : number
+    x2 : number
+    y2 : number
+    radius : number
+    width : number
+    height : number
+    points : [AlgoGraphCanvasShapesItemPointsItem]
+    path : string
+    text : string
+    label : string
+    fontSize : number
+    align : "left" | "center" | "right"
+    axis : "x" | "y"
+    min : number
+    max : number
+    step : number
+    color : string
+    fill : string
+    lineWidth : number
+    opacity : number
+    startAngle : number
+    endAngle : number
+    dash : "dashed" | "dotted"
+    inside : [string]
+    outside : [string]
+  }
+  type AlgoGraphCanvasShapesItemPointsItem = {
+    x : number!
+    y : number!
+  }
+  type AlgoGraphCanvasError = {
+    message : string!
+    name : string
+    code : string
+    stack : string
+  }
+  type AlgoGraphCanvasSHAPECLICKPayload = {
+    id : string
+    type : string
+    index : number!
+  }
+  type AlgoGraphCanvasNODECLICKPayload = {
+    id : string!
+    label : string
+    index : number!
+  }
+
+  entity AlgoGraphCanvasItem [runtime] {
+    id : string!
+  }
+
+  trait AlgoGraphCanvasRender -> @rebindable AlgoGraphCanvasItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          className: @config.className
+          width: @config.width
+          height: @config.height
+          title: @config.title
+          backgroundColor: @config.backgroundColor
+          nodes: @config.nodes
+          edges: @config.edges
+          layout: @config.layout
+          root: @config.root
+          shapes: @config.shapes
+          interactive: @config.interactive
+          animate: @config.animate
+          onShapeClick: @config.onShapeClick
+          onNodeClick: @config.onNodeClick
+          isLoading: @config.isLoading
+          error: @config.error
+          type: algo-graph-canvas
+        })
+    }
+
+    emits {
+      @config.onShapeClick -> external {
+        payload : AlgoGraphCanvasSHAPECLICKPayload
+      }
+        @description "onShapeClick prop"
+        @tier "essential"
+      @config.onNodeClick -> external {
+        payload : AlgoGraphCanvasNODECLICKPayload
+      }
+        @description "Fires when a node circle is clicked, alongside `onShapeClick`."
+        @tier "essential"
+    }
+
+    config {
+      className : string
+        @label "Class Name"
+        @description "className prop"
+        @tier "presentation"
+      width : number = 600
+        @label "Width"
+        @description "width prop"
+        @tier "presentation"
+      height : number = 400
+        @label "Height"
+        @description "height prop"
+        @tier "presentation"
+      title : string
+        @label "Title"
+        @description "title prop"
+        @tier "presentation"
+      backgroundColor : string
+        @label "Background Color"
+        @description "backgroundColor prop"
+        @tier "presentation"
+      nodes : [AlgoGraphCanvasNodesItem] = []
+        @label "Nodes"
+        @description "nodes prop"
+        @tier "presentation"
+      edges : [AlgoGraphCanvasEdgesItem] = []
+        @label "Edges"
+        @description "edges prop"
+        @tier "presentation"
+      layout : "manual" | "tree" | "layered" | "circle" = manual
+        @label "Layout"
+        @description "Deterministic layout to compute node positions; `manual` passes through `x`/`y`."
+        @tier "presentation"
+      root : string
+        @label "Root"
+        @description "`tree` layout only: preferred root id. Falls back to the first indegree-0 node."
+        @tier "presentation"
+      shapes : [AlgoGraphCanvasShapesItem] = []
+        @label "Shapes"
+        @description "Extra declarative shapes in canvas pixel coordinates."
+        @tier "presentation"
+      interactive : boolean = false
+        @label "Interactive"
+        @description "interactive prop"
+        @tier "presentation"
+      animate : boolean = false
+        @label "Animate"
+        @description "animate prop"
+        @tier "presentation"
+      onShapeClick : string = "SHAPE_CLICK"
+        @label "On Shape Click"
+        @description "onShapeClick prop"
+        @tier "presentation"
+      onNodeClick : string = "NODE_CLICK"
+        @label "On Node Click"
+        @description "Fires when a node circle is clicked, alongside `onShapeClick`."
+        @tier "presentation"
+      isLoading : boolean
+        @label "Is Loading"
+        @description "isLoading prop"
+        @tier "presentation"
+      error : AlgoGraphCanvasError
+        @label "Error"
+        @description "error prop"
+        @tier "presentation"
+    }
+  }
+
+  page "/algo-graph-canvas" as AlgoGraphCanvasPage -> AlgoGraphCanvasRender
+}

package/behaviors/lolo/ui/learning/atoms/ui-algorithm-canvas.lolo

@@ -12,14 +12,63 @@ orbital AlgorithmCanvasOrbital {
     value : number
     color : string
     label : string
+    corner : AlgorithmCanvasCellsItemCorner
+  }
+  type AlgorithmCanvasCellsItemCorner = {
+    tl : string
+    tr : string
+    bl : string
+    br : string
   }
   type AlgorithmCanvasPointersItem = {
     index : number!
     label : string
     color : string
   }
+  type AlgorithmCanvasRangesItem = {
+    from : number!
+    to : number!
+    color : string
+    label : string
+    kind : "fill" | "bracket"
+  }
+  type AlgorithmCanvasSlotsItem = {
+    value : string
+    state : "empty" | "filled" | "highlight"
+    color : string
+  }
+  type AlgorithmCanvasFramesItem = {
+    label : string!
+    detail : string
+    state : "active" | "returning" | "done"
+    color : string
+  }
+  type AlgorithmCanvasBucketsItem = {
+    index : number!
+    entries : [AlgorithmCanvasBucketsItemEntriesItem]!
+  }
+  type AlgorithmCanvasBucketsItemEntriesItem = {
+    label : string!
+    state : "default" | "highlight" | "probing"
+    color : string
+  }
+  type AlgorithmCanvasAuxBarsItem = {
+    value : number!
+    color : string
+    label : string
+  }
+  type AlgorithmCanvasRowLabelsItem = {
+    index : number!
+    text : string!
+    color : string
+  }
+  type AlgorithmCanvasColLabelsItem = {
+    index : number!
+    text : string!
+    color : string
+  }
   type AlgorithmCanvasShapesItem = {
-    type : "line" | "arrow" | "circle" | "rect" | "polygon" | "path" | "text" | "axis" | "grid"!
+    type : "line" | "arrow" | "circle" | "ellipse" | "rect" | "polygon" | "path" | "text" | "axis" | "grid" | "venn-region"!
     id : string
     x : number
     y : number
@@ -44,6 +93,11 @@ orbital AlgorithmCanvasOrbital {
     fill : string
     lineWidth : number
     opacity : number
+    startAngle : number
+    endAngle : number
+    dash : "dashed" | "dotted"
+    inside : [string]
+    outside : [string]
   }
   type AlgorithmCanvasShapesItemPointsItem = {
     x : number!
@@ -79,6 +133,14 @@ orbital AlgorithmCanvasOrbital {
           bars: @config.bars
           cells: @config.cells
           pointers: @config.pointers
+          ranges: @config.ranges
+          slots: @config.slots
+          slotOrientation: @config.slotOrientation
+          frames: @config.frames
+          buckets: @config.buckets
+          auxBars: @config.auxBars
+          rowLabels: @config.rowLabels
+          colLabels: @config.colLabels
           shapes: @config.shapes
           interactive: @config.interactive
           animate: @config.animate
@@ -97,6 +159,14 @@ orbital AlgorithmCanvasOrbital {
           bars: @payload.bars
           cells: @payload.cells
           pointers: @payload.pointers
+          ranges: @payload.ranges
+          slots: @payload.slots
+          slotOrientation: @config.slotOrientation
+          frames: @payload.frames
+          buckets: @payload.buckets
+          auxBars: @payload.auxBars
+          rowLabels: @payload.rowLabels
+          colLabels: @payload.colLabels
           shapes: @payload.shapes
           interactive: @config.interactive
           animate: @config.animate
@@ -120,6 +190,13 @@ orbital AlgorithmCanvasOrbital {
         bars : [AlgorithmCanvasBarsItem]
         cells : [AlgorithmCanvasCellsItem]
         pointers : [AlgorithmCanvasPointersItem]
+        ranges : [AlgorithmCanvasRangesItem]
+        slots : [AlgorithmCanvasSlotsItem]
+        frames : [AlgorithmCanvasFramesItem]
+        buckets : [AlgorithmCanvasBucketsItem]
+        auxBars : [AlgorithmCanvasAuxBarsItem]
+        rowLabels : [AlgorithmCanvasRowLabelsItem]
+        colLabels : [AlgorithmCanvasColLabelsItem]
         shapes : [AlgorithmCanvasShapesItem]
       }
         @description "Live scene update; payload carries the current drawable state."
@@ -158,7 +235,39 @@ orbital AlgorithmCanvasOrbital {
         @tier "presentation"
       pointers : [AlgorithmCanvasPointersItem] = []
         @label "Pointers"
-        @description "Index cursors (i/j/lo/hi/mid); drawn as markers beneath the referenced bar/cell column."
+        @description "Index cursors (i/j/lo/hi/mid); drawn as markers beneath the referenced bar/slot column."
+        @tier "presentation"
+      ranges : [AlgorithmCanvasRangesItem] = []
+        @label "Ranges"
+        @description "Highlighted index ranges over the bars panel (translucent fill bands or labeled brackets)."
+        @tier "presentation"
+      slots : [AlgorithmCanvasSlotsItem] = []
+        @label "Slots"
+        @description "Discrete value slots (registers/variables); laid out in a row or a vertical stack."
+        @tier "presentation"
+      slotOrientation : "horizontal" | "vertical" = horizontal
+        @label "Slot Orientation"
+        @description "Slot stack direction; horizontal lays slots left-to-right, vertical stacks bottom-up."
+        @tier "presentation"
+      frames : [AlgorithmCanvasFramesItem] = []
+        @label "Frames"
+        @description "Recursion/call-stack frames; laid out bottom-up like a real call stack."
+        @tier "presentation"
+      buckets : [AlgorithmCanvasBucketsItem] = []
+        @label "Buckets"
+        @description "Hash-table buckets; each row is an index chip plus its chained entries."
+        @tier "presentation"
+      auxBars : [AlgorithmCanvasAuxBarsItem] = []
+        @label "Aux Bars"
+        @description "Secondary bar strip inside the bars panel (e.g. a running total beside the primary values)."
+        @tier "presentation"
+      rowLabels : [AlgorithmCanvasRowLabelsItem] = []
+        @label "Row Labels"
+        @description "Row-header labels drawn to the left of the cells grid."
+        @tier "presentation"
+      colLabels : [AlgorithmCanvasColLabelsItem] = []
+        @label "Col Labels"
+        @description "Column-header labels drawn above the cells grid."
         @tier "presentation"
       shapes : [AlgorithmCanvasShapesItem] = []
         @label "Shapes"

package/behaviors/lolo/ui/learning/atoms/ui-biology-canvas.lolo

@@ -5,19 +5,83 @@ orbital BiologyCanvasOrbital {
     id : string
     x : number!
     y : number!
+    z : number
     radius : number
     color : string
     label : string
     kind : "cell" | "organelle" | "molecule" | "organism"
+    shape : "box" | "sphere" | "capsule" | "cylinder" | "cone" | "torus" | "plane" | "circle" | "polyhedron"
+    opacity : number
+    state : "default" | "highlight" | "muted"
   }
   type BiologyCanvasEdgesItem = {
     from : string!
     to : string!
     color : string
     label : string
+    directed : boolean
+  }
+  type BiologyCanvasCompartmentsItem = {
+    x : number!
+    y : number!
+    width : number!
+    height : number!
+    label : string
+    color : string
+    fill : string
+    dash : "dashed" | "dotted"
+    lineWidth : number
+  }
+  type BiologyCanvasBandsItem = {
+    label : string
+    color : string
+  }
+  type BiologyCanvasStagesItem = {
+    label : string!
+    state : "pending" | "active" | "done"
+    color : string
+  }
+  type BiologyCanvasHelix = {
+    x : number
+    y : number
+    width : number
+    height : number
+    rungs : [BiologyCanvasHelixRungsItem]!
+    fork : number
+    colorA : string
+    colorB : string
+    rungColor : string
+  }
+  type BiologyCanvasHelixRungsItem = {
+    a : string
+    b : string
+    state : "paired" | "open" | "new"
+    color : string
+  }
+  type BiologyCanvasHelix3d = {
+    count : number
+    rungs : [BiologyCanvasHelix3dRungsItem]
+    radius : number
+    rise : number
+    twistDeg : number
+    strandAColor : string
+    strandBColor : string
+    backboneRadius : number
+    rungRadius : number
+    x : number
+    y : number
+    z : number
+    unwoundCount : number
+    unwindSpread : number
+  }
+  type BiologyCanvasHelix3dRungsItem = {
+    id : string
+    color : string
+    radius : number
+    label : string
   }
   type BiologyCanvasShapesItem = {
-    type : "line" | "arrow" | "circle" | "rect" | "polygon" | "path" | "text" | "axis" | "grid"!
+    type : "line" | "arrow" | "circle" | "ellipse" | "rect" | "polygon" | "path" | "text" | "axis" | "grid" | "venn-region"!
     id : string
     x : number
     y : number
@@ -42,11 +106,42 @@ orbital BiologyCanvasOrbital {
     fill : string
     lineWidth : number
     opacity : number
+    startAngle : number
+    endAngle : number
+    dash : "dashed" | "dotted"
+    inside : [string]
+    outside : [string]
   }
   type BiologyCanvasShapesItemPointsItem = {
     x : number!
     y : number!
   }
+  type BiologyCanvasReadoutsItem = {
+    label : string!
+    value : string!
+    color : string
+  }
+  type BiologyCanvasTracesItem = {
+    x : number
+    y : number
+    width : number
+    height : number
+    series : [BiologyCanvasTracesItemSeriesItem]!
+    xLabel : string
+    yLabel : string
+    frameColor : string
+    backgroundColor : string
+    backgroundOpacity : number
+  }
+  type BiologyCanvasTracesItemSeriesItem = {
+    samples : [BiologyCanvasTracesItemSeriesItemSamplesItem]!
+    color : string
+    label : string
+  }
+  type BiologyCanvasTracesItemSeriesItemSamplesItem = {
+    x : number!
+    y : number!
+  }
   type BiologyCanvasError = {
     message : string!
     name : string
@@ -74,9 +169,23 @@ orbital BiologyCanvasOrbital {
           height: @config.height
           title: @config.title
           backgroundColor: @config.backgroundColor
+          mode: @config.mode
+          camera: @config.camera
+          lighting: @config.lighting
+          post: @config.post
           nodes: @config.nodes
           edges: @config.edges
+          compartments: @config.compartments
+          bands: @config.bands
+          stages: @config.stages
+          stageStyle: @config.stageStyle
+          helix: @config.helix
+          helix3d: @config.helix3d
           shapes: @config.shapes
+          readouts: @config.readouts
+          traces: @config.traces
+          showGrid: @config.showGrid
+          shadows: @config.shadows
           interactive: @config.interactive
           animate: @config.animate
           onShapeClick: @config.onShapeClick
@@ -91,9 +200,23 @@ orbital BiologyCanvasOrbital {
           height: @config.height
           title: @config.title
           backgroundColor: @config.backgroundColor
+          mode: @config.mode
+          camera: @config.camera
+          lighting: @config.lighting
+          post: @config.post
           nodes: @payload.nodes
           edges: @payload.edges
+          compartments: @payload.compartments
+          bands: @payload.bands
+          stages: @payload.stages
+          stageStyle: @config.stageStyle
+          helix: @config.helix
+          helix3d: @config.helix3d
           shapes: @payload.shapes
+          readouts: @payload.readouts
+          traces: @payload.traces
+          showGrid: @config.showGrid
+          shadows: @config.shadows
           interactive: @config.interactive
           animate: @config.animate
           onShapeClick: @config.onShapeClick
@@ -115,7 +238,12 @@ orbital BiologyCanvasOrbital {
       UPDATE {
         nodes : [BiologyCanvasNodesItem]
         edges : [BiologyCanvasEdgesItem]
+        compartments : [BiologyCanvasCompartmentsItem]
+        bands : [BiologyCanvasBandsItem]
+        stages : [BiologyCanvasStagesItem]
         shapes : [BiologyCanvasShapesItem]
+        readouts : [BiologyCanvasReadoutsItem]
+        traces : [BiologyCanvasTracesItem]
       }
         @description "Live scene update; payload carries the current drawable state."
         @synonyms "tick, redraw, animate, frame"
@@ -143,6 +271,22 @@ orbital BiologyCanvasOrbital {
         @label "Background Color"
         @description "backgroundColor prop"
         @tier "presentation"
+      mode : "2d" | "3d" = "2d"
+        @label "Mode"
+        @description "Painter: 2D raster (default) or 3D mesh scene via the lazy three.js host."
+        @tier "presentation"
+      camera : json = {}
+        @label "Camera"
+        @description "3D only: neutral camera pose ({ mode, zoom, fov, azimuth, target })."
+        @tier "presentation"
+      lighting : json = {}
+        @label "Lighting"
+        @description "3D only: scene light rig as data."
+        @tier "presentation"
+      post : json = {}
+        @label "Post"
+        @description "3D only: post-processing stack (bloom/vignette)."
+        @tier "presentation"
       nodes : [BiologyCanvasNodesItem] = []
         @label "Nodes"
         @description "nodes prop"
@@ -151,17 +295,61 @@ orbital BiologyCanvasOrbital {
         @label "Edges"
         @description "edges prop"
         @tier "presentation"
+      compartments : [BiologyCanvasCompartmentsItem] = []
+        @label "Compartments"
+        @description "Organelle/membrane/cell-boundary ellipses (2D only)."
+        @synonyms "membrane, organelle region, cell boundary"
+        @tier "presentation"
+      bands : [BiologyCanvasBandsItem] = []
+        @label "Bands"
+        @description "Full-width horizontal background stripes, drawn first (2D only)."
+        @synonyms "trophic levels, zones, layers"
+        @tier "presentation"
+      stages : [BiologyCanvasStagesItem] = []
+        @label "Stages"
+        @description "Phase/step chips (2D only)."
+        @synonyms "phases, timeline, cycle"
+        @tier "presentation"
+      stageStyle : "timeline" | "ring" = timeline
+        @label "Stage Style"
+        @description "Layout for `stages`: a bottom timeline strip (default) or a radial ring."
+        @tier "presentation"
+      helix : BiologyCanvasHelix
+        @label "Helix"
+        @description "A DNA double-helix ladder panel (2D only)."
+        @synonyms "DNA ladder, replication fork, base pairs"
+        @tier "presentation"
+      helix3d : BiologyCanvasHelix3d
+        @label "Helix3d"
+        @description "A 3D DNA double-helix ladder. 3D only."
+        @tier "presentation"
       shapes : [BiologyCanvasShapesItem] = []
         @label "Shapes"
-        @description "Extra declarative shapes in canvas pixel coordinates."
+        @description "Extra declarative shapes in canvas pixel coordinates (2D mode only — ignored in 3D)."
+        @tier "presentation"
+      readouts : [BiologyCanvasReadoutsItem] = []
+        @label "Readouts"
+        @description "Top-right status chip row, forwarded to LearningCanvas verbatim."
+        @tier "presentation"
+      traces : [BiologyCanvasTracesItem] = []
+        @label "Traces"
+        @description "Inset sparkline panels, forwarded to LearningCanvas verbatim."
+        @tier "presentation"
+      showGrid : boolean
+        @label "Show Grid"
+        @description "3D only: show the ground grid (default off)."
+        @tier "presentation"
+      shadows : boolean
+        @label "Shadows"
+        @description "3D only: enable shadows. Omitted → the host default."
         @tier "presentation"
-      interactive : boolean = false
+      interactive : boolean
         @label "Interactive"
-        @description "interactive prop"
+        @description "2D: pointer interaction (click/hover). 3D: orbit camera controls."
         @tier "presentation"
       animate : boolean = false
         @label "Animate"
-        @description "animate prop"
+        @description "2D only: continuous redraw loop. 3D motion is entity-state driven."
         @tier "presentation"
       onShapeClick : string = "SHAPE_CLICK"
         @label "On Shape Click"