domma-js 0.32.0 → 0.33.0

package/templates/kickstart/frontend/pages/terms/index.html

@@ -22,8 +22,8 @@
 <section class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 40vh; padding: 3rem 2rem;">
   <div class="hero-content">
     <span data-icon="document" data-icon-size="72" class="mb-3" style="color: var(--dm-white-t85);"></span>
-    <h1 class="display-2 mb-3" style="color: var(--dm-white);">Terms of Service</h1>
-    <p class="lead" style="color: var(--dm-white-t85);">
+    <h1 class="text-4xl font-bold mb-3" style="color: var(--dm-white);">Terms of Service</h1>
+    <p class="text-lg" style="color: var(--dm-white-t85);">
       Last updated: <time datetime="{{year}}-01-01">January {{year}}</time>
     </p>
   </div>
@@ -31,36 +31,36 @@
 
 <!-- Terms Content -->
 <section class="container py-4">
-  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+  <div class="grid grid-cols-1 grid-cols-4 gap-6">
     <!-- Table of Contents -->
     <aside>
       <div class="card sticky" style="top: 80px;">
         <div class="card-body">
-          <h2 class="h5 mb-3">Contents</h2>
-          <nav class="nav flex-column">
-            <a href="#agreement" class="nav-link">Agreement to Terms</a>
-            <a href="#use-license" class="nav-link">Use License</a>
-            <a href="#user-accounts" class="nav-link">User Accounts</a>
-            <a href="#prohibited-uses" class="nav-link">Prohibited Uses</a>
-            <a href="#intellectual-property" class="nav-link">Intellectual Property</a>
-            <a href="#user-content" class="nav-link">User Content</a>
-            <a href="#disclaimers" class="nav-link">Disclaimers</a>
-            <a href="#limitation-liability" class="nav-link">Limitation of Liability</a>
-            <a href="#indemnification" class="nav-link">Indemnification</a>
-            <a href="#termination" class="nav-link">Termination</a>
-            <a href="#governing-law" class="nav-link">Governing Law</a>
-            <a href="#changes" class="nav-link">Changes to Terms</a>
-            <a href="#contact" class="nav-link">Contact Us</a>
+          <h2 class="text-lg font-bold mb-3">Contents</h2>
+          <nav class="list-group list-group-flush">
+            <a href="#agreement" class="list-group-item list-group-item-action">Agreement to Terms</a>
+            <a href="#use-license" class="list-group-item list-group-item-action">Use License</a>
+            <a href="#user-accounts" class="list-group-item list-group-item-action">User Accounts</a>
+            <a href="#prohibited-uses" class="list-group-item list-group-item-action">Prohibited Uses</a>
+            <a href="#intellectual-property" class="list-group-item list-group-item-action">Intellectual Property</a>
+            <a href="#user-content" class="list-group-item list-group-item-action">User Content</a>
+            <a href="#disclaimers" class="list-group-item list-group-item-action">Disclaimers</a>
+            <a href="#limitation-liability" class="list-group-item list-group-item-action">Limitation of Liability</a>
+            <a href="#indemnification" class="list-group-item list-group-item-action">Indemnification</a>
+            <a href="#termination" class="list-group-item list-group-item-action">Termination</a>
+            <a href="#governing-law" class="list-group-item list-group-item-action">Governing Law</a>
+            <a href="#changes" class="list-group-item list-group-item-action">Changes to Terms</a>
+            <a href="#contact" class="list-group-item list-group-item-action">Contact Us</a>
           </nav>
         </div>
       </div>
     </aside>
 
     <!-- Main Content -->
-    <main class="lg:col-span-3">
+    <main class="col-span-3">
       <!-- Agreement to Terms -->
       <section id="agreement" class="mb-6">
-        <h2 class="h3 mb-4">Agreement to Terms</h2>
+        <h2 class="text-2xl font-bold mb-4">Agreement to Terms</h2>
         <p>
           These Terms of Service ("Terms") constitute a legally binding agreement between you and {{projectName}}
           ("Company", "we", "us", or "our") concerning your access to and use of our website and services.
@@ -71,20 +71,20 @@
         </p>
 
         <div class="alert alert-warning mt-4">
-          <span data-icon="alert-triangle" class="me-2"></span>
+          <span data-icon="alert-triangle" class="mr-2"></span>
           <strong>Important:</strong> Please read these Terms carefully before using our services.
         </div>
       </section>
 
       <!-- Use License -->
       <section id="use-license" class="mb-6">
-        <h2 class="h3 mb-4">Use License</h2>
+        <h2 class="text-2xl font-bold mb-4">Use License</h2>
         <p class="mb-3">
           Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable,
           and revocable license to access and use our website for personal or commercial purposes.
         </p>
 
-        <h3 class="h5 mb-3">This license does not include the right to:</h3>
+        <h3 class="text-lg font-bold mb-3">This license does not include the right to:</h3>
         <ul>
           <li>Modify, copy, or distribute any content from our website without our written permission</li>
           <li>Use our website for any unlawful purpose or in violation of these Terms</li>
@@ -96,15 +96,15 @@
 
       <!-- User Accounts -->
       <section id="user-accounts" class="mb-6">
-        <h2 class="h3 mb-4">User Accounts</h2>
+        <h2 class="text-2xl font-bold mb-4">User Accounts</h2>
         <p class="mb-3">
           When you create an account with us, you must provide accurate, complete, and current information.
           Failure to do so constitutes a breach of these Terms.
         </p>
 
-        <div class="card bg-surface mb-4">
+        <div class="card bg-white mb-4">
           <div class="card-body">
-            <h3 class="h5 mb-3">Account Security</h3>
+            <h3 class="text-lg font-bold mb-3">Account Security</h3>
             <p class="mb-2">You are responsible for:</p>
             <ul class="mb-0">
               <li>Maintaining the confidentiality of your account credentials</li>
@@ -123,14 +123,14 @@
 
       <!-- Prohibited Uses -->
       <section id="prohibited-uses" class="mb-6">
-        <h2 class="h3 mb-4">Prohibited Uses</h2>
+        <h2 class="text-2xl font-bold mb-4">Prohibited Uses</h2>
         <p class="mb-3">You agree not to use our website for any of the following purposes:</p>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 grid-cols-2 gap-4">
           <div class="card border-danger">
             <div class="card-body">
               <span data-icon="x-circle" class="text-danger mb-2" style="font-size: 1.5rem;"></span>
-              <h3 class="h6 mb-2">Illegal Activities</h3>
+              <h3 class="text-base font-bold mb-2">Illegal Activities</h3>
               <p class="text-secondary mb-0">
                 Any unlawful purpose or in violation of any applicable laws
               </p>
@@ -140,7 +140,7 @@
           <div class="card border-danger">
             <div class="card-body">
               <span data-icon="shield-off" class="text-danger mb-2" style="font-size: 1.5rem;"></span>
-              <h3 class="h6 mb-2">Security Breaches</h3>
+              <h3 class="text-base font-bold mb-2">Security Breaches</h3>
               <p class="text-secondary mb-0">
                 Attempting to breach security or interfere with our services
               </p>
@@ -150,7 +150,7 @@
           <div class="card border-danger">
             <div class="card-body">
               <span data-icon="mail" class="text-danger mb-2" style="font-size: 1.5rem;"></span>
-              <h3 class="h6 mb-2">Spam & Abuse</h3>
+              <h3 class="text-base font-bold mb-2">Spam & Abuse</h3>
               <p class="text-secondary mb-0">
                 Sending unsolicited messages or harassing other users
               </p>
@@ -160,7 +160,7 @@
           <div class="card border-danger">
             <div class="card-body">
               <span data-icon="copy" class="text-danger mb-2" style="font-size: 1.5rem;"></span>
-              <h3 class="h6 mb-2">Infringement</h3>
+              <h3 class="text-base font-bold mb-2">Infringement</h3>
               <p class="text-secondary mb-0">
                 Violating intellectual property rights of others
               </p>
@@ -171,14 +171,14 @@
 
       <!-- Intellectual Property -->
       <section id="intellectual-property" class="mb-6">
-        <h2 class="h3 mb-4">Intellectual Property Rights</h2>
+        <h2 class="text-2xl font-bold mb-4">Intellectual Property Rights</h2>
         <p class="mb-3">
           The website and its entire contents, features, and functionality (including but not limited to all
           information, software, text, displays, images, video, and audio) are owned by {{projectName}}, its
           licensors, or other providers of such material.
         </p>
 
-        <div class="card bg-surface">
+        <div class="card bg-white">
           <div class="card-body">
             <p class="mb-2">
               <strong>Protected Content:</strong> All content on our website is protected by:
@@ -195,14 +195,14 @@
 
       <!-- User Content -->
       <section id="user-content" class="mb-6">
-        <h2 class="h3 mb-4">User-Generated Content</h2>
+        <h2 class="text-2xl font-bold mb-4">User-Generated Content</h2>
         <p class="mb-3">
           Our website may allow you to post, submit, publish, display, or transmit content ("User Content").
           By providing User Content, you grant us a worldwide, non-exclusive, royalty-free license to use,
           reproduce, modify, and distribute your content.
         </p>
 
-        <h3 class="h5 mb-3">Content Standards</h3>
+        <h3 class="text-lg font-bold mb-3">Content Standards</h3>
         <p class="mb-2">User Content must not:</p>
         <ul>
           <li>Contain any material that is defamatory, obscene, or offensive</li>
@@ -213,16 +213,16 @@
         </ul>
 
         <div class="alert alert-info mt-4">
-          <span data-icon="info" class="me-2"></span>
+          <span data-icon="info" class="mr-2"></span>
           We reserve the right to remove any User Content that violates these Terms or is otherwise objectionable.
         </div>
       </section>
 
       <!-- Disclaimers -->
       <section id="disclaimers" class="mb-6">
-        <h2 class="h3 mb-4">Disclaimers</h2>
+        <h2 class="text-2xl font-bold mb-4">Disclaimers</h2>
 
-        <div class="card bg-surface">
+        <div class="card bg-white">
           <div class="card-body">
             <p class="mb-3">
               <strong>THE WEBSITE IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS.</strong>
@@ -240,10 +240,10 @@
 
       <!-- Limitation of Liability -->
       <section id="limitation-liability" class="mb-6">
-        <h2 class="h3 mb-4">Limitation of Liability</h2>
+        <h2 class="text-2xl font-bold mb-4">Limitation of Liability</h2>
 
         <div class="alert alert-danger">
-          <span data-icon="alert-triangle" class="me-2"></span>
+          <span data-icon="alert-triangle" class="mr-2"></span>
           <strong>Important Legal Notice</strong>
         </div>
 
@@ -261,7 +261,7 @@
 
       <!-- Indemnification -->
       <section id="indemnification" class="mb-6">
-        <h2 class="h3 mb-4">Indemnification</h2>
+        <h2 class="text-2xl font-bold mb-4">Indemnification</h2>
         <p>
           You agree to defend, indemnify, and hold harmless {{projectName}} and its officers, directors,
           employees, contractors, agents, licensors, and suppliers from and against any claims, liabilities,
@@ -278,15 +278,15 @@
 
       <!-- Termination -->
       <section id="termination" class="mb-6">
-        <h2 class="h3 mb-4">Termination</h2>
+        <h2 class="text-2xl font-bold mb-4">Termination</h2>
         <p class="mb-3">
           We may terminate or suspend your account and access to our website immediately, without prior notice
           or liability, for any reason whatsoever, including without limitation if you breach these Terms.
         </p>
 
-        <div class="card bg-surface">
+        <div class="card bg-white">
           <div class="card-body">
-            <h3 class="h5 mb-3">Upon Termination:</h3>
+            <h3 class="text-lg font-bold mb-3">Upon Termination:</h3>
             <ul class="mb-0">
               <li>Your right to use the website will immediately cease</li>
               <li>We may delete your account and content</li>
@@ -298,7 +298,7 @@
 
       <!-- Governing Law -->
       <section id="governing-law" class="mb-6">
-        <h2 class="h3 mb-4">Governing Law and Jurisdiction</h2>
+        <h2 class="text-2xl font-bold mb-4">Governing Law and Jurisdiction</h2>
         <p>
           These Terms shall be governed by and construed in accordance with the laws of [Your Jurisdiction],
           without regard to its conflict of law provisions.
@@ -311,7 +311,7 @@
 
       <!-- Changes to Terms -->
       <section id="changes" class="mb-6">
-        <h2 class="h3 mb-4">Changes to These Terms</h2>
+        <h2 class="text-2xl font-bold mb-4">Changes to These Terms</h2>
         <p>
           We reserve the right to modify or replace these Terms at any time at our sole discretion.
           We will provide notice of any material changes by posting the new Terms on this page and updating
@@ -326,12 +326,12 @@
 
       <!-- Contact -->
       <section id="contact" class="mb-6">
-        <h2 class="h3 mb-4">Contact Us</h2>
+        <h2 class="text-2xl font-bold mb-4">Contact Us</h2>
         <p class="mb-4">
           If you have any questions about these Terms, please contact us:
         </p>
 
-        <div class="card bg-surface">
+        <div class="card bg-white">
           <div class="card-body">
             <dl class="mb-0">
               <dt class="mb-2">Email</dt>

package/templates/kickstart-spa/frontend/js/views/templates/404.html

@@ -1,17 +1,17 @@
 <div class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 60vh; padding: 3rem 2rem;">
   <div class="hero-content">
     <span data-icon="alert-circle" data-icon-size="96" class="mb-3" style="color: var(--dm-danger);"></span>
-    <h1 class="display-1 mb-3" style="color: var(--dm-white); font-size: 6rem;">404</h1>
-    <h2 class="h3 mb-4" style="color: var(--dm-white-t90);">Page Not Found</h2>
-    <p class="lead mb-5" style="color: var(--dm-white-t75); max-width: 600px;">
+    <h1 class="text-4xl font-bold mb-3" style="color: var(--dm-white); font-size: 6rem;">404</h1>
+    <h2 class="text-2xl font-bold mb-4" style="color: var(--dm-white-t90);">Page Not Found</h2>
+    <p class="text-lg mb-5" style="color: var(--dm-white-t75); max-width: 600px;">
       The page you're looking for doesn't exist or has been moved.
     </p>
-    <div class="d-flex gap-3 justify-content-center">
+    <div class="flex gap-3 justify-center">
       <a href="#/" class="btn btn-lg btn-primary">
         <span data-icon="home" data-icon-size="20"></span>
         Go Home
       </a>
-      <button class="btn btn-lg btn-outline-light" onclick="history.back()">
+      <button class="btn btn-lg btn-outline" onclick="history.back()">
         <span data-icon="arrow-left" data-icon-size="20"></span>
         Go Back
       </button>

package/templates/kickstart-spa/frontend/js/views/templates/about.html

@@ -11,21 +11,21 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="arrow-right" data-icon-size="48" class="text-primary mb-3"></span>
-        <h3 class="h5">onEnter()</h3>
+        <h3 class="text-lg font-bold">onEnter()</h3>
         <p class="text-secondary mb-0">Pre-render hook with async support</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="check-circle" data-icon-size="48" class="text-success mb-3"></span>
-        <h3 class="h5">onMount()</h3>
+        <h3 class="text-lg font-bold">onMount()</h3>
         <p class="text-secondary mb-0">Post-render, initialize components</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="x-circle" data-icon-size="48" class="text-danger mb-3"></span>
-        <h3 class="h5">onLeave()</h3>
+        <h3 class="text-lg font-bold">onLeave()</h3>
         <p class="text-secondary mb-0">Cleanup before unmounting</p>
       </div>
     </div>
@@ -35,21 +35,21 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="settings" data-icon-size="48" class="text-info mb-3"></span>
-        <h3 class="h5">Route Params</h3>
+        <h3 class="text-lg font-bold">Route Params</h3>
         <p class="text-secondary mb-0"><code>/user/:id</code> → params.id</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="layers" data-icon-size="48" class="text-warning mb-3"></span>
-        <h3 class="h5">Middleware</h3>
+        <h3 class="text-lg font-bold">Middleware</h3>
         <p class="text-secondary mb-0">Auth guards, logging, validation</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="zap" data-icon-size="48" class="text-success mb-3"></span>
-        <h3 class="h5">Pub/Sub Events</h3>
+        <h3 class="text-lg font-bold">Pub/Sub Events</h3>
         <p class="text-secondary mb-0">router:beforeChange, afterChange</p>
       </div>
     </div>

package/templates/kickstart-spa/frontend/js/views/templates/contact.html

@@ -8,10 +8,10 @@
 
 <div class="container py-8">
   <div class="row g-5 mb-6">
-    <div class="col-lg-8 mx-auto">
+    <div class="col-8 mx-auto">
       <div class="card shadow-lg">
         <div class="card-body p-4">
-          <h3 class="h5 mb-4">Send us a Message</h3>
+          <h3 class="text-lg font-bold mb-4">Send us a Message</h3>
           <div id="contact-form"></div>
         </div>
       </div>
@@ -22,21 +22,21 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="database" data-icon-size="48" class="text-primary mb-3"></span>
-        <h3 class="h5">Blueprint Forms</h3>
+        <h3 class="text-lg font-bold">Blueprint Forms</h3>
         <p class="text-secondary mb-0">Auto-generated from schema</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="check" data-icon-size="48" class="text-success mb-3"></span>
-        <h3 class="h5">Built-in Validation</h3>
+        <h3 class="text-lg font-bold">Built-in Validation</h3>
         <p class="text-secondary mb-0">Required, patterns, custom rules</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="zap" data-icon-size="48" class="text-warning mb-3"></span>
-        <h3 class="h5">Model Binding</h3>
+        <h3 class="text-lg font-bold">Model Binding</h3>
         <p class="text-secondary mb-0">Reactive two-way data binding</p>
       </div>
     </div>

package/templates/kickstart-spa/frontend/js/views/templates/home.html

@@ -21,28 +21,28 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="zap" data-icon-size="48" class="text-warning mb-3"></span>
-        <h3 class="h5">Instant Navigation</h3>
+        <h3 class="text-lg font-bold">Instant Navigation</h3>
         <p class="text-secondary mb-0">Zero page reloads, instant transitions</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="database" data-icon-size="48" class="text-success mb-3"></span>
-        <h3 class="h5">Shared State</h3>
+        <h3 class="text-lg font-bold">Shared State</h3>
         <p class="text-secondary mb-0">Data persists across views</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="settings" data-icon-size="48" class="text-info mb-3"></span>
-        <h3 class="h5">Lifecycle Hooks</h3>
+        <h3 class="text-lg font-bold">Lifecycle Hooks</h3>
         <p class="text-secondary mb-0">Full control with onMount/onLeave</p>
       </div>
     </div>
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="code" data-icon-size="48" class="text-primary mb-3"></span>
-        <h3 class="h5">Simple API</h3>
+        <h3 class="text-lg font-bold">Simple API</h3>
         <p class="text-secondary mb-0">Define views with templates</p>
       </div>
     </div>

package/templates/page-template/page.html

@@ -20,8 +20,8 @@
 
 <!-- Page Header -->
 <section class="container py-6">
-  <h1 class="display-2 mb-3">{{pageTitle}}</h1>
-  <p class="lead text-secondary">
+  <h1 class="text-4xl font-bold mb-3">{{pageTitle}}</h1>
+  <p class="text-lg text-secondary">
     Welcome to the {{pageTitle}} page.
   </p>
 </section>
@@ -30,7 +30,7 @@
 <section class="container py-4">
   <div class="card shadow-md">
     <div class="card-body">
-      <h2 class="h4 mb-3">Content</h2>
+      <h2 class="text-xl font-bold mb-3">Content</h2>
       <p>Add your content here.</p>
     </div>
   </div>

package/templates/view-template/view.html

@@ -1,20 +1,20 @@
 <section class="container py-6">
     <div class="row">
-        <div class="col-lg-8 mx-auto">
-            <h1 class="display-2 mb-4">{{viewTitle}}</h1>
-            <p class="lead text-secondary mb-5">
+        <div class="col-8 mx-auto">
+            <h1 class="text-4xl font-bold mb-4">{{viewTitle}}</h1>
+            <p class="text-lg text-secondary mb-5">
                 This is the {{viewTitle}} page. Add your content here.
             </p>
 
             <div class="card shadow-lg">
                 <div class="card-body p-5">
-                    <h2 class="h4 mb-3">Getting Started</h2>
+                    <h2 class="text-xl font-bold mb-3">Getting Started</h2>
                     <p>
                         Edit this view in <code>js/views/{{viewName}}.js</code> to customise the content,
                         layout, and functionality.
                     </p>
 
-                    <h3 class="h5 mt-4 mb-2">Available Lifecycle Hooks:</h3>
+                    <h3 class="text-lg font-bold mt-4 mb-2">Available Lifecycle Hooks:</h3>
                     <ul>
                         <li><strong>onEnter(params)</strong> - Called before rendering (async supported)</li>
                         <li><strong>onMount($container)</strong> - Called after view is rendered</li>