themelia-react-ui 2.0.3 → 2.0.4

package/docs/consumer-skill/references/public-api.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "discoveryVersion": 1,
   "package": "themelia-react-ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "stylesheets": [
     "themelia-react-ui/style.css",
     "themelia-react-ui/theme.css",
@@ -1243,6 +1243,21 @@
         }
       ],
       "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "Button"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/composition.tsx",
           "exports": [
@@ -1280,6 +1295,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -1309,12 +1325,45 @@
             "Button"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
             "@tanstack/react-table"
           ]
         },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Button"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "Button"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/scoped-directory.tsx",
           "exports": [
@@ -1325,6 +1374,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -1342,7 +1392,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }
@@ -1425,6 +1476,39 @@
             "loading lifecycle",
             "action permissions and callbacks"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Card",
+                "roles": [
+                  "subject-surface"
+                ],
+                "kind": "surface",
+                "placement": "region",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "headerStart",
+                  "footerSlot"
+                ],
+                "props": {
+                  "contentGap": "2xl"
+                }
+              }
+            ],
+            "owns": [
+              "Surface framing, aligned insets and header/footer boundaries",
+              "Title, suffix and action anatomy",
+              "Opt-in contentGap between direct body children"
+            ],
+            "parentOwns": [
+              "Page gutters",
+              "Gaps between independent subjects",
+              "Body layout when contentGap is omitted"
+            ],
+            "page": "Place each independent subject Card in the Page body or a layout column.",
+            "embedded": "Use surface=\"flat\" padding=\"none\" inside an existing padded boundary; retain ordinary padding when that boundary has no inset."
+          },
           "jobs": [
             "Frame an application-owned customer summary card with canonical chrome, actions, and loading state.",
             "Frame app-owned record, summary, metric, or settings content with consistent card chrome."
@@ -1517,7 +1601,7 @@
         {
           "file": "examples/app-layout.tsx",
           "exports": [
-            "WorkspaceLayout"
+            "WorkspaceExamplePage"
           ],
           "symbols": [
             "Card"
@@ -1525,6 +1609,7 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -1553,6 +1638,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -1569,6 +1655,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -1624,6 +1711,7 @@
             "Card"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
@@ -1655,7 +1743,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }
@@ -2371,7 +2460,77 @@
           "alternatives": []
         }
       ],
-      "recipes": []
+      "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "Checkbox"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "Checkbox",
+            "Select",
+            "Switch",
+            "SwitchCard",
+            "ToggleField"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Select",
+            "ToggleField"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "Select",
+            "ToggleField"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        }
+      ]
     },
     {
       "import": "themelia-react-ui/base/code-block",
@@ -2957,7 +3116,24 @@
           "alternatives": []
         }
       ],
-      "recipes": []
+      "recipes": [
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "DatePicker"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        }
+      ]
     },
     {
       "import": "themelia-react-ui/base/display",
@@ -3823,7 +3999,8 @@
             "LoadingState"
           ],
           "references": [
-            "references/analytics.md#dashboard-and-revenue-data"
+            "references/analytics.md#dashboard-and-revenue-data",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": [
             "recharts"
@@ -3835,6 +4012,7 @@
       "import": "themelia-react-ui/base/forms",
       "declaration": "dist/components/base/forms/index.d.ts",
       "symbols": [
+        "ApplyServerErrorsOptions",
         "ControlledFormField",
         "ControlledFormFieldProps",
         "ControlledFormFieldStrings",
@@ -3852,8 +4030,10 @@
         "FormSectionProps",
         "OperationPasswordForm",
         "OperationPasswordFormProps",
+        "ServerErrors",
         "SubmitStateButton",
         "SubmitStateButtonProps",
+        "applyServerErrors",
         "defaultControlledFormFieldStrings"
       ],
       "optionalPeers": [
@@ -3865,11 +4045,11 @@
         "A label, editable control, and hint or error form one accessible field row.",
         "Build an application-owned validated form with consistent field and action presentation.",
         "Editable values need canonical field controls, field chrome, grouped choices, uploads, or form-state recipes.",
+        "Related form fields need one titled section with optional actions and footer.",
         "Use Controlled form field in an admin interface.",
         "Use Dirty state banner in an admin interface.",
         "Use Error summary in an admin interface.",
         "Use Form actions bar in an admin interface.",
-        "Use Form section in an admin interface.",
         "Use Operation password form in an admin interface.",
         "Use Submit state button in an admin interface."
       ],
@@ -4145,12 +4325,47 @@
         },
         {
           "title": "Form section",
-          "description": "Card-backed section chrome for grouped form content and actions.",
-          "chooseWhen": [],
-          "avoidWhen": [],
-          "appOwned": [],
-          "jobs": [
-            "Use Form section in an admin interface."
+          "description": "Related form fields need one titled section with optional actions and footer.",
+          "chooseWhen": [
+            "Related form fields need one titled section with optional actions and footer."
+          ],
+          "avoidWhen": [
+            "Only one field needs its label, hint and validation message."
+          ],
+          "appOwned": [
+            "Field values, validation and submission",
+            "Section order and action callbacks"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "FormSection",
+                "roles": [
+                  "form-section"
+                ],
+                "kind": "surface",
+                "placement": "region",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              }
+            ],
+            "owns": [
+              "Section title, actions and footer anatomy",
+              "Related-field gaps",
+              "Card surface and region insets"
+            ],
+            "parentOwns": [
+              "Form lifecycle",
+              "Gaps between separate form subjects"
+            ],
+            "page": "Use ordinary section insets in an unpadded page or layout region.",
+            "embedded": "Inside a padded Card, use surface=\"flat\" padding=\"none\" so the parent supplies the single inset."
+          },
+          "jobs": [
+            "Related form fields need one titled section with optional actions and footer."
           ],
           "tags": [
             "base",
@@ -4178,7 +4393,10 @@
               ]
             }
           ],
-          "alternatives": []
+          "alternatives": [
+            "themelia-react-ui/base/cards",
+            "themelia-react-ui/base/forms"
+          ]
         },
         {
           "title": "Operation password form",
@@ -4303,13 +4521,32 @@
         }
       ],
       "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "FormField"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/edit.tsx",
           "exports": [
             "AccountEdit"
           ],
           "symbols": [
-            "FormField"
+            "ControlledFormField",
+            "DirtyStateBanner",
+            "ErrorSummary",
+            "FormActionsBar",
+            "SubmitStateButton"
           ],
           "references": [
             "references/workflows.md#validated-editing"
@@ -4317,6 +4554,60 @@
           "optionalPeers": [
             "react-hook-form"
           ]
+        },
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "ControlledFormField"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "ControlledFormField",
+            "DirtyStateBanner",
+            "ErrorSummary",
+            "FormActionsBar",
+            "FormSection",
+            "SubmitStateButton"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "ControlledFormField",
+            "ErrorSummary"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
         }
       ]
     },
@@ -4932,6 +5223,44 @@
             "navigation and actions",
             "selection state"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Item",
+                "roles": [
+                  "record-entry"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "variant",
+                "slots": [
+                  "children"
+                ]
+              },
+              {
+                "symbol": "ItemGroup",
+                "roles": [
+                  "record-list"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "parent",
+                "slots": [
+                  "children"
+                ]
+              }
+            ],
+            "owns": [
+              "Identity, supporting copy and trailing row anatomy",
+              "Row hit area and supported interaction states"
+            ],
+            "parentOwns": [
+              "Collection placement and surface",
+              "Spacing between separate subject regions"
+            ],
+            "page": "Use ItemGroup for a collection of independent records.",
+            "embedded": "Plain Item rows sit flush with ItemGroup edges; avoid a second inset around every row."
+          },
           "jobs": [
             "Present independent record list entries with identity, supporting copy and actions."
           ],
@@ -5096,6 +5425,7 @@
         "details",
         "fact list",
         "key value",
+        "metadata",
         "read-only facts"
       ],
       "sections": [
@@ -5116,6 +5446,34 @@
             "loaded subject data",
             "formatting defaults"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "MetadataList",
+                "roles": [
+                  "facts",
+                  "record-facts"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "parent",
+                "props": {
+                  "adaptTo": "container"
+                }
+              }
+            ],
+            "owns": [
+              "Label/value fact anatomy and shared text roles",
+              "Fact-grid columns, container/viewport adaptation and internal gaps",
+              "Optional list title"
+            ],
+            "parentOwns": [
+              "Surrounding subject header and actions",
+              "Surface insets and placement"
+            ],
+            "page": "Use for facts about one subject; use Item when each row has an independent identity or action.",
+            "embedded": "Use adaptTo=\"container\" in a narrow parent; the default viewport mode preserves explicit responsive column choices."
+          },
           "jobs": [
             "Customer, order, account, or record label/value facts need a grid, rows, or inline summary."
           ],
@@ -5127,6 +5485,7 @@
           "aliases": [
             "blocks/data-display/metadata-list",
             "blocks/metadata-list",
+            "metadata",
             "fact list",
             "read-only facts",
             "contact details",
@@ -5194,6 +5553,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -5210,6 +5570,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -5227,6 +5588,22 @@
             "references/composition.md#receipts"
           ],
           "optionalPeers": []
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "MetadataList"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
         }
       ]
     },
@@ -6491,6 +6868,7 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -7003,7 +7381,64 @@
           "avoidWhen": [
             "The shape has stronger Item, Metadata, FormField, card, table, or mechanical semantics."
           ],
-          "appOwned": [],
+          "appOwned": [
+            "The relationship between siblings",
+            "Responsive tracks, spans and wrapping choices"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Stack",
+                "roles": [
+                  "subject-stack"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ],
+                "props": {
+                  "gap": "2xl"
+                }
+              },
+              {
+                "symbol": "Grid",
+                "roles": [
+                  "explicit-grid"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              },
+              {
+                "symbol": "AdaptiveGrid",
+                "roles": [
+                  "adaptive-grid"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              }
+            ],
+            "owns": [
+              "Stack sibling gaps and action wrapping",
+              "Grid tracks and GridCell spans",
+              "AdaptiveGrid tracks driven by available width"
+            ],
+            "parentOwns": [
+              "Subject semantics and surface insets",
+              "Page gutters and shell scrolling"
+            ],
+            "page": "Choose a gap for the relationship: related content, independent subjects or page regions.",
+            "embedded": "Arrange children without adding another surface or rewriting child identity; match peer stacks to the surrounding region gap."
+          },
           "jobs": [
             "Compose layout blocks, vertical siblings, a horizontal row, wrapping actions, responsive grids and peer card gaps."
           ],
@@ -7065,6 +7500,21 @@
         }
       ],
       "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "Stack"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/composition.tsx",
           "exports": [
@@ -7142,6 +7592,7 @@
             "Stack"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
@@ -7192,6 +7643,54 @@
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "Stack"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Stack"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "Stack"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/scoped-directory.tsx",
           "exports": [
@@ -7202,6 +7701,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -7220,7 +7720,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }
@@ -7556,6 +8057,22 @@
         }
       ],
       "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "Input",
+            "PasswordInput"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/composition.tsx",
           "exports": [
@@ -7583,6 +8100,56 @@
           "optionalPeers": [
             "react-hook-form"
           ]
+        },
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "Input",
+            "Textarea"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Input",
+            "Textarea"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "Input"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
         }
       ]
     },
@@ -8437,7 +9004,28 @@
           "alternatives": []
         }
       ],
-      "recipes": []
+      "recipes": [
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "ColorInput",
+            "DateTimeInput",
+            "PhoneInput",
+            "SliderField",
+            "TagsInput"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        }
+      ]
     },
     {
       "import": "themelia-react-ui/blocks/admin",
@@ -9844,11 +10432,11 @@
       "layer": "blocks",
       "responsibility": "Blocks family: Activity heatmap; Analytics bar; Analytics overview; Chart card; Comparison; Gradient cards; Metric parts; Micro chart grid; Stat cards; Time distribution.",
       "jobs": [
+        "A custom chart needs shared title, description, action and footer regions.",
         "KPI values need trend, comparison, sparkline, bar, heatmap, or dashboard-grid semantics.",
         "Metric renders one KPI with formatting, trend, sparkline and loading/error presentation; variant=\"card\" owns its Card surface.",
         "MetricGrid renders peer KPI cards from MetricData with parent-width columns; MetricBar renders the same metrics as one strip with optional period/footer.",
         "Use Activity heatmap in an admin interface.",
-        "Use Chart card in an admin interface.",
         "Use Comparison in an admin interface.",
         "Use Gradient cards in an admin interface.",
         "Use Metric parts in an admin interface.",
@@ -9953,6 +10541,41 @@
             "requests, refresh and period changes",
             "error/empty/retry regions around the collection"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "MetricGrid",
+                "roles": [
+                  "kpi-grid",
+                  "kpi-collection"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "self",
+                "props": {
+                  "variant": "card"
+                }
+              },
+              {
+                "symbol": "MetricBar",
+                "roles": [
+                  "kpi-strip",
+                  "kpi-collection"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "self"
+              }
+            ],
+            "owns": [
+              "Available-width KPI peer layout or strip anatomy",
+              "Selected metric presentation and strip surface"
+            ],
+            "parentOwns": [
+              "Metric data, comparison meaning and period state",
+              "Dashboard placement and collection request states"
+            ]
+          },
           "jobs": [
             "MetricGrid renders peer KPI cards from MetricData with parent-width columns; MetricBar renders the same metrics as one strip with optional period/footer."
           ],
@@ -10002,12 +10625,46 @@
         },
         {
           "title": "Chart card",
-          "description": "The admin chart surface for a bespoke Recharts composition — the package supplies hierarchy, container config, and slots; the caller owns data, axes, and series.",
-          "chooseWhen": [],
-          "avoidWhen": [],
-          "appOwned": [],
-          "jobs": [
-            "Use Chart card in an admin interface."
+          "description": "A custom chart needs shared title, description, action and footer regions.",
+          "chooseWhen": [
+            "A custom chart needs shared title, description, action and footer regions."
+          ],
+          "avoidWhen": [
+            "A single fact needs no chart, or an existing metric block already owns the presentation."
+          ],
+          "appOwned": [
+            "Series, axes and chart data",
+            "Chart sizing and interaction callbacks"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "ChartCard",
+                "roles": [
+                  "chart-subject"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "variant",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              }
+            ],
+            "owns": [
+              "Chart title and footer anatomy",
+              "ChartContainer configuration and content region"
+            ],
+            "parentOwns": [
+              "Surface framing and insets unless explicitly enabled",
+              "Page or dashboard placement"
+            ],
+            "page": "Place chart subjects in a Grid or layout column with deliberate peer gaps.",
+            "embedded": "Keep the default card-free presentation inside an existing Card; opt into a surface at the composition boundary."
+          },
+          "jobs": [
+            "A custom chart needs shared title, description, action and footer regions."
           ],
           "tags": [
             "blocks",
@@ -10042,7 +10699,10 @@
               ]
             }
           ],
-          "alternatives": []
+          "alternatives": [
+            "themelia-react-ui/blocks/analytics",
+            "themelia-react-ui/blocks/data-display"
+          ]
         },
         {
           "title": "Comparison",
@@ -10268,6 +10928,28 @@
             "requests, refresh and retry actions",
             "semantic trend override when falling values are good"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Metric",
+                "roles": [
+                  "single-kpi"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "variant"
+              }
+            ],
+            "owns": [
+              "KPI formatting, trend and supported sparkline anatomy",
+              "Variant and loading/error presentation"
+            ],
+            "parentOwns": [
+              "Metric meaning, transport and accepted values",
+              "Dashboard placement and peer layout"
+            ],
+            "embedded": "Inspect variant and loading/error presentation before adding a subject surface; default content and card variants have different framing."
+          },
           "jobs": [
             "Metric renders one KPI with formatting, trend, sparkline and loading/error presentation; variant=\"card\" owns its Card surface."
           ],
@@ -10371,7 +11053,8 @@
             "MetricGrid"
           ],
           "references": [
-            "references/analytics.md#dashboard-and-revenue-data"
+            "references/analytics.md#dashboard-and-revenue-data",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": [
             "recharts"
@@ -10387,7 +11070,8 @@
             "MetricData"
           ],
           "references": [
-            "references/analytics.md#dashboard-and-revenue-data"
+            "references/analytics.md#dashboard-and-revenue-data",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": [
             "recharts"
@@ -10449,6 +11133,28 @@
             "period selection, requests and stale-result handling",
             "billing or navigation footer actions"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "UsageCard",
+                "roles": [
+                  "usage",
+                  "quota-summary"
+                ],
+                "kind": "workflow",
+                "placement": "region",
+                "surface": "self"
+              }
+            ],
+            "owns": [
+              "Quota, category, daily-usage and period anatomy",
+              "Card framing and shared region insets"
+            ],
+            "parentOwns": [
+              "Requests and accepted usage data",
+              "Page placement and surrounding peer gaps"
+            ]
+          },
           "jobs": [
             "UsageCard needs used/limit quotas, category shares, daily usage and controlled period/loading/error/retry states in one owned Card."
           ],
@@ -10556,6 +11262,18 @@
           "appOwned": [
             "message data, transport, delivery state and action callbacks"
           ],
+          "composition": {
+            "owns": [
+              "Message author, bubble, status and action anatomy",
+              "Internal message alignment and copy rhythm"
+            ],
+            "parentOwns": [
+              "Transcript spacing and scrolling",
+              "Conversation surface and composer"
+            ],
+            "page": "Compose Message rows inside the transcript region of a page or workflow.",
+            "embedded": "Use the public message parts for custom row content while the host owns the surrounding collection."
+          },
           "jobs": [
             "Message and MessageBubble present chat messages, author, delivery state, rich content and actions."
           ],
@@ -10806,10 +11524,10 @@
         "Build a money ledger with the same rows, deductions and totals as the commerce blocks.",
         "List an order's goods grouped by fulfillment state, with the commands that move them on.",
         "List every payment attempt on an order, including failures, with its kind, status and reference.",
+        "One order needs goods, total and payment ledgers with status and an optional balance note.",
         "Open an order page with its reference, payment and fulfillment status, and commands.",
         "Show one ordered product with its variant, SKU, properties, unit price and passed line total.",
         "Show who placed an order, how to reach them, and where it ships and is billed.",
-        "State what an order costs and where its money stands, with a note about the balance.",
         "Use Address card in an admin interface.",
         "Use Booking event details in an admin interface.",
         "Use Cart summary in an admin interface.",
@@ -11335,6 +12053,28 @@
           "chooseWhen": [],
           "avoidWhen": [],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "InvoiceLineItems",
+                "roles": [
+                  "invoice-lines"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "self"
+              }
+            ],
+            "owns": [
+              "Invoice columns, rows and financial footer anatomy",
+              "Rounded table surface and internal row insets"
+            ],
+            "parentOwns": [
+              "Authoritative line items, totals and currency",
+              "Subject title and placement"
+            ],
+            "embedded": "The line-item table already paints its own surface; do not infer a second Card from the word table."
+          },
           "jobs": [
             "Use Invoice line items in an admin interface."
           ],
@@ -11504,6 +12244,27 @@
           "chooseWhen": [],
           "avoidWhen": [],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "OrderTimeline",
+                "roles": [
+                  "order-history"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "parent"
+              }
+            ],
+            "owns": [
+              "Read-only order-event rail and supporting copy",
+              "Title and footer anatomy"
+            ],
+            "parentOwns": [
+              "Order events and accepted status data",
+              "Subject surface and page placement"
+            ]
+          },
           "jobs": [
             "Use Order timeline in an admin interface."
           ],
@@ -11588,6 +12349,27 @@
           "chooseWhen": [],
           "avoidWhen": [],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "PaymentTimeline",
+                "roles": [
+                  "payment-history"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "parent"
+              }
+            ],
+            "owns": [
+              "Read-only payment-event rail and supporting copy",
+              "Event status and amount presentation"
+            ],
+            "parentOwns": [
+              "Authoritative payment events and money formatting",
+              "Subject surface and page placement"
+            ]
+          },
           "jobs": [
             "Use Payment timeline in an admin interface."
           ],
@@ -12134,12 +12916,42 @@
         },
         {
           "title": "Order summary",
-          "description": "An order's money in two ledgers — what was ordered and what has moved — with the payment status beside the title.",
-          "chooseWhen": [],
-          "avoidWhen": [],
-          "appOwned": [],
-          "jobs": [
-            "State what an order costs and where its money stands, with a note about the balance."
+          "description": "One order needs goods, total and payment ledgers with status and an optional balance note.",
+          "chooseWhen": [
+            "One order needs goods, total and payment ledgers with status and an optional balance note."
+          ],
+          "avoidWhen": [
+            "The content is a generic fact list or the package is expected to calculate accounting totals."
+          ],
+          "appOwned": [
+            "Calculated and formatted amounts",
+            "Payment state and business rules"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "OrderSummary",
+                "roles": [
+                  "order-summary"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "variant"
+              }
+            ],
+            "owns": [
+              "Goods, total and payment ledger anatomy",
+              "Summary title, payment status and balance-note placement"
+            ],
+            "parentOwns": [
+              "Subject surface and insets with the default flat presentation",
+              "Placement beside order details"
+            ],
+            "page": "Place the summary in the order page main or aside region without repeating the route title.",
+            "embedded": "The default flat/none presentation inherits a padded parent; choose a surface explicitly for a separate summary Card."
+          },
+          "jobs": [
+            "One order needs goods, total and payment ledgers with status and an optional balance note."
           ],
           "tags": [
             "blocks",
@@ -12171,7 +12983,10 @@
               ]
             }
           ],
-          "alternatives": []
+          "alternatives": [
+            "themelia-react-ui/base/metadata-list",
+            "themelia-react-ui/blocks/commerce"
+          ]
         },
         {
           "title": "Order transactions",
@@ -12646,6 +13461,18 @@
             "label, value and formatting policy",
             "subject framing at the composition boundary"
           ],
+          "composition": {
+            "owns": [
+              "One label/value pair and its alignment",
+              "Shared value typography"
+            ],
+            "parentOwns": [
+              "Subject title and surface",
+              "Spacing between separate facts or subjects"
+            ],
+            "page": "Use MetadataList for several facts about the same subject.",
+            "embedded": "Place the plain pair in an existing region without adding another Card."
+          },
           "jobs": [
             "One compact label/value pair needs inline emphasis without trend or chart semantics."
           ],
@@ -12700,7 +13527,22 @@
           "avoidWhen": [
             "Only label/value facts are needed or assignment state and mutations belong inside the package."
           ],
-          "appOwned": [],
+          "appOwned": [
+            "Relationship data and selection state",
+            "Navigation and mutation callbacks"
+          ],
+          "composition": {
+            "owns": [
+              "Relationship title, badge and action anatomy",
+              "Alert, selector, metadata and details regions"
+            ],
+            "parentOwns": [
+              "Card surface and insets",
+              "Placement and gaps between subjects"
+            ],
+            "page": "Frame a separate relationship subject with Card at the page composition boundary.",
+            "embedded": "The scaffold stays card-free inside an existing padded surface."
+          },
           "jobs": [
             "App-owned relationship content needs title, badge, alert, selector, metadata, actions, and details regions."
           ],
@@ -12761,7 +13603,8 @@
             "EmptyState"
           ],
           "references": [
-            "references/analytics.md#dashboard-and-revenue-data"
+            "references/analytics.md#dashboard-and-revenue-data",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": [
             "recharts"
@@ -12776,7 +13619,8 @@
             "InlineStat"
           ],
           "references": [
-            "references/analytics.md#dashboard-and-revenue-data"
+            "references/analytics.md#dashboard-and-revenue-data",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": [
             "recharts"
@@ -13175,6 +14019,27 @@
           "chooseWhen": [],
           "avoidWhen": [],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Timeline",
+                "roles": [
+                  "read-only-timeline"
+                ],
+                "kind": "content",
+                "placement": "region",
+                "surface": "parent"
+              }
+            ],
+            "owns": [
+              "Event marker rail and shared row typography",
+              "Event status and timestamp presentation"
+            ],
+            "parentOwns": [
+              "Event meaning and chronological items",
+              "Subject surface and page placement"
+            ]
+          },
           "jobs": [
             "Use Timeline engine in an admin interface."
           ],
@@ -13393,6 +14258,28 @@
             "Only read-only milestones, order/payment progress, or changelog rails are needed."
           ],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "ActivityLog",
+                "roles": [
+                  "activity",
+                  "mixed-activity-log"
+                ],
+                "kind": "workflow",
+                "placement": "region",
+                "surface": "parent"
+              }
+            ],
+            "owns": [
+              "Mixed-source activity and comment anatomy",
+              "Composer, collapsible details and entry actions"
+            ],
+            "parentOwns": [
+              "Requests, permissions and accepted events",
+              "Subject surface and page placement"
+            ]
+          },
           "jobs": [
             "Mixed comments, audit/domain/system events, adapters, metadata, details, and row actions share one log."
           ],
@@ -14232,6 +15119,28 @@
             "server transport and authoritative records",
             "record priority, permissions and commands"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "DataView",
+                "roles": [
+                  "collection-workflow"
+                ],
+                "kind": "workflow",
+                "placement": "region",
+                "surface": "self"
+              }
+            ],
+            "owns": [
+              "Coordinated filters around one data table",
+              "Table frame, toolbar and pagination seams"
+            ],
+            "parentOwns": [
+              "Records, transport and permissions",
+              "Route title and outer placement"
+            ],
+            "embedded": "DataView already composes its DataTable; choose one collection owner rather than nesting the two workflows."
+          },
           "jobs": [
             "Compose a coordinated record directory when the feature query, view and collection contracts fit."
           ],
@@ -14886,6 +15795,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -15612,6 +16522,58 @@
             "The surface is anchored to a trigger (a popover, menu, select or tooltip) rather than a dialog."
           ],
           "appOwned": [],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "ActionDialog",
+                "roles": [
+                  "task-dialog"
+                ],
+                "kind": "workflow",
+                "placement": "overlay",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              },
+              {
+                "symbol": "ActionDrawer",
+                "roles": [
+                  "task-drawer"
+                ],
+                "kind": "workflow",
+                "placement": "overlay",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              },
+              {
+                "symbol": "ConfirmDialog",
+                "roles": [
+                  "confirmation"
+                ],
+                "kind": "workflow",
+                "placement": "overlay",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              }
+            ],
+            "owns": [
+              "Modal regions, focus and dismissal behavior",
+              "Confirm/cancel, pending and error presentation"
+            ],
+            "parentOwns": [
+              "Opening state and application effects",
+              "Form or mutation data and permitted callbacks"
+            ],
+            "embedded": "Open through app or feature callbacks; a modal workflow is not an ordinary page-subject child."
+          },
           "jobs": [
             "A modal, drawer, or confirmation needs standardized confirm/cancel, async loading, error, strings, and tone behavior."
           ],
@@ -15687,10 +16649,28 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
+        },
+        {
+          "file": "examples/rhf-overlay-form.tsx",
+          "exports": [
+            "RHFOverlayForm"
+          ],
+          "symbols": [
+            "ActionDrawer",
+            "useOverlayVisibility"
+          ],
+          "references": [
+            "references/rhf-workflows.md#overlay-create-and-edit",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
         }
       ]
     },
@@ -16146,7 +17126,7 @@
       "layer": "features",
       "responsibility": "Features family: Resource workspaces.",
       "jobs": [
-        "Use Resource workspaces in an admin interface."
+        "A record index or detail needs resource identity, toolbar, body, aside and loading/empty/error regions."
       ],
       "tags": [
         "features",
@@ -16160,12 +17140,73 @@
       "guidance": [
         {
           "title": "Resource workspaces",
-          "description": "State-aware index and detail workspaces with identity, actions, controlled tabs, related context, and async states.",
-          "chooseWhen": [],
-          "avoidWhen": [],
-          "appOwned": [],
-          "jobs": [
-            "Use Resource workspaces in an admin interface."
+          "description": "A record index or detail needs resource identity, toolbar, body, aside and loading/empty/error regions.",
+          "chooseWhen": [
+            "A record index or detail needs resource identity, toolbar, body, aside and loading/empty/error regions."
+          ],
+          "avoidWhen": [
+            "Only a page title or one plain fact list is needed."
+          ],
+          "appOwned": [
+            "Resource data and request lifecycle",
+            "Navigation, permissions and mutation callbacks"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "ResourceIndexShell",
+                "roles": [
+                  "resource-index"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children",
+                  "toolbar"
+                ]
+              },
+              {
+                "symbol": "ResourceShowShell",
+                "roles": [
+                  "resource-detail"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children",
+                  "toolbar"
+                ]
+              },
+              {
+                "symbol": "ResourceDetailsSection",
+                "roles": [
+                  "resource-facts-section"
+                ],
+                "kind": "surface",
+                "placement": "region",
+                "surface": "self",
+                "slots": [
+                  "children",
+                  "footer"
+                ]
+              }
+            ],
+            "owns": [
+              "Resource identity and toolbar regions",
+              "Body/aside geometry and subject gaps",
+              "Resource loading, empty and error presentation"
+            ],
+            "parentOwns": [
+              "Application chrome and page gutters",
+              "Route heading and command ownership"
+            ],
+            "page": "Embed the resource shell in one Page and choose which header owns the route title; tabs are optional when switching sections is useful.",
+            "embedded": "The resource shell adds no page inset; ResourceDetailsSection owns its Card and adapts facts to its available width."
+          },
+          "jobs": [
+            "A record index or detail needs resource identity, toolbar, body, aside and loading/empty/error regions."
           ],
           "tags": [
             "features",
@@ -16206,7 +17247,11 @@
               ]
             }
           ],
-          "alternatives": []
+          "alternatives": [
+            "themelia-react-ui/base/metadata-list",
+            "themelia-react-ui/features/data-view",
+            "themelia-react-ui/layout/page"
+          ]
         }
       ],
       "recipes": []
@@ -16702,6 +17747,42 @@
             "query transport, server paging and scope",
             "column priority, permissioned commands and navigation"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "DataTable",
+                "roles": [
+                  "comparison-table"
+                ],
+                "kind": "workflow",
+                "placement": "region",
+                "surface": "self",
+                "props": {
+                  "surface": "card"
+                }
+              },
+              {
+                "symbol": "ResourceCell",
+                "roles": [
+                  "identity-in-cell"
+                ],
+                "kind": "content",
+                "placement": "cell",
+                "surface": "none"
+              }
+            ],
+            "owns": [
+              "Table columns, cells and supported local table state",
+              "Topbar, bulk-action and pagination regions",
+              "Table scrolling and in-place fullscreen behavior"
+            ],
+            "parentOwns": [
+              "Route title and page commands",
+              "Page gutters and surrounding subject surfaces"
+            ],
+            "page": "Place DataTable in one Page body; use DataView when the complete collection workflow should be assembled for you.",
+            "embedded": "Use the table regions for local query and selection controls without adding another page shell."
+          },
           "jobs": [
             "Compare records in columns; use ResourceCell for identity cells and CellStack for prioritized supporting values.",
             "Place app-controlled query tools in topbarContent, export in topbarEnd, and selection commands in bulkActions."
@@ -16777,6 +17858,7 @@
             "DataTableProps"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
@@ -16795,6 +17877,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -17359,6 +18442,34 @@
             "workspace and signed-in user data",
             "header commands and responsive composition"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "AppLayout",
+                "roles": [
+                  "application-shell"
+                ],
+                "kind": "shell",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ],
+                "routeSlot": "children"
+              }
+            ],
+            "owns": [
+              "Application header and sidebar chrome",
+              "One PageViewport and its scrolling boundary",
+              "Responsive shell regions"
+            ],
+            "parentOwns": [
+              "Viewport height",
+              "Route content supplied as children"
+            ],
+            "page": "Render the route Page as the shell child so one owner supplies its title, commands and gutters.",
+            "embedded": "Use Page or lower regions for content inside a shell; another AppLayout is a separate application boundary."
+          },
           "jobs": [
             "Compose light-header, dark-header, sidebar, inset or stacked chrome with one PageViewport."
           ],
@@ -17416,6 +18527,7 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -17483,33 +18595,83 @@
       "layer": "layout",
       "responsibility": "Layout family: Auth shell.",
       "jobs": [
-        "Use Auth shell in an admin interface."
+        "An authentication page needs its main landmark, title, form card and anonymous navigation composed by AuthShell."
       ],
       "tags": [
         "auth",
         "layout",
         "shells"
       ],
-      "aliases": [],
+      "aliases": [
+        "authentication",
+        "login",
+        "password recovery",
+        "password sign in",
+        "sign in",
+        "sign-in"
+      ],
       "sections": [
         "Layouts"
       ],
       "guidance": [
         {
           "title": "Auth shell",
-          "description": "Framework-neutral auth card and split shells for login, register, invite, reset, magic-link, and verification pages.",
-          "chooseWhen": [],
-          "avoidWhen": [],
-          "appOwned": [],
-          "jobs": [
-            "Use Auth shell in an admin interface."
+          "description": "An authentication page needs its main landmark, title, form card and anonymous navigation composed by AuthShell.",
+          "chooseWhen": [
+            "An authentication page needs its main landmark, title, form card and anonymous navigation composed by AuthShell."
+          ],
+          "avoidWhen": [
+            "A signed-in workspace needs application navigation or a record page header."
+          ],
+          "appOwned": [
+            "authentication transport, validation and pending/error state",
+            "anonymous recovery and return destinations",
+            "routing, translations and session handling"
+          ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "AuthShell",
+                "roles": [
+                  "authentication-shell"
+                ],
+                "kind": "shell",
+                "placement": "region",
+                "surface": "variant",
+                "slots": [
+                  "children",
+                  "footer",
+                  "cardFooter",
+                  "postCard"
+                ]
+              }
+            ],
+            "owns": [
+              "Anonymous-page landmark and authentication copy",
+              "Brand, form-card and footer regions"
+            ],
+            "parentOwns": [
+              "Authentication transport, validation and session state",
+              "Form fields and anonymous destinations"
+            ],
+            "embedded": "AuthShell owns the authentication page boundary; select bare/card/split deliberately before adding another form surface."
+          },
+          "jobs": [
+            "An authentication page needs its main landmark, title, form card and anonymous navigation composed by AuthShell."
           ],
           "tags": [
             "layout",
             "shells",
             "auth"
           ],
-          "aliases": [],
+          "aliases": [
+            "authentication",
+            "login",
+            "sign-in",
+            "sign in",
+            "password sign in",
+            "password recovery"
+          ],
           "section": "Layouts",
           "browse": {
             "category": "layout-shells",
@@ -17543,10 +18705,33 @@
               ]
             }
           ],
-          "alternatives": []
+          "alternatives": [
+            "themelia-react-ui/layout/app-shell",
+            "themelia-react-ui/layout/page"
+          ]
         }
       ],
-      "recipes": []
+      "recipes": [
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "AuthFooterLinks",
+            "AuthForm",
+            "AuthFormRow",
+            "AuthShell",
+            "AuthShellProps"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        }
+      ]
     },
     {
       "import": "themelia-react-ui/layout/containers",
@@ -17605,6 +18790,75 @@
             "link destinations and site navigation",
             "responsive placement and brand theming"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Container",
+                "roles": [
+                  "content-container"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              },
+              {
+                "symbol": "Section",
+                "roles": [
+                  "content-section"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              },
+              {
+                "symbol": "PageViewport",
+                "roles": [
+                  "scroll-viewport"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              },
+              {
+                "symbol": "TwoColumnLayout",
+                "roles": [
+                  "main-support-layout"
+                ],
+                "kind": "layout",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "main",
+                  "aside",
+                  "header",
+                  "footer"
+                ],
+                "props": {
+                  "adaptTo": "container"
+                }
+              }
+            ],
+            "owns": [
+              "Container measure and optional gutters",
+              "Section rhythm and PageViewport scrolling",
+              "TwoColumnLayout main/aside geometry and subject gaps"
+            ],
+            "parentOwns": [
+              "Application chrome and route title",
+              "Subject surface insets"
+            ],
+            "page": "Use Page for titled application routes and Container/Section for content-led pages; TwoColumnLayout supplies the main/aside split.",
+            "embedded": "Let the existing Page own gutters; TwoColumnLayout adds column and subject gaps while each Card owns its inset."
+          },
           "jobs": [
             "Compose a public website landing page or service overview from Container, Section and lower public components.",
             "Own page content width, inline gutters, semantic section rhythm, scrolling or a main/aside split."
@@ -17682,6 +18936,22 @@
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "TwoColumnLayout"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/website.tsx",
           "exports": [
@@ -17693,7 +18963,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }
@@ -17819,6 +19090,7 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -18227,6 +19499,33 @@
             "which command is primary and which are destructive",
             "navigation callbacks and permissioned actions"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "Page",
+                "roles": [
+                  "route"
+                ],
+                "kind": "page",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children"
+                ]
+              }
+            ],
+            "owns": [
+              "Content measure and page gutters",
+              "Route header, command placement and header/body rhythm",
+              "Subject gaps between direct body children"
+            ],
+            "parentOwns": [
+              "Application chrome",
+              "Scrolling through PageViewport"
+            ],
+            "page": "Use one Page for each route; narrow selects the centered measure unless maxWidth is explicit.",
+            "embedded": "Inside an existing Page, compose subject regions with Card, TwoColumnLayout or Stack instead of another Page."
+          },
           "jobs": [
             "A page needs shell-level title, back/link rendering, role-based primary/secondary commands, content, and page composition slots."
           ],
@@ -18285,14 +19584,16 @@
         {
           "file": "examples/app-layout.tsx",
           "exports": [
-            "WorkspaceLayout"
+            "WorkspaceExamplePage"
           ],
           "symbols": [
-            "Page"
+            "Page",
+            "PageProps"
           ],
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -18309,11 +19610,28 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Page"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/scoped-directory.tsx",
           "exports": [
@@ -18324,6 +19642,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -18552,6 +19871,7 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
@@ -18618,6 +19938,36 @@
             "record content, navigation and locale callbacks",
             "header actions and supporting rails"
           ],
+          "composition": {
+            "mappings": [
+              {
+                "symbol": "WorkspaceLayout",
+                "roles": [
+                  "record-workspace"
+                ],
+                "kind": "shell",
+                "placement": "region",
+                "surface": "none",
+                "slots": [
+                  "children",
+                  "header",
+                  "sidebar",
+                  "rail"
+                ]
+              }
+            ],
+            "owns": [
+              "Workspace frame, measure and content insets",
+              "Header, sidebar, main and rail regions",
+              "Subject gaps and responsive region scrolling"
+            ],
+            "parentOwns": [
+              "Application chrome and viewport boundary",
+              "Subject content and route hierarchy"
+            ],
+            "page": "Use workspace regions for a bounded record composition that needs a rail or independent navigation.",
+            "embedded": "WorkspaceLayout already supplies main-content insets; compose subject content without repeating page gutters."
+          },
           "jobs": [
             "A bounded record workspace needs independently composed header, sidebar, main and rail regions."
           ],
@@ -19304,6 +20654,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -19323,6 +20674,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -19338,6 +20690,7 @@
             "Name"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
@@ -19357,6 +20710,22 @@
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Money"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/scoped-directory.tsx",
           "exports": [
@@ -19367,6 +20736,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -19385,7 +20755,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }
@@ -19611,7 +20982,22 @@
           "avoidWhen": [
             "The value has stronger money, date, contact, identity, code, or empty-value semantics."
           ],
-          "appOwned": [],
+          "appOwned": [
+            "semantic heading order",
+            "copy and emphasis appropriate to the subject"
+          ],
+          "composition": {
+            "owns": [
+              "Shared text, heading, label and link roles",
+              "Copy rhythm within a heading and supporting sentence"
+            ],
+            "parentOwns": [
+              "Spacing between subjects",
+              "Page measure and surface insets"
+            ],
+            "page": "Let Page and subject headers choose their title role; keep semantic heading order independent of visual size.",
+            "embedded": "Use margin-free typography inside the parent layout and retain its foreground role."
+          },
           "jobs": [
             "Library-owned prose, headings, labels, or text links need a typography role."
           ],
@@ -19700,10 +21086,42 @@
           "references": [
             "references/composition.md#application-layouts",
             "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
+            "references/workflows.md#single-resource-page"
+          ],
+          "optionalPeers": []
+        },
+        {
+          "file": "examples/app-layout.tsx",
+          "exports": [
+            "WorkspaceExamplePage"
+          ],
+          "symbols": [
+            "Text"
+          ],
+          "references": [
+            "references/composition.md#application-layouts",
+            "references/integration.md",
+            "references/integration.md#form-transport-and-router-adapters",
             "references/workflows.md#single-resource-page"
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/authentication.tsx",
+          "exports": [
+            "PasswordSignIn"
+          ],
+          "symbols": [
+            "Text"
+          ],
+          "references": [
+            "references/authentication.md#authentication-pages"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/composition.tsx",
           "exports": [
@@ -19754,6 +21172,7 @@
           "references": [
             "references/analytics.md#usage-facts-and-verification",
             "references/composition.md#application-layouts",
+            "references/screen-archetypes.md",
             "references/workflows.md#detail-and-framing",
             "references/workflows.md#single-resource-page"
           ],
@@ -19796,6 +21215,7 @@
             "Text"
           ],
           "references": [
+            "references/screen-archetypes.md",
             "references/workflows.md#index-and-navigation"
           ],
           "optionalPeers": [
@@ -19816,6 +21236,38 @@
           ],
           "optionalPeers": []
         },
+        {
+          "file": "examples/rhf-bindings.tsx",
+          "exports": [
+            "TypedControlBindings"
+          ],
+          "symbols": [
+            "Text"
+          ],
+          "references": [
+            "references/rhf-workflows.md#typed-control-bindings"
+          ],
+          "optionalPeers": [
+            "react-day-picker",
+            "react-hook-form"
+          ]
+        },
+        {
+          "file": "examples/rhf-edit-page.tsx",
+          "exports": [
+            "RHFEditPage"
+          ],
+          "symbols": [
+            "Text"
+          ],
+          "references": [
+            "references/rhf-workflows.md#screen-and-state-ownership",
+            "references/screen-archetypes.md"
+          ],
+          "optionalPeers": [
+            "react-hook-form"
+          ]
+        },
         {
           "file": "examples/scoped-directory.tsx",
           "exports": [
@@ -19826,6 +21278,7 @@
           ],
           "references": [
             "references/composition.md#compose-from-the-task",
+            "references/screen-archetypes.md",
             "references/workflows.md#scoped-directory"
           ],
           "optionalPeers": [
@@ -19844,7 +21297,8 @@
           ],
           "references": [
             "references/composition.md#public-websites-and-service-overviews",
-            "references/composition.md#visual-heading-emphasis"
+            "references/composition.md#visual-heading-emphasis",
+            "references/screen-archetypes.md"
           ],
           "optionalPeers": []
         }