@almadar/std 16.228.0 → 16.229.0

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

@@ -0,0 +1,159 @@
+app std-site-footer "1.0.0"
+"std-site-footer — the footer at the bottom of a public site: brand name and tagline, columns of links, and a bottom row with the copyright line and legal links. Links follow `href` (in-app path, #anchor, or absolute URL) and each click emits FOOTER_LINK_CLICKED. Pick for marketing sites, docs portals and product websites."
+type FooterLink = { label : string!, href : string! }
+type FooterColumn = { title : string!, links : [FooterLink] }
+orbital SiteFooterOrbital {
+
+  entity SiteFooterView [runtime] {
+    id : string!
+  }
+
+  trait SiteFooterRender -> @rebindable SiteFooterView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          type: box
+          paddingY: xl
+          border: true
+          fullWidth: true
+          className: "border-x-0 border-b-0"
+          children: [{
+            type: container
+            size: xl
+            maxWidth: xl
+            padding: lg
+            children: [{
+              type: stack
+              direction: vertical
+              gap: xl
+              children: [{
+                type: split
+                ratio: "1:2"
+                gap: xl
+                children: [{
+                  type: stack
+                  direction: vertical
+                  gap: sm
+                  children: [{
+                  type: typography
+                  content: @config.brandName
+                  variant: h5
+                  weight: bold
+                }, {
+                  type: typography
+                  content: @config.tagline
+                  variant: body2
+                  color: muted
+                  className: (if (== @config.tagline "") hidden "max-w-xs text-pretty")
+                }]
+                }, {
+                  type: simple-grid
+                  cols: (math/min (math/max (array/len @config.columns) 1) 4)
+                  gap: lg
+                  children: (array/map @config.columns (fn column {
+                    type: stack
+                    direction: vertical
+                    gap: sm
+                    children: [{
+                      type: typography
+                      content: (object/get @column title "")
+                      variant: label
+                      weight: semibold
+                    }, {
+                      type: stack
+                      direction: vertical
+                      gap: xs
+                      align: start
+                      children: (array/map (object/get @column links []) (fn entry {
+                        type: button
+                        variant: link
+                        label: (object/get @entry label "")
+                        href: (object/get @entry href "")
+                        action: FOOTER_LINK
+                        actionPayload: { label: (object/get @entry label ""), href: (object/get @entry href "") }
+                      }))
+                    }]
+                  }))
+                }]
+              }, {
+                type: divider
+              }, {
+                type: stack
+                direction: horizontal
+                gap: md
+                wrap: true
+                align: center
+                justify: between
+                children: [{
+                  type: typography
+                  content: @config.copyright
+                  variant: caption
+                  color: muted
+                }, {
+                  type: stack
+                  direction: horizontal
+                  gap: md
+                  wrap: true
+                  children: (array/map @config.legalLinks (fn entry {
+                    type: button
+                    variant: link
+                    label: (object/get @entry label "")
+                    href: (object/get @entry href "")
+                    action: FOOTER_LINK
+                    actionPayload: { label: (object/get @entry label ""), href: (object/get @entry href "") }
+                  }))
+                }]
+              }]
+            }]
+          }]
+        })
+      FOOTER_LINK -> idle
+        (emit FOOTER_LINK_CLICKED { label: ?label, href: ?href })
+    }
+
+    emits {
+      FOOTER_LINK_CLICKED -> external {
+        label : string
+        href : string
+      }
+        @description "A footer link was clicked; carries its label and href."
+        @tier "domain"
+    }
+
+    listens {
+      FOOTER_LINK {
+        label : string
+        href : string
+      }
+        @description "Footer link click."
+        @tier "internal"
+    }
+
+    config {
+      brandName : string = "Almadar"
+        @label "Brand name"
+        @synonyms "company, product name, logo text"
+        @tier "presentation"
+      tagline : string = ""
+        @label "Tagline"
+        @description "One line under the brand name; empty hides it"
+        @tier "presentation"
+      columns : [FooterColumn] = [{ title: "Product", links: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }] }, { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Blog", href: "/blog" }] }]
+        @label "Link columns"
+        @description "Each column: a title and its links (label + href)"
+        @synonyms "sitemap, footer menu, footer navigation"
+        @tier "presentation"
+      copyright : string = "© Almadar"
+        @label "Copyright line"
+        @tier "presentation"
+      legalLinks : [FooterLink] = []
+        @label "Legal links"
+        @description "Links in the bottom row, e.g. Privacy and Terms"
+        @tier "presentation"
+    }
+  }
+
+  page "/site-footer" as SiteFooterPage -> SiteFooterRender
+}

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

@@ -0,0 +1,131 @@
+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! }
+orbital SiteHeaderOrbital {
+  entity SiteHeaderView [runtime] {
+    id : string!
+    menuOpen : boolean = false
+  }
+
+  trait SiteHeaderRender -> @rebindable SiteHeaderView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (set @entity.menuOpen false)
+        (render-ui main @config.headerContent)
+      MENU_TOGGLE -> idle
+        (set @entity.menuOpen (not @entity.menuOpen))
+        (render-ui main @config.headerContent)
+      NAV_LINK -> idle
+        (set @entity.menuOpen false)
+        (render-ui main @config.headerContent)
+        (emit NAV_CLICKED { href: ?href, label: ?label })
+    }
+
+    emits {
+      NAV_CLICKED -> external {
+        href : string
+        label : string
+      }
+        @description "A navigation link or the header action was clicked; carries its href and label."
+        @synonyms "menu click, nav click, header link"
+        @tier "domain"
+    }
+
+    listens {
+      NAV_LINK {
+        href : string
+        label : string
+      }
+        @description "Navigation link click."
+        @tier "internal"
+    }
+
+    config {
+      brandName : string = "Almadar"
+        @label "Brand name"
+        @synonyms "site name, company, logo text"
+        @tier "presentation"
+      logoSrc : string = ""
+        @label "Logo image"
+        @description "Logo URL; empty shows the name only"
+        @tier "presentation"
+      links : [SiteNavLink] = [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }, { label: "About", href: "/about" }]
+        @label "Navigation links"
+        @synonyms "menu, nav items, top navigation"
+        @tier "presentation"
+      currentPath : string = "/"
+        @label "Current page path"
+        @description "Marks the matching link as active"
+        @tier "presentation"
+      actionLabel : string = ""
+        @label "Header action label"
+        @description "Call-to-action button at the right; empty hides it"
+        @synonyms "cta, sign up button, get started"
+        @tier "presentation"
+      actionHref : string = ""
+        @label "Header action link"
+        @tier "presentation"
+      headerContent : render-ui = {
+        type: stack
+        direction: vertical
+        gap: none
+        className: "sticky top-0 z-50"
+        children: [{
+          type: header
+          variant: desktop
+          sticky: false
+          showMenuToggle: false
+          brandName: @config.brandName
+          logoSrc: @config.logoSrc
+          className: "hidden md: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)
+          }))
+          actions: {
+            type: button
+            label: @config.actionLabel
+            href: @config.actionHref
+            variant: primary
+            size: sm
+            action: NAV_LINK
+            actionPayload: { href: @config.actionHref, label: @config.actionLabel }
+            className: (if (== @config.actionLabel "") hidden "")
+          }
+        }, {
+          type: header
+          variant: mobile
+          sticky: false
+          showMenuToggle: true
+          isMenuOpen: @entity.menuOpen
+          onMenuToggle: MENU_TOGGLE
+          brandName: @config.brandName
+          logoSrc: @config.logoSrc
+          className: "md:hidden"
+        }, {
+          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 {
+            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"
+          }))
+        }]
+      }
+        @label "Header body"
+        @tier "internal"
+    }
+  }
+
+  page "/site-header" as SiteHeaderPage -> SiteHeaderRender
+}

package/behaviors/lolo/ui/core/atoms/std-stat-band.lolo

@@ -0,0 +1,83 @@
+app std-stat-band "1.0.0"
+"std-stat-band — a band of headline figures from a config list: each item a big value (a number or short text such as '99.9%', '3x' or 'Open source') over a short label, centered in a row that wraps on small screens, under an optional heading. Display only — for figures computed from data use std-stats. Pick for 'by the numbers' strips on landing, about and product pages."
+type StatBandItem = { value : string!, label : string! }
+orbital StatBandOrbital {
+
+  entity StatBandView [runtime] {
+    id : string!
+  }
+
+  trait StatBandRender -> @rebindable StatBandView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          type: box
+          paddingY: xl
+          bg: (if (== @config.surface muted) muted transparent)
+          fullWidth: true
+          children: [{
+            type: container
+            size: xl
+            maxWidth: xl
+            padding: lg
+            children: [{
+              type: stack
+              direction: vertical
+              gap: lg
+              children: [{
+                type: typography
+                content: @config.heading
+                variant: h3
+                weight: bold
+                align: center
+                className: (if (== @config.heading "") hidden "tracking-tight")
+              }, {
+                type: simple-grid
+                cols: (math/min (math/max (array/len @config.items) 1) 4)
+                gap: lg
+                children: (array/map @config.items (fn item {
+                  type: stack
+                  direction: vertical
+                  gap: xs
+                  align: center
+                  children: [{
+                    type: typography
+                    content: (object/get @item value "")
+                    variant: h2
+                    weight: bold
+                    align: center
+                    className: "tracking-tight text-primary"
+                  }, {
+                    type: typography
+                    content: (object/get @item label "")
+                    variant: body
+                    color: muted
+                    align: center
+                  }]
+                }))
+              }]
+            }]
+          }]
+        })
+    }
+
+    config {
+      heading : string = ""
+        @label "Heading"
+        @description "Heading above the figures; empty hides it"
+        @tier "presentation"
+      items : [StatBandItem] = [{ value: "120+", label: "Building blocks" }, { value: "3", label: "Languages" }, { value: "99.9%", label: "Uptime" }]
+        @label "Figures"
+        @description "One entry per figure: value (number or short text) and label"
+        @synonyms "stats, numbers, metrics, kpis, by the numbers"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @tier "presentation"
+    }
+  }
+
+  page "/stat-band" as StatBandPage -> StatBandRender
+}

package/behaviors/lolo/ui/core/atoms/std-stats.lolo

@@ -367,11 +367,10 @@ orbital StatsItemOrbital {
                 type: typography
                 variant: caption
               }, {
-                className: tabular-nums
-                content: @card.value
-                type: typography
-                variant: h3
-                weight: semibold
+                className: "text-2xl font-semibold tabular-nums"
+                format: @card.format
+                type: animated-counter
+                value: @card.value
               }, {
                 color: muted
                 content: @card.suffix

package/behaviors/lolo/ui/core/atoms/std-steps.lolo

@@ -0,0 +1,124 @@
+app std-steps "1.0.0"
+"std-steps — a numbered 'how it works' sequence from a config list: a numbered marker (or icon), a title and a short description per step, laid out as a row of columns or a vertical list, under an optional heading. Display only — for an interactive stepper use std-step-flow or std-wizard. Pick for onboarding explainers, process overviews and learning paths."
+type StepItem = { title : string!, description : string, icon : string }
+orbital StepsOrbital {
+
+  entity StepsView [runtime] {
+    id : string!
+  }
+
+  trait StepsRender -> @rebindable StepsView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          type: box
+          paddingY: xl
+          bg: (if (== @config.surface muted) muted transparent)
+          fullWidth: true
+          children: [{
+            type: container
+            size: xl
+            maxWidth: xl
+            padding: lg
+            children: [{ type: stack, direction: vertical, gap: xl, children: [{
+              type: stack
+              direction: vertical
+              gap: sm
+              align: (if (== @config.alignment center) center start)
+              className: (if (== @config.heading "") (if (== @config.lede "") hidden "") "")
+              children: [{
+              type: typography
+              content: @config.heading
+              variant: h2
+              weight: bold
+              align: (if (== @config.alignment center) center left)
+              className: (if (== @config.heading "") hidden "tracking-tight text-balance")
+            }, {
+              type: typography
+              content: @config.lede
+              variant: large
+              color: muted
+              align: (if (== @config.alignment center) center left)
+              className: (if (== @config.lede "") hidden "max-w-2xl text-pretty")
+            }]
+            }, {
+              type: simple-grid
+              cols: (if (== @config.layout vertical) 1 (math/min (math/max (array/len @config.steps) 1) 4))
+              gap: lg
+              children: (array/map @config.steps (fn step {
+                type: stack
+                direction: (if (== @config.layout vertical) horizontal vertical)
+                gap: md
+                align: start
+                children: [{
+                  type: box
+                  rounded: full
+                  bg: primary
+                  className: "flex h-10 w-10 shrink-0 items-center justify-center text-primary-foreground"
+                  children: [{
+                    type: typography
+                    content: (if (== (object/get @step icon "") "") (str/concat "" (+ @index 1)) "")
+                    variant: label
+                    weight: bold
+                    color: inherit
+                    className: (if (== (object/get @step icon "") "") "" hidden)
+                  }, {
+                    type: icon
+                    name: (object/get @step icon "")
+                    size: sm
+                    className: (if (== (object/get @step icon "") "") hidden "")
+                  }]
+                }, {
+                  type: stack
+                  direction: vertical
+                  gap: xs
+                  children: [{
+                    type: typography
+                    content: (object/get @step title "")
+                    variant: h5
+                    weight: semibold
+                  }, {
+                    type: typography
+                    content: (object/get @step description "")
+                    variant: body
+                    color: muted
+                    className: (if (== (object/get @step description "") "") hidden "text-pretty")
+                  }]
+                }]
+              }))
+            }] }]
+          }]
+        })
+    }
+
+    config {
+      heading : string = ""
+        @label "Heading"
+        @description "Section heading above the steps; empty hides it"
+        @synonyms "title"
+        @tier "presentation"
+      lede : string = ""
+        @label "Supporting text"
+        @tier "presentation"
+      alignment : "center" | "start" = center
+        @label "Heading alignment"
+        @tier "presentation"
+      steps : [StepItem] = [{ title: "Describe it", description: "Say what you want in plain words." }, { title: "Review it", description: "Check the plan before anything is built." }, { title: "Ship it", description: "Publish when it looks right." }]
+        @label "Steps"
+        @description "One entry per step: title, optional description and icon (an icon replaces the step number)"
+        @synonyms "how it works, process, stages, phases, path"
+        @tier "presentation"
+      layout : "row" | "vertical" = row
+        @label "Layout"
+        @description "row = side-by-side columns, vertical = a top-to-bottom list"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @tier "presentation"
+    }
+  }
+
+  page "/steps" as StepsPage -> StepsRender
+}

package/behaviors/lolo/ui/core/atoms/ui-box.lolo

@@ -13,6 +13,7 @@ orbital BoxOrbital {
       INIT -> idle
         (render-ui main {
           className: @config.className
+          dir: @config.dir
           padding: @config.padding
           paddingX: @config.paddingX
           paddingY: @config.paddingY
@@ -54,6 +55,10 @@ orbital BoxOrbital {
         @label "Class Name"
         @description "Additional CSS classes applied to the root element."
         @tier "presentation"
+      dir : string
+        @label "Dir"
+        @description "Text direction for this subtree: 'ltr', 'rtl' (Arabic/Hebrew content) or 'auto'"
+        @tier "presentation"
       padding : "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" = none
         @label "Padding"
         @description "Padding on all sides"

package/behaviors/lolo/ui/core/atoms/ui-button.lolo

@@ -40,6 +40,7 @@ orbital ButtonOrbital {
           actionPayload: @config.actionPayload
           label: @config.label
           disabled: @config.disabled
+          href: @config.href
           type: button
         })
     }
@@ -55,7 +56,7 @@ orbital ButtonOrbital {
         @label "Class Name"
         @description "Additional CSS classes applied to the root element."
         @tier "presentation"
-      variant : "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default" = primary
+      variant : "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default" | "link" = primary
         @label "Variant"
         @description "variant prop"
         @tier "presentation"
@@ -103,6 +104,10 @@ orbital ButtonOrbital {
         @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"
     }
   }
 

package/behaviors/lolo/ui/core/atoms/ui-image.lolo

@@ -0,0 +1,64 @@
+app ui-image "1.0.0"
+"Image — UI factory (1:1 with the @almadar/ui image pattern)."
+;; @pattern "image"
+orbital ImageOrbital {
+  entity ImageItem [runtime] {
+    id : string!
+  }
+
+  trait ImageRender -> @rebindable ImageItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          src: @config.src
+          alt: @config.alt
+          fit: @config.fit
+          aspect: @config.aspect
+          rounded: @config.rounded
+          bordered: @config.bordered
+          loading: @config.loading
+          className: @config.className
+          type: image
+        })
+    }
+
+    config {
+      src : asset = "https://almadar-kflow-assets.web.app/shared/ui-roguelike-board/default/units/player.png"
+        @label "Src"
+        @description "Image source URL"
+        @tier "presentation"
+      alt : string = ""
+        @label "Alt"
+        @description "Alternative text; empty string marks the image decorative"
+        @tier "presentation"
+      fit : "cover" | "contain" | "fill" | "none" = cover
+        @label "Fit"
+        @description "How the image fills its box"
+        @tier "presentation"
+      aspect : "auto" | "1/1" | "4/3" | "3/2" | "16/9" | "21/9" = auto
+        @label "Aspect"
+        @description "Fixed aspect ratio of the box; 'auto' keeps the image's own"
+        @tier "presentation"
+      rounded : "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" = md
+        @label "Rounded"
+        @description "Corner rounding"
+        @tier "presentation"
+      bordered : boolean = false
+        @label "Bordered"
+        @description "Draw a subtle border around the image"
+        @tier "presentation"
+      loading : "lazy" | "eager" = lazy
+        @label "Loading"
+        @description "'lazy' defers off-screen images; 'eager' for above-the-fold media"
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "Additional class names"
+        @tier "presentation"
+    }
+  }
+
+  page "/image" as ImagePage -> ImageRender
+}

package/behaviors/lolo/ui/{marketing/atoms → core/molecules}/ui-animated-counter.lolo

@@ -13,6 +13,7 @@ orbital AnimatedCounterOrbital {
       INIT -> idle
         (render-ui main {
           value: @config.value
+          label: @config.label
           duration: @config.duration
           prefix: @config.prefix
           suffix: @config.suffix
@@ -25,23 +26,27 @@ orbital AnimatedCounterOrbital {
     config {
       value : scalar = ""
         @label "Value"
-        @description "The target value to animate to. Strings are parsed numerically (e.g. '500', '99.9')."
+        @description "Target value. Strings may carry display affixes (e.g. '500+', '99.9%', '$1.2M')."
         @tier "presentation"
-      duration : number = 600
+      label : string
+        @label "Label"
+        @description "Label displayed below the number"
+        @tier "presentation"
+      duration : number = 1500
         @label "Duration"
-        @description "Animation duration in milliseconds"
+        @description "Animation duration in ms"
         @tier "presentation"
       prefix : string
         @label "Prefix"
-        @description "Text to display before the number"
+        @description "Text displayed before the number"
         @tier "presentation"
       suffix : string
         @label "Suffix"
-        @description "Text to display after the number"
+        @description "Text displayed after the number"
         @tier "presentation"
       format : string
         @label "Format"
-        @description "Display format: 'number' (locale grouping), 'currency' ($x.xx), 'percent' (rounded %). Unset preserves the value's own decimals."
+        @description "'number' (locale grouping), 'currency' ($x.xx), 'percent' (rounded %). Unset keeps the value's own decimals."
         @tier "presentation"
       className : string
         @label "Class Name"