{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "side-panel",
  "type": "registry:component",
  "title": "Side panel",
  "description": "Record detail beside the table, never a navigation: scrimless, the amount is the hero, arrow-key row stepping.",
  "registryDependencies": [
    "@venlyfinance/venly-tokens",
    "@venlyfinance/money"
  ],
  "files": [
    {
      "path": "registry/components/side-panel.tsx",
      "type": "registry:component",
      "target": "~/components/venly/components/side-panel.tsx",
      "content": "import type { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { Money } from \"../lib/money.js\";\n\n/**\n * Side panel – record detail beside the table, not instead of it.\n *\n * Design contract encoded by this component:\n * - Clicking a row opens this panel; it never navigates.\n * - NO scrim: the table stays visible and clipped at the panel edge; the\n *   source row stays tinted (the table owns that via selectedKey).\n * - Width ~27–30% of the viewport for a record.\n * - Header: thin micro-size grey context line + close control, then the\n *   HERO IS THE AMOUNT (~28px), not the counterparty, then a grey\n *   qualifier line.\n * - The panel edge is an overlay boundary, so it is the one base-layer\n *   element allowed a shadow.\n * - Footer strip with `↑ ↓ Esc` key chips so a reviewer steps row to row\n *   without closing the panel.\n */\nexport interface SidePanelProps {\n  /** Thin grey context line, e.g. \"Transfer · 7 Aug 2026\". */\n  context: string;\n  amount?: number | null;\n  /** Rendered before the hero amount, e.g. an explicit \"+\" on settled credits. */\n  amountPrefix?: string;\n  currency?: string;\n  /** Grey line under the hero amount, e.g. the counterparty. */\n  qualifier?: ReactNode;\n  onClose?: () => void;\n  /** Render the ↑ ↓ Esc footer strip. Default true. */\n  keyboardFooter?: boolean;\n  children?: ReactNode;\n  style?: CSSProperties;\n  className?: string;\n}\n\nfunction KeyChip({ label }: { label: string }): ReactElement {\n  return (\n    <kbd\n      style={{\n        border: \"var(--border-w-hairline) solid var(--border-hairline)\",\n        borderRadius: \"var(--radius-pill)\",\n        padding: \"var(--pill-pad)\",\n        fontSize: \"var(--font-size-micro)\",\n        color: \"var(--text-secondary)\",\n        fontFamily: \"var(--font-family)\",\n        background: \"var(--surface-sunken)\",\n      }}\n    >\n      {label}\n    </kbd>\n  );\n}\n\nexport function SidePanel({\n  context,\n  amount,\n  amountPrefix,\n  currency,\n  qualifier,\n  onClose,\n  keyboardFooter = true,\n  children,\n  style,\n  className,\n}: SidePanelProps): ReactElement {\n  return (\n    <aside\n      className={className}\n      aria-label={context}\n      style={{\n        position: \"fixed\",\n        top: 0,\n        right: 0,\n        bottom: 0,\n        width: \"var(--panel-width)\",\n        minWidth: \"var(--panel-min-width)\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        background: \"var(--surface-raised)\",\n        borderLeft: \"var(--border-w-hairline) solid var(--border-hairline)\",\n        boxShadow: \"var(--shadow-overlay)\",\n        fontFamily: \"var(--font-family)\",\n        fontSize: \"var(--font-size-body)\",\n        color: \"var(--text-primary)\",\n        ...style,\n      }}\n    >\n      <header style={{ padding: \"var(--space-md) var(--space-xl) 0\" }}>\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            fontSize: \"var(--font-size-micro)\",\n            color: \"var(--text-tertiary)\",\n          }}\n        >\n          <span>{context}</span>\n          {onClose ? (\n            <button\n              type=\"button\"\n              aria-label=\"Close panel\"\n              onClick={onClose}\n              style={{\n                border: \"none\",\n                background: \"none\",\n                cursor: \"pointer\",\n                color: \"var(--text-secondary)\",\n                fontSize: \"var(--font-size-body)\",\n                lineHeight: 1,\n                padding: \"var(--space-2xs)\",\n              }}\n            >\n              ✕\n            </button>\n          ) : null}\n        </div>\n        <div style={{ marginTop: \"var(--space-sm)\" }}>\n          {amountPrefix ? (\n            <span style={{ fontSize: \"var(--font-size-hero)\", fontWeight: 600, fontVariantNumeric: \"tabular-nums\" }}>\n              {amountPrefix}\n            </span>\n          ) : null}\n          <Money amount={amount} currency={currency} emphasis=\"hero\" />\n        </div>\n        {qualifier !== undefined ? (\n          <div\n            style={{\n              fontSize: \"var(--font-size-label)\",\n              color: \"var(--text-secondary)\",\n              marginTop: \"var(--space-2xs)\",\n            }}\n          >\n            {qualifier}\n          </div>\n        ) : null}\n      </header>\n      <div style={{ flex: 1, overflowY: \"auto\", padding: \"var(--space-lg) var(--space-xl)\" }}>{children}</div>\n      {keyboardFooter ? (\n        <footer\n          style={{\n            borderTop: \"var(--border-w-hairline) solid var(--border-hairline)\",\n            padding: \"var(--space-sm) var(--space-xl)\",\n            display: \"flex\",\n            gap: \"var(--space-sm)\",\n            alignItems: \"center\",\n            fontSize: \"var(--font-size-micro)\",\n            color: \"var(--text-tertiary)\",\n          }}\n        >\n          <KeyChip label=\"↑\" /> <KeyChip label=\"↓\" />\n          <span>row</span>\n          <KeyChip label=\"Esc\" />\n          <span>close</span>\n        </footer>\n      ) : null}\n    </aside>\n  );\n}\n"
    }
  ]
}