@grove-dev/svelte

SvelteKit framework adapter for Grove.

A thin layer of Svelte components, layouts, and design tokens, on top of the framework-agnostic @grove-dev/core and @grove-dev/ui. Includes a default templates/default/ directory that grove new --framework svelte copies into a new project.

pnpm add @grove-dev/svelte

Status

Roadmap only — not in V1. Grove V1 ships the Astro renderer only. The V1 CLI refuses --framework svelte at scaffold time. The SvelteKit adapter is reserved for V1.1 once @grove-dev/core and @grove-dev/ui (V1) are stable. See docs/roadmap.md for the schedule.

This package currently ships a skeleton only:

• src/index.ts — re-exports @grove-dev/ui (V1 primitives: filterRecords, sortRecords, paginateRecords, scoreRecords, format)
• src/styles.css — placeholder design tokens
• templates/default/package.json — SvelteKit 2 + Svelte 5 wiring

The component library, routes, and theme are still to be built. The architectural shape is locked: anything framework-specific lives in this package, anything generic stays in @grove-dev/core and @grove-dev/ui.

What it will ship (roadmap, V1.1)

src/
├── components/        # ItemCard.svelte, IndexRow.svelte, RecordSection.svelte,
│                      # Pagination.svelte, ScoreBars.svelte, RefinePanel.svelte,
│                      # Hero.svelte, … (22 V1 surface, ported from @grove-dev/astro)
├── layouts/           # BaseLayout.svelte
├── styles.css         # design tokens
└── index.ts           # re-exports @grove-dev/ui

templates/
└── default/           # full SvelteKit starter: routes/, lib/, static/,
                       # data/, .github/, svelte.config.js

Usage in a space (planned)

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import ItemCard from "@grove-dev/svelte/components/ItemCard.svelte";
  import BaseLayout from "@grove-dev/svelte/layouts/BaseLayout.svelte";
  import "@grove-dev/svelte/styles.css";
  import records from "$lib/data/generated/records.json";
</script>

<BaseLayout title="My Grove space">
  {#each records as record (record.slug)}
    <ItemCard {record} href={`/projects/${record.slug}`} />
  {/each}
</BaseLayout>

Components are imported by path. The barrel re-exports @grove-dev/ui so generic helpers (filterRecords, sortRecords, paginateRecords, scoreRecords, format, LENSES, SORT_OPTIONS) are available from the same import.

Layering

@grove-dev/svelte is the third layer of the Grove stack:

1. @grove-dev/core — schemas, importers, build pipeline (headless, V1 Resource union).
2. @grove-dev/ui — framework-agnostic UI primitives (V1: 5 typed modules over IndexRecord).
3. @grove-dev/svelte ← you are here — Svelte components, layouts, template.

Development

pnpm --filter @grove-dev/svelte build
pnpm --filter @grove-dev/svelte check

License

MIT