@happyvertical/smrt-template-sveltekit 0.38.26 → 0.39.0

package/template/src/routes/+page.server.ts

@@ -1,106 +1,103 @@
-/**
- * Home page server load + demo mutation.
- *
- * This file is the reference data-loading pattern for SMRT + SvelteKit apps:
- *
- *   1. **Query collections in a server `load`** — not with a client-side
- *      `fetch` on mount. SvelteKit runs this during SSR, serializes the
- *      returned data into the initial HTML, and hydrates it on the client
- *      without re-fetching. The page renders with its data on first paint;
- *      there is no empty-then-fetch waterfall and no duplicate first-render
- *      request. Server loads read the database directly through the
- *      collection API — they do not round-trip through your own
- *      `/api/*` routes.
- *
- *   2. **Declare one dependency key per collection** with
- *      `depends('smrt:<collection>')`, where `<collection>` matches the
- *      generated REST route segment (`/api/items` → `smrt:items`). After a
- *      mutation, client code calls `invalidate('smrt:<collection>')`
- *      (see `+page.svelte`) and every load that declared the key re-runs.
- *
- *   3. **Opt read-heavy SSR reads into the collection read cache** with
- *      `cache: { ttl }`. Mutations that go through SMRT (`create()`,
- *      `save()`, `delete()`) invalidate the table's cache entries
- *      in-process automatically, so the post-mutation `invalidate()`
- *      re-runs this load against fresh rows. See "Data loading" in the
- *      README for multi-replica caveats and when NOT to cache.
- */
-
+import { assertOperationPermission } from '@happyvertical/smrt-users';
 import { fail } from '@sveltejs/kit';
+
 import type { Item } from '$lib/objects/Item';
-import { getCollection } from '$lib/server/smrt';
+import { getCollection, getSmrtConfig } from '$lib/server/smrt';
 import type { Actions, PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ depends }) => {
-  // Convention: `smrt:<collection>`. Registered before the query so even a
-  // failed load (e.g. database not initialized yet) re-runs on invalidation.
+const READ_PERMISSION = 'items.read';
+const CREATE_PERMISSION = 'items.create';
+
+export interface ItemRow {
+  id: string;
+  title: string;
+  status: string;
+}
+
+export const load: PageServerLoad = async ({ depends, locals }) => {
   depends('smrt:items');
 
+  const authenticated = Boolean(locals.user);
+  const hasTenant = Boolean(locals.tenantId);
+  const canRead =
+    authenticated && hasTenant && locals.permissions.includes(READ_PERMISSION);
+  const canCreate =
+    authenticated && hasTenant && locals.permissions.includes(CREATE_PERMISSION);
+
+  if (!canRead) {
+    return {
+      items: [] as ItemRow[],
+      canCreate,
+      loadError: null as string | null,
+      accessMessage: !authenticated
+        ? 'Sign in before loading tenant data.'
+        : !hasTenant
+          ? 'Select a tenant through a membership-gated session switch.'
+          : `Your active role does not grant ${READ_PERMISSION}.`,
+    };
+  }
+
   try {
     const items = await getCollection<Item>('Item');
     const rows = await items.list({
       orderBy: 'created_at DESC',
       limit: 50,
-      // Opt this SSR read into the collection read cache (issue #1499).
-      // Safe here because all writes go through SMRT, which invalidates the
-      // table's entries in this process. Running multiple replicas? Add
-      // `crossProcess: true` or drop the cache — see the README.
-      cache: { ttl: 30_000 },
     });
 
     return {
-      // Return plain serializable objects: SvelteKit encodes load data into
-      // the initial HTML with devalue, so pick the fields the page needs
-      // rather than returning class instances. Persisted rows always carry a
-      // UUID `id`; the filter narrows the field's `string | null | undefined`
-      // type instead of coercing — a '' fallback would produce colliding
-      // `{#each}` keys if an id were ever missing.
-      items: rows
-        .filter((item): item is Item & { id: string } => Boolean(item.id))
-        .map((item) => ({
-          id: item.id,
-          title: item.title,
-          status: item.status,
-        })),
+      items: rows.flatMap((item): ItemRow[] =>
+        item.id
+          ? [{ id: item.id, title: item.title, status: item.status }]
+          : [],
+      ),
+      canCreate,
       loadError: null as string | null,
+      accessMessage: null as string | null,
     };
-  } catch (e) {
-    // First run before `smrt db:setup` has created the tables: render the
-    // page with guidance instead of a 500.
+  } catch (error) {
     return {
-      items: [] as { id: string; title: string; status: string }[],
-      loadError: e instanceof Error ? e.message : 'Failed to load items',
+      items: [] as ItemRow[],
+      canCreate,
+      loadError:
+        error instanceof Error ? error.message : 'Failed to load items',
+      accessMessage: null as string | null,
     };
   }
 };
 
 export const actions: Actions = {
-  /**
-   * Demo mutation for the invalidation convention: creates an Item, then the
-   * client (`+page.svelte`) calls `invalidate('smrt:items')` so the load
-   * above re-runs and the new row appears without a full page reload.
-   *
-   * NOTE: this demo action is intentionally unauthenticated so the refresh
-   * flow works out of the box. Real mutations should be gated on
-   * `locals.user` / permissions (the generated `/api/*` routes are already
-   * fail-closed: they 401 unless authenticated or `@smrt({ api: { public } })`).
-   */
-  create: async ({ request }) => {
+  create: async ({ request, locals }) => {
+    if (!locals.user?.id || !locals.tenantId) {
+      return fail(401, { error: 'Authentication and an active tenant are required.' });
+    }
+
+    const decision = await assertOperationPermission({
+      ...getSmrtConfig('Item'),
+      action: 'create',
+      collection: 'items',
+      onDeny: 'return',
+      permissionSet: locals.permissions,
+      tenantId: locals.tenantId,
+      userId: locals.user.id,
+    });
+    if (!decision.allowed) {
+      return fail(403, { error: `Missing permission: ${CREATE_PERMISSION}` });
+    }
+
     const form = await request.formData();
     const title = String(form.get('title') ?? '').trim();
-
     if (!title) {
-      return fail(400, { title, error: 'Title is required' });
+      return fail(400, { title, error: 'Title is required.' });
     }
 
     try {
       const items = await getCollection<Item>('Item');
       await items.create({ title });
       return { created: title };
-    } catch (e) {
+    } catch (error) {
       return fail(500, {
         title,
-        error: e instanceof Error ? e.message : 'Failed to create item',
+        error: error instanceof Error ? error.message : 'Failed to create item',
       });
     }
   },

package/template/src/routes/+page.svelte

@@ -3,158 +3,191 @@
   import { invalidate } from '$app/navigation';
   import type { PageProps } from './$types';
 
-  // `data` comes from the server load in `+page.server.ts`. It is fetched
-  // during SSR, serialized into the initial HTML, and hydrated here — the
-  // first client render issues NO fetch for it. It re-runs only when
-  // something calls `invalidate('smrt:items')` (below) or on navigation.
   let { data, form }: PageProps = $props();
-
   let creating = $state(false);
 </script>
 
 <svelte:head>
-  <title>SMRT SvelteKit App</title>
+  <title>s-m-r-t SvelteKit starter</title>
 </svelte:head>
 
-<!--
-  This page renders inside the root layout's <AdminShell> `<main>`
-  (`src/routes/+layout.svelte`). Its server load + `invalidate('smrt:items')`
-  refresh flow is unchanged by the shell — the shell is chrome around the
-  page, not a replacement for its data loading. A plain wrapper element (not a
-  second <main>) keeps the HTML valid.
--->
 <div class="page">
-  <h1>Welcome to SMRT + SvelteKit</h1>
+  <header>
+    <p class="eyebrow">s-m-r-t 0.38.25</p>
+    <h1>Learn the application foundation</h1>
+    <p>
+      One object, SQLite defaults, server-loaded data, generated interfaces,
+      session-authorized tenancy, and room to grow.
+    </p>
+  </header>
 
   <section>
-    <h2>Items</h2>
+    <div class="section-heading">
+      <div>
+        <h2>Items</h2>
+        <p>The initial list comes from <code>+page.server.ts</code>.</p>
+      </div>
+    </div>
 
     {#if data.loadError}
-      <p class="error">{data.loadError}</p>
-      <p>If this is a fresh project, initialize the database with <code>smrt db:setup</code>.</p>
+      <p class="notice notice--error">{data.loadError}</p>
+      <p>Run <code>pnpm db:migrate</code> after changing object fields.</p>
+    {:else if data.accessMessage}
+      <p class="notice">{data.accessMessage}</p>
     {:else if data.items.length === 0}
-      <p>No items yet. Create your first item below!</p>
+      <p class="notice">No items yet.</p>
     {:else}
-      <ul>
+      <ul class="items">
         {#each data.items as item (item.id)}
           <li>
             <strong>{item.title}</strong>
-            <span class="status">{item.status}</span>
+            <span>{item.status}</span>
           </li>
         {/each}
       </ul>
     {/if}
 
-    <!--
-      Post-mutation refresh convention: submit the mutation (a form action
-      here, but a fetch to a generated /api route works the same way), then
-      call `invalidate('smrt:items')`. Every load that declared
-      `depends('smrt:items')` re-runs and the list updates in place.
-      Without JavaScript this form still works — SvelteKit falls back to a
-      full-page POST + re-render.
-    -->
-    <form
-      method="POST"
-      action="?/create"
-      use:enhance={() => {
-        creating = true;
-        return async ({ result, update }) => {
-          try {
-            // Apply the action result (sets `form`, resets the input) but
-            // skip SvelteKit's default invalidateAll() — we re-run only the
-            // loads that depend on this collection.
-            await update({ invalidateAll: false });
-            if (result.type === 'success') {
-              await invalidate('smrt:items');
+    {#if data.canCreate}
+      <form
+        method="POST"
+        action="?/create"
+        use:enhance={() => {
+          creating = true;
+          return async ({ result, update }) => {
+            try {
+              await update({ invalidateAll: false });
+              if (result.type === 'success') {
+                await invalidate('smrt:items');
+              }
+            } finally {
+              creating = false;
             }
-          } finally {
-            // Always re-enable the form, even if update()/invalidate()
-            // throws (network error, aborted navigation, …).
-            creating = false;
-          }
-        };
-      }}
-    >
-      <input
-        name="title"
-        placeholder="New item title"
-        aria-label="New item title"
-        required
-      />
-      <button type="submit" disabled={creating}>
-        {creating ? 'Creating…' : 'Create item'}
-      </button>
-    </form>
+          };
+        }}
+      >
+        <label for="title">New item</label>
+        <div class="form-row">
+          <input id="title" name="title" placeholder="Write a title" required />
+          <button type="submit" disabled={creating}>
+            {creating ? 'Creating…' : 'Create item'}
+          </button>
+        </div>
+      </form>
+    {/if}
 
     {#if form?.error}
-      <p class="error">{form.error}</p>
+      <p class="notice notice--error">{form.error}</p>
     {/if}
   </section>
 
   <section>
-    <h2>Getting Started</h2>
-    <ul>
-      <li>Edit <code>src/lib/objects/Item.ts</code> to customize your SMRT object</li>
-      <li>Load data in <code>+page.server.ts</code> files — see this page's load for the SSR + <code>depends</code>/<code>invalidate</code> pattern</li>
-      <li>Run <code>smrt objects</code> to see registered objects</li>
-      <li>Run <code>smrt generate-routes</code> to regenerate API routes</li>
-      <li>API routes are auto-generated in <code>src/routes/api/</code></li>
-    </ul>
+    <h2>Where to extend</h2>
+    <ol>
+      <li>Edit <code>src/lib/objects/Item.ts</code>.</li>
+      <li>Run <code>pnpm db:migrate</code>.</li>
+      <li>Add pages that query collections in <code>+page.server.ts</code>.</li>
+      <li>Add membership-gated login and tenant-switch actions for your app.</li>
+    </ol>
   </section>
 </div>
 
 <style>
   .page {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem;
-    font-family: system-ui, -apple-system, sans-serif;
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    width: min(100%, 56rem);
+    margin-inline: auto;
+    padding: var(--smrt-spacing-8);
+  }
+
+  header,
+  section,
+  .section-heading,
+  form {
+    display: grid;
+    gap: var(--smrt-spacing-3);
   }
 
-  h1 {
-    color: #667eea;
+  header p,
+  h1,
+  h2,
+  section p {
+    margin: 0;
+  }
+
+  .eyebrow {
+    color: var(--smrt-color-primary);
+    font: var(--smrt-typography-label-large);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
 
   section {
-    margin: 2rem 0;
-    padding: 1rem;
-    background: #f5f5f5;
-    border-radius: var(--smrt-radius-md, 8px);
+    padding: var(--smrt-spacing-6);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+    background: var(--smrt-color-surface);
   }
 
-  .error {
-    color: #c33;
+  .notice {
+    padding: var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
   }
 
-  .status {
-    font-size: 0.8em;
-    background: #e0e0e0;
-    padding: 2px 8px;
-    border-radius: var(--smrt-radius-sm, 4px);
-    margin-left: 8px;
+  .notice--error {
+    color: var(--smrt-color-error);
   }
 
-  form {
+  .items {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .items li {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+    padding-block: var(--smrt-spacing-2);
+    border-block-end: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .items span {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  label {
+    font-weight: var(--smrt-typography-weight-semibold);
+  }
+
+  .form-row {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  input,
+  button {
+    min-height: 2.75rem;
+    padding-inline: var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    font: inherit;
   }
 
   input {
     flex: 1;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: 1em;
+    border: 1px solid var(--smrt-color-outline);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   button {
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: var(--smrt-radius-sm, 4px);
-    background: #667eea;
-    color: white;
-    font-size: 1em;
+    border: 0;
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     cursor: pointer;
   }
 
@@ -164,18 +197,17 @@
   }
 
   code {
-    background: #e0e0e0;
-    padding: 2px 6px;
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: 0.9em;
+    font-family: var(--smrt-typography-code-font-family, monospace);
   }
 
-  ul {
-    list-style: disc;
-    padding-left: 1.5rem;
-  }
+  @media (max-width: 42rem) {
+    .page {
+      padding: var(--smrt-spacing-4);
+    }
 
-  li {
-    margin: 0.5rem 0;
+    .form-row {
+      align-items: stretch;
+      flex-direction: column;
+    }
   }
 </style>

package/template/src/routes/settings/+page.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <svelte:head>
-  <title>Settings · SMRT App</title>
+  <title>Settings · s-m-r-t app</title>
 </svelte:head>
 
 <section class="settings">

package/template/vite.config.ts

@@ -18,10 +18,24 @@ export default defineConfig({
   },
   plugins: [
     sveltekit(),
+    // Only packages whose object manifests this app consumes belong here.
+    // Keeping the list explicit avoids treating tooling/UI packages as domain
+    // model providers and makes generated runtime registration deterministic.
+    smrtConsumer({
+      packages: [
+        '@happyvertical/smrt-profiles',
+        '@happyvertical/smrt-tenancy',
+        '@happyvertical/smrt-users',
+      ],
+      generateTypes: true,
+      typesDir: 'src/lib/types/smrt-generated',
+      svelteKit: true,
+    }),
     smrtPlugin({
       include: ['src/lib/objects/**/*.ts'],
       exclude: ['**/*.test.ts', '**/*.spec.ts'],
       generateTypes: true,
+      typeDeclarationsPath: 'src/lib/types/smrt-generated',
       svelteKit: {
         enabled: true,
         routesDir: 'src/routes/api',
@@ -30,9 +44,5 @@ export default defineConfig({
         configFileName: 'smrt.ts',
       },
     }),
-    // Required alongside smrtPlugin(): this project depends on external SMRT
-    // packages (@happyvertical/smrt-users, smrt-tenancy, …), and the consumer
-    // plugin emits `.smrt/register.js` so their classes load for CLI/runtime.
-    smrtConsumer(),
   ],
 });

package/LICENSE

@@ -1,7 +0,0 @@
-Copyright <2025> <Happy Vertical Corporation>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.