@justai/cuts 0.26.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -19,7 +19,8 @@
     "./Posts.astro": "./src/Posts.astro",
     "./Toolbar.astro": "./src/Toolbar.astro",
     "./Profile.astro": "./src/Profile.astro",
-    "./ConfirmSheet.astro": "./src/ConfirmSheet.astro"
+    "./ConfirmSheet.astro": "./src/ConfirmSheet.astro",
+    "./ground.css": "./src/ground.css"
   },
   "peerDependencies": {
     "@justai/ui": ">=0.2.0",
@@ -29,6 +30,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.4.0"
+    "@justai/core": "^0.4.1"
   }
 }

package/src/Base.astro

@@ -27,6 +27,10 @@
  * The dictionaries. Same reason, stronger: the machinery is shared, the CONTENT is the persona's.
  */
 import { dir as dirOf } from "@justai/ui/locale";
+// THE GROUND — the first law of the framework: a component brings its own ground. Zero-specificity
+// defaults (:where) for every token the cuts consume; any persona declaration overrides outright.
+// See ground.css for the law, the day it was learned, and how it coexists with ui's styling contract.
+import "./ground.css";
 // The load-bearing behaviour is framework-free and lives in @justai/core, so `feed` (Next) injects the
 // SAME strings instead of hand-copying them. This binding just decides where they go in an Astro head.
 import { AUTH_CAPTURE_JS, CONSENT_JS, JS_CLASS_JS, REVEAL_CSS, analyticsJs, consentCopy } from "@justai/core";

package/src/ConfirmSheet.astro

@@ -1,4 +1,7 @@
 ---
+// THE GROUND rides with the sheet: this cut is consumed standalone (me, feed) where Base never
+// runs, and it must look right on a page that defines nothing. Zero-specificity — see ground.css.
+import "./ground.css";
 // ░░ CONFIRM SHEET — the fleet's ONE confirmation dialog: an iOS-style action sheet. ░░
 //
 // Born in the /me vault ("Forget everything?") and promoted to the framework because a confirmation
@@ -71,10 +74,15 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = fa
         {title && <strong id={`${id}-t`}>{title}</strong>}
         <span id={`${id}-b`}>{body}</span>
       </div>
-      <button class:list={["confirm-act", { destructive, preferred: ask }]} id={`${id}-act`} value="confirm" autofocus={ask || undefined}>{actionLabel}</button>
+      {/* NO autofocus ATTRIBUTE, deliberately: with a fragment in the URL (/me#profile) Chrome
+           refuses to process the attribute at parse and prints a console warning on every load —
+           on a closed dialog, noise about a focus that was never going to happen. Focus is the
+           OPENER's job now, at showModal time: ask → the invitation (CONSENT_JS does it),
+           destructive → the cancel (the consumer does it). The genre decides, as before. */}
+      <button class:list={["confirm-act", { destructive, preferred: ask }]} id={`${id}-act`} value="confirm">{actionLabel}</button>
       {ask && <button class="confirm-act quiet" id={`${id}-cancel`} value={cancelValue} formnovalidate>{cancelLabel}</button>}
     </div>
-    {!ask && <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate autofocus>{cancelLabel}</button>}
+    {!ask && <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate>{cancelLabel}</button>}
   </form>
 </dialog>
 

package/src/ground.css

@@ -0,0 +1,76 @@
+/* @justai/cuts — the GROUND.
+ *
+ * THE FIRST LAW OF THE FRAMEWORK (founder, 2026-07-25): a component brings its own ground. A
+ * component that renders broken unless its consumer defines --bg, --border, --text and --font is
+ * not a component — it is a template with homework, and the homework is invisible until a new
+ * surface forgets it. The ConfirmSheet proved it the same day: mounted on feed, it rendered as
+ * bare transparent text, because color-mix() over an undefined var() invalidates the whole
+ * declaration. Nothing errored. There was nothing to see except the founder's screenshot.
+ *
+ * HOW THIS COEXISTS WITH THE STYLING CONTRACT. @justai/ui's tokens.css deliberately names the
+ * colour tokens and values NONE of them — "so a persona cannot forget to supply them". That
+ * contract stands. What changes is the failure mode: every selector here is wrapped in :where(),
+ * whose specificity is ZERO, so ANY consumer declaration (`:root { --bg: … }`, in any file, loaded
+ * in any order) wins outright. A persona that supplies its contract looks exactly as it chose; a
+ * surface that supplies nothing gets the fleet-neutral look below instead of invisible text.
+ * Forgetting now degrades to "default look", never to "broken render" — enforcement of the
+ * contract belongs to gates, not to a visitor's screen.
+ *
+ * The values are READ, not designed: the skeleton half mirrors @justai/ui tokens.css (the
+ * invariants measured across eleven personas), the colour half is the fleet's most common ground
+ * (the same values feed's public-persona.css carries). Change ui's tokens and this file must
+ * follow — the harness pins the skeleton halves equal.
+ *
+ * Imported by Base.astro AND ConfirmSheet.astro (the one cut consumed standalone), so the ground
+ * travels with whichever of the two reaches a page first; the bundler dedupes when both do.
+ */
+
+:where(:root) {
+  /* skeleton — mirrors @justai/ui tokens.css, pinned equal by the harness */
+  --fs-2xs: 0.76rem;
+  --fs-xs: 0.84rem;
+  --fs-sm: 0.92rem;
+  --fs-base: 1rem;
+  --fs-md: 1.13rem;
+  --fs-lg: 1.32rem;
+  --fs-xl: 1.6rem;
+
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-pill: 999px;
+
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* ground — the fleet-neutral defaults for the colour contract (dark first: the fleet's default scheme) */
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
+  --bg: #0a0c10;
+  --text: #f2f4f8;
+  --text-dim: #9aa3b2;
+  --border: rgba(255, 255, 255, 0.1);
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-2: rgba(255, 255, 255, 0.07);
+  --accent: #0a84ff;
+}
+
+@media (prefers-color-scheme: light) {
+  :where(:root) {
+    --bg: #f6f7f9;
+    --text: #0a0c10;
+    --text-dim: #5b6472;
+    --border: rgba(0, 0, 0, 0.08);
+    --surface: rgba(255, 255, 255, 0.7);
+    --surface-2: rgba(0, 0, 0, 0.05);
+  }
+}
+
+/* The body's own ground — margin reset, the fleet's type baseline, the page colours. Zero
+ * specificity again: any consumer body rule overrides. Without this, a blank page renders the
+ * sheet over a white serif document — the Times lesson, carved as CSS. */
+:where(body) {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 1rem/1.5 var(--font);
+}