domma-js 0.7.0-alpha → 0.7.4-alpha

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.5.0-alpha
+ * Domma Elements CSS v0.7.4-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T09:15:50.041Z
- * Commit: ad86642
+ * Built: 2026-01-08T17:15:02.942Z
+ * Commit: b276942
  */
 
 /**

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.5.0-alpha
+ * Domma Grid CSS v0.7.4-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T09:15:50.031Z
- * Commit: ad86642
+ * Built: 2026-01-08T17:15:02.933Z
+ * Commit: b276942
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.5.0-alpha
+ * Domma Syntax Highlighting CSS v0.7.4-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T09:15:50.052Z
- * Commit: ad86642
+ * Built: 2026-01-08T17:15:02.953Z
+ * Commit: b276942
  */
 
 /**

package/public/dist/themes/domma-themes.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.5.0-alpha
+ * Domma Themes v0.7.4-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T09:15:49.994Z
- * Commit: ad86642
+ * Built: 2026-01-08T17:15:02.894Z
+ * Commit: b276942
  */
 
 /**

package/templates/kickstart/about/index.html

@@ -28,8 +28,8 @@
 
 <!-- About Content -->
 <section class="container py-4">
-  <div class="row g-6">
-    <div class="col-12 col-lg-8">
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div class="lg:col-span-2">
       <h2 class="h3 mb-4">Our Story</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
@@ -60,8 +60,8 @@
       </ul>
     </div>
 
-    <div class="col-12 col-lg-4">
-      <div class="card">
+    <div>
+      <div class="card shadow-md">
         <div class="card-body">
           <h3 class="h5 mb-3">Quick Facts</h3>
           <dl class="mb-0">
@@ -89,10 +89,9 @@
 <section class="container py-6">
   <h2 class="text-center mb-6">Meet the Team</h2>
 
-  <div class="row g-4">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
     <!-- Team Member 1 -->
-    <div class="col-12 col-sm-6 col-lg-3">
-      <div class="card text-center hover">
+    <div class="card text-center hover shadow-md">
         <div class="card-body">
           <div class="mb-3"
                style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
@@ -108,11 +107,9 @@
           </div>
         </div>
       </div>
-    </div>
 
     <!-- Team Member 2 -->
-    <div class="col-12 col-sm-6 col-lg-3">
-      <div class="card text-center hover">
+    <div class="card text-center hover shadow-md">
         <div class="card-body">
           <div class="mb-3"
                style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
@@ -128,11 +125,9 @@
           </div>
         </div>
       </div>
-    </div>
 
     <!-- Team Member 3 -->
-    <div class="col-12 col-sm-6 col-lg-3">
-      <div class="card text-center hover">
+    <div class="card text-center hover shadow-md">
         <div class="card-body">
           <div class="mb-3"
                style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
@@ -148,11 +143,9 @@
           </div>
         </div>
       </div>
-    </div>
 
     <!-- Team Member 4 -->
-    <div class="col-12 col-sm-6 col-lg-3">
-      <div class="card text-center hover">
+    <div class="card text-center hover shadow-md">
         <div class="card-body">
           <div class="mb-3"
                style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);"></div>
@@ -177,9 +170,8 @@
   <div class="container">
     <h2 class="text-center mb-6">Our Journey</h2>
 
-    <div class="row g-4">
-      <div class="col-12 col-md-6 col-lg-3">
-        <div class="card h-100">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div class="card h-100 shadow-md">
           <div class="card-body">
             <div class="badge badge-primary mb-3">2024 Q1</div>
             <h3 class="h5 mb-2">Project Launch</h3>
@@ -188,10 +180,8 @@
             </p>
           </div>
         </div>
-      </div>
 
-      <div class="col-12 col-md-6 col-lg-3">
-        <div class="card h-100">
+      <div class="card h-100 shadow-md">
           <div class="card-body">
             <div class="badge badge-primary mb-3">2024 Q2</div>
             <h3 class="h5 mb-2">Community Growth</h3>
@@ -200,10 +190,8 @@
             </p>
           </div>
         </div>
-      </div>
 
-      <div class="col-12 col-md-6 col-lg-3">
-        <div class="card h-100">
+      <div class="card h-100 shadow-md">
           <div class="card-body">
             <div class="badge badge-primary mb-3">2024 Q3</div>
             <h3 class="h5 mb-2">Major Update</h3>
@@ -212,10 +200,8 @@
             </p>
           </div>
         </div>
-      </div>
 
-      <div class="col-12 col-md-6 col-lg-3">
-        <div class="card h-100">
+      <div class="card h-100 shadow-md">
           <div class="card-body">
             <div class="badge badge-success mb-3">2024 Q4</div>
             <h3 class="h5 mb-2">Looking Ahead</h3>

package/templates/kickstart/blog/index.html

@@ -41,10 +41,9 @@
 
 <!-- Blog Posts -->
 <section class="container py-4">
-  <div class="row g-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <!-- Blog Post 1 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-primary">Tutorial</span>
@@ -62,11 +61,9 @@
           </div>
         </div>
       </article>
-    </div>
 
     <!-- Blog Post 2 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-success">Update</span>
@@ -84,11 +81,9 @@
           </div>
         </div>
       </article>
-    </div>
 
     <!-- Blog Post 3 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-warning">News</span>
@@ -106,11 +101,9 @@
           </div>
         </div>
       </article>
-    </div>
 
     <!-- Blog Post 4 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-primary">Tutorial</span>
@@ -128,11 +121,9 @@
           </div>
         </div>
       </article>
-    </div>
 
     <!-- Blog Post 5 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-info">Tips</span>
@@ -150,11 +141,9 @@
           </div>
         </div>
       </article>
-    </div>
 
     <!-- Blog Post 6 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <article class="card h-100 hover">
+    <article class="card h-100 hover shadow-md">
         <div class="card-body">
           <div class="d-flex gap-2 mb-3">
             <span class="badge badge-danger">Important</span>
@@ -200,8 +189,8 @@
 <!-- Newsletter Signup -->
 <section class="bg-surface py-6">
   <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-12 col-lg-6 text-center">
+    <div class="d-flex justify-content-center">
+      <div class="text-center" style="max-width: 600px;">
         <h2 class="h3 mb-3">Subscribe to Our Newsletter</h2>
         <p class="text-secondary mb-4">
           Get the latest updates and tutorials delivered to your inbox.

package/templates/kickstart/contact/index.html

@@ -28,36 +28,36 @@
 
 <!-- Contact Content -->
 <section class="container py-4">
-  <div class="row g-6">
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Contact Form -->
-    <div class="col-12 col-lg-8">
-      <div class="card">
+    <div class="lg:col-span-2">
+      <div class="card shadow-md">
         <div class="card-body">
           <h2 class="h4 mb-4">Send us a Message</h2>
 
           <form id="contact-form">
-            <div class="row g-4">
-              <div class="col-12 col-md-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
                 <label for="name" class="form-label">Name *</label>
                 <input type="text" id="name" class="form-control" required>
               </div>
 
-              <div class="col-12 col-md-6">
+              <div>
                 <label for="email" class="form-label">Email *</label>
                 <input type="email" id="email" class="form-control" required>
               </div>
 
-              <div class="col-12">
+              <div class="md:col-span-2">
                 <label for="subject" class="form-label">Subject *</label>
                 <input type="text" id="subject" class="form-control" required>
               </div>
 
-              <div class="col-12">
+              <div class="md:col-span-2">
                 <label for="message" class="form-label">Message *</label>
                 <textarea id="message" class="form-control" rows="6" required></textarea>
               </div>
 
-              <div class="col-12">
+              <div class="md:col-span-2">
                 <button type="submit" class="btn btn-primary btn-lg">
                   <span data-icon="send"></span> Send Message
                 </button>
@@ -130,8 +130,8 @@
   <div class="container">
     <h2 class="text-center mb-6">Frequently Asked Questions</h2>
 
-    <div class="row justify-content-center">
-      <div class="col-12 col-lg-8">
+    <div class="d-flex justify-content-center">
+      <div style="max-width: 800px; width: 100%;">
         <div class="accordion" id="faq-accordion">
           <!-- FAQ 1 -->
           <div class="accordion-item">

package/templates/kickstart/docs/index.html

@@ -48,9 +48,9 @@
 
 <!-- Documentation Layout -->
 <div class="container-fluid py-6">
-  <div class="row g-4">
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
     <!-- Sidebar Navigation -->
-    <aside class="col-12 col-lg-3">
+    <aside>
       <div class="docs-sidebar">
         <h2 class="h5 mb-3">Documentation</h2>
         <nav class="nav flex-column">
@@ -66,7 +66,7 @@
     </aside>
 
     <!-- Main Content -->
-    <main class="col-12 col-lg-9">
+    <main class="lg:col-span-3">
       <!-- Getting Started -->
       <section id="getting-started" class="mb-8">
         <h1 class="display-4 mb-4">Getting Started</h1>
@@ -142,31 +142,27 @@
           Domma includes 19+ UI components out of the box. Here are some examples:
         </p>
 
-        <div class="row g-4 mt-3">
-          <div class="col-12 col-md-6">
-            <div class="card">
-              <div class="card-body">
-                <h3 class="h5 mb-2">Buttons</h3>
-                <div class="d-flex flex-wrap gap-2">
-                  <button class="btn btn-primary">Primary</button>
-                  <button class="btn btn-secondary">Secondary</button>
-                  <button class="btn btn-success">Success</button>
-                  <button class="btn btn-danger">Danger</button>
-                </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
+          <div class="card shadow-md">
+            <div class="card-body">
+              <h3 class="h5 mb-2">Buttons</h3>
+              <div class="d-flex flex-wrap gap-2">
+                <button class="btn btn-primary">Primary</button>
+                <button class="btn btn-secondary">Secondary</button>
+                <button class="btn btn-success">Success</button>
+                <button class="btn btn-danger">Danger</button>
               </div>
             </div>
           </div>
 
-          <div class="col-12 col-md-6">
-            <div class="card">
-              <div class="card-body">
-                <h3 class="h5 mb-2">Badges</h3>
-                <div class="d-flex flex-wrap gap-2">
-                  <span class="badge badge-primary">Primary</span>
-                  <span class="badge badge-success">Success</span>
-                  <span class="badge badge-warning">Warning</span>
-                  <span class="badge badge-danger">Danger</span>
-                </div>
+          <div class="card shadow-md">
+            <div class="card-body">
+              <h3 class="h5 mb-2">Badges</h3>
+              <div class="d-flex flex-wrap gap-2">
+                <span class="badge badge-primary">Primary</span>
+                <span class="badge badge-success">Success</span>
+                <span class="badge badge-warning">Warning</span>
+                <span class="badge badge-danger">Danger</span>
               </div>
             </div>
           </div>

package/templates/kickstart/domma.config.json

@@ -19,12 +19,32 @@
 "url": "/"
 },
 "items": [
-{"text": "Home", "url": "/", "active": true},
-{"text": "About", "url": "/about/"},
-{"text": "Contact", "url": "/contact/"},
-{"text": "Blog", "url": "/blog/"},
-{"text": "Docs", "url": "/docs/"},
-{"text": "QuickStart", "url": "https://github.com/dcbw-it/domma#quick-start-with-cli-recommended", "badge": "New"}
+{
+"text": "Home",
+"url": "/",
+"active": true
+},
+{
+"text": "About",
+"url": "/about/"
+},
+{
+"text": "Contact",
+"url": "/contact/"
+},
+{
+"text": "Blog",
+"url": "/blog/"
+},
+{
+"text": "Docs",
+"url": "/docs/"
+},
+{
+"text": "QuickStart",
+"url": "https://github.com/dcbw-it/domma#quick-start-with-cli-recommended",
+"badge": "New"
+}
 ],
 "variant": "dark",
 "position": "sticky",
@@ -33,9 +53,18 @@
 "footer": {
 "copyright": "© {{year}} {{projectName}}. All rights reserved.",
 "links": [
-{"text": "Privacy Policy", "url": "#privacy"},
-{"text": "Terms of Service", "url": "#terms"},
-{"text": "Contact Us", "url": "/contact/"}
+{
+"text": "Privacy Policy",
+"url": "#privacy"
+},
+{
+"text": "Terms of Service",
+"url": "#terms"
+},
+{
+"text": "Contact Us",
+"url": "/contact/"
+}
 ]
 },
 "features": {

package/templates/kickstart/index.html

@@ -27,7 +27,7 @@
       with zero dependencies.
     </p>
     <div class="d-flex justify-content-center gap-3">
-      <a href="/docs/" class="btn btn-lg btn-primary">
+      <a href="docs/index.html" class="btn btn-lg btn-primary">
         <span data-icon="book"></span> Get Started
       </a>
       <a href="https://github.com/dcbw-it/domma" class="btn btn-lg btn-outline-primary" target="_blank">
@@ -41,10 +41,9 @@
 <section class="container py-8">
   <h2 class="text-center mb-6">Key Features</h2>
 
-  <div class="row g-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <!-- Feature 1 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="zap"></span>
@@ -56,11 +55,9 @@
           </p>
         </div>
       </div>
-    </div>
 
     <!-- Feature 2 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="layers"></span>
@@ -72,11 +69,9 @@
           </p>
         </div>
       </div>
-    </div>
 
     <!-- Feature 3 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="palette"></span>
@@ -88,11 +83,9 @@
           </p>
         </div>
       </div>
-    </div>
 
     <!-- Feature 4 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="code"></span>
@@ -104,11 +97,9 @@
           </p>
         </div>
       </div>
-    </div>
 
     <!-- Feature 5 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="smartphone"></span>
@@ -120,11 +111,9 @@
           </p>
         </div>
       </div>
-    </div>
 
     <!-- Feature 6 -->
-    <div class="col-12 col-md-6 col-lg-4">
-      <div class="card hover shadow-sm h-100">
+    <div class="card hover shadow-md h-100">
         <div class="card-body text-center">
           <div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
             <span data-icon="settings"></span>
@@ -136,7 +125,6 @@
           </p>
         </div>
       </div>
-    </div>
   </div>
 </section>
 
@@ -148,11 +136,11 @@
       Check out the documentation to learn more about what Domma can do.
     </p>
     <div class="d-flex justify-content-center gap-3">
-      <a href="/docs/" class="btn btn-lg btn-primary">
+      <a href="docs/index.html" class="btn btn-lg btn-primary">
         Read the Docs
       </a>
-      <a href="/examples/" class="btn btn-lg btn-outline-primary">
-        View Examples
+      <a href="https://github.com/dcbw-it/domma" class="btn btn-lg btn-outline-primary" target="_blank">
+        View on GitHub
       </a>
     </div>
   </div>

package/templates/kickstart/js/app.js

@@ -7,7 +7,7 @@
 
 (async function () {
   // Load configuration
-  const response = await fetch('/domma.config.json');
+  const response = await fetch('./domma.config.json');
   const config = await response.json();
 
   // Initialize theme