@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/session-kit/approvals/ApprovalCard.tsx

@@ -1,341 +0,0 @@
-/**
- * The GENERIC approval frame — identical platform-wide.
- *
- * Header: "Approval required" + RiskPill (reused from the kit) + mono
- * capability ref + serif title + summary. Then the biome-supplied
- * `ScopedBody`. Then obligations chips (closed `PolicyObligationKind`
- * taxonomy), approver role, and quorum dots. Actions: Deny / Allow once /
- * Approve — low risk gets "Approve & remember"; high & critical are
- * explicit Approve only (no allow-once-remember). The accent rail uses the
- * SAME risk→colour mapping as the pill.
- *
- * Resolved state collapses to a compact confirmation row; a
- * quorum-approved request reads "approved · waiting on N more approver".
- *
- * Controlled OR uncontrolled: pass `decision` to control the resolved
- * state from the host (the real flow), or omit it and the card tracks its
- * own optimistic resolved state. `onResolve(decision, request)` always
- * fires.
- */
-import { useState, type ReactElement } from 'react';
-
-import {
-  ApprovalDecision,
-  isExplicitApprovalTier,
-  isQuorum,
-  type ApprovalRequest,
-} from './approval-model';
-import { ApprovalButton } from './ApprovalButton';
-import { Obligation, QuorumDots } from './Obligation';
-import { RISK_ACCENT } from './risk-accent';
-import { ScopedBody } from './ScopedBody';
-import { RiskPill } from '../primitives/RiskPill';
-
-import type { ApprovalIcons } from './approval-icons';
-
-export interface ApprovalCardProps {
-  readonly request: ApprovalRequest;
-  readonly icons: ApprovalIcons;
-  /** Resolution callback. Fires before/after the host updates `decision`. */
-  readonly onResolve: (
-    decision: ApprovalDecision,
-    request: ApprovalRequest,
-  ) => void;
-  /**
-   * Controlled resolved state. Omit for uncontrolled (the card collapses
-   * optimistically on click). The real host flow passes the server-known
-   * decision so the collapse reflects committed state.
-   */
-  readonly decision?: ApprovalDecision | null;
-  /** Portal/brand accent for the (non-critical) primary approve button. */
-  readonly accent?: string;
-}
-
-export function ApprovalCard({
-  request,
-  icons,
-  onResolve,
-  decision,
-  accent = 'hsl(var(--primary))',
-}: ApprovalCardProps): ReactElement {
-  const [localDecision, setLocalDecision] = useState<ApprovalDecision | null>(
-    null,
-  );
-  const resolved = decision ?? localDecision;
-  const r = RISK_ACCENT[request.riskTier];
-  const explicit = isExplicitApprovalTier(request.riskTier);
-  const quorum = isQuorum(request);
-  const approveLabel = resolveApproveLabel(request, quorum, explicit);
-
-  function resolve(d: ApprovalDecision): void {
-    if (decision === undefined) {
-      setLocalDecision(d);
-    }
-    onResolve(d, request);
-  }
-
-  if (resolved) {
-    const approved = resolved === ApprovalDecision.Approved;
-    const remaining =
-      (request.requireApproverCount ?? 1) - ((request.approvalsIn ?? 0) + 1);
-    const approvedLabel =
-      quorum && remaining > 0
-        ? `approved · waiting on ${remaining} more approver${remaining === 1 ? '' : 's'}`
-        : 'approved, capability resumed';
-    return (
-      <div
-        style={{
-          marginTop: 9,
-          display: 'flex',
-          alignItems: 'center',
-          gap: 10,
-          padding: '11px 14px',
-          borderRadius: 11,
-          border: `1px solid ${
-            approved ? 'hsl(var(--success) / 0.3)' : 'hsl(var(--rule))'
-          }`,
-          background: approved
-            ? 'hsl(var(--success) / 0.06)'
-            : 'hsl(var(--muted))',
-        }}
-      >
-        <span
-          style={{
-            color: approved ? 'hsl(var(--success))' : 'hsl(var(--ink-3))',
-            display: 'inline-flex',
-          }}
-        >
-          {approved ? icons.approved(17) : icons.denied(17)}
-        </span>
-        <span style={{ fontSize: 13, color: 'hsl(var(--ink-2))' }}>
-          <strong style={{ color: 'hsl(var(--ink))', fontWeight: 600 }}>
-            {request.title}
-          </strong>{' '}
-          — {approved ? approvedLabel : 'denied'}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        marginTop: 9,
-        borderRadius: 12,
-        overflow: 'hidden',
-        border: `1px solid ${explicit ? r.bd : 'hsl(var(--rule-2))'}`,
-        boxShadow: 'var(--shadow-2)',
-        background: 'hsl(var(--paper-elev))',
-      }}
-    >
-      <div style={{ display: 'flex' }}>
-        {/* accent rail — same risk→colour mapping as the pill */}
-        <div
-          style={{
-            width: 3,
-            flexShrink: 0,
-            background: explicit ? r.fg : 'hsl(var(--rule-2))',
-          }}
-        />
-        <div style={{ flex: 1, minWidth: 0 }}>
-          {/* header — generic */}
-          <div
-            style={{
-              padding: '11px 14px 9px',
-              borderBottom: '1px solid hsl(var(--rule))',
-            }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                marginBottom: 6,
-              }}
-            >
-              <span
-                style={{
-                  color: explicit ? r.fg : 'hsl(var(--primary))',
-                  display: 'inline-flex',
-                }}
-              >
-                {icons.shield(16)}
-              </span>
-              <span
-                className="cap"
-                style={{ color: 'hsl(var(--ink-3))', letterSpacing: '0.1em' }}
-              >
-                Approval required
-              </span>
-              <RiskPill tier={request.riskTier} size="xs" />
-              <span style={{ flex: 1 }} />
-              <span
-                className="mono"
-                style={{
-                  fontSize: 10.5,
-                  color: 'hsl(var(--ink-4))',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 4,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  maxWidth: '50%',
-                }}
-              >
-                {icons.capability(11)}
-                {request.capability}
-              </span>
-            </div>
-            <div
-              className="serif"
-              style={{
-                fontSize: 15,
-                fontWeight: 600,
-                color: 'hsl(var(--ink))',
-                lineHeight: 1.3,
-              }}
-            >
-              {request.title}
-            </div>
-            <div
-              style={{
-                fontSize: 12.5,
-                color: 'hsl(var(--ink-3))',
-                marginTop: 2,
-              }}
-            >
-              {request.summary}
-            </div>
-          </div>
-
-          {/* SCOPED biome body */}
-          <div
-            style={{
-              padding: '10px 14px',
-              background: 'hsl(var(--paper) / 0.5)',
-            }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-                marginBottom: 8,
-              }}
-            >
-              <span
-                className="cap"
-                style={{ fontSize: 9.5, color: 'hsl(var(--ink-4))' }}
-              >
-                Details from {request.biomeName}
-              </span>
-              <span
-                style={{ flex: 1, height: 1, background: 'hsl(var(--rule))' }}
-              />
-            </div>
-            <ScopedBody scope={request.scope} renderIcon={icons.scope} />
-          </div>
-
-          {/* obligations + approver requirement — generic */}
-          <div
-            style={{
-              padding: '10px 14px',
-              borderTop: '1px solid hsl(var(--rule))',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 9,
-            }}
-          >
-            {request.obligations && request.obligations.length > 0 && (
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-                {request.obligations.map((o) => (
-                  <Obligation
-                    key={o.kind}
-                    obligation={o}
-                    renderIcon={icons.obligation}
-                  />
-                ))}
-              </div>
-            )}
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 10,
-                flexWrap: 'wrap',
-              }}
-            >
-              {request.requireRole && (
-                <span
-                  style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 5,
-                    fontSize: 12,
-                    color: 'hsl(var(--ink-3))',
-                  }}
-                >
-                  {icons.user(13)}approver role{' '}
-                  <span className="mono" style={{ color: 'hsl(var(--ink-2))' }}>
-                    {request.requireRole}
-                  </span>
-                </span>
-              )}
-              {quorum && (
-                <QuorumDots
-                  have={request.approvalsIn ?? 0}
-                  need={request.requireApproverCount ?? 1}
-                  usersIcon={icons.users(13)}
-                />
-              )}
-              <span style={{ flex: 1 }} />
-              <ApprovalButton
-                variant="ghost"
-                size="sm"
-                onClick={() => resolve(ApprovalDecision.Denied)}
-              >
-                Deny
-              </ApprovalButton>
-              {!explicit && (
-                <ApprovalButton
-                  variant="soft"
-                  size="sm"
-                  icon={icons.check(13)}
-                  onClick={() => resolve(ApprovalDecision.Approved)}
-                >
-                  Allow once
-                </ApprovalButton>
-              )}
-              <ApprovalButton
-                variant="primary"
-                size="sm"
-                icon={icons.shield(13)}
-                accent={explicit ? r.fg : accent}
-                onClick={() => resolve(ApprovalDecision.Approved)}
-              >
-                {approveLabel}
-              </ApprovalButton>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * The primary-button label: a quorum step ("Approve (1 of 2)"), a plain
- * "Approve" for explicit (high/critical) tiers, or "Approve & remember"
- * for low/medium where allow-once-remember is offered.
- */
-function resolveApproveLabel(
-  request: ApprovalRequest,
-  quorum: boolean,
-  explicit: boolean,
-): string {
-  if (quorum) {
-    return `Approve (${(request.approvalsIn ?? 0) + 1} of ${request.requireApproverCount})`;
-  }
-  return explicit ? 'Approve' : 'Approve & remember';
-}

package/src/session-kit/approvals/ApprovalsCenter.tsx

@@ -1,336 +0,0 @@
-/**
- * Approvals Center body — the cross-portal batch-review list.
- *
- * This is the GENERIC, prop-driven body (toolbar + rows + empty state). It
- * does NOT own the drawer chrome: the host wraps it in its own `Sheet`
- * (the host carries the overlay/focus-trap/portal primitive). That keeps
- * the kit free of any host UI dependency while the batching/selection
- * logic stays generic and reusable.
- *
- * Batches approvals ACROSS all portals/sessions: each row carries its
- * portal + biome + quorum and an "Open session" affordance. "Select
- * low-risk" selects every low/medium item; bulk "Approve N" resolves the
- * selection. The row model (`ApprovalCenterItem`) already carries
- * portalId/name/accent so host portals can group by portal without a reshape.
- */
-import { CapabilityRiskTier } from '@xemahq/kernel-contracts/capability';
-import { useCallback, useState, type ReactElement } from 'react';
-
-import { ApprovalDecision, type ApprovalCenterItem } from './approval-model';
-import { ApprovalButton } from './ApprovalButton';
-import { RiskPill } from '../primitives/RiskPill';
-
-import type { ApprovalIcons } from './approval-icons';
-
-export interface ApprovalsCenterProps {
-  readonly items: readonly ApprovalCenterItem[];
-  readonly icons: Pick<ApprovalIcons, 'check' | 'approved'>;
-  /** Resolve a single item (also used by the bulk action per-item). */
-  readonly onResolve: (
-    decision: ApprovalDecision,
-    item: ApprovalCenterItem,
-  ) => void;
-  /** "Open session" — host navigates to the suspended capability's session. */
-  readonly onOpen?: (item: ApprovalCenterItem) => void;
-}
-
-const LOW_RISK: ReadonlySet<CapabilityRiskTier> = new Set([
-  CapabilityRiskTier.Low,
-  CapabilityRiskTier.Medium,
-]);
-
-export function ApprovalsCenter({
-  items,
-  icons,
-  onResolve,
-  onOpen,
-}: ApprovalsCenterProps): ReactElement {
-  const [selected, setSelected] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-
-  const toggle = useCallback((id: string) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  const selectLowRisk = useCallback(() => {
-    setSelected(
-      new Set(
-        items
-          .filter((it) => LOW_RISK.has(it.request.riskTier))
-          .map((it) => it.id),
-      ),
-    );
-  }, [items]);
-
-  const approveSelected = useCallback(() => {
-    for (const id of selected) {
-      const it = items.find((x) => x.id === id);
-      if (it) {
-        onResolve(ApprovalDecision.Approved, it);
-      }
-    }
-    setSelected(new Set());
-  }, [selected, items, onResolve]);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        minHeight: 0,
-      }}
-    >
-      {/* selection toolbar */}
-      <div
-        style={{
-          padding: '9px 16px',
-          borderBottom: '1px solid hsl(var(--rule))',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 9,
-        }}
-      >
-        <span style={{ fontSize: 12, color: 'hsl(var(--ink-3))' }}>
-          {selected.size} selected
-        </span>
-        <span style={{ flex: 1 }} />
-        <ApprovalButton
-          variant="ghost"
-          size="xs"
-          onClick={selectLowRisk}
-          disabled={items.length === 0}
-        >
-          Select low-risk
-        </ApprovalButton>
-        <ApprovalButton
-          variant="primary"
-          size="xs"
-          icon={icons.check(12)}
-          disabled={selected.size === 0}
-          onClick={approveSelected}
-        >
-          Approve {selected.size || ''}
-        </ApprovalButton>
-      </div>
-
-      {/* rows */}
-      <div
-        style={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: 'auto',
-          padding: 12,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 9,
-        }}
-      >
-        {items.length === 0 ? (
-          <div
-            style={{
-              textAlign: 'center',
-              padding: '48px 0',
-              color: 'hsl(var(--ink-3))',
-            }}
-          >
-            <span
-              style={{
-                color: 'hsl(var(--success))',
-                display: 'inline-flex',
-                marginBottom: 10,
-              }}
-            >
-              {icons.approved(26)}
-            </span>
-            <div style={{ fontSize: 13.5 }}>Nothing waiting on you.</div>
-          </div>
-        ) : (
-          items.map((it) => (
-            <ApprovalRow
-              key={it.id}
-              item={it}
-              checked={selected.has(it.id)}
-              onToggle={() => toggle(it.id)}
-              onResolve={onResolve}
-              {...(onOpen ? { onOpen } : {})}
-              icons={icons}
-            />
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface ApprovalRowProps {
-  readonly item: ApprovalCenterItem;
-  readonly checked: boolean;
-  readonly onToggle: () => void;
-  readonly onResolve: (
-    decision: ApprovalDecision,
-    item: ApprovalCenterItem,
-  ) => void;
-  readonly onOpen?: (item: ApprovalCenterItem) => void;
-  readonly icons: Pick<ApprovalIcons, 'check'>;
-}
-
-function ApprovalRow({
-  item,
-  checked,
-  onToggle,
-  onResolve,
-  onOpen,
-  icons,
-}: ApprovalRowProps): ReactElement {
-  const { request } = item;
-  const quorum = (request.requireApproverCount ?? 1) > 1;
-  return (
-    <div
-      style={{
-        border: `1px solid ${
-          checked ? 'hsl(var(--primary) / 0.4)' : 'hsl(var(--rule))'
-        }`,
-        borderRadius: 10,
-        background: 'hsl(var(--paper-elev))',
-        boxShadow: checked
-          ? '0 0 0 1px hsl(var(--primary) / 0.2)'
-          : 'var(--shadow-2)',
-        overflow: 'hidden',
-      }}
-    >
-      <div style={{ display: 'flex', gap: 10, padding: '11px 12px' }}>
-        <button
-          type="button"
-          onClick={onToggle}
-          aria-pressed={checked}
-          aria-label={checked ? 'Deselect' : 'Select'}
-          style={{
-            width: 18,
-            height: 18,
-            borderRadius: 5,
-            marginTop: 1,
-            flexShrink: 0,
-            display: 'grid',
-            placeItems: 'center',
-            border: checked ? 'none' : '1.5px solid hsl(var(--rule-2))',
-            background: checked ? 'hsl(var(--primary))' : 'transparent',
-            color: '#fff',
-            cursor: 'pointer',
-          }}
-        >
-          {checked && icons.check(12)}
-        </button>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 7,
-              marginBottom: 3,
-            }}
-          >
-            <span
-              style={{
-                fontSize: 13.5,
-                fontWeight: 600,
-                color: 'hsl(var(--ink))',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                minWidth: 0,
-              }}
-            >
-              {request.title}
-            </span>
-            <RiskPill tier={request.riskTier} size="xs" />
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 7,
-              fontSize: 11.5,
-              color: 'hsl(var(--ink-3))',
-              flexWrap: 'wrap',
-            }}
-          >
-            {(item.portalName || item.portalAccentVar) && (
-              <span
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 4,
-                }}
-              >
-                {item.portalAccentVar && (
-                  <span
-                    style={{
-                      width: 7,
-                      height: 7,
-                      borderRadius: 2,
-                      background: `hsl(${item.portalAccentVar})`,
-                    }}
-                  />
-                )}
-                {item.portalName}
-              </span>
-            )}
-            {item.portalName && <span>·</span>}
-            <span>{request.biomeName}</span>
-            {quorum && (
-              <>
-                <span>·</span>
-                <span className="mono">
-                  {request.approvalsIn ?? 0}/{request.requireApproverCount}
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          gap: 7,
-          padding: '0 12px 11px',
-          justifyContent: 'flex-end',
-        }}
-      >
-        {onOpen && (
-          <ApprovalButton
-            variant="ghost"
-            size="xs"
-            onClick={() => onOpen(item)}
-          >
-            Open session
-          </ApprovalButton>
-        )}
-        <ApprovalButton
-          variant="ghost"
-          size="xs"
-          onClick={() => onResolve(ApprovalDecision.Denied, item)}
-        >
-          Deny
-        </ApprovalButton>
-        <ApprovalButton
-          variant="soft"
-          size="xs"
-          icon={icons.check(12)}
-          onClick={() => onResolve(ApprovalDecision.Approved, item)}
-        >
-          Approve
-        </ApprovalButton>
-      </div>
-    </div>
-  );
-}