grove-vineyard

Grove Vineyard スキル

有効にするタイミング

以下の場合にこのスキルを有効にします。

• Grove プロパティの /vineyard ルートを作成するとき
• 既存の vineyard ページに機能やデモを追加するとき
• ユーザーが「vineyard」「showcase page」「tool demo page」と言及したとき
• ツール用の機能カード、ロードマップ、デモコンテナを実装するとき

Vineyard とは

すべての Grove プロパティは、そのサブドメインに /vineyard ルートを実装します。各ツールの機能を確認し、動作するデモを試し、ロードマップを把握するための、一貫した方法を提供します。

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

パッケージ

Vineyard は Lattice モノレポ内の libs/vineyard にあり、エンジン経由で再エクスポートされます。別途インストールする必要はありません。Lattice に含まれています。

import { VineyardLayout, FeatureCard, StatusBadge, ... } from '@autumnsgrove/lattice/vineyard';

利用可能なコンポーネント

コンポーネント	用途
VineyardLayout	ページ全体のラッパー — ヒーロー、ステータスバッジ、理念の引用、関連ツールのフッター
FeatureCard	アイコン、ステータス、説明、任意のデモスロットを使って機能を紹介します
StatusBadge	ready、preview、demo、coming-soon、in-development のステータスピル
DemoContainer	モックデータ表示を備えた、インタラクティブなデモ用ラッパー
CodeExample	言語ラベル、ファイル名、クリップボードへのコピー機能を備えたコードブロック
TierGate	ぼかしプレビューとアップグレード案内を備えた、ティアベースのアクセス制御
RoadmapSection	ビジュアルタイムライン：built / in-progress / planned
AuthButton	Better Auth のサインイン／サインアウトボタン
UserMenu	アバターとメールアドレスを表示するユーザープロフィールメニュー

型

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";

最小限の実装

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

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

コンポーネントの詳細

VineyardLayout

ページ全体の構成を自動的に処理します。

• ヒーロー：ツール名（tool プロパティから大文字表記に変換）、タグライン、ステータスバッジ、理念の引用
• コンテンツ：パディング付きの最大幅コンテナ内に子要素を表示します
• フッター：関連ツールの vineyard へのリンクを含む「Works well with」セクション

<VineyardLayout tool="ivy" tagline="Messages that grow on you" status="in-development">
	
</VineyardLayout>

理念の引用と関連ツールのマッピングは組み込み済みです。設定は必要ありません。

FeatureCard

アイコンには、@lucide/svelte の有効なアイコン名を文字列で指定できます。

<FeatureCard
	title="Theme Picker"
	description="Choose from curated seasonal themes"
	status="ready"
	icon="Palette"
>
	{#snippet demo()}
		
		<ThemePicker themes={sampleThemes} />
	{/snippet}
</FeatureCard>

DemoContainer

ヘッダー、説明、任意の「Mock Data」インジケーターを備えた、インタラクティブなデモ用ラッパーです。

<DemoContainer title="Email Composer" description="Try the rich text editor" mockData={true}>
	<RichTextEditor value={sampleDraft} />
</DemoContainer>

mockData={true} の場合：

• ヘッダーに青い「Mock Data」ピルを表示します
• デモコンテンツの周囲に青い破線の枠線を追加します

CodeExample

クリップボードへのコピー機能と、言語／ファイル名ラベルを備えたコードブロックです。

<CodeExample language="typescript" filename="src/routes/+layout.svelte">
	{`import { initAmber } from '@autumnsgrove/amber';

const storage = initAmber({
  tenant: 'my-site',
  tier: 'sapling'
});`}
</CodeExample>

TierGate

ユーザーがティア要件を満たす場合にのみコンテンツを表示します。満たさない場合は、ぼかしプレビューとアップグレード案内を表示します。

<TierGate required="oak" current={userTier} showPreview={true}>
	<AdvancedStoragePanel />

	{#snippet fallback()}
		
		<p>Upgrade to Oak for advanced storage features</p>
	{/snippet}
</TierGate>

ティアの階層：seedling < sapling < oak < grove

RoadmapSection

3 列（デスクトップ）／縦積み（モバイル）のタイムラインです。

<RoadmapSection
	built={["Feature A", "Feature B"]}
	inProgress={["Feature C"]}
	planned={["Feature D", "Feature E"]}
/>

• 完了項目には緑色のドットが付きます
• 進行中の項目にはオレンジ色の点滅するドットが付きます
• 予定項目には中が空白の灰色の円が付きます

認証

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

ステータスバッジの意味

ステータス	表示	使用するタイミング
ready	緑色の塗りつぶしピル	機能が完成しており、安定している場合
preview	琥珀色の破線の枠線	機能は動作するものの、API が変更される可能性がある場合
demo	青色の塗りつぶしピル	実際のデータではないインタラクティブな例の場合
coming-soon	控えめな灰色のピル	設計済みだが、まだ実装されていない場合
in-development	オレンジ色の点滅するピル	現在積極的に開発中の場合

デザインシステム

Vineyard のコンポーネントは、Grove に組み込まれたデザインを使用します。

• カラー：ストーン系のニュートラルカラーにアンバートーン（#f59e0b、#d97706）
• ガラス表現：backdrop-blur を使った半透明の背景
• タイポグラフィ：Lexend フォント（VineyardLayout が読み込みます）
• インタラクション：カードにホバー時の浮き上がり効果、スムーズなトランジション

追加のスタイリングフレームワークは不要です。コンポーネントはスコープ付き CSS を備えた自己完結型です。

コンテンツ戦略

Ready ツール向け

• 実データまたは現実的なモックデータを使った、動作するデモ
• すべてのステータスが「ready」の、情報が揃った機能カード
• 完全なコード例と API リファレンス
• はじめにガイド

Preview／開発中のツール向け

• 「ready」と「coming-soon」の機能カードを組み合わせる
• mockData={true} を指定したデモコンテナ
• 進捗を示すロードマップセクション
• まだ利用できない機能には TierGate を使用

Coming Soon のツール向け

• 最小限の Vineyard：VineyardLayout + 方針 + ロードマップ
• すべての機能カードを「coming-soon」にする
• まだインタラクティブなデモは不要

Grove の用語

Vineyard ページで Grove をテーマにした用語（ツール名、機能名、ユーザーロール）を使用する場合は、ユーザーの Grove Mode 設定が反映されるよう、GroveTerm コンポーネントを使用します。新しい訪問者には、デフォルトで標準用語が表示されます。

import {(GroveTerm, GroveText)} from '@autumnsgrove/lattice/ui'; import groveTermManifest from '$lib/data/grove-term-manifest.json';


<GroveText
	content="Manage your [[bloom|posts]] and [[garden|blog]] appearance."
	manifest={groveTermManifest}
/>


<p>Customize how your <GroveTerm term="garden" manifest={groveTermManifest} /> looks.</p>

チェックリスト

Vineyard ページを公開する前に確認してください。

• VineyardLayout に正しい tool、tagline、status を設定している
• 適切なステータスを設定した FeatureCard コンポーネントを3つ以上使用している
• 正確な built／inProgress／planned 配列を含む RoadmapSection がある
• 少なくとも1つのインタラクティブなデモがある（モックデータを使用する場合も含む）
• モバイルで正常に動作する（機能グリッドがレスポンシブである）
• アイコンに有効な @lucide/svelte 名を使用している
• ステータスバッジが機能の状態を正確に示している
• Grove の用語には GroveTerm コンポーネントを使用している（ハードコードしていない）