@almadar/std 16.228.0 → 16.230.0

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

@@ -0,0 +1,247 @@
+app std-hero "1.0.0"
+"std-hero — the headline block at the top of a page, or a call-to-action banner further down. Optional eyebrow badge, headline, supporting text, up to two link actions, an optional copyable command, and optional media below or beside the copy. `look: banner` turns it into a contained call-to-action card. Links follow `href` (in-app path, #anchor, or absolute URL); each click also emits CTA_PRIMARY / CTA_SECONDARY with the href. Pick for landing, product, pricing and campaign pages."
+orbital HeroOrbital {
+  entity HeroView [runtime] {
+    id : string!
+  }
+
+  trait HeroRender -> @rebindable HeroView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (if (== @config.mediaPosition side)
+          (render-ui main @config.sideContent)
+          (render-ui main @config.stackedContent))
+      HERO_PRIMARY -> idle
+        (emit CTA_PRIMARY { href: ?href })
+      HERO_SECONDARY -> idle
+        (emit CTA_SECONDARY { href: ?href })
+    }
+
+    emits {
+      CTA_PRIMARY -> external {
+        href : string
+      }
+        @description "The primary action was clicked; carries its href."
+        @synonyms "primary cta, main button, get started click"
+        @tier "domain"
+      CTA_SECONDARY -> external {
+        href : string
+      }
+        @description "The secondary action was clicked; carries its href."
+        @synonyms "secondary cta, second button, learn more click"
+        @tier "domain"
+    }
+
+    listens {
+      HERO_PRIMARY {
+        href : string
+      }
+        @description "Primary action button click."
+        @tier "internal"
+      HERO_SECONDARY {
+        href : string
+      }
+        @description "Secondary action button click."
+        @tier "internal"
+    }
+
+    config {
+      look : "hero" | "banner" = hero
+        @label "Look"
+        @description "hero = full-width page opener with an h1; banner = contained call-to-action card with an h2"
+        @synonyms "cta banner, call to action, callout, page header, masthead"
+        @tier "presentation"
+      eyebrow : string = ""
+        @label "Eyebrow"
+        @description "Small badge above the headline; empty hides it"
+        @synonyms "tag, kicker, label above title"
+        @tier "presentation"
+      headline : string = "Build what you mean"
+        @label "Headline"
+        @description "Main headline"
+        @synonyms "title, heading"
+        @tier "presentation"
+      lede : string = ""
+        @label "Supporting text"
+        @description "One or two sentences under the headline; empty hides it"
+        @synonyms "subtitle, subheading, description, tagline"
+        @tier "presentation"
+      alignment : "center" | "start" = center
+        @label "Alignment"
+        @description "Center the copy, or align it to the start edge"
+        @tier "presentation"
+      primaryLabel : string = "Get started"
+        @label "Primary action label"
+        @description "Empty hides the primary action"
+        @tier "presentation"
+      primaryHref : string = "#"
+        @label "Primary action link"
+        @description "In-app path, #anchor, or absolute URL"
+        @tier "presentation"
+      secondaryLabel : string = ""
+        @label "Secondary action label"
+        @description "Empty hides the secondary action"
+        @tier "presentation"
+      secondaryHref : string = ""
+        @label "Secondary action link"
+        @description "In-app path, #anchor, or absolute URL"
+        @tier "presentation"
+      command : string = ""
+        @label "Command"
+        @description "A shell command shown in a copyable code box under the actions, e.g. an install one-liner; empty hides it"
+        @synonyms "install command, cli, terminal snippet"
+        @tier "presentation"
+      mediaSrc : string = ""
+        @label "Media image"
+        @description "Screenshot or illustration URL; empty hides it"
+        @synonyms "hero image, screenshot, picture"
+        @tier "presentation"
+      mediaAlt : string = ""
+        @label "Media alt text"
+        @tier "presentation"
+      mediaPosition : "below" | "side" = below
+        @label "Media position"
+        @description "Below the copy, or beside it on wide screens"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @description "Background behind the block"
+        @tier "presentation"
+      copyContent : render-ui = {
+        type: stack
+        direction: vertical
+        gap: lg
+        align: (if (== @config.alignment center) center start)
+        children: [{
+          type: badge
+          label: @config.eyebrow
+          variant: primary
+          size: md
+        }, {
+          type: typography
+          content: @config.headline
+          variant: (if (== @config.look banner) h2 h1)
+          weight: bold
+          align: (if (== @config.alignment center) center left)
+          className: "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: stack
+          direction: horizontal
+          gap: md
+          wrap: true
+          justify: (if (== @config.alignment center) center start)
+          className: (if (== @config.primaryLabel "") (if (== @config.secondaryLabel "") hidden "pt-2") "pt-2")
+          children: [{
+            type: button
+            label: @config.primaryLabel
+            href: @config.primaryHref
+            variant: primary
+            size: lg
+            action: HERO_PRIMARY
+            actionPayload: { href: @config.primaryHref }
+            className: (if (== @config.primaryLabel "") hidden "")
+          }, {
+            type: button
+            label: @config.secondaryLabel
+            href: @config.secondaryHref
+            variant: secondary
+            size: lg
+            action: HERO_SECONDARY
+            actionPayload: { href: @config.secondaryHref }
+            className: (if (== @config.secondaryLabel "") hidden "")
+          }]
+        }, {
+          type: box
+          fullWidth: true
+          className: (if (== @config.command "") hidden "max-w-xl")
+          children: [{
+            type: code-block
+            code: @config.command
+            language: bash
+            showLanguageBadge: false
+            showCopyButton: true
+          }]
+        }]
+      }
+        @label "Copy block"
+        @tier "internal"
+      mediaContent : render-ui = {
+        type: image
+        src: @config.mediaSrc
+        alt: @config.mediaAlt
+        rounded: xl
+        bordered: true
+        loading: eager
+      }
+        @label "Media block"
+        @tier "internal"
+      stackedContent : render-ui = {
+        type: box
+        paddingY: (if (== @config.look banner) xl "2xl")
+        bg: (if (== @config.surface muted) muted transparent)
+        fullWidth: true
+        children: [{
+          type: container
+          size: xl
+          maxWidth: xl
+          padding: lg
+          children: [{
+            type: box
+            padding: (if (== @config.look banner) xl none)
+            rounded: (if (== @config.look banner) "2xl" none)
+            border: (== @config.look banner)
+            bg: (if (== @config.look banner) muted transparent)
+            children: [{
+              type: stack
+              direction: vertical
+              gap: "2xl"
+              align: (if (== @config.alignment center) center stretch)
+              children: [@config.copyContent, @config.mediaContent]
+            }]
+          }]
+        }]
+      }
+        @label "Stacked body"
+        @tier "internal"
+      sideContent : render-ui = {
+        type: box
+        paddingY: (if (== @config.look banner) xl "2xl")
+        bg: (if (== @config.surface muted) muted transparent)
+        fullWidth: true
+        children: [{
+          type: container
+          size: xl
+          maxWidth: xl
+          padding: lg
+          children: [{
+            type: box
+            padding: (if (== @config.look banner) xl none)
+            rounded: (if (== @config.look banner) "2xl" none)
+            border: (== @config.look banner)
+            bg: (if (== @config.look banner) muted transparent)
+            children: [{
+              type: split
+              ratio: "1:1"
+              gap: xl
+              align: center
+              children: [@config.copyContent, @config.mediaContent]
+            }]
+          }]
+        }]
+      }
+        @label "Side-by-side body"
+        @tier "internal"
+    }
+  }
+
+  page "/hero" as HeroPage -> HeroRender
+}

package/behaviors/lolo/ui/core/atoms/std-media-section.lolo

@@ -0,0 +1,154 @@
+app std-media-section "1.0.0"
+"std-media-section — content rows that pair copy with a screenshot or illustration: each row has an eyebrow, heading, body text, a short bullet list and an optional link action on one side and its media on the other, and consecutive rows alternate sides. A row without media sits alone at reading width. Stacks on small screens. Pick for 'how it works', product tours and feature-detail pages."
+type MediaRow = { eyebrow : string, heading : string!, body : string, bullets : [string], mediaSrc : string, mediaAlt : string, actionLabel : string, actionHref : string }
+orbital MediaSectionOrbital {
+  entity MediaSectionView [runtime] {
+    id : string!
+  }
+
+  trait MediaSectionRender -> @rebindable MediaSectionView [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: "2xl"
+              children: (array/map @config.rows (fn row (if (== (object/get @row mediaSrc "") "") {
+                type: box
+                className: "mx-auto w-full max-w-3xl"
+                children: [{
+                  type: stack
+                  direction: vertical
+                  gap: md
+                  align: start
+                  children: [{
+                    type: badge
+                    label: (object/get @row eyebrow "")
+                    variant: primary
+                  }, {
+                    type: typography
+                    content: (object/get @row heading "")
+                    variant: h2
+                    weight: bold
+                  }, {
+                    type: typography
+                    content: (object/get @row body "")
+                    variant: large
+                    color: muted
+                    className: (if (== (object/get @row body "") "") hidden "")
+                  }, {
+                    type: markdown-content
+                    content: (if (== (array/len (object/get @row bullets [])) 0) "" (str/concat "- " (str/join (object/get @row bullets []) "\n- ")))
+                    className: (if (== (array/len (object/get @row bullets [])) 0) hidden "")
+                  }, {
+                    type: button
+                    label: (object/get @row actionLabel "")
+                    href: (object/get @row actionHref "")
+                    variant: secondary
+                    action: SECTION_ACTION
+                    actionPayload: { href: (object/get @row actionHref "") }
+                    className: (if (== (object/get @row actionLabel "") "") hidden "")
+                  }]
+                }]
+              } {
+                type: split
+                ratio: "1:1"
+                gap: xl
+                align: center
+                reverse: (== (math/mod (+ @index (if (== @config.firstMediaSide start) 1 0)) 2) 1)
+                children: [{
+                  type: stack
+                  direction: vertical
+                  gap: md
+                  align: start
+                  children: [{
+                    type: badge
+                    label: (object/get @row eyebrow "")
+                    variant: primary
+                  }, {
+                    type: typography
+                    content: (object/get @row heading "")
+                    variant: h2
+                    weight: bold
+                  }, {
+                    type: typography
+                    content: (object/get @row body "")
+                    variant: large
+                    color: muted
+                    className: (if (== (object/get @row body "") "") hidden "")
+                  }, {
+                    type: markdown-content
+                    content: (if (== (array/len (object/get @row bullets [])) 0) "" (str/concat "- " (str/join (object/get @row bullets []) "\n- ")))
+                    className: (if (== (array/len (object/get @row bullets [])) 0) hidden "")
+                  }, {
+                    type: button
+                    label: (object/get @row actionLabel "")
+                    href: (object/get @row actionHref "")
+                    variant: secondary
+                    action: SECTION_ACTION
+                    actionPayload: { href: (object/get @row actionHref "") }
+                    className: (if (== (object/get @row actionLabel "") "") hidden "")
+                  }]
+                }, {
+                  type: image
+                  src: (object/get @row mediaSrc "")
+                  alt: (object/get @row mediaAlt "")
+                  rounded: xl
+                  bordered: true
+                }]
+              })))
+            }]
+          }]
+        })
+      SECTION_ACTION -> idle
+        (emit SECTION_ACTION_CLICKED { href: ?href })
+    }
+
+    emits {
+      SECTION_ACTION_CLICKED -> external {
+        href : string
+      }
+        @description "A row's link action was clicked; carries its href."
+        @tier "domain"
+    }
+
+    listens {
+      SECTION_ACTION {
+        href : string
+      }
+        @description "Row link action click."
+        @tier "internal"
+    }
+
+    config {
+      rows : [MediaRow] = [{ heading: "Everything in one place", body: "Say what you want and see it take shape.", bullets: ["Fast", "Verified", "Yours"] }]
+        @label "Rows"
+        @description "One row per entry: eyebrow, heading, body, bullets, media (mediaSrc + mediaAlt) and an optional link action (actionLabel + actionHref)"
+        @synonyms "feature rows, product tour, split sections, alternating sections, how it works"
+        @tier "presentation"
+      firstMediaSide : "start" | "end" = end
+        @label "First row media side"
+        @description "Which side the first row's media sits on; later rows alternate"
+        @synonyms "image position, image left, image right, flip"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @description "Background behind the rows"
+        @tier "presentation"
+    }
+  }
+
+  page "/media-section" as MediaSectionPage -> MediaSectionRender
+}

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

@@ -0,0 +1,177 @@
+app std-pricing "1.0.0"
+"std-pricing — side-by-side plan cards from a config list: plan name, price and billing period, a one-line summary, the included features, and a link action per plan; one plan can be highlighted as recommended with a badge. Optional heading and footnote. Clicking a plan's action follows its href and emits PLAN_SELECTED. Pick for pricing pages, subscription tiers and service packages."
+type PricingPlan = { name : string!, price : string!, period : string, summary : string, features : [string], actionLabel : string, actionHref : string, highlighted : boolean, badge : string }
+orbital PricingOrbital {
+
+  entity PricingView [runtime] {
+    id : string!
+  }
+
+  trait PricingRender -> @rebindable PricingView [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: center
+              className: (if (== @config.heading "") (if (== @config.lede "") hidden "") "")
+              children: [{
+              type: typography
+              content: @config.heading
+              variant: h2
+              weight: bold
+              align: center
+              className: (if (== @config.heading "") hidden "tracking-tight text-balance")
+            }, {
+              type: typography
+              content: @config.lede
+              variant: large
+              color: muted
+              align: center
+              className: (if (== @config.lede "") hidden "max-w-2xl text-pretty")
+            }]
+            }, {
+              type: simple-grid
+              cols: (math/min (math/max (array/len @config.plans) 1) 4)
+              gap: lg
+              className: "items-stretch"
+              children: (array/map @config.plans (fn plan {
+                type: card
+                look: elevated
+                padding: lg
+                className: (if (object/get @plan highlighted false) "h-full ring-2 ring-primary" "h-full")
+                children: [{
+                  type: stack
+                  direction: vertical
+                  gap: md
+                  className: "h-full"
+                  children: [{
+                    type: stack
+                    direction: horizontal
+                    gap: sm
+                    align: center
+                    justify: between
+                    children: [{
+                      type: typography
+                      content: (object/get @plan name "")
+                      variant: h4
+                      weight: semibold
+                    }, {
+                      type: badge
+                      label: (object/get @plan badge "")
+                      variant: primary
+                    }]
+                  }, {
+                    type: stack
+                    direction: horizontal
+                    gap: xs
+                    align: baseline
+                    children: [{
+                      type: typography
+                      content: (object/get @plan price "")
+                      variant: h2
+                      weight: bold
+                      className: "tracking-tight"
+                    }, {
+                      type: typography
+                      content: (object/get @plan period "")
+                      variant: body
+                      color: muted
+                      className: (if (== (object/get @plan period "") "") hidden "")
+                    }]
+                  }, {
+                    type: typography
+                    content: (object/get @plan summary "")
+                    variant: body
+                    color: muted
+                    className: (if (== (object/get @plan summary "") "") hidden "text-pretty")
+                  }, {
+                    type: divider
+                  }, {
+                    type: markdown-content
+                    content: (if (== (array/len (object/get @plan features [])) 0) "" (str/concat "- " (str/join (object/get @plan features []) "\n- ")))
+                    className: "flex-1"
+                  }, {
+                    type: button
+                    label: (object/get @plan actionLabel "")
+                    href: (object/get @plan actionHref "")
+                    variant: (if (object/get @plan highlighted false) primary secondary)
+                    size: lg
+                    action: PLAN_CHOOSE
+                    actionPayload: { plan: (object/get @plan name ""), href: (object/get @plan actionHref "") }
+                    className: (if (== (object/get @plan actionLabel "") "") hidden "w-full")
+                  }]
+                }]
+              }))
+            }, {
+              type: typography
+              content: @config.footnote
+              variant: caption
+              color: muted
+              align: center
+              className: (if (== @config.footnote "") hidden "")
+            }] }]
+          }]
+        })
+      PLAN_CHOOSE -> idle
+        (emit PLAN_SELECTED { plan: ?plan, href: ?href })
+    }
+
+    emits {
+      PLAN_SELECTED -> external {
+        plan : string
+        href : string
+      }
+        @description "A plan's action was clicked; carries the plan name and its href."
+        @synonyms "choose plan, select tier, subscribe click"
+        @tier "domain"
+    }
+
+    listens {
+      PLAN_CHOOSE {
+        plan : string
+        href : string
+      }
+        @description "Plan action click."
+        @tier "internal"
+    }
+
+    config {
+      heading : string = ""
+        @label "Heading"
+        @description "Section heading above the plans; empty hides it"
+        @synonyms "title"
+        @tier "presentation"
+      lede : string = ""
+        @label "Supporting text"
+        @tier "presentation"
+      plans : [PricingPlan] = [{ name: "Starter", price: "$0", period: "/month", summary: "For trying things out.", features: ["1 project", "Community support"], actionLabel: "Start free", actionHref: "#" }, { name: "Team", price: "$29", period: "/month", summary: "For teams shipping every week.", features: ["Unlimited projects", "Shared workspace", "Priority support"], actionLabel: "Choose Team", actionHref: "#", highlighted: true, badge: "Popular" }]
+        @label "Plans"
+        @description "One card per plan: name, price, period, summary, features, action; `highlighted` marks the recommended plan"
+        @synonyms "tiers, packages, subscriptions, pricing table"
+        @tier "presentation"
+      footnote : string = ""
+        @label "Footnote"
+        @description "Small print under the plans, e.g. taxes or billing terms"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @tier "presentation"
+    }
+  }
+
+  page "/pricing" as PricingPage -> PricingRender
+}

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

@@ -0,0 +1,85 @@
+app std-prose "1.0.0"
+"std-prose — a block of long-form text at a comfortable reading width: optional eyebrow, heading and meta line (date, author), then markdown body with headings, lists, links and code blocks. Supports right-to-left text. Pick for articles, blog posts, about and mission pages, policy text and install notes."
+orbital ProseOrbital {
+
+  entity ProseView [runtime] {
+    id : string!
+  }
+
+  trait ProseRender -> @rebindable ProseView [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          type: box
+          paddingY: xl
+          bg: (if (== @config.surface muted) muted transparent)
+          fullWidth: true
+          dir: @config.direction
+          children: [{
+            type: container
+            size: md
+            maxWidth: md
+            padding: lg
+            children: [{
+              type: stack
+              direction: vertical
+              gap: md
+              children: [{
+                type: badge
+                label: @config.eyebrow
+                variant: primary
+              }, {
+                type: typography
+                content: @config.heading
+                variant: h2
+                weight: bold
+                className: (if (== @config.heading "") hidden "tracking-tight text-balance")
+              }, {
+                type: typography
+                content: @config.meta
+                variant: caption
+                color: muted
+                className: (if (== @config.meta "") hidden "")
+              }, {
+                type: markdown-content
+                content: @config.body
+                direction: @config.direction
+              }]
+            }]
+          }]
+        })
+    }
+
+    config {
+      eyebrow : string = ""
+        @label "Eyebrow"
+        @description "Small badge above the heading; empty hides it"
+        @tier "presentation"
+      heading : string = ""
+        @label "Heading"
+        @description "Empty hides it"
+        @synonyms "title"
+        @tier "presentation"
+      meta : string = ""
+        @label "Meta line"
+        @description "Date, author or reading time under the heading; empty hides it"
+        @synonyms "byline, date, author"
+        @tier "presentation"
+      body : string = "Write the text here in **markdown**."
+        @label "Body"
+        @description "Markdown text"
+        @synonyms "content, article, text, copy"
+        @tier "presentation"
+      direction : "ltr" | "rtl" = ltr
+        @label "Text direction"
+        @tier "presentation"
+      surface : "plain" | "muted" = plain
+        @label "Surface"
+        @tier "presentation"
+    }
+  }
+
+  page "/prose" as ProsePage -> ProseRender
+}