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)

grove-vineyard