@decentrys/ui-sdk 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Theming.
+ *
+ * These components ship into other people's wallets, so two things are true at
+ * once: they must look like something out of the box, and they must never
+ * force a Decentrys palette onto an application that has its own. Every visual
+ * value is therefore a CSS custom property with a default, and there are three
+ * escalating ways to override it:
+ *
+ *  1. `theme` — a token map applied inline on the component's own root, which
+ *     beats every stylesheet rule including the dark-mode defaults.
+ *  2. `className` — the integrator's own class on the same root, for anything
+ *     tokens do not reach.
+ *  3. `data-dcy-*` attributes, present on every meaningful element
+ *     (`data-dcy-level`, `data-dcy-kind`, `data-dcy-tone`), so an integrator
+ *     can target our internals from their own stylesheet without us exporting
+ *     a class-name contract we would then have to keep.
+ *
+ * No styling dependency is used or needed. Adding Tailwind or a CSS-in-JS
+ * runtime to a package that lands inside someone else's build is a cost they
+ * did not agree to.
+ */
+import type { CSSProperties } from 'react';
+/**
+ * Tones.
+ *
+ * Deliberately *not* a severity scale with `safe` at one end. `fact`,
+ * `capability` and `unknown` are separate tone families from the risk tones,
+ * because a fact and a threat signal rendering in the same colour is the exact
+ * failure this product exists to prevent — and `inactive` exists so a stale or
+ * low-confidence signal, which did not affect the assessment, cannot be shown
+ * in the colour of one that did.
+ */
+export type Tone = 'neutral' | 'info' | 'caution' | 'elevated' | 'high' | 'critical' | 'fact' | 'capability' | 'unknown' | 'inactive';
+export declare const THEME_TOKENS: readonly ["font", "font-mono", "radius", "gap", "surface", "surface-raised", "border", "text", "text-muted", "text-faint", "focus", "tone-neutral", "tone-neutral-bg", "tone-info", "tone-info-bg", "tone-caution", "tone-caution-bg", "tone-elevated", "tone-elevated-bg", "tone-high", "tone-high-bg", "tone-critical", "tone-critical-bg", "tone-fact", "tone-fact-bg", "tone-capability", "tone-capability-bg", "tone-unknown", "tone-unknown-bg", "tone-inactive", "tone-inactive-bg"];
+export type ThemeToken = (typeof THEME_TOKENS)[number];
+/** A partial map of token → CSS value. Anything omitted keeps its default. */
+export type DecentrysTheme = Partial<Record<ThemeToken, string>>;
+/**
+ * Turn a theme into inline custom properties.
+ *
+ * Inline custom properties win over the stylesheet's defaults *and* over the
+ * `prefers-color-scheme` block, which is the behaviour an integrator with a
+ * fixed brand palette needs — otherwise their light theme would flip to our
+ * dark one on a user's OS setting.
+ */
+export declare function themeStyle(theme?: DecentrysTheme, base?: CSSProperties): CSSProperties | undefined;
+/** The CSS variable reference for a tone's foreground, e.g. for a border. */
+export declare function toneVar(tone: Tone): string;
+/** The CSS variable reference for a tone's background wash. */
+export declare function toneBgVar(tone: Tone): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;GASG;AACH,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,UAAU,GACV,MAAM,GACN,UAAU,GACV,MAAM,GACN,YAAY,GACZ,SAAS,GACT,UAAU,CAAC;AAEf,eAAO,MAAM,YAAY,6dAgCf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,8EAA8E;AAC9E,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,KAAK,CAAC,EAAE,cAAc,EACtB,IAAI,CAAC,EAAE,aAAa,GACnB,aAAa,GAAG,SAAS,CAS3B;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE1C;AAED,+DAA+D;AAC/D,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE5C"}

package/dist/theme.js

@@ -0,0 +1,90 @@
+"use strict";
+/**
+ * Theming.
+ *
+ * These components ship into other people's wallets, so two things are true at
+ * once: they must look like something out of the box, and they must never
+ * force a Decentrys palette onto an application that has its own. Every visual
+ * value is therefore a CSS custom property with a default, and there are three
+ * escalating ways to override it:
+ *
+ *  1. `theme` — a token map applied inline on the component's own root, which
+ *     beats every stylesheet rule including the dark-mode defaults.
+ *  2. `className` — the integrator's own class on the same root, for anything
+ *     tokens do not reach.
+ *  3. `data-dcy-*` attributes, present on every meaningful element
+ *     (`data-dcy-level`, `data-dcy-kind`, `data-dcy-tone`), so an integrator
+ *     can target our internals from their own stylesheet without us exporting
+ *     a class-name contract we would then have to keep.
+ *
+ * No styling dependency is used or needed. Adding Tailwind or a CSS-in-JS
+ * runtime to a package that lands inside someone else's build is a cost they
+ * did not agree to.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_TOKENS = void 0;
+exports.themeStyle = themeStyle;
+exports.toneVar = toneVar;
+exports.toneBgVar = toneBgVar;
+exports.THEME_TOKENS = [
+    'font',
+    'font-mono',
+    'radius',
+    'gap',
+    'surface',
+    'surface-raised',
+    'border',
+    'text',
+    'text-muted',
+    'text-faint',
+    'focus',
+    'tone-neutral',
+    'tone-neutral-bg',
+    'tone-info',
+    'tone-info-bg',
+    'tone-caution',
+    'tone-caution-bg',
+    'tone-elevated',
+    'tone-elevated-bg',
+    'tone-high',
+    'tone-high-bg',
+    'tone-critical',
+    'tone-critical-bg',
+    'tone-fact',
+    'tone-fact-bg',
+    'tone-capability',
+    'tone-capability-bg',
+    'tone-unknown',
+    'tone-unknown-bg',
+    'tone-inactive',
+    'tone-inactive-bg',
+];
+/**
+ * Turn a theme into inline custom properties.
+ *
+ * Inline custom properties win over the stylesheet's defaults *and* over the
+ * `prefers-color-scheme` block, which is the behaviour an integrator with a
+ * fixed brand palette needs — otherwise their light theme would flip to our
+ * dark one on a user's OS setting.
+ */
+function themeStyle(theme, base) {
+    if (!theme)
+        return base;
+    const style = {};
+    for (const [token, value] of Object.entries(theme)) {
+        if (typeof value === 'string' && value.length > 0)
+            style[`--dcy-${token}`] = value;
+    }
+    // Custom properties are not part of the CSSProperties index signature; the
+    // cast is the standard, and only, way to express them in React's types.
+    return { ...(base ?? {}), ...style };
+}
+/** The CSS variable reference for a tone's foreground, e.g. for a border. */
+function toneVar(tone) {
+    return `var(--dcy-tone-${tone})`;
+}
+/** The CSS variable reference for a tone's background wash. */
+function toneBgVar(tone) {
+    return `var(--dcy-tone-${tone}-bg)`;
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;AAyEH,gCAYC;AAGD,0BAEC;AAGD,8BAEC;AArEY,QAAA,YAAY,GAAG;IAC1B,MAAM;IACN,WAAW;IACX,QAAQ;IACR,KAAK;IACL,SAAS;IACT,gBAAgB;IAChB,QAAQ;IACR,MAAM;IACN,YAAY;IACZ,YAAY;IACZ,OAAO;IACP,cAAc;IACd,iBAAiB;IACjB,WAAW;IACX,cAAc;IACd,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,iBAAiB;IACjB,oBAAoB;IACpB,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,kBAAkB;CACV,CAAC;AAOX;;;;;;;GAOG;AACH,SAAgB,UAAU,CACxB,KAAsB,EACtB,IAAoB;IAEpB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACnD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,KAAK,CAAC,SAAS,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC;IACrF,CAAC;IACD,2EAA2E;IAC3E,wEAAwE;IACxE,OAAO,EAAE,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,KAAK,EAAmB,CAAC;AACxD,CAAC;AAED,6EAA6E;AAC7E,SAAgB,OAAO,CAAC,IAAU;IAChC,OAAO,kBAAkB,IAAI,GAAG,CAAC;AACnC,CAAC;AAED,+DAA+D;AAC/D,SAAgB,SAAS,CAAC,IAAU;IAClC,OAAO,kBAAkB,IAAI,MAAM,CAAC;AACtC,CAAC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@decentrys/ui-sdk",
+  "version": "0.1.0",
+  "description": "Drop-in React components for rendering Decentrys risk assessments, built so a new project can never be shown as dangerous for being new.",
+  "license": "MIT",
+  "author": "Decentrys Labs",
+  "homepage": "https://decentrys.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teamdecentrys-byte/Decentrys.git",
+    "directory": "sdk/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/teamdecentrys-byte/Decentrys/issues"
+  },
+  "keywords": [
+    "decentrys",
+    "blockchain",
+    "web3",
+    "security",
+    "crypto",
+    "react",
+    "components",
+    "ui",
+    "wallet-ui"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/browser/decentrys-ui.mjs",
+      "default": "./dist/index.js"
+    },
+    "./browser": "./dist/browser/decentrys-ui.mjs"
+  },
+  "files": [
+    "dist",
+    "!dist/.tsbuildinfo*",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@decentrys/protect": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.7.2",
+    "vitest": "^3.2.7"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && npm run build:browser",
+    "build:browser": "../../node_modules/.bin/esbuild src/index.ts --bundle --format=esm --target=es2022 --jsx=automatic --external:react --external:react-dom --external:react/jsx-runtime --outfile=dist/browser/decentrys-ui.mjs && ../../node_modules/.bin/esbuild src/index.ts --bundle --format=iife --global-name=DecentrysUI --target=es2022 --jsx=automatic --alias:react=./src/browser/react-global.ts --alias:react/jsx-runtime=./src/browser/react-jsx-runtime.ts --alias:react-dom=./src/browser/react-dom-global.ts --outfile=dist/browser/decentrys-ui.js",
+    "typecheck": "tsc -p tsconfig.spec.json",
+    "test": "vitest run"
+  }
+}

package/src/browser/react-dom-global.ts

@@ -0,0 +1,20 @@
+/**
+ * `react-dom` for the script-tag build. Only `createPortal` is used, by the
+ * details modal, and only when its `portal` prop is left on.
+ */
+
+type ReactDomModule = Record<string, any>;
+
+function resolveReactDom(): ReactDomModule {
+  const candidate = (globalThis as { ReactDOM?: ReactDomModule }).ReactDOM;
+  if (!candidate || typeof candidate.createPortal !== 'function') {
+    throw new Error(
+      'DecentrysUI: RiskDetailsModal needs ReactDOM on the page (window.ReactDOM) to portal into '
+      + 'document.body. Load ReactDOM, or pass portal={false} to render the dialog in place.',
+    );
+  }
+  return candidate;
+}
+
+export const createPortal = (...args: unknown[]): unknown =>
+  resolveReactDom().createPortal(...args);

package/src/browser/react-global.ts

@@ -0,0 +1,42 @@
+/**
+ * How the script-tag build gets React.
+ *
+ * The ESM browser build leaves `react` as a bare import, which is right: an
+ * ESM consumer has a bundler or an import map. The IIFE build has neither, and
+ * esbuild's `--external` would leave a `require("react")` call in it that
+ * throws the moment the file loads. Bundling React instead is not an option —
+ * two copies of React in one application is a real and confusing breakage, and
+ * this file is aliased in precisely so that never happens.
+ *
+ * So the IIFE build resolves React from the page, the way every UMD component
+ * library has always done.
+ */
+
+type ReactModule = Record<string, any>;
+
+function resolveReact(): ReactModule {
+  const candidate = (globalThis as { React?: ReactModule }).React;
+  if (!candidate || typeof candidate.createElement !== 'function') {
+    // Loud and immediate, with the fix in the message. The alternative is
+    // "cannot read property createElement of undefined" from inside a bundle,
+    // several frames away from the missing script tag that caused it.
+    throw new Error(
+      'DecentrysUI: the script-tag build expects React on the page already '
+      + '(window.React, and window.ReactDOM for the details modal). Load React first, '
+      + 'or use the ESM build / the npm package if you have a bundler.',
+    );
+  }
+  return candidate;
+}
+
+const React: ReactModule = resolveReact();
+
+export default React;
+export const createContext = React.createContext;
+export const useContext = React.useContext;
+export const useState = React.useState;
+export const useEffect = React.useEffect;
+export const useId = React.useId;
+export const useRef = React.useRef;
+export const createElement = React.createElement;
+export const Fragment = React.Fragment;

package/src/browser/react-jsx-runtime.ts

@@ -0,0 +1,23 @@
+/**
+ * The automatic JSX runtime, expressed through `createElement`.
+ *
+ * React 17+ ships `react/jsx-runtime` as its own entry point, and a page that
+ * loaded React from a CDN script tag has the global but not that entry. The
+ * two are equivalent for everything this package emits: `jsx(type, props,
+ * key)` is `createElement` with `children` already inside `props`, which is
+ * exactly what `createElement` does with a config object when no variadic
+ * children are passed.
+ */
+
+import React from './react-global';
+
+export const Fragment = React.Fragment;
+
+function create(type: unknown, props: Record<string, unknown> | null, key?: unknown): unknown {
+  if (key === undefined || key === null) return React.createElement(type, props);
+  return React.createElement(type, { ...(props ?? {}), key });
+}
+
+export const jsx = create;
+export const jsxs = create;
+export const jsxDEV = create;

package/src/components/AddressRiskBadge.tsx

@@ -0,0 +1,94 @@
+/**
+ * The compact form — an inline badge beside an address.
+ *
+ * Small enough that it is tempting to reduce to a coloured dot, which would be
+ * the single worst thing this package could ship: a colour with no words is
+ * unreadable to a colour-blind user and unfalsifiable to everyone else. So the
+ * badge always carries the level's label as text, always carries an ordinal
+ * glyph that does not depend on colour, and always carries the model's own
+ * meaning in a screen-reader-only span, so the short label is never the only
+ * thing a non-sighted user gets.
+ */
+
+import { type ReactNode } from 'react';
+import type { Assessment, RiskLevel } from '@decentrys/protect';
+import { useUiConfig } from '../context';
+import { themeStyle } from '../theme';
+import { LevelBadge, Mono, ScreenReaderText, StyleGate, type CommonProps, cx } from '../primitives';
+import { levelPresentation, shortenAddress } from '../presentation';
+
+interface AddressRiskBadgeBaseProps extends CommonProps {
+  /** Rendered in short form beside the badge when supplied. */
+  address?: string;
+  /**
+   * Turns the badge into a button — for opening details, never for blocking.
+   * Nothing in this package disables a host application's controls.
+   */
+  onSelect?: () => void;
+}
+
+/**
+ * One of `assessment` or `level` is required, enforced by the type rather than
+ * by a runtime throw: a component that throws inside a wallet's render tree
+ * takes that wallet's screen down, which is a worse failure than the wiring
+ * mistake it was reporting.
+ */
+export type AddressRiskBadgeProps = AddressRiskBadgeBaseProps &
+  ({ assessment: Assessment; level?: never } | { level: RiskLevel; assessment?: never });
+
+export function AddressRiskBadge(props: AddressRiskBadgeProps): ReactNode {
+  const { assessment, level, address, onSelect, className, style, theme, copy, levelLabels } = props;
+  const { theme: mergedTheme, emitStyles } = useUiConfig({ theme, copy });
+  const resolved = assessment?.riskLevel ?? level;
+  if (!resolved) return null;
+
+  const presentation = levelPresentation(resolved, { labels: levelLabels });
+  const rootClass = cx('dcy', 'dcy-inline', className);
+  const rootStyle = themeStyle(mergedTheme, style);
+
+  const content = (
+    <>
+      <LevelBadge level={presentation} />
+      {address ? <Mono>{shortenAddress(address)}</Mono> : null}
+      <ScreenReaderText>{presentation.meaning}</ScreenReaderText>
+    </>
+  );
+
+  // The stylesheet is emitted as a sibling rather than a child: a <style> tag
+  // inside a <button> is legal but pointless clutter in the accessibility tree.
+  if (onSelect) {
+    return (
+      <>
+        <StyleGate emit={emitStyles} />
+        <button
+          type="button"
+          className={rootClass}
+          style={rootStyle}
+          title={presentation.meaning}
+          onClick={onSelect}
+          data-dcy-component="address-risk-badge"
+          data-dcy-level={resolved}
+          data-dcy-tone={presentation.tone}
+        >
+          {content}
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <StyleGate emit={emitStyles} />
+      <span
+        className={rootClass}
+        style={rootStyle}
+        title={presentation.meaning}
+        data-dcy-component="address-risk-badge"
+        data-dcy-level={resolved}
+        data-dcy-tone={presentation.tone}
+      >
+        {content}
+      </span>
+    </>
+  );
+}

package/src/components/ApprovalWarning.tsx

@@ -0,0 +1,144 @@
+/**
+ * The approval screen's component.
+ *
+ * The bar this has to clear is the one Stage 5 of the plan set: it shows
+ * "unlimited approval requested", not "scam detected". An unlimited allowance
+ * is a *scope*, and describing that scope precisely — who, over what, for how
+ * long, and that it survives until revoked — is more useful than any verdict,
+ * because it is the part a person can actually act on.
+ *
+ * So the scope block renders in the capability tone, never the threat tone,
+ * at any allowance size. Threat signals about the spender appear too, in their
+ * own section, looking nothing like the scope block. If those two ever merged
+ * visually, an unlimited approval to a perfectly ordinary DEX router would
+ * look identical to one to a confirmed drainer.
+ */
+
+import { type ReactNode } from 'react';
+import type { ProtectResult } from '@decentrys/protect';
+import { useUiConfig } from '../context';
+import { themeStyle } from '../theme';
+import {
+  AvailabilityNote, Chip, type CommonProps, EmptyNote, HistoryNote, LevelHeader, Mono, Section,
+  SignalList, StyleGate, UnknownRow, cx,
+} from '../primitives';
+import {
+  type ApprovalDetails, approvalPresentation, assessmentSections, decisionPresentation,
+  levelPresentation,
+} from '../presentation';
+
+export interface ApprovalWarningProps extends CommonProps {
+  result: ProtectResult;
+  /** The allowance itself: token, spender and amount. */
+  approval: ApprovalDetails;
+  /** The integrator's own controls. Rendered untouched and never disabled. */
+  actions?: ReactNode;
+  onViewDetails?: () => void;
+}
+
+export function ApprovalWarning({
+  result, approval, actions, onViewDetails,
+  className, style, theme, copy: copyOverrides, levelLabels,
+}: ApprovalWarningProps): ReactNode {
+  const { copy, theme: mergedTheme, emitStyles } = useUiConfig({ theme, copy: copyOverrides });
+  const { assessment, decision, demotedSignals } = result;
+  const level = levelPresentation(assessment.riskLevel, { labels: levelLabels });
+  const scope = approvalPresentation(approval);
+  const sections = assessmentSections(assessment, copy);
+  const policy = decisionPresentation(decision);
+
+  return (
+    <section
+      className={cx('dcy', 'dcy-card', className)}
+      style={themeStyle(mergedTheme, style)}
+      data-dcy-component="approval-warning"
+      data-dcy-level={assessment.riskLevel}
+      data-dcy-tone={level.tone}
+      data-dcy-unlimited={String(scope.unlimited)}
+      role={level.liveRegionRole}
+      aria-label={`${scope.scopeLabel}. ${level.ariaLabel}`}
+    >
+      <StyleGate emit={emitStyles} />
+      <LevelHeader assessment={assessment} copy={copy} levelLabels={levelLabels} />
+
+      <AvailabilityNote assessment={assessment} />
+
+      {/*
+        The scope block. Capability tone at every size — an unlimited allowance
+        is a description of what is being granted, not an accusation about who
+        is asking for it.
+      */}
+      <Section title={copy.approvalHeading}>
+        <div
+          className="dcy-row"
+          data-dcy-kind="capability"
+          data-dcy-tone={scope.tone}
+          data-dcy-rule="dashed"
+        >
+          <span className="dcy-glyph" aria-hidden="true">◇</span>
+          <div className="dcy-row-body">
+            <p className={cx('dcy-row-statement', scope.emphasis === 'strong' && 'dcy-row-strong')}>
+              <Chip>{scope.scopeLabel}</Chip> {scope.statement}
+            </p>
+            <p className="dcy-note">{copy.approvalRevocation}</p>
+          </div>
+        </div>
+        <dl className="dcy-kv">
+          <dt>{copy.spenderLabel}</dt>
+          <dd>
+            <Mono>{approval.spender}</Mono>
+            {approval.spenderLabel ? ` — ${approval.spenderLabel}` : null}
+          </dd>
+          <dt>{copy.tokenLabel}</dt>
+          <dd>
+            <Mono>{approval.token}</Mono>
+            {approval.symbol ? ` — ${approval.symbol}` : null}
+          </dd>
+          <dt>Amount</dt>
+          <dd>{scope.amountLabel}</dd>
+        </dl>
+      </Section>
+
+      <Section title={copy.signalsHeading}>
+        <SignalList
+          signals={[...sections.activeSignals, ...sections.inertSignals]}
+          copy={copy}
+          subjectNoun="spender"
+        />
+      </Section>
+
+      {sections.unknowns.length > 0 ? (
+        <Section title={copy.unknownsHeading} note={copy.unknownsAreNotRisk}>
+          <ul className="dcy-list">
+            {sections.unknowns.map((unknown) => (
+              <UnknownRow key={unknown.field} unknown={unknown} copy={copy} />
+            ))}
+          </ul>
+        </Section>
+      ) : null}
+
+      <HistoryNote status={assessment.historyStatus} copy={copy} />
+
+      {demotedSignals && demotedSignals.length > 0 ? (
+        <EmptyNote>
+          {copy.demotedHeading}: {demotedSignals.join(', ')}. {copy.demotedExplanation}
+        </EmptyNote>
+      ) : null}
+
+      <p className="dcy-note" data-dcy-decision={policy.action}>
+        <span className="dcy-chip">{policy.label}</span> {policy.statement}
+      </p>
+
+      {onViewDetails || actions ? (
+        <div className="dcy-head">
+          {onViewDetails ? (
+            <button type="button" className="dcy-btn dcy-btn-quiet" onClick={onViewDetails}>
+              {copy.viewDetails}
+            </button>
+          ) : null}
+          {actions}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/components/ContractFacts.tsx

@@ -0,0 +1,119 @@
+/**
+ * What a contract is and what it can do — and nothing about what it might be
+ * accused of.
+ *
+ * The separation is the point. This component renders facts, capabilities and
+ * unknowns; threat signals are rendered by `ThreatSignalList`, in a visually
+ * different shape, because "deployed 3 days ago" and "attributed to a drainer
+ * family" appearing as two grey rows in the same list is exactly the confusion
+ * this product exists to remove.
+ *
+ * It does not therefore *hide* signals. When the assessment carries any, this
+ * component says how many and that they are shown separately, so nobody
+ * embeds this panel alone and unwittingly presents a partial picture.
+ */
+
+import { type ReactNode } from 'react';
+import type { Assessment } from '@decentrys/protect';
+import { useUiConfig } from '../context';
+import { themeStyle } from '../theme';
+import {
+  AvailabilityNote, CapabilityRow, type CommonProps, DemotedNote, EmptyNote, FactRow, HistoryNote,
+  Section, StyleGate, UnknownRow, cx,
+} from '../primitives';
+import { assessmentSections, plural } from '../presentation';
+
+export interface ContractFactsProps extends CommonProps {
+  assessment: Assessment;
+  /** Coverage signals the SDK refused to score, from `ProtectResult`. */
+  demotedSignals?: string[];
+  /** Called when a reader asks to see the threat signals shown elsewhere. */
+  onViewSignals?: () => void;
+  title?: string;
+}
+
+export function ContractFacts({
+  assessment, demotedSignals, onViewSignals, title,
+  className, style, theme, copy: copyOverrides,
+}: ContractFactsProps): ReactNode {
+  const { copy, theme: mergedTheme, emitStyles } = useUiConfig({ theme, copy: copyOverrides });
+  const sections = assessmentSections(assessment, copy);
+  const signalCount = sections.activeSignals.length + sections.inertSignals.length;
+
+  return (
+    <section
+      className={cx('dcy', 'dcy-card', className)}
+      style={themeStyle(mergedTheme, style)}
+      data-dcy-component="contract-facts"
+      aria-label={title ?? 'Contract facts and capabilities'}
+    >
+      <StyleGate emit={emitStyles} />
+      {title ? <h3 className="dcy-title">{title}</h3> : null}
+
+      <AvailabilityNote assessment={assessment} />
+
+      <Section title={copy.capabilitiesHeading} note={copy.capabilitiesAreNotFindings}>
+        {sections.capabilities.length === 0 ? (
+          <EmptyNote>{copy.noCapabilities}</EmptyNote>
+        ) : (
+          <ul className="dcy-list">
+            {sections.capabilities.map((capability, index) => (
+              <CapabilityRow
+                key={`${capability.type}:${index}`}
+                capability={capability}
+                copy={copy}
+              />
+            ))}
+          </ul>
+        )}
+      </Section>
+
+      <Section title={copy.factsHeading} note={copy.factsAreNotFindings}>
+        {sections.facts.length === 0 ? (
+          <EmptyNote>{copy.noFacts}</EmptyNote>
+        ) : (
+          <ul className="dcy-list">
+            {sections.facts.map((fact, index) => (
+              <FactRow key={`${fact.type}:${index}`} fact={fact} copy={copy} />
+            ))}
+          </ul>
+        )}
+      </Section>
+
+      <Section title={copy.unknownsHeading} note={copy.unknownsAreNotRisk}>
+        {sections.unknowns.length === 0 ? (
+          <EmptyNote>{copy.noUnknowns}</EmptyNote>
+        ) : (
+          <ul className="dcy-list">
+            {sections.unknowns.map((unknown) => (
+              <UnknownRow key={unknown.field} unknown={unknown} copy={copy} />
+            ))}
+          </ul>
+        )}
+      </Section>
+
+      <HistoryNote status={assessment.historyStatus} copy={copy} />
+
+      <DemotedNote demotedSignals={demotedSignals} copy={copy} />
+
+      {/* Signals live in their own component. Saying so keeps this panel from
+          quietly reading as the whole assessment. */}
+      {signalCount > 0 ? (
+        <p className="dcy-note" data-dcy-signals-elsewhere="">
+          {signalCount} {plural(signalCount, 'threat signal is', 'threat signals are')} reported for
+          this subject and {plural(signalCount, 'is', 'are')} shown separately.
+          {onViewSignals ? (
+            <>
+              {' '}
+              <button type="button" className="dcy-btn dcy-btn-quiet" onClick={onViewSignals}>
+                {copy.signalsHeading}
+              </button>
+            </>
+          ) : null}
+        </p>
+      ) : (
+        <p className="dcy-note">{copy.noSignals}</p>
+      )}
+    </section>
+  );
+}