grove-vineyard

# Grove Vineyard Skill ## When to Activate Activate this skill when: - Creating a `/vineyard` route for a Grove property - Adding features or demos to an existing vineyard page - User mentions "vineyard", "showcase page", or "tool demo page" - Implementing feature cards, roadmaps, or demo containers for a tool ## What Is Vineyard? Every Grove property implements a `/vineyard` route on its subdomain — a consistent way to explore what each tool does, see working demos, and understand the roadmap. ``` amber.grove.place/vineyard → Storage showcase ivy.grove.place/vineyard → Email client showcase foliage.grove.place/vineyard → Theming showcase meadow.grove.place/vineyard → Social layer showcase heartwood.grove.place/vineyard → Auth showcase forage.grove.place/vineyard → Domain discovery showcase ``` ## Package Vineyard lives inside the Lattice monorepo at `libs/vineyard` and is re-exported through the engine. No separate install needed — it comes with Lattice. ```typescript import { VineyardLayout, FeatureCard, StatusBadge, ... } from '@autumnsgrove/lattice/vineyard'; ``` ## Available Components | Component | Purpose | | ---------------- | ------------------------------------------------------------------------------ | | `VineyardLayout` | Full page wrapper — hero, status badge, philosophy quote, related tools footer | | `FeatureCard` | Showcase a feature with icon, status, description, and optional demo slot | | `StatusBadge` | Status pill: ready, preview, demo, coming-soon, in-development | | `DemoContainer` | Wrapper for interactive demos with mock data indicator | | `CodeExample` | Code block with language label, filename, and copy-to-clipboard | | `TierGate` | Tier-based access control with blur preview and upgrade prompt | | `RoadmapSection` | Visual timeline: built / in-progress / planned | | `AuthButton` | Better Auth sign in/out button | | `UserMenu` | User profile menu with avatar and email | ## Types ```typescript type VineyardStatus = "ready" | "preview" | "demo" | "coming-soon" | "in-development"; type GroveTool = | "amber" | "ivy" | "foliage" | "meadow" | "rings" | "trails" | "heartwood" | "forage"; type GroveTier = "seedling" | "sapling" | "oak" | "grove"; ``` ## Minimal Implementation Create `src/routes/vineyard/+page.svelte`: ```svelte <script lang="ts"> import { VineyardLayout, FeatureCard, RoadmapSection, DemoContainer, } from "@autumnsgrove/lattice/vineyard"; </script> <VineyardLayout tool="amber" tagline="Your files, preserved" status="preview"> <!-- Feature Cards --> <div class="feature-grid"> <FeatureCard title="Storage Overview" description="See usage across posts and media" status="ready" icon="HardDrive" /> <FeatureCard title="File Browser" description="Browse and manage uploaded files" status="ready" icon="FolderOpen" /> <FeatureCard title="Export Your Data" description="Download everything in one click" status="coming-soon" icon="Download" /> </div> <!-- Roadmap --> <RoadmapSection built={["Core storage view", "Usage breakdown", "File browser"]} inProgress={["Export functionality"]} planned={["Bulk delete", "Storage alerts", "External backup"]} /> </VineyardLayout> <style> .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } </style> ``` ## Component Details ### VineyardLayout Handles the full page structure automatically: - **Hero**: Tool name (capitalized from `tool` prop), tagline, status badge, philosophy quote - **Content**: Renders children in a max-width container with padding - **Footer**: "Works well with" section linking related tools' vineyards ```svelte <VineyardLayout tool="ivy" tagline="Messages that grow on you" status="in-development"> <!-- All your content goes here --> </VineyardLayout> ``` The philosophy quotes and related tool mappings are built-in. No configuration needed. ### FeatureCard Icons are any valid [@lucide/svelte](https://lucide.dev) icon name as a string: ```svelte <FeatureCard title="Theme Picker" description="Choose from curated seasonal themes" status="ready" icon="Palette" > {#snippet demo()} <!-- Optional: interactive demo renders below the description --> <ThemePicker themes={sampleThemes} /> {/snippet} </FeatureCard> ``` ### DemoContainer Wraps interactive demos with a header, description, and optional "Mock Data" indicator: ```svelte <DemoContainer title="Email Composer" description="Try the rich text editor" mockData={true}> <RichTextEditor value={sampleDraft} /> </DemoContainer> ``` When `mockData={true}`: - Shows a blue "Mock Data" pill in the header - Adds a dashed blue border around the demo content ### CodeExample Code blocks with copy-to-clipboard and language/filename labels: ```svelte <CodeExample language="typescript" filename="src/routes/+layout.svelte"> {`import { initAmber } from '@autumnsgrove/amber'; const storage = initAmber({ tenant: 'my-site', tier: 'sapling' });`} </CodeExample> ``` ### TierGate Shows content only if user meets tier requirement. Otherwise shows blur preview + upgrade prompt: ```svelte <TierGate required="oak" current={userTier} showPreview={true}> <AdvancedStoragePanel /> {#snippet fallback()} <!-- Optional custom fallback (default shows upgrade button) --> <p>Upgrade to Oak for advanced storage features</p> {/snippet} </TierGate> ``` Tier hierarchy: `seedling` < `sapling` < `oak` < `grove` ### RoadmapSection Three-column (desktop) / stacked (mobile) timeline: ```svelte <RoadmapSection built={["Feature A", "Feature B"]} inProgress={["Feature C"]} planned={["Feature D", "Feature E"]} /> ``` - Built items get green dots - In-progress items get pulsing orange dots - Planned items get hollow gray circles ### Authentication ```svelte <script> import { AuthButton, UserMenu, getSession } from "@autumnsgrove/lattice/vineyard"; import { onMount } from "svelte"; let user = $state(null); onMount(async () => { const session = await getSession(); user = session.user; }); </script> {#if user} <UserMenu showAvatar={true} showEmail={true} /> {:else} <AuthButton provider="google" signInText="Sign in to explore" /> {/if} ``` ## Status Badge Meanings | Status | Visual | Use When | | ---------------- | ------------------- | ---------------------------------- | | `ready` | Green solid pill | Feature is complete and stable | | `preview` | Amber dashed border | Functional but API may change | | `demo` | Blue solid pill | Interactive example, not real data | | `coming-soon` | Gray subtle pill | Designed but not built yet | | `in-development` | Orange pulsing pill | Actively being built right now | ## Design System Vineyard components use Grove's built-in aesthetic: - **Colors**: Amber tones (#f59e0b, #d97706) on stone neutrals - **Glass**: Semi-transparent backgrounds with backdrop-blur - **Typography**: Lexend font (loaded by VineyardLayout) - **Interactions**: Hover lift on cards, smooth transitions No additional styling framework needed — components are self-contained with scoped CSS. ## Content Strategy ### For Ready Tools - Working demos with real or realistic mock data - Complete feature cards with all statuses "ready" - Full code examples and API reference - Getting started guide ### For Preview/In Development Tools - Mix of "ready" and "coming-soon" feature cards - Demo containers with `mockData={true}` - Roadmap section showing progress - TierGate for features not yet available ### For Coming Soon Tools - Minimal vineyard: VineyardLayout + philosophy + roadmap - All feature cards as "coming-soon" - No interactive demos needed yet ## Grove Terminology When vineyard pages reference Grove-themed terms (tool names, feature names, user roles), use GroveTerm components to respect the user's Grove Mode setting. New visitors see standard terms by default. ```svelte import {(GroveTerm, GroveText)} from '@autumnsgrove/lattice/ui'; import groveTermManifest from '$lib/data/grove-term-manifest.json'; <!-- Use GroveText for data-driven content with [[term]] syntax --> <GroveText content="Manage your [[bloom|posts]] and [[garden|blog]] appearance." manifest={groveTermManifest} /> <!-- Or GroveTerm for individual interactive terms --> <p>Customize how your <GroveTerm term="garden" manifest={groveTermManifest} /> looks.</p> ``` ## Checklist Before shipping a vineyard page: - [ ] `VineyardLayout` with correct `tool`, `tagline`, and `status` - [ ] At least 3 `FeatureCard` components with appropriate statuses - [ ] `RoadmapSection` with honest built/inProgress/planned arrays - [ ] At least one interactive demo (even with mock data) - [ ] Works on mobile (feature grid responsive) - [ ] Icons are valid @lucide/svelte names - [ ] Status badges accurately reflect feature state - [ ] Grove terminology uses GroveTerm components (not hardcoded)