configuration-management 0.1.6 → 0.1.8

package/README.md

@@ -98,8 +98,17 @@ createRoot(document.getElementById('root')).render(
 )
 ```
 
-The web UI is **pre-built** in the package (`web/dist/index.js`), so no Parcel
-`includeNodeModules` or webpack aliases are required in your host `package.json`.
+The web UI is **pre-built** in the package. Import the JS entry — styles load automatically:
+
+```js
+import { ConfigurationManagementApp, configureWeb } from 'configuration-management/web'
+```
+
+Or import styles separately:
+
+```js
+import 'configuration-management/web/styles.css'
+```
 
 | Export | Description |
 |--------|-------------|
@@ -117,9 +126,8 @@ OpenWhisk runtime actions and the Commerce Admin extension manifest ship with th
 
 #### Automatic wiring on `npm install`
 
-The package runs a **postinstall** script that:
-
-1. Patches your project's `app.config.yaml` (if present) with:
+The package runs a **postinstall** script that patches your project's `app.config.yaml`
+(if present) with:
 
 ```yaml
 extensions:
@@ -127,20 +135,8 @@ extensions:
     $include: node_modules/configuration-management/actions/configurations/ext.config.yaml
 ```
 
-2. Scaffolds a minimal `web-src/` bootstrap (if missing or previously auto-generated):
-
-```
-web-src/
-├── index.html
-└── src/
-    ├── index.js       ← imports ConfigurationManagementApp from the package
-    ├── exc-runtime.js
-    └── config.json    ← created empty; filled by aio app deploy
-```
-
-Custom `web-src` files are left untouched unless they were created by a prior install
-(files containing the `configuration-management: auto-generated bootstrap` marker, or
-an older bootstrap that imports `configuration-management/web`).
+It does **not** modify your `web-src/` files. Add the UI to your existing App Builder
+bootstrap manually (see React Admin UI above).
 
 - Run `npm install` from your App Builder project root (where `app.config.yaml` lives).
 - Do not use `npm install --ignore-scripts` (that skips postinstall).
@@ -176,11 +172,10 @@ The bundled `ext.config.yaml` declares all actions under the `ConfigurationManag
 
 ```
 my-app/
-├── app.config.yaml          ← $include ext.config from node_modules (above)
+├── app.config.yaml          ← $include ext.config (auto-patched on npm install)
 ├── web-src/
-│   ├── index.html
 │   └── src/
-│       ├── index.js         ← import ConfigurationManagementApp + configureWeb
+│       ├── index.js         ← your app bootstrap + package imports (see above)
 │       └── config.json      ← generated by aio app deploy
 ├── .env
 └── package.json             ← depends on configuration-management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "configuration-management",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Schema-driven system configuration for Adobe Commerce App Builder sync apps. Magento-style scoped config in Adobe App Builder Database (ABDB) with encryption, Commerce REST helpers, and React Admin UI.",
   "license": "Apache-2.0",
   "author": "Adobe Inc.",
@@ -30,9 +30,10 @@
     "./crypto": "./src/system-config-crypto.js",
     "./shared": "./src/system-config-shared.js",
     "./oauth1a": "./src/oauth1a.js",
-    "./web": "./web/dist/index.js",
-    "./web/index.js": "./web/dist/index.js",
-    "./web/styles.css": "./web/src/styles/index.css",
+    "./web": "./web/index.js",
+    "./web/index.js": "./web/index.js",
+    "./web/styles.css": "./web/styles.css",
+    "./web/dist/index.css": "./web/dist/index.css",
     "./web/src/styles/index.css": "./web/src/styles/index.css",
     "./actions/utils": "./actions/utils.js",
     "./actions/ext.config.yaml": "./actions/configurations/ext.config.yaml"

package/scripts/build-web.js

@@ -20,6 +20,8 @@ async function main () {
   const entry = path.join(pkgRoot, 'web/src/index.js')
   const outdir = path.join(pkgRoot, 'web/dist')
   const outfile = path.join(outdir, 'index.js')
+  const stylesSrc = path.join(pkgRoot, 'web/src/styles/index.css')
+  const stylesFlat = path.join(pkgRoot, 'web/styles.css')
 
   fs.mkdirSync(outdir, { recursive: true })
 
@@ -31,12 +33,19 @@ async function main () {
     outfile,
     packages: 'external',
     jsx: 'automatic',
-    loader: { '.js': 'jsx' },
+    loader: { '.js': 'jsx', '.css': 'css' },
     target: ['chrome79', 'firefox85', 'safari13'],
     logLevel: 'info'
   })
 
+  // Parcel does not resolve nested @import inside node_modules — ship a flat file.
+  fs.copyFileSync(stylesSrc, stylesFlat)
+
   console.log('[configuration-management] built web/dist/index.js')
+  if (fs.existsSync(path.join(outdir, 'index.css'))) {
+    console.log('[configuration-management] built web/dist/index.css')
+  }
+  console.log('[configuration-management] copied web/styles.css')
 }
 
 if (require.main === module) {

package/scripts/setup.js

@@ -10,9 +10,6 @@ const path = require('path')
 const EXTENSION_POINT = 'commerce/backend-ui/1'
 const INCLUDE_REL = 'node_modules/configuration-management/actions/configurations/ext.config.yaml'
 const MARKER = '# configuration-management (auto-linked on npm install)'
-const WEB_BOOTSTRAP_MARKER = 'configuration-management: auto-generated bootstrap'
-
-const TEMPLATES_DIR = path.join(__dirname, 'templates')
 
 function escapeRe (str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
@@ -21,10 +18,7 @@ function escapeRe (str) {
 function findProjectRoot (startDir) {
   let dir = startDir
   while (dir && dir !== path.dirname(dir)) {
-    if (
-      fs.existsSync(path.join(dir, 'app.config.yaml')) ||
-      fs.existsSync(path.join(dir, 'web-src'))
-    ) {
+    if (fs.existsSync(path.join(dir, 'app.config.yaml'))) {
       return dir
     }
     dir = path.dirname(dir)
@@ -41,57 +35,6 @@ function resolveProjectRoot () {
   return findProjectRoot(process.cwd())
 }
 
-function readTemplate (name) {
-  return fs.readFileSync(path.join(TEMPLATES_DIR, name), 'utf8')
-}
-
-function writeIfMissingOrManaged (filePath, content, marker) {
-  if (fs.existsSync(filePath)) {
-    const existing = fs.readFileSync(filePath, 'utf8')
-    if (existing.includes(marker)) {
-      const dir = path.dirname(filePath)
-      fs.mkdirSync(dir, { recursive: true })
-      const changed = existing !== content
-      if (changed) {
-        fs.writeFileSync(filePath, content, 'utf8')
-      }
-      return { changed, reason: changed ? 'updated-managed' : 'unchanged-managed', path: filePath }
-    }
-    return { changed: false, reason: 'skipped-custom-file', path: filePath }
-  }
-  const dir = path.dirname(filePath)
-  fs.mkdirSync(dir, { recursive: true })
-  fs.writeFileSync(filePath, content, 'utf8')
-  return { changed: true, reason: 'written', path: filePath }
-}
-
-function writeWebSrcIndex (projectRoot) {
-  const filePath = path.join(projectRoot, 'web-src', 'src', 'index.js')
-  const content = readTemplate('web-src-index.js')
-
-  if (!fs.existsSync(filePath)) {
-    fs.mkdirSync(path.dirname(filePath), { recursive: true })
-    fs.writeFileSync(filePath, content, 'utf8')
-    return { changed: true, reason: 'written', path: filePath }
-  }
-
-  const existing = fs.readFileSync(filePath, 'utf8')
-  if (existing.includes(WEB_BOOTSTRAP_MARKER)) {
-    const changed = existing !== content
-    if (changed) {
-      fs.writeFileSync(filePath, content, 'utf8')
-    }
-    return { changed, reason: changed ? 'updated-managed' : 'unchanged-managed', path: filePath }
-  }
-
-  if (existing.includes('configuration-management/web')) {
-    fs.writeFileSync(filePath, content, 'utf8')
-    return { changed: true, reason: 'migrated-stale-bootstrap', path: filePath }
-  }
-
-  return { changed: false, reason: 'skipped-custom-file', path: filePath }
-}
-
 function alreadyLinked (content) {
   return content.includes('configuration-management/actions/configurations/ext.config.yaml')
 }
@@ -176,38 +119,6 @@ function setupAppConfig (projectRoot) {
   return { changed: true, reason, detail: INCLUDE_REL }
 }
 
-function setupWebSrc (projectRoot) {
-  const webSrcDir = path.join(projectRoot, 'web-src')
-  const results = []
-
-  const indexJs = writeWebSrcIndex(projectRoot)
-  results.push(indexJs)
-
-  const indexHtml = writeIfMissingOrManaged(
-    path.join(webSrcDir, 'index.html'),
-    readTemplate('web-src-index.html'),
-    'configuration-management'
-  )
-  results.push(indexHtml)
-
-  const excRuntime = writeIfMissingOrManaged(
-    path.join(webSrcDir, 'src', 'exc-runtime.js'),
-    readTemplate('exc-runtime.js'),
-    'Module Runtime: Needs to be within an iframe'
-  )
-  results.push(excRuntime)
-
-  const configPath = path.join(webSrcDir, 'src', 'config.json')
-  if (!fs.existsSync(configPath)) {
-    fs.mkdirSync(path.dirname(configPath), { recursive: true })
-    fs.writeFileSync(configPath, '{}\n', 'utf8')
-    results.push({ changed: true, reason: 'created-config-json', path: configPath })
-  }
-
-  const changed = results.some((r) => r.changed)
-  return { changed, results }
-}
-
 function main () {
   if (process.env.CONFIGURATION_MANAGEMENT_SKIP_SETUP === '1') {
     return
@@ -228,18 +139,10 @@ function main () {
       `[configuration-management] Updated app.config.yaml (${app.reason}):\n` +
         `  $include: ${app.detail}`
     )
+    return
   }
 
-  const web = setupWebSrc(projectRoot)
-  for (const r of web.results || []) {
-    if (r.changed) {
-      console.log(`[configuration-management] Wrote ${r.path}`)
-    }
-  }
-
-  if (!app.changed && !web.changed) {
-    console.log('[configuration-management] Project already configured.')
-  }
+  console.log('[configuration-management] app.config.yaml already configured.')
 }
 
 if (require.main === module) {
@@ -254,7 +157,6 @@ if (require.main === module) {
 module.exports = {
   patchAppConfig,
   setupAppConfig,
-  setupWebSrc,
   INCLUDE_REL,
   EXTENSION_POINT
 }

package/web/dist/index.css

@@ -0,0 +1,294 @@
+/* web/src/styles/index.css */
+:root {
+  --sm-color-bg: #f7f8fa;
+  --sm-color-surface: #ffffff;
+  --sm-color-surface-muted: #f3f4f6;
+  --sm-color-surface-subtle: #fafbfc;
+  --sm-color-border: #e5e7eb;
+  --sm-color-border-strong: #d1d5db;
+  --sm-color-text: #111827;
+  --sm-color-text-muted: #6b7280;
+  --sm-color-text-inverse: #ffffff;
+  --sm-color-accent: #1473e6;
+  --sm-color-accent-hover: #0f5fc4;
+  --sm-color-accent-soft: #e8f1fc;
+  --sm-color-success: #22863a;
+  --sm-color-success-hover: #1a6e2f;
+  --sm-color-success-soft: #ecfdf5;
+  --sm-color-warning: #b58105;
+  --sm-color-warning-hover: #946c04;
+  --sm-color-warning-soft: #fff7ed;
+  --sm-color-warning-border: #fde68a;
+  --sm-color-warning-text: #92400e;
+  --sm-color-warning-tint: #fef3c7;
+  --sm-color-danger: #c0392b;
+  --sm-color-danger-hover: #a32d20;
+  --sm-color-danger-soft: #fef2f2;
+  --sm-color-danger-tint: #fee2e2;
+  --sm-color-accent-tint: #dbeafe;
+  --sm-color-neutral-soft: #eef2f7;
+  --sm-color-neutral-text: #374151;
+  --sm-color-text-strong: #1f2937;
+  --sm-color-text-soft: #475569;
+  --sm-color-surface-panel: #f9fafb;
+  --sm-color-overlay: rgba(15, 23, 42, 0.45);
+  --sm-radius-sm: 4px;
+  --sm-radius-md: 8px;
+  --sm-radius-lg: 10px;
+  --sm-radius-xl: 12px;
+  --sm-radius-2xl: 14px;
+  --sm-radius-pill: 999px;
+  --sm-space-1: 4px;
+  --sm-space-2: 8px;
+  --sm-space-3: 12px;
+  --sm-space-4: 16px;
+  --sm-space-5: 20px;
+  --sm-space-6: 24px;
+  --sm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
+  --sm-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.04);
+  --sm-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-pill: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-floating: 0 4px 14px rgba(15, 23, 42, 0.08);
+  --sm-shadow-dropdown: 0 12px 28px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.06);
+  --sm-shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.25), 0 2px 8px rgba(15, 23, 42, 0.08);
+  --sm-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.04);
+  --sm-font-family:
+    adobe-clean,
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  --sm-font-mono:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace;
+  --sm-font-size-xs: 11px;
+  --sm-font-size-sm: 12px;
+  --sm-font-size-md: 13px;
+  --sm-font-size-lg: 14px;
+  --sm-font-weight-regular: 400;
+  --sm-font-weight-medium: 500;
+  --sm-font-weight-semibold:600;
+  --sm-font-weight-bold: 700;
+  --sm-control-height-sm: 28px;
+  --sm-control-height-md: 32px;
+  --sm-control-height-lg: 40px;
+  --sm-control-padding-x: 16px;
+  --sm-z-nav: 30;
+  --sm-z-sticky: 20;
+  --sm-z-modal: 100;
+  --spectrum-accent-color-900: var(--sm-color-accent);
+  --spectrum-accent-color-1000: var(--sm-color-accent-hover);
+  color-scheme: light;
+}
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+  background: var(--sm-color-bg);
+  color: var(--sm-color-text);
+  font-family: var(--sm-font-family);
+}
+.sm-provider {
+  background: var(--sm-color-bg);
+  min-height: 100vh;
+}
+.sm-card {
+  background: var(--sm-color-surface);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-lg);
+  box-shadow: var(--sm-shadow-xs);
+  padding: var(--sm-space-5);
+}
+.sm-card--flush {
+  padding: 0;
+}
+.sm-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-1);
+  padding: 2px var(--sm-space-2);
+  border-radius: var(--sm-radius-pill);
+  background: var(--sm-color-neutral-soft);
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-xs);
+  font-weight: var(--sm-font-weight-semibold);
+  line-height: 16px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+.sm-pill--accent {
+  background: var(--sm-color-accent-soft);
+  color: var(--sm-color-accent);
+}
+.sm-pill--success {
+  background: var(--sm-color-success-soft);
+  color: var(--sm-color-success);
+}
+.sm-pill--warning {
+  background: var(--sm-color-warning-soft);
+  color: var(--sm-color-warning);
+}
+.sm-pill--danger {
+  background: var(--sm-color-danger-soft);
+  color: var(--sm-color-danger);
+}
+.sm-tab-bar {
+  position: sticky;
+  top: 0;
+  z-index: var(--sm-z-nav);
+  background: var(--sm-color-surface);
+  border-bottom: 1px solid var(--sm-color-border);
+  padding: 10px var(--sm-space-4);
+  box-shadow: var(--sm-shadow-sm);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.sm-tab-bar__track {
+  display: inline-flex;
+  padding: var(--sm-space-1);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-pill);
+  box-shadow: var(--sm-shadow-inset);
+  gap: 2px;
+  font-family: var(--sm-font-family);
+}
+.sm-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-2);
+  padding: var(--sm-space-2) var(--sm-control-padding-x);
+  border: 0;
+  border-radius: var(--sm-radius-pill);
+  background: transparent;
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-md);
+  font-weight: var(--sm-font-weight-semibold);
+  letter-spacing: 0.1px;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
+}
+.sm-tab:hover {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-text);
+}
+.sm-tab.is-active {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-accent);
+  font-weight: var(--sm-font-weight-bold);
+  box-shadow: var(--sm-shadow-pill);
+  cursor: default;
+}
+.sm-tab__icon {
+  display: inline-flex;
+  opacity: 0.75;
+}
+.sm-tab.is-active .sm-tab__icon {
+  opacity: 1;
+}
+.sm-textarea textarea {
+  height: 160px !important;
+  max-height: 160px !important;
+  min-height: 160px !important;
+  overflow-y: auto !important;
+  resize: none !important;
+  font-family: var(--sm-font-mono);
+  font-size: var(--sm-font-size-sm);
+}
+.sm-note {
+  margin-top: var(--sm-space-3);
+  padding: var(--sm-space-3);
+  border-radius: var(--sm-radius-md);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  color: var(--sm-color-text);
+  font-size: var(--sm-font-size-md);
+  white-space: pre-line;
+  font-family: var(--sm-font-mono);
+}
+.sm-note--warning {
+  background: var(--sm-color-warning-soft);
+  border-color: var(--sm-color-warning-border);
+  color: var(--sm-color-warning-text);
+  font-family: var(--sm-font-family);
+}
+@keyframes sm-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes sm-indeterminate {
+  0% {
+    left: -40%;
+    width: 40%;
+  }
+  50% {
+    left: 30%;
+    width: 40%;
+  }
+  100% {
+    left: 100%;
+    width: 40%;
+  }
+}
+@keyframes sm-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sm-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.SideNav {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  height: 100%;
+}
+.SideNav-item {
+  list-style-type: none;
+  margin: var(--spectrum-global-dimension-size-50) 0;
+}
+.SideNav-itemLink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--sm-space-2) var(--sm-space-3);
+  border-radius: var(--sm-radius-sm);
+  font-size: var(--sm-font-size-lg);
+  font-weight: var(--sm-font-weight-regular);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: pointer;
+  background: transparent;
+  color: var(--sm-color-text);
+}
+.SideNav-itemLink.is-selected {
+  color: var(--sm-color-accent);
+  background: var(--sm-color-accent-soft);
+}

package/web/index.js

@@ -3,4 +3,5 @@ Copyright 2025 Adobe. All rights reserved.
 Licensed under the Apache License, Version 2.0
 */
 
+import './dist/index.css'
 export * from './dist/index.js'

package/web/src/index.js

@@ -5,6 +5,8 @@ you may not use this file except in compliance with the License. You may obtain
 of the License at http://www.apache.org/licenses/LICENSE-2.0
 */
 
+import './styles/index.css'
+
 import App from './components/App'
 import { MainPage } from './components/MainPage'
 import ExtensionRegistration from './components/ExtensionRegistration'

package/web/styles.css

@@ -0,0 +1,326 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+/* =========================================================================
+   sync-management — single source of truth for the UI theme.
+
+   To re-skin the app, change values under :root. Components consume these
+   tokens either directly via CSS classes (.sm-*) or via the JS facade in
+   `web-src/src/theme.js` which re-exports them as `var(--sm-*)` strings.
+
+   Token naming:
+     --sm-color-*      colors
+     --sm-radius-*     border radii
+     --sm-space-*      spacing scale
+     --sm-shadow-*     elevation
+     --sm-font-*       typography
+     --sm-control-*    interactive control sizing
+   ========================================================================= */
+
+:root {
+  /* ---- Colors --------------------------------------------------------- */
+  --sm-color-bg:             #f7f8fa;
+  --sm-color-surface:        #ffffff;
+  --sm-color-surface-muted:  #f3f4f6;
+  --sm-color-surface-subtle: #fafbfc;
+  --sm-color-border:         #e5e7eb;
+  --sm-color-border-strong:  #d1d5db;
+  --sm-color-text:           #111827;
+  --sm-color-text-muted:     #6b7280;
+  --sm-color-text-inverse:   #ffffff;
+
+  --sm-color-accent:         #1473e6;
+  --sm-color-accent-hover:   #0f5fc4;
+  --sm-color-accent-soft:    #e8f1fc;
+
+  --sm-color-success:        #22863a;
+  --sm-color-success-hover:  #1a6e2f;
+  --sm-color-success-soft:   #ecfdf5;
+  --sm-color-warning:        #b58105;
+  --sm-color-warning-hover:  #946c04;
+  --sm-color-warning-soft:   #fff7ed;
+  --sm-color-warning-border: #fde68a;
+  --sm-color-warning-text:   #92400e;
+  --sm-color-warning-tint:   #fef3c7;
+  --sm-color-danger:         #c0392b;
+  --sm-color-danger-hover:   #a32d20;
+  --sm-color-danger-soft:    #fef2f2;
+  --sm-color-danger-tint:    #fee2e2;
+  --sm-color-accent-tint:    #dbeafe;
+
+  --sm-color-neutral-soft:   #eef2f7;
+  --sm-color-neutral-text:   #374151;
+
+  /* Surfaces used by the modal scaffolding (header text, body text, panel). */
+  --sm-color-text-strong:    #1f2937;
+  --sm-color-text-soft:      #475569;
+  --sm-color-surface-panel:  #f9fafb;
+
+  /* Modal / overlay scrim */
+  --sm-color-overlay:        rgba(15, 23, 42, 0.45);
+
+  /* ---- Radii ---------------------------------------------------------- */
+  --sm-radius-sm:    4px;
+  --sm-radius-md:    8px;
+  --sm-radius-lg:    10px;
+  --sm-radius-xl:    12px;
+  --sm-radius-2xl:   14px;
+  --sm-radius-pill:  999px;
+
+  /* ---- Spacing -------------------------------------------------------- */
+  --sm-space-1:  4px;
+  --sm-space-2:  8px;
+  --sm-space-3:  12px;
+  --sm-space-4:  16px;
+  --sm-space-5:  20px;
+  --sm-space-6:  24px;
+
+  /* ---- Shadows -------------------------------------------------------- */
+  --sm-shadow-xs:       0 1px 2px rgba(15, 23, 42, 0.03);
+  --sm-shadow-sm:       0 1px 4px rgba(15, 23, 42, 0.04);
+  --sm-shadow-md:       0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-pill:     0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 1px rgba(15, 23, 42, 0.06);
+  --sm-shadow-floating: 0 4px 14px rgba(15, 23, 42, 0.08);
+  --sm-shadow-dropdown: 0 12px 28px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.06);
+  --sm-shadow-modal:    0 24px 60px rgba(15, 23, 42, 0.25), 0 2px 8px rgba(15, 23, 42, 0.08);
+  --sm-shadow-inset:    inset 0 1px 2px rgba(15, 23, 42, 0.04);
+
+  /* ---- Typography ----------------------------------------------------- */
+  --sm-font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --sm-font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --sm-font-size-xs:    11px;
+  --sm-font-size-sm:    12px;
+  --sm-font-size-md:    13px;
+  --sm-font-size-lg:    14px;
+  --sm-font-weight-regular: 400;
+  --sm-font-weight-medium:  500;
+  --sm-font-weight-semibold:600;
+  --sm-font-weight-bold:    700;
+
+  /* ---- Control sizing ------------------------------------------------- */
+  --sm-control-height-sm: 28px;
+  --sm-control-height-md: 32px;
+  --sm-control-height-lg: 40px;
+  --sm-control-padding-x: 16px;
+
+  /* ---- Z-index -------------------------------------------------------- */
+  --sm-z-nav: 30;
+  --sm-z-sticky: 20;
+  --sm-z-modal: 100;
+
+  /* =====================================================================
+     Spectrum token overrides — re-skin React-Spectrum widgets without
+     forking the theme. Keep these in sync with the --sm-* tokens above
+     so default Buttons / TextField / Picker pick up our accent automatically.
+     ===================================================================== */
+  --spectrum-accent-color-900: var(--sm-color-accent);
+  --spectrum-accent-color-1000: var(--sm-color-accent-hover);
+  /* Text colours are left to Spectrum so secondary/quiet buttons keep
+     their proper contrast on both light and dark surfaces. */
+
+  color-scheme: light;
+}
+
+/* =========================================================================
+   Base
+   ========================================================================= */
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+  background: var(--sm-color-bg);
+  color: var(--sm-color-text);
+  font-family: var(--sm-font-family);
+}
+
+/* React-Spectrum's <Provider> wraps its tree in a div. We mark it with
+   `UNSAFE_className="sm-provider"` and set its background here so the page
+   bg fills the whole iframe — but we only paint the wrapper, NOT any
+   descendants. Painting descendants stomps on inputs / buttons / pickers. */
+.sm-provider {
+  background: var(--sm-color-bg);
+  min-height: 100vh;
+}
+
+/* =========================================================================
+   Cards
+   ========================================================================= */
+.sm-card {
+  background: var(--sm-color-surface);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-lg);
+  box-shadow: var(--sm-shadow-xs);
+  padding: var(--sm-space-5);
+}
+.sm-card--flush { padding: 0; }
+
+/* =========================================================================
+   Pills
+   ========================================================================= */
+.sm-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-1);
+  padding: 2px var(--sm-space-2);
+  border-radius: var(--sm-radius-pill);
+  background: var(--sm-color-neutral-soft);
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-xs);
+  font-weight: var(--sm-font-weight-semibold);
+  line-height: 16px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+.sm-pill--accent  { background: var(--sm-color-accent-soft);   color: var(--sm-color-accent); }
+.sm-pill--success { background: var(--sm-color-success-soft);  color: var(--sm-color-success); }
+.sm-pill--warning { background: var(--sm-color-warning-soft);  color: var(--sm-color-warning); }
+.sm-pill--danger  { background: var(--sm-color-danger-soft);   color: var(--sm-color-danger); }
+
+/* =========================================================================
+   Tab bar (used by AppSectionNav)
+   ========================================================================= */
+.sm-tab-bar {
+  position: sticky;
+  top: 0;
+  z-index: var(--sm-z-nav);
+  background: var(--sm-color-surface);
+  border-bottom: 1px solid var(--sm-color-border);
+  padding: 10px var(--sm-space-4);
+  box-shadow: var(--sm-shadow-sm);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.sm-tab-bar__track {
+  display: inline-flex;
+  padding: var(--sm-space-1);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  border-radius: var(--sm-radius-pill);
+  box-shadow: var(--sm-shadow-inset);
+  gap: 2px;
+  font-family: var(--sm-font-family);
+}
+.sm-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sm-space-2);
+  padding: var(--sm-space-2) var(--sm-control-padding-x);
+  border: 0;
+  border-radius: var(--sm-radius-pill);
+  background: transparent;
+  color: var(--sm-color-neutral-text);
+  font-size: var(--sm-font-size-md);
+  font-weight: var(--sm-font-weight-semibold);
+  letter-spacing: 0.1px;
+  cursor: pointer;
+  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+.sm-tab:hover {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-text);
+}
+.sm-tab.is-active {
+  background: var(--sm-color-surface);
+  color: var(--sm-color-accent);
+  font-weight: var(--sm-font-weight-bold);
+  box-shadow: var(--sm-shadow-pill);
+  cursor: default;
+}
+.sm-tab__icon { display: inline-flex; opacity: 0.75; }
+.sm-tab.is-active .sm-tab__icon { opacity: 1; }
+
+/* =========================================================================
+   Spectrum textareas inside the system-config field renderer
+   ========================================================================= */
+.sm-textarea textarea {
+  height: 160px !important;
+  max-height: 160px !important;
+  min-height: 160px !important;
+  overflow-y: auto !important;
+  resize: none !important;
+  font-family: var(--sm-font-mono);
+  font-size: var(--sm-font-size-sm);
+}
+
+/* =========================================================================
+   Note banner (used by ComingSoon, info callouts, etc.)
+   ========================================================================= */
+.sm-note {
+  margin-top: var(--sm-space-3);
+  padding: var(--sm-space-3);
+  border-radius: var(--sm-radius-md);
+  background: var(--sm-color-surface-muted);
+  border: 1px solid var(--sm-color-border);
+  color: var(--sm-color-text);
+  font-size: var(--sm-font-size-md);
+  white-space: pre-line;
+  font-family: var(--sm-font-mono);
+}
+.sm-note--warning {
+  background: var(--sm-color-warning-soft);
+  border-color: var(--sm-color-warning-border);
+  color: var(--sm-color-warning-text);
+  font-family: var(--sm-font-family);
+}
+
+/* =========================================================================
+   Animations (used by progress / status indicators)
+   ========================================================================= */
+@keyframes sm-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.3; }
+}
+@keyframes sm-indeterminate {
+  0%   { left: -40%; width: 40%; }
+  50%  { left: 30%;  width: 40%; }
+  100% { left: 100%; width: 40%; }
+}
+@keyframes sm-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes sm-pop-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)   scale(1); }
+}
+
+/* =========================================================================
+   Legacy SideNav classes (kept for backwards compat with any remaining
+   menu markup; safe to delete once nothing references them).
+   ========================================================================= */
+.SideNav {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  height: 100%;
+}
+.SideNav-item {
+  list-style-type: none;
+  margin: var(--spectrum-global-dimension-size-50) 0;
+}
+.SideNav-itemLink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--sm-space-2) var(--sm-space-3);
+  border-radius: var(--sm-radius-sm);
+  font-size: var(--sm-font-size-lg);
+  font-weight: var(--sm-font-weight-regular);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: pointer;
+  background: transparent;
+  color: var(--sm-color-text);
+}
+.SideNav-itemLink.is-selected {
+  color: var(--sm-color-accent);
+  background: var(--sm-color-accent-soft);
+}

package/scripts/templates/exc-runtime.js

@@ -1,14 +0,0 @@
-/*
-Copyright 2025 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-/* eslint-disable-next-line */
-(function(e,t){if(t.location===t.parent.location)throw new Error("Module Runtime: Needs to be within an iframe!");var o=function(e){var t=new URL(e.location.href).searchParams.get("_mr");return t||!e.EXC_US_HMR?t:e.sessionStorage.getItem("unifiedShellMRScript")}(t);if(!o)throw new Error("Module Runtime: Missing script!");if("https:"!==(o=new URL(decodeURIComponent(o))).protocol)throw new Error("Module Runtime: Must be HTTPS!");if(!/^(exc-unifiedcontent\.)?experience(-qa|-stage|-cdn|-cdn-stage)?\.adobe\.(com|net)$/.test(o.hostname)&&!/localhost\.corp\.adobe\.com$/.test(o.hostname))throw new Error("Module Runtime: Invalid domain!");if(!/\.js$/.test(o.pathname))throw new Error("Module Runtime: Must be a JavaScript file!");t.EXC_US_HMR&&t.sessionStorage.setItem("unifiedShellMRScript",o.toString());var n=e.createElement("script");n.async=1,n.src=o.toString(),n.onload=n.onreadystatechange=function(){n.readyState&&!/loaded|complete/.test(n.readyState)||(n.onload=n.onreadystatechange=null,n=void 0,"EXC_MR_READY"in t&&t.EXC_MR_READY())},e.head.appendChild(n)})(document,window);

package/scripts/templates/web-src-index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-  <meta name="theme-color" content="#1473e6">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
-  <title>Sync Management</title>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
-<script src="./src/index.js" async="true" type="module"></script>
-</body>
-</html>

package/scripts/templates/web-src-index.js

@@ -1,61 +0,0 @@
-/*
-Copyright 2025 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-*/
-// configuration-management: auto-generated bootstrap (updated on npm install)
-
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-
-import Runtime, { init } from '@adobe/exc-app'
-import { ConfigurationManagementApp as App, configureWeb } from 'configuration-management/web'
-import actions from './config.json'
-import 'configuration-management/web/styles.css'
-
-configureWeb({ actionUrls: actions })
-
-window.React = React
-
-try {
-  require('./exc-runtime')
-  init(bootstrapInExcShell)
-} catch (e) {
-  console.log('application not running in Adobe Experience Cloud Shell')
-  bootstrapRaw()
-}
-
-function renderApp (runtime, ims) {
-  createRoot(document.getElementById('root')).render(
-    React.createElement(App, { runtime, ims })
-  )
-}
-
-function bootstrapRaw () {
-  renderApp({ on: () => {} }, {})
-}
-
-function bootstrapInExcShell () {
-  const runtime = Runtime()
-  runtime.favicon = './favicon.svg'
-
-  runtime.on('ready', ({ imsOrg, imsToken, imsProfile }) => {
-    runtime.done()
-    renderApp(runtime, {
-      profile: imsProfile,
-      org: imsOrg,
-      token: imsToken
-    })
-  })
-
-  runtime.solution = {
-    icon: 'AdobeExperienceCloud',
-    title: 'Sync Management',
-    shortTitle: 'Sync'
-  }
-  runtime.title = 'Sync Management'
-}