@almadar/std 16.200.0 → 16.202.0

package/behaviors/lolo/ui/core/molecules/ui-command-palette.lolo

@@ -0,0 +1,116 @@
+app ui-command-palette "1.0.0"
+"CommandPalette — UI factory (1:1 with the @almadar/ui command-palette pattern)."
+orbital CommandPaletteOrbital {
+  type CommandPaletteCommandsItem = {
+    id : string!
+    label : string!
+    icon : icon
+    shortcut : string
+    keywords : [string]
+    group : string
+    disabled : boolean
+    event : string
+    action : string
+    actionPayload : Map string scalar
+  }
+  type CommandPaletteSELECTCommand = {
+    id : string!
+    label : string!
+    icon : icon
+    shortcut : string
+    keywords : [string]
+    group : string
+    disabled : boolean
+    event : string
+    action : string
+    actionPayload : Map string scalar
+  }
+
+  entity CommandPaletteItem [runtime] {
+    id : string!
+    open : boolean = false
+  }
+
+  trait CommandPaletteRender -> @rebindable CommandPaletteItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (set @entity.open @config.open)
+        (render-ui main {
+          open: @entity.open
+          onOpenChange: @config.onOpenChange
+          commands: @config.commands
+          onSelect: @config.onSelect
+          placeholder: @config.placeholder
+          emptyLabel: @config.emptyLabel
+          className: @config.className
+          type: command-palette
+        })
+      OPEN_CHANGE -> idle
+        (set @entity.open ?open)
+        (render-ui main {
+          open: @entity.open
+          onOpenChange: @config.onOpenChange
+          commands: @config.commands
+          onSelect: @config.onSelect
+          placeholder: @config.placeholder
+          emptyLabel: @config.emptyLabel
+          className: @config.className
+          type: command-palette
+        })
+    }
+
+    emits {
+      @config.onOpenChange -> external {
+        open : boolean
+      }
+        @description "Called to open/close the overlay (Escape, overlay click, or a selection)"
+        @tier "essential"
+      @config.onSelect -> external {
+        command : CommandPaletteSELECTCommand
+      }
+        @description "Called with the selected command (click, or Enter on the highlighted row)"
+        @tier "essential"
+    }
+
+    listens {
+      OPEN_CHANGE {
+        open : boolean
+      }
+    }
+
+    config {
+      open : boolean = false
+        @label "Open"
+        @description "Whether the palette overlay is open"
+        @tier "presentation"
+      onOpenChange : event = "OPEN_CHANGE"
+        @label "On Open Change"
+        @description "Called to open/close the overlay (Escape, overlay click, or a selection)"
+        @tier "presentation"
+      commands : [CommandPaletteCommandsItem] = [{ id: "Id", label: "Label", icon: "circle", shortcut: "Shortcut", keywords: ["Item", "Item 2"], group: "Group", disabled: false, action: "Action" }, { id: "Id 2", label: "Label 2", icon: "circle", shortcut: "Shortcut 2", keywords: ["Item", "Item 2"], group: "Group 2", disabled: true, action: "Action 2" }]
+        @label "Commands"
+        @description "Commands listed in the palette, filtered as the user types"
+        @tier "presentation"
+      onSelect : event = "SELECT"
+        @label "On Select"
+        @description "Called with the selected command (click, or Enter on the highlighted row)"
+        @tier "presentation"
+      placeholder : string = "Type a command..."
+        @label "Placeholder"
+        @description "Search field placeholder. Consumers own i18n — plain string prop, no package-internal translation (matches FloatingToolbar's convention)."
+        @tier "presentation"
+      emptyLabel : string = "No matching commands"
+        @label "Empty Label"
+        @description "Label shown when no command matches the query"
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes on the overlay's dialog"
+        @tier "presentation"
+    }
+  }
+
+  page "/command-palette" as CommandPalettePage -> CommandPaletteRender
+}

package/behaviors/lolo/ui/core/molecules/ui-file-tree.lolo

@@ -36,6 +36,7 @@ orbital FileTreeOrbital {
           onNodeAction: @config.onNodeAction
           nodeActionIcon: @config.nodeActionIcon
           nodeActionLabel: @config.nodeActionLabel
+          onNodeReorder: @config.onNodeReorder
           className: @config.className
           indent: @config.indent
           type: file-tree
@@ -91,6 +92,10 @@ orbital FileTreeOrbital {
         @label "Node Action Label"
         @description "Accessible label/tooltip for the row hover action."
         @tier "presentation"
+      onNodeReorder : event = ""
+        @label "On Node Reorder"
+        @description "Called when a row is dropped onto another, in flat `items` mode; carries the moved node's id, its new parent id (`null` for a root drop), and its index within the new parent's children. Presence-gated: binding this prop is what turns on row dragging."
+        @tier "presentation"
       className : string
         @label "Class Name"
         @description "CSS class"

package/behaviors/lolo/ui/core/molecules/ui-floating-toolbar.lolo

@@ -0,0 +1,55 @@
+app ui-floating-toolbar "1.0.0"
+"FloatingToolbar — UI factory (1:1 with the @almadar/ui floating-toolbar pattern)."
+orbital FloatingToolbarOrbital {
+  type FloatingToolbarItemsItem = {
+    id : string!
+    icon : icon!
+    label : string!
+    event : string
+    action : string
+    actionPayload : Map string scalar
+    active : boolean
+    disabled : boolean
+    testId : string
+  }
+
+  entity FloatingToolbarItem [runtime] {
+    id : string!
+  }
+
+  trait FloatingToolbarRender -> @rebindable FloatingToolbarItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          items: @config.items
+          position: @config.position
+          children: @config.children
+          className: @config.className
+          type: floating-toolbar
+        })
+    }
+
+    config {
+      items : [FloatingToolbarItemsItem] = [{ id: "Id", icon: "circle", label: "Label", action: "Action", active: false, disabled: false, testId: "Test Id" }, { id: "Id 2", icon: "circle", label: "Label 2", action: "Action 2", active: true, disabled: true, testId: "Test Id 2" }]
+        @label "Items"
+        @description "Tool items rendered as icon buttons"
+        @tier "presentation"
+      position : "bottom-center" | "bottom-left" | "bottom-right" = "bottom-center"
+        @label "Position"
+        @description "Strip position within the app frame."
+        @tier "presentation"
+      children : node
+        @label "Children"
+        @description "Custom cells appended after the items, separated by a divider"
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes on the positioned root"
+        @tier "presentation"
+    }
+  }
+
+  page "/floating-toolbar" as FloatingToolbarPage -> FloatingToolbarRender
+}

package/behaviors/lolo/ui/core/organisms/ui-dock-layout.lolo

@@ -0,0 +1,186 @@
+app ui-dock-layout "1.0.0"
+"DockLayout — UI factory (1:1 with the @almadar/ui dock-layout pattern)."
+orbital DockLayoutOrbital {
+  entity DockLayoutItem [runtime] {
+    id : string!
+  }
+
+  trait DockLayoutRender -> @rebindable DockLayoutItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          rail: @config.rail
+          sidebar: @config.sidebar
+          main: @config.main
+          bottomPanel: @config.bottomPanel
+          statusBar: @config.statusBar
+          secondarySidebar: @config.secondarySidebar
+          railWidth: @config.railWidth
+          secondarySidebarWidth: @config.secondarySidebarWidth
+          sidebarCollapsed: @config.sidebarCollapsed
+          onSidebarCollapsedChange: @config.onSidebarCollapsedChange
+          sidebarWidth: @config.sidebarWidth
+          onSidebarWidthChange: @config.onSidebarWidthChange
+          sidebarMinSize: @config.sidebarMinSize
+          bottomPanelCollapsed: @config.bottomPanelCollapsed
+          onBottomPanelCollapsedChange: @config.onBottomPanelCollapsedChange
+          bottomPanelHeight: @config.bottomPanelHeight
+          onBottomPanelHeightChange: @config.onBottomPanelHeightChange
+          bottomPanelMinSize: @config.bottomPanelMinSize
+          secondarySidebarCollapsed: @config.secondarySidebarCollapsed
+          onSecondarySidebarCollapsedChange: @config.onSecondarySidebarCollapsedChange
+          className: @config.className
+          railClassName: @config.railClassName
+          sidebarClassName: @config.sidebarClassName
+          mainClassName: @config.mainClassName
+          bottomPanelClassName: @config.bottomPanelClassName
+          statusBarClassName: @config.statusBarClassName
+          secondarySidebarClassName: @config.secondarySidebarClassName
+          type: dock-layout
+        })
+    }
+
+    emits {
+      @config.onSidebarCollapsedChange -> external {
+        collapsed : boolean
+      }
+        @description "onSidebarCollapsedChange prop"
+        @tier "essential"
+      @config.onSidebarWidthChange -> external {
+        width : number
+      }
+        @description "onSidebarWidthChange prop"
+        @tier "essential"
+      @config.onBottomPanelCollapsedChange -> external {
+        collapsed : boolean
+      }
+        @description "onBottomPanelCollapsedChange prop"
+        @tier "essential"
+      @config.onBottomPanelHeightChange -> external {
+        height : number
+      }
+        @description "onBottomPanelHeightChange prop"
+        @tier "essential"
+      @config.onSecondarySidebarCollapsedChange -> external {
+        collapsed : boolean
+      }
+        @description "onSecondarySidebarCollapsedChange prop"
+        @tier "essential"
+    }
+
+    config {
+      rail : node
+        @label "Rail"
+        @description "Fixed-width far-left vertical strip (e.g. an icon nav rail)."
+        @tier "presentation"
+      sidebar : node
+        @label "Sidebar"
+        @description "Collapsible, resizable left sidebar."
+        @tier "presentation"
+      main : node = []
+        @label "Main"
+        @description "Required center region."
+        @tier "presentation"
+      bottomPanel : node
+        @label "Bottom Panel"
+        @description "Collapsible, resizable-height bottom panel."
+        @tier "presentation"
+      statusBar : node
+        @label "Status Bar"
+        @description "Slim strip pinned to the bottom of the frame, below the bottom panel."
+        @tier "presentation"
+      secondarySidebar : node
+        @label "Secondary Sidebar"
+        @description "Collapsible right sidebar."
+        @tier "presentation"
+      railWidth : number = 56
+        @label "Rail Width"
+        @description "Width of `rail` in pixels. @default 56"
+        @tier "presentation"
+      secondarySidebarWidth : number = 280
+        @label "Secondary Sidebar Width"
+        @description "Width of `secondarySidebar` in pixels (fixed — not resizable). @default 280"
+        @tier "presentation"
+      sidebarCollapsed : boolean = false
+        @label "Sidebar Collapsed"
+        @description "Whether `sidebar` is collapsed. @default false"
+        @tier "presentation"
+      onSidebarCollapsedChange : event = "SIDEBAR_COLLAPSED_CHANGE"
+        @label "On Sidebar Collapsed Change"
+        @description "onSidebarCollapsedChange prop"
+        @tier "presentation"
+      sidebarWidth : number = 20
+        @label "Sidebar Width"
+        @description "Sidebar size as a SplitPane ratio (0-100, percentage of the sidebar/main split). @default 20"
+        @tier "presentation"
+      onSidebarWidthChange : event = "SIDEBAR_WIDTH_CHANGE"
+        @label "On Sidebar Width Change"
+        @description "onSidebarWidthChange prop"
+        @tier "presentation"
+      sidebarMinSize : number = 160
+        @label "Sidebar Min Size"
+        @description "Minimum sidebar size in pixels, forwarded to SplitPane's `minSize`. @default 160"
+        @tier "presentation"
+      bottomPanelCollapsed : boolean = false
+        @label "Bottom Panel Collapsed"
+        @description "Whether `bottomPanel` is collapsed. @default false"
+        @tier "presentation"
+      onBottomPanelCollapsedChange : event = "BOTTOM_PANEL_COLLAPSED_CHANGE"
+        @label "On Bottom Panel Collapsed Change"
+        @description "onBottomPanelCollapsedChange prop"
+        @tier "presentation"
+      bottomPanelHeight : number = 30
+        @label "Bottom Panel Height"
+        @description "Bottom panel size as a SplitPane ratio (0-100, percentage given to the panel). @default 30"
+        @tier "presentation"
+      onBottomPanelHeightChange : event = "BOTTOM_PANEL_HEIGHT_CHANGE"
+        @label "On Bottom Panel Height Change"
+        @description "onBottomPanelHeightChange prop"
+        @tier "presentation"
+      bottomPanelMinSize : number = 120
+        @label "Bottom Panel Min Size"
+        @description "Minimum bottom panel size in pixels, forwarded to SplitPane's `minSize`. @default 120"
+        @tier "presentation"
+      secondarySidebarCollapsed : boolean = false
+        @label "Secondary Sidebar Collapsed"
+        @description "Whether `secondarySidebar` is collapsed. @default false"
+        @tier "presentation"
+      onSecondarySidebarCollapsedChange : event = "SECONDARY_SIDEBAR_COLLAPSED_CHANGE"
+        @label "On Secondary Sidebar Collapsed Change"
+        @description "onSecondarySidebarCollapsedChange prop"
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes on the root frame."
+        @tier "presentation"
+      railClassName : string
+        @label "Rail Class Name"
+        @description "railClassName prop"
+        @tier "presentation"
+      sidebarClassName : string
+        @label "Sidebar Class Name"
+        @description "sidebarClassName prop"
+        @tier "presentation"
+      mainClassName : string
+        @label "Main Class Name"
+        @description "mainClassName prop"
+        @tier "presentation"
+      bottomPanelClassName : string
+        @label "Bottom Panel Class Name"
+        @description "bottomPanelClassName prop"
+        @tier "presentation"
+      statusBarClassName : string
+        @label "Status Bar Class Name"
+        @description "statusBarClassName prop"
+        @tier "presentation"
+      secondarySidebarClassName : string
+        @label "Secondary Sidebar Class Name"
+        @description "secondarySidebarClassName prop"
+        @tier "presentation"
+    }
+  }
+
+  page "/dock-layout" as DockLayoutPage -> DockLayoutRender
+}

package/behaviors/lolo/ui/core/organisms/ui-split-pane.lolo

@@ -3,6 +3,7 @@ app ui-split-pane "1.0.0"
 orbital SplitPaneOrbital {
   entity SplitPaneItem [runtime] {
     id : string!
+    ratio : number
   }
 
   trait SplitPaneRender -> @rebindable SplitPaneItem [interaction, instance] {
@@ -10,9 +11,10 @@ orbital SplitPaneOrbital {
 
     state idle {
       INIT -> idle
+        (set @entity.ratio @config.ratio)
         (render-ui main {
           direction: @config.direction
-          ratio: @config.ratio
+          ratio: @entity.ratio
           minSize: @config.minSize
           resizable: @config.resizable
           left: @config.left
@@ -20,8 +22,38 @@ orbital SplitPaneOrbital {
           className: @config.className
           leftClassName: @config.leftClassName
           rightClassName: @config.rightClassName
+          onRatioChange: @config.onRatioChange
           type: split-pane
         })
+      RATIO_CHANGE -> idle
+        (set @entity.ratio ?ratio)
+        (render-ui main {
+          direction: @config.direction
+          ratio: @entity.ratio
+          minSize: @config.minSize
+          resizable: @config.resizable
+          left: @config.left
+          right: @config.right
+          className: @config.className
+          leftClassName: @config.leftClassName
+          rightClassName: @config.rightClassName
+          onRatioChange: @config.onRatioChange
+          type: split-pane
+        })
+    }
+
+    emits {
+      @config.onRatioChange -> external {
+        ratio : number
+      }
+        @description "Called with the new ratio while dragging. Providing this makes `ratio` controlled — the rendered split always tracks the prop instead of internal state, mirroring a controlled input. Omit for uncontrolled (self-tracked) behavior."
+        @tier "essential"
+    }
+
+    listens {
+      RATIO_CHANGE {
+        ratio : number
+      }
     }
 
     config {
@@ -61,6 +93,10 @@ orbital SplitPaneOrbital {
         @label "Right Class Name"
         @description "Class for right/bottom pane"
         @tier "presentation"
+      onRatioChange : event = "RATIO_CHANGE"
+        @label "On Ratio Change"
+        @description "Called with the new ratio while dragging. Providing this makes `ratio` controlled — the rendered split always tracks the prop instead of internal state, mirroring a controlled input. Omit for uncontrolled (self-tracked) behavior."
+        @tier "presentation"
     }
   }
 

package/behaviors/lolo/ui/game/atoms/std-audio-cue.lolo

@@ -0,0 +1,138 @@
+app std-audio-cue "1.0.0"
+"Headless-ish sound driver: the SOLE writer of cue/cueSeq/music/muted/volume, rendered through the game-audio-cue atom which mounts @almadar/ui's useGameAudio hook. Intents: CUE plays a one-shot SFX by manifest key (cueSeq increments so the same key can re-fire), MUSIC crossfades to a looping track by key, STOP_MUSIC fades it out, MUTE/UNMUTE/TOGGLE_MUTE flip playback and emit AUDIO_MUTED, SET_VOLUME sets master volume, RESTART reseeds from config. The manifest and baseUrl are config, not runtime state — swap them per game by rebinding this atom's config, never by hand-authoring a second audio layer."
+orbital AudioCueOrbital {
+  type SoundEntry = {
+    path : string
+    volume : number
+    loop : boolean
+    poolSize : number
+    autostart : boolean
+    crossfade : boolean
+    crossfadeDurationMs : number
+  }
+
+  entity AudioState [runtime, shared] {
+    id : string!
+    cue : string = ""
+    cueSeq : number = 0
+    music : string = ""
+    muted : boolean = false
+    volume : number = 1
+  }
+
+  trait AudioCue -> @rebindable AudioState [lifecycle] {
+    initial: active
+
+    state active {
+      INIT -> active
+        (set @entity.cue "")
+        (set @entity.cueSeq 0)
+        (set @entity.music @config.initialMusic)
+        (set @entity.muted @config.initialMuted)
+        (set @entity.volume @config.initialVolume)
+        (render-ui main {
+          cue: @entity.cue
+          cueSeq: @entity.cueSeq
+          music: @entity.music
+          muted: @entity.muted
+          volume: @entity.volume
+          manifest: @config.manifest
+          baseUrl: @config.baseUrl
+          type: game-audio-cue
+        })
+
+      CUE -> active
+        (set @entity.cue ?key)
+        (set @entity.cueSeq (+ @entity.cueSeq 1))
+
+      MUSIC -> active
+        (set @entity.music ?key)
+
+      STOP_MUSIC -> active
+        (set @entity.music "")
+
+      MUTE -> active
+        (set @entity.muted true)
+        (emit AUDIO_MUTED { muted: true })
+
+      UNMUTE -> active
+        (set @entity.muted false)
+        (emit AUDIO_MUTED { muted: false })
+
+      TOGGLE_MUTE -> active
+        (set @entity.muted (not @entity.muted))
+        (emit AUDIO_MUTED { muted: @entity.muted })
+
+      SET_VOLUME -> active
+        (set @entity.volume ?volume)
+
+      RESTART -> active
+        (set @entity.cue "")
+        (set @entity.cueSeq 0)
+        (set @entity.music @config.initialMusic)
+        (set @entity.muted @config.initialMuted)
+        (set @entity.volume @config.initialVolume)
+    }
+
+    emits {
+      AUDIO_MUTED -> external {
+        muted : boolean!
+      }
+        @description "Mute state changed via MUTE/UNMUTE/TOGGLE_MUTE."
+        @synonyms "mute-changed, sound-toggled"
+        @tier "domain"
+    }
+
+    listens {
+      CUE { key : string! }
+        @description "Play a one-shot SFX by manifest key; re-fires even when key repeats."
+        @tier "domain"
+      MUSIC { key : string! }
+        @description "Crossfade to a looping background track by manifest key."
+        @tier "domain"
+      STOP_MUSIC
+        @description "Fade out and stop the current music."
+        @tier "domain"
+      MUTE
+        @description "Mute all playback."
+        @tier "domain"
+      UNMUTE
+        @description "Unmute playback."
+        @tier "domain"
+      TOGGLE_MUTE
+        @description "Flip the current mute state."
+        @tier "domain"
+      SET_VOLUME { volume : number! }
+        @description "Set master volume 0-1."
+        @tier "domain"
+      RESTART
+        @description "Reseed cue/music/muted/volume from config."
+        @tier "domain"
+    }
+
+    config {
+      manifest : Map string SoundEntry = {}
+        @label "Manifest"
+        @description "Sound definitions keyed by logical name — path(s), volume, loop, pooling, autostart, crossfade."
+        @tier "domain"
+      baseUrl : string = ""
+        @label "Base Url"
+        @description "Prefix prepended to every manifest path."
+        @tier "infra"
+      initialMuted : boolean = false
+        @label "Initial Muted"
+        @description "Muted state seeded on INIT/RESTART."
+        @tier "presentation"
+      initialVolume : number = 1
+        @label "Initial Volume"
+        @description "Master volume 0-1 seeded on INIT/RESTART."
+        @tier "presentation"
+      initialMusic : string = ""
+        @label "Initial Music"
+        @description "Manifest key auto-played as looping music on INIT/RESTART; empty plays none."
+        @tier "presentation"
+    }
+  }
+
+  page "/audio-cue" as AudioCuePage -> AudioCue
+}