@biffo/cli 0.427.0 → 0.429.0

package/_skeletons/plugin-template/web-admin/package.json

@@ -11,7 +11,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@biffo/design-tokens": "^0.152.0",
+    "@biffo/design-tokens": "^0.427.0",
     "amazon-cognito-identity-js": "^6.3.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/_skeletons/plugin-template/web-admin/pnpm-lock.yaml

@@ -16,8 +16,8 @@ importers:
   .:
     dependencies:
       '@biffo/design-tokens':
-        specifier: ^0.152.0
-        version: 0.152.0
+        specifier: ^0.427.0
+        version: 0.427.0
       amazon-cognito-identity-js:
         specifier: ^6.3.12
         version: 6.3.20
@@ -184,8 +184,9 @@ packages:
     resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@biffo/design-tokens@0.152.0':
-    resolution: {integrity: sha512-GzlSKRqrvVudPuZGO0N/Ge/LcSjXD8+cXAlc/ge6wJHv9a0YOFtG6T21r3UnxJiGD5frwWGv2OSxZBCZ0M1l4w==}
+  '@biffo/design-tokens@0.427.0':
+    resolution: {integrity: sha512-3OjpF0hYAlg3k7ez/25LrkDVz+wgpx1mwaRhVkAtG0XEj0cfNhJ3In9Nk5XCh3JBy7HaIYn9tuILmXmIDYIS6w==}
+    hasBin: true
 
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
@@ -1711,7 +1712,7 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@biffo/design-tokens@0.152.0': {}
+  '@biffo/design-tokens@0.427.0': {}
 
   '@bramus/specificity@2.4.2':
     dependencies:

package/_skeletons/plugin-template/web-admin/src/App.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react'
+import { statusBadgeClass, statusLabel } from '@biffo/design-tokens/status.mjs'
 
 import { getCurrentSession } from './lib/auth'
 
 /**
  * Starter admin surface. It proves the SHARED-SESSION INVARIANT works — reads
- * the portal's Cognito session, shows a signed-in/signed-out state, nothing
- * more — and is meant to be replaced with this plugin's own admin UI.
+ * the portal's Cognito session, shows a signed-in/signed-out state — and shows
+ * the shared kit's controls (heading, primary button, status badge, delete with
+ * an in-page confirm). Replace the sample row with this plugin's own admin UI.
+ *
+ * Style with the kit's `biffo-*` classes (see @biffo/design-tokens/kit.css),
+ * never `window.confirm` and never local colour/font overrides.
  *
  * Wire real screens against `./lib/api`'s starter `request()` helper, which
  * already carries the `Authorization: Bearer` header and error handling this
@@ -13,6 +18,8 @@ import { getCurrentSession } from './lib/auth'
  */
 export default function App() {
   const [signedIn, setSignedIn] = useState<boolean | null>(null)
+  const [confirming, setConfirming] = useState(false)
+  const [deleted, setDeleted] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -27,23 +34,67 @@ export default function App() {
 
   if (signedIn === false) {
     return (
-      <main className="page">
-        <h1>example-plugin — Admin</h1>
-        <p className="error">Not signed in. Open this from the Biffo portal.</p>
+      <main className="biffo-kit layout">
+        <h1 className="biffo-heading">example-plugin — Admin</h1>
+        <p role="alert" className="biffo-badge biffo-badge--negative">
+          Not signed in. Open this from the Biffo portal.
+        </p>
       </main>
     )
   }
 
   return (
-    <main className="page">
-      <h1>example-plugin — Admin</h1>
+    <main className="biffo-kit layout">
+      <h1 className="biffo-heading">example-plugin — Admin</h1>
       {signedIn === null ? (
-        <p className="muted">Loading…</p>
+        <p>Loading…</p>
       ) : (
-        <p className="muted">
-          Signed in via the shared portal session. Replace this screen with the plugin's own admin
-          UI.
-        </p>
+        <>
+          <p>
+            Signed in via the shared portal session. Replace this screen with the plugin's own admin
+            UI.
+          </p>
+          {deleted ? (
+            <p>Sample item deleted.</p>
+          ) : (
+            <div className="row">
+              <span>Sample item</span>
+              <span className={statusBadgeClass('active')}>{statusLabel('active')}</span>
+              <button type="button" className="biffo-btn-primary">
+                Edit
+              </button>
+              {confirming ? (
+                <span className="biffo-confirm">
+                  <span className="biffo-confirm__prompt">
+                    Delete this item? This action cannot be undone.
+                  </span>
+                  <button
+                    type="button"
+                    className="biffo-btn-delete biffo-confirm__yes"
+                    onClick={() => setDeleted(true)}
+                  >
+                    Delete
+                  </button>
+                  <button
+                    type="button"
+                    className="biffo-confirm__no"
+                    onClick={() => setConfirming(false)}
+                  >
+                    Cancel
+                  </button>
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  className="biffo-btn-delete"
+                  onClick={() => setConfirming(true)}
+                >
+                  Delete
+                </button>
+              )}
+            </div>
+          )}
+        </>
       )}
     </main>
   )

package/_skeletons/plugin-template/web-admin/src/index.css

@@ -1,7 +1,9 @@
-/* Shares the design tokens the rest of the estate uses so a plugin admin panel
-   does not become its own brand blue (the drift @biffo/design-tokens was
-   created to end). */
+/* Look comes from the shared kit (#2495): headings, buttons, delete, status
+   badges and the in-page confirm are the kit's classes. Do not add local
+   colour, font, heading or button overrides here; change the kit instead.
+   tokens.css must load before kit.css. */
 @import '@biffo/design-tokens/tokens.css';
+@import '@biffo/design-tokens/kit.css';
 
 * {
   box-sizing: border-box;
@@ -9,32 +11,23 @@
 
 body {
   margin: 0;
-  font-family: var(--font-sans, system-ui, sans-serif);
-  color: var(--text, #1b1c1f);
-  background: var(--bg, #f7f8fa);
 }
 
-.page {
-  max-width: 60rem;
-  margin: 0 auto;
+/* Layout only. */
+.layout {
+  min-height: 100vh;
   padding: 2rem 1.5rem 4rem;
 }
 
-h1 {
-  font-size: 1.55rem;
-  margin: 0 0 0.35rem;
+.layout > * {
+  max-width: 80rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.muted {
-  color: var(--text-muted, #5b6070);
-  font-size: 0.9rem;
-  margin: 0 0 1.25rem;
-}
-
-.error {
-  background: var(--state-negative-soft, #fdeaea);
-  color: var(--state-negative, #8c2b2b);
-  padding: 0.6rem 0.8rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0.75rem auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biffo/cli",
-  "version": "0.427.0",
+  "version": "0.429.0",
   "description": "Biffo project scaffolding CLI",
   "license": "MIT",
   "type": "module",