// ═══════════════════════════════════════════════════════════════════ // RAISABLE FOUNDATION — SHARED KIT (primitives + layer chrome) // Exports to window for the layer screens. Stobox Compass language. // ═══════════════════════════════════════════════════════════════════ const { useState: useStateK, useEffect: useEffectK } = React; // Layer metadata — the stack, top (4) to bottom (1). Each layer is a stage of the // platform's own control loop (Enterprise C&C blueprint): Sense → Comprehend → Decide → Act. const LAYERS = { interfaces: { n: "04", key: "interfaces", name: "Interfaces", stage: "Act → Control", def: "Where the platform is used — surfaces per persona + connectors. The execution-regulation loop." }, intelligence: { n: "03", key: "intelligence", name: "Intelligence", stage: "Decide → Command", def: "How the platform judges — fit, routing and the learning loop. Humans authorize; agents assist." }, ontology: { n: "02", key: "ontology", name: "Ontology", stage: "Comprehend", def: "What the platform knows — the digital twin: entities, aggregates and language." }, capabilities: { n: "01", key: "capabilities", name: "Capabilities", stage: "Sense", def: "What the platform can do — composable units that ingest and integrate signals into live state." }, }; const LAYER_ORDER = ["interfaces", "intelligence", "ontology", "capabilities"]; // Maturity / status → tone token. Each lifecycle is kind-specific (roadmap / // modeling / partnership / integration / risk); tone is uniform across all: // first state = info ○, mid = warn ◐, terminal = ok ●. const TONE = { // roadmap (capabilities · models · goals · surfaces) proposed: "info", building: "warn", live: "ok", // modeling (ontology entities) partial: "warn", modeled: "ok", // partnership (commercial relationships) pending: "info", negotiating: "warn", established: "ok", // integration (technical rails) planned: "neutral", connected: "ok", // risk / gate open: "err", closed: "ok", }; const TONE_VARS = { ok: { fg: "var(--ok)", bg: "var(--ok-bg)" }, warn: { fg: "var(--warn)", bg: "var(--warn-bg)" }, info: { fg: "var(--info)", bg: "var(--info-bg)" }, err: { fg: "var(--err)", bg: "var(--err-bg)" }, neutral: { fg: "var(--ink-3)", bg: "var(--bg-3)" }, accent: { fg: "var(--accent-lo)", bg: "var(--accent-bg)" }, }; function MonoLabel({ children, style }) { return
{children}
; } function Pill({ children, tone = "neutral", style }) { const t = TONE_VARS[tone] || TONE_VARS.neutral; return ( {children} ); } // Display labels for status keys (data keys stay stable; only the rendered text changes) const STATUS_LABEL = {}; const statusLabel = (v) => STATUS_LABEL[v] || v; // Glyph per status — one source for both the display pill and the cycle pill. const STATUS_DOT = { proposed: "○", building: "◐", live: "●", partial: "◐", modeled: "●", pending: "○", negotiating: "◐", established: "●", planned: "○", connected: "●", open: "△", closed: "●", }; function MaturityPill({ value }) { const dot = STATUS_DOT[value] || "·"; return {dot}{statusLabel(value)}; } const TIER_TONE = { Core: "accent", Supporting: "info", Generic: "neutral" }; function TierBadge({ tier }) { return {tier}; } // Clickable cross-reference chip → navigates to the target layer with focus. // DRV-ids resolve against the derived registry (B5): live value, navigates to its surface. function XRef({ id, label }) { const [hover, setHover] = useStateK(false); const drv = id && String(id).indexOf("DRV-") === 0 && window.CONTROL && window.CONTROL.DERIVED ? window.CONTROL.DERIVED.find((d) => d.id === id) : null; let drvVal = null; if (drv) { try { drvVal = drv.get(window.CONTROL.store); } catch (e) { drvVal = null; } } const F = window.FOUNDATION; // C2 ontology — absent in the Intelligence portal (planes decoupled); XRef then degrades to a plain id chip const node = drv ? null : (F ? F.resolve(id) : null); const layer = drv ? drv.surface : (F ? F.layerForId(id) : null); const txt = label || (drv ? drv.label + (drvVal != null ? " = " + drvVal : "") : (node ? node.name : id)); return ( ); } // Back-reference chip → an Objective or Constraint that references this node. // The write-back side of the Objectives ⇄ Foundation relationship: clicking // navigates to the Drive · Objectives surface and flashes the source card. function BackRefChip({ rec, kind }) { const [hover, setHover] = useStateK(false); const isObj = kind === "obj"; const tip = (isObj ? "Objective · " : "Constraint · ") + ((isObj ? rec.why : rec.note) || ""); return ( ); } // "Referenced by" — reverse lookup of the Objectives (needs[]) and Constraints // (link) that point at this entity / capability. Renders nothing when unlinked. function ReferencedBy({ id, gap = 6, labelGap = 8 }) { const store = window.useControl(); const objs = store.objectives.filter((o) => (o.needs || []).includes(id)); const cons = store.constraints.filter((c) => c.link === id); if (!objs.length && !cons.length) return null; return (
Referenced by
{objs.map((o) => )} {cons.map((c) => )}
); } // Numbered layer header — makes the four screens read as one stack function LayerHeader({ layer, count, children }) { const L = LAYERS[layer]; return (
{L.n}
Layer {L.n} · {L.stage}{count != null ? " · " + count + " items" : ""}

{L.name}

{L.def}

{children}
); } function SectionHead({ children, sub }) { return (

{children}

{sub && {sub}}
); } // Flow arrow used in capability / loop diagrams function Arrow({ vertical }) { return →; } // Page header for non-layer screens (Command / Drive) function PageHead({ eyebrow, title, sub, right }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
{right}
); } function fmtNum(v, fmt, unit) { if (fmt === "money") { if (window.CONTROL && window.CONTROL.usd) return window.CONTROL.usd(v); const a = Math.abs(v), f = (n, d) => n.toFixed(d).replace(/\.0$/, ""); if (a >= 1e6) return "$" + f(v / 1e6, a < 1e7 ? 1 : 0) + "M"; if (a >= 1e3) return "$" + f(v / 1e3, a < 1e4 ? 1 : 0) + "k"; return "$" + Math.round(v); } return (unit || "") + v.toLocaleString(); } // Click-to-cycle status control — the signature "drive" affordance. // Advances through options on click; persisted by the caller. function CyclePill({ value, options, toneMap, glyphs, onCycle }) { const [hover, setHover] = useStateK(false); const tone = (toneMap && toneMap[value]) || "neutral"; const t = TONE_VARS[tone] || TONE_VARS.neutral; const next = () => { const i = options.indexOf(value); onCycle(options[(i + 1) % options.length]); }; return ( ); } // Inline-editable text — click to edit, commits on blur (Enter for single-line). function EditableText({ value, onSave, multiline, placeholder, style }) { const [editing, setEditing] = useStateK(false); const [v, setV] = useStateK(value); useEffectK(() => setV(value), [value]); const commit = () => { setEditing(false); if (v !== value) onSave(v); }; const shared = { fontFamily: "inherit", fontSize: "inherit", color: "inherit", lineHeight: "inherit", width: "100%", border: "1px solid var(--accent)", borderRadius: "var(--r-1)", padding: "2px 6px", background: "var(--bg)", outline: "none", ...style }; if (editing) { return multiline ?