NODEDC_DESIGN_GUIDELINE/registry/components.json

{
  "schemaVersion": "1.0.0",
  "components": [
    {
      "id": "glass-surface",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["GlassSurface"],
      "domContract": ["nodedc-glass", "nodedc-material-rim"],
      "summary": "Canonical matte/glossy glass surface for cards, panels and window shells.",
      "anatomy": ["theme-provided surface", "optional material rim", "backdrop blur", "content"],
      "variants": ["default", "strong", "soft"],
      "rules": [
        "Geometry is invariant across application themes.",
        "A material rim is a glass highlight, not a hard product-colored border.",
        "Nested surfaces must use a softer tone to avoid card-inside-card noise."
      ]
    },
    {
      "id": "button",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Button", "IconButton"],
      "domContract": ["nodedc-button", "nodedc-icon-button"],
      "summary": "Text and icon actions with shared sizing, states and computed accent contrast.",
      "variants": ["primary", "secondary", "ghost", "danger", "accent"],
      "rules": [
        "Icon-only actions are circular by default.",
        "Filled accent actions derive foreground contrast from the actual accent.",
        "Destructive actions remain neutral until confirmation unless danger is the principal message."
      ]
    },
    {
      "id": "field",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["FieldFrame", "TextField", "TextAreaField"],
      "domContract": ["nodedc-field", "nodedc-field__control"],
      "summary": "Textual form controls with consistent labels, hints, geometry and focus surface.",
      "rules": [
        "Labels and validation copy are part of the field contract.",
        "Keyboard focus changes the surface and remains visible without a browser-blue outline."
      ]
    },
    {
      "id": "checker",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Checker"],
      "domContract": ["nodedc-checker"],
      "summary": "Binary setting control derived from the redesigned Engine environment settings.",
      "rules": [
        "The visual anchor is circular, not a square native checkbox.",
        "The control exposes checkbox semantics through role and aria-checked."
      ]
    },
    {
      "id": "range-control",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["RangeControl"],
      "domContract": ["nodedc-range"],
      "summary": "Filled pill range control with embedded label and value from redesigned Engine settings.",
      "rules": [
        "The accent fill follows the active application theme.",
        "The native range remains the accessible input while its chrome is visually replaced."
      ]
    },
    {
      "id": "color-field",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["ColorField"],
      "domContract": ["nodedc-color-field"],
      "summary": "Combined color picker and textual value for settings/inspectors."
    },
    {
      "id": "dropdown",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Dropdown"],
      "domPackage": "@nodedc/ui-dom",
      "domExports": ["createFloatingLayer"],
      "domContract": ["nodedc-dropdown-surface", "nodedc-dropdown-option"],
      "summary": "Shared portal/fixed floating layer for action and selection menus.",
      "behavior": ["portal to document body", "viewport clamp", "vertical flip", "outside pointer close", "Escape close", "scroll and resize reposition", "one open dropdown per window"],
      "rules": [
        "Never render a runtime dropdown as an absolute child of a card, sticky header or scroll container.",
        "Action menus and selection menus share floating behavior even when their row content differs."
      ]
    },
    {
      "id": "select",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Select"],
      "domPackage": "@nodedc/ui-dom",
      "domExports": ["createSelectController"],
      "summary": "Theme-independent selection control using the canonical dropdown layer.",
      "behavior": ["controlled value", "optional search", "disabled options", "selected state", "portal menu"]
    },
    {
      "id": "window",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Window", "WindowFooterActions"],
      "domPackage": "@nodedc/ui-dom",
      "domExports": ["createModalController"],
      "domContract": ["nodedc-overlay", "nodedc-window"],
      "summary": "Canonical controlled window for modal and right-side panel presentations.",
      "behavior": ["portal to body", "focus entry", "focus trap", "focus restore", "Escape close", "backdrop close policy", "body scroll lock"],
      "rules": [
        "Open state belongs to the application; focus/layer behavior belongs to the component.",
        "The same window contract is used by Launcher, CMS and SEO; theme variables supply color differences."
      ]
    },
    {
      "id": "confirmation-modal",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["ConfirmationModal"],
      "summary": "Async-safe confirmation window for destructive and consequential operations.",
      "behavior": ["pending state", "double-submit protection", "disabled close policy while pending"]
    },
    {
      "id": "segmented-control",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["SegmentedControl"],
      "domContract": ["nodedc-segmented"],
      "summary": "Pill navigation used in the shared top header and compact mode switches."
    },
    {
      "id": "app-header",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["AppHeader", "HeaderProfile", "HeaderWorkspace"],
      "domContract": ["nodedc-header-shell", "nodedc-header"],
      "summary": "Three-axis NODE.DC application header with fixed brand geometry and composable center/right slots.",
      "anatomy": ["left brand", "optional left context", "center navigation/workspace", "right actions/profile"],
      "rules": [
        "The logo occupies the same visual position and geometry across applications.",
        "Product routes and profile content are application data passed into stable slots."
      ]
    },
    {
      "id": "status-badge",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["StatusBadge"],
      "domContract": ["nodedc-status"],
      "summary": "Semantic status pill whose tone is independent from the application accent."
    },
    {
      "id": "inspector",
      "status": "baseline",
      "package": "@nodedc/ui-react",
      "exports": ["Inspector", "ControlRow"],
      "domContract": ["nodedc-inspector", "nodedc-control-row"],
      "summary": "Accordion settings/definition inspector derived only from the redesigned Engine environment and NDC agent inspector.",
      "rules": [
        "Legacy Engine inspectors are not reference implementations.",
        "Domain-specific field definitions remain in Engine; reusable layout and controls live here."
      ]
    }
  ]
}