@almadar/std 16.230.0 → 16.231.0

package/behaviors/lolo/ui/core/atoms/std-language-picker.lolo

@@ -0,0 +1,52 @@
+app std-language-picker "1.0.0"
+"std-language-picker — the language switcher of a multilingual site or app: a globe button showing the current language code that opens a menu listing every language in its own name, with the current one ticked. Each entry links to the same page in that language. Routing convention: the default language lives at the root and every other language under a `/<code>/` prefix (`/pricing`, `/ar/pricing`, `/sl/pricing`), so each language has its own stable URL that can be linked from outside and indexed by search engines. Pick for public websites and app chrome that serve more than one language; std-site-header embeds it."
+type SiteLanguage = { code : string!, label : string!, href : string! }
+orbital LanguagePickerOrbital {
+  entity LanguagePickerView [runtime] {
+    id : string!
+  }
+
+  trait LanguagePickerRender -> @rebindable LanguagePickerView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main @config.pickerContent)
+    }
+
+    config {
+      languages : [SiteLanguage] = [{ code: "en", label: "English", href: "/" }, { code: "ar", label: "العربية", href: "/ar/" }, { code: "sl", label: "Slovenščina", href: "/sl/" }]
+        @label "Languages"
+        @description "Every language this page exists in, each named in its own language, with the href of THIS page in that language. The default language's href has no prefix; the others start with /<code>/."
+        @synonyms "locales, translations, language list, language switcher, i18n"
+        @tier "presentation"
+      currentLanguage : string = "en"
+        @label "Current language"
+        @description "The code of the language this page is in; shown on the button and ticked in the menu"
+        @synonyms "locale, active language, page language"
+        @tier "presentation"
+      pickerContent : render-ui = {
+        type: menu
+        position: bottom-end
+        className: (if (== (array/len @config.languages) 0) hidden "")
+        trigger: {
+          type: button
+          variant: ghost
+          size: sm
+          icon: globe
+          label: (str/upper @config.currentLanguage)
+        }
+        items: (array/map @config.languages (fn entry {
+          id: (object/get @entry code "")
+          label: (object/get @entry label "")
+          href: (object/get @entry href "")
+          icon: (if (== (object/get @entry code "") @config.currentLanguage) check "")
+        }))
+      }
+        @label "Picker body"
+        @tier "internal"
+    }
+  }
+
+  page "/language-picker" as LanguagePickerPage -> LanguagePickerRender
+}

package/behaviors/lolo/ui/core/atoms/std-site-header.lolo

@@ -1,7 +1,10 @@
 app std-site-header "1.0.0"
-"std-site-header — the sticky top bar of a public website: brand (logo + name), navigation links with the current page marked, and an optional call-to-action button. On small screens the links fold into a menu opened by a toggle. Links follow `href` (in-app path, #anchor, or absolute URL); the header action and the small-screen menu links also emit NAV_CLICKED { href, label }. Pick for marketing sites, docs portals and product websites; for signed-in app chrome use std-app-layout."
-type SiteNavLink = { label : string!, href : string! }
+"std-site-header — the sticky top bar of a public website: brand (logo + name), navigation links with the current page marked (a link with children opens a dropdown), an optional language picker (std-language-picker: the same page in each language, default language at the root and the others under /<code>/), and an optional call-to-action button. On small screens the links fold into a menu opened by a toggle, with child links indented under their parent and the call-to-action button at the bottom. Links follow `href` (in-app path, #anchor, or absolute URL); the header action and the small-screen menu links also emit NAV_CLICKED { href, label }. Pick for marketing sites, docs portals and product websites; for signed-in app chrome use std-app-layout."
+type SiteNavLink = { label : string!, href : string!, children : [SiteNavLink] }
+type SiteLanguage = { code : string!, label : string!, href : string! }
 orbital SiteHeaderOrbital {
+  uses LanguagePicker from "std/behaviors/std-language-picker"
+
   entity SiteHeaderView [runtime] {
     id : string!
     menuOpen : boolean = false
@@ -59,6 +62,16 @@ orbital SiteHeaderOrbital {
         @label "Current page path"
         @description "Marks the matching link as active"
         @tier "presentation"
+      languages : [SiteLanguage] = []
+        @label "Languages"
+        @description "Every language this page exists in, each named in its own language, with the href of THIS page in that language (default language at the root, others under /<code>/). Empty hides the language picker."
+        @synonyms "locales, translations, language switcher, i18n"
+        @tier "presentation"
+      currentLanguage : string = "en"
+        @label "Current language"
+        @description "The code of the language this page is in"
+        @synonyms "locale, active language, page language"
+        @tier "presentation"
       actionLabel : string = ""
         @label "Header action label"
         @description "Call-to-action button at the right; empty hides it"
@@ -79,13 +92,18 @@ orbital SiteHeaderOrbital {
           showMenuToggle: false
           brandName: @config.brandName
           logoSrc: @config.logoSrc
-          className: "hidden md:flex"
+          className: "hidden lg:flex"
           navigationItems: (array/map @config.links (fn entry {
             label: (object/get @entry label "")
             href: (object/get @entry href "")
             active: (== (object/get @entry href "") @config.currentPath)
+            children: (array/map (object/get @entry children []) (fn child {
+              label: (object/get @child label "")
+              href: (object/get @child href "")
+              active: (== (object/get @child href "") @config.currentPath)
+            }))
           }))
-          actions: {
+          actions: [@trait.SiteHeaderLanguages, {
             type: button
             label: @config.actionLabel
             href: @config.actionHref
@@ -94,7 +112,7 @@ orbital SiteHeaderOrbital {
             action: NAV_LINK
             actionPayload: { href: @config.actionHref, label: @config.actionLabel }
             className: (if (== @config.actionLabel "") hidden "")
-          }
+          }]
         }, {
           type: header
           variant: mobile
@@ -104,22 +122,59 @@ orbital SiteHeaderOrbital {
           onMenuToggle: MENU_TOGGLE
           brandName: @config.brandName
           logoSrc: @config.logoSrc
-          className: "md:hidden"
+          className: "lg:hidden"
+          actions: [@trait.SiteHeaderLanguages]
         }, {
           type: stack
           direction: vertical
           gap: xs
           align: stretch
-          className: (if @entity.menuOpen "md:hidden border-b border-border bg-card px-4 py-3" hidden)
-          children: (array/map @config.links (fn entry {
+          className: (if @entity.menuOpen "lg:hidden border-b border-border bg-card px-4 py-3" hidden)
+          children: [{
+          type: stack
+          direction: vertical
+          gap: xs
+          align: stretch
+          children: (array/map @config.links (fn (entry) {
+            type: stack
+            direction: vertical
+            gap: xs
+            align: stretch
+            children: [{
+              type: button
+              variant: (if (== (object/get @entry href "") @config.currentPath) secondary ghost)
+              label: (object/get @entry label "")
+              href: (object/get @entry href "")
+              action: NAV_LINK
+              actionPayload: { href: (object/get @entry href ""), label: (object/get @entry label "") }
+              className: "justify-start"
+            }, {
+              type: stack
+              direction: vertical
+              gap: xs
+              align: stretch
+              className: "ps-6"
+              children: (array/map (object/get @entry children []) (fn (child) {
+                type: button
+                variant: (if (== (object/get @child href "") @config.currentPath) secondary ghost)
+                label: (object/get @child label "")
+                href: (object/get @child href "")
+                action: NAV_LINK
+                actionPayload: { href: (object/get @child href ""), label: (object/get @child label "") }
+                className: "justify-start"
+              }))
+            }]
+          }))
+          }, {
             type: button
-            variant: (if (== (object/get @entry href "") @config.currentPath) secondary ghost)
-            label: (object/get @entry label "")
-            href: (object/get @entry href "")
+            label: @config.actionLabel
+            href: @config.actionHref
+            variant: primary
+            size: md
             action: NAV_LINK
-            actionPayload: { href: (object/get @entry href ""), label: (object/get @entry label "") }
-            className: "justify-start"
-          }))
+            actionPayload: { href: @config.actionHref, label: @config.actionLabel }
+            className: (if (== @config.actionLabel "") hidden "mt-2 w-full")
+          }]
         }]
       }
         @label "Header body"
@@ -127,5 +182,12 @@ orbital SiteHeaderOrbital {
     }
   }
 
-  page "/site-header" as SiteHeaderPage -> SiteHeaderRender
+  trait SiteHeaderLanguages = LanguagePicker.traits.LanguagePickerRender -> SiteHeaderView {
+    config {
+      languages: @config.languages
+      currentLanguage: @config.currentLanguage
+    }
+  }
+
+  page "/site-header" as SiteHeaderPage -> SiteHeaderRender, SiteHeaderLanguages
 }

package/behaviors/lolo/ui/core/atoms/std-step-flow.lolo

@@ -530,6 +530,7 @@ orbital StepFlowOrbital {
             variant: primary
           }]
           direction: horizontal
+          wrap: true
           gap: sm
           type: stack
         }]

package/behaviors/lolo/ui/core/molecules/ui-header.lolo

@@ -8,6 +8,7 @@ orbital HeaderOrbital {
     icon : icon
     badge : string
     active : boolean
+    children : [HeaderNavigationItemsItem]
   }
   type HeaderUserAvatar = {
     src : asset

package/behaviors/lolo/ui/core/molecules/ui-icon-button.lolo

@@ -0,0 +1,105 @@
+app ui-icon-button "1.0.0"
+"IconButton — UI factory (1:1 with the @almadar/ui icon-button pattern)."
+;; @pattern "icon-button"
+orbital IconButtonOrbital {
+  type IconButtonIconAsset = {
+    url : asset!
+    role : string!
+    category : string!
+    animations : [string]
+    style : "pixel" | "vector" | "hd" | "1-bit" | "isometric"
+    variant : string
+    dimension : "2d" | "3d"
+    aspect : "1:1" | "16:9" | "5:7" | "8:1" | "4:1" | "5:3" | "1:2"
+    atlas : asset
+    sprite : string
+    name : string
+    thumbnailUrl : string
+  }
+
+  entity IconButtonItem [runtime] {
+    id : string!
+  }
+
+  trait IconButtonRender -> @rebindable IconButtonItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          className: @config.className
+          variant: @config.variant
+          size: @config.size
+          isLoading: @config.isLoading
+          iconAsset: @config.iconAsset
+          action: @config.action
+          actionPayload: @config.actionPayload
+          disabled: @config.disabled
+          href: @config.href
+          icon: @config.icon
+          label: @config.label
+          tooltipPosition: @config.tooltipPosition
+          type: icon-button
+        })
+    }
+
+    emits {
+      @config.action -> external { }
+        @description "Declarative event name — emits UI:{action} via eventBus on click"
+        @tier "essential"
+    }
+
+    config {
+      className : string
+        @label "Class Name"
+        @description "Additional CSS classes applied to the root element."
+        @tier "presentation"
+      variant : "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default" | "link" = ghost
+        @label "Variant"
+        @description "variant prop"
+        @tier "presentation"
+      size : "sm" | "md" | "lg" = sm
+        @label "Size"
+        @description "size prop"
+        @tier "presentation"
+      isLoading : boolean
+        @label "Is Loading"
+        @description "isLoading prop"
+        @tier "presentation"
+      iconAsset : IconButtonIconAsset
+        @label "Icon Asset"
+        @description "Asset image rendered as the leading icon; takes precedence over icon/leftIcon when provided."
+        @tier "presentation"
+      action : event = "ACTION"
+        @label "Action"
+        @description "Declarative event name — emits UI:{action} via eventBus on click"
+        @tier "presentation"
+      actionPayload : @payload @config.action
+        @label "Action Payload"
+        @description "Payload to include with the action event"
+        @tier "presentation"
+      disabled : boolean
+        @label "Disabled"
+        @description "Disable the button (greys out, blocks click events)"
+        @tier "presentation"
+      href : string
+        @label "Href"
+        @description "Makes the button a link: `#anchor` scrolls, an absolute URL loads, a path navigates in-app"
+        @tier "presentation"
+      icon : icon = "circle"
+        @label "Icon"
+        @description "icon prop"
+        @tier "presentation"
+      label : string = ""
+        @label "Label"
+        @description "What the button does — its accessible name and its tooltip."
+        @tier "presentation"
+      tooltipPosition : "top" | "bottom" | "left" | "right" = right
+        @label "Tooltip Position"
+        @description "Where the tooltip opens."
+        @tier "presentation"
+    }
+  }
+
+  page "/icon-button" as IconButtonPage -> IconButtonRender
+}

package/behaviors/lolo/ui/core/molecules/ui-menu.lolo

@@ -10,6 +10,7 @@ orbital MenuOrbital {
     disabled : boolean
     title : string
     event : event
+    href : string
     url : string
     variant : "default" | "danger"
     subMenu : [MenuItemsItem]

package/behaviors/lolo/ui/core/molecules/ui-top-nav-item.lolo

@@ -0,0 +1,53 @@
+app ui-top-nav-item "1.0.0"
+"TopNavItem — UI factory (1:1 with the @almadar/ui top-nav-item pattern)."
+;; @pattern "top-nav-item"
+orbital TopNavItemOrbital {
+  type TopNavItemItem = {
+    label : string!
+    href : string
+    icon : icon
+    badge : string
+    active : boolean
+    children : [TopNavItemItem]
+  }
+
+  entity TopNavItemItem [runtime] {
+    id : string!
+  }
+
+  trait TopNavItemRender -> @rebindable TopNavItemItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          item: @config.item
+          activeHref: @config.activeHref
+          tone: @config.tone
+          className: @config.className
+          type: top-nav-item
+        })
+    }
+
+    config {
+      item : TopNavItemItem = { label: "Label", href: "Href", icon: "circle", badge: "Badge", active: false, children: [] }
+        @label "Item"
+        @description "item prop"
+        @tier "presentation"
+      activeHref : string
+        @label "Active Href"
+        @description "The href of the active page, used to mark the item (or its parent) active."
+        @tier "presentation"
+      tone : "solid" | "soft" = solid
+        @label "Tone"
+        @description "Active styling: `solid` fills with the primary colour (dashboard top bar); `soft` tints it (site header)."
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "className prop"
+        @tier "presentation"
+    }
+  }
+
+  page "/top-nav-item" as TopNavItemPage -> TopNavItemRender
+}

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

@@ -32,6 +32,12 @@ orbital DockLayoutOrbital {
           bottomPanelMinSize: @config.bottomPanelMinSize
           secondarySidebarCollapsed: @config.secondarySidebarCollapsed
           onSecondarySidebarCollapsedChange: @config.onSecondarySidebarCollapsedChange
+          compact: @config.compact
+          secondarySidebarLabel: @config.secondarySidebarLabel
+          secondarySidebarIcon: @config.secondarySidebarIcon
+          bottomPanelLabel: @config.bottomPanelLabel
+          bottomPanelIcon: @config.bottomPanelIcon
+          topBarActions: @config.topBarActions
           className: @config.className
           railClassName: @config.railClassName
           sidebarClassName: @config.sidebarClassName
@@ -96,15 +102,15 @@ orbital DockLayoutOrbital {
         @label "Secondary Sidebar"
         @description "Collapsible right sidebar."
         @tier "presentation"
-      railWidth : number = 56
+      railWidth : number
         @label "Rail Width"
-        @description "Width of `rail` in pixels. @default 56"
+        @description "Width of `rail` in pixels; the rail sizes the column itself when omitted."
         @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
+      sidebarCollapsed : boolean
         @label "Sidebar Collapsed"
         @description "Whether `sidebar` is collapsed. @default false"
         @tier "presentation"
@@ -124,7 +130,7 @@ orbital DockLayoutOrbital {
         @label "Sidebar Min Size"
         @description "Minimum sidebar size in pixels, forwarded to SplitPane's `minSize`. @default 160"
         @tier "presentation"
-      bottomPanelCollapsed : boolean = false
+      bottomPanelCollapsed : boolean
         @label "Bottom Panel Collapsed"
         @description "Whether `bottomPanel` is collapsed. @default false"
         @tier "presentation"
@@ -144,7 +150,7 @@ orbital DockLayoutOrbital {
         @label "Bottom Panel Min Size"
         @description "Minimum bottom panel size in pixels, forwarded to SplitPane's `minSize`. @default 120"
         @tier "presentation"
-      secondarySidebarCollapsed : boolean = false
+      secondarySidebarCollapsed : boolean
         @label "Secondary Sidebar Collapsed"
         @description "Whether `secondarySidebar` is collapsed. @default false"
         @tier "presentation"
@@ -152,6 +158,30 @@ orbital DockLayoutOrbital {
         @label "On Secondary Sidebar Collapsed Change"
         @description "onSecondarySidebarCollapsedChange prop"
         @tier "presentation"
+      compact : boolean
+        @label "Compact"
+        @description "The mobile variant; decided by the viewport (narrower than 1024px) when omitted."
+        @tier "presentation"
+      secondarySidebarLabel : string
+        @label "Secondary Sidebar Label"
+        @description "Compact: the top-bar button that opens `secondarySidebar` (e.g. 'Inspector', 'Chat')."
+        @tier "presentation"
+      secondarySidebarIcon : icon
+        @label "Secondary Sidebar Icon"
+        @description "secondarySidebarIcon prop"
+        @tier "presentation"
+      bottomPanelLabel : string
+        @label "Bottom Panel Label"
+        @description "Compact: the top-bar button that opens `bottomPanel`."
+        @tier "presentation"
+      bottomPanelIcon : icon
+        @label "Bottom Panel Icon"
+        @description "bottomPanelIcon prop"
+        @tier "presentation"
+      topBarActions : node
+        @label "Top Bar Actions"
+        @description "Compact: the host's own actions at the end of the top bar (e.g. Run)."
+        @tier "presentation"
       className : string
         @label "Class Name"
         @description "Additional CSS classes on the root frame."