@estiva-app/ui 0.37.2 → 0.39.0

package/dist/looks.d.ts

@@ -11,7 +11,7 @@
  * much room it takes stay in the part.
  */
 /** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export declare const FIELD_BOX_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg";
+export declare const FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg";
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export declare const FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
 /** A field that cannot be used: TextInput, Textarea and Select. */
@@ -24,7 +24,7 @@ export declare const FIELD_SIZE_CLASSES: {
     readonly small: "h-6 min-h-6 px-2 text-caption";
 };
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export declare const FIELD_SHELL_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors";
+export declare const FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors";
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export declare const FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 /** A chip's words: Chip's label and Reaction's count. */

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,6GAA6G,CAAA;AAE3I,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,qGAAqG,CAAA;AAErI,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,wHAAwH,CAAA;AAEtJ,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,gHAAgH,CAAA;AAEhJ,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.37.2",
+  "version": "0.39.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -53,6 +53,7 @@
     "test:watch": "vitest --project unit",
     "test:a11y": "vitest run --project storybook-signal --project storybook-ship",
     "test:stories": "vitest run --project storybook-draw",
+    "test:docs": "node scripts/docs-pages-draw.mjs",
     "typecheck": "tsc --noEmit",
     "prelint": "node build.mjs",
     "lint": "eslint .",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.37.2",
+    "packageVersion": "0.39.0",
     "exports": 88,
     "typeExports": 97,
     "files": null
@@ -21,12 +21,12 @@
       "kind": "component",
       "importPath": "@estiva-app/ui",
       "sourceFile": "src/AppShell.tsx",
-      "purpose": "The frame of an app, in the two manners that pair: `solid` — the structured frame, a solid TopBar over a Sidebar and the content beside it — and `floating` — the TopBar floating over the top edge, a Rail standing on the background, and the content living in the rounded card.",
+      "purpose": "The frame of an app, in three manners: `solid` — the structured frame, a solid TopBar over a Sidebar and the content beside it — `inset` — the same frame the other way round, the TopBar and the Sidebar standing on the ground and the content a lighter card beside them — and `floating` — the TopBar floating over the top edge, a Rail standing on the background, and the content living in the rounded card.",
       "purposeFrom": "page",
       "props": [
         {
           "name": "variant",
-          "takes": "solid | floating",
+          "takes": "solid | floating | inset",
           "required": false,
           "note": null
         },
@@ -78,7 +78,8 @@
           "prop": "variant",
           "values": [
             "solid",
-            "floating"
+            "floating",
+            "inset"
           ]
         }
       ],
@@ -952,7 +953,7 @@
       "app": null,
       "looks": [
         "bg-bg-elevated border border-border-subtle rounded-md",
-        "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "text-body-2 border-none bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
@@ -1889,7 +1890,7 @@
       "docPage": null,
       "app": null,
       "looks": [
-        "text-menu signal:font-mono signal:text-small signal:tracking-wider"
+        "text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider"
       ]
     },
     {
@@ -2607,9 +2608,23 @@
           "takes": "text",
           "required": false,
           "note": null
+        },
+        {
+          "name": "tone",
+          "takes": "default | tooltip",
+          "required": false,
+          "note": "`tooltip` draws the key in the tooltip's own key colours, for a theme whose tooltip is darker than its page (Katerina, 27 September)."
+        }
+      ],
+      "variants": [
+        {
+          "prop": "tone",
+          "values": [
+            "default",
+            "tooltip"
+          ]
         }
       ],
-      "variants": [],
       "ownsBehaviours": [],
       "status": "stable",
       "migrationStage": null,
@@ -2618,10 +2633,12 @@
       "docPage": "src/Kbd.mdx",
       "app": null,
       "looks": [
-        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small",
+        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small leaf:font-mono leaf:text-small",
+        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small leaf:font-mono leaf:text-small border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key",
         "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary",
         "signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small",
-        "ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small"
+        "ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small",
+        "border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key"
       ]
     },
     {
@@ -2696,7 +2713,7 @@
       "docPage": "src/Lightbox.mdx",
       "app": null,
       "looks": [
-        "rounded-full bg-bg-elevated border border-border-strong text-text-secondary hover:text-text-primary"
+        "rounded-full bg-bg-tooltip border border-border-tooltip-key text-text-tooltip-key hover:text-text-tooltip"
       ]
     },
     {
@@ -4184,7 +4201,7 @@
       "docPage": "src/SearchInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors focus-within:border-border-strong",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-strong",
         "text-input-value bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
     },
@@ -4339,13 +4356,14 @@
       "docPage": "src/SectionLabel.mdx",
       "app": null,
       "looks": [
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest"
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        "leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest"
       ]
     },
     {
@@ -4468,15 +4486,15 @@
       "docPage": "src/Select.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left"
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left"
       ]
     },
     {
@@ -4723,7 +4741,7 @@
       "docPage": "src/Textarea.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted resize-none outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted resize-none outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4764,8 +4782,8 @@
       "docPage": "src/TextInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring",
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4847,11 +4865,11 @@
       "docPage": "src/Toast.mdx",
       "app": null,
       "looks": [
-        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
-        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
+        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
       ]
     },
     {
@@ -4896,11 +4914,11 @@
       "docPage": null,
       "app": null,
       "looks": [
-        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
-        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
+        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
       ]
     },
     {
@@ -5316,7 +5334,7 @@
       "docPage": "src/Tooltip.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border border-border-default bg-bg-elevated shadow-lg"
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg border-border-tooltip bg-bg-tooltip"
       ]
     },
     {
@@ -5395,7 +5413,7 @@
       "props": [
         {
           "name": "variant",
-          "takes": "solid | floating",
+          "takes": "solid | floating | inset",
           "required": false,
           "note": null
         },
@@ -5435,7 +5453,8 @@
           "prop": "variant",
           "values": [
             "solid",
-            "floating"
+            "floating",
+            "inset"
           ]
         }
       ],

package/src/AppShell.mdx

@@ -5,14 +5,18 @@ import * as AppShellStories from './AppShell.stories'
 
 # AppShell
 
-The frame of an app, in the two manners that pair: **`solid`** — the
-structured frame, a solid TopBar over a Sidebar and the content beside
-it — and **`floating`** — the TopBar floating over the top edge, a Rail
+The frame of an app, in three manners: **`solid`** — the structured
+frame, a solid TopBar over a Sidebar and the content beside it —
+**`inset`** — the same frame the other way round, the TopBar and the
+Sidebar standing on the ground and the content a lighter card beside
+them — and **`floating`** — the TopBar floating over the top edge, a Rail
 standing on the background, and the content living in the rounded card.
 Layout only: no data, no routes.
 
 <Canvas of={AppShellStories.Solid} />
 
+<Canvas of={AppShellStories.Inset} />
+
 <Canvas of={AppShellStories.Floating} />
 
 ## When
@@ -20,6 +24,10 @@ Layout only: no data, no routes.
 - **`solid` + Sidebar** — a place-by-place app: labelled entries, counts,
   groups. Sidebar and main scroll independently, so a long list never
   scrolls the navigation away.
+- **`inset` + Sidebar** — the same place-by-place app, when its pages
+  read as one sheet on a desk: the content is a card 16px from the right
+  and bottom, with 8px corners, and the Sidebar drops its line and surface
+  by itself. Any theme: the ground and the card are its base and surface.
 - **`floating` + Rail** — an app with a handful of top-level places and
   its content in one card; the `menu` button in the bar collapses the
   rail (the collapsing stays the app's).

package/src/AppShell.stories.tsx

@@ -66,9 +66,7 @@ const rail = (
 export const Solid: Story = {
   render: (args) => (
     <AppShell {...args} logo="Estiva" search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} identity={identity} nav={sidebar}>
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -92,9 +90,26 @@ export const SolidScrolls: Story = {
 export const SolidWithBanner: Story = {
   render: (args) => (
     <AppShell {...args} logo="Estiva" identity={identity} nav={sidebar} banner={<Banner tone="ok">Public key copied.</Banner>}>
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
+    </AppShell>
+  ),
+}
+
+/** The structured frame the other way round: the bar and the sidebar on the ground, the content a lighter card beside them. */
+export const Inset: Story = {
+  args: { variant: 'inset' },
+  render: (args) => (
+    <AppShell {...args} logo="Estiva" search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} identity={identity} nav={sidebar}>
+      <EmptyState message="Nothing here yet." />
+    </AppShell>
+  ),
+}
+
+export const InsetWithBanner: Story = {
+  args: { variant: 'inset' },
+  render: (args) => (
+    <AppShell {...args} logo="Estiva" identity={identity} nav={sidebar} banner={<Banner tone="ok">Public key copied.</Banner>}>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -111,9 +126,7 @@ export const Floating: Story = {
       identity={identity}
       nav={rail}
     >
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -130,9 +143,7 @@ export const FloatingWithBanner: Story = {
       nav={rail}
       banner={<Banner tone="info">A new version is available. Reload when convenient.</Banner>}
     >
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }

package/src/AppShell.test.tsx

@@ -9,6 +9,7 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import { AppShell } from './AppShell'
+import { Sidebar } from './Sidebar'
 
 afterEach(cleanup)
 
@@ -26,6 +27,25 @@ describe('AppShell', () => {
     expect(main.className).not.toContain('overflow-y-auto')
   })
 
+  it('stands the sidebar on the ground and makes the content a panel in the inset manner, and only there', () => {
+    const frame = (variant: 'solid' | 'inset') =>
+      render(
+        <AppShell variant={variant} nav={<Sidebar>Rows</Sidebar>}>
+          <p>Page</p>
+        </AppShell>,
+      )
+    const { unmount } = frame('solid')
+    expect(screen.getByRole('navigation').className).toContain('border-r')
+    expect(screen.getByRole('banner').className).toContain('border-b')
+    unmount()
+    frame('inset')
+    expect(screen.getByRole('navigation').className).not.toMatch(/border-r|bg-bg-surface/)
+    expect(screen.getByRole('banner').className).not.toMatch(/border-b|bg-bg-surface/)
+    const panel = screen.getByRole('main').closest('.rounded-lg')
+    expect(panel?.className).toContain('bg-bg-surface')
+    expect(panel?.className).toContain('mr-4')
+  })
+
   it('leaves the floating manner’s card as it was', () => {
     render(
       <AppShell variant="floating" nav={<nav>Nav</nav>}>

package/src/AppShell.tsx

@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { Card } from './Card'
 import { ScrollArea } from './ScrollArea'
+import { SidebarOnGround } from './Sidebar'
 import { TopBar } from './TopBar'
 
 /**
- * The frame of an app, in the two manners that pair with the TopBar's
+ * The frame of an app, in the manners that pair with the TopBar's
  * (Katerina, 2026-09-02: the two shells go together — the solid bar with
  * the sidebar, the floating bar with the rail):
  *
@@ -15,6 +17,9 @@ import { TopBar } from './TopBar'
  *   edge, the rail stands on the app background, and the content lives
  *   in the rounded card beside it (2026-09-02, the floating app's frame
  *   geometry; its collapse animation and launcher stay in the app).
+ * - `inset` — the structured frame, the other way round: the TopBar and
+ *   the Sidebar stand on the ground, and the content is a lighter card
+ *   beside them (Katerina, 28 September: Linear's layout, in any theme).
  *
  * The banner belongs to the content area (her ruling, 2026-09-02): it
  * renders at the top of the main column — inside the card, in the
@@ -24,7 +29,7 @@ import { TopBar } from './TopBar'
  * has no data and no routes.
  */
 export interface AppShellProps {
-  variant?: 'solid' | 'floating'
+  variant?: 'solid' | 'floating' | 'inset'
   /** The top bar's menu button, in an app whose navigation collapses. */
   menu?: ReactNode
   /** The top bar's left: the app's logo mark, or its name as text. */
@@ -42,6 +47,7 @@ export interface AppShellProps {
 
 export function AppShell({ variant = 'solid', menu, logo, search, identity, banner, nav, children }: AppShellProps) {
   const bar = <TopBar variant={variant} menu={menu} logo={logo} search={search} right={identity} />
+  const inset = variant === 'inset'
 
   if (variant === 'floating') {
     return (
@@ -66,6 +72,30 @@ export function AppShell({ variant = 'solid', menu, logo, search, identity, bann
     )
   }
 
+  const column = (
+    <>
+      {banner}
+      {/* The frame owns the page's scrollbar (Katerina, 2026-09-09: the
+          Issues page still had a native bar — D40 said everywhere, and the
+          one place every page passes through had been left out). A
+          `ScrollArea` here means no page can forget it. The content box is
+          at least the viewport's height and grows with a tall page, so Base
+          UI sees its size change (the morning's phantom bar was a content
+          box it could not watch); `main` fills it as a flex column. The
+          page contract (the AppShell page says it): a page is a flex
+          child of `main` — `flex-1` to fill and scroll here; `flex-1
+          min-h-0 [contain:size]` to take exactly the frame's height and
+          scroll inside itself, as Ship's detail grids do — and the outer
+          region, with nothing to scroll, passes the wheel through. Never
+          `h-full`: a box that is *at least* the viewport's height gives a
+          percentage nothing to resolve against — measured, all four Ship
+          pages, 2026-09-09. */}
+      <ScrollArea className="min-h-0 flex-1" contentClassName="flex min-h-full flex-col">
+        <main className="flex min-w-0 flex-1 flex-col">{children}</main>
+      </ScrollArea>
+    </>
+  )
+
   return (
     /* `relative overflow-hidden` is the seal the floating manner already has
        (and the ScrollArea's own root is `relative`, so an absolutely placed
@@ -79,28 +109,17 @@ export function AppShell({ variant = 'solid', menu, logo, search, identity, bann
     <div className="relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary">
       {bar}
       <div className="flex min-h-0 flex-1">
-        {nav}
-        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-          {banner}
-          {/* The frame owns the page's scrollbar (Katerina, 2026-09-09: the
-              Issues page still had a native bar — D40 said everywhere, and the
-              one place every page passes through had been left out). A
-              `ScrollArea` here means no page can forget it. The content box is
-              at least the viewport's height and grows with a tall page, so Base
-              UI sees its size change (the morning's phantom bar was a content
-              box it could not watch); `main` fills it as a flex column. The
-              page contract (the AppShell page says it): a page is a flex
-              child of `main` — `flex-1` to fill and scroll here; `flex-1
-              min-h-0 [contain:size]` to take exactly the frame's height and
-              scroll inside itself, as Ship's detail grids do — and the outer
-              region, with nothing to scroll, passes the wheel through. Never
-              `h-full`: a box that is *at least* the viewport's height gives a
-              percentage nothing to resolve against — measured, all four Ship
-              pages, 2026-09-09. */}
-          <ScrollArea className="min-h-0 flex-1" contentClassName="flex min-h-full flex-col">
-            <main className="flex min-w-0 flex-1 flex-col">{children}</main>
-          </ScrollArea>
-        </div>
+        <SidebarOnGround.Provider value={inset}>{nav}</SidebarOnGround.Provider>
+        {/* `inset`: the content is a card on the ground, the Card's own surface look,
+            16px from the right and bottom as the floating card is, 8px corners (Katerina,
+            28 September). */}
+        {inset ? (
+          <Card fill="surface" clip className="mb-4 mr-4 flex min-h-0 min-w-0 flex-1 flex-col">
+            {column}
+          </Card>
+        ) : (
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col">{column}</div>
+        )}
       </div>
     </div>
   )

package/src/AttachmentCard.tsx

@@ -390,7 +390,6 @@ export function AttachmentCard({
         {/* On Base UI's Button, as InputChip's ✕ is (Katerina, 2026-09-14): IconButton is a 24px square
             that fills on hover, and this is Peek's 20px round badge on the card's corner. */}
         {onRemove && (
-          // @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
           <BaseButton
             type="button"
             aria-label={`Remove ${name}`}

package/src/CommandPalette.tsx

@@ -175,7 +175,7 @@ type Key = [key: string, word: string]
 function Footer({ keys }: { keys: Key[] }) {
   const { where } = usePalette('The footer')
   return (
-    <div className="flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted">
+    <div className="flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted leaf:font-mono leaf:text-small">
       <span className="min-w-0 flex-1 truncate">{where}</span>
       {keys.map(([key, word]) => (
         <span key={key} className="flex shrink-0 items-center gap-1.5">

package/src/ErrorBoundary.mdx

@@ -16,7 +16,7 @@ page keeps working.
 - Around each part of the page that can break on its own: a column, a panel,
   a conversation — and once around the whole app.
 - `label` says what it holds, in the message and the console line: "Something
-  went wrong in the {label}."
+  went wrong in the \{label\}."
 - `fallbackClassName` is the room the message fills where no flex column
   holds it: the whole screen, for the app's own.
 - `frame` draws the message inside a frame of yours, in the same place.
@@ -48,7 +48,7 @@ import { ErrorBoundary } from '@estiva-app/ui'
   is given and centres itself in it.
 - Try again draws the part again. If what broke is still broken, the message
   comes back.
-- A crash is written to the console: "{label} crashed:", the error, and where
+- A crash is written to the console: "\{label\} crashed:", the error, and where
   it happened.
 
 ## What it owns

package/src/Kbd.tsx

@@ -24,15 +24,24 @@ import { cn } from './cn'
 export interface KbdProps {
   children: ReactNode
   className?: string
+  /**
+   * `tooltip` draws the key in the tooltip's own key colours, for a theme whose
+   * tooltip is darker than its page (Katerina, 27 September). `Tooltip` passes it
+   * for its shortcut; nothing else needs to.
+   */
+  tone?: 'default' | 'tooltip'
 }
 
-export function Kbd({ children, className }: KbdProps) {
+export function Kbd({ children, className, tone = 'default' }: KbdProps) {
   return (
     <kbd
       className={cn(
         'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-caption text-text-secondary',
         'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-small',
         'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small',
+        // Leaf sets its keys in mono, as Signal does (Katerina, 28 September): the type, not the key's shape.
+        'leaf:font-mono leaf:text-small',
+        tone === 'tooltip' && 'border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key',
         className,
       )}
     >

package/src/Lightbox.tsx

@@ -74,10 +74,12 @@ export function Lightbox({ src, alt, onClose, className }: LightboxProps) {
             onClick={(e) => e.stopPropagation()}
             className={cn('max-w-full max-h-full object-contain rounded-lg', className)}
           />
-          {/* @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button AttachmentCard's remove also draws; a part if a third appears */}
+          {/* On the dark scrim in every theme, so it wears the tooltip's dark colours (Katerina,
+              28 September: Leaf's white circle stood out); in the other themes they are the
+              elevated ground, the strong line and the secondary text it always had. */}
           <Dialog.Close
             aria-label="Close"
-            className="absolute top-4 right-4 size-8 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary"
+            className="absolute top-4 right-4 size-8 rounded-full bg-bg-tooltip border border-border-tooltip-key flex items-center justify-center text-text-tooltip-key hover:text-text-tooltip"
           >
             <IconX size={16} stroke={1.5} />
           </Dialog.Close>

package/src/Menu.tsx

@@ -552,7 +552,7 @@ export function EnterHint({ target }: { target?: string }) {
     <span className="flex shrink-0 items-center gap-1.5 text-text-muted">
       <Kbd>↩ Enter</Kbd>
       {target && (
-        <span className="text-menu signal:font-mono signal:text-small signal:tracking-wider">{target}</span>
+        <span className="text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider">{target}</span>
       )}
     </span>
   )