@yoamigo.com/cli 0.1.24 → 0.1.26

package/templates/starter/package.json

@@ -9,20 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@yoamigo.com/core": "^0.3.11",
     "@tiptap/core": "^3.11.1",
     "@tiptap/extension-link": "^3.11.1",
     "@tiptap/extension-text-style": "^3.11.1",
     "@tiptap/pm": "^3.11.1",
     "@tiptap/react": "^3.11.1",
     "@tiptap/starter-kit": "^3.11.1",
-    "@yoamigo.com/core": "^0.1.10",
     "dompurify": "^3.2.3",
-    "preact": "^10.27.2",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/react": "^19.2.1",
     "@types/react-dom": "^19.2.1",

package/templates/starter/public/{favicon.svg → assets/favicon.svg}

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect fill="#3B82F6" width="100" height="100" rx="20"/>
-  <text x="50" y="65" font-size="50" text-anchor="middle" fill="white" font-family="system-ui">Y</text>
+  <rect width="100" height="100" rx="20" fill="#3b82f6"/>
+  <text x="50" y="65" font-size="50" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-weight="bold">Y</text>
 </svg>

package/templates/starter/showcase/manifest.json

@@ -0,0 +1,30 @@
+{
+  "template": "starter",
+  "capturedAt": "2026-01-04T01:03:04.689Z",
+  "screenshots": [
+    {
+      "filename": "01-desktop-hero.png",
+      "caption": "Desktop Homepage Hero",
+      "viewport": "desktop",
+      "path": "/"
+    },
+    {
+      "filename": "02-mobile-hero.png",
+      "caption": "Mobile Homepage",
+      "viewport": "mobile",
+      "path": "/"
+    },
+    {
+      "filename": "06-desktop-about.png",
+      "caption": "About Page",
+      "viewport": "desktop",
+      "path": "/about"
+    },
+    {
+      "filename": "07-desktop-contact.png",
+      "caption": "Contact Page",
+      "viewport": "desktop",
+      "path": "/contact"
+    }
+  ]
+}

package/templates/starter/src/App.tsx

@@ -1,5 +1,5 @@
 import { ContentStoreProvider } from '@yoamigo.com/core'
-import { Router } from '@yoamigo.com/core/router'
+import { Router, ScrollRestoration } from '@yoamigo.com/core/router'
 import { Header } from './components/Header'
 import { Footer } from './components/Footer'
 import { AppRoutes, getAvailablePages } from './routes'
@@ -22,6 +22,7 @@ export default function App() {
   return (
     <ContentStoreProvider pages={pages}>
       <Router>
+        <ScrollRestoration />
         <Layout>
           <AppRoutes />
         </Layout>

package/templates/starter/src/components/Footer.tsx

@@ -1,13 +1,19 @@
 import { YaText } from '@yoamigo.com/core'
 
 export function Footer() {
+  const currentYear = new Date().getFullYear()
+
   return (
     <footer className="bg-gray-100 border-t border-gray-200">
       <div className="container mx-auto px-4 py-8">
         <div className="text-center text-gray-600">
-          <YaText fieldId="footer.copyright" as="p">
-            © 2025 My Website. All rights reserved.
-          </YaText>
+          <p>
+            © {currentYear}{' '}
+            <YaText fieldId="footer.name" as="span">
+              My Website
+            </YaText>
+            . All rights reserved.
+          </p>
         </div>
       </div>
     </footer>

package/templates/starter/src/components/Header.tsx

@@ -1,31 +1,112 @@
+import { useState } from 'react'
 import { YaText, YaLink } from '@yoamigo.com/core'
 
 export function Header() {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
   return (
-    <header className="sticky top-0 z-50 bg-white border-b border-gray-200">
-      <div className="container mx-auto px-4">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo */}
-          <YaLink fieldId="site.logoLink" href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700 transition-colors">
-            <YaText fieldId="site.name" as="span">
-              My Website
-            </YaText>
-          </YaLink>
+    <>
+      <header className="sticky top-0 z-50 bg-white border-b border-gray-200">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <YaLink fieldId="site.logoLink" href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700 transition-colors">
+              <YaText fieldId="site.name" as="span">
+                Your Business
+              </YaText>
+            </YaLink>
+
+            {/* Desktop Navigation - hidden on mobile */}
+            <nav className="hidden md:flex items-center gap-8">
+              <YaLink fieldId="nav.homeLink" href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                Home
+              </YaLink>
+              <YaLink fieldId="nav.aboutLink" href="/about" className="text-gray-600 hover:text-gray-900 transition-colors">
+                About
+              </YaLink>
+              <YaLink fieldId="nav.contactLink" href="/contact" className="text-gray-600 hover:text-gray-900 transition-colors">
+                Contact
+              </YaLink>
+            </nav>
+
+            {/* Mobile Menu Button - visible only on mobile */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="md:hidden p-3 text-gray-600 hover:text-gray-900 transition-colors"
+              aria-label="Toggle menu"
+            >
+              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile Menu Overlay */}
+      <div
+        className={`md:hidden fixed inset-0 z-40 transition-opacity duration-300 ${
+          isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+        }`}
+      >
+        {/* Backdrop */}
+        <div
+          className="absolute inset-0 bg-black/50"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+
+        {/* Menu Panel - slides in from right */}
+        <div
+          className={`absolute top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-xl transition-transform duration-300 ease-out ${
+            isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
+          }`}
+        >
+          {/* Close button */}
+          <div className="flex justify-end p-4 border-b border-gray-200">
+            <button
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="p-3 text-gray-600 hover:text-gray-900 transition-colors"
+              aria-label="Close menu"
+            >
+              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
 
-          {/* Navigation */}
-          <nav className="flex items-center gap-8">
-            <YaLink fieldId="nav.homeLink" href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+          {/* Navigation Links - right aligned */}
+          <nav className="p-8 flex flex-col gap-6">
+            <YaLink
+              fieldId="nav.mobileHomeLink"
+              href="/"
+              className="text-right text-2xl font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-colors px-6 py-5 rounded-xl"
+              onClick={() => setIsMobileMenuOpen(false)}
+            >
               Home
             </YaLink>
-            <YaLink fieldId="nav.aboutLink" href="/about" className="text-gray-600 hover:text-gray-900 transition-colors">
+            <YaLink
+              fieldId="nav.mobileAboutLink"
+              href="/about"
+              className="text-right text-2xl font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-colors px-6 py-5 rounded-xl"
+              onClick={() => setIsMobileMenuOpen(false)}
+            >
               About
             </YaLink>
-            <YaLink fieldId="nav.contactLink" href="/contact" className="text-gray-600 hover:text-gray-900 transition-colors">
+            <YaLink
+              fieldId="nav.mobileContactLink"
+              href="/contact"
+              className="text-right text-2xl font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-colors px-6 py-5 rounded-xl"
+              onClick={() => setIsMobileMenuOpen(false)}
+            >
               Contact
             </YaLink>
           </nav>
         </div>
       </div>
-    </header>
+    </>
   )
 }

package/templates/starter/src/content.ts

@@ -1,27 +1,29 @@
 export default {
   "site.name": "My Website",
-  "hero.title": "Build Something Amazing",
-  "hero.subtitle": "Create beautiful, modern websites with our intuitive template system. Click any text to customize it in the builder.",
-  "features.title": "Why Choose Us",
-  "feature1.title": "Fast & Reliable",
-  "feature1.description": "Built for speed and reliability. Your website loads instantly on any device.",
-  "feature2.title": "Easy to Customize",
-  "feature2.description": "Click any text to edit it. Change colors, fonts, and layouts with ease.",
-  "feature3.title": "Secure & Modern",
-  "feature3.description": "Built with the latest web technologies. Secure, accessible, and SEO-friendly.",
+  "hero.title": "Welcome to My Website",
+  "hero.subtitle": "Quality products. Exceptional service. Results you can trust.",
+  "features.title": "What We Offer",
+  "feature1.title": "Quality First",
+  "feature1.description": "We take pride in delivering excellence in everything we do. Your satisfaction is our priority.",
+  "feature2.title": "Expert Support",
+  "feature2.description": "Our dedicated team is here to help you every step of the way. Reach out anytime.",
+  "feature3.title": "Trusted Results",
+  "feature3.description": "Join thousands of happy customers who have chosen us for reliable, proven solutions.",
   "about.title": "About Us",
-  "about.subtitle": "Learn more about who we are and what we do.",
+  "about.subtitle": "Get to know the team behind the work.",
   "about.missionTitle": "Our Mission",
-  "about.missionText": "We believe everyone deserves a beautiful website. Our mission is to make professional web design accessible to all, without requiring technical expertise. We provide intuitive tools that let you focus on what matters most—your content and your customers.",
+  "about.missionText": "We're dedicated to providing outstanding value and service to our customers. Our team works tirelessly to exceed expectations and build lasting relationships with everyone we serve.",
   "about.storyTitle": "Our Story",
-  "about.storyText": "Founded with a simple idea: building websites should be fun, not frustrating. We've helped thousands of businesses and creators bring their ideas to life online. From small portfolios to growing businesses, we're here to help you succeed.",
-  "contact.title": "Contact Us",
-  "contact.subtitle": "Have questions? We'd love to hear from you.",
+  "about.storyText": "What started as a small idea has grown into something we're truly proud of. Through hard work and a commitment to our values, we've built a reputation for reliability and excellence that our customers can count on.",
+  "contact.title": "Get in Touch",
+  "contact.subtitle": "We'd love to hear from you. Reach out and let's start a conversation.",
   "contact.emailTitle": "Email",
   "contact.emailValue": "hello@example.com",
   "contact.phoneTitle": "Phone",
   "contact.phoneValue": "(555) 123-4567",
   "contact.addressTitle": "Address",
-  "contact.addressValue": "123 Main Street, Suite 100\nSan Francisco, CA 94102",
-  "footer.copyright": "© 2025 My Website. All rights reserved."
+  "contact.addressValue": "123 Main Street, Suite 100\nYour City, State 12345",
+  "footer.name": "My Website",
+  "hero.image": "/assets/welcome.jpg",
+  "about.image": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&h=800&fit=crop&q=80"
 } as const satisfies Record<string, string>

package/templates/starter/src/pages/about.tsx

@@ -1,4 +1,4 @@
-import { YaText } from '@yoamigo.com/core'
+import { YaText, YaImage } from '@yoamigo.com/core'
 
 export default function AboutPage() {
   return (
@@ -14,13 +14,26 @@ export default function AboutPage() {
             </h1>
             <p className="text-xl text-gray-600">
               <YaText fieldId="about.subtitle" as="span">
-                Learn more about who we are and what we do.
+                Get to know the team behind the work.
               </YaText>
             </p>
           </div>
         </div>
       </section>
 
+      {/* Team Image Section */}
+      <section className="py-8">
+        <div className="container mx-auto px-4">
+          <div className="max-w-3xl mx-auto">
+            <YaImage
+              fieldId="about.image"
+              className="w-full h-auto rounded-xl shadow-lg"
+              alt="About us"
+            />
+          </div>
+        </div>
+      </section>
+
       {/* Content Section */}
       <section className="py-16">
         <div className="container mx-auto px-4">
@@ -33,10 +46,9 @@ export default function AboutPage() {
               </h2>
               <p className="text-gray-600 mb-8">
                 <YaText fieldId="about.missionText" as="span">
-                  We believe everyone deserves a beautiful website. Our mission is to make
-                  professional web design accessible to all, without requiring technical expertise.
-                  We provide intuitive tools that let you focus on what matters most—your content
-                  and your customers.
+                  We're dedicated to providing outstanding value and service to our customers.
+                  Our team works tirelessly to exceed expectations and build lasting relationships
+                  with everyone we serve.
                 </YaText>
               </p>
 
@@ -47,10 +59,9 @@ export default function AboutPage() {
               </h2>
               <p className="text-gray-600 mb-8">
                 <YaText fieldId="about.storyText" as="span">
-                  Founded with a simple idea: building websites should be fun, not frustrating.
-                  We've helped thousands of businesses and creators bring their ideas to life
-                  online. From small portfolios to growing businesses, we're here to help you
-                  succeed.
+                  What started as a small idea has grown into something we're truly proud of.
+                  Through hard work and a commitment to our values, we've built a reputation
+                  for reliability and excellence that our customers can count on.
                 </YaText>
               </p>
             </div>

package/templates/starter/src/pages/contact.tsx

@@ -9,12 +9,12 @@ export default function ContactPage() {
           <div className="text-center max-w-3xl mx-auto">
             <h1 className="text-4xl font-bold text-gray-900 mb-4">
               <YaText fieldId="contact.title" as="span">
-                Contact Us
+                Get in Touch
               </YaText>
             </h1>
             <p className="text-xl text-gray-600">
               <YaText fieldId="contact.subtitle" as="span">
-                Have questions? We'd love to hear from you.
+                We'd love to hear from you. Reach out and let's start a conversation.
               </YaText>
             </p>
           </div>
@@ -82,7 +82,7 @@ export default function ContactPage() {
                 <YaText fieldId="contact.addressValue" as="span">
                   123 Main Street, Suite 100
                   <br />
-                  San Francisco, CA 94102
+                  Your City, State 12345
                 </YaText>
               </p>
             </div>

package/templates/starter/src/pages/index.tsx

@@ -1,105 +1,97 @@
-import { YaText, YaLink } from '@yoamigo.com/core'
+import { YaText, YaLink, YaImage } from '@yoamigo.com/core'
 
 export default function HomePage() {
   return (
     <div>
       {/* Hero Section */}
-      <section className="bg-gradient-to-b from-gray-50 to-white py-20">
+      <section className="py-16 md:py-24">
         <div className="container mx-auto px-4">
-          <div className="text-center max-w-3xl mx-auto">
-            <h1 className="text-5xl font-bold text-gray-900 mb-6">
-              <YaText fieldId="hero.title" as="span">
-                Build Something Amazing
-              </YaText>
-            </h1>
-            <p className="text-xl text-gray-600 mb-8">
+          <div className="text-center max-w-2xl mx-auto">
+            {/* Welcome Image */}
+            <div className="mb-8">
+              <YaImage
+                fieldId="hero.image"
+                className="w-full h-auto rounded-lg shadow-md"
+                alt="Welcome"
+              />
+            </div>
+
+            {/* Tagline */}
+            <p className="text-lg text-gray-600 mb-8">
               <YaText fieldId="hero.subtitle" as="span">
-                Create beautiful, modern websites with our intuitive template system.
-                Click any text to customize it in the builder.
+                Quality products. Exceptional service. Results you can trust.
               </YaText>
             </p>
-            <div className="flex gap-4 justify-center">
-              <YaLink
-                fieldId="hero.ctaLink"
-                href="/contact"
-                className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
-              >
-                Get Started
-              </YaLink>
-              <YaLink
-                fieldId="hero.secondaryLink"
-                href="/about"
-                className="px-8 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-medium transition-colors"
-              >
-                Learn More
-              </YaLink>
-            </div>
+
+            {/* Single CTA */}
+            <YaLink
+              fieldId="hero.ctaLink"
+              href="/contact"
+              className="inline-block px-8 py-3 bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-medium transition-colors"
+            >
+              Get Started
+            </YaLink>
           </div>
         </div>
       </section>
 
       {/* Features Section */}
-      <section className="py-20">
+      <section className="py-16 border-t border-gray-100">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
-            <YaText fieldId="features.title" as="span">
-              Why Choose Us
-            </YaText>
-          </h2>
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
             {/* Feature 1 */}
-            <div className="text-center p-6">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="text-center">
+              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3">
+                <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <h3 className="text-base font-semibold text-gray-900 mb-1">
                 <YaText fieldId="feature1.title" as="span">
-                  Fast & Reliable
+                  Quality First
                 </YaText>
               </h3>
-              <p className="text-gray-600">
+              <p className="text-sm text-gray-600">
                 <YaText fieldId="feature1.description" as="span">
-                  Built for speed and reliability. Your website loads instantly on any device.
+                  We take pride in delivering excellence in everything we do.
                 </YaText>
               </p>
             </div>
 
             {/* Feature 2 */}
-            <div className="text-center p-6">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            <div className="text-center">
+              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3">
+                <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <h3 className="text-base font-semibold text-gray-900 mb-1">
                 <YaText fieldId="feature2.title" as="span">
-                  Easy to Customize
+                  Expert Support
                 </YaText>
               </h3>
-              <p className="text-gray-600">
+              <p className="text-sm text-gray-600">
                 <YaText fieldId="feature2.description" as="span">
-                  Click any text to edit it. Change colors, fonts, and layouts with ease.
+                  Our dedicated team is here to help you every step of the way.
                 </YaText>
               </p>
             </div>
 
             {/* Feature 3 */}
-            <div className="text-center p-6">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            <div className="text-center">
+              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3">
+                <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <h3 className="text-base font-semibold text-gray-900 mb-1">
                 <YaText fieldId="feature3.title" as="span">
-                  Secure & Modern
+                  Trusted Results
                 </YaText>
               </h3>
-              <p className="text-gray-600">
+              <p className="text-sm text-gray-600">
                 <YaText fieldId="feature3.description" as="span">
-                  Built with the latest web technologies. Secure, accessible, and SEO-friendly.
+                  Join thousands of happy customers who have chosen us.
                 </YaText>
               </p>
             </div>