309 lines
16 KiB
JSON
309 lines
16 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": "Engine/BIM-derived swatch and HEX field with a theme-neutral portal palette.",
|
||
"behavior": ["controlled HEX value", "saturation/value plane", "hue slider", "quick colors", "portal palette", "keyboard spectrum adjustment"],
|
||
"rules": [
|
||
"Do not expose a browser-native color dialog as the product runtime UI.",
|
||
"The palette owns choice geometry; the consumer owns color validation, persistence and domain reaction."
|
||
]
|
||
},
|
||
{
|
||
"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", "optional bounded dragging for modeless inspectors"],
|
||
"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.",
|
||
"A draggable inspector moves by its header and remains clamped to the viewport."
|
||
]
|
||
},
|
||
{
|
||
"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", "persistent utility actions", "expand and close actions"],
|
||
"behavior": ["one shared navigation/content state machine", "navigation shifts stage", "content opens beside navigation", "expanded content replaces stage", "global utility actions remain in the panel header across sections", "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.",
|
||
"Light panels use the SEO white surface and shadow tokens rather than a dark shell with inverted text.",
|
||
"A layout-level save action belongs to ApplicationPanel.utilityActions and is never duplicated inside individual content cards."
|
||
]
|
||
},
|
||
{
|
||
"id": "toolbar",
|
||
"status": "baseline",
|
||
"package": "@nodedc/ui-react",
|
||
"exports": ["Toolbar"],
|
||
"domPackage": "@nodedc/ui-dom",
|
||
"domExports": ["createToolbarController"],
|
||
"domContract": ["nodedc-toolbar-wrap", "nodedc-toolbar", "nodedc-toolbar__button"],
|
||
"summary": "Engine/BIM-derived magnifying application toolbar with left, right and bottom placements.",
|
||
"variants": ["left", "right", "bottom"],
|
||
"behavior": ["controlled active item", "spring lens magnification without flex reflow", "axis-aware neighbor shift", "optional delayed autohide hotzone", "theme-independent geometry"],
|
||
"rules": [
|
||
"Engine defaults are background #111115, border #111117, outline #1c1c1c, min 25 px, max 87 px and five lens items.",
|
||
"Toolbar actions call application navigation; they do not duplicate route state.",
|
||
"Placement and material are controlled values and belong to the persisted application layout.",
|
||
"The shared component owns pointer tracking, spring animation, lens geometry and autohide timers; applications must not reimplement them."
|
||
]
|
||
},
|
||
{
|
||
"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": ["14 px", "16 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 uses the canonical 16 px default without an extra CSS scale.",
|
||
"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 video, image or logo file/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 by asset type or backend; configure its accepted media and provide an adapter callback.",
|
||
"Application layout persistence may save stage video and header mark together, but remains outside the visual component."
|
||
]
|
||
},
|
||
{
|
||
"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."
|
||
]
|
||
}
|
||
]
|
||
}
|