@decentrys/ui-sdk 0.1.0

package/src/primitives.tsx

@@ -0,0 +1,384 @@
+/**
+ * The shared rendering pieces.
+ *
+ * Every visual decision in here comes out of `presentation.ts`; nothing in
+ * this file decides what a thing means, only how the description it was given
+ * turns into elements. That is why the tests target the presentation module
+ * rather than markup — the mapping is where the rule can be broken, and it is
+ * not in this file.
+ *
+ * Two invariants hold throughout:
+ *
+ *  - Every row carries its kind as a **word** (`Fact`, `Capability`,
+ *    `Threat signal`, `Unknown`) and as a **rule style**, before colour is
+ *    considered at all. A user who cannot distinguish amber from grey can
+ *    still tell an observation from an accusation.
+ *  - No control here is ever rendered disabled. These components inform; the
+ *    integrator's own UI decides what a user may do.
+ */
+
+import type { CSSProperties, ReactNode } from 'react';
+import type {
+  Evidence, HistoryStatus, ObservedFact, RiskLevel, TechnicalCapability,
+  ThreatSignal, UnknownField,
+} from '@decentrys/protect';
+import { DecentrysUiStyles } from './context';
+import type { DecentrysTheme } from './theme';
+import type { UiCopy } from './copy';
+import {
+  availabilityPresentation, capabilityPresentation, evidencePresentation, factPresentation,
+  historyPresentation, kindPresentation, levelPresentation, signalPresentation,
+  unknownPresentation, type LevelPresentation,
+} from './presentation';
+import type { Assessment } from '@decentrys/protect';
+
+/** Props every component in this package accepts. */
+export interface CommonProps {
+  /** Applied alongside `dcy` on the component's own root. */
+  className?: string;
+  style?: CSSProperties;
+  /** Token overrides, applied inline so they beat the default stylesheet. */
+  theme?: DecentrysTheme;
+  /** Copy overrides, including translation. */
+  copy?: Partial<UiCopy>;
+  /** Risk-level label overrides, for translation or house style. */
+  levelLabels?: Partial<Record<RiskLevel, string>>;
+}
+
+export function cx(...parts: Array<string | false | undefined | null>): string {
+  return parts.filter(Boolean).join(' ');
+}
+
+export function StyleGate({ emit }: { emit: boolean }): ReactNode {
+  return emit ? <DecentrysUiStyles /> : null;
+}
+
+// ---------------------------------------------------------------------------
+// Badges and chips
+// ---------------------------------------------------------------------------
+
+export function LevelBadge({ level }: { level: LevelPresentation }): ReactNode {
+  return (
+    <span className="dcy-badge" data-dcy-tone={level.tone} data-dcy-level={level.level}>
+      {/* Decorative only — the label beside it carries the meaning, so a screen
+          reader is not made to announce a row of exclamation marks. */}
+      <span className="dcy-glyph" aria-hidden="true">{level.glyph}</span>
+      <span>{level.label}</span>
+    </span>
+  );
+}
+
+export function Chip({ children, title }: { children: ReactNode; title?: string }): ReactNode {
+  return <span className="dcy-chip" title={title}>{children}</span>;
+}
+
+export function Mono({ children }: { children: ReactNode }): ReactNode {
+  return <span className="dcy-mono">{children}</span>;
+}
+
+/**
+ * Visible to assistive technology, not to the eye.
+ *
+ * Used to carry a level's full meaning alongside a short badge label, so the
+ * compact form is short for sighted users without being *less* informative for
+ * anyone using a screen reader.
+ */
+export function ScreenReaderText({ children }: { children: ReactNode }): ReactNode {
+  return <span className="dcy-sr">{children}</span>;
+}
+
+// ---------------------------------------------------------------------------
+// Sections
+// ---------------------------------------------------------------------------
+
+export function Section({
+  title, note, children,
+}: { title: string; note?: string; children: ReactNode }): ReactNode {
+  return (
+    <section className="dcy-section">
+      <h4 className="dcy-section-title">{title}</h4>
+      {note ? <p className="dcy-note">{note}</p> : null}
+      {children}
+    </section>
+  );
+}
+
+/**
+ * An explicit statement of emptiness.
+ *
+ * A blank panel is indistinguishable from a clean result, and the difference
+ * between "we looked and found nothing" and "there is nothing to find" is the
+ * difference this product is built on. So emptiness is written down.
+ */
+export function EmptyNote({ children }: { children: ReactNode }): ReactNode {
+  return <p className="dcy-note" data-dcy-empty="">{children}</p>;
+}
+
+// ---------------------------------------------------------------------------
+// Rows
+// ---------------------------------------------------------------------------
+
+export function FactRow({ fact, copy }: { fact: ObservedFact; copy: UiCopy }): ReactNode {
+  const kind = kindPresentation('fact', copy);
+  const p = factPresentation(fact);
+  return (
+    <li
+      className="dcy-row"
+      data-dcy-kind="fact"
+      data-dcy-tone={p.tone}
+      data-dcy-rule={kind.rule}
+    >
+      <span className="dcy-glyph" aria-hidden="true">{kind.glyph}</span>
+      <div className="dcy-row-body">
+        <p className="dcy-row-statement">
+          <Chip>{kind.label}</Chip> {p.statement}
+        </p>
+        <p className="dcy-row-meta">
+          <span>{copy.sourceLabel}: {p.source}</span>
+          <span>{copy.observedLabel}: {p.observedAt}</span>
+        </p>
+      </div>
+    </li>
+  );
+}
+
+export function CapabilityRow({
+  capability, copy,
+}: { capability: TechnicalCapability; copy: UiCopy }): ReactNode {
+  const kind = kindPresentation('capability', copy);
+  const p = capabilityPresentation(capability);
+  return (
+    <li
+      className="dcy-row"
+      data-dcy-kind="capability"
+      data-dcy-tone={p.tone}
+      data-dcy-rule={kind.rule}
+      data-dcy-severity={p.severity}
+    >
+      <span className="dcy-glyph" aria-hidden="true">{kind.glyph}</span>
+      <div className="dcy-row-body">
+        <p className={cx('dcy-row-statement', p.emphasis === 'strong' && 'dcy-row-strong')}>
+          <Chip>{kind.label}</Chip> <Chip>{p.severityLabel}</Chip> {p.statement}
+        </p>
+        {p.grantedBy ? (
+          <p className="dcy-row-meta">
+            <span>{copy.grantedByLabel}: <Mono>{p.grantedBy}</Mono></span>
+          </p>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+export function UnknownRow({
+  unknown, copy,
+}: { unknown: UnknownField; copy: UiCopy }): ReactNode {
+  const kind = kindPresentation('unknown', copy);
+  const p = unknownPresentation(unknown);
+  return (
+    <li
+      className="dcy-row"
+      data-dcy-kind="unknown"
+      data-dcy-tone={p.tone}
+      data-dcy-rule={kind.rule}
+    >
+      <span className="dcy-glyph" aria-hidden="true">{kind.glyph}</span>
+      <div className="dcy-row-body">
+        <p className="dcy-row-statement">
+          <Chip>{kind.label}</Chip> {p.statement}
+        </p>
+        <p className="dcy-row-meta">
+          <span>{p.field}</span>
+          <span>{p.reasonLabel}</span>
+        </p>
+      </div>
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Threat signals
+// ---------------------------------------------------------------------------
+
+export function EvidenceList({
+  evidence, copy,
+}: { evidence: Evidence[]; copy: UiCopy }): ReactNode {
+  if (evidence.length === 0) return null;
+  return (
+    <div className="dcy-section">
+      <h5 className="dcy-section-title">{copy.evidenceHeading}</h5>
+      {evidence.map((item) => {
+        const e = evidencePresentation(item, copy);
+        return (
+          <dl className="dcy-kv" key={e.id}>
+            <dt>{copy.sourceLabel}</dt>
+            <dd>{e.source}</dd>
+            <dt>Type</dt>
+            <dd>{e.type}</dd>
+            <dt>{copy.observedLabel}</dt>
+            <dd>{e.observedAt}</dd>
+            <dt>{copy.confidenceLabel}</dt>
+            <dd>{e.confidenceLabel}</dd>
+            {e.reference ? (
+              <>
+                <dt>Reference</dt>
+                <dd><Mono>{e.reference}</Mono></dd>
+              </>
+            ) : null}
+            <dt>Attribution</dt>
+            <dd>{e.attribution}</dd>
+            <dt>Evidence id</dt>
+            <dd><Mono>{e.id}</Mono></dd>
+          </dl>
+        );
+      })}
+    </div>
+  );
+}
+
+export function SignalCard({
+  signal, copy, subjectNoun, showEvidence = false,
+}: {
+  signal: ThreatSignal;
+  copy: UiCopy;
+  subjectNoun?: string;
+  showEvidence?: boolean;
+}): ReactNode {
+  const kind = kindPresentation('signal', copy);
+  const p = signalPresentation(signal, copy, { subjectNoun });
+  return (
+    <li
+      className="dcy-signal"
+      data-dcy-kind="signal"
+      data-dcy-tone={p.tone}
+      data-dcy-severity={p.severity}
+      data-dcy-raising={String(p.raising)}
+      data-dcy-hops={String(p.hops)}
+    >
+      <div className="dcy-signal-head">
+        <span className="dcy-glyph" aria-hidden="true">{kind.glyph}</span>
+        <Chip>{kind.label}</Chip>
+        <Chip>{p.severityLabel} severity</Chip>
+        <Chip title={copy.confidenceCaveat}>{p.confidenceLabel} {copy.confidenceLabel.toLowerCase()}</Chip>
+        <Chip>{p.hopLabel}</Chip>
+        {p.active ? null : <Chip>{p.statusLabel}</Chip>}
+      </div>
+      <p className="dcy-row-statement dcy-row-strong">{p.explanation}</p>
+      {/* Hop distance in a sentence, not just a badge. A "2" tells nobody that
+          they are reading an inference about somebody else's counterparty. */}
+      <p className="dcy-note">{p.hopStatement}</p>
+      {p.inertStatement ? <p className="dcy-note">{p.inertStatement}</p> : null}
+      <p className="dcy-note">{p.attribution}</p>
+      {showEvidence ? <EvidenceList evidence={signal.evidence} copy={copy} /> : null}
+    </li>
+  );
+}
+
+export function SignalList({
+  signals, copy, subjectNoun, showEvidence,
+}: {
+  signals: ThreatSignal[];
+  copy: UiCopy;
+  subjectNoun?: string;
+  showEvidence?: boolean;
+}): ReactNode {
+  if (signals.length === 0) return <EmptyNote>{copy.noSignals}</EmptyNote>;
+  return (
+    <ul className="dcy-list">
+      {signals.map((signal, index) => (
+        <SignalCard
+          key={`${signal.type}:${signal.createdAt}:${index}`}
+          signal={signal}
+          copy={copy}
+          subjectNoun={subjectNoun}
+          showEvidence={showEvidence}
+        />
+      ))}
+    </ul>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Standing notes
+// ---------------------------------------------------------------------------
+
+/**
+ * History, always neutral.
+ *
+ * `LIMITED` is the ordinary state of anything deployed this week. It gets the
+ * same typography as `ESTABLISHED`, no alert role, no severity tone and no
+ * icon that means trouble — the presentation layer will not even hand this
+ * component a warning tone to render.
+ */
+export function HistoryNote({
+  status, copy,
+}: { status: HistoryStatus; copy: UiCopy }): ReactNode {
+  const h = historyPresentation(status);
+  return (
+    <p className="dcy-note" data-dcy-tone={h.tone} data-dcy-history={h.status}>
+      <Chip>{h.label}</Chip> {h.statement}
+    </p>
+  );
+}
+
+/** Our own outage, stated as ours. Never rendered as a finding about the user. */
+export function AvailabilityNote({ assessment }: { assessment: Assessment }): ReactNode {
+  const a = availabilityPresentation(assessment);
+  if (!a.unavailable) return null;
+  return (
+    <p className="dcy-note" data-dcy-tone={a.tone} data-dcy-unavailable="">
+      {a.statement}
+    </p>
+  );
+}
+
+/**
+ * Coverage signals the SDK refused to treat as risk.
+ *
+ * Shown rather than dropped, because an integrator should be able to watch the
+ * rule being applied to their own traffic.
+ */
+export function DemotedNote({
+  demotedSignals, copy,
+}: { demotedSignals?: string[]; copy: UiCopy }): ReactNode {
+  if (!demotedSignals || demotedSignals.length === 0) return null;
+  return (
+    <Section title={copy.demotedHeading} note={copy.demotedExplanation}>
+      <p className="dcy-row-meta">
+        {demotedSignals.map((type) => <Chip key={type}>{type}</Chip>)}
+      </p>
+    </Section>
+  );
+}
+
+export function ExplanationList({ explanation }: { explanation: string[] }): ReactNode {
+  if (explanation.length === 0) return null;
+  return (
+    <ul className="dcy-list" data-dcy-explanation="">
+      {explanation.map((line, index) => (
+        <li className="dcy-note" key={`${index}:${line.slice(0, 24)}`}>{line}</li>
+      ))}
+    </ul>
+  );
+}
+
+export function LevelHeader({
+  assessment, copy, levelLabels, children,
+}: {
+  assessment: Assessment;
+  copy: UiCopy;
+  levelLabels?: Partial<Record<RiskLevel, string>>;
+  children?: ReactNode;
+}): ReactNode {
+  const level = levelPresentation(assessment.riskLevel, { labels: levelLabels });
+  return (
+    <div className="dcy-head">
+      <div className="dcy-head-main">
+        <h3 className="dcy-title">{level.label}</h3>
+        <p className="dcy-meaning">{level.meaning}</p>
+      </div>
+      <LevelBadge level={level} />
+      {children}
+    </div>
+  );
+}

package/src/styles.ts

@@ -0,0 +1,281 @@
+/**
+ * The default stylesheet, as a string.
+ *
+ * It is exported so an integrator with a strict CSP, a shadow root or a
+ * server-rendered `<head>` can place it themselves rather than having a
+ * `<style>` tag appear inside their component tree. Everything visual in it
+ * resolves through a `--dcy-*` custom property, so overriding the palette
+ * never requires touching or overriding these rules.
+ *
+ * There is no styling dependency, and there will not be one. A package that
+ * lands inside somebody else's wallet build does not get to bring Tailwind, a
+ * CSS-in-JS runtime or a class-name convention along with it.
+ */
+export const DECENTRYS_UI_CSS = `
+.dcy {
+  --dcy-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --dcy-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --dcy-radius: 8px;
+  --dcy-gap: 12px;
+
+  --dcy-surface: #ffffff;
+  --dcy-surface-raised: #f5f6f8;
+  --dcy-border: #dde1e7;
+  --dcy-text: #14171c;
+  --dcy-text-muted: #545d6b;
+  --dcy-text-faint: #737d8c;
+  --dcy-focus: #2f6fed;
+
+  --dcy-tone-neutral: #545d6b;
+  --dcy-tone-neutral-bg: #f2f4f6;
+  --dcy-tone-info: #2f5f96;
+  --dcy-tone-info-bg: #eef3f9;
+  --dcy-tone-caution: #7d6113;
+  --dcy-tone-caution-bg: #faf4e4;
+  --dcy-tone-elevated: #97500f;
+  --dcy-tone-elevated-bg: #fbefe3;
+  --dcy-tone-high: #a83c18;
+  --dcy-tone-high-bg: #fbece6;
+  --dcy-tone-critical: #98211d;
+  --dcy-tone-critical-bg: #fbe9e9;
+  --dcy-tone-fact: #6a7382;
+  --dcy-tone-fact-bg: transparent;
+  --dcy-tone-capability: #554d8c;
+  --dcy-tone-capability-bg: #f2f1fa;
+  --dcy-tone-unknown: #77808f;
+  --dcy-tone-unknown-bg: transparent;
+  --dcy-tone-inactive: #8d97a4;
+  --dcy-tone-inactive-bg: transparent;
+
+  font-family: var(--dcy-font);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--dcy-text);
+  box-sizing: border-box;
+}
+.dcy *, .dcy *::before, .dcy *::after { box-sizing: inherit; }
+
+@media (prefers-color-scheme: dark) {
+  .dcy {
+    --dcy-surface: #14171c;
+    --dcy-surface-raised: #1c2027;
+    --dcy-border: #2c323b;
+    --dcy-text: #e8ebef;
+    --dcy-text-muted: #a4adba;
+    --dcy-text-faint: #808a98;
+    --dcy-focus: #7aa5ff;
+
+    --dcy-tone-neutral: #a4adba;
+    --dcy-tone-neutral-bg: #1e232a;
+    --dcy-tone-info: #86b0e6;
+    --dcy-tone-info-bg: #17202b;
+    --dcy-tone-caution: #d8b463;
+    --dcy-tone-caution-bg: #241f14;
+    --dcy-tone-elevated: #e0a065;
+    --dcy-tone-elevated-bg: #261c13;
+    --dcy-tone-high: #eb8c68;
+    --dcy-tone-high-bg: #271812;
+    --dcy-tone-critical: #ef7d78;
+    --dcy-tone-critical-bg: #291414;
+    --dcy-tone-fact: #97a1ae;
+    --dcy-tone-capability: #a79fe0;
+    --dcy-tone-capability-bg: #1d1b2a;
+    --dcy-tone-unknown: #8b95a3;
+    --dcy-tone-inactive: #79828f;
+  }
+}
+
+
+/*
+ * Tone resolution happens here, in the stylesheet, rather than in inline
+ * styles on the elements. An inline colour would beat any rule an integrator
+ * wrote against these components without \`!important\`, which is not a
+ * position to put somebody in who only wanted to match their own palette.
+ */
+[data-dcy-tone="neutral"]    { --dcy-tone: var(--dcy-tone-neutral);    --dcy-tone-bg: var(--dcy-tone-neutral-bg); }
+[data-dcy-tone="info"]       { --dcy-tone: var(--dcy-tone-info);       --dcy-tone-bg: var(--dcy-tone-info-bg); }
+[data-dcy-tone="caution"]    { --dcy-tone: var(--dcy-tone-caution);    --dcy-tone-bg: var(--dcy-tone-caution-bg); }
+[data-dcy-tone="elevated"]   { --dcy-tone: var(--dcy-tone-elevated);   --dcy-tone-bg: var(--dcy-tone-elevated-bg); }
+[data-dcy-tone="high"]       { --dcy-tone: var(--dcy-tone-high);       --dcy-tone-bg: var(--dcy-tone-high-bg); }
+[data-dcy-tone="critical"]   { --dcy-tone: var(--dcy-tone-critical);   --dcy-tone-bg: var(--dcy-tone-critical-bg); }
+[data-dcy-tone="fact"]       { --dcy-tone: var(--dcy-tone-fact);       --dcy-tone-bg: var(--dcy-tone-fact-bg); }
+[data-dcy-tone="capability"] { --dcy-tone: var(--dcy-tone-capability); --dcy-tone-bg: var(--dcy-tone-capability-bg); }
+[data-dcy-tone="unknown"]    { --dcy-tone: var(--dcy-tone-unknown);    --dcy-tone-bg: var(--dcy-tone-unknown-bg); }
+[data-dcy-tone="inactive"]   { --dcy-tone: var(--dcy-tone-inactive);   --dcy-tone-bg: var(--dcy-tone-inactive-bg); }
+
+[data-dcy-rule="solid"]  { border-left-style: solid; }
+[data-dcy-rule="dashed"] { border-left-style: dashed; }
+[data-dcy-rule="dotted"] { border-left-style: dotted; }
+
+.dcy-row[data-dcy-kind="signal"] { border-left-width: 4px; }
+
+.dcy :focus-visible {
+  outline: 2px solid var(--dcy-focus);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.dcy-card {
+  border: 1px solid var(--dcy-border);
+  border-radius: var(--dcy-radius);
+  background: var(--dcy-surface);
+  padding: var(--dcy-gap);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dcy-gap);
+}
+
+.dcy-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
+.dcy-head-main { flex: 1 1 14rem; min-width: 0; }
+.dcy-title { margin: 0; font-size: 14px; font-weight: 600; }
+.dcy-meaning { margin: 4px 0 0; color: var(--dcy-text-muted); font-size: 13px; }
+
+.dcy-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.6;
+  white-space: nowrap;
+  color: var(--dcy-tone, var(--dcy-text-muted));
+  background: var(--dcy-tone-bg, transparent);
+}
+.dcy-glyph {
+  font-family: var(--dcy-font-mono);
+  font-weight: 700;
+  letter-spacing: -0.05em;
+}
+
+.dcy-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--dcy-border);
+  background: var(--dcy-surface-raised);
+  color: var(--dcy-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.dcy-section { display: flex; flex-direction: column; gap: 8px; }
+.dcy-section-title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--dcy-text-faint);
+}
+.dcy-note { margin: 0; font-size: 12px; color: var(--dcy-text-muted); }
+.dcy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+
+/*
+ * Kind rows.
+ *
+ * The left rule's *style* and the row's text label are what separate a fact
+ * from a threat signal; the colour is the third carrier, not the only one.
+ */
+.dcy-row {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0 6px 10px;
+  border-left-style: solid;
+  border-left-width: 2px;
+  border-left-color: var(--dcy-tone, var(--dcy-tone-fact));
+}
+.dcy-row-body { min-width: 0; flex: 1 1 auto; }
+.dcy-row-statement { margin: 0; }
+.dcy-row-strong { font-weight: 600; }
+.dcy-row-meta {
+  margin: 3px 0 0;
+  font-size: 12px;
+  color: var(--dcy-text-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+}
+.dcy-mono { font-family: var(--dcy-font-mono); font-size: 12px; word-break: break-all; }
+
+.dcy-signal {
+  border: 1px solid var(--dcy-border);
+  border-left-width: 4px;
+  border-left-color: var(--dcy-tone, var(--dcy-border));
+  border-radius: var(--dcy-radius);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.dcy-signal-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+
+.dcy-kv { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: 4px 12px; font-size: 13px; }
+.dcy-kv dt { color: var(--dcy-text-muted); }
+.dcy-kv dd { margin: 0; }
+
+.dcy-btn {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dcy-text);
+  background: var(--dcy-surface-raised);
+  border: 1px solid var(--dcy-border);
+  border-radius: 6px;
+  padding: 5px 12px;
+  cursor: pointer;
+}
+.dcy-btn:hover { background: var(--dcy-border); }
+.dcy-btn-quiet { background: transparent; border-color: transparent; text-decoration: underline; padding-left: 0; }
+
+.dcy-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 10, 14, 0.55);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 24px 16px;
+  overflow: auto;
+  z-index: 2147483000;
+}
+.dcy-modal {
+  width: min(40rem, 100%);
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  background: var(--dcy-surface);
+  border: 1px solid var(--dcy-border);
+  border-radius: var(--dcy-radius);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dcy-gap);
+}
+.dcy-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+.dcy-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--dcy-font);
+  font-size: 12px;
+}
+.dcy-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.dcy-hr { border: none; border-top: 1px solid var(--dcy-border); margin: 0; }
+`;