vibespot 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/LICENSE +103 -33
  2. package/README.md +55 -6
  3. package/assets/blog-rules.md +251 -0
  4. package/assets/email-rules.md +390 -0
  5. package/assets/humanify-guide.md +300 -101
  6. package/assets/plan-templates/agency-services.md +42 -0
  7. package/assets/plan-templates/blog-content-hub.md +50 -0
  8. package/assets/plan-templates/ecommerce-product.md +42 -0
  9. package/assets/plan-templates/email-announcement.md +41 -0
  10. package/assets/plan-templates/email-event-invite.md +43 -0
  11. package/assets/plan-templates/email-newsletter.md +41 -0
  12. package/assets/plan-templates/email-re-engagement.md +42 -0
  13. package/assets/plan-templates/email-welcome.md +41 -0
  14. package/assets/plan-templates/event-registration.md +42 -0
  15. package/assets/plan-templates/portfolio.md +41 -0
  16. package/assets/plan-templates/restaurant.md +42 -0
  17. package/assets/plan-templates/saas-landing.md +42 -0
  18. package/dist/index.js +1485 -397
  19. package/dist/index.js.map +1 -1
  20. package/package.json +11 -7
  21. package/starters/01-saas-landing.json +43 -0
  22. package/starters/02-portfolio.json +39 -0
  23. package/starters/03-restaurant.json +39 -0
  24. package/starters/04-event.json +39 -0
  25. package/starters/05-coming-soon.json +32 -0
  26. package/starters/06-blog-content-hub.json +75 -0
  27. package/starters/06-email-welcome.json +60 -0
  28. package/starters/07-email-announcement.json +60 -0
  29. package/starters/08-email-newsletter.json +52 -0
  30. package/ui/chat.js +1604 -155
  31. package/ui/code-editor.js +49 -7
  32. package/ui/dashboard.js +551 -83
  33. package/ui/docs/docs.css +29 -0
  34. package/ui/docs/index.html +274 -117
  35. package/ui/docs/screenshots/brand-kit-preview.png +0 -0
  36. package/ui/docs/screenshots/content-type-dropdown.png +0 -0
  37. package/ui/docs/screenshots/editor-full-layout.png +0 -0
  38. package/ui/docs/screenshots/inline-wysiwyg-editing.png +0 -0
  39. package/ui/docs/screenshots/multi-page-tree.png +0 -0
  40. package/ui/docs/screenshots/onboarding-walkthrough.png +0 -0
  41. package/ui/docs/screenshots/split-pane-view.png +0 -0
  42. package/ui/docs/screenshots/visual-controls-toolbar.png +0 -0
  43. package/ui/docs/screenshots/workspace-tabs.png +0 -0
  44. package/ui/email-preview.js +109 -0
  45. package/ui/field-editor.js +71 -0
  46. package/ui/icons.js +120 -0
  47. package/ui/index.html +882 -515
  48. package/ui/inline-edit.js +710 -0
  49. package/ui/marketplace.js +218 -0
  50. package/ui/plan.js +0 -0
  51. package/ui/preview.js +219 -1
  52. package/ui/section-controls.js +628 -0
  53. package/ui/settings.js +84 -28
  54. package/ui/setup.js +1016 -118
  55. package/ui/styles.css +6119 -2456
  56. package/ui/upload-panel.js +47 -20
@@ -0,0 +1,41 @@
1
+ ---
2
+ id: email-announcement
3
+ label: Product Announcement
4
+ description: New feature, product update, or company news announcement
5
+ icon: megaphone
6
+ order: 110
7
+ contentType: email
8
+ ---
9
+
10
+ # Product Announcement Email
11
+
12
+ ## Goal
13
+ Announce a new feature, product update, or company milestone. Drive recipients to try, learn about, or engage with the announcement.
14
+
15
+ ## Audience
16
+ TBD — existing customers, all subscribers, specific segment?
17
+
18
+ ## Primary CTA
19
+ TBD — common patterns: "Try It Now", "See What's New", "Read the Full Story".
20
+
21
+ ## Sections / Modules
22
+ 1. **preheader** — hidden inbox preview text
23
+ 2. **header** — logo, optional "What's New" badge
24
+ 3. **hero** — bold headline announcing the update, hero image or product screenshot
25
+ 4. **features** — 3-4 key benefits of the update (not features list — what it means for them)
26
+ 5. **cta-block** — primary CTA to try or learn more
27
+ 6. **footer** — unsubscribe link, physical address, social links
28
+
29
+ ## Subject Line & Preheader
30
+ - Subject: TBD — e.g., "We just shipped [feature]. Here's why it matters."
31
+ - Preheader: TBD — extends subject, 40-90 chars
32
+
33
+ ## Brand & Tone
34
+ TBD — excited but grounded? Technical and precise? Casual and conversational?
35
+
36
+ ## Open questions
37
+ - [ ] What is being announced (feature, product, update, milestone)?
38
+ - [ ] What are the top 3 benefits for the recipient?
39
+ - [ ] Is there a visual (screenshot, illustration, demo GIF)?
40
+ - [ ] Is this available to everyone or a specific tier/segment?
41
+ - [ ] Is there a deadline or urgency element?
@@ -0,0 +1,43 @@
1
+ ---
2
+ id: email-event-invite
3
+ label: Event Invitation
4
+ description: Webinar, conference, meetup, or launch event invite
5
+ icon: calendar
6
+ order: 130
7
+ contentType: email
8
+ ---
9
+
10
+ # Event Invitation Email
11
+
12
+ ## Goal
13
+ Drive registrations or RSVPs for an event. Communicate the value of attending clearly enough that recipients act within one read.
14
+
15
+ ## Audience
16
+ TBD — existing customers, prospects, community, specific segment?
17
+
18
+ ## Primary CTA
19
+ TBD — common patterns: "Register Now", "Save Your Spot", "RSVP".
20
+
21
+ ## Sections / Modules
22
+ 1. **preheader** — hidden inbox preview text
23
+ 2. **header** — logo, optional "You're Invited" badge
24
+ 3. **hero** — event name headline, date/time/location prominently displayed, hero image or event banner
25
+ 4. **details** — what the event covers, who should attend, what they'll learn (2-3 bullet points)
26
+ 5. **speakers** — speaker/host bios with headshots (if applicable)
27
+ 6. **cta-block** — single "Register" CTA with urgency note (limited spots, early-bird deadline)
28
+ 7. **footer** — unsubscribe link, physical address, calendar add link
29
+
30
+ ## Subject Line & Preheader
31
+ - Subject: TBD — e.g., "Join us March 15: [Event Topic] with [Speaker]"
32
+ - Preheader: TBD — extends subject, 40-90 chars
33
+
34
+ ## Brand & Tone
35
+ TBD — professional and authoritative? Casual and community-driven? Exclusive and premium?
36
+
37
+ ## Open questions
38
+ - [ ] Event name, date, time (with timezone), and format (in-person, virtual, hybrid)?
39
+ - [ ] Location or platform (Zoom, venue address)?
40
+ - [ ] Who are the speakers or hosts?
41
+ - [ ] What will attendees learn or gain?
42
+ - [ ] Is there a capacity limit or registration deadline?
43
+ - [ ] Is there an early-bird or free-tier pricing?
@@ -0,0 +1,41 @@
1
+ ---
2
+ id: email-newsletter
3
+ label: Newsletter / Digest
4
+ description: Curated content roundup — articles, updates, and resources
5
+ icon: newspaper
6
+ order: 120
7
+ contentType: email
8
+ ---
9
+
10
+ # Newsletter / Digest Email
11
+
12
+ ## Goal
13
+ Deliver a curated selection of content, updates, or resources that keeps subscribers engaged and positions the brand as a trusted source.
14
+
15
+ ## Audience
16
+ TBD — subscribers, customers, community members?
17
+
18
+ ## Primary CTA
19
+ TBD — common patterns: "Read the Full Article", "Visit the Blog", "See All Updates".
20
+
21
+ ## Sections / Modules
22
+ 1. **preheader** — hidden inbox preview text
23
+ 2. **header** — logo, edition number or date, optional nav links
24
+ 3. **hero** — featured article or top story with image and summary
25
+ 4. **content-grid** — 3-4 secondary stories with thumbnails, titles, and 2-sentence summaries
26
+ 5. **cta-block** — link to full archive or blog
27
+ 6. **footer** — unsubscribe link, physical address, social links, "forward to a friend"
28
+
29
+ ## Subject Line & Preheader
30
+ - Subject: TBD — e.g., "The Weekly Roundup: 5 things worth your time"
31
+ - Preheader: TBD — extends subject, 40-90 chars
32
+
33
+ ## Brand & Tone
34
+ TBD — editorial and curated? Casual and scannable? Data-driven and analytical?
35
+
36
+ ## Open questions
37
+ - [ ] What is the newsletter cadence (weekly, biweekly, monthly)?
38
+ - [ ] How many content items per issue (3-5 recommended)?
39
+ - [ ] Is there a featured/lead article format?
40
+ - [ ] What content types: blog posts, industry news, tips, product updates?
41
+ - [ ] Should it include a personal note from the editor/founder?
@@ -0,0 +1,42 @@
1
+ ---
2
+ id: email-re-engagement
3
+ label: Re-engagement Email
4
+ description: Win-back email for inactive users or lapsed customers
5
+ icon: refresh
6
+ order: 140
7
+ contentType: email
8
+ ---
9
+
10
+ # Re-engagement Email
11
+
12
+ ## Goal
13
+ Re-activate inactive subscribers or lapsed customers by reminding them of value, highlighting what they've missed, and offering a clear reason to return.
14
+
15
+ ## Audience
16
+ TBD — inactive users (how long?), lapsed customers, churned subscribers?
17
+
18
+ ## Primary CTA
19
+ TBD — common patterns: "Come Back and See What's New", "Reactivate Your Account", "Claim Your Offer".
20
+
21
+ ## Sections / Modules
22
+ 1. **preheader** — hidden inbox preview text
23
+ 2. **header** — logo, simple and clean
24
+ 3. **hero** — direct acknowledgment headline ("We noticed you've been away"), 1-2 sentence personal message
25
+ 4. **whats-new** — 2-3 highlights of what they've missed (new features, content, improvements)
26
+ 5. **offer** — incentive if applicable (discount, free month, exclusive content)
27
+ 6. **cta-block** — single "Come Back" CTA
28
+ 7. **footer** — unsubscribe link (prominent — respect their choice), physical address
29
+
30
+ ## Subject Line & Preheader
31
+ - Subject: TBD — e.g., "A lot has changed since you left"
32
+ - Preheader: TBD — extends subject, 40-90 chars
33
+
34
+ ## Brand & Tone
35
+ TBD — genuine and low-pressure? Playful and lighthearted? Direct and value-focused?
36
+
37
+ ## Open questions
38
+ - [ ] How long has the user been inactive (defines urgency level)?
39
+ - [ ] What new features or content have launched since they left?
40
+ - [ ] Is there a win-back offer (discount, free trial extension, exclusive access)?
41
+ - [ ] Should the email include usage data ("You had X saved / X connections")?
42
+ - [ ] What happens if they don't re-engage (account deletion, list cleanup)?
@@ -0,0 +1,41 @@
1
+ ---
2
+ id: email-welcome
3
+ label: Welcome Email
4
+ description: Onboarding email for new signups — confirm, orient, activate
5
+ icon: mail
6
+ order: 100
7
+ contentType: email
8
+ ---
9
+
10
+ # Welcome Email
11
+
12
+ ## Goal
13
+ Welcome new subscribers or customers, confirm their action, and guide them to a first meaningful interaction with the product or service.
14
+
15
+ ## Audience
16
+ TBD — new signup, new customer, new subscriber? What did they just do?
17
+
18
+ ## Primary CTA
19
+ TBD — common patterns: "Get Started", "Complete Your Profile", "Explore the Dashboard".
20
+
21
+ ## Sections / Modules
22
+ 1. **preheader** — hidden inbox preview text extending the subject line
23
+ 2. **header** — logo centered, optional tagline
24
+ 3. **hero** — warm greeting headline, 1-2 sentence welcome message
25
+ 4. **getting-started** — 3 numbered steps to first value (with icons or numbers)
26
+ 5. **cta-block** — single primary CTA button
27
+ 6. **footer** — unsubscribe link, physical address, social links
28
+
29
+ ## Subject Line & Preheader
30
+ - Subject: TBD — e.g., "You're in. Here's what to do first."
31
+ - Preheader: TBD — extends subject, 40-90 chars
32
+
33
+ ## Brand & Tone
34
+ TBD — friendly and helpful? Professional and concise? Warm and personal?
35
+
36
+ ## Open questions
37
+ - [ ] What action triggered this email (signup, purchase, subscription)?
38
+ - [ ] What should the recipient do first?
39
+ - [ ] What are the 3 most important getting-started steps?
40
+ - [ ] Is there a time-sensitive element (trial expiry, limited offer)?
41
+ - [ ] Should this email include the user's name (personalization token)?
@@ -0,0 +1,42 @@
1
+ ---
2
+ id: event-registration
3
+ label: Event Registration
4
+ description: Conference, webinar, or workshop — drive registrations
5
+ icon: calendar
6
+ order: 30
7
+ ---
8
+
9
+ # Event Registration
10
+
11
+ ## Goal
12
+ Drive ticket purchases or free registrations for a specific event.
13
+
14
+ ## Audience
15
+ TBD — who is the event for? (industry, role, experience level)
16
+
17
+ ## Primary CTA
18
+ TBD — typically "Register now", "Get tickets", "Save my seat".
19
+
20
+ ## Sections / Modules
21
+ 1. **event-hero** — countdown, event name, date, location, primary CTA
22
+ 2. **event-summary** — 2–3 sentence pitch + the value of attending
23
+ 3. **speakers** — grid with photos, names, titles, short bios
24
+ 4. **agenda** — timed schedule (single or multi-day)
25
+ 5. **sponsors** — tiered logo grid (or single block if no tiers)
26
+ 6. **venue-or-format** — location map / online platform details
27
+ 7. **ticketing** — tier comparison with "Register" CTA per tier
28
+ 8. **faq** — practical questions: refunds, accessibility, dress code, recordings
29
+ 9. **footer** — contact, legal, social
30
+
31
+ ## Brand & Tone
32
+ TBD — energetic/anticipation, professional/industry-credible, intimate/community
33
+
34
+ ## Open questions
35
+ - [ ] What is the event called and what's the one-line pitch?
36
+ - [ ] When is it (date, time, time zone) and where (city/venue or online platform)?
37
+ - [ ] Is it free or paid? If paid, what tiers and price points?
38
+ - [ ] Who are the headline speakers (names + companies, even just 1–3 to start)?
39
+ - [ ] What's the agenda format — single track, multi-track, multi-day?
40
+ - [ ] Is there a registration deadline or capacity limit worth surfacing?
41
+ - [ ] Does the event have sponsors, and how should they be tiered?
42
+ - [ ] Any specific accessibility, refund, or COVID-style policies to call out?
@@ -0,0 +1,41 @@
1
+ ---
2
+ id: portfolio
3
+ label: Portfolio
4
+ description: Personal or studio site — showcase work, drive contact
5
+ icon: briefcase
6
+ order: 50
7
+ ---
8
+
9
+ # Portfolio
10
+
11
+ ## Goal
12
+ Showcase work and convert visitors into project inquiries, hires, or collaborators.
13
+
14
+ ## Audience
15
+ TBD — recruiters, agency clients, prospective collaborators?
16
+
17
+ ## Primary CTA
18
+ TBD — typically "Get in touch", "Hire me", "Book a call".
19
+
20
+ ## Sections / Modules
21
+ 1. **hero** — name, role, one-line pitch, primary CTA
22
+ 2. **selected-work** — 4–8 case studies in a grid (image + title + tags)
23
+ 3. **about** — bio, photo, story / approach
24
+ 4. **services-or-skills** — what you do, listed concretely
25
+ 5. **clients-or-recognition** — logos, awards, press
26
+ 6. **testimonials** — 1–3 quotes from clients or collaborators
27
+ 7. **contact** — email + form, social links
28
+ 8. **footer** — minimal: copyright, social, return-to-top
29
+
30
+ ## Brand & Tone
31
+ TBD — minimal/editorial, bold/expressive, technical/clean
32
+
33
+ ## Open questions
34
+ - [ ] What's your name, role, and the one-line pitch you want at the top?
35
+ - [ ] Solo portfolio, studio, or collective? If a studio, what's the team size?
36
+ - [ ] Which 4–8 projects should be featured, and do you have imagery / case studies?
37
+ - [ ] What primary action should a visitor take — email, form, calendar link?
38
+ - [ ] Are you actively looking for work, freelance projects, or both?
39
+ - [ ] Any awards, press mentions, or recognizable client logos to feature?
40
+ - [ ] Reference portfolios you admire — Bruno Simon, Locomotive, plain Substack-bio style?
41
+ - [ ] Should case studies open inline (modals) or link to dedicated detail pages?
@@ -0,0 +1,42 @@
1
+ ---
2
+ id: restaurant
3
+ label: Restaurant
4
+ description: Single-location restaurant — drive reservations and visits
5
+ icon: utensils
6
+ order: 70
7
+ ---
8
+
9
+ # Restaurant
10
+
11
+ ## Goal
12
+ Drive reservations, takeaway orders, and walk-in visits.
13
+
14
+ ## Audience
15
+ TBD — locals, tourists, special-occasion diners, lunch crowd?
16
+
17
+ ## Primary CTA
18
+ TBD — "Book a table", "Order online", "View menu".
19
+
20
+ ## Sections / Modules
21
+ 1. **hero** — atmospheric photography, name, tagline, primary CTA
22
+ 2. **about** — story of the restaurant, chef, or concept
23
+ 3. **menu** — categories with featured dishes (skip full menu — link out)
24
+ 4. **gallery** — interior, dishes, ambience
25
+ 5. **reservations** — booking widget or instructions
26
+ 6. **reviews** — quotes from press or diners
27
+ 7. **location-and-hours** — address, map, opening hours, contact
28
+ 8. **events-or-private-dining** — optional, skip if not offered
29
+ 9. **footer** — social, newsletter, legal
30
+
31
+ ## Brand & Tone
32
+ TBD — fine-dining/elegant, cozy/neighborhood, bold/trendy, casual/family
33
+
34
+ ## Open questions
35
+ - [ ] What is the restaurant called, where is it, and what's the cuisine?
36
+ - [ ] What's the one-line story or concept (chef-driven, family-run, fast-casual, etc.)?
37
+ - [ ] Do you take reservations — and if so, via which platform (OpenTable, Resy, Tock, in-house)?
38
+ - [ ] Is there online ordering or delivery, and via which platform?
39
+ - [ ] Do you want a featured-dishes section or just a link to the full menu (PDF / external)?
40
+ - [ ] Any press mentions, awards, or stars to call out?
41
+ - [ ] Do you host private events or have a separate private-dining offering?
42
+ - [ ] Reference vibes — Eleven Madison, Sweetgreen, In-N-Out, neighborhood bistro?
@@ -0,0 +1,42 @@
1
+ ---
2
+ id: saas-landing
3
+ label: SaaS Landing Page
4
+ description: Cloud product — sign-ups, demo bookings, or trial conversions
5
+ icon: rocket
6
+ order: 10
7
+ ---
8
+
9
+ # SaaS Landing Page
10
+
11
+ ## Goal
12
+ Drive sign-ups, demo bookings, or free-trial conversions for a cloud product.
13
+
14
+ ## Audience
15
+ TBD — describe the target persona (industry, role, company size, key pain).
16
+
17
+ ## Primary CTA
18
+ TBD — common patterns: "Start free trial", "Book a demo", "Get started free".
19
+
20
+ ## Sections / Modules
21
+ 1. **hero** — headline, sub-headline, primary CTA, optional product screenshot
22
+ 2. **trust-bar** — customer / partner logos
23
+ 3. **features-grid** — 3–6 product benefits with icons and short copy
24
+ 4. **how-it-works** — 3-step explainer (sign up → connect → see results)
25
+ 5. **testimonials** — 1–3 customer quotes with name, role, company
26
+ 6. **pricing-table** — 2–4 tiers with feature comparison
27
+ 7. **faq** — 4–8 Q&A covering common objections
28
+ 8. **cta-banner** — final conversion-focused CTA
29
+ 9. **footer** — links, legal, copyright
30
+
31
+ ## Brand & Tone
32
+ TBD — confident/professional, playful/casual, technical/approachable?
33
+
34
+ ## Open questions
35
+ - [ ] What is the product name and one-line description (pitch)?
36
+ - [ ] Who is the primary buyer / user persona?
37
+ - [ ] What is the single most important action a visitor should take?
38
+ - [ ] What are the top 3 product benefits or differentiators?
39
+ - [ ] Do you have customer logos, testimonials, or case studies ready?
40
+ - [ ] Pricing — free + paid + enterprise, single price, or contact-sales only?
41
+ - [ ] Are there integrations or platforms worth highlighting?
42
+ - [ ] Any reference sites or competitors whose vibe you want to match (or avoid)?