domma-js 0.7.4-alpha → 0.7.6-alpha

package/public/dist/elements.css

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

package/public/dist/grid.css

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

package/public/dist/syntax.css

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

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

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.7.4-alpha
+ * Domma Themes v0.7.5-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-08T17:15:02.894Z
- * Commit: b276942
+ * Built: 2026-01-08T18:40:13.814Z
+ * Commit: 61aa8b6
  */
 
 /**

package/templates/kickstart/contact/index.html

@@ -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

@@ -281,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,71 +6,69 @@
   },
   "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
+  }
 }

package/templates/kickstart/js/app.js

@@ -1,112 +1,111 @@
 /**
  * Domma Kickstart Application
  *
- * This file initializes your Domma project based on domma.config.json.
- * Customize the config file to change navbar, footer, theme, and features.
+ * This file initialises your Domma project based on domma.config.json.
+ * Customise the config file to change navbar, footer, theme, and features.
  */
 
-(async function () {
+$(() => {
   // Load configuration
-  const response = await fetch('./domma.config.json');
-  const config = await response.json();
-
-  // Initialize theme
-  if (config.theme) {
-    Domma.theme.init({
-      theme: config.theme.default || 'charcoal-dark',
-      persist: config.theme.persist !== false,
-      autoDetect: config.theme.autoDetect === true
-    });
-
-    // Add theme selector if enabled
-    if (config.theme.selector) {
-      addThemeSelector();
-    }
-  }
-
-  // Initialize navbar
-  if (config.navbar) {
-    Domma.elements.navbar('#main-navbar', {
-      brand: config.navbar.brand,
-      items: config.navbar.items,
-      variant: config.navbar.variant || 'dark',
-      position: config.navbar.position || 'sticky',
-      collapsible: config.navbar.collapsible !== false
-    });
-  }
-
-  // Initialize footer
-  if (config.footer) {
-    const footer = document.querySelector('.page-footer');
-    if (footer) {
-      const footerContent = document.createElement('div');
-      footerContent.className = 'footer-content';
-
-      const copyright = document.createElement('p');
-      copyright.textContent = config.footer.copyright;
-      footerContent.appendChild(copyright);
-
-      const nav = document.createElement('nav');
-      nav.className = 'footer-nav';
-      config.footer.links.forEach(link => {
-        const a = document.createElement('a');
-        a.href = link.url;
-        a.textContent = link.text;
-        nav.appendChild(a);
+  Domma.http.get('/domma.config.json').then(config => {
+    // Initialise theme
+    if (config.theme) {
+      Domma.theme.init({
+        theme: config.theme.default || 'charcoal-dark',
+        persist: config.theme.persist !== false,
+        autoDetect: config.theme.autoDetect === true
       });
-      footerContent.appendChild(nav);
 
-      footer.appendChild(footerContent);
+      // Add theme selector if enabled
+      if (config.theme.selector) {
+        addThemeSelector();
+      }
     }
-  }
 
-  // Initialize features
-  if (config.features) {
-    // Icon scanning
-    if (config.features.icons) {
-      Domma.icons.scan();
+    // Initialise navbar
+    if (config.navbar) {
+      Domma.elements.navbar('#main-navbar', {
+        brand: config.navbar.brand,
+        items: config.navbar.items,
+        variant: config.navbar.variant || 'dark',
+        position: config.navbar.position || 'sticky',
+        collapsible: config.navbar.collapsible !== false
+      });
     }
 
-    // Back to top button
-    if (config.features.backToTop) {
-      Domma.elements.backToTop({
-        scrollThreshold: 300,
-        position: 'bottom-right'
-      });
+    // Initialise footer
+    if (config.footer) {
+      const $footer = $('.page-footer');
+      if ($footer.length) {
+        const $footerContent = $('<div class="footer-content"></div>');
+
+        const $copyright = $('<p></p>').text(config.footer.copyright);
+        $footerContent.append($copyright);
+
+        const $nav = $('<nav class="footer-nav"></nav>');
+        _.each(config.footer.links, link => {
+          const $link = $('<a></a>')
+            .attr('href', link.url)
+            .text(link.text);
+          $nav.append($link);
+        });
+        $footerContent.append($nav);
+
+        $footer.append($footerContent);
+      }
     }
 
-    // Smooth scroll
-    if (config.features.smoothScroll) {
-      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
+    // Initialise features
+    if (config.features) {
+      // Icon scanning
+      if (config.features.icons) {
+        Domma.icons.scan();
+      }
+
+      // Back to top button
+      if (config.features.backToTop) {
+        Domma.elements.backToTop({
+          scrollThreshold: 300,
+          position: 'bottom-right'
+        });
+      }
+
+      // Smooth scroll
+      if (config.features.smoothScroll) {
+        $('a[href^="#"]').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'});
           }
         });
-      });
-    }
+      }
 
-    // Code copy buttons
-    if (config.features.codeCopy) {
-      document.querySelectorAll('pre code').forEach(block => {
-        const button = document.createElement('button');
-        button.textContent = 'Copy';
-        button.className = 'btn btn-sm code-copy-btn';
-        button.onclick = () => {
-          navigator.clipboard.writeText(block.textContent);
-          button.textContent = 'Copied!';
-          setTimeout(() => button.textContent = 'Copy', 2000);
-        };
-        block.parentElement.style.position = 'relative';
-        block.parentElement.insertBefore(button, block);
-      });
+      // Code copy buttons
+      if (config.features.codeCopy) {
+        $('pre code').each((codeBlock) => {
+          const $code = $(codeBlock);
+          const $pre = $code.parent();
+
+          const $button = $('<button class="btn btn-sm code-copy-btn">Copy</button>');
+
+          $button.on('click', () => {
+            _.copyToClipboard($code.text());
+            $button.text('Copied!');
+            setTimeout(() => $button.text('Copy'), 2000);
+          });
+
+          $pre.css('position', 'relative');
+          $pre.prepend($button);
+        });
+      }
     }
-  }
 
-  console.log(`✓ Domma initialized with theme: ${config.theme.default}`);
-})();
+    console.log(`✓ Domma initialised with theme: ${config.theme.default}`);
+  });
+});
 
 /**
  * Add floating theme selector
@@ -115,28 +114,25 @@ function addThemeSelector() {
   const themes = Domma.theme.listThemes();
   const currentTheme = Domma.theme.get();
 
-  const selector = document.createElement('div');
-  selector.className = 'theme-selector';
+  const $selector = $('<div class="theme-selector"></div>');
+  const $select = $('<select id="theme-select" class="form-select"></select>');
 
-  const select = document.createElement('select');
-  select.id = 'theme-select';
-  select.className = 'form-select';
+  _.each(themes, theme => {
+    const $option = $('<option></option>')
+      .attr('value', theme)
+      .text(theme);
 
-  themes.forEach(theme => {
-    const option = document.createElement('option');
-    option.value = theme;
-    option.textContent = theme;
     if (theme === currentTheme) {
-      option.selected = true;
+      $option.attr('selected', 'selected');
     }
-    select.appendChild(option);
+
+    $select.append($option);
   });
 
-  selector.appendChild(select);
+  $selector.append($select);
 
   // Add styles
-  const style = document.createElement('style');
-  style.textContent = `
+  const $style = $(`<style>
         .theme-selector {
             position: fixed;
             bottom: 80px;
@@ -150,12 +146,13 @@ function addThemeSelector() {
         .theme-selector select {
             min-width: 150px;
         }
-    `;
-  document.head.appendChild(style);
-  document.body.appendChild(selector);
+    </style>`);
+
+  $('head').append($style);
+  $('body').append($selector);
 
   // Handle theme changes
-  select.addEventListener('change', (e) => {
-    Domma.theme.set(e.target.value);
+  $select.on('change', (e) => {
+    Domma.theme.set($(e.target).val());
   });
 }