@happyvertical/smrt-planner 0.0.0-stage → 0.0.1

package/dist/components/VariantGridForm.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+import { TagsInput } from '@happyvertical/smrt-ui/forms';
+import { useDataSource } from '../data/context.js';
+import type { ActiveForm } from '../forms/active.js';
+import { catalogModels } from '../forms/shared.js';
+import {
+  blankCell,
+  blankGrid,
+  cleanValues,
+  type ExistingGrid,
+  type GridCombo,
+  type GridState,
+  gridCellInputs,
+  gridCombos,
+  gridProductInputs,
+  loadGrid,
+  planGridSave,
+  skuCode,
+} from '../forms/variantGrid.js';
+import type { VariantGridForm } from '../recipes/types.js';
+import FieldInput from './FieldInput.svelte';
+
+interface VariantGridFormProps {
+  active: ActiveForm<VariantGridForm>;
+  /** The product to edit; omitted when creating. */
+  id?: string;
+  onsaved: () => void;
+  oncancel: () => void;
+}
+
+let { active, id, onsaved, oncancel }: VariantGridFormProps = $props();
+
+const source = useDataSource();
+const productInputs = $derived(gridProductInputs(active, catalogModels));
+const cellInputs = $derived(gridCellInputs(active, catalogModels));
+
+// svelte-ignore state_referenced_locally
+let grid = $state<GridState>(blankGrid(active, catalogModels));
+let existing = $state<ExistingGrid | undefined>(undefined);
+// svelte-ignore state_referenced_locally
+let loaded = $state(id === undefined);
+let error = $state('');
+
+async function load(productId: string) {
+  const found = await loadGrid(source, active, catalogModels, productId);
+  if (found) {
+    grid = found.state;
+    existing = found.existing;
+  }
+  loaded = true;
+}
+// svelte-ignore state_referenced_locally
+if (id !== undefined) void load(id);
+
+const combos = $derived(gridCombos(active.form, grid));
+/** Axes with values: a matrix needs exactly two. */
+const usedAxes = $derived(
+  active.form.axes.filter(
+    (axis) => cleanValues(grid.axes[axis.name] ?? []).length,
+  ),
+);
+const matrix = $derived(usedAxes.length === 2);
+const rowAxis = $derived(usedAxes[0]);
+const colAxis = $derived(usedAxes[1]);
+const rowValues = $derived(cleanValues(grid.axes[rowAxis?.name ?? ''] ?? []));
+const colValues = $derived(cleanValues(grid.axes[colAxis?.name ?? ''] ?? []));
+const comboByKey = $derived(new Map(combos.map((c) => [c.key, c])));
+const productName = $derived(grid.values.name);
+
+const keyOf = (...values: string[]) => JSON.stringify(values);
+const labelOf = (combo: GridCombo) => combo.values.join(' ');
+
+function cellValue(key: string, fieldId: string): unknown {
+  return grid.cells[key]?.[fieldId];
+}
+
+function setCell(key: string, fieldId: string, value: number | null) {
+  grid.cells[key] = {
+    ...blankCell(active, catalogModels),
+    ...(grid.cells[key] ?? {}),
+    [fieldId]: value,
+  };
+}
+
+function numberFrom(raw: string): number | null {
+  if (raw.trim() === '') return null;
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+async function save(event: SubmitEvent) {
+  event.preventDefault();
+  error = '';
+  if (combos.length === 0) {
+    error = 'Add at least one value to sell, such as a size or a color.';
+    return;
+  }
+  try {
+    await source.apply(planGridSave(active, catalogModels, grid, existing));
+    onsaved();
+  } catch (cause) {
+    error = cause instanceof Error ? cause.message : 'Could not save.';
+  }
+}
+</script>
+
+{#snippet cellInput(combo: GridCombo)}
+  {#each cellInputs as { field } (field.id)}
+    <input
+      type="number"
+      min="0"
+      step="1"
+      aria-label={`${field.label}, ${labelOf(combo)}`}
+      onfocus={(event) => event.currentTarget.select()}
+      value={cellValue(combo.key, field.id) ?? ''}
+      oninput={(event) =>
+        setCell(combo.key, field.id, numberFrom(event.currentTarget.value))}
+    />
+  {:else}
+    <span class="sku">{skuCode(productName, combo)}</span>
+  {/each}
+{/snippet}
+
+{#if !loaded}
+  <p>Loading...</p>
+{:else}
+  <form onsubmit={save}>
+    <h3>{id === undefined ? `New ${active.form.label.toLowerCase()}` : `Edit ${active.form.label.toLowerCase()}`}</h3>
+    {#each productInputs as { field, catalogField } (field.id)}
+      <FieldInput
+        field={{ ...catalogField, required: field.required ?? catalogField.required }}
+        label={field.label}
+        help={field.help}
+        idPrefix={active.form.id}
+        value={grid.values[field.id]}
+        onchange={(value) => (grid.values[field.id] = value)}
+      />
+    {/each}
+
+    {#each active.form.axes as axis (axis.name)}
+      <TagsInput
+        label={axis.label}
+        placeholder={`Add a ${axis.label.replace(/s$/i, '').toLowerCase()}`}
+        values={grid.axes[axis.name] ?? []}
+        onvalueschange={(values) => (grid.axes[axis.name] = cleanValues(values))}
+      />
+    {/each}
+
+    <div class="grid" role="group" aria-labelledby={`${active.form.id}-grid`}>
+      <h4 id={`${active.form.id}-grid`}>
+        {usedAxes.map((a, i) => (i === 0 ? a.label : a.label.toLowerCase())).join(' by ') || 'Combinations'}
+        <small>
+          {combos.length} {combos.length === 1 ? 'combination' : 'combinations'}, one
+          SKU each{cellInputs.length ? `, with ${cellInputs.map((c) => c.field.label.toLowerCase()).join(' and ')} for each` : ''}
+        </small>
+      </h4>
+      {#if combos.length === 0}
+        <p class="meta">Add sizes or colors above to build the grid.</p>
+      {:else if matrix && rowAxis && colAxis}
+        <div class="scroll">
+          <table>
+            <caption class="visually-hidden">
+              {rowAxis.label} by {colAxis.label.toLowerCase()}
+            </caption>
+            <thead>
+              <tr>
+                <td><span class="visually-hidden">{rowAxis.label}</span></td>
+                {#each colValues as color (color)}
+                  <th scope="col">{color}</th>
+                {/each}
+              </tr>
+            </thead>
+            <tbody>
+              {#each rowValues as size (size)}
+                <tr>
+                  <th scope="row">{size}</th>
+                  {#each colValues as color (color)}
+                    {@const combo = comboByKey.get(keyOf(size, color))}
+                    <td>{#if combo}{@render cellInput(combo)}{/if}</td>
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else}
+        <div class="scroll">
+          <table>
+            <caption class="visually-hidden">Combinations</caption>
+            <thead>
+              <tr>
+                {#each usedAxes as axis (axis.name)}
+                  <th scope="col">{axis.label}</th>
+                {/each}
+                <th scope="col">{cellInputs.length ? cellInputs.map((c) => c.field.label).join(', ') : 'SKU'}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each combos as combo (combo.key)}
+                <tr>
+                  {#each combo.values as value, i (i)}
+                    <th scope="row">{value}</th>
+                  {/each}
+                  <td>{@render cellInput(combo)}</td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+
+    {#if error}<p class="error" role="alert">{error}</p>{/if}
+    <div class="actions">
+      <button type="submit">Save</button>
+      <button type="button" class="secondary" onclick={oncancel}>Cancel</button>
+    </div>
+  </form>
+{/if}
+
+<style>
+  form {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  small,
+  .meta,
+  .sku {
+    color: var(--smrt-color-on-surface-variant);
+    font-weight: 400;
+  }
+
+  .grid {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .scroll {
+    overflow-x: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    text-align: left;
+  }
+
+  td input {
+    width: 6rem;
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+  }
+
+  .sku {
+    font-size: 0.85rem;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .error {
+    color: var(--smrt-color-error);
+  }
+
+  button {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: 0;
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  button.secondary {
+    border: 1px solid var(--smrt-color-outline);
+    background: transparent;
+    color: var(--smrt-color-on-surface);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

package/dist/components/VariantGridForm.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ActiveForm } from '../forms/active.ts';
+import type { VariantGridForm } from '../recipes/types.ts';
+interface VariantGridFormProps {
+    active: ActiveForm<VariantGridForm>;
+    /** The product to edit; omitted when creating. */
+    id?: string;
+    onsaved: () => void;
+    oncancel: () => void;
+}
+declare const VariantGridForm: import("svelte").Component<VariantGridFormProps, {}, "">;
+type VariantGridForm = ReturnType<typeof VariantGridForm>;
+export default VariantGridForm;

package/dist/components/VoiceTyping.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+import { formatSize } from '../assistant/models.js';
+import type { VoiceSession } from '../assistant/voice.svelte.js';
+
+interface VoiceTypingProps {
+  voice: VoiceSession;
+}
+
+let { voice }: VoiceTypingProps = $props();
+
+const megabytes = $derived(Math.round(voice.size / 1_000_000));
+const percent = $derived(Math.round(voice.progress * 100));
+const visible = $derived(
+  voice.status === 'offer' ||
+    voice.status === 'downloading' ||
+    voice.status === 'error',
+);
+</script>
+
+{#if visible}
+  <div class="voice" role="group" aria-label="Voice typing">
+    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-3.08A7 7 0 0 0 19 12h-2Z"
+      />
+    </svg>
+    <div class="text">
+      {#if voice.status === 'downloading'}
+        <span role="status" aria-live="polite">
+          {voice.cached ? 'Turning on voice typing' : 'Downloading speech model'}
+          {percent}%
+        </span>
+        <progress max="100" value={percent} aria-label="Speech model download"
+          >{percent}%</progress
+        >
+      {:else if voice.status === 'error'}
+        <span class="error" role="alert"
+          >Voice typing could not start: {voice.error}</span
+        >
+      {:else if voice.cached}
+        <span>
+          The speech model is already on this device. Turn on voice typing to
+          talk to the assistant?
+        </span>
+      {:else}
+        <span>
+          Your browser can't do voice typing on its own. Download a {formatSize(
+            megabytes,
+          )} speech model to talk to the assistant?
+        </span>
+      {/if}
+    </div>
+    <div class="actions">
+      {#if voice.status === 'downloading'}
+        <button type="button" onclick={() => voice.cancel()}>Cancel</button>
+      {:else}
+        <button type="button" onclick={() => void voice.enable()}>
+          {voice.status === 'error'
+            ? 'Try again'
+            : voice.cached
+              ? 'Turn on'
+              : 'Download'}
+        </button>
+        <button type="button" onclick={() => voice.dismiss()}>Not now</button>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .voice {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-4);
+    min-width: 0;
+    color: var(--smrt-color-on-surface-variant);
+    overflow-wrap: anywhere;
+  }
+
+  .icon {
+    flex: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: currentColor;
+  }
+
+  .text {
+    flex: 1 1 14rem;
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    min-width: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  progress {
+    width: 100%;
+  }
+
+  .error {
+    color: var(--smrt-color-error);
+  }
+</style>

package/dist/components/VoiceTyping.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { VoiceSession } from '../assistant/voice.svelte.ts';
+interface VoiceTypingProps {
+    voice: VoiceSession;
+}
+declare const VoiceTyping: import("svelte").Component<VoiceTypingProps, {}, "">;
+type VoiceTyping = ReturnType<typeof VoiceTyping>;
+export default VoiceTyping;

package/dist/cookbook/assemble.d.ts

@@ -0,0 +1,16 @@
+import type { OverviewOverride } from '@happyvertical/smrt-svelte/overview/server';
+import type { ShellLayout } from '@happyvertical/smrt-svelte/workspace/layout';
+import { type PlanData } from '../recipes/plan-data.ts';
+import { type ThemeSetting } from '../theme/theme.ts';
+import { type Cookbook } from './types.ts';
+/**
+ * The cookbook a plan and its layout, theme and page customisations make, in
+ * the stable order every export uses. Pure: no runes, no browser.
+ */
+export declare function assembleCookbook(plan: PlanData, extras?: {
+    layout?: ShellLayout;
+    theme?: ThemeSetting;
+    overviews?: Record<string, OverviewOverride>;
+    name?: string;
+    description?: string;
+}): Cookbook;

package/dist/cookbook/assemble.js

@@ -0,0 +1,29 @@
+import { planFields } from "../recipes/plan-data.js";
+import { compactTheme } from "../theme/theme.js";
+import { COOKBOOK_SCHEMA, COOKBOOK_VERSION } from "./types.js";
+/**
+ * The cookbook a plan and its layout, theme and page customisations make, in
+ * the stable order every export uses. Pure: no runes, no browser.
+ */
+export function assembleCookbook(plan, extras = {}) {
+    const cookbook = {
+        $schema: COOKBOOK_SCHEMA,
+        version: COOKBOOK_VERSION,
+        ...planFields(plan),
+    };
+    if (extras.name)
+        cookbook.name = extras.name;
+    if (extras.description)
+        cookbook.description = extras.description;
+    if (extras.layout)
+        cookbook.layout = extras.layout;
+    const theme = compactTheme(extras.theme);
+    if (theme)
+        cookbook.theme = theme;
+    const overviews = extras.overviews ?? {};
+    const ids = Object.keys(overviews).sort();
+    if (ids.length) {
+        cookbook.overviews = Object.fromEntries(ids.map((id) => [id, overviews[id]]));
+    }
+    return cookbook;
+}

package/dist/cookbook/file.d.ts

@@ -0,0 +1,7 @@
+import type { Cookbook } from './types.ts';
+export declare const DEFAULT_EXPORT_NAME = "my-app";
+/** `<name>.cookbook.json`, with the name reduced to a safe slug. */
+export declare function exportFileName(name?: string): string;
+export declare function serializeCookbook(cookbook: Cookbook): string;
+/** Offer the cookbook as a `<name>.cookbook.json` download. */
+export declare function downloadCookbook(cookbook: Cookbook, name?: string): void;

package/dist/cookbook/file.js

@@ -0,0 +1,25 @@
+export const DEFAULT_EXPORT_NAME = 'my-app';
+/** `<name>.cookbook.json`, with the name reduced to a safe slug. */
+export function exportFileName(name) {
+    const slug = (name ?? '')
+        .normalize('NFD')
+        .replace(/\p{M}/gu, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+    return `${slug || DEFAULT_EXPORT_NAME}.cookbook.json`;
+}
+export function serializeCookbook(cookbook) {
+    return `${JSON.stringify(cookbook, null, 2)}\n`;
+}
+/** Offer the cookbook as a `<name>.cookbook.json` download. */
+export function downloadCookbook(cookbook, name) {
+    const url = URL.createObjectURL(new Blob([serializeCookbook(cookbook)], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = exportFileName(name);
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}

package/dist/cookbook/legacy.d.ts

@@ -0,0 +1,9 @@
+import { type Cookbook } from './types.ts';
+/** The legacy recipe and options parameters, if the query carries any. */
+export declare function hasLegacyState(search: string): boolean;
+/**
+ * Turn a legacy query into a cookbook. Lenient like the old reader: unknown
+ * recipe ids and malformed options are dropped, since a stale link should
+ * still open what it can.
+ */
+export declare function cookbookFromLegacySearch(search: string): Cookbook;

package/dist/cookbook/legacy.js

@@ -0,0 +1,87 @@
+import { recipesById } from "../recipes/index.js";
+import { knownRecipes, withRequirements } from "../recipes/resolve.js";
+import { COOKBOOK_SCHEMA, COOKBOOK_VERSION } from "./types.js";
+const VISIBILITIES = new Set(['basic', 'advanced', 'hidden']);
+const SURFACE_IDS = new Set(['api', 'mcp', 'cli']);
+function fromBase64Url(value) {
+    const padded = value.replace(/-/g, '+').replace(/_/g, '/');
+    const binary = atob(padded + '='.repeat((4 - (padded.length % 4)) % 4));
+    return new TextDecoder().decode(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
+}
+/** The legacy recipe and options parameters, if the query carries any. */
+export function hasLegacyState(search) {
+    const params = new URLSearchParams(search);
+    return params.has('r') || params.has('o');
+}
+function decodeOptions(value) {
+    const empty = { rows: [], narrowed: {} };
+    if (!value)
+        return empty;
+    let wire;
+    try {
+        wire = JSON.parse(fromBase64Url(value));
+    }
+    catch {
+        return empty;
+    }
+    if (!wire || typeof wire !== 'object')
+        return empty;
+    const rows = [];
+    for (const [objectRef, fields] of Object.entries(wire.r ?? {})) {
+        if (!fields || typeof fields !== 'object')
+            continue;
+        for (const [fieldName, entry] of Object.entries(fields)) {
+            if (!entry || typeof entry !== 'object')
+                continue;
+            const row = { objectRef, fieldName, scopeType: 'app' };
+            if (typeof entry.v === 'string' && VISIBILITIES.has(entry.v)) {
+                row.visibility = entry.v;
+            }
+            if (typeof entry.l === 'string')
+                row.label = entry.l;
+            if (typeof entry.h === 'string' || entry.h === null)
+                row.help = entry.h;
+            if (typeof entry.d === 'string' || entry.d === null) {
+                row.defaultValue = entry.d;
+            }
+            if (typeof entry.o === 'number' && Number.isFinite(entry.o)) {
+                row.displayOrder = entry.o;
+            }
+            if (typeof entry.k === 'boolean')
+                row.locked = entry.k;
+            rows.push(row);
+        }
+    }
+    const narrowed = {};
+    for (const [ref, surfaces] of Object.entries(wire.x ?? {})) {
+        if (!Array.isArray(surfaces))
+            continue;
+        const valid = surfaces.filter((s) => SURFACE_IDS.has(s));
+        if (valid.length)
+            narrowed[ref] = valid;
+    }
+    return { rows, narrowed };
+}
+/**
+ * Turn a legacy query into a cookbook. Lenient like the old reader: unknown
+ * recipe ids and malformed options are dropped, since a stale link should
+ * still open what it can.
+ */
+export function cookbookFromLegacySearch(search) {
+    const params = new URLSearchParams(search);
+    const ids = (params.get('r') ?? '').split(',').filter(Boolean);
+    const recipes = withRequirements(knownRecipes(ids, recipesById), recipesById);
+    const covered = new Set(recipes.flatMap((id) => recipesById.get(id)?.models ?? []));
+    const { rows, narrowed } = decodeOptions(params.get('o') ?? '');
+    const cookbook = {
+        $schema: COOKBOOK_SCHEMA,
+        version: COOKBOOK_VERSION,
+        recipes,
+        features: [],
+        policies: rows.filter((row) => covered.has(row.objectRef)),
+    };
+    const exposure = Object.fromEntries(Object.entries(narrowed).filter(([ref]) => covered.has(ref)));
+    if (Object.keys(exposure).length)
+        cookbook.exposure = exposure;
+    return cookbook;
+}

package/dist/cookbook/migrate.d.ts

@@ -0,0 +1,22 @@
+import type { ShellLayout } from '@happyvertical/smrt-svelte/workspace/layout';
+import type { Recipe } from '../recipes/index.ts';
+/**
+ * Nav sections used to be one per group/recipe (`section:commerce.customers`,
+ * `section:products`); recipes now suggest shared ones (`section:sales`).
+ * Rewrites a saved layout's ids from the old keys to the new, once, in the
+ * loader. Idempotent: new ids are not old keys. Section-level hides of a
+ * renamed section are dropped (the merged section may hold other recipes'
+ * items, so one old hide must not hide them); everything else is mapped and
+ * de-duplicated, and ids nothing refers to any more are harmless to the shell.
+ */
+export declare function migrateLegacySections(layout: ShellLayout, keys?: Record<string, string>): ShellLayout;
+/**
+ * Old item ids were `section:<nav>:<pkg>:<Model>:<label>` (features
+ * `section:more:<pkg>:<Model>`); they are now `item:<pkg>:<Model>[:<key>]`
+ * (`navItemId`). Section ids (`section:<id>`, no further parts) are unchanged.
+ * Rewrites every id the layout holds (itemOrder, hidden, moved, items), keys
+ * and values alike. An entry declaring a `key` is matched exactly through the
+ * recipes; any other old id maps by its package and model. Idempotent (`item:`
+ * ids are left alone) and unknown ids stay as they are.
+ */
+export declare function migrateNavItemIds(layout: ShellLayout, source?: readonly Recipe[]): ShellLayout;