driggsby 0.2.0 → 0.2.2

package/dist/init/templates.js

@@ -4,7 +4,10 @@
 // (`driggsby dev` locally, or the Driggsby console after a deploy). The
 // sample values below are invented for the template and match the real
 // tool result shapes only in structure, so the scaffold's render functions
-// work unchanged when live data replaces them.
+// work unchanged when live data replaces them. The HTML ships a skeleton
+// of the final layout so the first paint — in every context, before any
+// script runs — is muted bars that the first render replaces, fading in
+// at the exact same size so nothing shifts.
 export function indexHtml(slug) {
     return `<!doctype html>
 <html lang="en">
@@ -18,15 +21,59 @@ export function indexHtml(slug) {
   <main>
     <header>
       <h1>${slug}</h1>
-      <p class="sample-note" id="sample-note">Sample data — your real accounts
-      appear when this app runs inside Driggsby.</p>
+      <p class="sample-note" id="sample-note" hidden>Sample data — your real
+      accounts appear when this app runs inside Driggsby.</p>
     </header>
+    <!-- The bars below are skeleton placeholders. app.js replaces them
+         with data on its first render; edit the render functions there,
+         and keep the four stat bars in step with what renderOverview
+         draws. (The account rows are just a plausible list length —
+         the real count comes from the data.) -->
     <section aria-label="Overview">
-      <div class="stat-grid" id="overview"></div>
+      <div class="stat-grid" id="overview" aria-busy="true">
+        <div class="stat">
+          <div class="skeleton skeleton-label"></div>
+          <div class="skeleton skeleton-value"></div>
+        </div>
+        <div class="stat">
+          <div class="skeleton skeleton-label"></div>
+          <div class="skeleton skeleton-value"></div>
+        </div>
+        <div class="stat">
+          <div class="skeleton skeleton-label"></div>
+          <div class="skeleton skeleton-value"></div>
+        </div>
+        <div class="stat">
+          <div class="skeleton skeleton-label"></div>
+          <div class="skeleton skeleton-value"></div>
+        </div>
+      </div>
     </section>
     <section aria-label="Accounts">
       <h2>Accounts</h2>
-      <div id="accounts"></div>
+      <div id="accounts" aria-busy="true">
+        <div class="account-row">
+          <div class="account-names">
+            <div class="skeleton skeleton-name"></div>
+            <div class="skeleton skeleton-institution"></div>
+          </div>
+          <div class="skeleton skeleton-balance"></div>
+        </div>
+        <div class="account-row">
+          <div class="account-names">
+            <div class="skeleton skeleton-name"></div>
+            <div class="skeleton skeleton-institution"></div>
+          </div>
+          <div class="skeleton skeleton-balance"></div>
+        </div>
+        <div class="account-row">
+          <div class="account-names">
+            <div class="skeleton skeleton-name"></div>
+            <div class="skeleton skeleton-institution"></div>
+          </div>
+          <div class="skeleton skeleton-balance"></div>
+        </div>
+      </div>
     </section>
   </main>
   <script type="module" src="/-/driggsby-sdk.js"></script>
@@ -46,8 +93,8 @@ export const APP_JS = `// Your app's code. Edit anything — driggsby dev reload
 // real result shapes, so the render functions work unchanged either way.
 
 // ---------------------------------------------------------------------------
-// Sample data. Every name and number here is invented. It renders only
-// until real data arrives from Driggsby.
+// Sample data. Every name and number here is invented. It paints only
+// when this page is opened on its own, outside Driggsby.
 // ---------------------------------------------------------------------------
 
 const SAMPLE_OVERVIEW = {
@@ -104,6 +151,19 @@ function element(tag, className, text) {
   return node;
 }
 
+// The page ships with a skeleton of this exact layout in its HTML — muted
+// bars where the numbers will be — so the very first paint is already the
+// final shape. The first render into a container replaces its skeleton and
+// fades in, so data arriving reads as the page settling, never as content
+// popping. classList.add is idempotent and re-adding a class never restarts
+// its animation, so later live updates repaint in place without re-fading.
+// aria-busy ships in the HTML so assistive tech hears "loading" until the
+// first real content lands.
+function revealOnce(container) {
+  container.classList.add("fade-in");
+  container.removeAttribute("aria-busy");
+}
+
 function renderOverview(result) {
   const rollups = (result && result.summary_rollups) || {};
   const container = document.getElementById("overview");
@@ -122,6 +182,7 @@ function renderOverview(result) {
     );
     container.append(stat);
   }
+  revealOnce(container);
 }
 
 function renderAccounts(result) {
@@ -143,35 +204,39 @@ function renderAccounts(result) {
     row.append(names, element("div", "account-balance", formatMoney(account.current_balance)));
     container.append(row);
   }
+  revealOnce(container);
 }
 
 // ---------------------------------------------------------------------------
 // Live data. window.driggsby exists when the Driggsby SDK loaded — inside
-// Driggsby, or under driggsby dev. Standalone, the sample data stays and
-// the note above explains why.
+// Driggsby, or under driggsby dev. Whether anything embeds this page is
+// knowable synchronously: opened directly in a tab, no host will ever
+// answer, so the sample data replaces the skeleton right away and the note
+// explaining it is revealed (it ships hidden in the HTML, so an embedded
+// page never shows it, not even for the moment before this script runs).
+// Embedded, sample numbers never paint at all — the shipped skeleton holds
+// the layout until the first real results replace it and fade in.
 // ---------------------------------------------------------------------------
 
-renderOverview(SAMPLE_OVERVIEW);
-renderAccounts(SAMPLE_ACCOUNTS);
+const standalone = window.parent === window;
+const note = document.getElementById("sample-note");
 
-let overviewIsLive = false;
-let accountsAreLive = false;
-
-function removeSampleNoteWhenAllLive() {
-  if (!overviewIsLive || !accountsAreLive) return;
-  const note = document.getElementById("sample-note");
-  if (note) note.remove();
+if (standalone) {
+  // The note and the sample values paint together (this whole branch is
+  // one synchronous task). The reveal is kept first so an edit that ever
+  // makes rendering async can't paint values before their label.
+  if (note) note.hidden = false;
+  renderOverview(SAMPLE_OVERVIEW);
+  renderAccounts(SAMPLE_ACCOUNTS);
+} else if (note) {
+  note.remove();
 }
 
 if (window.driggsby) {
   driggsby.watch("get_overview", {}, (result) => {
-    overviewIsLive = true;
-    removeSampleNoteWhenAllLive();
     renderOverview(result);
   });
   driggsby.watch("list_accounts", {}, (result) => {
-    accountsAreLive = true;
-    removeSampleNoteWhenAllLive();
     renderAccounts(result);
   });
 }
@@ -226,6 +291,71 @@ h2 {
   font-size: 13px;
 }
 
+/* The display rule above would defeat the hidden attribute without this. */
+.sample-note[hidden] {
+  display: none;
+}
+
+/* The skeleton ships in the HTML so the first paint is the final layout as
+   muted bars; the first render replaces it and fades in (see app.js). The
+   bar margins make each skeleton block exactly the height of the text it
+   stands in for, so nothing shifts when data lands. */
+.skeleton {
+  border-radius: 4px;
+  background: var(--hairline);
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.skeleton-label {
+  width: 64px;
+  height: 12px;
+  margin: 3.75px 0 0;
+}
+
+.skeleton-value {
+  width: 96px;
+  height: 20px;
+  margin: 8.75px 0 5px;
+}
+
+.skeleton-name {
+  width: 150px;
+  height: 14px;
+  margin: 4px 0 8px;
+}
+
+.skeleton-institution {
+  width: 110px;
+  height: 12px;
+  margin: 4px 0;
+}
+
+.skeleton-balance {
+  width: 72px;
+  height: 14px;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+.fade-in {
+  animation: fade-in 200ms ease-out;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .fade-in {
+    animation: none;
+  }
+}
+
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driggsby",
-  "version": "0.2.0",
+  "version": "0.2.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.2.0",
-    "@driggsby/sdk": "0.2.0"
+    "@driggsby/deploy": "0.2.2",
+    "@driggsby/sdk": "0.2.2"
   }
 }