@echothink-ui/domain-widgets 0.1.0

package/src/index.tsx

@@ -0,0 +1,3925 @@
+import "./styles.css";
+
+import * as React from "react";
+import { DownloadIcon, PlusIcon, TableIcon } from "@echothink-ui/icons";
+import {
+  Badge,
+  Button,
+  Checkbox,
+  LinkButton,
+  Select,
+  Surface,
+  StatusDot,
+  TextInput,
+  createSurfaceComponent,
+  statusLabel,
+  type EthAction,
+  type EthListItem,
+  type EthOperationalStatus,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+
+export type ApprovalWorkflowMode = "sequential" | "parallel" | "conditional";
+
+export interface CRMContactPanelProps extends SurfaceComponentProps {
+  contacts?: EthListItem[];
+  relationshipHealthLabel?: React.ReactNode;
+  engagementLabel?: React.ReactNode;
+  nextStep?: React.ReactNode;
+}
+
+export interface SupportTicketQueueProps extends SurfaceComponentProps {
+  tickets?: EthListItem[];
+}
+
+function textFromNode(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textFromNode).join(" ");
+  return "";
+}
+
+function getContactInitials(label: React.ReactNode) {
+  const words = textFromNode(label).trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return "CT";
+  return words
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+}
+
+function safeDomId(value: string) {
+  return value.replace(/[^A-Za-z0-9_-]+/g, "-");
+}
+
+function splitTicketPriority(label: React.ReactNode) {
+  if (typeof label !== "string" && typeof label !== "number") {
+    return { priority: undefined, label };
+  }
+
+  const text = String(label);
+  const match = text.match(/^\[(P[0-4])\]\s*(.+)$/i);
+  if (!match) return { priority: undefined, label };
+
+  return {
+    priority: match[1].toUpperCase(),
+    label: match[2]
+  };
+}
+
+function healthTone(status?: EthOperationalStatus) {
+  if (status === "blocked" || status === "failed" || status === "stale") return "risk";
+  if (status === "warning" || status === "pending-approval" || status === "approval-required") {
+    return "watch";
+  }
+  if (status === "queued" || status === "not-started") return "new";
+  return "healthy";
+}
+
+function healthLabel(status?: EthOperationalStatus) {
+  if (status === "blocked" || status === "failed" || status === "stale") return "Needs attention";
+  if (status === "warning" || status === "pending-approval" || status === "approval-required") {
+    return "Monitor closely";
+  }
+  if (status === "queued" || status === "not-started") return "New relationship";
+  return "Healthy";
+}
+
+function CRMContactActions({ actions }: { actions?: EthAction[] }) {
+  if (!actions?.length) return null;
+
+  return (
+    <div className="eth-domain-crm-contact-panel__contact-actions">
+      {actions.slice(0, 2).map((action) =>
+        action.href ? (
+          <LinkButton
+            key={action.id}
+            href={action.disabled ? undefined : action.href}
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            aria-disabled={action.disabled ? true : undefined}
+            tabIndex={action.disabled ? -1 : undefined}
+          >
+            {action.label}
+          </LinkButton>
+        ) : (
+          <Button
+            key={action.id}
+            type="button"
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            disabled={action.disabled}
+            onClick={action.onSelect}
+          >
+            {action.label}
+          </Button>
+        )
+      )}
+    </div>
+  );
+}
+
+function SupportTicketActions({ actions }: { actions?: EthAction[] }) {
+  if (!actions?.length) return null;
+
+  return (
+    <div className="eth-domain-support-ticket-queue__actions" aria-label="Ticket actions">
+      {actions.slice(0, 2).map((action) =>
+        action.href ? (
+          <LinkButton
+            key={action.id}
+            href={action.disabled ? undefined : action.href}
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            aria-disabled={action.disabled ? true : undefined}
+            tabIndex={action.disabled ? -1 : undefined}
+          >
+            {action.label}
+          </LinkButton>
+        ) : (
+          <Button
+            key={action.id}
+            type="button"
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            disabled={action.disabled}
+            onClick={action.onSelect}
+          >
+            {action.label}
+          </Button>
+        )
+      )}
+    </div>
+  );
+}
+
+export function CRMContactPanel({
+  title = "Account relationship",
+  description,
+  status = "active",
+  metadata,
+  items,
+  contacts,
+  actions,
+  footer,
+  children,
+  className,
+  relationshipHealthLabel,
+  engagementLabel,
+  nextStep,
+  ...props
+}: CRMContactPanelProps) {
+  const contactItems = contacts ?? items ?? [];
+  const contactsHeadingId = React.useId();
+  const signalsHeadingId = React.useId();
+  const tone = healthTone(status);
+  const health = relationshipHealthLabel ?? healthLabel(status);
+  const engagement =
+    engagementLabel ??
+    `${contactItems.length} contact${contactItems.length === 1 ? "" : "s"} mapped`;
+  const nextActivity = nextStep ?? "Review next activity";
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="CRMContactPanel"
+      title={title}
+      description={description}
+      status={status}
+      metadata={metadata}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-crm-contact-panel", className].filter(Boolean).join(" ")}
+    >
+      <div className="eth-domain-crm-contact-panel__body">
+        <section
+          className="eth-domain-crm-contact-panel__contacts"
+          aria-labelledby={contactsHeadingId}
+        >
+          <div className="eth-domain-crm-contact-panel__section-header">
+            <div>
+              <span>Relationship map</span>
+              <h3 id={contactsHeadingId}>Key contacts</h3>
+            </div>
+            <strong>{engagement}</strong>
+          </div>
+
+          {contactItems.length ? (
+            <div className="eth-domain-crm-contact-panel__contact-list" role="list">
+              {contactItems.map((item) => (
+                <article
+                  key={item.id}
+                  className="eth-domain-crm-contact-panel__contact"
+                  role="listitem"
+                >
+                  <span className="eth-domain-crm-contact-panel__avatar" aria-hidden="true">
+                    {getContactInitials(item.label)}
+                  </span>
+                  <div className="eth-domain-crm-contact-panel__contact-main">
+                    <strong>{item.href ? <a href={item.href}>{item.label}</a> : item.label}</strong>
+                    {item.description ? <p>{item.description}</p> : null}
+                    {item.meta ? (
+                      <span className="eth-domain-crm-contact-panel__contact-meta">
+                        {item.meta}
+                      </span>
+                    ) : null}
+                  </div>
+                  {item.status || item.actions?.length ? (
+                    <div className="eth-domain-crm-contact-panel__contact-aside">
+                      {item.status ? (
+                        <StatusDot status={item.status} label={statusLabel(item.status)} />
+                      ) : null}
+                      <CRMContactActions actions={item.actions} />
+                    </div>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          ) : (
+            <p className="eth-domain-crm-contact-panel__empty">No contacts linked.</p>
+          )}
+        </section>
+
+        <aside className="eth-domain-crm-contact-panel__signals" aria-labelledby={signalsHeadingId}>
+          <div className="eth-domain-crm-contact-panel__section-header">
+            <div>
+              <span>Account signals</span>
+              <h3 id={signalsHeadingId}>Relationship health</h3>
+            </div>
+          </div>
+          <div className="eth-domain-crm-contact-panel__signal-list">
+            <div className="eth-domain-crm-contact-panel__signal" data-tone={tone}>
+              <span>Health</span>
+              <strong>{health}</strong>
+            </div>
+            <div className="eth-domain-crm-contact-panel__signal">
+              <span>Coverage</span>
+              <strong>{engagement}</strong>
+            </div>
+            <div className="eth-domain-crm-contact-panel__signal">
+              <span>Next step</span>
+              <strong>{nextActivity}</strong>
+            </div>
+          </div>
+        </aside>
+      </div>
+      {children}
+    </Surface>
+  );
+}
+
+export function SupportTicketQueue({
+  title = "Support queue",
+  description,
+  status,
+  metadata,
+  items,
+  tickets,
+  actions,
+  footer,
+  children,
+  className,
+  ...props
+}: SupportTicketQueueProps) {
+  const ticketItems = tickets ?? items ?? [];
+  const queueId = React.useId().replace(/:/g, "");
+  const blockedCount = ticketItems.filter((item) =>
+    ["blocked", "failed", "approval-required"].includes(item.status ?? "")
+  ).length;
+  const runningCount = ticketItems.filter((item) =>
+    ["running", "in-progress"].includes(item.status ?? "")
+  ).length;
+  const nextSla =
+    textFromNode(
+      ticketItems.find((item) => item.status === "blocked")?.description ??
+        ticketItems[0]?.description
+    ) || "No active SLA";
+
+  const summary =
+    metadata ??
+    [
+      { label: "Open tickets", value: ticketItems.length.toLocaleString() },
+      { label: "Blocked", value: blockedCount.toLocaleString() },
+      { label: "In progress", value: runningCount.toLocaleString() },
+      { label: "Next SLA", value: nextSla }
+    ];
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="SupportTicketQueue"
+      title={title}
+      description={description}
+      status={status}
+      metadata={summary}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-support-ticket-queue", className].filter(Boolean).join(" ")}
+    >
+      {ticketItems.length ? (
+        <div
+          className="eth-domain-support-ticket-queue__list"
+          role="list"
+          aria-label="Support tickets"
+        >
+          {ticketItems.map((item) => {
+            const { priority, label } = splitTicketPriority(item.label);
+            const ticketId = `${queueId}-${safeDomId(item.id)}`;
+            const labelId = `${ticketId}-label`;
+            const slaId = item.description ? `${ticketId}-sla` : undefined;
+
+            return (
+              <article
+                key={item.id}
+                className="eth-domain-support-ticket-queue__row"
+                data-status={item.status}
+                role="listitem"
+                aria-labelledby={labelId}
+                aria-describedby={slaId}
+              >
+                <div className="eth-domain-support-ticket-queue__ticket">
+                  {priority ? (
+                    <span
+                      className="eth-domain-support-ticket-queue__priority"
+                      data-priority={priority}
+                    >
+                      {priority}
+                    </span>
+                  ) : null}
+                  <strong id={labelId}>
+                    {item.href ? <a href={item.href}>{label}</a> : label}
+                  </strong>
+                </div>
+
+                {item.description ? (
+                  <div
+                    className={[
+                      "eth-domain-support-ticket-queue__field",
+                      "eth-domain-support-ticket-queue__field--sla"
+                    ].join(" ")}
+                    id={slaId}
+                  >
+                    <span>SLA</span>
+                    <strong>{item.description}</strong>
+                  </div>
+                ) : null}
+
+                {item.meta ? (
+                  <div
+                    className={[
+                      "eth-domain-support-ticket-queue__field",
+                      "eth-domain-support-ticket-queue__field--owner"
+                    ].join(" ")}
+                  >
+                    <span>Owner</span>
+                    <strong>{item.meta}</strong>
+                  </div>
+                ) : null}
+
+                <div className="eth-domain-support-ticket-queue__status">
+                  {item.status ? (
+                    <StatusDot status={item.status} label={statusLabel(item.status)} />
+                  ) : null}
+                  <SupportTicketActions actions={item.actions} />
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="eth-domain-support-ticket-queue__empty">No active support tickets.</p>
+      )}
+      {children}
+    </Surface>
+  );
+}
+
+export interface ApprovalWorkflowStep extends Record<string, unknown> {
+  id: string;
+  label: string;
+  approver?: string;
+  condition?: string;
+  required?: boolean;
+  status?: EthOperationalStatus;
+}
+
+export interface ComplianceChecklistItem extends EthListItem {
+  controlId?: React.ReactNode;
+  evidence?: React.ReactNode;
+  evidenceHref?: string;
+  evidenceLabel?: React.ReactNode;
+  owner?: React.ReactNode;
+  dueDate?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+  required?: boolean;
+}
+
+export interface ComplianceChecklistProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: ComplianceChecklistItem[];
+}
+
+export type RiskMatrixImpact = "low" | "medium" | "high" | "critical";
+export type RiskMatrixProbability = "low" | "medium" | "high";
+export type RiskMatrixSeverity = "low" | "medium" | "high" | "critical";
+export type RiskMatrixView = "matrix" | "register";
+
+export interface RiskMatrixItem extends EthListItem {
+  impact?: RiskMatrixImpact;
+  probability?: RiskMatrixProbability;
+  severity?: RiskMatrixSeverity;
+  owner?: React.ReactNode;
+  mitigation?: React.ReactNode;
+  dueDate?: React.ReactNode;
+  score?: React.ReactNode;
+}
+
+export interface RiskMatrixProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: RiskMatrixItem[];
+  selectedItemId?: string;
+  view?: RiskMatrixView;
+  reviewCadence?: React.ReactNode;
+  onViewChange?: (view: RiskMatrixView) => void;
+}
+
+export interface InvoiceLineItem extends EthListItem {
+  quantity?: React.ReactNode;
+  rate?: React.ReactNode;
+  amount?: React.ReactNode;
+}
+
+export interface InvoicePaymentMilestone extends EthListItem {
+  dueDate?: React.ReactNode;
+  amount?: React.ReactNode;
+}
+
+export interface InvoiceViewerProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: InvoiceLineItem[];
+  customer?: React.ReactNode;
+  dueDate?: React.ReactNode;
+  terms?: React.ReactNode;
+  owner?: React.ReactNode;
+  subtotal?: React.ReactNode;
+  tax?: React.ReactNode;
+  total?: React.ReactNode;
+  amountDue?: React.ReactNode;
+  payments?: InvoicePaymentMilestone[];
+}
+
+export interface OrderFulfillmentItem extends EthListItem {
+  owner?: React.ReactNode;
+  timestamp?: React.ReactNode;
+  location?: React.ReactNode;
+  quantity?: React.ReactNode;
+  exception?: React.ReactNode;
+}
+
+export interface OrderManagementPanelProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: OrderFulfillmentItem[];
+  customer?: React.ReactNode;
+  orderTotal?: React.ReactNode;
+  paymentTerms?: React.ReactNode;
+  shipTo?: React.ReactNode;
+  carrier?: React.ReactNode;
+  eta?: React.ReactNode;
+  fulfillmentOwner?: React.ReactNode;
+}
+
+export interface KnowledgeBaseArticleSection {
+  id: string;
+  title: React.ReactNode;
+  body: React.ReactNode;
+  status?: EthOperationalStatus;
+}
+
+export interface KnowledgeBaseRelatedArticle extends EthListItem {
+  type?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+}
+
+export interface KnowledgeBaseCitation {
+  id: string;
+  label: React.ReactNode;
+  source?: React.ReactNode;
+  excerpt?: React.ReactNode;
+  href?: string;
+  status?: EthOperationalStatus;
+}
+
+export interface KnowledgeBaseArticleViewerProps extends Omit<SurfaceComponentProps, "items"> {
+  body?: React.ReactNode;
+  sections?: KnowledgeBaseArticleSection[];
+  relatedArticles?: KnowledgeBaseRelatedArticle[];
+  citations?: KnowledgeBaseCitation[];
+  items?: KnowledgeBaseRelatedArticle[];
+  articleStatusLabel?: React.ReactNode;
+}
+
+export interface DataImportWizardStep extends EthListItem {
+  owner?: React.ReactNode;
+}
+
+export interface DataImportFieldMapping {
+  id: string;
+  sourceField: React.ReactNode;
+  targetField: React.ReactNode;
+  sample?: React.ReactNode;
+  status?: EthOperationalStatus;
+  required?: boolean;
+}
+
+export interface DataImportValidationIssue {
+  id: string;
+  field: React.ReactNode;
+  message: React.ReactNode;
+  count?: React.ReactNode;
+  status?: EthOperationalStatus;
+}
+
+export interface DataImportWizardProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: DataImportWizardStep[];
+  fileName?: React.ReactNode;
+  sourceLabel?: React.ReactNode;
+  rowCount?: React.ReactNode;
+  columnCount?: React.ReactNode;
+  mappingCount?: React.ReactNode;
+  validationSummary?: React.ReactNode;
+  mappings?: DataImportFieldMapping[];
+  validationIssues?: DataImportValidationIssue[];
+}
+
+export interface MappingConfigurationItem extends EthListItem {
+  sourceField?: React.ReactNode;
+  targetField?: React.ReactNode;
+  sourceObject?: React.ReactNode;
+  targetObject?: React.ReactNode;
+  sourceType?: React.ReactNode;
+  targetType?: React.ReactNode;
+  sample?: React.ReactNode;
+  transform?: React.ReactNode;
+  required?: boolean;
+  confidence?: React.ReactNode;
+}
+
+export interface MappingConfigurationIssue {
+  id: string;
+  field: React.ReactNode;
+  message: React.ReactNode;
+  status?: EthOperationalStatus;
+  count?: React.ReactNode;
+}
+
+export interface MappingConfigurationWizardProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: MappingConfigurationItem[];
+  sourceObject?: React.ReactNode;
+  targetObject?: React.ReactNode;
+  mappingCount?: React.ReactNode;
+  validationSummary?: React.ReactNode;
+  targetOptions?: Array<{ value: string; label: string; disabled?: boolean }>;
+  validationIssues?: MappingConfigurationIssue[];
+  onMappingChange?: (id: string, targetField: string) => void;
+  onAutoMap?: () => void;
+  onValidate?: () => void;
+  onSubmit?: () => void;
+}
+
+export interface ReportBuilderSection extends EthListItem {
+  owner?: React.ReactNode;
+  source?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+  required?: boolean;
+}
+
+export interface ReportBuilderProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: ReportBuilderSection[];
+  formatLabel?: React.ReactNode;
+  owner?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+  onAddSection?: () => void;
+  onExportPdf?: () => void;
+  onExportCsv?: () => void;
+}
+
+export interface InventoryTableItem extends EthListItem {
+  sku?: React.ReactNode;
+  location?: React.ReactNode;
+  onHand?: React.ReactNode;
+  available?: React.ReactNode;
+  allocated?: React.ReactNode;
+  reorderPoint?: React.ReactNode;
+  incoming?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+}
+
+export interface InventoryTableProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: InventoryTableItem[];
+}
+
+export interface ApprovalWorkflowEditorProps extends Omit<
+  SurfaceComponentProps,
+  "children" | "items" | "metadata" | "onChange"
+> {
+  steps?: ApprovalWorkflowStep[];
+  approverOptions?: Array<{ value: string; label: string; disabled?: boolean }>;
+  mode?: ApprovalWorkflowMode;
+  onChange?: (steps: ApprovalWorkflowStep[]) => void;
+  onModeChange?: (mode: ApprovalWorkflowMode) => void;
+}
+
+export type ProcessDesignerNodeKind = "start" | "task" | "decision" | "end";
+
+export interface ProcessDesignerItem extends EthListItem {
+  kind?: ProcessDesignerNodeKind;
+  owner?: React.ReactNode;
+  lane?: React.ReactNode;
+  duration?: React.ReactNode;
+  x?: number;
+  y?: number;
+}
+
+export interface ProcessDesignerConnection {
+  from: string;
+  to: string;
+  label?: React.ReactNode;
+  status?: EthOperationalStatus;
+}
+
+export interface ProcessDesignerValidationIssue {
+  id: string;
+  target?: React.ReactNode;
+  message: React.ReactNode;
+  status?: EthOperationalStatus;
+}
+
+export interface ProcessDesignerProps extends Omit<SurfaceComponentProps, "items"> {
+  items?: ProcessDesignerItem[];
+  connections?: ProcessDesignerConnection[];
+  validationIssues?: ProcessDesignerValidationIssue[];
+  selectedItemId?: string;
+  onAddStep?: () => void;
+  onValidate?: () => void;
+}
+
+const defaultApproverOptions = [
+  { value: "", label: "Select approver", disabled: true },
+  { value: "team-lead", label: "Team lead" },
+  { value: "finance-ops", label: "Finance operations" },
+  { value: "legal-review", label: "Legal review" },
+  { value: "security-office", label: "Security office" },
+  { value: "executive-sponsor", label: "Executive sponsor" }
+];
+
+const defaultApprovalSteps: ApprovalWorkflowStep[] = [
+  {
+    id: "manager-review",
+    label: "Manager review",
+    approver: "team-lead",
+    condition: "Spend is above requester limit",
+    required: true,
+    status: "completed"
+  },
+  {
+    id: "finance-check",
+    label: "Finance control check",
+    approver: "finance-ops",
+    condition: "Amount is greater than $10,000",
+    required: true,
+    status: "pending-approval"
+  },
+  {
+    id: "legal-signoff",
+    label: "Legal sign-off",
+    approver: "legal-review",
+    condition: "Vendor terms changed",
+    required: false,
+    status: "queued"
+  }
+];
+
+const modeOptions: Array<{ value: ApprovalWorkflowMode; label: string }> = [
+  { value: "sequential", label: "Sequential route" },
+  { value: "parallel", label: "Parallel quorum" },
+  { value: "conditional", label: "Conditional branch" }
+];
+
+const defaultProcessItems: ProcessDesignerItem[] = [
+  {
+    id: "start",
+    label: "HRIS trigger",
+    description: "New employee record received from Workday.",
+    status: "completed",
+    kind: "start",
+    owner: "People ops",
+    lane: "Intake",
+    duration: "Instant",
+    x: 96,
+    y: 170
+  },
+  {
+    id: "profile",
+    label: "Collect profile",
+    description: "Manager confirms role, location, and start date.",
+    status: "completed",
+    kind: "task",
+    owner: "Hiring manager",
+    lane: "Intake",
+    duration: "4h SLA",
+    x: 278,
+    y: 170
+  },
+  {
+    id: "approval",
+    label: "Approval required?",
+    description: "Route privileged roles through security approval.",
+    status: "warning",
+    kind: "decision",
+    owner: "People systems",
+    lane: "Policy",
+    duration: "Conditional",
+    x: 460,
+    y: 170
+  },
+  {
+    id: "security",
+    label: "Security review",
+    description: "Validate device, access groups, and background check.",
+    status: "pending-approval",
+    kind: "task",
+    owner: "Security office",
+    lane: "Controls",
+    duration: "24h SLA",
+    x: 642,
+    y: 92
+  },
+  {
+    id: "provision",
+    label: "Provision access",
+    description: "Create accounts and assign application entitlements.",
+    status: "in-progress",
+    kind: "task",
+    owner: "IT operations",
+    lane: "Fulfillment",
+    duration: "2h SLA",
+    x: 642,
+    y: 248
+  },
+  {
+    id: "complete",
+    label: "Day-one ready",
+    description: "Welcome package, access, and training tasks are complete.",
+    status: "queued",
+    kind: "end",
+    owner: "People ops",
+    lane: "Fulfillment",
+    duration: "Start date",
+    x: 824,
+    y: 248
+  }
+];
+
+const defaultProcessConnections: ProcessDesignerConnection[] = [
+  { from: "start", to: "profile" },
+  { from: "profile", to: "approval" },
+  { from: "approval", to: "security", label: "Needs review", status: "warning" },
+  { from: "approval", to: "provision", label: "Auto approve" },
+  { from: "security", to: "provision", label: "Approved" },
+  { from: "provision", to: "complete" }
+];
+
+const defaultProcessValidationIssues: ProcessDesignerValidationIssue[] = [
+  {
+    id: "backup-owner",
+    target: "Approval required?",
+    message: "Privileged access branch needs a backup owner.",
+    status: "warning"
+  },
+  {
+    id: "sla-policy",
+    target: "Security review",
+    message: "Security review SLA is waiting on policy confirmation.",
+    status: "pending-approval"
+  }
+];
+
+function nextApprovalStepId(steps: ApprovalWorkflowStep[]) {
+  let index = steps.length + 1;
+  let id = `approval-step-${index}`;
+  while (steps.some((step) => step.id === id)) {
+    index += 1;
+    id = `approval-step-${index}`;
+  }
+  return id;
+}
+
+function formatApprovalStatus(status: EthOperationalStatus | undefined, required?: boolean) {
+  if (status === "completed") return "Completed";
+  if (status === "pending-approval") return "Pending";
+  if (status === "blocked" || status === "failed") return "Blocked";
+  if (status === "queued") return "Queued";
+  return required ? "Required" : "Optional";
+}
+
+function isComplianceComplete(status: EthOperationalStatus | undefined) {
+  return status === "completed" || status === "succeeded" || status === "synced";
+}
+
+function needsComplianceAttention(status: EthOperationalStatus | undefined) {
+  return (
+    status === "approval-required" ||
+    status === "blocked" ||
+    status === "failed" ||
+    status === "pending-approval" ||
+    status === "stale" ||
+    status === "warning"
+  );
+}
+
+function deriveComplianceStatus(
+  items: ComplianceChecklistItem[]
+): EthOperationalStatus | undefined {
+  if (!items.length) return undefined;
+  if (items.some((item) => item.status === "blocked" || item.status === "failed")) {
+    return "blocked";
+  }
+  if (items.some((item) => item.status === "approval-required")) {
+    return "approval-required";
+  }
+  if (items.every((item) => isComplianceComplete(item.status))) {
+    return "completed";
+  }
+  return "in-progress";
+}
+
+function hasComplianceEvidence(item: ComplianceChecklistItem) {
+  return Boolean(item.evidence ?? item.evidenceLabel ?? item.evidenceHref ?? item.meta);
+}
+
+function hasDisplayValue(value: React.ReactNode) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+function isReportSectionIncluded(status: EthOperationalStatus | undefined) {
+  return (
+    status !== "inactive" &&
+    status !== "not-started" &&
+    status !== "blocked" &&
+    status !== "failed"
+  );
+}
+
+function needsReportSectionAttention(status: EthOperationalStatus | undefined) {
+  return (
+    status === "approval-required" ||
+    status === "blocked" ||
+    status === "failed" ||
+    status === "pending-approval" ||
+    status === "stale" ||
+    status === "warning"
+  );
+}
+
+function deriveReportBuilderStatus(items: ReportBuilderSection[]): EthOperationalStatus {
+  if (!items.length) return "not-started";
+  if (items.some((item) => item.status === "blocked" || item.status === "failed")) {
+    return "blocked";
+  }
+  if (items.some((item) => needsReportSectionAttention(item.status))) return "warning";
+  if (items.some((item) => item.status === "in-progress" || item.status === "running")) {
+    return "in-progress";
+  }
+  return "active";
+}
+
+function reportBuilderReadinessLabel(status: EthOperationalStatus, attentionCount: number) {
+  if (attentionCount) {
+    return `${attentionCount} ${attentionCount === 1 ? "issue" : "issues"} to resolve`;
+  }
+  if (status === "not-started") return "Not started";
+  if (status === "in-progress" || status === "running") return "Draft in progress";
+  if (status === "blocked" || status === "failed") return "Blocked";
+  return "Ready";
+}
+
+function reportSectionMeta(item: ReportBuilderSection, index: number) {
+  return item.meta ?? item.updatedAt ?? item.source ?? `Section ${index + 1}`;
+}
+
+const riskImpactLevels: RiskMatrixImpact[] = ["critical", "high", "medium", "low"];
+const riskProbabilityLevels: RiskMatrixProbability[] = ["low", "medium", "high"];
+const riskImpactRank: Record<RiskMatrixImpact, number> = {
+  low: 1,
+  medium: 2,
+  high: 3,
+  critical: 4
+};
+const riskProbabilityRank: Record<RiskMatrixProbability, number> = {
+  low: 1,
+  medium: 2,
+  high: 3
+};
+const riskSeverityRank: Record<RiskMatrixSeverity, number> = {
+  low: 1,
+  medium: 2,
+  high: 3,
+  critical: 4
+};
+const riskImpactLabels: Record<RiskMatrixImpact, string> = {
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  critical: "Critical"
+};
+const riskProbabilityLabels: Record<RiskMatrixProbability, string> = {
+  low: "Low",
+  medium: "Medium",
+  high: "High"
+};
+
+interface ResolvedRiskMatrixItem extends RiskMatrixItem {
+  resolvedImpact: RiskMatrixImpact;
+  resolvedProbability: RiskMatrixProbability;
+  resolvedSeverity: RiskMatrixSeverity;
+  resolvedScore: number;
+}
+
+function isRiskImpact(value: string): value is RiskMatrixImpact {
+  return value === "low" || value === "medium" || value === "high" || value === "critical";
+}
+
+function isRiskProbability(value: string): value is RiskMatrixProbability {
+  return value === "low" || value === "medium" || value === "high";
+}
+
+function normalizeRiskImpact(value: unknown): RiskMatrixImpact | undefined {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.trim().toLowerCase();
+  return isRiskImpact(normalized) ? normalized : undefined;
+}
+
+function normalizeRiskProbability(value: unknown): RiskMatrixProbability | undefined {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.trim().toLowerCase();
+  return isRiskProbability(normalized) ? normalized : undefined;
+}
+
+function riskFieldFromDescription(item: RiskMatrixItem, field: "impact" | "probability") {
+  const text = textFromNode(item.description);
+  const match = text.match(new RegExp(`${field}\\s*[:=]\\s*(critical|high|medium|low)`, "i"));
+  return match?.[1];
+}
+
+function fallbackImpactForStatus(status: EthOperationalStatus | undefined): RiskMatrixImpact {
+  if (status === "blocked" || status === "failed" || status === "approval-required") {
+    return "critical";
+  }
+  if (status === "warning" || status === "stale" || status === "pending-approval") {
+    return "high";
+  }
+  if (status === "completed" || status === "succeeded" || status === "synced") return "low";
+  return "medium";
+}
+
+function riskSeverityFromScore(
+  impact: RiskMatrixImpact,
+  probability: RiskMatrixProbability
+): RiskMatrixSeverity {
+  const score = riskImpactRank[impact] * riskProbabilityRank[probability];
+  if (score >= 9) return "critical";
+  if (score >= 6) return "high";
+  if (score >= 3) return "medium";
+  return "low";
+}
+
+function resolveRiskMatrixItem(item: RiskMatrixItem): ResolvedRiskMatrixItem {
+  const resolvedImpact =
+    normalizeRiskImpact(item.impact) ??
+    normalizeRiskImpact(riskFieldFromDescription(item, "impact")) ??
+    fallbackImpactForStatus(item.status);
+  const resolvedProbability =
+    normalizeRiskProbability(item.probability) ??
+    normalizeRiskProbability(riskFieldFromDescription(item, "probability")) ??
+    "medium";
+  const resolvedSeverity =
+    item.severity ??
+    (item.status === "blocked" || item.status === "failed"
+      ? "critical"
+      : riskSeverityFromScore(resolvedImpact, resolvedProbability));
+
+  return {
+    ...item,
+    resolvedImpact,
+    resolvedProbability,
+    resolvedSeverity,
+    resolvedScore: riskImpactRank[resolvedImpact] * riskProbabilityRank[resolvedProbability]
+  };
+}
+
+function compareRiskPriority(a: ResolvedRiskMatrixItem, b: ResolvedRiskMatrixItem) {
+  return (
+    riskSeverityRank[b.resolvedSeverity] - riskSeverityRank[a.resolvedSeverity] ||
+    b.resolvedScore - a.resolvedScore ||
+    riskImpactRank[b.resolvedImpact] - riskImpactRank[a.resolvedImpact] ||
+    riskProbabilityRank[b.resolvedProbability] - riskProbabilityRank[a.resolvedProbability]
+  );
+}
+
+function deriveRiskMatrixStatus(items: ResolvedRiskMatrixItem[]): EthOperationalStatus | undefined {
+  if (!items.length) return undefined;
+  if (items.some((item) => item.resolvedSeverity === "critical")) return "blocked";
+  if (items.some((item) => item.resolvedSeverity === "high")) return "warning";
+  if (items.some((item) => item.resolvedSeverity === "medium")) return "in-progress";
+  return "active";
+}
+
+function deriveRiskMatrixSurfaceSeverity(items: ResolvedRiskMatrixItem[]) {
+  if (items.some((item) => item.resolvedSeverity === "critical")) return "danger" as const;
+  if (items.some((item) => item.resolvedSeverity === "high")) return "warning" as const;
+  return undefined;
+}
+
+function riskCountLabel(count: number) {
+  return `${count} risk${count === 1 ? "" : "s"}`;
+}
+
+function isCompletedProcessStep(status: EthOperationalStatus | undefined) {
+  return status === "completed" || status === "succeeded" || status === "synced";
+}
+
+function processStepKind(
+  item: ProcessDesignerItem,
+  index: number,
+  total: number
+): ProcessDesignerNodeKind {
+  if (item.kind) return item.kind;
+  if (index === 0) return "start";
+  if (index === total - 1) return "end";
+  return "task";
+}
+
+function deriveProcessStatus(
+  items: ProcessDesignerItem[],
+  validationIssues: ProcessDesignerValidationIssue[]
+): EthOperationalStatus | undefined {
+  if (validationIssues.some((issue) => issue.status === "blocked" || issue.status === "failed")) {
+    return "blocked";
+  }
+  if (
+    validationIssues.some(
+      (issue) =>
+        issue.status === "warning" ||
+        issue.status === "pending-approval" ||
+        issue.status === "approval-required"
+    )
+  ) {
+    return "warning";
+  }
+  if (!items.length) return undefined;
+  if (items.some((item) => item.status === "blocked" || item.status === "failed")) {
+    return "blocked";
+  }
+  if (items.every((item) => isCompletedProcessStep(item.status))) {
+    return "completed";
+  }
+  if (
+    items.some(
+      (item) =>
+        item.status === "active" || item.status === "in-progress" || item.status === "running"
+    )
+  ) {
+    return "in-progress";
+  }
+  return "queued";
+}
+
+function sequentialProcessConnections(items: ProcessDesignerItem[]): ProcessDesignerConnection[] {
+  return items.slice(1).map((item, index) => ({ from: items[index].id, to: item.id }));
+}
+
+function processNodePoint(item: ProcessDesignerItem, index: number) {
+  return {
+    x: item.x ?? 110 + (index % 4) * 210,
+    y: item.y ?? 140 + Math.floor(index / 4) * 140
+  };
+}
+
+function graphLabelLines(value: React.ReactNode, fallback: string) {
+  const label = textFromNode(value).trim() || fallback;
+  if (label.length <= 18) return [label];
+
+  const lines: string[] = [];
+  let current = "";
+  for (const word of label.split(/\s+/)) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length > 18 && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = next;
+    }
+  }
+  if (current) lines.push(current);
+
+  if (lines.length <= 2) return lines;
+  return [lines[0], `${lines.slice(1).join(" ").slice(0, 16)}...`];
+}
+
+const defaultOrderFulfillmentItems: OrderFulfillmentItem[] = [
+  {
+    id: "received",
+    label: "Order received",
+    description: "Purchase order matched against contract pricing and customer terms.",
+    owner: "Sales operations",
+    timestamp: "May 29, 08:12",
+    status: "completed"
+  },
+  {
+    id: "payment",
+    label: "Payment terms cleared",
+    description: "Net 30 credit check passed; release hold removed by finance.",
+    owner: "Finance operations",
+    timestamp: "May 29, 09:05",
+    status: "completed"
+  },
+  {
+    id: "pick-pack",
+    label: "Pick and pack",
+    description: "Warehouse B is staging the final cartons for carrier handoff.",
+    owner: "Fulfillment team",
+    location: "Warehouse B",
+    quantity: "18 / 20 cartons",
+    timestamp: "May 29, 14:40",
+    status: "in-progress"
+  },
+  {
+    id: "carrier",
+    label: "Carrier handoff",
+    description: "FedEx pickup booked; ASN will post when scan is received.",
+    owner: "FedEx Ground",
+    location: "Dock 4",
+    timestamp: "May 29, 17:00",
+    status: "queued"
+  }
+];
+
+function isOrderStepComplete(status: EthOperationalStatus | undefined) {
+  return status === "completed" || status === "succeeded" || status === "synced";
+}
+
+function isOrderStepCurrent(status: EthOperationalStatus | undefined) {
+  return status === "active" || status === "in-progress" || status === "running";
+}
+
+function needsOrderAttention(item: OrderFulfillmentItem) {
+  return (
+    hasDisplayValue(item.exception) ||
+    item.status === "approval-required" ||
+    item.status === "blocked" ||
+    item.status === "failed" ||
+    item.status === "pending-approval" ||
+    item.status === "stale" ||
+    item.status === "warning"
+  );
+}
+
+function deriveOrderStatus(items: OrderFulfillmentItem[]): EthOperationalStatus | undefined {
+  if (!items.length) return undefined;
+  if (items.some((item) => item.status === "blocked" || item.status === "failed")) {
+    return "blocked";
+  }
+  if (items.some((item) => item.status === "approval-required")) {
+    return "approval-required";
+  }
+  if (items.every((item) => isOrderStepComplete(item.status))) return "completed";
+  if (items.some((item) => isOrderStepCurrent(item.status))) return "in-progress";
+  if (items.some((item) => item.status === "pending-approval" || item.status === "warning")) {
+    return "pending-approval";
+  }
+  return "queued";
+}
+
+function currentOrderStepIndex(items: OrderFulfillmentItem[]) {
+  const activeIndex = items.findIndex((item) => isOrderStepCurrent(item.status));
+  if (activeIndex >= 0) return activeIndex;
+
+  const nextIndex = items.findIndex((item) => !isOrderStepComplete(item.status));
+  return nextIndex >= 0 ? nextIndex : Math.max(items.length - 1, 0);
+}
+
+function OrderFulfillmentActions({ actions }: { actions?: EthAction[] }) {
+  if (!actions?.length) return null;
+
+  return (
+    <div className="eth-domain-order-management__step-actions">
+      {actions.slice(0, 2).map((action) =>
+        action.href ? (
+          <LinkButton
+            key={action.id}
+            href={action.disabled ? undefined : action.href}
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            aria-disabled={action.disabled ? true : undefined}
+            tabIndex={action.disabled ? -1 : undefined}
+          >
+            {action.label}
+          </LinkButton>
+        ) : (
+          <Button
+            key={action.id}
+            type="button"
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            disabled={action.disabled}
+            onClick={action.onSelect}
+          >
+            {action.label}
+          </Button>
+        )
+      )}
+    </div>
+  );
+}
+
+function parseInventoryNumber(value: React.ReactNode): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string") return null;
+
+  const normalized = value.replace(/,/g, "").trim();
+  if (!/^-?\d+(\.\d+)?$/.test(normalized)) return null;
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function formatInventoryValue(value: React.ReactNode) {
+  if (!hasDisplayValue(value)) return "--";
+  if (typeof value === "number") return new Intl.NumberFormat("en-US").format(value);
+  return value;
+}
+
+function parseInventoryStockDescription(description: React.ReactNode) {
+  const text = textFromNode(description);
+  const match = text.match(
+    /\bOn hand:\s*([0-9,]+(?:\.\d+)?)\s*(?:[^A-Za-z0-9]+\s*)?Reorder:\s*([0-9,]+(?:\.\d+)?)/i
+  );
+
+  if (!match) return null;
+  return {
+    onHand: Number(match[1].replace(/,/g, "")),
+    reorderPoint: Number(match[2].replace(/,/g, ""))
+  };
+}
+
+function inventoryStatusFromLevels(
+  item: InventoryTableItem,
+  onHandNumber: number | null,
+  reorderNumber: number | null
+): EthOperationalStatus {
+  if (item.status) return item.status;
+  if (onHandNumber !== null && onHandNumber <= 0) return "failed";
+  if (onHandNumber !== null && reorderNumber !== null && onHandNumber <= reorderNumber) {
+    return "warning";
+  }
+  return "active";
+}
+
+function inventoryStatusLabel(status: EthOperationalStatus) {
+  if (status === "failed" || status === "blocked") return "Stockout";
+  if (status === "warning" || status === "stale") return "Reorder";
+  if (status === "in-progress" || status === "running") return "Replenishing";
+  if (status === "queued" || status === "not-started") return "Pending count";
+  if (
+    status === "active" ||
+    status === "completed" ||
+    status === "succeeded" ||
+    status === "synced"
+  ) {
+    return "In stock";
+  }
+  return statusLabel(status);
+}
+
+interface InventoryTableRow {
+  item: InventoryTableItem;
+  parsedStockDescription: boolean;
+  onHand: React.ReactNode;
+  onHandNumber: number | null;
+  reorderPoint: React.ReactNode;
+  reorderNumber: number | null;
+  available: React.ReactNode;
+  status: EthOperationalStatus;
+}
+
+function normalizeInventoryRow(item: InventoryTableItem): InventoryTableRow {
+  const parsedStockDescription = parseInventoryStockDescription(item.description);
+  const onHand = item.onHand ?? parsedStockDescription?.onHand;
+  const reorderPoint = item.reorderPoint ?? parsedStockDescription?.reorderPoint;
+  const onHandNumber = parseInventoryNumber(onHand);
+  const reorderNumber = parseInventoryNumber(reorderPoint);
+  const allocatedNumber = parseInventoryNumber(item.allocated);
+  const available =
+    item.available ??
+    (onHandNumber !== null && allocatedNumber !== null
+      ? onHandNumber - allocatedNumber
+      : undefined);
+  const status = inventoryStatusFromLevels(item, onHandNumber, reorderNumber);
+
+  return {
+    item,
+    parsedStockDescription: Boolean(parsedStockDescription),
+    onHand,
+    onHandNumber,
+    reorderPoint,
+    reorderNumber,
+    available,
+    status
+  };
+}
+
+function inventoryLevelPercent(row: InventoryTableRow) {
+  if (row.onHandNumber === null || row.reorderNumber === null) return 0;
+
+  const capacity = Math.max(row.reorderNumber * 2, row.onHandNumber, 1);
+  return Math.max(0, Math.min(100, Math.round((row.onHandNumber / capacity) * 100)));
+}
+
+function isInventoryReorderRow(row: InventoryTableRow) {
+  if (row.onHandNumber !== null && row.reorderNumber !== null) {
+    return row.onHandNumber <= row.reorderNumber;
+  }
+  return row.status === "warning" || row.status === "failed" || row.status === "blocked";
+}
+
+function isInventoryStockoutRow(row: InventoryTableRow) {
+  if (row.onHandNumber !== null) return row.onHandNumber <= 0;
+  return row.status === "failed" || row.status === "blocked";
+}
+
+export function InventoryTable({
+  title = "Inventory",
+  description = "SKU availability, reorder thresholds, and fulfillment readiness.",
+  items = [],
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  ...props
+}: InventoryTableProps) {
+  const rows = items.map(normalizeInventoryRow);
+  const totalOnHand = rows.reduce(
+    (sum, row) => (row.onHandNumber === null ? sum : sum + row.onHandNumber),
+    0
+  );
+  const hasOnHandTotal = rows.some((row) => row.onHandNumber !== null);
+  const reorderCount = rows.filter(isInventoryReorderRow).length;
+  const stockoutCount = rows.filter(isInventoryStockoutRow).length;
+  const computedMetadata =
+    metadata ??
+    (rows.length
+      ? [
+          { label: "SKUs", value: rows.length },
+          { label: "Below reorder", value: reorderCount },
+          { label: "Stockouts", value: stockoutCount },
+          ...(hasOnHandTotal
+            ? [{ label: "On hand", value: new Intl.NumberFormat("en-US").format(totalOnHand) }]
+            : [])
+        ]
+      : undefined);
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="InventoryTable"
+      title={title}
+      description={description}
+      metadata={computedMetadata}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-inventory-table", className].filter(Boolean).join(" ")}
+    >
+      {rows.length ? (
+        <div className="eth-domain-inventory-table__table-wrap">
+          <table className="eth-domain-inventory-table__table">
+            <caption className="eth-domain-inventory-table__caption">
+              Inventory stock by SKU and reorder threshold
+            </caption>
+            <colgroup>
+              <col className="eth-domain-inventory-table__sku-col" />
+              <col className="eth-domain-inventory-table__location-col" />
+              <col className="eth-domain-inventory-table__quantity-col" />
+              <col className="eth-domain-inventory-table__quantity-col" />
+              <col className="eth-domain-inventory-table__quantity-col" />
+              <col className="eth-domain-inventory-table__status-col" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th scope="col">SKU</th>
+                <th scope="col">Location</th>
+                <th scope="col">On hand</th>
+                <th scope="col">Available</th>
+                <th scope="col">Reorder point</th>
+                <th scope="col">Stock status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => {
+                const { item } = row;
+                const labelContent = item.href ? <a href={item.href}>{item.label}</a> : item.label;
+                const showDescription =
+                  hasDisplayValue(item.description) && !row.parsedStockDescription;
+                const location = item.location ?? item.meta;
+                const statusLabelText = inventoryStatusLabel(row.status);
+
+                return (
+                  <tr key={item.id} data-status={row.status}>
+                    <td>
+                      <div className="eth-domain-inventory-table__sku">
+                        <span>{item.sku ?? item.id}</span>
+                        <strong>{labelContent}</strong>
+                        {showDescription ? <p>{item.description}</p> : null}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="eth-domain-inventory-table__cell-stack">
+                        <strong>{formatInventoryValue(location)}</strong>
+                        {hasDisplayValue(item.updatedAt) ? (
+                          <span>{item.updatedAt}</span>
+                        ) : (
+                          <span>Cycle count current</span>
+                        )}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="eth-domain-inventory-table__quantity">
+                        <strong>{formatInventoryValue(row.onHand)}</strong>
+                        <span className="eth-domain-inventory-table__level" aria-hidden="true">
+                          <span
+                            className="eth-domain-inventory-table__level-fill"
+                            style={{ inlineSize: `${inventoryLevelPercent(row)}%` }}
+                          />
+                        </span>
+                      </div>
+                    </td>
+                    <td className="eth-domain-inventory-table__numeric">
+                      {formatInventoryValue(row.available)}
+                    </td>
+                    <td className="eth-domain-inventory-table__numeric">
+                      {formatInventoryValue(row.reorderPoint)}
+                    </td>
+                    <td>
+                      <div className="eth-domain-inventory-table__state">
+                        <StatusDot status={row.status} label={statusLabelText} />
+                        {hasDisplayValue(item.incoming) ? (
+                          <span>Incoming {formatInventoryValue(item.incoming)}</span>
+                        ) : null}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="eth-domain-inventory-table__empty">No inventory items configured.</div>
+      )}
+      {children}
+    </Surface>
+  );
+}
+
+export function OrderManagementPanel({
+  title = "Order",
+  description,
+  status,
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  items = defaultOrderFulfillmentItems,
+  customer,
+  orderTotal,
+  paymentTerms,
+  shipTo,
+  carrier,
+  eta,
+  fulfillmentOwner = "Fulfillment operations",
+  ...props
+}: OrderManagementPanelProps) {
+  const orderStatus = status ?? deriveOrderStatus(items) ?? "not-started";
+  const currentIndex = currentOrderStepIndex(items);
+  const currentStep = items[currentIndex];
+  const completedCount = items.filter((item) => isOrderStepComplete(item.status)).length;
+  const attentionCount = items.filter(needsOrderAttention).length;
+  const lifecycleHeadingId = React.useId();
+  const executionHeadingId = React.useId();
+  const computedMetadata =
+    metadata ??
+    [
+      {
+        label: "Fulfillment",
+        value: items.length ? `${completedCount}/${items.length} checkpoints` : undefined
+      },
+      { label: "Carrier", value: carrier },
+      { label: "ETA", value: eta },
+      {
+        label: "Exceptions",
+        value: attentionCount ? `${attentionCount} open` : "None"
+      }
+    ].filter((item) => hasDisplayValue(item.value));
+  const executionSummary = [
+    { label: "Customer", value: customer },
+    { label: "Current checkpoint", value: currentStep?.label },
+    { label: "Owner", value: currentStep?.owner ?? fulfillmentOwner },
+    { label: "Ship to", value: shipTo },
+    { label: "Payment terms", value: paymentTerms },
+    { label: "Order total", value: orderTotal }
+  ].filter((item) => hasDisplayValue(item.value));
+  const activeException = items.find(needsOrderAttention);
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="OrderManagementPanel"
+      title={title}
+      description={description}
+      status={orderStatus}
+      metadata={computedMetadata.length ? computedMetadata : undefined}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-order-management", className].filter(Boolean).join(" ")}
+    >
+      <div className="eth-domain-order-management__body">
+        <section
+          className="eth-domain-order-management__timeline"
+          aria-labelledby={lifecycleHeadingId}
+        >
+          <div className="eth-domain-order-management__section-header">
+            <div>
+              <span>Fulfillment</span>
+              <h3 id={lifecycleHeadingId}>Lifecycle</h3>
+            </div>
+            <strong>
+              {items.length ? `${completedCount} of ${items.length} complete` : "No checkpoints"}
+            </strong>
+          </div>
+
+          {items.length ? (
+            <ol className="eth-domain-order-management__steps">
+              {items.map((item, index) => {
+                const itemStatus = item.status ?? "not-started";
+                const labelContent = item.href ? (
+                  <a href={item.href}>{item.label}</a>
+                ) : (
+                  item.label
+                );
+                const detailRows = [
+                  { label: "Owner", value: item.owner },
+                  { label: "Location", value: item.location },
+                  { label: "Quantity", value: item.quantity },
+                  { label: "Time", value: item.timestamp ?? item.meta }
+                ].filter((detail) => hasDisplayValue(detail.value));
+
+                return (
+                  <li
+                    key={item.id}
+                    aria-current={index === currentIndex ? "step" : undefined}
+                    data-current={index === currentIndex ? "true" : undefined}
+                    data-status={itemStatus}
+                  >
+                    <span className="eth-domain-order-management__step-marker" aria-hidden="true">
+                      {index + 1}
+                    </span>
+                    <div className="eth-domain-order-management__step-main">
+                      <div className="eth-domain-order-management__step-heading">
+                        <strong>{labelContent}</strong>
+                        <StatusDot status={itemStatus} label={statusLabel(itemStatus)} />
+                      </div>
+                      {item.description ? <p>{item.description}</p> : null}
+                      {detailRows.length ? (
+                        <dl className="eth-domain-order-management__step-meta">
+                          {detailRows.map((detail, detailIndex) => (
+                            <div key={detailIndex}>
+                              <dt>{detail.label}</dt>
+                              <dd>{detail.value}</dd>
+                            </div>
+                          ))}
+                        </dl>
+                      ) : null}
+                      {item.exception ? (
+                        <div className="eth-domain-order-management__step-exception">
+                          {item.exception}
+                        </div>
+                      ) : null}
+                      <OrderFulfillmentActions actions={item.actions} />
+                    </div>
+                  </li>
+                );
+              })}
+            </ol>
+          ) : (
+            <div className="eth-domain-order-management__empty">
+              No fulfillment checkpoints configured.
+            </div>
+          )}
+        </section>
+
+        <aside
+          className="eth-domain-order-management__execution"
+          aria-labelledby={executionHeadingId}
+        >
+          <div className="eth-domain-order-management__section-header">
+            <div>
+              <span>Execution</span>
+              <h3 id={executionHeadingId}>Order controls</h3>
+            </div>
+            <StatusDot status={orderStatus} label={statusLabel(orderStatus)} />
+          </div>
+
+          {executionSummary.length ? (
+            <dl className="eth-domain-order-management__summary">
+              {executionSummary.map((item, index) => (
+                <div key={index}>
+                  <dt>{item.label}</dt>
+                  <dd>{item.value}</dd>
+                </div>
+              ))}
+            </dl>
+          ) : null}
+
+          <div
+            className="eth-domain-order-management__attention"
+            data-status={activeException ? activeException.status ?? "warning" : "completed"}
+          >
+            <span>Exception state</span>
+            <strong>
+              {activeException ? activeException.label : "No active fulfillment exceptions"}
+            </strong>
+            {activeException?.exception ? <p>{activeException.exception}</p> : null}
+          </div>
+        </aside>
+      </div>
+      {children}
+    </Surface>
+  );
+}
+
+const defaultKnowledgeBaseSections: KnowledgeBaseArticleSection[] = [
+  {
+    id: "routing",
+    title: "Approval routing",
+    body: "Requests with external recipients enter legal review before delivery. The route records each approver, decision, exception reason, and timestamp for audit export.",
+    status: "active"
+  },
+  {
+    id: "exceptions",
+    title: "Exception handling",
+    body: "If legal requests a change, the article owner receives a revision task and external send remains disabled until the legal approval returns.",
+    status: "pending-approval"
+  }
+];
+
+const defaultKnowledgeBaseRelatedArticles: KnowledgeBaseRelatedArticle[] = [
+  {
+    id: "legal-review-sla",
+    label: "Legal review SLA",
+    description: "Response windows, backup approvers, and overdue escalation paths.",
+    meta: "Policy",
+    type: "Policy",
+    updatedAt: "Updated May 20",
+    status: "active"
+  },
+  {
+    id: "external-send-controls",
+    label: "External send controls",
+    description: "Controls that keep outbound delivery locked while approval is open.",
+    meta: "Runbook",
+    type: "Runbook",
+    updatedAt: "Updated May 18",
+    status: "in-progress"
+  }
+];
+
+const defaultKnowledgeBaseCitations: KnowledgeBaseCitation[] = [
+  {
+    id: "approval-policy",
+    label: "External send approval policy",
+    source: "Policy KB-214",
+    excerpt: "Outbound delivery requires recorded legal approval.",
+    status: "completed"
+  },
+  {
+    id: "audit-control",
+    label: "Audit evidence control",
+    source: "Control AE-09",
+    excerpt: "Approval decisions must include owner, timestamp, and reason.",
+    status: "active"
+  }
+];
+
+function knowledgeBaseStatusLabel(status: EthOperationalStatus | undefined) {
+  return status ? statusLabel(status) : "Published";
+}
+
+function hasKnowledgeBaseNode(node: React.ReactNode) {
+  return node !== undefined && node !== null && node !== false && node !== "";
+}
+
+function renderKnowledgeBaseNode(node: React.ReactNode) {
+  if (!hasKnowledgeBaseNode(node)) return null;
+  if (typeof node === "string" || typeof node === "number") return <p>{node}</p>;
+  return node;
+}
+
+export function ComplianceChecklist({
+  title = "Compliance checklist",
+  description = "Evidence readiness, control ownership, and audit state for the current review.",
+  items = [],
+  metadata,
+  status,
+  footer,
+  children,
+  className,
+  ...props
+}: ComplianceChecklistProps) {
+  const completeCount = items.filter((item) => isComplianceComplete(item.status)).length;
+  const attentionCount = items.filter((item) => needsComplianceAttention(item.status)).length;
+  const evidenceCount = items.filter(hasComplianceEvidence).length;
+  const computedMetadata =
+    metadata ??
+    (items.length
+      ? [
+          { label: "Complete", value: `${completeCount}/${items.length}` },
+          { label: "Needs attention", value: attentionCount },
+          { label: "Evidence linked", value: `${evidenceCount}/${items.length}` }
+        ]
+      : undefined);
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="ComplianceChecklist"
+      title={title}
+      description={description}
+      status={status ?? deriveComplianceStatus(items)}
+      metadata={computedMetadata}
+      footer={footer}
+      className={["eth-domain-compliance-checklist", className].filter(Boolean).join(" ")}
+    >
+      {items.length ? (
+        <div className="eth-domain-compliance-checklist__table-wrap">
+          <table className="eth-domain-compliance-checklist__table">
+            <caption className="eth-domain-compliance-checklist__caption">
+              Compliance evidence checklist
+            </caption>
+            <colgroup>
+              <col className="eth-domain-compliance-checklist__control-col" />
+              <col className="eth-domain-compliance-checklist__owner-col" />
+              <col className="eth-domain-compliance-checklist__evidence-col" />
+              <col className="eth-domain-compliance-checklist__state-col" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th scope="col">Control</th>
+                <th scope="col">Owner</th>
+                <th scope="col">Evidence</th>
+                <th scope="col">Audit state</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => {
+                const itemStatus = item.status ?? "not-started";
+                const labelContent = item.href ? <a href={item.href}>{item.label}</a> : item.label;
+                const evidenceContent = item.evidence ?? item.evidenceLabel ?? item.meta;
+
+                return (
+                  <tr key={item.id} data-status={itemStatus}>
+                    <td>
+                      <div className="eth-domain-compliance-checklist__control">
+                        {item.controlId ? (
+                          <span className="eth-domain-compliance-checklist__control-id">
+                            {item.controlId}
+                          </span>
+                        ) : null}
+                        <strong>{labelContent}</strong>
+                        {item.description ? <p>{item.description}</p> : null}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="eth-domain-compliance-checklist__cell-stack">
+                        <strong>{item.owner ?? "Unassigned"}</strong>
+                        {item.dueDate ? (
+                          <span className="eth-domain-compliance-checklist__secondary">
+                            Due {item.dueDate}
+                          </span>
+                        ) : null}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="eth-domain-compliance-checklist__cell-stack">
+                        {evidenceContent ? (
+                          item.evidenceHref ? (
+                            <a
+                              className="eth-domain-compliance-checklist__evidence-link"
+                              href={item.evidenceHref}
+                            >
+                              {evidenceContent}
+                            </a>
+                          ) : (
+                            <strong>{evidenceContent}</strong>
+                          )
+                        ) : (
+                          <span className="eth-domain-compliance-checklist__secondary">
+                            Evidence not linked
+                          </span>
+                        )}
+                        {item.updatedAt ? (
+                          <span className="eth-domain-compliance-checklist__secondary">
+                            {item.updatedAt}
+                          </span>
+                        ) : null}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="eth-domain-compliance-checklist__state">
+                        <StatusDot status={itemStatus} label={statusLabel(itemStatus)} />
+                        {item.required ? (
+                          <span className="eth-domain-compliance-checklist__requirement">
+                            Required
+                          </span>
+                        ) : null}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="eth-domain-compliance-checklist__empty">
+          No compliance controls configured.
+        </div>
+      )}
+      {children}
+    </Surface>
+  );
+}
+
+function RiskMatrixActions({ actions }: { actions?: EthAction[] }) {
+  if (!actions?.length) return null;
+
+  return (
+    <div className="eth-domain-risk-matrix__item-actions">
+      {actions.map((action) =>
+        action.href ? (
+          <LinkButton
+            key={action.id}
+            href={action.disabled ? undefined : action.href}
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            aria-disabled={action.disabled ? true : undefined}
+            tabIndex={action.disabled ? -1 : undefined}
+          >
+            {action.label}
+          </LinkButton>
+        ) : (
+          <Button
+            key={action.id}
+            type="button"
+            intent={action.intent ?? "ghost"}
+            density="compact"
+            disabled={action.disabled}
+            onClick={action.onSelect}
+          >
+            {action.label}
+          </Button>
+        )
+      )}
+    </div>
+  );
+}
+
+function RiskMatrixFact({
+  label,
+  value
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}) {
+  if (!hasDisplayValue(value)) return null;
+
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}
+
+export function RiskMatrix({
+  title = "Risk register",
+  description = "Impact and probability register with mitigation ownership.",
+  status,
+  severity,
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  items = [],
+  selectedItemId,
+  view,
+  reviewCadence,
+  onViewChange,
+  ...props
+}: RiskMatrixProps) {
+  const matrixHeadingId = React.useId();
+  const registerHeadingId = React.useId();
+  const [internalView, setInternalView] = React.useState<RiskMatrixView>("matrix");
+  const currentView = view ?? internalView;
+  const risks = items.map(resolveRiskMatrixItem).sort(compareRiskPriority);
+  const priorityRisk = selectedItemId
+    ? risks.find((item) => item.id === selectedItemId) ?? risks[0]
+    : risks[0];
+  const criticalCount = risks.filter((item) => item.resolvedSeverity === "critical").length;
+  const highCount = risks.filter((item) => item.resolvedSeverity === "high").length;
+  const mediumCount = risks.filter((item) => item.resolvedSeverity === "medium").length;
+  const priorityStatus = priorityRisk
+    ? priorityRisk.status ?? deriveRiskMatrixStatus([priorityRisk]) ?? "active"
+    : "active";
+  const computedMetadata =
+    metadata ??
+    [
+      { label: "Open risks", value: risks.length },
+      { label: "Critical", value: criticalCount },
+      { label: "High", value: highCount },
+      { label: "Medium", value: mediumCount }
+    ];
+  const changeView = (nextView: RiskMatrixView) => {
+    if (view === undefined) setInternalView(nextView);
+    onViewChange?.(nextView);
+  };
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="RiskMatrix"
+      title={title}
+      description={description}
+      status={status ?? deriveRiskMatrixStatus(risks)}
+      severity={severity ?? deriveRiskMatrixSurfaceSeverity(risks)}
+      metadata={computedMetadata}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-risk-matrix", className].filter(Boolean).join(" ")}
+    >
+      <div
+        className="eth-domain-risk-matrix__toolbar"
+        role="group"
+        aria-label="Risk matrix controls"
+      >
+        <div className="eth-domain-risk-matrix__view-switch" role="group" aria-label="Risk view">
+          <Button
+            type="button"
+            intent={currentView === "matrix" ? "secondary" : "ghost"}
+            density="compact"
+            aria-label="Matrix view"
+            aria-pressed={currentView === "matrix"}
+            onClick={() => changeView("matrix")}
+          >
+            Matrix
+          </Button>
+          <Button
+            type="button"
+            intent={currentView === "register" ? "secondary" : "ghost"}
+            density="compact"
+            aria-label="Register view"
+            aria-pressed={currentView === "register"}
+            onClick={() => changeView("register")}
+          >
+            Register
+          </Button>
+        </div>
+        {reviewCadence ? (
+          <span className="eth-domain-risk-matrix__cadence">
+            Review <strong>{reviewCadence}</strong>
+          </span>
+        ) : null}
+        {criticalCount || highCount ? (
+          <span className="eth-domain-risk-matrix__attention">
+            {criticalCount} critical / {highCount} high
+          </span>
+        ) : null}
+      </div>
+
+      {risks.length ? (
+        <div className="eth-domain-risk-matrix__workspace" data-view={currentView}>
+          {currentView === "matrix" ? (
+            <section
+              className="eth-domain-risk-matrix__matrix-panel"
+              aria-labelledby={matrixHeadingId}
+            >
+              <div className="eth-domain-risk-matrix__panel-header">
+                <div>
+                  <span>Matrix</span>
+                  <h3 id={matrixHeadingId}>Impact x probability</h3>
+                </div>
+                <div
+                  className="eth-domain-risk-matrix__legend"
+                  role="list"
+                  aria-label="Risk severity legend"
+                >
+                  {(["low", "medium", "high", "critical"] as RiskMatrixSeverity[]).map(
+                    (riskSeverity) => (
+                      <span key={riskSeverity} data-severity={riskSeverity} role="listitem">
+                        {riskImpactLabels[riskSeverity]}
+                      </span>
+                    )
+                  )}
+                </div>
+              </div>
+
+              <div
+                className="eth-domain-risk-matrix__grid"
+                role="grid"
+                aria-label="Impact probability risk matrix"
+              >
+                <div
+                  className="eth-domain-risk-matrix__grid-row eth-domain-risk-matrix__grid-row--header"
+                  role="row"
+                >
+                  <div className="eth-domain-risk-matrix__corner" role="columnheader">
+                    Impact
+                  </div>
+                  {riskProbabilityLevels.map((probability) => (
+                    <div
+                      key={probability}
+                      className="eth-domain-risk-matrix__axis"
+                      role="columnheader"
+                    >
+                      <span>Probability</span>
+                      <strong>{riskProbabilityLabels[probability]}</strong>
+                    </div>
+                  ))}
+                </div>
+
+                {riskImpactLevels.map((impact) => (
+                  <div key={impact} className="eth-domain-risk-matrix__grid-row" role="row">
+                    <div
+                      className="eth-domain-risk-matrix__axis eth-domain-risk-matrix__row-axis"
+                      role="rowheader"
+                    >
+                      <span>Impact</span>
+                      <strong>{riskImpactLabels[impact]}</strong>
+                    </div>
+                    {riskProbabilityLevels.map((probability) => {
+                      const cellRisks = risks.filter(
+                        (item) =>
+                          item.resolvedImpact === impact && item.resolvedProbability === probability
+                      );
+                      const cellSeverity =
+                        cellRisks[0]?.resolvedSeverity ??
+                        riskSeverityFromScore(impact, probability);
+
+                      return (
+                        <div
+                          key={`${impact}-${probability}`}
+                          className="eth-domain-risk-matrix__cell"
+                          data-severity={cellSeverity}
+                          role="gridcell"
+                          aria-label={`${riskImpactLabels[impact]} impact, ${riskProbabilityLabels[probability]} probability: ${riskCountLabel(cellRisks.length)}`}
+                        >
+                          {cellRisks.length ? (
+                            <div className="eth-domain-risk-matrix__cell-risks" role="list">
+                              {cellRisks.map((risk) => {
+                                const labelContent = risk.href ? (
+                                  <a href={risk.href}>{risk.label}</a>
+                                ) : (
+                                  risk.label
+                                );
+
+                                return (
+                                  <article
+                                    key={risk.id}
+                                    className="eth-domain-risk-matrix__risk-card"
+                                    data-severity={risk.resolvedSeverity}
+                                    role="listitem"
+                                  >
+                                    <span className="eth-domain-risk-matrix__risk-score">
+                                      {risk.score ?? risk.resolvedScore}
+                                    </span>
+                                    <div className="eth-domain-risk-matrix__risk-card-main">
+                                      <strong>{labelContent}</strong>
+                                      <div className="eth-domain-risk-matrix__risk-card-meta">
+                                        {risk.owner ? <span>{risk.owner}</span> : null}
+                                        {risk.dueDate ? <span>{risk.dueDate}</span> : null}
+                                      </div>
+                                    </div>
+                                  </article>
+                                );
+                              })}
+                            </div>
+                          ) : (
+                            <span className="eth-domain-risk-matrix__empty-cell">No risks</span>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                ))}
+              </div>
+            </section>
+          ) : null}
+
+          <aside className="eth-domain-risk-matrix__detail" aria-label="Highest priority risk">
+            {priorityRisk ? (
+              <>
+                <div className="eth-domain-risk-matrix__panel-header">
+                  <div>
+                    <span>Highest priority</span>
+                    <h3>{priorityRisk.label}</h3>
+                  </div>
+                  <StatusDot status={priorityStatus} label={statusLabel(priorityStatus)} />
+                </div>
+                {priorityRisk.description ? <p>{priorityRisk.description}</p> : null}
+                <dl className="eth-domain-risk-matrix__facts">
+                  <RiskMatrixFact
+                    label="Impact"
+                    value={riskImpactLabels[priorityRisk.resolvedImpact]}
+                  />
+                  <RiskMatrixFact
+                    label="Probability"
+                    value={riskProbabilityLabels[priorityRisk.resolvedProbability]}
+                  />
+                  <RiskMatrixFact label="Owner" value={priorityRisk.owner} />
+                  <RiskMatrixFact label="Due" value={priorityRisk.dueDate} />
+                  <RiskMatrixFact
+                    label="Score"
+                    value={priorityRisk.score ?? priorityRisk.resolvedScore}
+                  />
+                  <RiskMatrixFact label="Review" value={reviewCadence} />
+                </dl>
+                {priorityRisk.mitigation ? (
+                  <div className="eth-domain-risk-matrix__mitigation">
+                    <span>Mitigation</span>
+                    <strong>{priorityRisk.mitigation}</strong>
+                  </div>
+                ) : null}
+                <RiskMatrixActions actions={priorityRisk.actions} />
+              </>
+            ) : (
+              <p className="eth-domain-risk-matrix__empty">No priority risk selected.</p>
+            )}
+
+            <section
+              className="eth-domain-risk-matrix__register"
+              aria-labelledby={registerHeadingId}
+            >
+              <div className="eth-domain-risk-matrix__panel-header">
+                <div>
+                  <span>Register</span>
+                  <h3 id={registerHeadingId}>Mapped risks</h3>
+                </div>
+                <strong>{riskCountLabel(risks.length)}</strong>
+              </div>
+              <div className="eth-domain-risk-matrix__register-list" role="list">
+                {risks.map((risk) => {
+                  const itemStatus = risk.status ?? deriveRiskMatrixStatus([risk]) ?? "active";
+                  return (
+                    <article
+                      key={risk.id}
+                      className="eth-domain-risk-matrix__register-item"
+                      data-severity={risk.resolvedSeverity}
+                      role="listitem"
+                    >
+                      <div>
+                        <strong>{risk.label}</strong>
+                        <span>
+                          {riskImpactLabels[risk.resolvedImpact]} /{" "}
+                          {riskProbabilityLabels[risk.resolvedProbability]}
+                        </span>
+                      </div>
+                      <StatusDot status={itemStatus} label={statusLabel(itemStatus)} />
+                    </article>
+                  );
+                })}
+              </div>
+            </section>
+          </aside>
+        </div>
+      ) : (
+        <div className="eth-domain-risk-matrix__empty">No risks mapped.</div>
+      )}
+
+      {children}
+    </Surface>
+  );
+}
+
+export function InvoiceViewer({
+  title = "Invoice",
+  description,
+  status = "pending-approval",
+  items = [],
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  customer,
+  dueDate,
+  terms,
+  owner,
+  subtotal,
+  tax,
+  total,
+  amountDue,
+  payments = [],
+  ...props
+}: InvoiceViewerProps) {
+  const computedMetadata =
+    metadata ??
+    [
+      { label: "Amount due", value: amountDue ?? total },
+      { label: "Due date", value: dueDate },
+      { label: "Terms", value: terms },
+      { label: "Owner", value: owner ?? customer }
+    ].filter((item) => hasDisplayValue(item.value));
+  const summaryRows: Array<{
+    label: React.ReactNode;
+    value: React.ReactNode;
+    emphasis?: boolean;
+  }> = [
+    { label: "Subtotal", value: subtotal },
+    { label: "Tax", value: tax },
+    { label: "Total", value: total },
+    { label: "Amount due", value: amountDue ?? total, emphasis: true }
+  ].filter((item) => hasDisplayValue(item.value));
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="InvoiceViewer"
+      title={title}
+      description={description}
+      status={status}
+      metadata={computedMetadata.length ? computedMetadata : undefined}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-invoice-viewer", className].filter(Boolean).join(" ")}
+    >
+      <div className="eth-domain-invoice-viewer__body">
+        <section className="eth-domain-invoice-viewer__section" aria-label="Invoice line items">
+          <div className="eth-domain-invoice-viewer__section-header">
+            <div>
+              <span>Charges</span>
+              <h3>Line items</h3>
+            </div>
+            <strong>
+              {items.length} item{items.length === 1 ? "" : "s"}
+            </strong>
+          </div>
+
+          {items.length ? (
+            <div className="eth-domain-invoice-viewer__table-wrap">
+              <table className="eth-domain-invoice-viewer__table">
+                <caption className="eth-domain-invoice-viewer__caption">Invoice line items</caption>
+                <thead>
+                  <tr>
+                    <th scope="col">Item</th>
+                    <th scope="col">Qty</th>
+                    <th scope="col">Rate</th>
+                    <th scope="col">Amount</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item) => {
+                    const itemStatus = item.status ?? "not-started";
+                    const labelContent = item.href ? (
+                      <a href={item.href}>{item.label}</a>
+                    ) : (
+                      item.label
+                    );
+
+                    return (
+                      <tr key={item.id} data-status={itemStatus}>
+                        <td>
+                          <div className="eth-domain-invoice-viewer__line-item">
+                            <strong>{labelContent}</strong>
+                            {item.description ? <p>{item.description}</p> : null}
+                            {item.status ? (
+                              <StatusDot status={item.status} label={statusLabel(item.status)} />
+                            ) : null}
+                          </div>
+                        </td>
+                        <td>{item.quantity ?? "1"}</td>
+                        <td>{item.rate ?? "-"}</td>
+                        <td>{item.amount ?? item.meta ?? "-"}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <p className="eth-domain-invoice-viewer__empty">No invoice line items available.</p>
+          )}
+        </section>
+
+        <aside className="eth-domain-invoice-viewer__section" aria-label="Payment summary">
+          <div className="eth-domain-invoice-viewer__section-header">
+            <div>
+              <span>Payment</span>
+              <h3>Summary</h3>
+            </div>
+            <StatusDot status={status} label={statusLabel(status)} />
+          </div>
+
+          {summaryRows.length ? (
+            <dl className="eth-domain-invoice-viewer__totals">
+              {summaryRows.map((row, index) => (
+                <div
+                  key={index}
+                  className={row.emphasis ? "eth-domain-invoice-viewer__total" : undefined}
+                >
+                  <dt>{row.label}</dt>
+                  <dd>{row.value}</dd>
+                </div>
+              ))}
+            </dl>
+          ) : null}
+
+          {payments.length ? (
+            <ol className="eth-domain-invoice-viewer__payments" aria-label="Payment milestones">
+              {payments.map((payment) => {
+                const paymentStatus = payment.status ?? "queued";
+
+                return (
+                  <li key={payment.id} data-status={paymentStatus}>
+                    <div className="eth-domain-invoice-viewer__payment-main">
+                      <strong>{payment.label}</strong>
+                      {payment.dueDate || payment.description ? (
+                        <span>{payment.dueDate ?? payment.description}</span>
+                      ) : null}
+                    </div>
+                    {hasDisplayValue(payment.amount ?? payment.meta) ? (
+                      <span className="eth-domain-invoice-viewer__payment-amount">
+                        {payment.amount ?? payment.meta}
+                      </span>
+                    ) : null}
+                  </li>
+                );
+              })}
+            </ol>
+          ) : null}
+        </aside>
+      </div>
+      {children}
+    </Surface>
+  );
+}
+
+export function KnowledgeBaseArticleViewer({
+  title = "Knowledge base article",
+  description,
+  status = "active",
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  body,
+  sections,
+  relatedArticles,
+  citations = defaultKnowledgeBaseCitations,
+  items,
+  articleStatusLabel,
+  ...props
+}: KnowledgeBaseArticleViewerProps) {
+  const hasBody = hasKnowledgeBaseNode(body) || React.Children.count(children) > 0;
+  const articleSections = sections ?? (hasBody ? [] : defaultKnowledgeBaseSections);
+  const related = relatedArticles ?? items ?? defaultKnowledgeBaseRelatedArticles;
+  const articleHeadingId = React.useId();
+  const relatedHeadingId = React.useId();
+  const citationsHeadingId = React.useId();
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="KnowledgeBaseArticleViewer"
+      title={title}
+      description={description}
+      status={status}
+      metadata={metadata}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-knowledge-base-viewer", className].filter(Boolean).join(" ")}
+    >
+      <div className="eth-domain-knowledge-base-viewer__workspace">
+        <article
+          className="eth-domain-knowledge-base-viewer__article"
+          aria-labelledby={articleHeadingId}
+        >
+          <div className="eth-domain-knowledge-base-viewer__article-header">
+            <div>
+              <span>Article body</span>
+              <h3 id={articleHeadingId}>Guidance</h3>
+            </div>
+            <StatusDot
+              status={status}
+              label={articleStatusLabel ?? knowledgeBaseStatusLabel(status)}
+            />
+          </div>
+
+          {hasBody ? (
+            <div className="eth-domain-knowledge-base-viewer__body">
+              {renderKnowledgeBaseNode(body)}
+              {children}
+            </div>
+          ) : null}
+
+          {articleSections.length ? (
+            <div className="eth-domain-knowledge-base-viewer__sections">
+              {articleSections.map((section) => (
+                <section
+                  key={section.id}
+                  className="eth-domain-knowledge-base-viewer__section"
+                  data-status={section.status}
+                >
+                  <div className="eth-domain-knowledge-base-viewer__section-heading">
+                    <h4>{section.title}</h4>
+                    {section.status ? (
+                      <StatusDot status={section.status} label={statusLabel(section.status)} />
+                    ) : null}
+                  </div>
+                  {renderKnowledgeBaseNode(section.body)}
+                </section>
+              ))}
+            </div>
+          ) : null}
+        </article>
+
+        <aside className="eth-domain-knowledge-base-viewer__rail">
+          <section
+            className="eth-domain-knowledge-base-viewer__panel"
+            aria-labelledby={relatedHeadingId}
+          >
+            <div className="eth-domain-knowledge-base-viewer__panel-header">
+              <span>Knowledge graph</span>
+              <h3 id={relatedHeadingId}>Related content</h3>
+            </div>
+            {related.length ? (
+              <div className="eth-domain-knowledge-base-viewer__related-list" role="list">
+                {related.map((item) => {
+                  const labelContent = item.href ? (
+                    <a href={item.href}>{item.label}</a>
+                  ) : (
+                    item.label
+                  );
+                  return (
+                    <article
+                      key={item.id}
+                      className="eth-domain-knowledge-base-viewer__related-item"
+                      role="listitem"
+                    >
+                      <div>
+                        <strong>{labelContent}</strong>
+                        {item.description ? <p>{item.description}</p> : null}
+                      </div>
+                      <div className="eth-domain-knowledge-base-viewer__item-meta">
+                        {(item.type ?? item.meta) ? <span>{item.type ?? item.meta}</span> : null}
+                        {item.updatedAt ? <span>{item.updatedAt}</span> : null}
+                        {item.status ? (
+                          <StatusDot status={item.status} label={statusLabel(item.status)} />
+                        ) : null}
+                      </div>
+                    </article>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="eth-domain-knowledge-base-viewer__empty">No related content linked.</p>
+            )}
+          </section>
+
+          <section
+            className="eth-domain-knowledge-base-viewer__panel"
+            aria-labelledby={citationsHeadingId}
+          >
+            <div className="eth-domain-knowledge-base-viewer__panel-header">
+              <span>Evidence</span>
+              <h3 id={citationsHeadingId}>Citations</h3>
+            </div>
+            {citations.length ? (
+              <ol className="eth-domain-knowledge-base-viewer__citations">
+                {citations.map((citation) => {
+                  const labelContent = citation.href ? (
+                    <a href={citation.href}>{citation.label}</a>
+                  ) : (
+                    citation.label
+                  );
+                  return (
+                    <li key={citation.id}>
+                      <div className="eth-domain-knowledge-base-viewer__citation-main">
+                        <strong>{labelContent}</strong>
+                        {citation.source ? <span>{citation.source}</span> : null}
+                        {renderKnowledgeBaseNode(citation.excerpt)}
+                      </div>
+                      {citation.status ? (
+                        <StatusDot status={citation.status} label={statusLabel(citation.status)} />
+                      ) : null}
+                    </li>
+                  );
+                })}
+              </ol>
+            ) : (
+              <p className="eth-domain-knowledge-base-viewer__empty">No citations attached.</p>
+            )}
+          </section>
+        </aside>
+      </div>
+    </Surface>
+  );
+}
+
+const defaultDataImportSteps: DataImportWizardStep[] = [
+  {
+    id: "upload",
+    label: "Upload CSV",
+    description: "File accepted and parsed into a preview set.",
+    status: "completed"
+  },
+  {
+    id: "map",
+    label: "Map fields",
+    description: "Match source columns to the destination object.",
+    status: "in-progress"
+  },
+  {
+    id: "validate",
+    label: "Validate",
+    description: "Run required field and duplicate checks.",
+    status: "queued"
+  },
+  {
+    id: "submit",
+    label: "Submit",
+    description: "Create records after validation passes.",
+    status: "not-started"
+  }
+];
+
+function dataImportStatusFromSteps(
+  steps: DataImportWizardStep[]
+): EthOperationalStatus | undefined {
+  if (!steps.length) return undefined;
+  if (steps.some((step) => step.status === "blocked" || step.status === "failed")) {
+    return "blocked";
+  }
+  if (steps.every((step) => step.status === "completed" || step.status === "succeeded")) {
+    return "completed";
+  }
+  if (
+    steps.some(
+      (step) =>
+        step.status === "in-progress" || step.status === "running" || step.status === "active"
+    )
+  ) {
+    return "in-progress";
+  }
+  if (steps.some((step) => step.status === "queued" || step.status === "pending-approval")) {
+    return "queued";
+  }
+  return "not-started";
+}
+
+function isCompletedImportStep(status: EthOperationalStatus | undefined) {
+  return status === "completed" || status === "succeeded" || status === "synced";
+}
+
+function isCurrentImportStep(status: EthOperationalStatus | undefined) {
+  return status === "in-progress" || status === "running" || status === "active";
+}
+
+function currentImportStepIndex(steps: DataImportWizardStep[]) {
+  const activeIndex = steps.findIndex((step) => isCurrentImportStep(step.status));
+  if (activeIndex >= 0) return activeIndex;
+
+  const nextIndex = steps.findIndex((step) => !isCompletedImportStep(step.status));
+  return nextIndex >= 0 ? nextIndex : Math.max(steps.length - 1, 0);
+}
+
+export function DataImportWizard({
+  title = "Data import",
+  description = "Import, map, validate, and submit records.",
+  items = defaultDataImportSteps,
+  metadata,
+  status,
+  actions,
+  footer,
+  children,
+  className,
+  fileName,
+  sourceLabel,
+  rowCount,
+  columnCount,
+  mappingCount,
+  validationSummary,
+  mappings = [],
+  validationIssues = [],
+  ...props
+}: DataImportWizardProps) {
+  const currentIndex = currentImportStepIndex(items);
+  const completeCount = items.filter((item) => isCompletedImportStep(item.status)).length;
+  const computedMetadata =
+    metadata ??
+    [
+      { label: "File", value: fileName },
+      { label: "Rows", value: rowCount },
+      { label: "Columns", value: columnCount },
+      { label: "Mapped", value: mappingCount },
+      { label: "Validation", value: validationSummary }
+    ].filter((item) => hasDisplayValue(item.value));
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="DataImportWizard"
+      title={title}
+      description={description}
+      status={status ?? dataImportStatusFromSteps(items)}
+      metadata={computedMetadata.length ? computedMetadata : undefined}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-data-import-wizard", className].filter(Boolean).join(" ")}
+    >
+      <ol className="eth-domain-data-import-wizard__steps" aria-label="Data import progress">
+        {items.map((step, index) => {
+          const stepStatus = step.status ?? "not-started";
+
+          return (
+            <li
+              key={step.id}
+              aria-current={index === currentIndex ? "step" : undefined}
+              className="eth-domain-data-import-wizard__step"
+              data-current={index === currentIndex ? "true" : undefined}
+              data-status={stepStatus}
+            >
+              <span className="eth-domain-data-import-wizard__step-marker" aria-hidden="true">
+                {index + 1}
+              </span>
+              <span className="eth-domain-data-import-wizard__step-copy">
+                <strong>{step.label}</strong>
+                {step.description ? <span>{step.description}</span> : null}
+              </span>
+              <StatusDot status={stepStatus} label={statusLabel(stepStatus)} />
+            </li>
+          );
+        })}
+      </ol>
+
+      <div className="eth-domain-data-import-wizard__workspace">
+        <section className="eth-domain-data-import-wizard__panel" aria-label="Upload summary">
+          <div className="eth-domain-data-import-wizard__panel-header">
+            <span>Source</span>
+            <strong>{fileName ?? "No file selected"}</strong>
+          </div>
+          <dl className="eth-domain-data-import-wizard__facts">
+            {hasDisplayValue(sourceLabel) ? (
+              <div>
+                <dt>Import type</dt>
+                <dd>{sourceLabel}</dd>
+              </div>
+            ) : null}
+            {hasDisplayValue(rowCount) ? (
+              <div>
+                <dt>Rows detected</dt>
+                <dd>{rowCount}</dd>
+              </div>
+            ) : null}
+            {hasDisplayValue(columnCount) ? (
+              <div>
+                <dt>Columns</dt>
+                <dd>{columnCount}</dd>
+              </div>
+            ) : null}
+            <div>
+              <dt>Progress</dt>
+              <dd>
+                {items.length
+                  ? `${completeCount}/${items.length} steps complete`
+                  : "No steps configured"}
+              </dd>
+            </div>
+          </dl>
+        </section>
+
+        {mappings.length ? (
+          <section className="eth-domain-data-import-wizard__panel eth-domain-data-import-wizard__panel--wide">
+            <div className="eth-domain-data-import-wizard__panel-header">
+              <span>Field mapping</span>
+              <strong>{mappingCount ?? `${mappings.length} fields`}</strong>
+            </div>
+            <div className="eth-domain-data-import-wizard__table-wrap">
+              <table className="eth-domain-data-import-wizard__table">
+                <caption>CSV fields mapped to destination properties</caption>
+                <thead>
+                  <tr>
+                    <th scope="col">Source field</th>
+                    <th scope="col">Destination</th>
+                    <th scope="col">Sample</th>
+                    <th scope="col">State</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {mappings.map((mapping) => {
+                    const mappingStatus = mapping.status ?? "not-started";
+
+                    return (
+                      <tr key={mapping.id} data-status={mappingStatus}>
+                        <td>
+                          <strong>{mapping.sourceField}</strong>
+                          {mapping.required ? <span>Required</span> : null}
+                        </td>
+                        <td>{mapping.targetField}</td>
+                        <td>{mapping.sample ?? "No sample"}</td>
+                        <td>
+                          <StatusDot status={mappingStatus} label={statusLabel(mappingStatus)} />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </section>
+        ) : null}
+
+        {validationIssues.length || hasDisplayValue(validationSummary) ? (
+          <section className="eth-domain-data-import-wizard__panel">
+            <div className="eth-domain-data-import-wizard__panel-header">
+              <span>Validation</span>
+              <strong>{validationSummary ?? "Ready to run"}</strong>
+            </div>
+            {validationIssues.length ? (
+              <ul className="eth-domain-data-import-wizard__issues" aria-label="Validation issues">
+                {validationIssues.map((issue) => {
+                  const issueStatus = issue.status ?? "warning";
+
+                  return (
+                    <li key={issue.id} data-status={issueStatus}>
+                      <div>
+                        <strong>{issue.field}</strong>
+                        <span>{issue.message}</span>
+                      </div>
+                      {hasDisplayValue(issue.count) ? <span>{issue.count}</span> : null}
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <p className="eth-domain-data-import-wizard__empty-note">
+                No validation issues have been detected.
+              </p>
+            )}
+          </section>
+        ) : null}
+      </div>
+      {children}
+    </Surface>
+  );
+}
+
+const defaultMappingTargetOptions = [
+  { value: "", label: "Select target field", disabled: true },
+  { value: "contact.firstName", label: "Contact / First name" },
+  { value: "contact.lastName", label: "Contact / Last name" },
+  { value: "account.name", label: "Account / Name" },
+  { value: "account.domain", label: "Account / Domain" },
+  { value: "opportunity.amount", label: "Opportunity / Amount" },
+  { value: "opportunity.closeDate", label: "Opportunity / Close date" }
+];
+
+function parseMappingLabel(label: React.ReactNode) {
+  const text = textFromNode(label).trim();
+  const match = text.match(/^(.*?)\s*(?:→|->)\s*(.*?)$/);
+  if (!match) return undefined;
+
+  return {
+    source: match[1].trim(),
+    target: match[2].trim()
+  };
+}
+
+function mappingSource(item: MappingConfigurationItem) {
+  return item.sourceField ?? parseMappingLabel(item.label)?.source ?? item.label;
+}
+
+function mappingTarget(item: MappingConfigurationItem) {
+  return item.targetField ?? parseMappingLabel(item.label)?.target;
+}
+
+function selectableValue(value: React.ReactNode) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  return undefined;
+}
+
+function mappingItemStatus(item: MappingConfigurationItem) {
+  return item.status ?? (hasDisplayValue(mappingTarget(item)) ? "active" : "warning");
+}
+
+function isMappingUnresolved(item: MappingConfigurationItem) {
+  const status = mappingItemStatus(item);
+  return (
+    !hasDisplayValue(mappingTarget(item)) ||
+    status === "warning" ||
+    status === "blocked" ||
+    status === "failed" ||
+    status === "approval-required"
+  );
+}
+
+function mappingWizardStatus(
+  items: MappingConfigurationItem[],
+  issues: MappingConfigurationIssue[]
+): EthOperationalStatus {
+  if (!items.length) return "not-started";
+  if (
+    items.some((item) =>
+      ["blocked", "failed", "approval-required"].includes(mappingItemStatus(item))
+    ) ||
+    issues.some((issue) =>
+      ["blocked", "failed", "approval-required"].includes(issue.status ?? "warning")
+    )
+  ) {
+    return "blocked";
+  }
+  if (items.some(isMappingUnresolved) || issues.length) return "warning";
+  return "active";
+}
+
+function optionsForMapping(
+  options: Array<{ value: string; label: string; disabled?: boolean }>,
+  value: string | undefined
+) {
+  if (!value || options.some((option) => option.value === value)) return options;
+  return [...options, { value, label: value }];
+}
+
+export function MappingConfigurationWizard({
+  title = "Mapping configuration",
+  description = "Configure how source fields map into destination objects.",
+  items = [],
+  sourceObject,
+  targetObject,
+  mappingCount,
+  validationSummary,
+  targetOptions = defaultMappingTargetOptions,
+  validationIssues = [],
+  metadata,
+  status,
+  actions,
+  footer,
+  children,
+  className,
+  onMappingChange,
+  onAutoMap,
+  onValidate,
+  onSubmit,
+  ...props
+}: MappingConfigurationWizardProps) {
+  const [targetOverrides, setTargetOverrides] = React.useState<Record<string, string>>({});
+
+  React.useEffect(() => {
+    setTargetOverrides({});
+  }, [items]);
+
+  const resolvedMappingTarget = React.useCallback(
+    (item: MappingConfigurationItem) => targetOverrides[item.id] ?? mappingTarget(item),
+    [targetOverrides]
+  );
+  const resolvedMappingStatus = React.useCallback(
+    (item: MappingConfigurationItem) =>
+      item.status ?? (hasDisplayValue(resolvedMappingTarget(item)) ? "active" : "warning"),
+    [resolvedMappingTarget]
+  );
+  const isResolvedMappingUnresolved = React.useCallback(
+    (item: MappingConfigurationItem) => {
+      const itemStatus = resolvedMappingStatus(item);
+
+      return (
+        !hasDisplayValue(resolvedMappingTarget(item)) ||
+        itemStatus === "warning" ||
+        itemStatus === "blocked" ||
+        itemStatus === "failed" ||
+        itemStatus === "approval-required"
+      );
+    },
+    [resolvedMappingStatus, resolvedMappingTarget]
+  );
+  const mappedCount = items.filter((item) => hasDisplayValue(resolvedMappingTarget(item))).length;
+  const unresolvedCount =
+    items.filter(isResolvedMappingUnresolved).length + validationIssues.length;
+  const resolvedItems = items.map((item) => ({
+    ...item,
+    targetField: resolvedMappingTarget(item),
+    status: resolvedMappingStatus(item)
+  }));
+  const computedStatus = status ?? mappingWizardStatus(resolvedItems, validationIssues);
+  const computedValidationSummary =
+    validationSummary ??
+    (unresolvedCount
+      ? `${unresolvedCount} ${unresolvedCount === 1 ? "issue" : "issues"} to resolve`
+      : "Ready to apply");
+  const mappingProgressLabel =
+    mappingCount ?? (items.length ? `${mappedCount}/${items.length}` : "No fields");
+  const computedMetadata =
+    metadata ??
+    [
+      { label: "Source object", value: sourceObject },
+      { label: "Target object", value: targetObject },
+      { label: "Mapped", value: mappingProgressLabel },
+      { label: "Validation", value: computedValidationSummary }
+    ].filter((item) => hasDisplayValue(item.value));
+  const wizardSteps = [
+    {
+      id: "source",
+      label: "Source",
+      description: items.length ? `${items.length} fields detected` : "No fields loaded",
+      status: items.length ? "completed" : "not-started"
+    },
+    {
+      id: "mapping",
+      label: "Map",
+      description: items.length ? `${mappedCount}/${items.length} mapped` : "Awaiting source",
+      status: !items.length
+        ? "not-started"
+        : mappedCount === items.length
+          ? "completed"
+          : "in-progress"
+    },
+    {
+      id: "validation",
+      label: "Validate",
+      description: computedValidationSummary,
+      status: computedStatus === "blocked" ? "blocked" : unresolvedCount ? "warning" : "completed"
+    },
+    {
+      id: "review",
+      label: "Review",
+      description: unresolvedCount ? "Resolve issues first" : "Ready for sync",
+      status: unresolvedCount ? "not-started" : "queued"
+    }
+  ] satisfies Array<{
+    id: string;
+    label: string;
+    description: React.ReactNode;
+    status: EthOperationalStatus;
+  }>;
+  const currentStepIndex = wizardSteps.findIndex((step) => !isCompletedImportStep(step.status));
+  const currentIndex = currentStepIndex >= 0 ? currentStepIndex : wizardSteps.length - 1;
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="MappingConfigurationWizard"
+      title={title}
+      description={description}
+      status={computedStatus}
+      metadata={computedMetadata.length ? computedMetadata : undefined}
+      actions={actions}
+      className={["eth-domain-mapping-config-wizard", className].filter(Boolean).join(" ")}
+    >
+      <ol className="eth-domain-mapping-config-wizard__steps" aria-label="Mapping progress">
+        {wizardSteps.map((step, index) => (
+          <li
+            key={step.id}
+            aria-current={index === currentIndex ? "step" : undefined}
+            className="eth-domain-mapping-config-wizard__step"
+            data-current={index === currentIndex ? "true" : undefined}
+            data-status={step.status}
+          >
+            <span className="eth-domain-mapping-config-wizard__step-marker" aria-hidden="true">
+              {index + 1}
+            </span>
+            <span className="eth-domain-mapping-config-wizard__step-copy">
+              <strong>{step.label}</strong>
+              <span>{step.description}</span>
+            </span>
+            <StatusDot status={step.status} label={statusLabel(step.status)} />
+          </li>
+        ))}
+      </ol>
+
+      <div className="eth-domain-mapping-config-wizard__workspace">
+        <aside className="eth-domain-mapping-config-wizard__panel" aria-label="Object scope">
+          <div className="eth-domain-mapping-config-wizard__panel-header">
+            <span>Objects</span>
+            <strong>
+              {sourceObject ?? "Source object"}
+              <span aria-hidden="true"> -&gt; </span>
+              {targetObject ?? "Target object"}
+            </strong>
+          </div>
+          <dl className="eth-domain-mapping-config-wizard__facts">
+            <div>
+              <dt>Source object</dt>
+              <dd>{sourceObject ?? "Not selected"}</dd>
+            </div>
+            <div>
+              <dt>Target object</dt>
+              <dd>{targetObject ?? "Not selected"}</dd>
+            </div>
+            <div>
+              <dt>Mapped fields</dt>
+              <dd>{mappingProgressLabel}</dd>
+            </div>
+            <div>
+              <dt>Validation</dt>
+              <dd>{computedValidationSummary}</dd>
+            </div>
+          </dl>
+        </aside>
+
+        <section
+          className="eth-domain-mapping-config-wizard__panel eth-domain-mapping-config-wizard__panel--mapping"
+          aria-label="Field mappings"
+        >
+          <div className="eth-domain-mapping-config-wizard__panel-header eth-domain-mapping-config-wizard__panel-header--inline">
+            <div>
+              <span>Field mapping</span>
+              <strong>
+                {mappingCount ??
+                  (items.length ? `${mappedCount}/${items.length} mapped` : "No fields")}
+              </strong>
+            </div>
+            <Button type="button" intent="tertiary" density="compact" onClick={onAutoMap}>
+              Auto-map
+            </Button>
+          </div>
+
+          {items.length ? (
+            <div className="eth-domain-mapping-config-wizard__table-wrap">
+              <table className="eth-domain-mapping-config-wizard__table">
+                <caption>Source fields mapped to destination fields</caption>
+                <thead>
+                  <tr>
+                    <th scope="col">Source field</th>
+                    <th scope="col">Destination field</th>
+                    <th scope="col">Transform</th>
+                    <th scope="col">State</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item) => {
+                    const source = mappingSource(item);
+                    const target = resolvedMappingTarget(item);
+                    const targetValue = selectableValue(target);
+                    const itemStatus = resolvedMappingStatus(item);
+                    const sourceLabel = textFromNode(source) || `mapping-${item.id}`;
+
+                    return (
+                      <tr key={item.id} data-status={itemStatus}>
+                        <td>
+                          <div className="eth-domain-mapping-config-wizard__field-stack">
+                            <strong>{source}</strong>
+                            {hasDisplayValue(item.sourceType) ? (
+                              <span>{item.sourceType}</span>
+                            ) : null}
+                            {hasDisplayValue(item.sample) ? <p>Sample: {item.sample}</p> : null}
+                          </div>
+                        </td>
+                        <td>
+                          <div className="eth-domain-mapping-config-wizard__target-field">
+                            <Select
+                              labelText={`Destination for ${sourceLabel}`}
+                              hideLabel
+                              density="compact"
+                              value={targetValue ?? ""}
+                              options={optionsForMapping(targetOptions, targetValue)}
+                              invalid={!hasDisplayValue(target)}
+                              invalidText="Select a destination field."
+                              onChange={(event) => {
+                                const nextTarget = event.currentTarget.value;
+                                setTargetOverrides((current) => ({
+                                  ...current,
+                                  [item.id]: nextTarget
+                                }));
+                                onMappingChange?.(item.id, nextTarget);
+                              }}
+                            />
+                            {hasDisplayValue(item.targetType) ? (
+                              <span>{item.targetType}</span>
+                            ) : null}
+                          </div>
+                        </td>
+                        <td>
+                          <div className="eth-domain-mapping-config-wizard__field-stack">
+                            <strong>{item.transform ?? "Direct copy"}</strong>
+                            {hasDisplayValue(item.description) ? <p>{item.description}</p> : null}
+                          </div>
+                        </td>
+                        <td>
+                          <div className="eth-domain-mapping-config-wizard__state">
+                            <StatusDot status={itemStatus} label={statusLabel(itemStatus)} />
+                            <div className="eth-domain-mapping-config-wizard__badges">
+                              {item.required ? <Badge severity="info">Required</Badge> : null}
+                              {hasDisplayValue(item.confidence) ? (
+                                <Badge severity={itemStatus === "warning" ? "warning" : "neutral"}>
+                                  {item.confidence}
+                                </Badge>
+                              ) : null}
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <p className="eth-domain-mapping-config-wizard__empty">No fields are ready to map.</p>
+          )}
+        </section>
+
+        <aside className="eth-domain-mapping-config-wizard__panel" aria-label="Validation issues">
+          <div className="eth-domain-mapping-config-wizard__panel-header">
+            <span>Validation</span>
+            <strong>{computedValidationSummary}</strong>
+          </div>
+          {validationIssues.length ? (
+            <ul
+              className="eth-domain-mapping-config-wizard__issues"
+              aria-label="Mapping validation issues"
+            >
+              {validationIssues.map((issue) => {
+                const issueStatus = issue.status ?? "warning";
+
+                return (
+                  <li key={issue.id} data-status={issueStatus}>
+                    <div>
+                      <strong>{issue.field}</strong>
+                      <span>{issue.message}</span>
+                    </div>
+                    {hasDisplayValue(issue.count) ? <span>{issue.count}</span> : null}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p className="eth-domain-mapping-config-wizard__empty-note">
+              No mapping validation issues.
+            </p>
+          )}
+        </aside>
+      </div>
+
+      {children}
+
+      <footer className="eth-domain-mapping-config-wizard__footer">
+        {footer ?? (
+          <>
+            <span>{computedValidationSummary}</span>
+            <div className="eth-domain-mapping-config-wizard__footer-actions">
+              <Button type="button" intent="ghost" density="compact">
+                Back
+              </Button>
+              <Button type="button" intent="secondary" density="compact" onClick={onValidate}>
+                Validate
+              </Button>
+              <Button
+                type="button"
+                intent="primary"
+                density="compact"
+                disabled={Boolean(unresolvedCount)}
+                onClick={onSubmit}
+              >
+                Apply mapping
+              </Button>
+            </div>
+          </>
+        )}
+      </footer>
+    </Surface>
+  );
+}
+
+export function ReportBuilder({
+  title = "Report builder",
+  description,
+  status,
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  items = [],
+  formatLabel = "PDF / CSV",
+  owner,
+  updatedAt,
+  onAddSection,
+  onExportPdf,
+  onExportCsv,
+  ...props
+}: ReportBuilderProps) {
+  const sectionsHeadingId = React.useId();
+  const previewHeadingId = React.useId();
+  const includedSections = items.filter((item) => isReportSectionIncluded(item.status));
+  const attentionCount = items.filter((item) => needsReportSectionAttention(item.status)).length;
+  const computedStatus = status ?? deriveReportBuilderStatus(items);
+  const readinessLabel = reportBuilderReadinessLabel(computedStatus, attentionCount);
+  const computedMetadata =
+    metadata ??
+    [
+      {
+        label: "Sections",
+        value: items.length
+          ? `${items.length} ${items.length === 1 ? "section" : "sections"}`
+          : "No sections"
+      },
+      {
+        label: "Included",
+        value: items.length ? `${includedSections.length}/${items.length}` : "0/0"
+      },
+      { label: "Readiness", value: readinessLabel },
+      { label: "Export", value: formatLabel }
+    ].filter((item) => hasDisplayValue(item.value));
+  const currentSectionIndex = items.findIndex(
+    (item) => item.status === "in-progress" || item.status === "running"
+  );
+  const currentIndex = currentSectionIndex >= 0 ? currentSectionIndex : 0;
+  const exportSummary = items.length
+    ? `${includedSections.length}/${items.length} sections included`
+    : "No sections selected";
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="ReportBuilder"
+      title={title}
+      description={description}
+      status={computedStatus}
+      metadata={computedMetadata.length ? computedMetadata : undefined}
+      actions={actions}
+      footer={footer}
+      className={["eth-domain-report-builder", className].filter(Boolean).join(" ")}
+    >
+      <div className="eth-domain-report-builder__workspace">
+        <section
+          className="eth-domain-report-builder__sections"
+          aria-labelledby={sectionsHeadingId}
+        >
+          <div className="eth-domain-report-builder__panel-header eth-domain-report-builder__panel-header--inline">
+            <div>
+              <span>Composition</span>
+              <h3 id={sectionsHeadingId}>Report sections</h3>
+            </div>
+            <Button
+              type="button"
+              intent="tertiary"
+              density="compact"
+              icon={<PlusIcon size={16} />}
+              onClick={onAddSection}
+            >
+              Add section
+            </Button>
+          </div>
+
+          {items.length ? (
+            <ol className="eth-domain-report-builder__section-list" aria-label="Report sections">
+              {items.map((item, index) => {
+                const itemStatus = item.status ?? "not-started";
+                const labelContent = item.href ? <a href={item.href}>{item.label}</a> : item.label;
+                const meta = reportSectionMeta(item, index);
+
+                return (
+                  <li
+                    key={item.id}
+                    aria-current={index === currentIndex ? "step" : undefined}
+                    className="eth-domain-report-builder__section-item"
+                    data-current={index === currentIndex ? "true" : undefined}
+                    data-status={itemStatus}
+                  >
+                    <span className="eth-domain-report-builder__section-index" aria-hidden="true">
+                      {index + 1}
+                    </span>
+                    <div className="eth-domain-report-builder__section-main">
+                      <strong>{labelContent}</strong>
+                      {item.description ? <p>{item.description}</p> : null}
+                      {hasDisplayValue(meta) ? (
+                        <span className="eth-domain-report-builder__section-meta">{meta}</span>
+                      ) : null}
+                    </div>
+                    <div className="eth-domain-report-builder__section-state">
+                      <StatusDot status={itemStatus} label={statusLabel(itemStatus)} />
+                      {item.required ? <Badge severity="info">Required</Badge> : null}
+                    </div>
+                  </li>
+                );
+              })}
+            </ol>
+          ) : (
+            <p className="eth-domain-report-builder__empty">No report sections configured.</p>
+          )}
+        </section>
+
+        <section className="eth-domain-report-builder__preview" aria-label="Report preview">
+          <div className="eth-domain-report-builder__panel-header eth-domain-report-builder__panel-header--inline">
+            <div>
+              <span>Preview</span>
+              <h3 id={previewHeadingId}>{title}</h3>
+            </div>
+            <StatusDot status={computedStatus} label={statusLabel(computedStatus)} />
+          </div>
+
+          <div
+            className="eth-domain-report-builder__preview-page"
+            aria-labelledby={previewHeadingId}
+          >
+            <span className="eth-domain-report-builder__preview-kicker">Draft report</span>
+            <strong className="eth-domain-report-builder__preview-title">{title}</strong>
+            <div className="eth-domain-report-builder__preview-meta">
+              {hasDisplayValue(owner) ? <span>Owner: {owner}</span> : null}
+              {hasDisplayValue(updatedAt) ? <span>Updated: {updatedAt}</span> : null}
+              <span>{formatLabel}</span>
+            </div>
+            {includedSections.length ? (
+              <div className="eth-domain-report-builder__preview-lines">
+                {includedSections.slice(0, 4).map((item, index) => (
+                  <div key={item.id} className="eth-domain-report-builder__preview-line">
+                    <span>{item.label}</span>
+                    <span>{reportSectionMeta(item, index)}</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="eth-domain-report-builder__empty-note">
+                Select at least one section to generate a preview.
+              </p>
+            )}
+          </div>
+
+          <div className="eth-domain-report-builder__export-bar" aria-label="Export actions">
+            <span>{exportSummary}</span>
+            <div className="eth-domain-report-builder__export-actions">
+              <Button
+                type="button"
+                intent="primary"
+                density="compact"
+                icon={<DownloadIcon size={16} />}
+                disabled={!includedSections.length}
+                onClick={onExportPdf}
+              >
+                Export PDF
+              </Button>
+              <Button
+                type="button"
+                intent="secondary"
+                density="compact"
+                icon={<TableIcon size={16} />}
+                disabled={!includedSections.length}
+                onClick={onExportCsv}
+              >
+                Export CSV
+              </Button>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      {children}
+    </Surface>
+  );
+}
+
+export function ApprovalWorkflowEditor({
+  title = "Approval workflow",
+  description = "Configure approval routing, ownership, and conditional gates.",
+  steps,
+  approverOptions = defaultApproverOptions,
+  mode,
+  onChange,
+  onModeChange,
+  className,
+  status,
+  ...props
+}: ApprovalWorkflowEditorProps) {
+  const [internalSteps, setInternalSteps] = React.useState<ApprovalWorkflowStep[]>(() =>
+    defaultApprovalSteps.map((step) => ({ ...step }))
+  );
+  const [internalMode, setInternalMode] = React.useState<ApprovalWorkflowMode>("sequential");
+  const currentSteps = steps ?? internalSteps;
+  const currentMode = mode ?? internalMode;
+  const missingApproverCount = currentSteps.filter((step) => !step.approver).length;
+  const requiredCount = currentSteps.filter((step) => step.required).length;
+  const readyCount = currentSteps.length - missingApproverCount;
+  const validationMessage = missingApproverCount
+    ? `${missingApproverCount} approval ${missingApproverCount === 1 ? "step needs" : "steps need"} an approver.`
+    : "All approval steps have owners and can be simulated.";
+
+  const commitSteps = (nextSteps: ApprovalWorkflowStep[]) => {
+    if (!steps) setInternalSteps(nextSteps);
+    onChange?.(nextSteps);
+  };
+
+  const updateStep = (index: number, next: ApprovalWorkflowStep) => {
+    const nextSteps = [...currentSteps];
+    nextSteps[index] = next;
+    commitSteps(nextSteps);
+  };
+
+  const addStep = () => {
+    commitSteps([
+      ...currentSteps,
+      {
+        id: nextApprovalStepId(currentSteps),
+        label: "Approval step",
+        approver: "",
+        condition: "Define routing condition",
+        required: true,
+        status: "queued"
+      }
+    ]);
+  };
+
+  const removeStep = (id: string) => {
+    commitSteps(currentSteps.filter((step) => step.id !== id));
+  };
+
+  const changeMode = (nextMode: ApprovalWorkflowMode) => {
+    if (!mode) setInternalMode(nextMode);
+    onModeChange?.(nextMode);
+  };
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="ApprovalWorkflowEditor"
+      title={title}
+      description={description}
+      status={status ?? (missingApproverCount ? "pending-approval" : "active")}
+      metadata={[
+        { label: "Steps", value: currentSteps.length },
+        { label: "Required gates", value: requiredCount },
+        { label: "Ready", value: `${readyCount}/${currentSteps.length || 0}` }
+      ]}
+      className={`eth-domain-approval-workflow-editor ${className ?? ""}`}
+    >
+      <div className="eth-domain-approval-workflow-editor__settings">
+        <Select
+          labelText="Routing mode"
+          density="compact"
+          value={currentMode}
+          options={modeOptions}
+          onChange={(event) => changeMode(event.currentTarget.value as ApprovalWorkflowMode)}
+        />
+        <div className="eth-domain-approval-workflow-editor__validation" role="status">
+          <span>Validation</span>
+          <strong>{validationMessage}</strong>
+        </div>
+      </div>
+
+      {currentSteps.length ? (
+        <>
+          <div className="eth-domain-approval-workflow-editor__route" aria-label="Approval route">
+            {currentSteps.map((step, index) => (
+              <React.Fragment key={step.id}>
+                <span className="eth-domain-approval-workflow-editor__route-node">
+                  <strong>{index + 1}</strong>
+                  <span>{step.label}</span>
+                </span>
+                {index < currentSteps.length - 1 ? (
+                  <span
+                    className="eth-domain-approval-workflow-editor__route-arrow"
+                    aria-hidden="true"
+                  >
+                    -&gt;
+                  </span>
+                ) : null}
+              </React.Fragment>
+            ))}
+          </div>
+
+          <ol className="eth-domain-approval-workflow-editor__steps">
+            {currentSteps.map((step, index) => (
+              <li key={step.id} className="eth-domain-approval-workflow-editor__step">
+                <div className="eth-domain-approval-workflow-editor__step-index" aria-hidden="true">
+                  {index + 1}
+                </div>
+                <div className="eth-domain-approval-workflow-editor__step-main">
+                  <div className="eth-domain-approval-workflow-editor__step-header">
+                    <div>
+                      <span>Gate {index + 1}</span>
+                      <strong>{formatApprovalStatus(step.status, step.required)}</strong>
+                    </div>
+                    <Button
+                      type="button"
+                      intent="ghost"
+                      density="compact"
+                      disabled={currentSteps.length <= 1}
+                      onClick={() => removeStep(step.id)}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                  <div className="eth-domain-approval-workflow-editor__fields">
+                    <TextInput
+                      labelText="Step name"
+                      density="compact"
+                      value={step.label}
+                      onChange={(event) =>
+                        updateStep(index, { ...step, label: event.currentTarget.value })
+                      }
+                    />
+                    <Select
+                      labelText="Approver"
+                      density="compact"
+                      value={step.approver ?? ""}
+                      options={approverOptions}
+                      invalid={!step.approver}
+                      invalidText="Choose an approver."
+                      onChange={(event) =>
+                        updateStep(index, { ...step, approver: event.currentTarget.value })
+                      }
+                    />
+                    <TextInput
+                      labelText="Condition"
+                      density="compact"
+                      value={step.condition ?? ""}
+                      onChange={(event) =>
+                        updateStep(index, { ...step, condition: event.currentTarget.value })
+                      }
+                    />
+                  </div>
+                  <div className="eth-domain-approval-workflow-editor__step-footer">
+                    <Checkbox
+                      label="Required gate"
+                      checked={Boolean(step.required)}
+                      onChange={(event) =>
+                        updateStep(index, { ...step, required: event.currentTarget.checked })
+                      }
+                    />
+                    <span>Escalates to workflow owner when overdue by 24h.</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </>
+      ) : (
+        <div className="eth-domain-approval-workflow-editor__empty">
+          No approval steps configured.
+        </div>
+      )}
+
+      <div className="eth-domain-approval-workflow-editor__footer">
+        <Button type="button" intent="secondary" density="compact" onClick={addStep}>
+          Add approval
+        </Button>
+        <Button
+          type="button"
+          intent="tertiary"
+          density="compact"
+          disabled={Boolean(missingApproverCount)}
+        >
+          Simulate route
+        </Button>
+      </div>
+    </Surface>
+  );
+}
+
+export function ProcessDesigner({
+  title = "Business process",
+  description = "Design, validate, and inspect a multi-step process.",
+  items,
+  connections,
+  validationIssues: validationIssuesProp,
+  selectedItemId,
+  metadata,
+  actions,
+  footer,
+  children,
+  className,
+  status,
+  onAddStep,
+  onValidate,
+  ...props
+}: ProcessDesignerProps) {
+  const canvasTitleId = React.useId();
+  const graphTitleId = React.useId();
+  const graphDescriptionId = React.useId();
+  const markerId = React.useId().replace(/:/g, "");
+  const panelTitleId = React.useId();
+  const processItems = items ?? defaultProcessItems;
+  const validationIssues =
+    validationIssuesProp ?? (items ? [] : defaultProcessValidationIssues);
+  const processConnections =
+    connections ?? (items ? sequentialProcessConnections(processItems) : defaultProcessConnections);
+  const titleText = textFromNode(title).trim() || "Business process";
+  const [internalSelectedId, setInternalSelectedId] = React.useState<string | undefined>(
+    selectedItemId ?? processItems[0]?.id
+  );
+
+  React.useEffect(() => {
+    if (selectedItemId) {
+      setInternalSelectedId(selectedItemId);
+      return;
+    }
+
+    setInternalSelectedId((current) =>
+      processItems.some((item) => item.id === current) ? current : processItems[0]?.id
+    );
+  }, [processItems, selectedItemId]);
+
+  const activeItem =
+    processItems.find((item) => item.id === (selectedItemId ?? internalSelectedId)) ??
+    processItems[0];
+  const completedCount = processItems.filter((item) => isCompletedProcessStep(item.status)).length;
+  const decisionCount = processItems.filter(
+    (item, index) => processStepKind(item, index, processItems.length) === "decision"
+  ).length;
+  const processStatus = status ?? deriveProcessStatus(processItems, validationIssues);
+  const validationLabel = validationIssues.length
+    ? `${validationIssues.length} open ${validationIssues.length === 1 ? "issue" : "issues"}`
+    : "No open issues";
+
+  const selectNode = (id: string) => {
+    if (!selectedItemId) setInternalSelectedId(id);
+  };
+
+  return (
+    <Surface
+      {...props}
+      data-eth-component="ProcessDesigner"
+      title={title}
+      description={description}
+      status={processStatus}
+      metadata={
+        metadata ?? [
+          { label: "Steps", value: processItems.length },
+          { label: "Completed", value: `${completedCount}/${processItems.length || 0}` },
+          { label: "Branches", value: decisionCount },
+          { label: "Validation", value: validationLabel }
+        ]
+      }
+      actions={actions}
+      footer={
+        footer ?? (
+          <div className="eth-domain-process-designer__footer">
+            <span>Draft process: {titleText}</span>
+            <span>Last validated 12 minutes ago</span>
+          </div>
+        )
+      }
+      className={`eth-domain-process-designer ${className ?? ""}`}
+    >
+      <div className="eth-domain-process-designer__workspace">
+        <section
+          className="eth-domain-process-designer__canvas-shell"
+          aria-labelledby={canvasTitleId}
+        >
+          <div className="eth-domain-process-designer__toolbar">
+            <div>
+              <span>Canvas</span>
+              <strong id={canvasTitleId}>
+                {processItems.length ? titleText : "No workflow steps"}
+              </strong>
+            </div>
+            <div className="eth-domain-process-designer__toolbar-actions">
+              {processStatus ? <StatusDot status={processStatus} label={validationLabel} /> : null}
+              <Button type="button" intent="secondary" density="compact" onClick={onAddStep}>
+                Add step
+              </Button>
+              <Button type="button" intent="tertiary" density="compact" onClick={onValidate}>
+                Validate
+              </Button>
+            </div>
+          </div>
+
+          {processItems.length ? (
+            <div className="eth-domain-process-designer__canvas">
+              <svg
+                viewBox="0 0 920 340"
+                role="group"
+                aria-labelledby={graphTitleId}
+                aria-describedby={graphDescriptionId}
+              >
+                <title id={graphTitleId}>Business process graph</title>
+                <desc id={graphDescriptionId}>
+                  Process graph with {processItems.length} steps and {processConnections.length}{" "}
+                  connections.
+                </desc>
+                <defs>
+                  <marker
+                    id={markerId}
+                    viewBox="0 0 10 10"
+                    refX="8"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 0 L 10 5 L 0 10 z" />
+                  </marker>
+                </defs>
+
+                {processConnections.map((connection, index) => {
+                  const fromIndex = processItems.findIndex((item) => item.id === connection.from);
+                  const toIndex = processItems.findIndex((item) => item.id === connection.to);
+                  const from = processItems[fromIndex];
+                  const to = processItems[toIndex];
+                  if (!from || !to) return null;
+
+                  const fromPoint = processNodePoint(from, fromIndex);
+                  const toPoint = processNodePoint(to, toIndex);
+                  const midX = (fromPoint.x + toPoint.x) / 2;
+                  const midY = (fromPoint.y + toPoint.y) / 2;
+                  const label = textFromNode(connection.label).trim();
+
+                  return (
+                    <g
+                      key={`${connection.from}-${connection.to}-${index}`}
+                      className="eth-domain-process-designer__edge"
+                      data-status={connection.status}
+                    >
+                      <line
+                        x1={fromPoint.x}
+                        y1={fromPoint.y}
+                        x2={toPoint.x}
+                        y2={toPoint.y}
+                        markerEnd={`url(#${markerId})`}
+                      />
+                      {label ? (
+                        <text x={midX} y={midY - 10} textAnchor="middle">
+                          {label}
+                        </text>
+                      ) : null}
+                    </g>
+                  );
+                })}
+
+                {processItems.map((item, index) => {
+                  const point = processNodePoint(item, index);
+                  const kind = processStepKind(item, index, processItems.length);
+                  const selected = activeItem?.id === item.id;
+                  const lines = graphLabelLines(item.label, item.id);
+
+                  return (
+                    <g
+                      key={item.id}
+                      className="eth-domain-process-designer__node"
+                      data-kind={kind}
+                      data-status={item.status}
+                      data-selected={selected ? "true" : undefined}
+                      transform={`translate(${point.x}, ${point.y})`}
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`${textFromNode(item.label) || item.id}, ${statusLabel(
+                        item.status ?? "queued"
+                      )}`}
+                      onClick={() => selectNode(item.id)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          selectNode(item.id);
+                        }
+                      }}
+                    >
+                      {kind === "decision" ? (
+                        <polygon points="0,-44 78,0 0,44 -78,0" />
+                      ) : (
+                        <rect x="-72" y="-36" width="144" height="72" rx="0" />
+                      )}
+                      <circle
+                        className="eth-domain-process-designer__node-status"
+                        cx={kind === "decision" ? -44 : -52}
+                        cy={kind === "decision" ? -18 : -18}
+                        r="5"
+                      />
+                      <text textAnchor="middle">
+                        {lines.map((line, lineIndex) => (
+                          <tspan
+                            key={`${line}-${lineIndex}`}
+                            x="0"
+                            dy={
+                              lineIndex === 0
+                                ? lines.length > 1
+                                  ? "-0.35em"
+                                  : "0.35em"
+                                : "1.2em"
+                            }
+                          >
+                            {line}
+                          </tspan>
+                        ))}
+                      </text>
+                    </g>
+                  );
+                })}
+              </svg>
+            </div>
+          ) : (
+            <div className="eth-domain-process-designer__empty">No process steps configured.</div>
+          )}
+        </section>
+
+        <aside className="eth-domain-process-designer__inspector" aria-labelledby={panelTitleId}>
+          <div className="eth-domain-process-designer__panel-header">
+            <span>Step properties</span>
+            <h3 id={panelTitleId}>{activeItem ? activeItem.label : "No step selected"}</h3>
+          </div>
+          {activeItem ? (
+            <>
+              <StatusDot
+                status={activeItem.status ?? "queued"}
+                label={statusLabel(activeItem.status ?? "queued")}
+              />
+              {activeItem.description ? (
+                <p className="eth-domain-process-designer__description">
+                  {activeItem.description}
+                </p>
+              ) : null}
+              <dl className="eth-domain-process-designer__facts">
+                <div>
+                  <dt>Owner</dt>
+                  <dd>{activeItem.owner ?? "Unassigned"}</dd>
+                </div>
+                <div>
+                  <dt>Lane</dt>
+                  <dd>{activeItem.lane ?? "Default lane"}</dd>
+                </div>
+                <div>
+                  <dt>SLA</dt>
+                  <dd>{activeItem.duration ?? activeItem.meta ?? "Not set"}</dd>
+                </div>
+              </dl>
+            </>
+          ) : (
+            <p className="eth-domain-process-designer__description">
+              No selected step.
+            </p>
+          )}
+
+          <section className="eth-domain-process-designer__validation" aria-label="Validation">
+            <div className="eth-domain-process-designer__panel-header">
+              <span>Validation</span>
+              <strong>{validationLabel}</strong>
+            </div>
+            {validationIssues.length ? (
+              <ul>
+                {validationIssues.map((issue) => (
+                  <li key={issue.id} data-status={issue.status ?? "warning"}>
+                    <StatusDot
+                      status={issue.status ?? "warning"}
+                      label={statusLabel(issue.status ?? "warning")}
+                    />
+                    <div>
+                      {issue.target ? <strong>{issue.target}</strong> : null}
+                      <span>{issue.message}</span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="eth-domain-process-designer__empty-note">
+                No validation issues detected.
+              </p>
+            )}
+          </section>
+        </aside>
+      </div>
+
+      {children}
+    </Surface>
+  );
+}
+
+export const SalesPipelineBoard = createSurfaceComponent("SalesPipelineBoard");
+export const ContractReviewPanel = createSurfaceComponent("ContractReviewPanel");
+export const RuleSimulationPanel = createSurfaceComponent("RuleSimulationPanel");
+
+export type SalesPipelineBoardProps = SurfaceComponentProps;
+export type ContractReviewPanelProps = SurfaceComponentProps;
+export type RuleSimulationPanelProps = SurfaceComponentProps;
+
+export const DomainWidgetsComponentNames = [
+  "CRMContactPanel",
+  "SalesPipelineBoard",
+  "SupportTicketQueue",
+  "KnowledgeBaseArticleViewer",
+  "InventoryTable",
+  "OrderManagementPanel",
+  "InvoiceViewer",
+  "ContractReviewPanel",
+  "ComplianceChecklist",
+  "RiskMatrix",
+  "ApprovalWorkflowEditor",
+  "DataImportWizard",
+  "MappingConfigurationWizard",
+  "ReportBuilder",
+  "ProcessDesigner",
+  "RuleSimulationPanel"
+] as const;
+export type DomainWidgetsComponentName = (typeof DomainWidgetsComponentNames)[number];