npm - @svgrid/create - Versions diffs - 2.6.0 → 2.8.0 - Mend

@svgrid/create 2.6.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/README.md +11 -5
package/index.mjs +486 -466
package/package.json +2 -2
package/templates/headless/README.md +65 -0
package/templates/headless/_gitignore +4 -0
package/templates/headless/_package.json +22 -0
package/templates/headless/index.html +12 -0
package/templates/headless/src/App.svelte +159 -0
package/templates/headless/src/app.css +153 -0
package/templates/headless/src/main.ts +7 -0
package/templates/headless/src/vite-env.d.ts +2 -0
package/templates/headless/svelte.config.js +5 -0
package/templates/headless/tsconfig.json +14 -0
package/templates/headless/vite.config.js +6 -0
package/templates/minimal/src/app.css +1 -1
package/templates/pivot-dashboard/README.md +74 -0
package/templates/pivot-dashboard/_gitignore +23 -0
package/templates/pivot-dashboard/_package.json +27 -0
package/templates/pivot-dashboard/src/app.css +15 -0
package/templates/pivot-dashboard/src/app.d.ts +11 -0
package/templates/pivot-dashboard/src/app.html +22 -0
package/templates/pivot-dashboard/src/lib/drill.ts +141 -0
package/templates/pivot-dashboard/src/lib/facts.ts +81 -0
package/templates/pivot-dashboard/src/lib/theme.svelte.ts +87 -0
package/templates/pivot-dashboard/src/routes/+layout.svelte +79 -0
package/templates/pivot-dashboard/src/routes/+page.server.ts +11 -0
package/templates/pivot-dashboard/src/routes/+page.svelte +138 -0
package/templates/pivot-dashboard/src/routes/DrillRail.svelte +82 -0
package/templates/pivot-dashboard/src/routes/TrendChart.svelte +62 -0
package/templates/pivot-dashboard/tsconfig.json +20 -0
package/templates/pivot-dashboard/vite.config.ts +20 -0
package/templates/sveltekit/README.md +33 -3
package/templates/sveltekit/src/app.css +1 -1
package/templates/sveltekit/src/app.d.ts +10 -2
package/templates/sveltekit/src/hooks.server.ts +49 -0
package/templates/sveltekit/src/lib/server/auth.ts +177 -0
package/templates/sveltekit/src/lib/theme.svelte.ts +1 -1
package/templates/sveltekit/src/routes/+layout.server.ts +10 -0
package/templates/sveltekit/src/routes/+layout.svelte +16 -1
package/templates/sveltekit/src/routes/login/+page.server.ts +51 -0
package/templates/sveltekit/src/routes/login/+page.svelte +55 -0
package/templates/sveltekit/src/routes/logout/+server.ts +24 -0
package/templates/sveltekit/src/routes/people/+page.server.ts +12 -3
package/templates/sveltekit/src/routes/people/+page.svelte +10 -5

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "type": "commercial",
     "url": "https://svgrid.com/pricing"
   },
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create @svgrid@latest",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@svgrid/grid": "^2.6.9"
+    "@svgrid/grid": "^2.7.0"
   },
   "scripts": {
     "sync-templates": "node sync-templates.mjs"

package/templates/headless/README.md ADDED Viewed

@@ -0,0 +1,65 @@
+# Headless SvGrid app
+A [Vite](https://vite.dev) + [Svelte 5](https://svelte.dev) app built on the
+[SvGrid](https://svgrid.com) **engine** rather than its renderer. `createSvGrid`
+runs the row pipeline; the `<table>` in `src/App.svelte` and the stylesheet in
+`src/app.css` are entirely yours.
+```bash
+npm install
+npm run dev      # http://localhost:5173
+npm run build
+npm run check    # svelte-check
+```
+## What's wired up
+Everything comes from `@svgrid/grid/core` - the headless entry point. It has no
+DOM code, no ARIA, and no CSS, so nothing in this project styles itself.
+- **Row pipeline** - `coreRowModel` -> `filteredRowModel` -> `sortedRowModel`.
+  You opt into the steps you use; the rest never enters the bundle. Add
+  `createGroupedRowModel`, `createPaginatedRowModel`, or `createTreeRowModel`
+  the same way.
+- **Features** - `tableFeatures({ rowSortingFeature, columnFilteringFeature })`.
+  Registering a feature is what makes its state and its row model legal.
+- **Controlled state** - `sorting` and `columnFilters` are plain Svelte 5
+  `$state`. The engine reads them and reports changes back through
+  `onSortingChange` / `onColumnFiltersChange`; it never writes to them.
+- **Your markup** - `table.getHeaderGroups()` and `table.getRowModel().rows` are
+  the whole contract. Render a `<table>`, a list of cards, an SVG, a string for
+  an email. The engine has no opinion.
+## Where to go next
+- [Headless overview](https://svgrid.com/docs/help/headless/overview) - what the
+  engine gives you and when to reach for it.
+- [Row models](https://svgrid.com/docs/help/headless/row-models) - grouping,
+  pagination, tree data.
+- [Virtualization](https://svgrid.com/docs/help/headless/virtualization) - the
+  virtualizer exports, for when the row count outgrows a plain `<table>`.
+- [Server-side](https://svgrid.com/docs/help/headless/server-side) - drive the
+  pipeline from a `load` function or a Node service.
+- [Controlled state](https://svgrid.com/docs/help/headless/controlled-state) -
+  sharing one state object across two views.
+## Want the batteries-included grid instead?
+`<SvGrid>` is the renderer built on this same engine - virtual scrolling,
+Excel-style filters, inline editing, 20 themes:
+```bash
+npm create @svgrid@latest my-app -- --template minimal
+```
+## Working with an AI assistant
+Point it at the SvGrid MCP server so it writes against the real API instead of
+guessing:
+```bash
+claude mcp add svgrid -- npx -y @svgrid/mcp
+```
+Built with [SvGrid](https://svgrid.com). SvGrid(TM) is a trademark of
+jQWidgets Ltd. This template is MIT-licensed.

package/templates/headless/_gitignore ADDED Viewed

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.local

package/templates/headless/_package.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "sv-grid-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
+    "typescript": "^5.9.2",
+    "vite": "^8.0.10"
+  },
+  "dependencies": {
+    "@svgrid/grid": "latest"
+  }
+}

package/templates/headless/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Headless SvGrid app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/headless/src/App.svelte ADDED Viewed

@@ -0,0 +1,159 @@
+<script lang="ts">
+  /**
+   * The engine, not the renderer.
+   *
+   * `createSvGrid` from `@svgrid/grid/core` computes the row model - filtered,
+   * then sorted - and hands you rows and header groups. It touches no DOM, ships
+   * no CSS, and has no opinion about your markup. Everything below <table> is
+   * yours to rewrite.
+   *
+   * If you'd rather have the batteries-included component, that's
+   * `npm create @svgrid@latest my-app -- --template minimal`.
+   */
+  import {
+    createSvGrid,
+    createCoreRowModel,
+    createFilteredRowModel,
+    createSortedRowModel,
+    tableFeatures,
+    rowSortingFeature,
+    columnFilteringFeature,
+    type ColumnDef,
+    type ColumnFiltersState,
+    type SortingState,
+  } from '@svgrid/grid/core'
+  type Person = {
+    id: number
+    name: string
+    team: string
+    salary: number
+    active: boolean
+  }
+  // Opt into the features you use. Registering a feature is what makes its
+  // state and its row model legal; what you leave out never enters the bundle.
+  const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+  const columns: ColumnDef<typeof features, Person>[] = [
+    { field: 'name', header: 'Name' },
+    { field: 'team', header: 'Team' },
+    { field: 'salary', header: 'Salary' },
+    { field: 'active', header: 'Active' },
+  ]
+  // Swap for a fetch() in $effect, a load function, a store - the engine only
+  // wants an array.
+  const data: Person[] = [
+    { id: 1, name: 'Ada Lovelace', team: 'Engineering', salary: 145000, active: true },
+    { id: 2, name: 'Alan Turing', team: 'Research', salary: 160000, active: true },
+    { id: 3, name: 'Grace Hopper', team: 'Engineering', salary: 152000, active: false },
+    { id: 4, name: 'Katherine Johnson', team: 'Data', salary: 138000, active: true },
+    { id: 5, name: 'Edsger Dijkstra', team: 'Research', salary: 149000, active: false },
+    { id: 6, name: 'Barbara Liskov', team: 'Research', salary: 158000, active: true },
+    { id: 7, name: 'Margaret Hamilton', team: 'Engineering', salary: 151000, active: true },
+    { id: 8, name: 'Donald Knuth', team: 'Data', salary: 141000, active: false },
+  ]
+  // Controlled state. The engine never mutates these - it reports what changed
+  // through onXxxChange and you decide what to store. $state is what makes the
+  // round trip reactive.
+  let sorting = $state<SortingState>([{ id: 'salary', desc: true }])
+  let columnFilters = $state<ColumnFiltersState>([])
+  let query = $state('')
+  $effect(() => {
+    columnFilters = query ? [{ id: 'name', value: query }] : []
+  })
+  // Rebuilt whenever data or state changes. Recreating the engine is cheap -
+  // it's a state machine over your array, not a component tree.
+  const table = $derived.by(() =>
+    createSvGrid({
+      _features: features,
+      _rowModels: {
+        // The pipeline, in order. Add createGroupedRowModel /
+        // createPaginatedRowModel / createTreeRowModel as you need them.
+        coreRowModel: createCoreRowModel<Person>(),
+        filteredRowModel: createFilteredRowModel<Person>(),
+        sortedRowModel: createSortedRowModel<Person>(),
+      },
+      data,
+      columns,
+      state: { sorting, columnFilters },
+      onSortingChange: (u) => (sorting = typeof u === 'function' ? u(sorting) : u),
+      onColumnFiltersChange: (u) => (columnFilters = typeof u === 'function' ? u(columnFilters) : u),
+    }),
+  )
+  const headerGroups = $derived(table.getHeaderGroups())
+  const rows = $derived(table.getRowModel().rows)
+  // Sorting is yours to drive: click cycles asc -> desc -> unsorted.
+  function toggleSort(id: string) {
+    const current = sorting[0]
+    sorting = current?.id !== id ? [{ id, desc: false }] : current.desc ? [] : [{ id, desc: true }]
+  }
+  const indicator = (id: string) => (sorting[0]?.id === id ? (sorting[0].desc ? '▼' : '▲') : '')
+  const money = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  })
+</script>
+<main>
+  <header>
+    <h1>Headless SvGrid</h1>
+    <p>
+      <code>createSvGrid</code> sorts and filters. The <code>&lt;table&gt;</code> below is plain
+      markup in <code>src/App.svelte</code>, styled by <code>src/app.css</code>. No grid CSS is
+      loaded.
+    </p>
+  </header>
+  <input class="search" placeholder="Filter by name…" bind:value={query} />
+  <table>
+    <thead>
+      {#each headerGroups as group (group.id)}
+        <tr>
+          {#each group.headers as header (header.id)}
+            <th
+              class:numeric={header.column.id === 'salary'}
+              aria-sort={sorting[0]?.id === header.column.id
+                ? sorting[0].desc
+                  ? 'descending'
+                  : 'ascending'
+                : 'none'}
+            >
+              <button type="button" onclick={() => toggleSort(header.column.id)}>
+                {header.column.columnDef.header}
+                <span class="indicator">{indicator(header.column.id)}</span>
+              </button>
+            </th>
+          {/each}
+        </tr>
+      {/each}
+    </thead>
+    <tbody>
+      {#each rows as row (row.id)}
+        {@const person = row.original as Person}
+        <tr>
+          <td>{person.name}</td>
+          <td>{person.team}</td>
+          <td class="numeric">{money.format(person.salary)}</td>
+          <td>{person.active ? 'Yes' : 'No'}</td>
+        </tr>
+      {:else}
+        <tr>
+          <td colspan="4" class="empty">Nobody matches “{query}”.</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  <p class="count">{rows.length} of {data.length} rows</p>
+</main>

package/templates/headless/src/app.css ADDED Viewed

@@ -0,0 +1,153 @@
+/* ---------------------------------------------------------------------------
+ * Your stylesheet. All of it.
+ *
+ * Nothing here comes from @svgrid/grid - there is no preset import, no --sg-*
+ * token, no theme to pick. The headless entry point ships an engine and no CSS,
+ * so the table below is styled the same way any other table in your app would
+ * be. Rename the variables, drop them for Tailwind classes, delete this file
+ * and start over: none of it affects sorting or filtering.
+ *
+ * If you'd rather inherit a themed grid than write one, the other starters use
+ * the <SvGrid> renderer and its 20 presets:
+ *   npm create @svgrid@latest my-app -- --template minimal
+ * ------------------------------------------------------------------------- */
+:root {
+  --app-bg: #ffffff;
+  --app-surface: #fafaf9;
+  --app-fg: #1c1917;
+  --app-muted: #78716c;
+  --app-border: #e7e5e4;
+  --app-accent: #c2410c;
+  --app-hover: #f5f5f4;
+  color-scheme: light;
+}
+/* Dark mode follows the OS. Swap this for a data-theme attribute and a toggle
+   if you want the choice to be the user's. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --app-bg: #1c1917;
+    --app-surface: #292524;
+    --app-fg: #fafaf9;
+    --app-muted: #a8a29e;
+    --app-border: #44403c;
+    --app-accent: #fb923c;
+    --app-hover: #292524;
+    color-scheme: dark;
+  }
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--app-bg);
+  color: var(--app-fg);
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+}
+main {
+  max-width: 720px;
+  margin: 3rem auto;
+  padding: 0 1rem;
+}
+h1 {
+  margin: 0 0 0.5rem;
+  font-size: 1.4rem;
+}
+header p {
+  margin: 0 0 1.5rem;
+  color: var(--app-muted);
+  line-height: 1.6;
+}
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+}
+.search {
+  width: 260px;
+  margin-bottom: 1rem;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--app-border);
+  border-radius: 6px;
+  background: var(--app-bg);
+  color: var(--app-fg);
+  font: inherit;
+  font-size: 0.9rem;
+}
+.search:focus-visible {
+  outline: 2px solid var(--app-accent);
+  outline-offset: 1px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+th {
+  padding: 0;
+  background: var(--app-surface);
+  border-bottom: 2px solid var(--app-border);
+  text-align: left;
+}
+/* The header is a button so keyboard users can sort too - the engine does not
+   care what element calls toggleSort. */
+th button {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-align: inherit;
+  cursor: pointer;
+}
+th button:hover {
+  color: var(--app-accent);
+}
+th button:focus-visible {
+  outline: 2px solid var(--app-accent);
+  outline-offset: -2px;
+}
+.indicator {
+  color: var(--app-accent);
+  font-size: 0.7em;
+}
+td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--app-border);
+}
+tbody tr:hover td {
+  background: var(--app-hover);
+}
+.numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.empty {
+  padding: 1.5rem;
+  color: var(--app-muted);
+  text-align: center;
+}
+.count {
+  margin-top: 0.75rem;
+  color: var(--app-muted);
+  font-size: 0.8rem;
+}

package/templates/headless/src/main.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+const app = mount(App, { target: document.getElementById('app')! })
+export default app

package/templates/headless/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /// <reference types="svelte" />
2	+ /// <reference types="vite/client" />

package/templates/headless/svelte.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+export default {
+  preprocess: vitePreprocess(),
+}

package/templates/headless/tsconfig.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"]
+}

package/templates/headless/vite.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+export default defineConfig({
+  plugins: [svelte()],
+})

package/templates/minimal/src/app.css CHANGED Viewed

@@ -13,7 +13,7 @@
  * Token reference: https://svgrid.com/docs/getting-started/5-theme-and-density
  * ------------------------------------------------------------------------- */
 /* svgrid-theme:start */
-@import '@svgrid/grid/themes/shadcn.css';
+@import '@svgrid/grid/themes/ember.css';
 /* svgrid-theme:end */
 /* Which way the page leans, so scrollbars, form controls and the canvas behind

package/templates/pivot-dashboard/README.md ADDED Viewed

@@ -0,0 +1,74 @@
+# SvGrid pivot dashboard
+A pivot cube, a linked chart, and a drill-through rail over one fact table -
+the three pieces a reporting screen usually needs, wired so they cannot
+disagree with each other.
+```bash
+npm install
+npm run dev     # http://localhost:5173/
+```
+## What to try
+1. **Drag `Channel` into Rows** in the panel on the right. The cube, the chart
+   and any open drill all follow, because all three read the same layout.
+2. **Click any aggregated cell.** The rail opens with the exact rows behind that
+   number. The KPI at the top is recomputed from those rows, so it always equals
+   the cell you clicked.
+3. **Click a subtotal, then the grand total.** Same code path - a subtotal
+   simply contributes fewer filter terms, so the slice widens. The grand total
+   filters on nothing and returns all 1,800 facts.
+4. **Switch the measure** to `Units` in the Values well. The chart axis, the
+   rail KPI and the formatting all switch with it.
+5. **Click a bar** in the chart to drill that whole dimension value.
+## How the drill works
+A pivot cell is the intersection of a row path and a column path, and the two
+arrive in different shapes:
+- the **row** path is the chain of ancestors up to the clicked `PivotRow`,
+  matched positionally against `layout.rows`;
+- the **column** path is encoded in the column id - `pv__<dim>__<dim>__m<i>`,
+  where the trailing `m<i>` indexes into `layout.values`.
+`src/lib/drill.ts` decodes both into one `{ field: value }` filter and returns
+the facts that match every entry. Because the total is recomputed from those
+same facts rather than read off the grid, the rail and the cube cannot drift
+apart.
+That module is deliberately free of Svelte and of the grid packages, so you can
+unit-test your own reporting rules against it.
+## Where things are
+| File | Does |
+| --- | --- |
+| `src/lib/facts.ts` | The fact table. Seeded and deterministic. Swap `loadFacts` for your query. |
+| `src/lib/drill.ts` | Pure drill-through: cell -> filter -> facts. No Svelte, no grid imports. |
+| `src/routes/+page.server.ts` | Builds the facts on the server and sends them with the page. |
+| `src/routes/+page.svelte` | The dashboard: designer, chart and rail over one `facts` array. |
+| `src/routes/DrillRail.svelte` | The rail: KPIs plus a grid of the underlying rows. |
+| `src/routes/TrendChart.svelte` | The bar chart. Inline SVG-free DOM, styled with `--sg-*`. |
+## Licensing
+`SvPivotDesigner` is part of `@svgrid/enterprise`, which is commercial. The app
+runs unlicensed - it just nudges - so you can evaluate it before buying. Replace
+the key in `src/routes/+page.svelte`:
+```ts
+setLicenseKey('SVENTERPRISE-DEV-DEMO')
+```
+Pricing: https://svgrid.com/pricing
+## Going to production
+The facts are generated in-process. Point `loadFacts` at your warehouse and keep
+the aggregation on the server if the fact table is large - the browser should
+receive facts, not a database connection. Everything downstream takes `Fact[]`,
+so nothing else has to change.
+Full guide: https://svgrid.com/docs/enterprise/pivot/

package/templates/pivot-dashboard/_gitignore ADDED Viewed

@@ -0,0 +1,23 @@
+node_modules
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+# OS
+.DS_Store
+Thumbs.db
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

package/templates/pivot-dashboard/_package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "svgrid-pivot-dashboard",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.56.1",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "dependencies": {
+    "@svgrid/grid": "^2.6.8",
+    "@svgrid/enterprise": "^2.6.4"
+  }
+}

package/templates/pivot-dashboard/src/app.css ADDED Viewed

@@ -0,0 +1,15 @@
+/* SvGrid theme. One of the 20 presets @svgrid/grid ships.
+ *
+ * Importing it as a stylesheet means the FIRST paint - and the server-rendered
+ * HTML - is already themed, before any JavaScript runs. The theme picker in the
+ * layout overrides these values at runtime by setting the same --sg-* custom
+ * properties on <html>.
+ *
+ * `npm create @svgrid@latest -- --theme <id>` rewrites the line between the
+ * markers, so pick a starting theme at scaffold time if you prefer. */
+/* svgrid-theme:start */
+@import '@svgrid/grid/themes/ember.css';
+/* svgrid-theme:end */
+* { box-sizing: border-box; }
+body { margin: 0; }

package/templates/pivot-dashboard/src/app.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+export {};

package/templates/pivot-dashboard/src/app.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		<script>
+			// Settle the theme before the first paint. Without this the server-rendered
+			// HTML shows one palette and the picker in +layout.svelte swaps it a frame
+			// later. With nothing saved yet we follow the OS.
+			try {
+				var saved = JSON.parse(localStorage.getItem('svgrid-theme') || 'null')
+				var fallback = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+				document.documentElement.dataset.theme = (saved && saved.mode) || fallback
+			} catch (e) {}
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>