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 GroveEngine monorepo at packages/vineyard and is re-exported through the engine. No separate install needed — it comes with GroveEngine.

import { VineyardLayout, FeatureCard, StatusBadge, ... } from '@autumnsgrove/groveengine/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/groveengine/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/groveengine/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

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