@yoamigo.com/cli 0.1.23 → 0.1.25

package/README.md

@@ -1,11 +1,11 @@
-# @yoamigo/cli
+# @yoamigo.com/cli
 
 CLI for creating and managing YoAmigo templates.
 
 ## Installation
 
 ```bash
-npm install -g @yoamigo/cli
+npm install -g @yoamigo.com/cli
 ```
 
 ## Quick Start

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/cli",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "CLI for creating and managing YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",

package/templates/starter/package-lock.json

@@ -14,7 +14,7 @@
         "@tiptap/pm": "^3.11.1",
         "@tiptap/react": "^3.11.1",
         "@tiptap/starter-kit": "^3.11.1",
-        "@yoamigo.com/core": "^0.1.7",
+        "@yoamigo.com/core": "^0.1.10",
         "dompurify": "^3.2.3",
         "react": "^19.2.1",
         "react-dom": "^19.2.1"
@@ -2065,12 +2065,13 @@
       }
     },
     "node_modules/@yoamigo.com/core": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@yoamigo.com/core/-/core-0.1.7.tgz",
-      "integrity": "sha512-vGSDiLNkI4dC1bLGzGlTVGdbRJvDtbRNXhtptDYPkqBHGhdJ+vk6r9Nb85RqbPJWCH8PAdqkAVSfmqjiJxNcUA==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@yoamigo.com/core/-/core-0.1.12.tgz",
+      "integrity": "sha512-f2ev6TaG6fSrC98JoaL+OjVK5IYb2N1lLlmDchF5k6C9AOH6rvJmBXL4CaQqg7KwUpltw3Z+Uiqs9MnikaqjXA==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "clsx": "^2.1.1",
+        "html2canvas-pro": "^1.6.1",
         "preact": "^10.27.2",
         "wouter": "^3.8.0"
       },
@@ -2136,6 +2137,15 @@
         "@babel/core": "^7.12.10"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.7",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz",
@@ -2225,6 +2235,15 @@
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
       "license": "MIT"
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-select": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
@@ -2498,6 +2517,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/html2canvas-pro": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/html2canvas-pro/-/html2canvas-pro-1.6.1.tgz",
+      "integrity": "sha512-TAwiVhNNmMGIqCax3cPirMaAqp7GbPTAAFAU95DO13diXZTWEI2Ih0hDez5yUplvmqirklZQkKVVXLTpEt2o9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -3332,6 +3364,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3436,6 +3477,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",

package/templates/starter/package.json

@@ -15,8 +15,9 @@
     "@tiptap/pm": "^3.11.1",
     "@tiptap/react": "^3.11.1",
     "@tiptap/starter-kit": "^3.11.1",
-    "@yoamigo.com/core": "^0.1.10",
+    "@yoamigo.com/core": "^0.1.14",
     "dompurify": "^3.2.3",
+    "preact": "^10.27.2",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   },

package/templates/starter/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { ContentStoreProvider, registerContent } from '@yoamigo.com/core'
+import { ContentStoreProvider, registerContent, setAssetResolver } from '@yoamigo.com/core'
 import App from './App'
 import content from './content'
 import './styles/globals.css'
@@ -8,6 +8,24 @@ import './styles/globals.css'
 // Register content for the content store
 registerContent(content)
 
+// Configure asset resolver for builder preview
+// - Builder: base=/session/{sessionId}/ → /session/{sessionId}/assets/...
+// - Production: base=./ → ./assets/...
+setAssetResolver((path) => {
+  if (!path || path.startsWith('http://') || path.startsWith('https://')) {
+    return path
+  }
+  const relativePath = path.startsWith('/') ? path.slice(1) : path
+  return `${import.meta.env.BASE_URL}${relativePath}`
+})
+
+// Initialize builder selection mode (dev only)
+if (import.meta.env.DEV) {
+  import('@yoamigo.com/core').then(({ initBuilderSelection }) => {
+    initBuilderSelection()
+  })
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ContentStoreProvider initialContent={content}>

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

@@ -1,6 +1,35 @@
+import { useState } from 'react'
 import { YaText } from '@yoamigo.com/core'
+import { submitContactForm, type ContactFormData } from '@yoamigo.com/core/lib'
 
 export default function ContactPage() {
+  const [formData, setFormData] = useState({ name: '', email: '', message: '' })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      const data: ContactFormData = {
+        name: formData.name,
+        email: formData.email,
+        message: formData.message,
+      }
+
+      await submitContactForm(data)
+      setIsSubmitted(true)
+      setFormData({ name: '', email: '', message: '' })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to submit form')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
   return (
     <div>
       {/* Hero Section */}
@@ -21,70 +50,184 @@ export default function ContactPage() {
         </div>
       </section>
 
-      {/* Contact Info Section */}
+      {/* Contact Form & Info Section */}
       <section className="py-16">
         <div className="container mx-auto px-4">
-          <div className="max-w-2xl mx-auto">
-            <div className="grid md:grid-cols-2 gap-8">
-              {/* Email */}
-              <div className="bg-white p-6 rounded-lg border border-gray-200">
-                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                  </svg>
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                  <YaText fieldId="contact.emailTitle" as="span">
-                    Email
+          <div className="max-w-4xl mx-auto">
+            <div className="grid md:grid-cols-2 gap-12">
+              {/* Contact Form */}
+              <div>
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                  <YaText fieldId="contact.formTitle" as="span">
+                    Send us a message
                   </YaText>
-                </h3>
-                <p className="text-gray-600">
-                  <YaText fieldId="contact.emailValue" as="span">
-                    hello@example.com
-                  </YaText>
-                </p>
+                </h2>
+
+                {isSubmitted ? (
+                  <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
+                    <div className="text-green-600 text-4xl mb-4">✓</div>
+                    <h3 className="text-lg font-semibold text-green-800 mb-2">
+                      <YaText fieldId="contact.successTitle" as="span">
+                        Message Sent!
+                      </YaText>
+                    </h3>
+                    <p className="text-green-700">
+                      <YaText fieldId="contact.successMessage" as="span">
+                        Thanks for reaching out. We'll get back to you soon.
+                      </YaText>
+                    </p>
+                    <button
+                      onClick={() => setIsSubmitted(false)}
+                      className="mt-4 text-sm font-medium text-blue-600 hover:underline"
+                    >
+                      Send another message
+                    </button>
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubmit} className="space-y-6">
+                    <div>
+                      <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+                        <YaText fieldId="contact.nameLabel" as="span">
+                          Name
+                        </YaText>
+                      </label>
+                      <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        required
+                        value={formData.name}
+                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="Your name"
+                      />
+                    </div>
+
+                    <div>
+                      <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                        <YaText fieldId="contact.emailLabel" as="span">
+                          Email
+                        </YaText>
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        required
+                        value={formData.email}
+                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="your@email.com"
+                      />
+                    </div>
+
+                    <div>
+                      <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
+                        <YaText fieldId="contact.messageLabel" as="span">
+                          Message
+                        </YaText>
+                      </label>
+                      <textarea
+                        id="message"
+                        name="message"
+                        required
+                        rows={5}
+                        value={formData.message}
+                        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="How can we help you?"
+                      />
+                    </div>
+
+                    {error && (
+                      <div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
+                        {error}
+                      </div>
+                    )}
+
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      className="w-full bg-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                    >
+                      {isSubmitting ? 'Sending...' : (
+                        <YaText fieldId="contact.submitText" as="span">
+                          Send Message
+                        </YaText>
+                      )}
+                    </button>
+                  </form>
+                )}
               </div>
 
-              {/* Phone */}
-              <div className="bg-white p-6 rounded-lg border border-gray-200">
-                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                  </svg>
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                  <YaText fieldId="contact.phoneTitle" as="span">
-                    Phone
-                  </YaText>
-                </h3>
-                <p className="text-gray-600">
-                  <YaText fieldId="contact.phoneValue" as="span">
-                    (555) 123-4567
+              {/* Contact Info */}
+              <div className="space-y-6">
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                  <YaText fieldId="contact.infoTitle" as="span">
+                    Contact Information
                   </YaText>
-                </p>
-              </div>
-            </div>
+                </h2>
 
-            {/* Address */}
-            <div className="mt-8 bg-white p-6 rounded-lg border border-gray-200">
-              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+                {/* Email */}
+                <div className="bg-white p-6 rounded-lg border border-gray-200">
+                  <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    <YaText fieldId="contact.emailTitle" as="span">
+                      Email
+                    </YaText>
+                  </h3>
+                  <p className="text-gray-600">
+                    <YaText fieldId="contact.emailValue" as="span">
+                      hello@example.com
+                    </YaText>
+                  </p>
+                </div>
+
+                {/* Phone */}
+                <div className="bg-white p-6 rounded-lg border border-gray-200">
+                  <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                    </svg>
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    <YaText fieldId="contact.phoneTitle" as="span">
+                      Phone
+                    </YaText>
+                  </h3>
+                  <p className="text-gray-600">
+                    <YaText fieldId="contact.phoneValue" as="span">
+                      (555) 123-4567
+                    </YaText>
+                  </p>
+                </div>
+
+                {/* Address */}
+                <div className="bg-white p-6 rounded-lg border border-gray-200">
+                  <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                    <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    <YaText fieldId="contact.addressTitle" as="span">
+                      Address
+                    </YaText>
+                  </h3>
+                  <p className="text-gray-600">
+                    <YaText fieldId="contact.addressValue" as="span">
+                      123 Main Street, Suite 100
+                      <br />
+                      San Francisco, CA 94102
+                    </YaText>
+                  </p>
+                </div>
               </div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                <YaText fieldId="contact.addressTitle" as="span">
-                  Address
-                </YaText>
-              </h3>
-              <p className="text-gray-600">
-                <YaText fieldId="contact.addressValue" as="span">
-                  123 Main Street, Suite 100
-                  <br />
-                  San Francisco, CA 94102
-                </YaText>
-              </p>
             </div>
           </div>
         </div>