domma-js 0.18.0 → 0.18.2

package/bin/domma-cli.js

@@ -84,26 +84,26 @@ async function handleInit() {
   let projectName = 'my-app';
   let theme = 'charcoal-dark';
   let includeThemeSelector = false;
-  let projectMode = 'mpa'; // Default to multi-page
+  let projectMode = 'spa'; // Default to single-page
 
   // Determine project mode
-  if (spaFlag) {
-    projectMode = 'spa';
-  } else if (mpaFlag) {
+  if (mpaFlag) {
     projectMode = 'mpa';
+  } else if (spaFlag) {
+    projectMode = 'spa';
   } else if (!quickMode) {
     // Prompt user to choose mode
     const rl = readline.createInterface({input, output});
 
     console.log(`\n  Choose project type:`);
-    console.log(`    ❯ Multi-Page Application (MPA) - Traditional multi-page website (default)`);
-    console.log(`      Single Page Application (SPA) - Client-side routing with view switching`);
+    console.log(`    ❯ Single Page Application (SPA) - Client-side routing with view switching (default)`);
+    console.log(`      Multi-Page Application (MPA) - Traditional multi-page website`);
 
-    const modeAnswer = await rl.question(`\n  Enter choice (mpa/spa): `);
+    const modeAnswer = await rl.question(`\n  Enter choice (spa/mpa): `);
     const modeInput = modeAnswer.trim().toLowerCase();
 
-    if (modeInput === 'spa' || modeInput === 's') {
-      projectMode = 'spa';
+    if (modeInput === 'mpa' || modeInput === 'm') {
+      projectMode = 'mpa';
     }
 
     rl.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
   "main": "public/dist/domma.min.js",
   "module": "public/dist/domma.esm.js",
@@ -10,7 +10,10 @@
   },
   "files": [
     "bin/",
-    "templates/",
+    "templates/kickstart/",
+    "templates/kickstart-spa/",
+    "templates/page-template/",
+    "templates/view-template/",
     "public/dist/domma.min.js",
     "public/dist/domma.esm.js",
     "public/dist/domma.css",
@@ -36,15 +39,16 @@
     "serve:3096": "node bin/domma-cli.js serve --port 3096",
     "dev": "NODE_ENV=development npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:miniapps && live-server public --port=3001 --open=/index.html",
     "dev:watch": "NODE_ENV=development npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:miniapps && npm run watch:miniapps",
-    "build": "npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:css-bundles && npm run build:archives && npm run build:miniapps",
+    "build": "npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:css-bundles && npm run build:archives && npm run build:kickstart-files && npm run build:miniapps",
     "build:js": "rollup -c",
     "build:css": "node scripts/build-css.js",
     "build:css-bundles": "node scripts/build-css-bundles.js",
     "build:archives": "node scripts/build-archives.js",
+    "build:kickstart-files": "node scripts/build-kickstart-files.js",
     "build:info": "node scripts/build-info.js",
     "build:metadata": "node scripts/copy-metadata.js",
     "copy:themes": "node scripts/copy-theme-css.js",
-"build:miniapps": "node scripts/build-miniapp.js && node scripts/copy-miniapps.js",
+    "build:miniapps": "node scripts/build-miniapp.js && node scripts/copy-miniapps.js",
     "build:miniapp:garage": "node scripts/build-miniapp.js garage",
     "build:miniapp:address": "node scripts/build-miniapp.js address",
     "watch:miniapps": "node scripts/watch-miniapps.js",

package/public/dist/bundles/domma-complete.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.18.0
+ * Domma Complete CSS Bundle v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.777Z
+ * Built: 2026-02-25T21:51:20.178Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.18.0
+ * Domma Core CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.425Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.726Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -2566,6 +2566,43 @@ code, pre {
     z-index: 2;
 }
 
+/* Button Group Sizes */
+.btn-group-sm > .btn,
+.btn-group-sm > .btn-group > .btn {
+    padding: var(--dm-space-1) var(--dm-space-2);
+    font-size: var(--dm-font-size-xs);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.btn-group-sm > .btn:first-child {
+    border-top-left-radius: var(--dm-radius-sm);
+    border-bottom-left-radius: var(--dm-radius-sm);
+}
+
+.btn-group-sm > .btn:last-child {
+    border-top-right-radius: var(--dm-radius-sm);
+    border-bottom-right-radius: var(--dm-radius-sm);
+}
+
+.btn-group-lg > .btn,
+.btn-group-lg > .btn-group > .btn {
+    padding: var(--dm-space-3) var(--dm-space-6);
+    font-size: var(--dm-font-size-lg);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.btn-group-lg > .btn:first-child {
+    border-top-left-radius: var(--dm-radius-lg);
+    border-bottom-left-radius: var(--dm-radius-lg);
+}
+
+.btn-group-lg > .btn:last-child {
+    border-top-right-radius: var(--dm-radius-lg);
+    border-bottom-right-radius: var(--dm-radius-lg);
+}
+
 /* Range Slider */
 .form-range {
     appearance: none;
@@ -4003,12 +4040,18 @@ code, pre {
 }
 
 @keyframes dm-ambient-aurora {
-    0%, 100% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
+    0%   { background-position: 0% 50%; }
+    25%  { background-position: 50% 0%; }
+    50%  { background-position: 100% 50%; }
+    75%  { background-position: 50% 100%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes dm-ambient-aurora-2 {
+    0%   { background-position: 100% 0%; }
+    33%  { background-position: 0% 50%; }
+    66%  { background-position: 80% 100%; }
+    100% { background-position: 100% 0%; }
 }
 
 /* Utility Classes - Rotating Gradients */
@@ -4250,20 +4293,42 @@ code, pre {
 .bg-ambient-aurora::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
     background: linear-gradient(
-            45deg,
-            rgba(59, 130, 246, 0.1) 0%,
-            rgba(139, 92, 246, 0.08) 25%,
-            rgba(236, 72, 153, 0.06) 50%,
-            rgba(59, 130, 246, 0.08) 75%,
-            rgba(139, 92, 246, 0.1) 100%
+            120deg,
+            rgba(16, 185, 129, 0.0) 0%,
+            rgba(16, 185, 129, 0.5) 20%,
+            rgba(6, 182, 212, 0.6) 40%,
+            rgba(59, 130, 246, 0.4) 60%,
+            rgba(6, 182, 212, 0.3) 80%,
+            rgba(16, 185, 129, 0.0) 100%
     );
-    background-size: 400% 400%;
-    animation: dm-ambient-aurora 15s ease infinite;
+    background-size: 200% 200%;
+    animation: dm-ambient-aurora 20s ease infinite;
+    will-change: background-position;
+}
+
+.bg-ambient-aurora::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+            240deg,
+            rgba(139, 92, 246, 0.0) 0%,
+            rgba(139, 92, 246, 0.4) 25%,
+            rgba(236, 72, 153, 0.3) 50%,
+            rgba(109, 40, 217, 0.35) 75%,
+            rgba(139, 92, 246, 0.0) 100%
+    );
+    background-size: 200% 200%;
+    animation: dm-ambient-aurora-2 25s ease infinite;
+    mix-blend-mode: screen;
     will-change: background-position;
 }
 
@@ -4707,11 +4772,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.18.0
+ * Domma Grid CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.433Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.735Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -5332,11 +5397,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.18.0
+ * Domma Elements CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.441Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.743Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -6725,6 +6790,14 @@ textarea:not([class])::placeholder {
     color: var(--dm-info-dark);
 }
 
+/* In dark themes, the "-dark" colour variants are designed for light backgrounds.
+   Use the base colour (readable on dark backgrounds) instead. */
+[data-mode="dark"] .alert-primary { color: var(--dm-primary); }
+[data-mode="dark"] .alert-success { color: var(--dm-success); }
+[data-mode="dark"] .alert-danger  { color: var(--dm-danger);  }
+[data-mode="dark"] .alert-warning { color: var(--dm-warning-text, var(--dm-warning)); }
+[data-mode="dark"] .alert-info    { color: var(--dm-info);    }
+
 
 /* ============================================
    CODE BLOCK
@@ -7123,7 +7196,7 @@ code {
 }
 
 .navbar-dark .navbar-link {
-    color: var(--dm-text-disabled);
+    color: var(--dm-gray-400, #adb5bd);
 }
 
 .navbar-dark .navbar-link:hover {
@@ -7420,7 +7493,7 @@ code {
 }
 
 .navbar-dark .navbar-dropdown-item {
-    color: var(--dm-text-disabled);
+    color: var(--dm-gray-400, #adb5bd);
 }
 
 .navbar-dark .navbar-dropdown-item:hover {
@@ -11652,16 +11725,16 @@ code {
 /* Dark theme support */
 [data-mode="dark"] .dm-progression-content {
     background: var(--dm-surface);
-    border-color: var(--dm-text);
-    color: var(--dm-text-inverse);
+    border-color: var(--dm-border);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-progression-title {
-    color: var(--dm-text-inverse);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-progression-description {
-    color: var(--dm-text-disabled);
+    color: var(--dm-text-secondary);
 }
 
 [data-mode="dark"] .dm-progression-minimal .dm-progression-content {
@@ -12022,11 +12095,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.18.0
+ * Domma Themes v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.403Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.692Z
+ * Commit: 2eb305a
  */
 
 /**

package/public/dist/bundles/domma-data-focused.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Data-Focused CSS Bundle v0.18.0
+ * Domma Data-Focused CSS Bundle v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.767Z
+ * Built: 2026-02-25T21:51:20.169Z
  */
 
 /* ============================================
@@ -230,11 +230,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.18.0
+ * Domma Core CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.425Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.726Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -2785,6 +2785,43 @@ code, pre {
     z-index: 2;
 }
 
+/* Button Group Sizes */
+.btn-group-sm > .btn,
+.btn-group-sm > .btn-group > .btn {
+    padding: var(--dm-space-1) var(--dm-space-2);
+    font-size: var(--dm-font-size-xs);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.btn-group-sm > .btn:first-child {
+    border-top-left-radius: var(--dm-radius-sm);
+    border-bottom-left-radius: var(--dm-radius-sm);
+}
+
+.btn-group-sm > .btn:last-child {
+    border-top-right-radius: var(--dm-radius-sm);
+    border-bottom-right-radius: var(--dm-radius-sm);
+}
+
+.btn-group-lg > .btn,
+.btn-group-lg > .btn-group > .btn {
+    padding: var(--dm-space-3) var(--dm-space-6);
+    font-size: var(--dm-font-size-lg);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.btn-group-lg > .btn:first-child {
+    border-top-left-radius: var(--dm-radius-lg);
+    border-bottom-left-radius: var(--dm-radius-lg);
+}
+
+.btn-group-lg > .btn:last-child {
+    border-top-right-radius: var(--dm-radius-lg);
+    border-bottom-right-radius: var(--dm-radius-lg);
+}
+
 /* Range Slider */
 .form-range {
     appearance: none;
@@ -4222,12 +4259,18 @@ code, pre {
 }
 
 @keyframes dm-ambient-aurora {
-    0%, 100% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
+    0%   { background-position: 0% 50%; }
+    25%  { background-position: 50% 0%; }
+    50%  { background-position: 100% 50%; }
+    75%  { background-position: 50% 100%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes dm-ambient-aurora-2 {
+    0%   { background-position: 100% 0%; }
+    33%  { background-position: 0% 50%; }
+    66%  { background-position: 80% 100%; }
+    100% { background-position: 100% 0%; }
 }
 
 /* Utility Classes - Rotating Gradients */
@@ -4469,20 +4512,42 @@ code, pre {
 .bg-ambient-aurora::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
     background: linear-gradient(
-            45deg,
-            rgba(59, 130, 246, 0.1) 0%,
-            rgba(139, 92, 246, 0.08) 25%,
-            rgba(236, 72, 153, 0.06) 50%,
-            rgba(59, 130, 246, 0.08) 75%,
-            rgba(139, 92, 246, 0.1) 100%
+            120deg,
+            rgba(16, 185, 129, 0.0) 0%,
+            rgba(16, 185, 129, 0.5) 20%,
+            rgba(6, 182, 212, 0.6) 40%,
+            rgba(59, 130, 246, 0.4) 60%,
+            rgba(6, 182, 212, 0.3) 80%,
+            rgba(16, 185, 129, 0.0) 100%
     );
-    background-size: 400% 400%;
-    animation: dm-ambient-aurora 15s ease infinite;
+    background-size: 200% 200%;
+    animation: dm-ambient-aurora 20s ease infinite;
+    will-change: background-position;
+}
+
+.bg-ambient-aurora::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+            240deg,
+            rgba(139, 92, 246, 0.0) 0%,
+            rgba(139, 92, 246, 0.4) 25%,
+            rgba(236, 72, 153, 0.3) 50%,
+            rgba(109, 40, 217, 0.35) 75%,
+            rgba(139, 92, 246, 0.0) 100%
+    );
+    background-size: 200% 200%;
+    animation: dm-ambient-aurora-2 25s ease infinite;
+    mix-blend-mode: screen;
     will-change: background-position;
 }
 
@@ -4926,11 +4991,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.18.0
+ * Domma Grid CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.433Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.735Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -5551,11 +5616,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.18.0
+ * Domma Elements CSS v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.441Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.743Z
+ * Commit: 2eb305a
  */
 
 /**
@@ -6944,6 +7009,14 @@ textarea:not([class])::placeholder {
     color: var(--dm-info-dark);
 }
 
+/* In dark themes, the "-dark" colour variants are designed for light backgrounds.
+   Use the base colour (readable on dark backgrounds) instead. */
+[data-mode="dark"] .alert-primary { color: var(--dm-primary); }
+[data-mode="dark"] .alert-success { color: var(--dm-success); }
+[data-mode="dark"] .alert-danger  { color: var(--dm-danger);  }
+[data-mode="dark"] .alert-warning { color: var(--dm-warning-text, var(--dm-warning)); }
+[data-mode="dark"] .alert-info    { color: var(--dm-info);    }
+
 
 /* ============================================
    CODE BLOCK
@@ -7342,7 +7415,7 @@ code {
 }
 
 .navbar-dark .navbar-link {
-    color: var(--dm-text-disabled);
+    color: var(--dm-gray-400, #adb5bd);
 }
 
 .navbar-dark .navbar-link:hover {
@@ -7639,7 +7712,7 @@ code {
 }
 
 .navbar-dark .navbar-dropdown-item {
-    color: var(--dm-text-disabled);
+    color: var(--dm-gray-400, #adb5bd);
 }
 
 .navbar-dark .navbar-dropdown-item:hover {
@@ -11871,16 +11944,16 @@ code {
 /* Dark theme support */
 [data-mode="dark"] .dm-progression-content {
     background: var(--dm-surface);
-    border-color: var(--dm-text);
-    color: var(--dm-text-inverse);
+    border-color: var(--dm-border);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-progression-title {
-    color: var(--dm-text-inverse);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-progression-description {
-    color: var(--dm-text-disabled);
+    color: var(--dm-text-secondary);
 }
 
 [data-mode="dark"] .dm-progression-minimal .dm-progression-content {
@@ -12241,11 +12314,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.18.0
+ * Domma Themes v0.18.1
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-20T13:24:07.403Z
- * Commit: d0731be
+ * Built: 2026-02-25T21:51:19.692Z
+ * Commit: 2eb305a
  */
 
 /**