@almadar/std 16.230.0 → 16.232.0

package/behaviors/lolo/ui/core/atoms/std-form-advanced.lolo

@@ -49,9 +49,12 @@ orbital FormEntryOrbital {
             type: stack
           }, { type: divider }, {
             cancelEvent: CANCEL
+            cancelLabel: @config.cancelLabel
             fields: @config.fields
             mode: create
+            showCancel: @config.showCancel
             submitEvent: SUBMIT
+            submitLabel: @config.submitLabel
             type: form-section
           }]
           direction: vertical
@@ -75,9 +78,12 @@ orbital FormEntryOrbital {
             type: stack
           }, { type: divider }, {
             cancelEvent: CANCEL
+            cancelLabel: @config.cancelLabel
             fields: @config.fields
             mode: create
+            showCancel: @config.showCancel
             submitEvent: SUBMIT
+            submitLabel: @config.submitLabel
             type: form-section
           }]
           direction: vertical
@@ -91,17 +97,17 @@ orbital FormEntryOrbital {
         (render-ui main {
           align: center
           children: [{ name: check-circle, size: xl, type: icon }, {
-            content: "Form Submitted"
+            content: @config.successTitle
             type: typography
             variant: h2
           }, {
-            message: "Your form has been submitted successfully."
+            message: @config.successMessage
             type: alert
             variant: success
           }, {
             action: RESET
             icon: plus
-            label: "New Entry"
+            label: @config.newEntryLabel
             type: button
             variant: primary
           }]
@@ -137,9 +143,12 @@ orbital FormEntryOrbital {
             type: stack
           }, { type: divider }, {
             cancelEvent: CANCEL
+            cancelLabel: @config.cancelLabel
             fields: @config.fields
             mode: create
+            showCancel: @config.showCancel
             submitEvent: SUBMIT
+            submitLabel: @config.submitLabel
             type: form-section
           }]
           direction: vertical
@@ -246,6 +255,30 @@ orbital FormEntryOrbital {
         @label "Field validation"
         @description "Per-field rules (format, regex, length) shown inline on submit"
         @tier "domain"
+      submitLabel : string
+        @label "Submit button"
+        @description "Label on the submit button; unset keeps the translated Save"
+        @tier "presentation"
+      cancelLabel : string
+        @label "Cancel button"
+        @description "Label on the cancel button; unset keeps the translated Cancel"
+        @tier "presentation"
+      showCancel : boolean = true
+        @label "Show cancel"
+        @description "Whether the form shows a cancel button"
+        @tier "presentation"
+      successTitle : string = "Form Submitted"
+        @label "Confirmation title"
+        @description "Heading shown after a successful submit"
+        @tier "presentation"
+      successMessage : string = "Your form has been submitted successfully."
+        @label "Confirmation message"
+        @description "Message shown after a successful submit"
+        @tier "presentation"
+      newEntryLabel : string = "New Entry"
+        @label "New entry button"
+        @description "Label on the button that starts another entry after a submit"
+        @tier "presentation"
     }
   }
 

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/atoms/std-version-history.lolo

@@ -1,13 +1,11 @@
 app std-version-history "1.0.0"
-"std-version-history — wiki/CMS revision history with diff + rollback. Browses revisions; opens detail in `viewing_single`; compares two revisions in `comparing` with intrinsic version-diff; persists rollback. `RevisionManage` is a rebindable single-entity trait: a consumer rebinds it to its own entity via `linkedEntity`. `config.scopeField` names the Revision field holding the parent document id; a page-mounted `{id}` route param scopes INIT's own fetch, and a consumer forwards SHOW_HISTORY { key } (via a `listens` override) to rescope the feed to one document — empty scopeField (default) or no id keeps today's unfiltered global feed. Rollback and retry refetches stay scoped."
+"std-version-history — wiki/CMS revision history with diff + rollback. Browses revisions; opens detail in `viewing_single`; compares the opened revision with the newest in `comparing`; Rollback emits RevisionRolledBack { row } for the consumer to restore onto its source document. `RevisionManage` is a rebindable single-entity trait: a consumer rebinds it to its own entity via `linkedEntity`. `config.scopeField` names the Revision field holding the parent document id; a page-mounted `{id}` route param scopes INIT's own fetch, and a consumer forwards SHOW_HISTORY { key } (via a `listens` override) to rescope the feed to one document — empty scopeField (default) or no id keeps today's unfiltered global feed. Rollback and retry refetches stay scoped."
 orbital RevisionOrbital {
     type RevisionLoaded = Event { data : [Revision] } "Fired when the revision collection finishes loading"
 
     type RevisionLoadFailed = Event { error : string, code : string } "Fired when the revision collection fails to load"
 
-    type RevisionRolledBack = Event Revision "Fired after a rollback persists successfully on the source document"
-
-    type RevisionRollbackFailed = Event { error : string, code : string } "Fired when a rollback fails to persist"
+    type RevisionRolledBack = Event { row : Revision! } "The revision to roll back to: the consumer restores row.content onto its source document (listen for it)"
 
   entity Revision [persistent: revisions] {
     id : string!
@@ -16,11 +14,12 @@ orbital RevisionOrbital {
     versionNumber : number! @description "A sequential identifier representing the revision's order." @synonyms "sequence, order, iteration"
     authorId : string @description "Unique identifier for the user who made the change." @synonyms "user identifier, creator, contributor"
     authorName : string @description "The name of the user who made the change." @synonyms "user, contributor, owner"
-    content : string @description "The snapshotted body of the revision — plain text or the rich-text HTML a document-look record carries. Rollback hands the whole row back to the host, which restores content onto the source document." @synonyms "text, body, data, value"
+    content : string @description "The snapshotted body of the revision — plain text or the rich-text HTML a document-look record carries. Rollback emits RevisionRolledBack { row }; the consumer restores row.content onto its source document." @synonyms "text, body, data, value"
     summary : string @description "A brief explanation of the revision's changes." @synonyms "description, note, comment, explanation"
     searchTerm : string @intrinsic @description "The current search query the user submitted." @synonyms "query, term, q" = ""
     createdAt : string
     scopeKey : string @intrinsic @description "The parent document id the feed is currently scoped to, set by SHOW_HISTORY. Empty when browsing the unfiltered global feed." @synonyms "scope, filter key, document scope" = ""
+    revisions : [Revision] @intrinsic @description "The loaded revisions, newest first — what Compare diffs against." @synonyms "versions, history" = []
   }
 
   trait RevisionManage -> @rebindable Revision [interaction, collection] {
@@ -47,6 +46,7 @@ orbital RevisionOrbital {
           type: stack
         })
       RevisionLoaded -> browsing
+        (set @entity.revisions (array/sort ?data "versionNumber" "desc"))
         (render-ui main {
           children: [{
             align: center
@@ -97,18 +97,6 @@ orbital RevisionOrbital {
           gap: md
           type: stack
         })
-      RevisionRolledBack -> loading
-        (set @entity.scopeKey (object/get @payload @config.scopeField ""))
-        (fetch Revision {
-          filter: (or ["=", @config.scopeField, ""] ["=", (object/get @payload @config.scopeField ""), ""] ["=", (object/get @entity @config.scopeField), (object/get @payload @config.scopeField "")])
-          emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
-        })
-      RevisionRollbackFailed -> error
-        (render-ui main {
-          message: ?error
-          type: alert
-          variant: error
-        })
       RevisionLoadFailed -> error
         (render-ui main {
           message: ?error
@@ -267,7 +255,7 @@ orbital RevisionOrbital {
               variant: secondary
             }, {
               action: ROLLBACK
-              actionPayload: { id: @entity.id }
+              actionPayload: { row: @entity }
               label: Rollback
               type: button
               variant: danger
@@ -281,9 +269,11 @@ orbital RevisionOrbital {
           type: stack
         })
       ROLLBACK -> loading
-        (set @entity.id ?id)
-        (persist update Revision @entity {
-          emit: { failure: RevisionRollbackFailed, success: RevisionRolledBack }
+        (emit RevisionRolledBack { row: ?row })
+        (set @entity.scopeKey (object/get ?row @config.scopeField ""))
+        (fetch Revision {
+          filter: (or ["=", @config.scopeField, ""] ["=", (object/get ?row @config.scopeField ""), ""] ["=", (object/get @entity @config.scopeField), (object/get ?row @config.scopeField "")])
+          emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
         })
         (render-ui main {
           align: center
@@ -322,6 +312,7 @@ orbital RevisionOrbital {
     state viewing_single {
       CLOSE_VIEW -> loading
         (fetch Revision {
+          filter: (or ["=", @config.scopeField, ""] ["=", @entity.scopeKey, ""] ["=", (object/get @entity @config.scopeField), @entity.scopeKey])
           emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
         })
         (render-ui main {
@@ -356,17 +347,16 @@ orbital RevisionOrbital {
             gap: sm
             type: stack
           }, { type: divider }, {
-            afterId: ?afterId
-            beforeId: ?beforeId
-            onRevert: ROLLBACK
-            revisions: ?revisions
+            afterId: (object/get (array/first @entity.revisions) "id" "")
+            beforeId: @entity.id
+            revisions: (array/map @entity.revisions (fn r { id: @r.id, label: (str/concat "v" (str/default @r.versionNumber "")), author: @r.authorName, timestamp: @r.createdAt, content: @r.content }))
             type: version-diff
             view: side-by-side
           }, {
             align: center
             children: [{
               action: ROLLBACK
-              actionPayload: { id: @entity.id }
+              actionPayload: { row: @entity }
               label: Rollback
               type: button
               variant: danger
@@ -380,9 +370,11 @@ orbital RevisionOrbital {
           type: stack
         })
       ROLLBACK -> loading
-        (set @entity.id ?id)
-        (persist update Revision @entity {
-          emit: { failure: RevisionRollbackFailed, success: RevisionRolledBack }
+        (emit RevisionRolledBack { row: ?row })
+        (set @entity.scopeKey (object/get ?row @config.scopeField ""))
+        (fetch Revision {
+          filter: (or ["=", @config.scopeField, ""] ["=", (object/get ?row @config.scopeField ""), ""] ["=", (object/get @entity @config.scopeField), (object/get ?row @config.scopeField "")])
+          emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
         })
         (render-ui main {
           align: center
@@ -421,6 +413,7 @@ orbital RevisionOrbital {
     state comparing {
       CLOSE_VIEW -> loading
         (fetch Revision {
+          filter: (or ["=", @config.scopeField, ""] ["=", @entity.scopeKey, ""] ["=", (object/get @entity @config.scopeField), @entity.scopeKey])
           emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
         })
         (render-ui main {
@@ -437,9 +430,11 @@ orbital RevisionOrbital {
           type: stack
         })
       ROLLBACK -> loading
-        (set @entity.id ?id)
-        (persist update Revision @entity {
-          emit: { failure: RevisionRollbackFailed, success: RevisionRolledBack }
+        (emit RevisionRolledBack { row: ?row })
+        (set @entity.scopeKey (object/get ?row @config.scopeField ""))
+        (fetch Revision {
+          filter: (or ["=", @config.scopeField, ""] ["=", (object/get ?row @config.scopeField ""), ""] ["=", (object/get @entity @config.scopeField), (object/get ?row @config.scopeField "")])
+          emit: { failure: RevisionLoadFailed, success: RevisionLoaded }
         })
         (render-ui main {
           align: center
@@ -506,17 +501,14 @@ orbital RevisionOrbital {
         @tier "domain"
       COMPARE {
         id : string!
-        beforeId : string!
-        afterId : string!
-        revisions : [Revision]
       }
-        @description "Signals a request to compare two versions."
+        @description "Signals a request to compare the opened revision with the newest one."
         @synonyms "compare, diff, contrast"
         @tier "presentation"
       ROLLBACK {
-        id : string!
+        row : Revision!
       }
-        @description "Indicates a revision has been successfully reverted."
+        @description "Requests a rollback to this revision."
         @synonyms "reverted, undone, restored"
         @tier "domain"
       RevisionLoaded {
@@ -532,17 +524,12 @@ orbital RevisionOrbital {
         @description "Indicates a failure to load revision data."
         @synonyms "error, fail, problem, unsuccessful"
         @tier "internal"
-      RevisionRolledBack
-        @description "Indicates a revision has been successfully restored to a previous state."
-        @synonyms "restored, reverted, undone"
-        @tier "presentation"
-      RevisionRollbackFailed {
-        error : string
-        code : string
+      RevisionRolledBack -> external {
+        row : Revision!
       }
-        @description "Indicates that a revision rollback operation was unsuccessful."
-        @synonyms "rollback failed, revert error, undo failure"
-        @tier "internal"
+        @description "The revision to roll back to; the consumer restores row.content onto its source document."
+        @synonyms "restored, reverted, undone"
+        @tier "domain"
     }
 
     listens {
@@ -565,17 +552,14 @@ orbital RevisionOrbital {
         @tier "domain"
       COMPARE {
         id : string!
-        beforeId : string!
-        afterId : string!
-        revisions : [Revision]
       }
-        @description "Indicates a request to compare two versions."
+        @description "Indicates a request to compare the opened revision with the newest one."
         @synonyms "diff, compare, contrast"
         @tier "presentation"
       ROLLBACK {
-        id : string!
+        row : Revision!
       }
-        @description "A revision has been successfully reverted to a previous state."
+        @description "A rollback to this revision was requested."
         @synonyms "reverted, undone, restored"
         @tier "domain"
       RevisionLoaded {
@@ -591,17 +575,6 @@ orbital RevisionOrbital {
         @description "Indicates a failure to retrieve revision data."
         @synonyms "error, failure, problem, fetch failed"
         @tier "internal"
-      RevisionRolledBack
-        @description "Indicates a revision has been successfully reverted."
-        @synonyms "reverted, undone, restored"
-        @tier "internal"
-      RevisionRollbackFailed {
-        error : string
-        code : string
-      }
-        @description "Indicates that a revision rollback operation has failed."
-        @synonyms "rollback error, revert failure, undo failed"
-        @tier "internal"
       SHOW_HISTORY {
         key : string!
       }

package/behaviors/lolo/ui/core/molecules/ui-change-list.lolo

@@ -0,0 +1,57 @@
+app ui-change-list "1.0.0"
+"The plain-language changes in one version (added / modified / removed). — UI factory (1:1 with the @almadar/ui change-list pattern)."
+;; @capabilities "change summary, what changed, version changes, diff summary, release notes list, modification list"
+;; @pattern "change-list"
+orbital ChangeListOrbital {
+  type ChangeListChangesItem = {
+    type : "added" | "modified" | "removed"!
+    title : string!
+    description : string
+    before : string
+    after : string
+  }
+
+  entity ChangeListItem [runtime] {
+    id : string!
+  }
+
+  trait ChangeListRender -> @rebindable ChangeListItem [interaction, instance] {
+    initial: idle
+
+    state idle {
+      INIT -> idle
+        (render-ui main {
+          changes: @config.changes
+          inspectEvent: @config.inspectEvent
+          className: @config.className
+          type: change-list
+        })
+    }
+
+    emits {
+      @config.inspectEvent -> external {
+        title : string!
+        type : "added" | "modified" | "removed"!
+      }
+        @description "Emitted by a change's Inspect button. Payload: { title, type }."
+        @tier "essential"
+    }
+
+    config {
+      changes : [ChangeListChangesItem] = [{ type: added, title: "Title", description: "Description", before: "Before", after: "After" }, { type: modified, title: "Title 2", description: "Description 2", before: "Before 2", after: "After 2" }]
+        @label "Changes"
+        @description "The changes. Accepts a typed list or a render-ui payload binding."
+        @tier "presentation"
+      inspectEvent : event = "INSPECT"
+        @label "Inspect Event"
+        @description "Emitted by a change's Inspect button. Payload: { title, type }."
+        @tier "presentation"
+      className : string
+        @label "Class Name"
+        @description "className prop"
+        @tier "presentation"
+    }
+  }
+
+  page "/change-list" as ChangeListPage -> ChangeListRender
+}