@happyvertical/smrt-template-sveltekit 0.56.0 → 0.56.2

package/mcp-apps-template/package.dependencies.json

@@ -1,4 +1,4 @@
 {
-  "@happyvertical/smrt-app-mcp": "^0.56.0",
-  "@happyvertical/smrt-mcp-openai": "^0.56.0"
+  "@happyvertical/smrt-app-mcp": "^0.56.2",
+  "@happyvertical/smrt-mcp-openai": "^0.56.2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-template-sveltekit",
-  "version": "0.56.0",
+  "version": "0.56.2",
   "description": "Minimal SvelteKit project template with s-m-r-t framework integration",
   "type": "module",
   "main": "index.js",
@@ -32,26 +32,26 @@
     "directory": "packages/template-sveltekit"
   },
   "peerDependencies": {
-    "@happyvertical/smrt-core": "0.56.0"
+    "@happyvertical/smrt-core": "0.56.2"
   },
   "devDependencies": {
-    "@happyvertical/smrt-app-cli": "0.56.0",
-    "@happyvertical/smrt-app-mcp": "0.56.0",
-    "@happyvertical/smrt-app-runtime": "0.56.0",
-    "@happyvertical/smrt-assets": "0.56.0",
-    "@happyvertical/smrt-chat": "0.56.0",
-    "@happyvertical/smrt-cli": "0.56.0",
-    "@happyvertical/smrt-config": "0.56.0",
-    "@happyvertical/smrt-jobs": "0.56.0",
-    "@happyvertical/smrt-mcp-openai": "0.56.0",
-    "@happyvertical/smrt-playbooks": "0.56.0",
-    "@happyvertical/smrt-profiles": "0.56.0",
-    "@happyvertical/smrt-scanner": "0.56.0",
-    "@happyvertical/smrt-svelte": "0.56.0",
-    "@happyvertical/smrt-tenancy": "0.56.0",
-    "@happyvertical/smrt-ui": "0.56.0",
-    "@happyvertical/smrt-users": "0.56.0",
-    "@happyvertical/smrt-web": "0.56.0",
+    "@happyvertical/smrt-app-cli": "0.56.2",
+    "@happyvertical/smrt-app-mcp": "0.56.2",
+    "@happyvertical/smrt-app-runtime": "0.56.2",
+    "@happyvertical/smrt-assets": "0.56.2",
+    "@happyvertical/smrt-chat": "0.56.2",
+    "@happyvertical/smrt-cli": "0.56.2",
+    "@happyvertical/smrt-config": "0.56.2",
+    "@happyvertical/smrt-jobs": "0.56.2",
+    "@happyvertical/smrt-mcp-openai": "0.56.2",
+    "@happyvertical/smrt-playbooks": "0.56.2",
+    "@happyvertical/smrt-profiles": "0.56.2",
+    "@happyvertical/smrt-scanner": "0.56.2",
+    "@happyvertical/smrt-svelte": "0.56.2",
+    "@happyvertical/smrt-tenancy": "0.56.2",
+    "@happyvertical/smrt-ui": "0.56.2",
+    "@happyvertical/smrt-users": "0.56.2",
+    "@happyvertical/smrt-web": "0.56.2",
     "@happyvertical/sql": "^0.89.12",
     "@modelcontextprotocol/client": "2.0.0",
     "@modelcontextprotocol/server": "^2.0.0",
@@ -65,7 +65,7 @@
     "typescript": "6.0.3",
     "vite": "8.1.4",
     "vitest": "4.1.10",
-    "@happyvertical/smrt-reports": "0.56.0"
+    "@happyvertical/smrt-reports": "0.56.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/template/package.json

@@ -39,21 +39,21 @@
     "svelte-check": "^4.7.6",
     "typescript": "6.0.3",
     "vite": "8.3.0",
-    "@happyvertical/smrt-cli": "^0.56.0"
+    "@happyvertical/smrt-cli": "^0.56.2"
   },
   "dependencies": {
-    "@happyvertical/smrt-app-runtime": "^0.56.0",
-    "@happyvertical/smrt-config": "^0.56.0",
-    "@happyvertical/smrt-core": "^0.56.0",
-    "@happyvertical/smrt-jobs": "^0.56.0",
-    "@happyvertical/smrt-profiles": "^0.56.0",
-    "@happyvertical/smrt-svelte": "^0.56.0",
-    "@happyvertical/smrt-tenancy": "^0.56.0",
-    "@happyvertical/smrt-ui": "^0.56.0",
-    "@happyvertical/smrt-users": "^0.56.0",
-    "@happyvertical/smrt-web": "^0.56.0",
+    "@happyvertical/smrt-app-runtime": "^0.56.2",
+    "@happyvertical/smrt-config": "^0.56.2",
+    "@happyvertical/smrt-core": "^0.56.2",
+    "@happyvertical/smrt-jobs": "^0.56.2",
+    "@happyvertical/smrt-profiles": "^0.56.2",
+    "@happyvertical/smrt-svelte": "^0.56.2",
+    "@happyvertical/smrt-tenancy": "^0.56.2",
+    "@happyvertical/smrt-ui": "^0.56.2",
+    "@happyvertical/smrt-users": "^0.56.2",
+    "@happyvertical/smrt-web": "^0.56.2",
     "@happyvertical/sql": "^0.89.12",
     "@modelcontextprotocol/server": "^2.0.0",
-    "@happyvertical/smrt-reports": "^0.56.0"
+    "@happyvertical/smrt-reports": "^0.56.2"
   }
 }

package/template/src/lib/components/MaterializedReportDrilldown.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { MaterializedReportDrilldownPresentation } from '@happyvertical/smrt-reports';
+  import { formatWidgetValue } from '@happyvertical/smrt-ui/charts/format';
+  import { DataTable, type DataTableColumn } from '@happyvertical/smrt-ui/data';
+  import { Alert } from '@happyvertical/smrt-ui/feedback';
+  import { Badge, Card } from '@happyvertical/smrt-ui/ui';
+  import { parseMaterializedReportDrilldown } from '$lib/materialized-report-drilldown';
+
+  interface ContributorRow {
+    id: string;
+    source: string;
+    identity: string;
+    date: string;
+    party: string;
+    value: string;
+    taxable: string;
+    tax: string;
+  }
+
+  interface Props {
+    details: unknown;
+    locale?: string;
+  }
+
+  let { details, locale = 'en' }: Props = $props();
+  let presentation = $derived(parseMaterializedReportDrilldown(details));
+
+  const columns: DataTableColumn<ContributorRow>[] = [
+    { id: 'source', label: 'Source', accessor: 'source', responsive: { keepVisible: true } },
+    { id: 'identity', label: 'Document or source', accessor: 'identity', responsive: { keepVisible: true } },
+    { id: 'date', label: 'Date', accessor: 'date' },
+    { id: 'party', label: 'Party', accessor: 'party' },
+    { id: 'value', label: 'Selected measure', accessor: 'value', align: 'right' },
+    { id: 'taxable', label: 'Taxable', accessor: 'taxable', align: 'right' },
+    { id: 'tax', label: 'Tax', accessor: 'tax', align: 'right' },
+  ];
+
+  function currency(value: number | null | undefined, code: string): string {
+    return value === null || value === undefined
+      ? '–'
+      : formatWidgetValue(value, { format: 'money', currency: code, locale });
+  }
+
+  function calendarDate(value: string | null | undefined): string {
+    return value?.slice(0, 10) || '–';
+  }
+
+  function rows(value: MaterializedReportDrilldownPresentation): ContributorRow[] {
+    return value.contributors.map((contributor) => ({
+      id: contributor.id,
+      source: contributor.source,
+      identity: contributor.identity,
+      date: calendarDate(contributor.date),
+      party: contributor.party || '–',
+      value: currency(contributor.values.valueMinor, value.currency),
+      taxable: currency(contributor.values.taxableMinor, value.currency),
+      tax: currency(contributor.values.taxMinor, value.currency),
+    }));
+  }
+</script>
+
+<section class="drilldown" aria-label="Report drilldown" data-smrt-component="MaterializedReportDrilldown">
+  {#if presentation}
+    <Card>
+      <div class="heading">
+        <div>
+          <h2>Report drilldown</h2>
+          <p>Selected measure: <strong>{presentation.selectedMeasure.label}</strong></p>
+        </div>
+        <Badge variant={presentation.complete ? 'success' : 'warning'}>
+          {presentation.complete ? 'Complete' : 'Needs attention'}
+        </Badge>
+      </div>
+
+      {#each presentation.warnings as warning (warning.code)}
+        <Alert variant={warning.kind === 'drift' ? 'warning' : 'info'} title={warning.kind === 'drift' ? 'Source data changed' : 'Detail is incomplete'}>
+          {warning.message}
+        </Alert>
+      {/each}
+
+      {#if !presentation.complete && presentation.warnings.length === 0}
+        <Alert variant="warning" title="Detail is incomplete">
+          This report cannot establish the selected amount exactly.
+        </Alert>
+      {/if}
+
+      <DataTable
+        data={rows(presentation)}
+        {columns}
+        rowKey="id"
+        caption="Report contributors"
+        responsiveMode="hide-columns"
+      />
+    </Card>
+  {:else}
+    <Alert variant="error" title="Report drilldown unavailable">
+      This report returned a detail that this application cannot display safely.
+    </Alert>
+  {/if}
+</section>
+
+<style>
+  @layer smrt.theme {
+    .drilldown {
+      width: min(100%, 72rem);
+      margin-inline: auto;
+    }
+
+    .heading {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      gap: var(--smrt-spacing-4);
+      margin-bottom: var(--smrt-spacing-5);
+    }
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    h2 {
+      font: var(--smrt-typography-title-medium-font);
+    }
+
+    p {
+      margin-top: var(--smrt-spacing-1);
+      color: var(--smrt-color-on-surface-variant);
+    }
+
+    :global(.smrt-alert__root) {
+      margin-block: var(--smrt-spacing-3);
+    }
+  }
+</style>

package/template/src/lib/materialized-report-drilldown.ts

@@ -0,0 +1,55 @@
+import type { MaterializedReportDrilldownPresentation } from '@happyvertical/smrt-reports';
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+
+const nonemptyText = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0;
+
+const optionalText = (value: unknown): value is string | null | undefined =>
+  value === undefined || value === null || typeof value === 'string';
+
+const minor = (value: unknown): value is number | null | undefined =>
+  value === undefined || value === null || Number.isSafeInteger(value);
+
+/** Validate the versioned host payload before it reaches the generic UI. */
+export function parseMaterializedReportDrilldown(
+  value: unknown,
+): MaterializedReportDrilldownPresentation | undefined {
+  if (!isRecord(value) || value.version !== 1 || !isRecord(value.selectedMeasure))
+    return undefined;
+  if (
+    !nonemptyText(value.selectedMeasure.id) ||
+    !nonemptyText(value.selectedMeasure.label) ||
+    !nonemptyText(value.currency) ||
+    !Array.isArray(value.contributors) ||
+    !Array.isArray(value.warnings) ||
+    typeof value.complete !== 'boolean'
+  )
+    return undefined;
+  if (!/^[A-Za-z]{3}$/.test(value.currency)) return undefined;
+  for (const contributor of value.contributors) {
+    if (!isRecord(contributor) || !isRecord(contributor.values)) return undefined;
+    if (
+      !nonemptyText(contributor.id) ||
+      !nonemptyText(contributor.source) ||
+      !nonemptyText(contributor.identity) ||
+      !optionalText(contributor.date) ||
+      !optionalText(contributor.party) ||
+      !minor(contributor.values.valueMinor) ||
+      !minor(contributor.values.taxableMinor) ||
+      !minor(contributor.values.taxMinor)
+    )
+      return undefined;
+  }
+  for (const warning of value.warnings) {
+    if (
+      !isRecord(warning) ||
+      !nonemptyText(warning.code) ||
+      !nonemptyText(warning.message) ||
+      (warning.kind !== 'incomplete' && warning.kind !== 'drift')
+    )
+      return undefined;
+  }
+  return value as unknown as MaterializedReportDrilldownPresentation;
+}

package/template/src/lib/server/materialized-reports.ts

@@ -0,0 +1,12 @@
+import type { MaterializedReportHost } from '@happyvertical/smrt-reports';
+
+/**
+ * Server-only materialized-report registrations for this application.
+ *
+ * Add fixed, application-owned hosts here. A commerce app uses
+ * `createTaxSummaryMaterializedReportHost(async () =>
+ * (await runtime.getCollection('TaxSummaryReport')).db)`.
+ * Browser requests select only one of
+ * these ids; they never supply a tenant, report constructor, or database.
+ */
+export const materializedReportHosts: readonly MaterializedReportHost[] = [];

package/template/src/routes/reports/materialized/[id]/+page.server.ts

@@ -0,0 +1,46 @@
+import { error } from '@sveltejs/kit';
+import { assertMaterializedReportRead, findMaterializedReportHost } from '@happyvertical/smrt-reports';
+import { materializedReportHosts } from '$lib/server/materialized-reports';
+import type { PageServerLoad } from './$types';
+
+function pageValue(value: string | null, fallback: number, maximum: number): number {
+  if (value === null) return fallback;
+  if (!/^\d+$/.test(value)) error(400, 'Invalid report page');
+  const parsed = Number(value);
+  if (!Number.isSafeInteger(parsed) || parsed > maximum) error(400, 'Invalid report page');
+  return parsed;
+}
+
+export const load: PageServerLoad = async ({ locals, params, url }) => {
+  if (!locals.user?.id || !locals.tenantId) error(401, 'Sign in required');
+  const host = findMaterializedReportHost(materializedReportHosts, params.id);
+  if (!host) error(404, 'Report not found');
+  const context = {
+    userId: locals.user.id,
+    tenantId: locals.tenantId,
+    permissions: locals.permissions ?? [],
+  };
+  try { assertMaterializedReportRead(host, context); } catch { error(403, 'Report unavailable'); }
+  const descriptor = await host.descriptor(context);
+  const offset = pageValue(url.searchParams.get('offset'), 0, 100_000);
+  const limit = pageValue(url.searchParams.get('limit'), 50, 100);
+  if (limit < 1) error(400, 'Invalid report page');
+  const result = await host.query(context, {
+    version: 1, requestId: `materialized:${host.id}`, mode: 'rows',
+    projection: [descriptor.identityField, ...descriptor.dataTable.columns.map((column) => column.id)],
+    page: { kind: 'offset', offset, limit },
+  });
+  if (result.page?.kind !== 'offset' || result.total.kind === 'unavailable')
+    error(500, 'Report page unavailable');
+  return {
+    hostId: host.id,
+    drilldownColumnIds: host.drilldownColumnIds,
+    page: {
+      descriptor,
+      rows: result.rows,
+      totalRows: result.total.value,
+      offset: result.page.offset,
+      limit: result.page.limit,
+    },
+  };
+};

package/template/src/routes/reports/materialized/[id]/+page.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import { MaterializedReportTable } from '@happyvertical/smrt-reports/svelte';
+  import MaterializedReportDrilldown from '$lib/components/MaterializedReportDrilldown.svelte';
+  import { Alert } from '@happyvertical/smrt-ui/feedback';
+  import type { PageProps } from './$types';
+
+  let { data }: PageProps = $props();
+  let details = $state<unknown>(undefined);
+  let drilldownError = $state<string | null>(null);
+  let loading = $state(false);
+  let hydrated = $state(false);
+  let requestSequence = 0;
+
+  onMount(() => {
+    hydrated = true;
+  });
+
+  async function drilldown(cell: { id: string; columnId: string }): Promise<void> {
+    const request = ++requestSequence;
+    loading = true;
+    drilldownError = null;
+    details = undefined;
+    try {
+      const response = await fetch(`/reports/materialized/${encodeURIComponent(data.hostId)}/drilldown`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(cell),
+      });
+      if (!response.ok) throw new Error('Report drilldown unavailable');
+      const responseDetails = await response.json();
+      if (request !== requestSequence) return;
+      details = responseDetails;
+    } catch {
+      if (request !== requestSequence) return;
+      drilldownError = 'Report drilldown unavailable';
+    } finally {
+      if (request === requestSequence) loading = false;
+    }
+  }
+
+  async function changePage(page: number): Promise<void> {
+    if (!Number.isSafeInteger(page) || page < 1) return;
+    requestSequence += 1;
+    details = undefined;
+    drilldownError = null;
+    loading = false;
+    const offset = (page - 1) * data.page.limit;
+    if (!Number.isSafeInteger(offset)) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set('offset', String(offset));
+    url.searchParams.set('limit', String(data.page.limit));
+    await goto(`${url.pathname}?${url.searchParams.toString()}`, {
+      keepFocus: true,
+      noScroll: true,
+    });
+  }
+</script>
+
+<svelte:head><title>{data.page.descriptor.reportClassName}</title></svelte:head>
+
+<main class="page" data-materialized-report-hydrated={hydrated ? 'true' : 'false'}>
+  <MaterializedReportTable
+    page={{
+      ...data.page,
+      drilldownColumnIds: data.drilldownColumnIds,
+    }}
+    onDrilldown={drilldown}
+    onPageChange={changePage}
+    caption={data.page.descriptor.reportClassName}
+  />
+
+  {#if loading}
+    <Alert variant="info" title="Loading report details">
+      Loading the contributors for the selected amount.
+    </Alert>
+  {:else if drilldownError}
+    <Alert variant="error" title="Report drilldown unavailable">
+      {drilldownError}
+    </Alert>
+  {:else if details}
+    <MaterializedReportDrilldown {details} />
+  {/if}
+</main>
+
+<style>
+  @layer smrt.theme {
+    .page {
+      display: grid;
+      gap: var(--smrt-spacing-6);
+      width: min(100%, 76rem);
+      margin-inline: auto;
+      padding: var(--smrt-spacing-6) var(--smrt-spacing-4);
+    }
+  }
+</style>

package/template/src/routes/reports/materialized/[id]/drilldown/+server.ts

@@ -0,0 +1,24 @@
+import { json } from '@sveltejs/kit';
+import { assertMaterializedReportRead, findMaterializedReportHost } from '@happyvertical/smrt-reports';
+import { materializedReportHosts } from '$lib/server/materialized-reports';
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async ({ request, locals, params }) => {
+  if (!locals.user?.id || !locals.tenantId)
+    return json({ error: 'Sign in required' }, { status: 401 });
+  const host = findMaterializedReportHost(materializedReportHosts, params.id);
+  if (!host) return json({ error: 'Report not found' }, { status: 404 });
+  const context = { userId: locals.user.id, tenantId: locals.tenantId, permissions: locals.permissions ?? [] };
+  try { assertMaterializedReportRead(host, context); } catch { return json({ error: 'Report unavailable' }, { status: 403 }); }
+  let body: unknown;
+  try { body = await request.json(); } catch { return json({ error: 'Invalid request' }, { status: 400 }); }
+  if (!body || typeof body !== 'object') return json({ error: 'Invalid request' }, { status: 400 });
+  const { id, columnId } = body as Record<string, unknown>;
+  if (typeof id !== 'string' || !id || typeof columnId !== 'string' || !columnId)
+    return json({ error: 'Invalid request' }, { status: 400 });
+  try {
+    return json(await host.drilldown(context, { id, columnId }));
+  } catch {
+    return json({ error: 'Report drilldown unavailable' }, { status: 404 });
+  }
+};

package/template.config.js

@@ -19,23 +19,23 @@ export default {
 
   // Dependencies to add to generated project
   dependencies: {
-    '@happyvertical/smrt-app-runtime': '^0.56.0',
-    '@happyvertical/smrt-config': '^0.56.0',
-    '@happyvertical/smrt-core': '^0.56.0',
-    '@happyvertical/smrt-jobs': '^0.56.0',
-    '@happyvertical/smrt-profiles': '^0.56.0',
-    '@happyvertical/smrt-reports': '^0.56.0',
-    '@happyvertical/smrt-svelte': '^0.56.0',
-    '@happyvertical/smrt-tenancy': '^0.56.0',
-    '@happyvertical/smrt-ui': '^0.56.0',
-    '@happyvertical/smrt-users': '^0.56.0',
-    '@happyvertical/smrt-web': '^0.56.0',
+    '@happyvertical/smrt-app-runtime': '^0.56.2',
+    '@happyvertical/smrt-config': '^0.56.2',
+    '@happyvertical/smrt-core': '^0.56.2',
+    '@happyvertical/smrt-jobs': '^0.56.2',
+    '@happyvertical/smrt-profiles': '^0.56.2',
+    '@happyvertical/smrt-reports': '^0.56.2',
+    '@happyvertical/smrt-svelte': '^0.56.2',
+    '@happyvertical/smrt-tenancy': '^0.56.2',
+    '@happyvertical/smrt-ui': '^0.56.2',
+    '@happyvertical/smrt-users': '^0.56.2',
+    '@happyvertical/smrt-web': '^0.56.2',
     '@happyvertical/sql': '^0.89.12',
     '@modelcontextprotocol/server': '^2.0.0',
   },
 
   devDependencies: {
-    '@happyvertical/smrt-cli': '^0.56.0',
+    '@happyvertical/smrt-cli': '^0.56.2',
     '@sveltejs/adapter-node': '^5.5.7',
     '@sveltejs/kit': '2.70.3',
     '@sveltejs/vite-plugin-svelte': '^7.3.0',