SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make application shell components package-native

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 12:41:12 +03:00
parent 9261d3af36
commit ebae662b52
52 changed files with 1036 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/candidates.json
-10
View File
@@ -72,16 +72,6 @@
"requiredBehavior": ["selected state", "drag state", "assignees", "dates", "quick actions"],
"reasonNotBaseline": "The visual pattern is mature, but task-domain fields must be separated from the reusable card shell."
},
{
"id": "media-source-field",
"classification": "planned-pattern",
"priority": "P2",
"referenceSources": ["launcher", "seo"],
"expectedPackage": "@nodedc/ui-react",
"dependsOn": ["field", "button", "glass-surface"],
"requiredBehavior": ["preview", "source picker", "validation", "clear/replace"],
"reasonNotBaseline": "File and storage integration remains application-specific and needs adapter slots."
},
{
"id": "toast",
"classification": "missing-primitive",
registry/components.json
+37 -6
View File
@@ -142,25 +142,28 @@
"id": "app-header",
"status": "baseline",
"package": "@nodedc/ui-react",
"exports": ["AppHeader", "HeaderProfile", "HeaderProfileButton", "HeaderWorkspace", "HeaderAvatar"],
"domContract": ["nodedc-header-shell", "nodedc-header"],
"summary": "Three-axis NODE.DC application header with fixed brand geometry and composable center/right slots.",
"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."
"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"],
"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": ["navigation shifts stage", "content opens beside navigation", "expanded content replaces stage", "mobile panels use the available viewport sequentially", "independent content scrolling"],
"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.",
@@ -195,6 +198,34 @@
"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",
registry/registry.json
+3 -2
View File
@@ -1,6 +1,6 @@
{
"schemaVersion": "1.0.0",
"libraryVersion": "0.3.0",
"libraryVersion": "0.4.0",
"name": "NODE.DC Design System",
"purpose": "Canonical code-level UI system for current and future NODE.DC applications.",
"packages": [
@@ -39,7 +39,8 @@
"adoption": "../docs/ADOPTION.md",
"candidates": "../docs/CANDIDATES.md",
"applicationTemplate": "../docs/APPLICATION_TEMPLATE.md",
"icons": "../docs/ICONS.md"
"icons": "../docs/ICONS.md",
"consumption": "../docs/CONSUMPTION.md"
},
"operatingRule": "Check this registry before creating a NODE.DC interface element. Reuse or extend the canonical export instead of creating an application-local copy."
}