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.

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

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 :

<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

<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 icon name as a string:

<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:

<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:

<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:

<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:

<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

<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.

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)