@xenosystem/blocks 0.10.1 → 0.11.1

package/dist/auth/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { PanelModule, PanelManifest, BlockDeclaration } from '@xenosystem/block-sdk';
+import { PanelTone } from '@xenosystem/components/chrome';
 
 interface CreateAuthGatePanelOptions {
     /** What renders behind the gate once it is `open`. A product passes its app; the harness a fixture. */
@@ -371,9 +372,6 @@ declare function plateCopy(phase: XenoAuthGatePhase, product: string, message: s
     body: string;
     note?: string;
 };
-declare const BEHAVIOURS: {
-    'auth/authGateView': (inputs: Record<string, unknown>, config: Readonly<Record<string, unknown>>) => AuthGateView;
-};
 
 /**
  * `mountXenoAuthGate` — the per-product plug, exactly as `XENO AUTH - AUTH GATE DELTA.md` §4 specifies:
@@ -611,7 +609,109 @@ interface AccountPanelViewProps {
     showEntitlements?: boolean;
     emptyHint?: string;
 }
-/** The Account panel view. */
+/**
+ * The Account panel view — the code twin of `ACCOUNT_DECLARATION`, rendering the SAME model
+ * (`accountPanelView`) so the two cannot drift; `test/auth-account/declaration.test.tsx` holds the markup
+ * byte-identical in every status.
+ */
 declare function AccountPanelView({ controller, showLedger, showEntitlements, emptyHint, }: AccountPanelViewProps): ReactNode;
 
-export { ACCOUNT_PANEL_ID, AUTH_GATE_DECLARATION, AUTH_GATE_INITIAL, AUTH_GATE_PANEL_ID, AccountController, type AccountControllerOptions, type AccountHostBridge, type AccountPanelState, AccountPanelView, type AccountPanelViewProps, type AccountRenderContext, type AccountViewState, type AuthGateAction, AuthGateController, type AuthGateHostBridge, AuthGateView$1 as AuthGateView, type AuthGateView as AuthGateViewModel, type AuthGateViewProps, BEHAVIOURS, type CreateAccountPanelOptions, type CreateAuthGatePanelOptions, type MountXenoAuthGateOptions, type MountedXenoAuthGate, PHASE_INTENTS, STEP_UP_ACTIONS, type XenoAccountAction, type XenoAccountActionKind, type XenoAccountCredits, type XenoAccountIdentity, type XenoAccountPlan, type XenoAccountState, type XenoAccountStatus, type XenoAuthGateBridge, type XenoAuthGateIntent, type XenoAuthGateIntentKind, type XenoAuthGatePhase, type XenoAuthGateState, type XenoEntitlement, type XenoLedgerDelta, type XenoLedgerEntry, type XenoLicenceState, accountManifest, accountPanel, authGateManifest, authGatePanel, authGateView, createAccountPanel, createAuthGatePanel, creditsAge, deriveAuthGatePhase, formatAge, formatAmount, formatSince, hostContradiction, intentOffered, isSignedIn, mountXenoAuthGate, plateCopy, requiresStepUp };
+/**
+ * The account panel AS A DECLARATION — the third block written the §8d way (auth gate, agent, account).
+ * Chrome units + bindings + emits over ONE behaviour, `auth/accountPanelView`, which derives every label,
+ * tone and row shape from `AccountViewState`. The code view renders the same model; the test holds the
+ * two byte-identical in every account status.
+ *
+ * Presentation contract: input `view` (an `AccountViewState` push from the controller), output `ui`
+ * (`{ kind, seatId?, expanded? }`), applied by the controller (`request(kind)`, `refresh()`,
+ * `setLedgerExpanded()`). The declaration holds no state.
+ */
+
+type AccountUiIntent = {
+    kind: 'signIn';
+} | {
+    kind: 'signOut';
+} | {
+    kind: 'manageBilling';
+} | {
+    kind: 'refresh';
+} | {
+    kind: 'switchSeat';
+    seatId: string;
+} | {
+    kind: 'ledgerCollapsed';
+    collapsed: boolean;
+};
+declare const accountViewManifest: PanelManifest;
+declare const STATUS_LABEL: Record<XenoAccountStatus, string>;
+declare const STATUS_TONE: Record<XenoAccountStatus, PanelTone>;
+interface AccountPanelViewModel {
+    loading: boolean;
+    signedOut: boolean;
+    signedIn: boolean;
+    loadingHint: string;
+    statusLabel: string;
+    statusTone: PanelTone;
+    signedOutHint: string;
+    planLabel?: string;
+    planTitle?: string;
+    name?: string;
+    email?: string;
+    message?: string;
+    hasCredits: boolean;
+    creditsUnit: string;
+    creditsBalance: string;
+    creditsSub?: string;
+    creditsStale: boolean;
+    creditsTitle: string;
+    hasIncluded: boolean;
+    includedValue: string;
+    includedSub?: string;
+    showSeats: boolean;
+    seats: {
+        id: string;
+        label: string;
+        active: boolean;
+        inactive: boolean;
+    }[];
+    showEntitlements: boolean;
+    entitlements: {
+        id: string;
+        label: string;
+        detail?: string;
+        tone: PanelTone;
+        text: string;
+    }[];
+    showLedger: boolean;
+    ledgerCollapsed: boolean;
+    ledgerCount?: string;
+    hasLedger: boolean;
+    ledgerEmpty: boolean;
+    ledger: {
+        id: string;
+        description: string;
+        source?: string;
+        amount: string;
+    }[];
+    ledgerHasMore: boolean;
+    renews?: string;
+    offlineNote?: string;
+}
+interface AccountPanelViewOptions {
+    showLedger?: boolean;
+    showEntitlements?: boolean;
+    emptyHint?: string;
+}
+declare function accountPanelView(state: AccountViewState, options?: AccountPanelViewOptions): AccountPanelViewModel;
+declare const BEHAVIOURS$1: {
+    'auth/accountPanelView': (inputs: Record<string, unknown>, config: Readonly<Record<string, unknown>>) => AccountPanelViewModel;
+};
+declare const ACCOUNT_DECLARATION: BlockDeclaration;
+
+/** Every behaviour of the auth family — the gate's and the account's — for a host's block registry. */
+declare const BEHAVIOURS: {
+    'auth/accountPanelView': (inputs: Record<string, unknown>, config: Readonly<Record<string, unknown>>) => AccountPanelViewModel;
+    'auth/authGateView': (inputs: Record<string, unknown>, config: Readonly<Record<string, unknown>>) => AuthGateView;
+};
+
+export { BEHAVIOURS$1 as ACCOUNT_BEHAVIOURS, ACCOUNT_DECLARATION, ACCOUNT_PANEL_ID, AUTH_GATE_DECLARATION, AUTH_GATE_INITIAL, AUTH_GATE_PANEL_ID, AccountController, type AccountControllerOptions, type AccountHostBridge, type AccountPanelState, AccountPanelView, type AccountPanelViewModel, type AccountPanelViewOptions, type AccountPanelViewProps, type AccountRenderContext, type AccountUiIntent, type AccountViewState, type AuthGateAction, AuthGateController, type AuthGateHostBridge, AuthGateView$1 as AuthGateView, type AuthGateView as AuthGateViewModel, type AuthGateViewProps, BEHAVIOURS, type CreateAccountPanelOptions, type CreateAuthGatePanelOptions, type MountXenoAuthGateOptions, type MountedXenoAuthGate, PHASE_INTENTS, STATUS_LABEL, STATUS_TONE, STEP_UP_ACTIONS, type XenoAccountAction, type XenoAccountActionKind, type XenoAccountCredits, type XenoAccountIdentity, type XenoAccountPlan, type XenoAccountState, type XenoAccountStatus, type XenoAuthGateBridge, type XenoAuthGateIntent, type XenoAuthGateIntentKind, type XenoAuthGatePhase, type XenoAuthGateState, type XenoEntitlement, type XenoLedgerDelta, type XenoLedgerEntry, type XenoLicenceState, accountManifest, accountPanel, accountPanelView, accountViewManifest, authGateManifest, authGatePanel, authGateView, createAccountPanel, createAuthGatePanel, creditsAge, deriveAuthGatePhase, formatAge, formatAmount, formatSince, hostContradiction, intentOffered, isSignedIn, mountXenoAuthGate, plateCopy, requiresStepUp };

package/dist/auth/index.js

@@ -318,6 +318,365 @@ var AUTH_GATE_DECLARATION = {
   }
 };
 
+// src/auth/account/manifest.ts
+import { WELL_KNOWN_PORT_SCHEMAS } from "@xenosystem/block-sdk";
+var ACCOUNT_PANEL_ID = "xeno.core.account";
+var accountManifest = {
+  id: ACCOUNT_PANEL_ID,
+  version: "0.1.0",
+  title: "Account",
+  icon: "user-round",
+  description: "Identity, plan, credits, entitlements and ledger \u2014 all host-pushed, never fetched. Balances carry the moment they were true. Sensitive actions are emitted as step-up intents, never performed.",
+  defaultSlot: "inspector",
+  inputs: [
+    {
+      id: "account",
+      name: "Account",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.ACCOUNT,
+      description: "{status, identity?, plan?, credits?, entitlements?, seats?, message?}. The host is authoritative. Contains NO token \u2014 see AUTH L9.",
+      multiple: false
+    },
+    {
+      id: "ledger",
+      name: "Ledger",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.LEDGER,
+      description: "{rev?, append?, replace?, clear?, hasMore?}. Append-oriented; `rev` gates out-of-order deliveries.",
+      multiple: true
+    }
+  ],
+  outputs: [
+    {
+      id: "action",
+      name: "Action",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.ACCOUNT_ACTION,
+      description: "{kind, seatId?, productId?, stepUp?}. An INTENT. `stepUp: true` marks an action AUTH L12 requires a fresh interactive re-auth for; the host must not satisfy it silently from the broker."
+    }
+  ],
+  commands: [
+    {
+      id: "refresh",
+      title: "Refresh",
+      description: "Ask the host to re-read the balance. Idempotent; no step-up.",
+      parameters: {}
+    },
+    {
+      id: "get_account",
+      title: "Get Account",
+      description: "Return the rendered account state \u2014 status, plan, balance and its asOf. Never a token.",
+      parameters: {}
+    },
+    {
+      id: "get_ledger",
+      title: "Get Ledger",
+      description: "Return the held ledger entries, newest first.",
+      parameters: {}
+    }
+    // NOTE: `signOut`, `purchase` and `manageBilling` are deliberately NOT commands. They require a
+    // fresh interactive re-auth (AUTH L12), and an agent-invocable command is by definition not
+    // interactive. Exposing them would make this panel the bypass for the step-up requirement.
+  ],
+  config: [
+    {
+      key: "showLedger",
+      label: "Show ledger",
+      type: "boolean",
+      defaultValue: true,
+      description: "Show recent credit activity."
+    },
+    {
+      key: "showEntitlements",
+      label: "Show entitlements",
+      type: "boolean",
+      defaultValue: true,
+      description: "List what the plan includes. Display only \u2014 entitlement is enforced server-side (AUTH L10)."
+    },
+    {
+      key: "staleAfterMs",
+      label: "Stale after (ms)",
+      type: "number",
+      defaultValue: 6e4,
+      description: "How old a balance may be before it is labelled stale."
+    },
+    {
+      key: "maxLedger",
+      label: "Max ledger entries",
+      type: "number",
+      defaultValue: 500,
+      description: "Entries retained in memory."
+    },
+    {
+      key: "emptyHint",
+      label: "Empty hint",
+      type: "text",
+      description: "Shown when no account state has arrived.",
+      placeholder: "Waiting for account state\u2026"
+    }
+  ],
+  capabilities: ["storage.local"],
+  sdk: "^1.1.0"
+};
+
+// src/auth/account/types.ts
+var STEP_UP_ACTIONS = /* @__PURE__ */ new Set([
+  "signOut",
+  "manageBilling",
+  "purchase"
+]);
+function isSignedIn(status) {
+  return status === "signedIn" || status === "refreshing" || status === "offline";
+}
+function requiresStepUp(kind) {
+  return STEP_UP_ACTIONS.has(kind);
+}
+function creditsAge(credits, now) {
+  if (!credits) return null;
+  return Math.max(0, now - credits.asOf);
+}
+function formatAmount(amount, unit = "") {
+  const sign = amount > 0 ? "+" : "";
+  const suffix = unit ? ` ${unit}` : "";
+  return `${sign}${amount.toLocaleString()}${suffix}`;
+}
+function formatAge(ms) {
+  if (ms < 6e4) return `${Math.round(ms / 1e3)}s ago`;
+  if (ms < 36e5) return `${Math.round(ms / 6e4)}m ago`;
+  if (ms < 864e5) return `${Math.round(ms / 36e5)}h ago`;
+  return `${Math.round(ms / 864e5)}d ago`;
+}
+
+// src/auth/account/declaration.ts
+var accountViewManifest = {
+  id: ACCOUNT_PANEL_ID,
+  version: "1.0.0",
+  title: "Account",
+  category: "account",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The AccountViewState the controller derives from the host ports." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, seatId?, collapsed? } \u2014 applied by the controller." }],
+  commands: []
+};
+var STATUS_LABEL = {
+  unknown: "Loading",
+  signedOut: "Signed out",
+  signedIn: "Signed in",
+  refreshing: "Refreshing",
+  expired: "Session expired",
+  offline: "Offline"
+};
+var STATUS_TONE = {
+  unknown: "neutral",
+  signedOut: "neutral",
+  signedIn: "success",
+  refreshing: "neutral",
+  expired: "warning",
+  offline: "warning"
+};
+function accountPanelView(state, options = {}) {
+  const showLedger = options.showLedger ?? true;
+  const showEntitlements = options.showEntitlements ?? true;
+  const { identity, plan, credits } = state;
+  const signedIn = state.status !== "unknown" && isSignedIn(state.status);
+  return {
+    loading: state.status === "unknown",
+    signedOut: state.status !== "unknown" && !isSignedIn(state.status),
+    signedIn,
+    loadingHint: options.emptyHint ?? "Waiting for account state\u2026",
+    statusLabel: STATUS_LABEL[state.status],
+    statusTone: STATUS_TONE[state.status],
+    signedOutHint: state.message ?? "Sign in to see your plan and credits.",
+    planLabel: plan?.label,
+    planTitle: plan ? `Plan: ${plan.label}` : void 0,
+    name: identity?.name ?? identity?.sub,
+    email: identity?.email,
+    message: state.message ?? void 0,
+    hasCredits: credits !== null,
+    creditsUnit: credits?.unit ?? "credits",
+    creditsBalance: credits ? credits.balance.toLocaleString() : "",
+    creditsSub: credits && state.creditsAgeMs !== null ? state.creditsStale ? `stale \u2014 as of ${formatAge(state.creditsAgeMs)}` : `as of ${formatAge(state.creditsAgeMs)}` : void 0,
+    creditsStale: state.creditsStale,
+    creditsTitle: "Pushed by the host, not fetched by this panel.",
+    hasIncluded: credits?.included !== void 0,
+    includedValue: credits?.included !== void 0 ? credits.included.toLocaleString() : "",
+    includedSub: credits?.used === void 0 ? void 0 : `${credits.used.toLocaleString()} used`,
+    showSeats: state.seats.length > 1,
+    seats: state.seats.map((s) => ({ id: s.id, label: s.label, active: !!s.active, inactive: !s.active })),
+    showEntitlements: showEntitlements && state.entitlements.length > 0,
+    entitlements: state.entitlements.map((e) => ({ id: e.id, label: e.label, detail: e.detail, tone: e.included ? "success" : "neutral", text: e.included ? "yes" : "no" })),
+    showLedger,
+    ledgerCollapsed: !state.ledgerExpanded,
+    ledgerCount: state.ledger.length > 0 ? String(state.ledger.length) : void 0,
+    hasLedger: state.ledger.length > 0,
+    ledgerEmpty: state.ledger.length === 0,
+    ledger: state.ledger.map((e) => ({ id: e.id, description: e.description, source: e.source, amount: formatAmount(e.amount) })),
+    ledgerHasMore: state.ledgerHasMore,
+    renews: plan?.renewsAt ? `renews ${new Date(plan.renewsAt).toLocaleDateString()}` : void 0,
+    offlineNote: state.status === "offline" ? "offline \u2014 showing last known" : void 0
+  };
+}
+var EMPTY = { status: "unknown", identity: null, plan: null, credits: null, entitlements: [], seats: [], message: null, ledger: [], ledgerHasMore: false, ledgerExpanded: false, creditsAgeMs: null, creditsStale: false };
+var BEHAVIOURS2 = {
+  "auth/accountPanelView": (inputs, config) => accountPanelView(inputs.view ?? EMPTY, {
+    showLedger: typeof config.showLedger === "boolean" ? config.showLedger : void 0,
+    showEntitlements: typeof config.showEntitlements === "boolean" ? config.showEntitlements : void 0,
+    emptyHint: typeof config.emptyHint === "string" ? config.emptyHint : void 0
+  })
+};
+var ui = (kind) => ({ emit: "ui", value: { object: { kind: { value: kind } } } });
+var text = (b) => ({ component: "text", props: { text: b } });
+var badge = (b, when, props) => ({ component: "chrome/Badge", ...when ? { when } : {}, ...props ? { props } : {}, children: [text(b)] });
+var ACCOUNT_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: accountViewManifest,
+  behaviour: "auth/accountPanelView",
+  composition: {
+    component: "fragment",
+    children: [
+      { component: "chrome/EmptyState", when: { input: "view.loading" }, props: { title: { value: "Account" }, hint: { input: "view.loadingHint" } } },
+      {
+        component: "chrome/EmptyState",
+        when: { input: "view.signedOut" },
+        props: {
+          title: { input: "view.statusLabel" },
+          hint: { input: "view.signedOutHint" },
+          action: { node: { component: "chrome/TextButton", props: { strong: { value: true } }, on: { onClick: ui("signIn") }, children: [text({ value: "Sign in" })] } }
+        }
+      },
+      {
+        component: "chrome/Column",
+        when: { input: "view.signedIn" },
+        children: [
+          {
+            component: "chrome/Toolbar",
+            props: {
+              left: { node: { component: "chrome/ToolbarGroup", children: [badge({ input: "view.statusLabel" }, void 0, { tone: { input: "view.statusTone" } }), badge({ input: "view.planLabel" }, { input: "view.planLabel" }, { title: { input: "view.planTitle" } })] } },
+              right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", on: { onClick: ui("refresh") }, children: [text({ value: "Refresh" })] }] } }
+            }
+          },
+          {
+            component: "chrome/ScrollArea",
+            children: [
+              {
+                component: "chrome/Stack",
+                children: [
+                  { component: "chrome/Text", props: { role: { value: "title" } }, children: [text({ input: "view.name" })] },
+                  { component: "chrome/Text", when: { input: "view.email" }, props: { role: { value: "meta" } }, children: [text({ input: "view.email" })] },
+                  { component: "chrome/Text", when: { input: "view.message" }, props: { role: { value: "meta" } }, children: [text({ input: "view.message" })] }
+                ]
+              },
+              {
+                component: "chrome/Stack",
+                when: { input: "view.hasCredits" },
+                props: { direction: { value: "row" }, pad: { value: "inset" } },
+                children: [
+                  {
+                    component: "chrome/StatTile",
+                    props: {
+                      label: { input: "view.creditsUnit" },
+                      value: { input: "view.creditsBalance" },
+                      sub: { input: "view.creditsSub" },
+                      icon: { node: badge({ value: "stale" }, { input: "view.creditsStale" }, { tone: { value: "warning" } }) },
+                      title: { input: "view.creditsTitle" }
+                    }
+                  },
+                  { component: "chrome/StatTile", when: { input: "view.hasIncluded" }, props: { label: { value: "included" }, value: { input: "view.includedValue" }, sub: { input: "view.includedSub" } } }
+                ]
+              },
+              {
+                component: "chrome/Section",
+                when: { input: "view.showSeats" },
+                props: { title: { value: "Seats" }, flush: { value: true } },
+                children: [
+                  {
+                    component: "chrome/RowList",
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { input: "view.seats", key: "id" },
+                        props: {
+                          noIcon: { value: true },
+                          label: { item: "label" },
+                          trailing: {
+                            node: {
+                              component: "fragment",
+                              children: [
+                                badge({ value: "active" }, { item: "active" }),
+                                { component: "chrome/TextButton", when: { item: "inactive" }, on: { onClick: { emit: "ui", value: { object: { kind: { value: "switchSeat" }, seatId: { item: "id" } } } } }, children: [text({ value: "Switch" })] }
+                              ]
+                            }
+                          }
+                        }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                component: "chrome/Section",
+                when: { input: "view.showEntitlements" },
+                props: { title: { value: "Included" }, flush: { value: true } },
+                children: [
+                  {
+                    component: "chrome/RowList",
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { input: "view.entitlements", key: "id" },
+                        props: { noIcon: { value: true }, label: { item: "label" }, meta: { item: "detail" }, trailing: { node: badge({ item: "text" }, void 0, { tone: { item: "tone" } }) } }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                component: "chrome/Section",
+                when: { input: "view.showLedger" },
+                props: { title: { value: "Recent activity" }, flush: { value: true }, collapsed: { input: "view.ledgerCollapsed" }, badge: { node: badge({ input: "view.ledgerCount" }, { input: "view.ledgerCount" }) } },
+                on: { onCollapsedChange: { emit: "ui", value: { object: { kind: { value: "ledgerCollapsed" }, collapsed: { arg: "" } } } } },
+                children: [
+                  { component: "chrome/EmptyState", when: { input: "view.ledgerEmpty" }, props: { title: { value: "No activity" }, hint: { value: "Credit spends and grants appear here." } } },
+                  {
+                    component: "chrome/RowList",
+                    when: { input: "view.hasLedger" },
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { input: "view.ledger", key: "id" },
+                        props: { noIcon: { value: true }, label: { item: "description" }, meta: { item: "source" }, trailing: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text({ item: "amount" })] } } }
+                      }
+                    ]
+                  },
+                  { component: "chrome/Stack", when: { input: "view.ledgerHasMore" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ value: "Older entries are not held by this panel." })] }] }
+                ]
+              }
+            ]
+          },
+          { component: "chrome/Stack", props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ value: "Billing and sign-out ask you to confirm who you are." })] }] },
+          {
+            component: "chrome/Toolbar",
+            props: {
+              divided: { value: false },
+              right: {
+                node: {
+                  component: "chrome/ToolbarGroup",
+                  props: { end: { value: true } },
+                  children: [
+                    { component: "chrome/TextButton", on: { onClick: ui("manageBilling") }, children: [text({ value: "Billing\u2026" })] },
+                    { component: "chrome/TextButton", on: { onClick: ui("signOut") }, children: [text({ value: "Sign out\u2026" })] }
+                  ]
+                }
+              }
+            }
+          },
+          { component: "chrome/StatusBar", props: { left: { input: "view.renews" }, right: { input: "view.offlineNote" } } }
+        ]
+      }
+    ]
+  }
+};
+
 // src/auth/gate/mount.ts
 import { createElement as createElement2 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
@@ -355,34 +714,6 @@ import {
   bindConfig as bindConfig2
 } from "@xenosystem/block-sdk";
 
-// src/auth/account/types.ts
-var STEP_UP_ACTIONS = /* @__PURE__ */ new Set([
-  "signOut",
-  "manageBilling",
-  "purchase"
-]);
-function isSignedIn(status) {
-  return status === "signedIn" || status === "refreshing" || status === "offline";
-}
-function requiresStepUp(kind) {
-  return STEP_UP_ACTIONS.has(kind);
-}
-function creditsAge(credits, now) {
-  if (!credits) return null;
-  return Math.max(0, now - credits.asOf);
-}
-function formatAmount(amount, unit = "") {
-  const sign = amount > 0 ? "+" : "";
-  const suffix = unit ? ` ${unit}` : "";
-  return `${sign}${amount.toLocaleString()}${suffix}`;
-}
-function formatAge(ms) {
-  if (ms < 6e4) return `${Math.round(ms / 1e3)}s ago`;
-  if (ms < 36e5) return `${Math.round(ms / 6e4)}m ago`;
-  if (ms < 864e5) return `${Math.round(ms / 36e5)}h ago`;
-  return `${Math.round(ms / 864e5)}d ago`;
-}
-
 // src/auth/account/controller.ts
 var EMPTY_STATE = { status: "unknown" };
 function ageBucket(ms) {
@@ -593,107 +924,6 @@ var AccountController = class {
   }
 };
 
-// src/auth/account/manifest.ts
-import { WELL_KNOWN_PORT_SCHEMAS } from "@xenosystem/block-sdk";
-var ACCOUNT_PANEL_ID = "xeno.core.account";
-var accountManifest = {
-  id: ACCOUNT_PANEL_ID,
-  version: "0.1.0",
-  title: "Account",
-  icon: "user-round",
-  description: "Identity, plan, credits, entitlements and ledger \u2014 all host-pushed, never fetched. Balances carry the moment they were true. Sensitive actions are emitted as step-up intents, never performed.",
-  defaultSlot: "inspector",
-  inputs: [
-    {
-      id: "account",
-      name: "Account",
-      type: "object",
-      schema: WELL_KNOWN_PORT_SCHEMAS.ACCOUNT,
-      description: "{status, identity?, plan?, credits?, entitlements?, seats?, message?}. The host is authoritative. Contains NO token \u2014 see AUTH L9.",
-      multiple: false
-    },
-    {
-      id: "ledger",
-      name: "Ledger",
-      type: "object",
-      schema: WELL_KNOWN_PORT_SCHEMAS.LEDGER,
-      description: "{rev?, append?, replace?, clear?, hasMore?}. Append-oriented; `rev` gates out-of-order deliveries.",
-      multiple: true
-    }
-  ],
-  outputs: [
-    {
-      id: "action",
-      name: "Action",
-      type: "object",
-      schema: WELL_KNOWN_PORT_SCHEMAS.ACCOUNT_ACTION,
-      description: "{kind, seatId?, productId?, stepUp?}. An INTENT. `stepUp: true` marks an action AUTH L12 requires a fresh interactive re-auth for; the host must not satisfy it silently from the broker."
-    }
-  ],
-  commands: [
-    {
-      id: "refresh",
-      title: "Refresh",
-      description: "Ask the host to re-read the balance. Idempotent; no step-up.",
-      parameters: {}
-    },
-    {
-      id: "get_account",
-      title: "Get Account",
-      description: "Return the rendered account state \u2014 status, plan, balance and its asOf. Never a token.",
-      parameters: {}
-    },
-    {
-      id: "get_ledger",
-      title: "Get Ledger",
-      description: "Return the held ledger entries, newest first.",
-      parameters: {}
-    }
-    // NOTE: `signOut`, `purchase` and `manageBilling` are deliberately NOT commands. They require a
-    // fresh interactive re-auth (AUTH L12), and an agent-invocable command is by definition not
-    // interactive. Exposing them would make this panel the bypass for the step-up requirement.
-  ],
-  config: [
-    {
-      key: "showLedger",
-      label: "Show ledger",
-      type: "boolean",
-      defaultValue: true,
-      description: "Show recent credit activity."
-    },
-    {
-      key: "showEntitlements",
-      label: "Show entitlements",
-      type: "boolean",
-      defaultValue: true,
-      description: "List what the plan includes. Display only \u2014 entitlement is enforced server-side (AUTH L10)."
-    },
-    {
-      key: "staleAfterMs",
-      label: "Stale after (ms)",
-      type: "number",
-      defaultValue: 6e4,
-      description: "How old a balance may be before it is labelled stale."
-    },
-    {
-      key: "maxLedger",
-      label: "Max ledger entries",
-      type: "number",
-      defaultValue: 500,
-      description: "Entries retained in memory."
-    },
-    {
-      key: "emptyHint",
-      label: "Empty hint",
-      type: "text",
-      description: "Shown when no account state has arrived.",
-      placeholder: "Waiting for account state\u2026"
-    }
-  ],
-  capabilities: ["storage.local"],
-  sdk: "^1.1.0"
-};
-
 // src/auth/account/react/AccountPanelView.tsx
 import { useSyncExternalStore } from "react";
 import {
@@ -712,23 +942,7 @@ import {
   Toolbar,
   ToolbarGroup
 } from "@xenosystem/components/chrome";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var STATUS_LABEL = {
-  unknown: "Loading",
-  signedOut: "Signed out",
-  signedIn: "Signed in",
-  refreshing: "Refreshing",
-  expired: "Session expired",
-  offline: "Offline"
-};
-var STATUS_TONE = {
-  unknown: "neutral",
-  signedOut: "neutral",
-  signedIn: "success",
-  refreshing: "neutral",
-  expired: "warning",
-  offline: "warning"
-};
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function AccountPanelView({
   controller,
   showLedger = true,
@@ -736,103 +950,76 @@ function AccountPanelView({
   emptyHint
 }) {
   const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
-  if (state.status === "unknown") {
-    return /* @__PURE__ */ jsx2(EmptyState, { title: "Account", hint: emptyHint ?? "Waiting for account state\u2026" });
-  }
-  if (!isSignedIn(state.status)) {
+  const v = accountPanelView(state, { showLedger, showEntitlements, emptyHint });
+  if (v.loading) return /* @__PURE__ */ jsx2(EmptyState, { title: "Account", hint: v.loadingHint });
+  if (v.signedOut) {
     return /* @__PURE__ */ jsx2(
       EmptyState,
       {
-        title: STATUS_LABEL[state.status],
-        hint: state.message ?? "Sign in to see your plan and credits.",
+        title: v.statusLabel,
+        hint: v.signedOutHint,
         action: /* @__PURE__ */ jsx2(TextButton, { strong: true, onClick: () => controller.request("signIn"), children: "Sign in" })
       }
     );
   }
-  const { identity, plan, credits } = state;
-  const unit = credits?.unit ?? "credits";
   return /* @__PURE__ */ jsxs(Column, { children: [
     /* @__PURE__ */ jsx2(
       Toolbar,
       {
         left: /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-          /* @__PURE__ */ jsx2(Badge, { tone: STATUS_TONE[state.status], children: STATUS_LABEL[state.status] }),
-          plan ? /* @__PURE__ */ jsx2(Badge, { title: `Plan: ${plan.label}`, children: plan.label }) : null
+          /* @__PURE__ */ jsx2(Badge, { tone: v.statusTone, children: v.statusLabel }),
+          v.planLabel ? /* @__PURE__ */ jsx2(Badge, { title: v.planTitle, children: v.planLabel }) : null
         ] }),
         right: /* @__PURE__ */ jsx2(ToolbarGroup, { end: true, children: /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.refresh(), children: "Refresh" }) })
       }
     ),
     /* @__PURE__ */ jsxs(ScrollArea, { children: [
       /* @__PURE__ */ jsxs(Stack, { children: [
-        /* @__PURE__ */ jsx2(Text, { role: "title", children: identity?.name ?? identity?.sub }),
-        identity?.email ? /* @__PURE__ */ jsx2(Text, { role: "meta", children: identity.email }) : null,
-        state.message ? /* @__PURE__ */ jsx2(Text, { role: "meta", children: state.message }) : null
+        /* @__PURE__ */ jsx2(Text, { role: "title", children: v.name }),
+        v.email ? /* @__PURE__ */ jsx2(Text, { role: "meta", children: v.email }) : null,
+        v.message ? /* @__PURE__ */ jsx2(Text, { role: "meta", children: v.message }) : null
       ] }),
-      credits ? /* @__PURE__ */ jsxs(Stack, { direction: "row", pad: "inset", children: [
+      v.hasCredits ? /* @__PURE__ */ jsxs(Stack, { direction: "row", pad: "inset", children: [
         /* @__PURE__ */ jsx2(
           StatTile,
           {
-            label: unit,
-            value: credits.balance.toLocaleString(),
-            sub: state.creditsAgeMs === null ? void 0 : state.creditsStale ? `as of ${formatAge(state.creditsAgeMs)} \u2014 may be out of date` : `as of ${formatAge(state.creditsAgeMs)}`,
-            icon: state.creditsStale ? /* @__PURE__ */ jsx2(Badge, { tone: "warning", children: "stale" }) : void 0,
-            title: "Pushed by the host, not fetched by this panel."
+            label: v.creditsUnit,
+            value: v.creditsBalance,
+            sub: v.creditsSub,
+            icon: v.creditsStale ? /* @__PURE__ */ jsx2(Badge, { tone: "warning", children: "stale" }) : null,
+            title: v.creditsTitle
           }
         ),
-        credits.included !== void 0 ? /* @__PURE__ */ jsx2(
-          StatTile,
-          {
-            label: "included",
-            value: credits.included.toLocaleString(),
-            sub: credits.used === void 0 ? void 0 : `${credits.used.toLocaleString()} used`
-          }
-        ) : null
+        v.hasIncluded ? /* @__PURE__ */ jsx2(StatTile, { label: "included", value: v.includedValue, sub: v.includedSub }) : null
       ] }) : null,
-      state.seats.length > 1 ? /* @__PURE__ */ jsx2(Section, { title: "Seats", flush: true, children: /* @__PURE__ */ jsx2(RowList, { children: state.seats.map((seat) => /* @__PURE__ */ jsx2(
+      v.showSeats ? /* @__PURE__ */ jsx2(Section, { title: "Seats", flush: true, children: /* @__PURE__ */ jsx2(RowList, { children: v.seats.map((seat) => /* @__PURE__ */ jsx2(
         Row,
         {
           noIcon: true,
           label: seat.label,
-          trailing: seat.active ? /* @__PURE__ */ jsx2(Badge, { children: "active" }) : /* @__PURE__ */ jsx2(
-            TextButton,
-            {
-              onClick: () => controller.request("switchSeat", { seatId: seat.id }),
-              children: "Switch"
-            }
-          )
+          trailing: /* @__PURE__ */ jsxs(Fragment2, { children: [
+            seat.active ? /* @__PURE__ */ jsx2(Badge, { children: "active" }) : null,
+            seat.inactive ? /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.request("switchSeat", { seatId: seat.id }), children: "Switch" }) : null
+          ] })
         },
         seat.id
       )) }) }) : null,
-      showEntitlements && state.entitlements.length > 0 ? /* @__PURE__ */ jsx2(Section, { title: "Included", flush: true, children: /* @__PURE__ */ jsx2(RowList, { children: state.entitlements.map((ent) => /* @__PURE__ */ jsx2(
-        Row,
-        {
-          noIcon: true,
-          label: ent.label,
-          meta: ent.detail,
-          trailing: /* @__PURE__ */ jsx2(Badge, { tone: ent.included ? "success" : "neutral", children: ent.included ? "yes" : "no" })
-        },
-        ent.id
+      v.showEntitlements ? /* @__PURE__ */ jsx2(Section, { title: "Included", flush: true, children: /* @__PURE__ */ jsx2(RowList, { children: v.entitlements.map((ent) => (
+        // A fact about the plan, not a permission check. The gate is server-side (L10).
+        /* @__PURE__ */ jsx2(Row, { noIcon: true, label: ent.label, meta: ent.detail, trailing: /* @__PURE__ */ jsx2(Badge, { tone: ent.tone, children: ent.text }) }, ent.id)
       )) }) }) : null,
-      showLedger ? /* @__PURE__ */ jsxs(
+      v.showLedger ? /* @__PURE__ */ jsxs(
         Section,
         {
           title: "Recent activity",
           flush: true,
-          collapsed: !state.ledgerExpanded,
+          collapsed: v.ledgerCollapsed,
           onCollapsedChange: (collapsed) => controller.setLedgerExpanded(!collapsed),
-          badge: state.ledger.length > 0 ? /* @__PURE__ */ jsx2(Badge, { children: state.ledger.length }) : void 0,
+          badge: v.ledgerCount ? /* @__PURE__ */ jsx2(Badge, { children: v.ledgerCount }) : null,
           children: [
-            state.ledger.length === 0 ? /* @__PURE__ */ jsx2(EmptyState, { title: "No activity", hint: "Credit spends and grants appear here." }) : /* @__PURE__ */ jsx2(RowList, { children: state.ledger.map((entry) => /* @__PURE__ */ jsx2(
-              Row,
-              {
-                noIcon: true,
-                label: entry.description,
-                meta: entry.source,
-                trailing: /* @__PURE__ */ jsx2(Text, { role: "number", children: formatAmount(entry.amount) })
-              },
-              entry.id
-            )) }),
-            state.ledgerHasMore ? /* @__PURE__ */ jsx2(Stack, { pad: "inset", children: /* @__PURE__ */ jsx2(Text, { role: "caption", children: "Older entries are not held by this panel." }) }) : null
+            v.ledgerEmpty ? /* @__PURE__ */ jsx2(EmptyState, { title: "No activity", hint: "Credit spends and grants appear here." }) : null,
+            v.hasLedger ? /* @__PURE__ */ jsx2(RowList, { children: v.ledger.map((entry) => /* @__PURE__ */ jsx2(Row, { noIcon: true, label: entry.description, meta: entry.source, trailing: /* @__PURE__ */ jsx2(Text, { role: "number", children: entry.amount }) }, entry.id)) }) : null,
+            v.ledgerHasMore ? /* @__PURE__ */ jsx2(Stack, { pad: "inset", children: /* @__PURE__ */ jsx2(Text, { role: "caption", children: "Older entries are not held by this panel." }) }) : null
           ]
         }
       ) : null
@@ -848,13 +1035,7 @@ function AccountPanelView({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx2(
-      StatusBar,
-      {
-        left: plan?.renewsAt ? `renews ${new Date(plan.renewsAt).toLocaleDateString()}` : void 0,
-        right: state.status === "offline" ? "offline \u2014 showing last known" : void 0
-      }
-    )
+    /* @__PURE__ */ jsx2(StatusBar, { left: v.renews, right: v.offlineNote })
   ] });
 }
 
@@ -958,7 +1139,12 @@ function createAccountPanel(options = {}) {
   };
 }
 var accountPanel = createAccountPanel();
+
+// src/auth/index.ts
+var BEHAVIOURS3 = { ...BEHAVIOURS, ...BEHAVIOURS2 };
 export {
+  BEHAVIOURS2 as ACCOUNT_BEHAVIOURS,
+  ACCOUNT_DECLARATION,
   ACCOUNT_PANEL_ID,
   AUTH_GATE_DECLARATION,
   AUTH_GATE_INITIAL,
@@ -967,11 +1153,15 @@ export {
   AccountPanelView,
   AuthGateController,
   AuthGateView,
-  BEHAVIOURS,
+  BEHAVIOURS3 as BEHAVIOURS,
   PHASE_INTENTS,
+  STATUS_LABEL,
+  STATUS_TONE,
   STEP_UP_ACTIONS,
   accountManifest,
   accountPanel,
+  accountPanelView,
+  accountViewManifest,
   authGateManifest,
   authGatePanel,
   authGateView,

package/dist/time/index.js

@@ -780,6 +780,7 @@ function ticksPerStep(unit, timebase) {
 
 // src/time/transport/react/TransportPanelView.tsx
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { Column, IconButton, NumberInput, Readout, Slider, Stack, TextButton } from "@xenosystem/components/chrome";
 
 // src/time/transport/react/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -928,9 +929,8 @@ function TransportPanelView({ controller }) {
     [controller]
   );
   return /* @__PURE__ */ jsxs2(
-    "div",
+    Column,
     {
-      style: S.root,
       className: "xeno-transport-panel",
       onKeyDown,
       onKeyUp,
@@ -938,228 +938,66 @@ function TransportPanelView({ controller }) {
       role: "group",
       "aria-label": "Transport",
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: S.row, children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToStart(), title: "Go to start", "aria-label": "Go to start", children: /* @__PURE__ */ jsx2(StartIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(-1), title: "Step back", "aria-label": "Step back", children: /* @__PURE__ */ jsx2(StepBackIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(-1), title: "Shuttle reverse (J)", "aria-label": "Shuttle reverse", children: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}) }),
+        /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
           /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, ...S.primaryBtn },
-              onClick: () => controller.togglePlay(),
-              title: playing ? "Pause (Space)" : "Play (Space)",
-              "aria-label": playing ? "Pause" : "Play",
-              "aria-pressed": playing,
-              children: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.stop(), title: "Stop", "aria-label": "Stop", children: /* @__PURE__ */ jsx2(StopIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(1), title: "Shuttle forward (L)", "aria-label": "Shuttle forward", children: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(1), title: "Step forward", "aria-label": "Step forward", children: /* @__PURE__ */ jsx2(StepForwardIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToEnd(), title: "Go to end", "aria-label": "Go to end", children: /* @__PURE__ */ jsx2(EndIcon, {}) }),
-          controller.showsControl("record") && /* @__PURE__ */ jsx2(
-            "button",
+            IconButton,
             {
-              type: "button",
-              style: { ...S.iconBtn, color: state.recording ? "var(--xeno-danger)" : void 0, opacity: state.recording ? 1 : 0.7 },
-              onClick: () => controller.record(),
-              title: "Record",
-              "aria-label": "Record",
-              "aria-pressed": !!state.recording,
-              children: /* @__PURE__ */ jsx2(RecordIcon, {})
+              size: "sm",
+              variant: "primary",
+              icon: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {}),
+              label: playing ? "Pause (Space)" : "Play (Space)",
+              active: playing,
+              onClick: () => controller.togglePlay()
             }
           ),
-          controller.showsControl("loop") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.loopEnabled ? 1 : 0.4 },
-              onClick: () => controller.toggleLoop(),
-              title: "Loop",
-              "aria-label": "Loop",
-              "aria-pressed": !!state.loopEnabled,
-              children: /* @__PURE__ */ jsx2(LoopIcon, {})
-            }
-          ),
-          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.metronome ? 1 : 0.4 },
-              onClick: () => controller.toggleMetronome(),
-              title: "Metronome",
-              "aria-label": "Metronome",
-              "aria-pressed": !!state.metronome,
-              children: /* @__PURE__ */ jsx2(MetronomeIcon, {})
-            }
-          ),
-          controller.showsControl("punch") && /* @__PURE__ */ jsx2("button", { type: "button", style: { ...S.chipBtn, opacity: state.punch ? 1 : 0.4 }, "aria-pressed": !!state.punch, title: "Punch", children: "PUNCH" }),
-          /* @__PURE__ */ jsxs2(
-            "button",
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
+          controller.showsControl("record") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx2(RecordIcon, {}), label: "Record", active: !!state.recording, onClick: () => controller.record() }),
+          controller.showsControl("loop") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LoopIcon, {}), label: "Loop", active: !!state.loopEnabled, onClick: () => controller.toggleLoop() }),
+          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(MetronomeIcon, {}), label: "Metronome", active: !!state.metronome, onClick: () => controller.toggleMetronome() }),
+          controller.showsControl("punch") && /* @__PURE__ */ jsx2(TextButton, { strong: !!state.punch, children: "PUNCH" }),
+          /* @__PURE__ */ jsx2(
+            Readout,
             {
-              type: "button",
-              style: S.readout,
-              onClick: () => controller.cycleDisplay(),
+              value: controller.getReadout(),
+              unit: (0, format_exports.displayLabel)(controller.getDisplay()),
+              label: `Position ${controller.getReadout()}`,
               title: "Click to change time display",
-              "aria-label": `Position ${controller.getReadout()}`,
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: S.readoutValue, children: controller.getReadout() }),
-                /* @__PURE__ */ jsx2("span", { style: S.readoutUnit, children: (0, format_exports.displayLabel)(controller.getDisplay()) })
-              ]
+              onClick: () => controller.cycleDisplay()
             }
           ),
-          /* @__PURE__ */ jsx2("span", { style: S.duration, children: controller.getDurationReadout() }),
-          controller.showsControl("bpm") && /* @__PURE__ */ jsxs2("label", { style: S.bpm, children: [
-            /* @__PURE__ */ jsx2("span", { style: S.bpmLabel, children: "BPM" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "number",
-                value: state.bpm ?? 120,
-                onChange: (e) => controller.setTempo(Number(e.target.value)),
-                style: S.bpmInput,
-                "aria-label": "Tempo"
-              }
-            )
-          ] }),
-          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2("span", { style: S.inOut, children: [
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setInPoint(), title: "Set in point", children: "IN" }),
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setOutPoint(), title: "Set out point", children: "OUT" })
+          /* @__PURE__ */ jsx2(Readout, { size: "sm", value: controller.getDurationReadout() }),
+          controller.showsControl("bpm") && /* @__PURE__ */ jsx2(NumberInput, { caption: "BPM", label: "Tempo", value: state.bpm ?? 120, onChange: (bpm) => controller.setTempo(bpm) }),
+          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
           ] })
         ] }),
-        controller.showsControl("scrubber") && /* @__PURE__ */ jsxs2(
-          "div",
+        controller.showsControl("scrubber") && /* @__PURE__ */ jsx2(
+          Slider,
           {
-            ref: scrubRef,
-            style: S.scrubTrack,
+            trackRef: scrubRef,
+            progress: controller.getProgress(),
+            label: "Playhead",
+            valueMin: 0,
+            valueMax: controller.getDuration(),
+            valueNow: controller.getCurrentTick(),
+            valueText: controller.getReadout(),
             onPointerDown: onScrubDown,
             onPointerMove: onScrubMove,
             onPointerUp: onScrubUp,
-            onPointerCancel: () => controller.cancelScrub(),
-            role: "slider",
-            "aria-label": "Playhead",
-            "aria-valuemin": 0,
-            "aria-valuemax": controller.getDuration(),
-            "aria-valuenow": controller.getCurrentTick(),
-            "aria-valuetext": controller.getReadout(),
-            tabIndex: 0,
-            children: [
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubFill, width: `${controller.getProgress() * 100}%` } }),
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubKnob, left: `${controller.getProgress() * 100}%` } })
-            ]
+            onPointerCancel: () => controller.cancelScrub()
           }
         )
       ]
     }
   );
 }
-var S = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 3,
-    padding: "4px 6px",
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)",
-    userSelect: "none",
-    outline: "none"
-  },
-  row: { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" },
-  iconBtn: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 20,
-    height: 18,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  primaryBtn: { background: "var(--xeno-control)", width: 26 },
-  chipBtn: {
-    height: 18,
-    padding: "0 5px",
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    fontSize: 9,
-    letterSpacing: "0.05em",
-    flex: "0 0 auto"
-  },
-  readout: {
-    display: "flex",
-    alignItems: "baseline",
-    gap: 4,
-    height: 18,
-    padding: "0 6px",
-    marginLeft: 4,
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  readoutValue: { fontVariantNumeric: "tabular-nums", fontSize: 12, letterSpacing: "0.02em" },
-  readoutUnit: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  duration: {
-    fontVariantNumeric: "tabular-nums",
-    fontSize: 10,
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  bpm: { display: "flex", alignItems: "center", gap: 3, flex: "0 0 auto" },
-  bpmLabel: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  bpmInput: {
-    width: 42,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 4px",
-    outline: "none",
-    fontVariantNumeric: "tabular-nums"
-  },
-  inOut: { display: "flex", gap: 2, flex: "0 0 auto" },
-  scrubTrack: {
-    position: "relative",
-    height: 8,
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    cursor: "pointer",
-    touchAction: "none",
-    outline: "none"
-  },
-  scrubFill: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    background: "var(--xeno-control)",
-    borderRadius: 2,
-    pointerEvents: "none"
-  },
-  scrubKnob: {
-    position: "absolute",
-    top: -1,
-    width: 3,
-    height: 10,
-    marginLeft: -1,
-    background: "var(--xeno-text)",
-    borderRadius: 1,
-    pointerEvents: "none"
-  }
-};
 
 // src/time/transport/panel.ts
 function createTransportPanel(options = {}) {
@@ -4177,13 +4015,13 @@ import {
   Badge,
   EmptyState as EmptyState2,
   ErrorState,
-  IconButton,
+  IconButton as IconButton2,
   Row,
   RowList,
   ScrollArea,
   SegmentedControl,
   StatusBar as StatusBar2,
-  TextButton,
+  TextButton as TextButton2,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
@@ -4222,7 +4060,7 @@ function CalendarPanelView({
     {
       left: /* @__PURE__ */ jsxs4(Fragment, { children: [
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "left" }),
             label: "Previous",
@@ -4230,14 +4068,14 @@ function CalendarPanelView({
           }
         ),
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "right" }),
             label: "Next",
             onClick: () => controller.navigate(1)
           }
         ),
-        /* @__PURE__ */ jsx5(TextButton, { onClick: () => controller.goToToday(), children: "Today" }),
+        /* @__PURE__ */ jsx5(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
         /* @__PURE__ */ jsx5("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
       ] }),
       right: /* @__PURE__ */ jsxs4(ToolbarGroup2, { end: true, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -60,7 +60,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": "^0.3.0",
-    "@xenosystem/components": ">=0.9.3 <1",
+    "@xenosystem/components": ">=0.10.2 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
     "@xenosystem/time-core": "^0.1.0",
@@ -76,7 +76,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.1",
-    "@xenosystem/components": "^0.9.3",
+    "@xenosystem/components": "^0.10.2",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",
     "@xenosystem/time-core": "^0.1.0",