driggsby 0.5.1 → 0.5.2

package/dist/dev/host-page.js

@@ -23,9 +23,12 @@ export function hostPageHtml(slug, appOrigin, background) {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${slug} — driggsby dev</title>
   <style>
-    /* The strip above the frame is the console's title row, in its own
-       measured values: 46px tall on the black ground, 14px ink, a 14%
-       white hairline under it. */
+    /* The strip above the frame is the console's title row over a
+       dashboard, in its own measured values: 46px tall on the black
+       ground with no rule under it, the name centered in 14px ink, and
+       the side slot in the row's quiet 14px tertiary. Equal side tracks
+       keep the name centered; the slot ellipsizes only when the two
+       would otherwise meet. */
     * { box-sizing: border-box; }
     html { color-scheme: dark; }
     body {
@@ -37,26 +40,42 @@ export function hostPageHtml(slug, appOrigin, background) {
       color: #fafafa;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
       font-size: 14px;
-      line-height: 21px;
+      line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
     header {
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) fit-content(60%) minmax(0, 1fr);
+      column-gap: 16px;
       align-items: center;
-      justify-content: space-between;
       height: 46px;
-      padding: 0 16px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+      padding: 0 20px;
+      border-bottom: 1px solid transparent;
+    }
+    header .slug,
+    header .mode {
+      grid-row: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    header .slug { grid-column: 2; }
+    header .mode {
+      grid-column: 3;
+      justify-self: end;
+      max-width: 100%;
+      color: #a1a1a1;
     }
-    header .slug { font-weight: 500; }
-    header .mode { color: #a1a1a1; font-size: 13px; }
     iframe {
       flex: 1;
       width: 100%;
       border: none;
       /* The app's declared background from driggsby.json, painted while
-         the app loads — the same surface the production host shows. */
-      background: ${background ?? "#000000"};
+         the app loads — the same surface the production host shows. With
+         none declared, Driggsby's own: its card surface on the black
+         page. */
+      background: ${background ?? "#0a0a0a"};
     }
   </style>
 </head>

package/dist/init/template-styles.js

@@ -1,25 +1,35 @@
 // The scaffold's styles.css. A deployed app lives inside Driggsby's dark
 // chrome, so the page is dark by default and its values are Driggsby's
-// own: the console's ground, card rung, hairline, ink ramp, radii, and
-// type sizes, written out as plain colors because the app is its own
-// origin and cannot read the console's stylesheet. --bg-app must stay
-// equal to driggsby.json's "background" (init-command.test.ts pins the
-// two together): Driggsby paints that color while the app loads.
+// own: the console's palette, type, insets, and page column, measured off
+// the console itself. The app is its own origin and cannot read the
+// console's stylesheet, so each gray is written as the console paints it
+// on its black page (the console's cards and fills are translucent over
+// that ground) and each hue verbatim. The :root block is the same one
+// Driggsby's own example dashboard carries. --bg-app must stay equal to
+// driggsby.json's "background" (init-command.test.ts pins the two
+// together): Driggsby paints that color while the app loads.
 export const STYLES_CSS = `/* Driggsby's console palette, so this page reads as part of the app it
    opens inside. Change these together if you re-theme; keep --bg-app equal
-   to the "background" in driggsby.json. */
+   to the "background" in driggsby.json. The status tones are the
+   console's own, for gains, losses, warnings, and a live dot. */
 :root {
   color-scheme: dark;
   --bg-app: #000000;
   --bg-card: #0a0a0a;
   --bg-mute: #262626;
   --hairline: rgba(255, 255, 255, 0.14);
+  --hairline-strong: rgba(255, 255, 255, 0.22);
   --text-primary: #fafafa;
   --text-secondary: #c4c4c4;
   --text-tertiary: #a1a1a1;
+  --status-success: oklch(0.72 0.14 160);
+  --text-success: oklch(0.82 0.11 160);
+  --text-warning: oklch(0.85 0.11 85);
+  --text-error: oklch(0.8 0.13 25);
   --radius-card: 8px;
   --radius-bar: 4px;
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
 }
 
 * {
@@ -32,21 +42,25 @@ body {
   color: var(--text-primary);
   font-family: var(--font-sans);
   font-size: 14px;
-  line-height: 21px;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
+/* The console's page column. */
 main {
-  max-width: 800px;
+  max-width: 75rem;
   margin: 0 auto;
-  padding: 24px 24px 64px;
+  padding: 24px;
+}
+
+main > header {
+  margin-bottom: 20px;
 }
 
 h1 {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
-  line-height: 36px;
   letter-spacing: -0.02em;
 }
 
@@ -54,24 +68,19 @@ h2 {
   margin: 24px 0 12px;
   font-size: 14px;
   font-weight: 500;
-  line-height: 21px;
   letter-spacing: -0.02em;
 }
 
-/* One card, four cells; the 1px gap over the card's own hairline color
-   draws the divider between cells however the grid wraps. */
+/* The console's stat tiles: a card per figure, 16px apart, the row
+   capped at the console's 920px. */
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1px;
-  margin-top: 24px;
-  border: 1px solid var(--hairline);
-  border-radius: var(--radius-card);
-  background: var(--hairline);
-  overflow: hidden;
+  gap: 16px;
+  max-width: 920px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 900px) {
   .stat-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -86,22 +95,22 @@ h2 {
 .stat {
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-card);
   background: var(--bg-card);
 }
 
 .stat-label {
   font-size: 13px;
-  line-height: 20px;
   color: var(--text-tertiary);
 }
 
 .stat-value {
-  margin-top: 4px;
+  margin-top: 2px;
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
   font-variant-numeric: tabular-nums;
   /* A currency string has no natural break, and a clipped balance is a
      wrong number. If a value ever outgrows its cell, it wraps. */
@@ -165,6 +174,7 @@ h2 {
   /* Holds its line even when empty, so every row measures the same as
      the skeleton row it replaces. */
   min-height: 21px;
+  margin-top: 1px;
   color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -179,10 +189,10 @@ h2 {
 /* The skeleton ships in the HTML so the first paint is the final layout
    as muted bars; the first data render replaces it in a dissolve (see the
    "Settling in" section of app.js). Each bar's margins pad it to exactly
-   the height of the text it stands in for, and the columns holding
-   stacked bars are flex so those margins never collapse — the skeleton
-   page and the data page measure identical, and nothing shifts when data
-   lands. */
+   the height of the text it stands in for (the line, plus any margin the
+   text carries), and the columns holding stacked bars are flex so those
+   margins never collapse — the skeleton page and the data page measure
+   identical, and nothing shifts when data lands. */
 .skeleton {
   border-radius: var(--radius-bar);
   background: var(--bg-mute);
@@ -192,13 +202,13 @@ h2 {
 .skeleton-label {
   width: 64px;
   height: 12px;
-  margin: 4px 0;
+  margin: 3.75px 0;
 }
 
 .skeleton-value {
   width: 96px;
   height: 20px;
-  margin: 8px 0 4px;
+  margin: 7px 0 5px;
 }
 
 .skeleton-glyph {
@@ -217,7 +227,7 @@ h2 {
 .skeleton-institution {
   width: 110px;
   height: 12px;
-  margin: 4.5px 0;
+  margin: 5.5px 0 4.5px;
 }
 
 .skeleton-balance {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driggsby",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Set up and build on Driggsby, the MCP server for personal finance.",
   "license": "Apache-2.0",
   "repository": {
@@ -28,7 +28,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@driggsby/deploy": "0.5.1",
-    "@driggsby/sdk": "0.5.1"
+    "@driggsby/deploy": "0.5.2",
+    "@driggsby/sdk": "0.5.2"
   }
 }