domma-js 0.7.2-alpha → 0.7.5-alpha

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.7.2-alpha
+ * Domma Elements CSS v0.7.5-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T15:02:28.663Z
- * Commit: 59f511d
+ * Built: 2026-01-08T18:40:13.850Z
+ * Commit: 61aa8b6
  */
 
 /**

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.7.2-alpha
+ * Domma Grid CSS v0.7.5-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T15:02:28.652Z
- * Commit: 59f511d
+ * Built: 2026-01-08T18:40:13.844Z
+ * Commit: 61aa8b6
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.7.2-alpha
+ * Domma Syntax Highlighting CSS v0.7.5-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T15:02:28.671Z
- * Commit: 59f511d
+ * Built: 2026-01-08T18:40:13.858Z
+ * Commit: 61aa8b6
  */
 
 /**

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

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.7.2-alpha
+ * Domma Themes v0.7.5-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T15:02:28.608Z
- * Commit: 59f511d
+ * Built: 2026-01-08T18:40:13.814Z
+ * Commit: 61aa8b6
  */
 
 /**

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">
@@ -191,28 +191,33 @@
 
 <!-- Form Handling -->
 <script>
-  document.getElementById('contact-form').addEventListener('submit', function (e) {
-    e.preventDefault();
-
-    // Get form values
-    const name = document.getElementById('name').value;
-    const email = document.getElementById('email').value;
-    const subject = document.getElementById('subject').value;
-    const message = document.getElementById('message').value;
-
-    // Show success message (in a real app, send to backend)
-    Domma.elements.toast({
-      message: 'Thank you! Your message has been sent successfully.',
-      type: 'success',
-      duration: 5000
+  $(() => {
+    // Handle contact form submission
+    $('#contact-form').on('submit', function (e) {
+      e.preventDefault();
+
+      // Get form values using Domma
+      const formData = {
+        name: $('#name').val(),
+        email: $('#email').val(),
+        subject: $('#subject').val(),
+        message: $('#message').val()
+      };
+
+      // Show success message (in a real app, send to backend)
+      Domma.elements.toast({
+        message: 'Thank you! Your message has been sent successfully.',
+        type: 'success',
+        duration: 5000
+      });
+
+      // Reset form
+      $(this)[0].reset();
     });
 
-    // Reset form
-    this.reset();
+    // Initialize accordion
+    Domma.elements.accordion('#faq-accordion');
   });
-
-  // Initialize accordion
-  Domma.elements.accordion('#faq-accordion');
 </script>
 </body>
 </html>

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>
@@ -285,23 +281,25 @@ Domma.theme.get();  // 'ocean-dark'</code></pre>
 
 <!-- Page-specific scripts -->
 <script>
-  // Initialize tabs
-  Domma.elements.tabs('#install-tabs');
+  $(() => {
+    // Initialize tabs
+    Domma.elements.tabs('#install-tabs');
 
-  // Initialize accordion
-  Domma.elements.accordion('#docs-faq');
+    // Initialize accordion
+    Domma.elements.accordion('#docs-faq');
 
-  // Smooth scroll for sidebar links
-  document.querySelectorAll('.docs-sidebar a').forEach(link => {
-    link.addEventListener('click', function (e) {
+    // Smooth scroll for sidebar links
+    $('.docs-sidebar a').on('click', function (e) {
       e.preventDefault();
-      const target = document.querySelector(this.getAttribute('href'));
-      if (target) {
-        target.scrollIntoView({behavior: 'smooth'});
+      const targetId = $(this).attr('href');
+      const $target = $(targetId);
+
+      if ($target.length) {
+        $target[0].scrollIntoView({behavior: 'smooth'});
 
         // Update active state
-        document.querySelectorAll('.docs-sidebar .nav-link').forEach(l => l.classList.remove('active'));
-        this.classList.add('active');
+        $('.docs-sidebar .nav-link').removeClass('active');
+        $(this).addClass('active');
       }
     });
   });

package/templates/kickstart/domma.config.json

@@ -6,69 +6,71 @@
   },
   "theme": {
     "default": "{{theme}}",
-    "selector": {{includeThemeSelector}},
-    "persist": true,
-    "autoDetect": false
-  },
-  "navbar": {
-    "brand": {
-      "text": "{{projectName}}",
-      "logo": "assets/logo/placeholder.svg",
-      "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"
-      }
-    ],
-    "variant": "dark",
-    "position": "sticky",
-    "collapsible": true
-  },
-  "footer": {
-    "copyright": "© {{year}} {{projectName}}. All rights reserved.",
-    "links": [
-      {
-        "text": "Privacy Policy",
-        "url": "#privacy"
-      },
-      {
-        "text": "Terms of Service",
-        "url": "#terms"
-      },
-      {
-        "text": "Contact Us",
-        "url": "/contact/"
-      }
-    ]
-  },
-  "features": {
-    "icons": true,
-    "backToTop": true,
-    "codeCopy": true,
-    "smoothScroll": true
-  }
+    "selector": {{
+  includeThemeSelector
+}},
+"persist": true,
+"autoDetect": false
+},
+"navbar": {
+"brand": {
+"text": "{{projectName}}",
+"logo": "assets/logo/placeholder.svg",
+"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"
+}
+],
+"variant": "dark",
+"position": "sticky",
+"collapsible": true
+},
+"footer": {
+"copyright": "© {{year}} {{projectName}}. All rights reserved.",
+"links": [
+{
+"text": "Privacy Policy",
+"url": "#privacy"
+},
+{
+"text": "Terms of Service",
+"url": "#terms"
+},
+{
+"text": "Contact Us",
+"url": "/contact/"
+}
+]
+},
+"features": {
+"icons": true,
+"backToTop": true,
+"codeCopy": true,
+"smoothScroll": true
+}
 }