@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/FormWorkspace.svelte

@@ -3,6 +3,11 @@ import { page } from '$app/state';
 import type { CatalogModel } from '../catalog/types.js';
 import { useDataSource } from '../data/context.js';
 import { createNoun, formatMoney, recordCount } from '../data/format.js';
+import {
+  type ListSort,
+  nextListSort,
+  sortListRows,
+} from '../data/list-sort.js';
 import type { ModelRecord } from '../data/source.js';
 import {
   type ActiveForm,
@@ -19,8 +24,17 @@ import {
   VARIANT,
 } from '../forms/stock.js';
 import { takeCreate } from '../planner/create.js';
+import {
+  ASSET,
+  PRODUCT_ASSET,
+  type ProductImage,
+  planProductImageSave,
+  productImages,
+} from '../products/media.js';
 import { inScope, type RowScope } from '../recipes/scope.js';
+import '../styles/planner-lists.css';
 import FieldMapForm from './FieldMapForm.svelte';
+import ProductMedia from './ProductMedia.svelte';
 import VariantGridForm from './VariantGridForm.svelte';
 
 interface FormWorkspaceProps {
@@ -49,8 +63,11 @@ const gridForm = $derived(forms.find(isVariantGrid));
 const mapForm = $derived(forms.find(isFieldMap));
 
 let rows = $state<ModelRecord[]>([]);
+let sort = $state<ListSort | null>(null);
 let withAxes = $state(new Set<string>());
 let stock = $state(new Map<string, number>());
+let images = $state(new Map<string, ProductImage[]>());
+let productAssets = $state<ModelRecord[]>([]);
 let loaded = $state(false);
 /** The form open, and the row it edits (none when creating). */
 let editing = $state<{ form: ActiveForm; id?: string } | null>(null);
@@ -68,6 +85,14 @@ async function load() {
         await source.list(catalogModels(STOCK_LEVEL)),
       )
     : new Map();
+  const [assets, associations] = await Promise.all([
+    source.list(catalogModels(ASSET)),
+    source.list(catalogModels(PRODUCT_ASSET)),
+  ]);
+  productAssets = associations;
+  images = new Map(
+    rows.map((row) => [row.id, productImages(row.id, assets, associations)]),
+  );
   loaded = true;
 }
 
@@ -76,6 +101,7 @@ $effect(() => {
   model.id;
   forms;
   scope;
+  sort = null;
   editing = null;
   loaded = false;
   void load().then(() => {
@@ -96,6 +122,23 @@ const kindOf = (row: ModelRecord): ActiveForm | undefined =>
 const kindLabel = (row: ModelRecord): string =>
   kindOf(row)?.form.kindLabel ?? (withAxes.has(row.id) ? 'Clothing' : 'Simple');
 
+const sortedRows = $derived(
+  sortListRows(rows, sort, (row, key) => {
+    switch (key) {
+      case 'name':
+        return row.name;
+      case 'kind':
+        return kindLabel(row);
+      case 'price':
+        return row.price;
+      case 'stock':
+        return stock.get(row.id);
+      default:
+        return undefined;
+    }
+  }),
+);
+
 function open(form: ActiveForm, id?: string) {
   editing = { form, id };
   formKey++;
@@ -110,7 +153,28 @@ async function remove(row: ModelRecord) {
   const skus = (await source.list(catalogModels(SKU))).filter(
     (sku) => sku.productId === row.id,
   );
-  await source.apply(planProductDelete(row.id, skus, catalogModels));
+  await source.apply(
+    planProductDelete(row.id, skus, catalogModels, productAssets),
+  );
+  await load();
+}
+
+async function addImage(row: ModelRecord, file: File) {
+  const sourceUri = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () =>
+      reject(reader.error ?? new Error('Could not read image.'));
+    reader.onload = () => resolve(String(reader.result));
+    reader.readAsDataURL(file);
+  });
+  await source.apply(
+    planProductImageSave(
+      row.id,
+      file,
+      sourceUri,
+      images.get(row.id)?.length ?? 0,
+    ),
+  );
   await load();
 }
 </script>
@@ -155,19 +219,23 @@ async function remove(row: ModelRecord) {
   {:else if rows.length === 0}
     <p>No records yet. Create one above.</p>
   {:else}
+    <ProductMedia rows={rows} {images} onselect={addImage} />
     <div class="scroll">
-      <table>
+      <table class="planner-list">
         <thead>
           <tr>
-            <th scope="col">Name</th>
-            <th scope="col">Kind</th>
-            <th scope="col">Price</th>
-            {#if showStock}<th scope="col">Stock</th>{/if}
+            {#each [{ key: 'name', label: 'Name' }, { key: 'kind', label: 'Kind' }, { key: 'price', label: 'Price' }, ...(showStock ? [{ key: 'stock', label: 'Stock' }] : [])] as column (column.key)}
+              <th scope="col" aria-sort={sort?.key === column.key ? sort.direction : 'none'}>
+                <button type="button" class="sort-button" onclick={() => (sort = nextListSort(sort, column.key))}>
+                  {column.label}<span class="sort-icon" aria-hidden="true">{sort?.key === column.key ? (sort.direction === 'ascending' ? '↑' : '↓') : '↕'}</span>
+                </button>
+              </th>
+            {/each}
             <th scope="col"><span class="visually-hidden">Actions</span></th>
           </tr>
         </thead>
         <tbody>
-          {#each rows as row (row.id)}
+          {#each sortedRows as row (row.id)}
             {@const kind = kindOf(row)}
             <tr>
               <td>{row.name}</td>
@@ -203,6 +271,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);
@@ -243,7 +313,7 @@ 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;
   }
@@ -259,7 +329,7 @@ async function remove(row: ModelRecord) {
   }
 
   button.secondary {
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-control-border);
     background: transparent;
     color: var(--smrt-color-on-surface);
   }
@@ -271,4 +341,5 @@ async function remove(row: ModelRecord) {
     overflow: hidden;
     clip-path: inset(50%);
   }
+}
 </style>

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

@@ -1,6 +1,7 @@
 import type { CatalogModel } from '../catalog/types.ts';
 import { type ActiveForm } from '../forms/active.ts';
 import { type RowScope } from '../recipes/scope.ts';
+import '../styles/planner-lists.css';
 interface FormWorkspaceProps {
     model: CatalogModel;
     /** The forms of the added recipes for this model; New offers each. */

package/dist/components/HeaderIconLink.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+/**
+ * An icon-only link in the shell header's end slot: the planner's "Plan the
+ * app" (chef's hat) and "Export the app" (download) controls, in the mounted
+ * `Planner` and the static app's layout alike. `label` is the accessible name
+ * and the tooltip; `current` marks the control whose page is open
+ * (`aria-current="page"`); `transitionName` is the `view-transition-name` it
+ * carries while a route transition runs (one per control, unique on screen).
+ */
+import { Icon } from '@happyvertical/smrt-ui';
+
+interface Props {
+  href: string;
+  label: string;
+  /** A smrt-ui preset icon name. */
+  icon?: string;
+  /** A custom icon path (wins over `icon`). */
+  path?: string;
+  current?: boolean;
+  transitionName: string;
+  onclick?: (event: MouseEvent) => void;
+}
+
+let {
+  href,
+  label,
+  icon,
+  path,
+  current = false,
+  transitionName,
+  onclick,
+}: Props = $props();
+</script>
+
+<a
+  class="header-link"
+  {href}
+  aria-label={label}
+  title={label}
+  aria-current={current ? 'page' : undefined}
+  style:--planner-transition-name={transitionName}
+  {onclick}
+>
+  <Icon {path} name={path ? undefined : icon} size={18} />
+</a>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .header-link {
+    /* The shell's header slot is a shrinking flex row: keep the hit area, as
+       the shell's own icon buttons do. */
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    color: inherit;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+  }
+  .header-link:hover {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .header-link:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .header-link[aria-current='page'] {
+    background: var(--smrt-color-secondary-container, rgb(0 0 0 / 12%));
+    color: var(--smrt-color-primary);
+  }
+  /* Named only while a transition runs, as in Planner.svelte: a permanent
+     name makes a stacking context. */
+  :global([data-smrt-view-transition]) .header-link {
+    view-transition-name: var(--planner-transition-name);
+  }
+  /* Forced colours: the current page's background is replaced, so it is
+     drawn as a selected item. */
+  @media (forced-colors: active) {
+    .header-link[aria-current='page'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    href: string;
+    label: string;
+    /** A smrt-ui preset icon name. */
+    icon?: string;
+    /** A custom icon path (wins over `icon`). */
+    path?: string;
+    current?: boolean;
+    transitionName: string;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const HeaderIconLink: import("svelte").Component<Props, {}, "">;
+type HeaderIconLink = ReturnType<typeof HeaderIconLink>;
+export default HeaderIconLink;

package/dist/components/HelpView.svelte

@@ -85,6 +85,8 @@ const groups = $derived(
 </article>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .help {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -126,4 +128,5 @@ const groups = $derived(
     margin: 0;
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/ModelOptions.svelte

@@ -167,6 +167,8 @@ function setOrder(name: string, raw: string) {
 </form>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .options {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -190,7 +192,7 @@ function setOrder(name: string, raw: string) {
     gap: var(--smrt-spacing-2);
     margin: 0;
     padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
   }
 
@@ -232,8 +234,17 @@ function setOrder(name: string, raw: string) {
   }
 
   button.secondary {
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-control-border);
     background: transparent;
     color: var(--smrt-color-on-surface);
   }
+
+  /* Forced colours: a disabled default reads as GrayText, not by opacity. */
+  @media (forced-colors: active) {
+    fieldset.default:disabled {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+}
 </style>

package/dist/components/ModelPage.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 import { useShellLayout } from '@happyvertical/smrt-svelte/workspace';
+import { browser } from '$app/environment';
+import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import { catalog, getModel } from '../catalog/index.js';
 import { cookbookStore } from '../cookbook/store.svelte.js';
@@ -7,6 +9,7 @@ import { humanize, navNoun } from '../data/format.js';
 import { activeForms } from '../forms/active.js';
 import { PRODUCT } from '../forms/stock.js';
 import { appHref } from '../planner/app.svelte.js';
+import { type RecordMode, recordFilter } from '../planner/routes.js';
 import { selection } from '../planner/selection.svelte.js';
 import { FEATURE_SECTION } from '../recipes/features.js';
 import { renderHelp } from '../recipes/help.js';
@@ -29,6 +32,7 @@ import { recipeState } from '../recipes/state.svelte.js';
 import { sectionPath } from '../sections/path.js';
 import FormWorkspace from './FormWorkspace.svelte';
 import ModelWorkspace from './ModelWorkspace.svelte';
+import RecordView from './RecordView.svelte';
 import SectionIcons from './SectionIcons.svelte';
 
 interface ModelPageProps {
@@ -36,9 +40,12 @@ interface ModelPageProps {
   modelName: string;
   /** The key of the nav entry this page is (`/m/<pkg>/<Model>/<key>/`). */
   view?: string;
+  /** The record this page shows (`/m/<pkg>/<Model>/<id>/`), with how. */
+  recordId?: string;
+  mode?: RecordMode;
 }
 
-let { packageId, modelName, view }: ModelPageProps = $props();
+let { packageId, modelName, view, recordId, mode }: ModelPageProps = $props();
 
 const catalogModel = $derived(getModel(packageId, modelName));
 // Recipe options (field policies, narrowed exposure) shape what is shown.
@@ -139,8 +146,10 @@ const declaredNoun = $derived(
     .find((e) => e.model.id === catalogModel?.id && e.key === view && e.noun)
     ?.noun,
 );
-// A filtered entry lists only its rows; the plain entry gives them up.
-const scope = $derived(
+// A filtered entry lists only its rows; the plain entry gives them up. A
+// record's "View all" (`?<fk>=<id>`) narrows the list to that record's rows
+// instead; the query is read in the browser only (the page is prerendered).
+const navScope = $derived(
   catalogModel
     ? pageScope(
         catalogModel.id,
@@ -152,6 +161,12 @@ const scope = $derived(
       )
     : undefined,
 );
+const queryScope = $derived(
+  browser && catalogModel
+    ? recordFilter(page.url.search, catalogModel)
+    : undefined,
+);
+const scope = $derived(queryScope ?? navScope);
 const preset = $derived(scopePreset(scope));
 const noun = $derived(
   navCrumb ? navNoun(navCrumb.label, declaredNoun) : undefined,
@@ -217,7 +232,7 @@ const inApp = $derived(
 </script>
 
 <svelte:head>
-  <title>{modelName} · {humanize(packageId)} · smrt planner</title>
+  <title>{recordId ? `${humanize(modelName)} record · ` : ''}{modelName} · {humanize(packageId)} · smrt planner</title>
 </svelte:head>
 
 {#if model && applied}
@@ -243,7 +258,17 @@ const inApp = $derived(
     {/if}
     </div>
 
-    {#if embeddedIn.length}
+    {#if recordId}
+      {#key recordId}
+        <RecordView
+          {packageId}
+          {modelName}
+          {recordId}
+          {mode}
+          navigate={(path) => void goto(appHref(path))}
+        />
+      {/key}
+    {:else if embeddedIn.length}
       <p>
         {humanize(model.name)} records live inside their parent record. Open
         one of:
@@ -276,6 +301,8 @@ const inApp = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   main {
     display: grid;
     gap: var(--smrt-spacing-6);
@@ -292,4 +319,5 @@ const inApp = $derived(
   .meta {
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

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

@@ -1,8 +1,12 @@
+import { type RecordMode } from '../planner/routes.ts';
 interface ModelPageProps {
     packageId: string;
     modelName: string;
     /** The key of the nav entry this page is (`/m/<pkg>/<Model>/<key>/`). */
     view?: string;
+    /** The record this page shows (`/m/<pkg>/<Model>/<id>/`), with how. */
+    recordId?: string;
+    mode?: RecordMode;
 }
 declare const ModelPage: import("svelte").Component<ModelPageProps, {}, "">;
 type ModelPage = ReturnType<typeof ModelPage>;