@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/ModelWorkspace.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { tick } from 'svelte';
-import { page } from '$app/state';
+import { getModelByQualifiedName } from '../catalog/index.js';
 import type { CatalogModel } from '../catalog/types.js';
 import {
   blankRecord,
@@ -28,13 +28,22 @@ import {
   pluralize,
   recordCount,
 } from '../data/format.js';
-import { relationLabels, shortId } from '../data/labels.js';
+import { relationLabels, resolveRelated, shortId } from '../data/labels.js';
+import {
+  type ListSort,
+  nextListSort,
+  sortListRows,
+} from '../data/list-sort.js';
 import { focusFirstInvalid } from '../fields/invalid.js';
 import { type ActiveForm, isFieldMap } from '../forms/active.js';
+import { appHref } from '../planner/app.svelte.js';
 import { takeCreate } from '../planner/create.js';
+import { modelPath, recordPath } from '../planner/routes.js';
 import type { ViewField } from '../recipes/policy.js';
 import { inScope, type RowScope } from '../recipes/scope.js';
 import type { FieldMapForm as FieldMapFormShape } from '../recipes/types.js';
+import '../styles/planner-forms.css';
+import '../styles/planner-lists.css';
 import ChildRecords from './ChildRecords.svelte';
 import FieldInput from './FieldInput.svelte';
 import FieldMapForm from './FieldMapForm.svelte';
@@ -62,6 +71,8 @@ interface ModelWorkspaceProps {
   scope?: RowScope;
   /** Values a new row carries so it stays in `scope`. */
   preset?: Record<string, unknown>;
+  /** An in-app path as a link; the planner's `appHref` by default. */
+  href?: (path: string) => string;
 }
 
 let {
@@ -73,6 +84,7 @@ let {
   noun,
   scope,
   preset,
+  href = appHref,
 }: ModelWorkspaceProps = $props();
 
 const source = useDataSource();
@@ -102,10 +114,52 @@ const totalFields = $derived(
 );
 const newNoun = $derived(noun ?? humanize(model.name).toLowerCase());
 const heading = $derived(title ?? pluralize(humanize(model.name)));
+const packageId = $derived(getModelByQualifiedName(model.id)?.pkg.id ?? '');
+/** A row opens its record page (smrt#3718 record view). */
+const viewHref = (row: ModelRecord) =>
+  href(recordPath(packageId, model.name, row.id));
+/**
+ * The list narrowed to one record's rows ("View all" on a record page): the
+ * reference field the scope filters on, so the heading can say whose rows
+ * these are and offer the whole list.
+ */
+const filterField = $derived(
+  scope?.equals !== undefined
+    ? fields.find(
+        (f) =>
+          f.name === scope.field &&
+          (f.type === 'foreignKey' || f.type === 'crossPackageRef') &&
+          f.related,
+      )
+    : undefined,
+);
+let filterLabel = $state('');
+$effect(() => {
+  const field = filterField;
+  const id = scope?.equals;
+  filterLabel = '';
+  if (!field?.related || id === undefined) return;
+  const target = getModelByQualifiedName(field.related)?.model;
+  if (!target) return;
+  void resolveRelated(source, target, id).then((found) => {
+    if (found && filterField === field) filterLabel = found.label;
+  });
+});
 
 let rows = $state<ModelRecord[]>([]);
+let sort = $state<ListSort | null>(null);
 /** Labels of the records the rows point at, so a cell shows a name, not an id. */
 let labels = $state(new Map<string, string>());
+const sortedRows = $derived(
+  sortListRows(rows, sort, (row, key) => {
+    const column = columns.find((item) => item.name === key);
+    if (!column) return undefined;
+    const value = cellValue(column, row);
+    return column.type === 'foreignKey' || column.type === 'crossPackageRef'
+      ? formatValue(column, value, labels)
+      : value;
+  }),
+);
 let loaded = $state(false);
 /** `null` closed, `'new'` creating, otherwise the id being edited. */
 let editing = $state<string | 'new' | null>(null);
@@ -116,7 +170,11 @@ let draft = $state<Record<string, unknown>>({});
 let formKey = $state(0);
 /** Required fields the last save found empty, by field name. */
 let errors = $state<Record<string, string>>({});
+/** Why the data source refused the last save or delete (an issued document's lines). */
+let failure = $state('');
 const summary = $derived(errorSummary(fields, errors));
+const reason = (error: unknown) =>
+  error instanceof Error ? error.message : String(error);
 /** What names a row to a person: its customer or reference, else a short id. */
 const nameOf = (row: ModelRecord) =>
   recordTitle(model, fields, row, labels) || shortId(row.id);
@@ -144,11 +202,13 @@ $effect(() => {
   // Reload (and close any open form) when the model changes.
   model.id;
   scope;
+  sort = null;
   editing = null;
   loaded = false;
   void load().then(() => {
     // A section page's "New ..." arrives with the form already open.
-    if (takeCreate(page.url.pathname)) startCreate(mapForms[0]);
+    if (typeof location !== 'undefined' && takeCreate(location.pathname))
+      startCreate(mapForms[0]);
   });
 });
 
@@ -175,18 +235,12 @@ function startCreate(form?: ActiveForm<FieldMapFormShape>) {
   formKey++;
 }
 
-function startEdit(row: ModelRecord) {
-  if (mapForms[0]) {
-    mapForm = mapForms[0];
-    editing = row.id;
-    formKey++;
-    return;
-  }
-  mapForm = undefined;
-  draft = { ...row };
-  errors = {};
-  editing = row.id;
-  formKey++;
+/** A click on the row (not on one of its controls) opens the record. */
+function openRow(event: MouseEvent) {
+  const target = event.target as HTMLElement | null;
+  if (target?.closest('a, button')) return;
+  const link = event.currentTarget as HTMLElement;
+  link.querySelector<HTMLAnchorElement>('a[data-view]')?.click();
 }
 
 async function save(event: SubmitEvent) {
@@ -202,18 +256,25 @@ async function save(event: SubmitEvent) {
   for (const field of fields) {
     if (!calculated.has(field.name)) values[field.name] = draft[field.name];
   }
-  if (editing === 'new') {
-    const created = await source.create(model, values);
-    // A record with line items stays open after its first save, so they can
-    // be added to it right away.
-    editing = childTables.length ? created.id : null;
-    if (editing) {
-      draft = { ...created };
-      formKey++;
+  failure = '';
+  try {
+    if (editing === 'new') {
+      const created = await source.create(model, values);
+      // A record with line items stays open after its first save, so they
+      // can be added to it right away.
+      editing = childTables.length ? created.id : null;
+      if (editing) {
+        draft = { ...created };
+        formKey++;
+      }
+    } else if (editing) {
+      await source.update(model, editing, values);
+      editing = null;
     }
-  } else if (editing) {
-    await source.update(model, editing, values);
-    editing = null;
+  } catch (error) {
+    // The write was undone; the form stays open with the reason.
+    failure = reason(error);
+    return;
   }
   await load();
 }
@@ -231,7 +292,13 @@ async function refreshDerived() {
 }
 
 async function remove(row: ModelRecord) {
-  await source.delete(model, row.id);
+  failure = '';
+  try {
+    await source.delete(model, row.id);
+  } catch (error) {
+    failure = reason(error);
+    return;
+  }
   await load();
 }
 </script>
@@ -239,6 +306,15 @@ async function remove(row: ModelRecord) {
 <section>
   <header>
     <h2>{heading} {#if loaded}<small>{recordCount(rows.length)}</small>{/if}</h2>
+    {#if failure}
+      <p class="error" role="alert" data-write-error>{failure}</p>
+    {/if}
+    {#if filterField}
+      <p class="filter" data-list-filter>
+        {filterField.label}: {filterLabel || shortId(scope?.equals)}
+        · <a href={href(modelPath(packageId, model.name))}>Show all</a>
+      </p>
+    {/if}
     {#if mapForms.length}
       {#each mapForms as active (active.form.id)}
         <button type="button" onclick={() => startCreate(active)}>
@@ -262,7 +338,7 @@ async function remove(row: ModelRecord) {
         oncancel={() => (editing = null)}
       />
     {:else}
-    <form onsubmit={save} novalidate>
+    <form class="planner-form" onsubmit={save} novalidate>
       <h3>{editing === 'new' ? `New ${newNoun}` : editTitle || model.name}</h3>
       {#each fields as field (field.name)}
         {#if totalFields.includes(field)}
@@ -340,30 +416,35 @@ async function remove(row: ModelRecord) {
     <p>No records yet. Create one above.</p>
   {:else}
     <div class="scroll">
-      <table>
+      <table class="planner-list">
         <thead>
           <tr>
             {#each columns as column (column.name)}
-              <th>{column.label}</th>
+              <th scope="col" aria-sort={sort?.key === column.name ? sort.direction : 'none'}>
+                <button type="button" class="sort-button" onclick={() => (sort = nextListSort(sort, column.name))}>
+                  {column.label}<span class="sort-icon" aria-hidden="true">{sort?.key === column.name ? (sort.direction === 'ascending' ? '↑' : '↓') : '↕'}</span>
+                </button>
+              </th>
             {/each}
-            <th><span class="visually-hidden">Actions</span></th>
+            <th scope="col"><span class="visually-hidden">Actions</span></th>
           </tr>
         </thead>
         <tbody>
-          {#each rows as row (row.id)}
-            <tr>
+          {#each sortedRows as row (row.id)}
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <tr class="row" onclick={openRow}>
               {#each columns as column (column.name)}
                 <td>{formatValue(column, cellValue(column, row), labels)}</td>
               {/each}
               <td class="row-actions">
-                <button
-                  type="button"
+                <a
                   class="secondary"
-                  aria-label={`Edit ${nameOf(row)}`}
-                  onclick={() => startEdit(row)}
+                  href={viewHref(row)}
+                  aria-label={`View ${nameOf(row)}`}
+                  data-view
                 >
-                  Edit
-                </button>
+                  View
+                </a>
                 <button
                   type="button"
                   class="secondary"
@@ -382,6 +463,8 @@ async function remove(row: ModelRecord) {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   section {
     display: grid;
     gap: var(--smrt-spacing-4);
@@ -389,6 +472,7 @@ async function remove(row: ModelRecord) {
 
   header {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--smrt-spacing-3);
     align-items: center;
     justify-content: space-between;
@@ -404,14 +488,6 @@ async function remove(row: ModelRecord) {
     font-weight: 400;
   }
 
-  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);
-  }
-
   .actions,
   .row-actions {
     display: flex;
@@ -449,6 +525,21 @@ async function remove(row: ModelRecord) {
     overflow-x: auto;
   }
 
+  .filter {
+    margin: 0;
+    flex: 1 1 100%;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+
+  .row {
+    cursor: pointer;
+  }
+
+  .row:hover td {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;
@@ -457,11 +548,12 @@ async function remove(row: ModelRecord) {
   th,
   td {
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     text-align: left;
     white-space: nowrap;
   }
 
+
   button {
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: 0;
@@ -472,10 +564,15 @@ async function remove(row: ModelRecord) {
     cursor: pointer;
   }
 
-  button.secondary {
-    border: 1px solid var(--smrt-color-outline);
+  button.secondary,
+  a.secondary {
+    display: inline-block;
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: var(--smrt-control-border);
+    border-radius: var(--smrt-radius-medium);
     background: transparent;
     color: var(--smrt-color-on-surface);
+    text-decoration: none;
   }
 
   .visually-hidden {
@@ -485,4 +582,5 @@ async function remove(row: ModelRecord) {
     overflow: hidden;
     clip-path: inset(50%);
   }
+}
 </style>

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

@@ -3,6 +3,8 @@ import { type ChildTable } from '../data/columns.ts';
 import { type ActiveForm } from '../forms/active.ts';
 import type { ViewField } from '../recipes/policy.ts';
 import { type RowScope } from '../recipes/scope.ts';
+import '../styles/planner-forms.css';
+import '../styles/planner-lists.css';
 interface ModelWorkspaceProps {
     model: CatalogModel;
     /** The fields to show, policy applied; defaults to every editable field. */
@@ -26,6 +28,8 @@ interface ModelWorkspaceProps {
     scope?: RowScope;
     /** Values a new row carries so it stays in `scope`. */
     preset?: Record<string, unknown>;
+    /** An in-app path as a link; the planner's `appHref` by default. */
+    href?: (path: string) => string;
 }
 declare const ModelWorkspace: import("svelte").Component<ModelWorkspaceProps, {}, "">;
 type ModelWorkspace = ReturnType<typeof ModelWorkspace>;

package/dist/components/PackagePage.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+// One package: its models, dependencies and the tools that connect to it.
+// The static app's `/packages/[id]/` route and the mounted `Planner`'s
+// `#/packages/<id>/` both render this, so a feature's package link resolves
+// in either.
+import { exposedModels, getPackage } from '../catalog/index.js';
+import { humanize } from '../data/format.js';
+import { appHref } from '../planner/app.svelte.js';
+import ConnectTools from './ConnectTools.svelte';
+
+interface PackagePageProps {
+  /** The catalog package id (`commerce`). */
+  id: string;
+  /** Where "Unknown package" leads back to. */
+  backHref?: string;
+}
+
+let { id, backHref }: PackagePageProps = $props();
+
+const pkg = $derived(getPackage(id));
+</script>
+
+{#if pkg}
+  <main>
+    <header>
+      <h1>{humanize(pkg.id)}</h1>
+      <p class="meta"><code>{pkg.packageName}@{pkg.version}</code></p>
+      <p>{pkg.description}</p>
+      {#if pkg.dependencies.length}
+        <p class="meta">
+          Needs:
+          {#each pkg.dependencies as dependency, i (dependency)}
+            {#if i > 0},
+            {/if}<a href={appHref(`/packages/${dependency}/`)}>{humanize(dependency)}</a>
+          {/each}
+        </p>
+      {/if}
+    </header>
+
+    <section>
+      <h2>Models</h2>
+      <ul>
+        {#each exposedModels(pkg) as model (model.id)}
+          <li>
+            <a href={appHref(`/m/${pkg.id}/${model.name}/`)}>{model.name}</a>
+            <span class="meta">{model.fields.filter((f) => !f.system).length} fields</span>
+          </li>
+        {/each}
+      </ul>
+    </section>
+
+    <ConnectTools models={pkg.models} />
+  </main>
+{:else}
+  <main>
+    <h1>Unknown package</h1>
+    <p>No package is called <code>{id}</code>.{#if backHref} <a href={backHref}>Back to the Planner</a>{/if}</p>
+  </main>
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  main {
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    width: min(100%, 72rem);
+    margin-inline: auto;
+    padding: var(--smrt-spacing-6);
+  }
+
+  header,
+  section {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    justify-items: start;
+  }
+
+  h1,
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  ul {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    margin: 0;
+    padding-left: var(--smrt-spacing-5);
+  }
+}
+</style>

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

@@ -0,0 +1,9 @@
+interface PackagePageProps {
+    /** The catalog package id (`commerce`). */
+    id: string;
+    /** Where "Unknown package" leads back to. */
+    backHref?: string;
+}
+declare const PackagePage: import("svelte").Component<PackagePageProps, {}, "">;
+type PackagePage = ReturnType<typeof PackagePage>;
+export default PackagePage;

package/dist/components/ProductMedia.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { AssetGrid } from '@happyvertical/smrt-assets/svelte';
+import { FilePicker } from '@happyvertical/smrt-ui/forms';
+import type { ComponentProps } from 'svelte';
+import type { ModelRecord } from '../data/source.js';
+import { GALLERY_RECIPE, type ProductImage } from '../products/media.js';
+import { recipeState } from '../recipes/state.svelte.js';
+
+type GridAsset = ComponentProps<typeof AssetGrid>['assets'][number];
+
+interface ProductMediaProps {
+  rows: readonly ModelRecord[];
+  images: ReadonlyMap<string, readonly ProductImage[]>;
+  onselect: (product: ModelRecord, file: File) => void;
+}
+
+let { rows, images, onselect }: ProductMediaProps = $props();
+// The gallery is configured in the cookbook: it follows the Asset library recipe.
+const gallery = $derived(recipeState.has(GALLERY_RECIPE));
+let selectedIds = $state(new Set<string>());
+
+/** ProductAsset-linked images in the shape the canonical asset grid renders. */
+function gridAssets(list: readonly ProductImage[]): GridAsset[] {
+  return list.map(
+    (image) =>
+      ({
+        id: image.id,
+        name: image.name,
+        sourceUri: image.sourceUri,
+        mimeType: image.mimeType,
+        description: image.description,
+      }) as unknown as GridAsset,
+  );
+}
+
+function toggle(asset: GridAsset) {
+  const next = new Set(selectedIds);
+  if (!next.delete(asset.id)) next.add(asset.id);
+  selectedIds = next;
+}
+
+const nameOf = (product: ModelRecord) =>
+  String(product.name ?? 'Untitled product');
+</script>
+
+<section class="media" aria-label="Product images">
+  <div class="heading">
+    <h3>Product images</h3>
+    <p>Images stay in this browser demo and are linked through ProductAsset.</p>
+    {#if !gallery}
+      <p>Add the Asset library recipe to show the product gallery.</p>
+    {/if}
+  </div>
+
+  <ul class="products">
+    {#each rows as product (product.id)}
+      {@const productImages = images.get(product.id) ?? []}
+      <li>
+        <strong>{nameOf(product)}</strong>
+        {#if gallery}
+          <AssetGrid
+            assets={gridAssets(productImages)}
+            {selectedIds}
+            onSelectionChange={(ids) => (selectedIds = ids)}
+            onAssetClick={toggle}
+            mode="pick"
+          />
+        {:else}
+          <span class="count">
+            {productImages.length}
+            {productImages.length === 1 ? 'image' : 'images'}
+          </span>
+        {/if}
+        <FilePicker
+          label={`Add image for ${nameOf(product)}`}
+          accept="image/*"
+          onchangefiles={(files) => {
+            if (files[0]) onselect(product, files[0]);
+          }}
+        />
+      </li>
+    {/each}
+  </ul>
+</section>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .media, .heading, li { display: grid; gap: var(--smrt-spacing-2); }
+  h3, p { margin: 0; }
+  p, .count { color: var(--smrt-color-on-surface-variant); }
+  .products { display: grid; gap: var(--smrt-spacing-3); margin: 0; padding: 0; list-style: none; }
+  li { padding: var(--smrt-spacing-2); border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); }
+}
+</style>

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

@@ -0,0 +1,10 @@
+import type { ModelRecord } from '../data/source.ts';
+import { type ProductImage } from '../products/media.ts';
+interface ProductMediaProps {
+    rows: readonly ModelRecord[];
+    images: ReadonlyMap<string, readonly ProductImage[]>;
+    onselect: (product: ModelRecord, file: File) => void;
+}
+declare const ProductMedia: import("svelte").Component<ProductMediaProps, {}, "">;
+type ProductMedia = ReturnType<typeof ProductMedia>;
+export default ProductMedia;

package/dist/components/RecipeCards.svelte

@@ -101,6 +101,8 @@ const mainOn = (card: PlannerCard) => cardIsOn(card, recipeState.ids);
   <p class="notice" role="status" aria-live="polite">{notice}</p>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   h2,
   p {
     margin: 0;
@@ -130,7 +132,7 @@ const mainOn = (card: PlannerCard) => cardIsOn(card, recipeState.ids);
     align-content: start;
     gap: var(--smrt-spacing-2);
     padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
   }
 
@@ -142,4 +144,14 @@ const mainOn = (card: PlannerCard) => cardIsOn(card, recipeState.ids);
     display: grid;
     gap: var(--smrt-spacing-1);
   }
+
+  /* Forced colours: a switched-on recipe's border colour is replaced, so it
+     gets a Highlight frame. */
+  @media (forced-colors: active) {
+    .cards li.selected {
+      border-color: Highlight;
+      outline: 0.125rem solid Highlight;
+    }
+  }
+}
 </style>

package/dist/components/RecipeHelp.svelte

@@ -38,6 +38,8 @@ const rendered = $derived(
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   section {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -51,4 +53,5 @@ const rendered = $derived(
   .meta {
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/RecipeOptions.svelte

@@ -105,6 +105,8 @@ const requiredHref = (id: string) => {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .recipe,
   header,
   .adds,
@@ -148,7 +150,7 @@ const requiredHref = (id: string) => {
   }
 
   button.secondary {
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-control-border);
     background: transparent;
     color: var(--smrt-color-on-surface);
   }
@@ -157,4 +159,14 @@ const requiredHref = (id: string) => {
     cursor: not-allowed;
     opacity: 0.6;
   }
+
+  /* Forced colours: a disabled button reads as GrayText, not by opacity. */
+  @media (forced-colors: active) {
+    button:disabled {
+      border-color: GrayText;
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+}
 </style>