@appsforgood/next-supabase-kit 0.1.5 → 0.1.7

package/dist/studio/office/assets/office.css

@@ -13,13 +13,17 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
@@ -165,8 +169,15 @@ body {
 }
 
 @media (max-width: 900px) {
-  .office-main { grid-template-columns: 1fr; }
-  .station-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 180px; overflow: auto; }
+  .office-main {
+    grid-template-columns: 1fr;
+  }
+  .station-list {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    max-height: 180px;
+    overflow: auto;
+  }
 }
 
 .station-list {
@@ -208,8 +219,12 @@ body {
   cursor: pointer;
 }
 
-.station-list button:hover { background: rgba(255, 255, 255, 0.1); }
-.station-list button.done { border-color: rgba(74, 222, 128, 0.4); }
+.station-list button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.station-list button.done {
+  border-color: rgba(74, 222, 128, 0.4);
+}
 .station-list button .chip {
   float: right;
   font-size: 10px;
@@ -302,8 +317,14 @@ body {
   max-width: 90vw;
 }
 
-.status.ok { background: #dcfce7; color: #166534; }
-.status.error { background: #fee2e2; color: #991b1b; }
+.status.ok {
+  background: #dcfce7;
+  color: #166534;
+}
+.status.error {
+  background: #fee2e2;
+  color: #991b1b;
+}
 
 .btn {
   display: inline-flex;
@@ -318,9 +339,18 @@ body {
   text-decoration: none;
 }
 
-.btn.primary { background: var(--accent); color: #fff; }
-.btn.secondary { background: #334155; color: #f8fafc; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn.primary {
+  background: var(--accent);
+  color: #fff;
+}
+.btn.secondary {
+  background: #334155;
+  color: #f8fafc;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .panel {
   position: fixed;
@@ -335,7 +365,9 @@ body {
   flex-direction: column;
 }
 
-.panel.hidden { display: none; }
+.panel.hidden {
+  display: none;
+}
 
 .panel-head {
   display: flex;
@@ -345,7 +377,10 @@ body {
   border-bottom: 1px solid var(--line);
 }
 
-.panel-head h2 { margin: 0; font-size: 18px; }
+.panel-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
 
 .panel-close {
   background: none;
@@ -395,7 +430,10 @@ body {
   padding: 10px;
 }
 
-.panel textarea { min-height: 90px; resize: vertical; }
+.panel textarea {
+  min-height: 90px;
+  resize: vertical;
+}
 
 .panel .agent-role {
   font-size: 13px;
@@ -441,7 +479,9 @@ body {
 }
 
 .modal[hidden],
-.modal.hidden { display: none; }
+.modal.hidden {
+  display: none;
+}
 
 .modal-card {
   background: var(--panel);
@@ -452,11 +492,19 @@ body {
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
 }
 
-.modal-wide { max-width: 640px; }
+.modal-wide {
+  max-width: 640px;
+}
 
-.modal-card h2 { margin: 0 0 8px; }
+.modal-card h2 {
+  margin: 0 0 8px;
+}
 
-.why { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
+.why {
+  color: var(--muted);
+  font-size: 14px;
+  margin: 0 0 16px;
+}
 
 .depth-grid {
   display: grid;
@@ -473,14 +521,39 @@ body {
   font: inherit;
 }
 
-.depth-card:hover { border-color: var(--accent); }
-.depth-card.selected { border-color: var(--accent); background: var(--accent-soft); }
-.depth-card strong { display: block; margin-bottom: 4px; }
-.depth-card p { margin: 0; font-size: 13px; color: var(--muted); }
+.depth-card:hover {
+  border-color: var(--accent);
+}
+.depth-card.selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.depth-card strong {
+  display: block;
+  margin-bottom: 4px;
+}
+.depth-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--muted);
+}
 
-.review { margin: 0; display: grid; gap: 12px; }
-.review dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
-.review dd { margin: 4px 0 0; white-space: pre-wrap; }
+.review {
+  margin: 0;
+  display: grid;
+  gap: 12px;
+}
+.review dt {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  font-weight: 700;
+}
+.review dd {
+  margin: 4px 0 0;
+  white-space: pre-wrap;
+}
 
 .modal-actions {
   display: flex;
@@ -489,7 +562,9 @@ body {
   margin-top: 20px;
 }
 
-.hidden { display: none !important; }
+.hidden {
+  display: none !important;
+}
 
 code {
   font-family: ui-monospace, Menlo, Consolas, monospace;
@@ -585,8 +660,14 @@ code {
 }
 
 @media (max-width: 900px) {
-  .office-main.studio-layout { grid-template-columns: 1fr; }
-  .transcript-panel { max-height: 200px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+  .office-main.studio-layout {
+    grid-template-columns: 1fr;
+  }
+  .transcript-panel {
+    max-height: 200px;
+    border-left: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
 }
 
 .studio-main .transcript-list {

package/dist/studio/office/assets/office.js

@@ -268,7 +268,7 @@
         (ev) =>
           '<li><span class="tx-time">' +
           escapeHtml((ev.createdAt || "").slice(11, 19)) +
-          '</span> <strong>' +
+          "</span> <strong>" +
           escapeHtml(ev.agentId || ev.fromAgentId || "session") +
           "</strong> " +
           escapeHtml(eventLabel(ev)) +
@@ -324,15 +324,7 @@
       .map((b) => {
         const left = offsetLeft + b.x * scaleX;
         const top = offsetTop + b.y * scaleY - 28;
-        return (
-          '<span class="speech-bubble" style="left:' +
-          left +
-          "px;top:" +
-          top +
-          'px">' +
-          escapeHtml(b.text) +
-          "</span>"
-        );
+        return '<span class="speech-bubble" style="left:' + left + "px;top:" + top + 'px">' + escapeHtml(b.text) + "</span>";
       })
       .join("");
   }
@@ -349,10 +341,7 @@
     const target = level.targetLevel ?? 5;
     if (els.levelPill) {
       els.levelPill.textContent = "L" + current + " → L" + target;
-      els.levelPill.setAttribute(
-        "aria-label",
-        "Agentic engineering level " + current + ", target level " + target
-      );
+      els.levelPill.setAttribute("aria-label", "Agentic engineering level " + current + ", target level " + target);
     }
     if (els.icebergStrip) {
       els.icebergStrip.innerHTML = [3, 4, 5, 6, 7, 8]
@@ -373,16 +362,7 @@
         els.climbPanel.hidden = false;
         els.climbList.innerHTML = steps
           .slice(0, 3)
-          .map(
-            (step) =>
-              "<li><strong>L" +
-              step.level +
-              "</strong> " +
-              escapeHtml(step.label) +
-              " — " +
-              escapeHtml(step.remediation) +
-              "</li>"
-          )
+          .map((step) => "<li><strong>L" + step.level + "</strong> " + escapeHtml(step.label) + " — " + escapeHtml(step.remediation) + "</li>")
           .join("");
       }
     }
@@ -466,17 +446,7 @@
         const cx = offsetLeft + (station.x + station.w / 2) * TILE * scaleX;
         const cy = offsetTop + station.y * TILE * scaleY - 4;
         const st = stationStatus(station);
-        return (
-          '<span class="nameplate ' +
-          st +
-          '" style="left:' +
-          cx +
-          "px;top:" +
-          cy +
-          'px">' +
-          escapeHtml(station.label) +
-          "</span>"
-        );
+        return '<span class="nameplate ' + st + '" style="left:' + cx + "px;top:" + cy + 'px">' + escapeHtml(station.label) + "</span>";
       })
       .join("");
   }
@@ -491,13 +461,7 @@
     ]
       .map(
         ([id, title, desc]) =>
-          '<button type="button" class="depth-card" data-depth="' +
-          id +
-          '"><strong>' +
-          escapeHtml(title) +
-          "</strong><p>" +
-          escapeHtml(desc) +
-          "</p></button>"
+          '<button type="button" class="depth-card" data-depth="' + id + '"><strong>' + escapeHtml(title) + "</strong><p>" + escapeHtml(desc) + "</p></button>"
       )
       .join("");
     els.depthGrid.querySelectorAll("[data-depth]").forEach((btn) => {
@@ -828,9 +792,9 @@
     const req = optional ? "" : " required";
     if (type === "textarea") {
       return (
-        "<label for=\"p-" +
+        '<label for="p-' +
         name +
-        "\">" +
+        '">' +
         escapeHtml(label) +
         (hint ? "<span>" + escapeHtml(hint) + "</span>" : "") +
         '</label><textarea id="p-' +
@@ -847,9 +811,9 @@
       );
     }
     return (
-      "<label for=\"p-" +
+      '<label for="p-' +
       name +
-      "\">" +
+      '">' +
       escapeHtml(label) +
       (hint ? "<span>" + escapeHtml(hint) + "</span>" : "") +
       '</label><input id="p-' +
@@ -877,7 +841,7 @@
         field +
         '">Project briefing<span>Optional — what is unique about this project for ' +
         escapeHtml(station.label) +
-        "?</span></label><textarea id=\"p-" +
+        '?</span></label><textarea id="p-' +
         field +
         '" name="' +
         field +
@@ -890,16 +854,7 @@
     const maps = {
       ide: () => {
         const opts = (boot.ideSurfaces || [])
-          .map(
-            (s) =>
-              '<option value="' +
-              s.id +
-              '"' +
-              (state.form.ideSurface === s.id ? " selected" : "") +
-              ">" +
-              escapeHtml(s.label) +
-              "</option>"
-          )
+          .map((s) => '<option value="' + s.id + '"' + (state.form.ideSurface === s.id ? " selected" : "") + ">" + escapeHtml(s.label) + "</option>")
           .join("");
         return (
           '<label for="p-ideSurface">Primary AI coding tool</label><select id="p-ideSurface" name="ideSurface" required><option value="">Choose…</option>' +
@@ -918,14 +873,10 @@
         inputField("primaryWorkflows", "Top workflows", "One per line.", "textarea", "Workflow one", false),
       access: () =>
         '<label for="p-tenantModel">Who uses the system?</label><select id="p-tenantModel" name="tenantModel">' +
-        (boot.tenantModels || [])
-          .map((c) => '<option value="' + c + '"' + (state.form.tenantModel === c ? " selected" : "") + ">" + c + "</option>")
-          .join("") +
+        (boot.tenantModels || []).map((c) => '<option value="' + c + '"' + (state.form.tenantModel === c ? " selected" : "") + ">" + c + "</option>").join("") +
         "</select>" +
         inputField("owner", "Project owner", "Optional.", "text", "", true) +
-        (boot.hasSupabase
-          ? '<div class="hint-box">Supabase detected.<button type="button" id="apply-supabase-auth">Insert auth baseline</button></div>'
-          : "") +
+        (boot.hasSupabase ? '<div class="hint-box">Supabase detected.<button type="button" id="apply-supabase-auth">Insert auth baseline</button></div>' : "") +
         inputField("authModel", "Authentication model", "Rules agents must preserve.", "textarea", "Describe auth boundaries.", false),
       ui: () =>
         inputField("uiPreferred", "UI should feel like…", "", "textarea", "Clear, readable, task-first.", false) +

package/dist/studio/wizard/assets/wizard.css

@@ -15,17 +15,28 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   color: var(--ink);
   background: var(--bg);
   line-height: 1.55;
@@ -204,8 +215,13 @@ body {
 }
 
 @media (max-width: 860px) {
-  .shell { grid-template-columns: 1fr; }
-  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
+  .shell {
+    grid-template-columns: 1fr;
+  }
+  .rail {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
 }
 
 .rail {
@@ -240,7 +256,7 @@ body {
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
+  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.12) 0);
   display: grid;
   place-items: center;
   position: relative;
@@ -305,12 +321,21 @@ body {
   letter-spacing: 0.04em;
   padding: 2px 7px;
   border-radius: 999px;
-  border: 1px solid rgba(255,255,255,0.15);
+  border: 1px solid rgba(255, 255, 255, 0.15);
 }
 
-.chip.done { background: rgba(22, 101, 52, 0.35); color: #bbf7d0; }
-.chip.progress { background: rgba(180, 83, 9, 0.35); color: #fde68a; }
-.chip.optional { background: rgba(100, 116, 139, 0.35); color: #e2e8f0; }
+.chip.done {
+  background: rgba(22, 101, 52, 0.35);
+  color: #bbf7d0;
+}
+.chip.progress {
+  background: rgba(180, 83, 9, 0.35);
+  color: #fde68a;
+}
+.chip.optional {
+  background: rgba(100, 116, 139, 0.35);
+  color: #e2e8f0;
+}
 
 .main {
   padding: clamp(20px, 4vw, 40px);
@@ -326,8 +351,18 @@ body {
   font-size: 14px;
 }
 
-.status.ok { display: block; background: #ecfdf5; border: 1px solid #86efac; color: var(--ok); }
-.status.error { display: block; background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
+.status.ok {
+  display: block;
+  background: #ecfdf5;
+  border: 1px solid #86efac;
+  color: var(--ok);
+}
+.status.error {
+  display: block;
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #991b1b;
+}
 
 .card {
   background: var(--panel);
@@ -374,7 +409,9 @@ label span {
   margin-top: 3px;
 }
 
-input, select, textarea {
+input,
+select,
+textarea {
   width: 100%;
   border: 1px solid var(--line);
   border-radius: 10px;
@@ -384,14 +421,23 @@ input, select, textarea {
   background: #fff;
 }
 
-input:focus, select:focus, textarea:focus {
+input:focus,
+select:focus,
+textarea:focus {
   outline: 2px solid var(--accent-soft);
   border-color: var(--accent);
 }
 
-textarea { min-height: 120px; resize: vertical; }
+textarea {
+  min-height: 120px;
+  resize: vertical;
+}
 
-.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
 
 .hint {
   background: #f0fdfa;
@@ -422,7 +468,9 @@ textarea { min-height: 120px; resize: vertical; }
   display: none;
 }
 
-.field-error.show { display: block; }
+.field-error.show {
+  display: block;
+}
 
 .depth-grid {
   display: grid;
@@ -447,8 +495,15 @@ textarea { min-height: 120px; resize: vertical; }
   background: #f0fdfa;
 }
 
-.depth-card strong { display: block; margin-bottom: 6px; }
-.depth-card p { margin: 0; font-size: 13px; color: var(--muted); }
+.depth-card strong {
+  display: block;
+  margin-bottom: 6px;
+}
+.depth-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--muted);
+}
 
 .stack-pills {
   display: flex;
@@ -466,9 +521,22 @@ textarea { min-height: 120px; resize: vertical; }
   border: 1px solid var(--line);
 }
 
-.review dl { margin: 0; display: grid; gap: 14px; }
-.review dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
-.review dd { margin: 4px 0 0; white-space: pre-wrap; }
+.review dl {
+  margin: 0;
+  display: grid;
+  gap: 14px;
+}
+.review dt {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  font-weight: 700;
+}
+.review dd {
+  margin: 4px 0 0;
+  white-space: pre-wrap;
+}
 
 .preview {
   background: #f8fafc;
@@ -507,9 +575,18 @@ button.btn {
   cursor: pointer;
 }
 
-button.btn.primary { background: var(--accent); color: #fff; }
-button.btn.secondary { background: #edf2f7; color: var(--ink); }
-button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+button.btn.primary {
+  background: var(--accent);
+  color: #fff;
+}
+button.btn.secondary {
+  background: #edf2f7;
+  color: var(--ink);
+}
+button.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .complete-icon {
   font-size: 48px;
@@ -532,7 +609,9 @@ code {
   border-radius: 4px;
 }
 
-.hidden { display: none !important; }
+.hidden {
+  display: none !important;
+}
 
 .agent-roster {
   list-style: none;