282 lines
14 KiB
JSON
282 lines
14 KiB
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"],
|
||
"shapes": ["default", "pill", "rounded"],
|
||
"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.",
|
||
"variants": ["integrated", "split"],
|
||
"behavior": ["controlled value", "optional search", "disabled options", "selected state", "portal menu"],
|
||
"rules": [
|
||
"Integrated is the single-pill Hub/Launcher form.",
|
||
"Split is the Engine form: a separate value surface and a 46 px toggle separated by an 8 px gap.",
|
||
"The portal menu preserves its source-family row geometry instead of inheriting card radii."
|
||
]
|
||
},
|
||
{
|
||
"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", "modal-only focus trap", "focus restore", "Escape close", "backdrop close policy", "modal-only 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.",
|
||
"A right-side inspector is modeless by default: no dimming, no backdrop blur, no backdrop close, no focus trap and no body scroll lock."
|
||
]
|
||
},
|
||
{
|
||
"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": "share-access-modal",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["ShareAccessModal"],
|
||
"domContract": ["nodedc-share-access-window", "nodedc-share-access", "nodedc-share-access__summary", "nodedc-share-access__member-list"],
|
||
"summary": "Engine-derived workflow access modal with compact member stack, role management and invite adapter slots.",
|
||
"behavior": ["controlled members", "compact expandable member stack", "role change", "member removal", "invite state", "immutable owner", "backdrop close disabled"],
|
||
"rules": [
|
||
"The component owns access-modal geometry and interaction; the consumer owns ACL requests and directory lookup.",
|
||
"Owner immutability and permission checks are supplied as member and canManage data.",
|
||
"The 600 px Engine composition uses 46 px invite controls and collapses to one column on mobile."
|
||
]
|
||
},
|
||
{
|
||
"id": "share-link-modal",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["ShareLinkModal"],
|
||
"domPackage": "@nodedc/ui-dom",
|
||
"domExports": ["createShareLinkController", "createModalController"],
|
||
"domContract": ["nodedc-window", "nodedc-field", "nodedc-button"],
|
||
"summary": "BIM-derived read-only resource link modal with copy progress and framework-neutral copy controller.",
|
||
"behavior": ["read-only link", "copy adapter", "copied state", "disabled empty state", "copy error adapter"],
|
||
"rules": [
|
||
"The resource service creates the URL; the modal only presents and copies it.",
|
||
"BIM DOM consumers combine the share-link controller with the canonical modal controller and core classes."
|
||
]
|
||
},
|
||
{
|
||
"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", "HeaderNavigation", "HeaderProfile", "HeaderProfileButton", "HeaderWorkspace", "HeaderAvatar"],
|
||
"domContract": ["nodedc-header-shell", "nodedc-header", "nodedc-header__row"],
|
||
"summary": "Strict Launcher-preset NODE.DC header with a 68 px outer toolbar, 48 px visible row and fixed three-axis geometry.",
|
||
"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.",
|
||
"The canonical application header is fixed and preserves the Launcher three-axis logo / navigation / profile positions.",
|
||
"Consumers supply data and actions but cannot override preset geometry through local className or style props."
|
||
]
|
||
},
|
||
{
|
||
"id": "application-shell",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["ApplicationShell", "ApplicationPanel", "useApplicationWorkspace"],
|
||
"domPackage": "@nodedc/ui-dom",
|
||
"domExports": ["createApplicationWorkspaceController"],
|
||
"domContract": ["nodedc-app-shell", "nodedc-application-panel"],
|
||
"summary": "Launcher-derived application template with fixed header, media stage, left navigation and a separate expandable content window.",
|
||
"anatomy": ["fixed AppHeader", "stage", "left navigation", "right content window", "expand and close actions"],
|
||
"behavior": ["one shared navigation/content state machine", "navigation shifts stage", "content opens beside navigation", "expanded content replaces stage", "mobile panels use the available viewport sequentially", "independent content scrolling"],
|
||
"rules": [
|
||
"The bottom Launcher service rail is product-specific and is not part of the general application template.",
|
||
"Desktop page gap is 20 px and navigation width follows the Launcher 332–352 px range.",
|
||
"Applications supply routes, profile data, stage media and panel content without changing shell geometry."
|
||
]
|
||
},
|
||
{
|
||
"id": "icon",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["Icon"],
|
||
"domContract": ["svg using currentColor"],
|
||
"summary": "Audited semantic icon subset shared by NODE.DC applications instead of product-local vendor imports.",
|
||
"variants": ["15 px", "17 px", "18 px"],
|
||
"rules": [
|
||
"Use semantic names from registry/icons.json.",
|
||
"The containing component owns surface, hit target and state; the icon owns only the glyph and is optically scaled to 90% inside controls.",
|
||
"Do not copy complete Lucide or Font Awesome catalogs into an application."
|
||
]
|
||
},
|
||
{
|
||
"id": "admin-navigation-panel",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["AdminNavigationPanel"],
|
||
"domContract": ["nodedc-admin-panel"],
|
||
"summary": "Hub-derived left administration panel with context selectors, route navigation, close action and footer identity.",
|
||
"anatomy": ["eyebrow and title", "close action", "workspace context", "company context", "route items", "footer identity"],
|
||
"rules": [
|
||
"The panel shell, full-bleed pills and icon circles are library geometry; routes and identity data remain application-owned.",
|
||
"The desktop panel follows the Launcher 332–352 px width range with a 21.6 px shell radius and a 20 px page gap.",
|
||
"Active route state uses the active surface and icon contrast from the theme."
|
||
]
|
||
},
|
||
{
|
||
"id": "media-source-field",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["MediaSourceField"],
|
||
"domPackage": "@nodedc/ui-dom",
|
||
"domExports": ["createMediaSourceController"],
|
||
"domContract": ["nodedc-media-field", "nodedc-media-control", "nodedc-media-source-button", "nodedc-media-preview"],
|
||
"summary": "Launcher/CMS media control for file or URL sources, filename, preview and adapter-provided storage state.",
|
||
"behavior": ["controlled file/url source", "native accessible file input", "URL input", "image/video preview", "path, hint and error slots"],
|
||
"rules": [
|
||
"The component owns geometry, source switching and accessibility.",
|
||
"The consumer owns media library, storage upload, validation and the persisted URL.",
|
||
"Do not fork the field for a different backend; provide a different adapter callback."
|
||
]
|
||
},
|
||
{
|
||
"id": "settings-card",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["SettingsCard", "Switch"],
|
||
"domContract": ["nodedc-settings-card", "nodedc-switch"],
|
||
"summary": "Neutral administration group with title metadata, actions, content and a compact binary switch.",
|
||
"rules": [
|
||
"The card owns grouping geometry but not product form schemas.",
|
||
"Use Switch for compact visibility/enable states; use Checker for the Engine inspector treatment."
|
||
]
|
||
},
|
||
{
|
||
"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.",
|
||
"Desktop Engine geometry is fixed at 390 px panel, 330 px content, 154/14/162 px control rows and 50 px section headers with a 12 px radius.",
|
||
"Accent-filled section headers belong to Environment Settings; neutral headers remain available for other approved inspector contexts."
|
||
]
|
||
}
|
||
]
|
||
}
|