@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/ChildRecords.svelte

@@ -17,14 +17,20 @@ import {
   derivedFieldNames,
   isLineModel,
   isProductField,
-  lineAmounts,
+  lineAmount,
   productPrefill,
 } from '../data/derived.js';
 import type { ModelRecord } from '../data/fakes.js';
 import { formatValue } from '../data/format.js';
 import { relationLabels, shortId } from '../data/labels.js';
+import {
+  type ListSort,
+  nextListSort,
+  sortListRows,
+} from '../data/list-sort.js';
 import { focusFirstInvalid } from '../fields/invalid.js';
 import type { ViewField } from '../recipes/policy.js';
+import '../styles/planner-lists.css';
 import FieldInput from './FieldInput.svelte';
 
 interface ChildRecordsProps {
@@ -60,12 +66,25 @@ const columns = $derived(listColumns(fields));
 const calculated = $derived(derivedFieldNames(model, false));
 /** The line's amount as it will be saved, live as quantity and price change. */
 const derivedPreview = (name: string): unknown =>
-  name === 'amount' ? lineAmounts(draft).amount : draft[name];
+  name === 'amount' ? lineAmount(draft) : draft[name];
 let errors = $state<Record<string, string>>({});
-const summary = $derived(errorSummary(fields, errors));
+let saveError = $state('');
+let removeError = $state('');
+const summary = $derived(errorSummary(fields, errors) || saveError);
 
 let rows = $state<ModelRecord[]>([]);
 let labels = $state(new Map<string, string>());
+let sort = $state<ListSort | null>(null);
+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'` adding, otherwise the id being edited. */
 let editing = $state<string | 'new' | null>(null);
@@ -83,6 +102,7 @@ $effect(() => {
   // Reload when the parent record (or the child model) changes.
   model.id;
   parentId;
+  sort = null;
   editing = null;
   loaded = false;
   void load();
@@ -93,6 +113,7 @@ const nameOf = (row: ModelRecord) =>
 
 function startCreate() {
   errors = {};
+  saveError = '';
   draft = blankChild(fields, fk, parentId);
   editing = 'new';
   formKey++;
@@ -100,6 +121,7 @@ function startCreate() {
 
 function startEdit(row: ModelRecord) {
   errors = {};
+  saveError = '';
   draft = { ...row };
   editing = row.id;
   formKey++;
@@ -129,15 +151,30 @@ async function save(event: SubmitEvent) {
     if (!calculated.has(field.name)) values[field.name] = draft[field.name];
   }
   values[fk] = parentId;
-  if (editing === 'new') await source.create(model, values);
-  else if (editing) await source.update(model, editing, values);
+  try {
+    if (editing === 'new') await source.create(model, values);
+    else if (editing) await source.update(model, editing, values);
+  } catch (failure) {
+    // Money the model refuses (a discount above the line's price): the
+    // write was undone, and the form stays open with the reason.
+    saveError = failure instanceof Error ? failure.message : String(failure);
+    return;
+  }
+  saveError = '';
   editing = null;
   await load();
   onchanged?.();
 }
 
 async function remove(row: ModelRecord) {
-  await source.delete(model, row.id);
+  removeError = '';
+  try {
+    await source.delete(model, row.id);
+  } catch (failure) {
+    // An issued document keeps its lines: the delete was undone.
+    removeError = failure instanceof Error ? failure.message : String(failure);
+    return;
+  }
   await load();
   onchanged?.();
 }
@@ -146,6 +183,9 @@ async function remove(row: ModelRecord) {
 <section class="children" data-child-model={model.name}>
   <header>
     <h3>{title} <small>{rows.length}</small></h3>
+    {#if removeError}
+      <p class="error" role="alert" data-remove-error>{removeError}</p>
+    {/if}
     <button type="button" class="secondary" onclick={startCreate}>
       Add {title.toLowerCase().replace(/s$/, '')}
     </button>
@@ -194,17 +234,21 @@ async function remove(row: ModelRecord) {
     <p class="empty">None yet.</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)}
+          {#each sortedRows as row (row.id)}
             <tr>
               {#each columns as column (column.name)}
                 <td>{formatValue(column, cellValue(column, row), labels)}</td>
@@ -236,11 +280,13 @@ async function remove(row: ModelRecord) {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .children {
     display: grid;
     gap: var(--smrt-spacing-3);
     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);
   }
 
@@ -253,7 +299,7 @@ async function remove(row: ModelRecord) {
 
   h3 {
     margin: 0;
-    font-size: 1rem;
+    font: var(--smrt-typography-title-medium-font); letter-spacing: var(--smrt-typography-title-medium-tracking);
   }
 
   small,
@@ -300,7 +346,7 @@ async function remove(row: ModelRecord) {
   th,
   td {
     padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     text-align: left;
     white-space: nowrap;
   }
@@ -316,7 +362,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);
   }
@@ -328,4 +374,5 @@ async function remove(row: ModelRecord) {
     overflow: hidden;
     clip-path: inset(50%);
   }
+}
 </style>

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

@@ -1,5 +1,6 @@
 import type { CatalogModel } from '../catalog/types.ts';
 import type { ViewField } from '../recipes/policy.ts';
+import '../styles/planner-lists.css';
 interface ChildRecordsProps {
     model: CatalogModel;
     fields: ViewField[];

package/dist/components/ConnectTools.svelte

@@ -78,6 +78,8 @@ const exposed = $derived(models.filter((m) => m.exposed));
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .panel {
     display: grid;
     gap: var(--smrt-spacing-4);
@@ -97,7 +99,7 @@ const exposed = $derived(models.filter((m) => m.exposed));
     display: grid;
     gap: var(--smrt-spacing-3);
     padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
   }
 
@@ -108,7 +110,7 @@ const exposed = $derived(models.filter((m) => m.exposed));
   }
 
   h4 {
-    font-size: 0.9rem;
+    font: var(--smrt-typography-title-small-font); letter-spacing: var(--smrt-typography-title-small-tracking);
     color: var(--smrt-color-on-surface-variant);
   }
 
@@ -142,4 +144,5 @@ const exposed = $derived(models.filter((m) => m.exposed));
     color: var(--smrt-color-on-tertiary-container);
     font-size: 0.75rem;
   }
+}
 </style>

package/dist/components/CookbooksPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { tryUseAdminShell } from '@happyvertical/smrt-svelte/workspace';
 import { Button } from '@happyvertical/smrt-ui';
 import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { onMount } from 'svelte';
@@ -25,6 +26,7 @@ import {
 import AppSettings from './AppSettings.svelte';
 
 const dataSource = useDataSource();
+const shell = tryUseAdminShell();
 let selectedId = $state<string | null>(null);
 let confirming = $state(false);
 let error = $state('');
@@ -69,7 +71,9 @@ function commit() {
     dataSource.reset?.();
     libraryState.select(selected.id);
     error = '';
-    notice = `Now using the ${selected.name} cookbook.`;
+    const count = previewMenu(selected.document).length;
+    notice = `${selected.name} added ${count} menu sections. Explore them in the left sidebar.`;
+    shell?.setPanelState('left', 'expanded');
   } else {
     error = result.error;
     notice = '';
@@ -78,6 +82,9 @@ function commit() {
 </script>
 
 <div class="cookbooks">
+  {#if notice}
+    <Alert variant="success" title="Cookbook applied">{notice}</Alert>
+  {/if}
   <p class="meta">
     A cookbook is a ready-made starting point: the recipes, menu and settings a
     kind of business usually needs. Pick one, look it over, then change
@@ -93,25 +100,27 @@ function commit() {
           class="card"
           class:selected={selectedId === cookbook.id}
           aria-pressed={selectedId === cookbook.id}
-          onclick={() => (selectedId = cookbook.id)}
+          onclick={() => { selectedId = cookbook.id; notice = ''; }}
         >
-          <svg
-            class="icon"
-            viewBox="0 0 24 24"
-            width="32"
-            height="32"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.75"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            {#each COOKBOOK_ICONS[cookbook.icon] ?? [] as d (d)}
-              <path {d} />
-            {/each}
-          </svg>
-          <span class="name">{cookbook.name}</span>
+          <span class="heading">
+            <svg
+              class="icon"
+              viewBox="0 0 24 24"
+              width="28"
+              height="28"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              {#each COOKBOOK_ICONS[cookbook.icon] ?? [] as d (d)}
+                <path {d} />
+              {/each}
+            </svg>
+            <span class="name">{cookbook.name}</span>
+          </span>
           <span class="summary">{cookbook.summary}</span>
           {#if active}<span class="badge">In use</span>{/if}
         </button>
@@ -164,7 +173,6 @@ function commit() {
   {#if error}
     <Alert variant="error" title="Could not use this cookbook">{error}</Alert>
   {/if}
-  <p class="notice" role="status" aria-live="polite">{notice}</p>
 </div>
 
 <ConfirmDialog
@@ -178,6 +186,8 @@ function commit() {
 />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .cookbooks {
     display: grid;
     gap: var(--smrt-spacing-4);
@@ -192,19 +202,14 @@ function commit() {
 
   h3,
   h4 {
-    font-size: 1rem;
+    font: var(--smrt-typography-title-medium-font); letter-spacing: var(--smrt-typography-title-medium-tracking);
   }
 
   .meta,
-  .summary,
-  .notice {
+  .summary {
     color: var(--smrt-color-on-surface-variant);
   }
 
-  .notice:empty {
-    display: none;
-  }
-
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
@@ -222,9 +227,9 @@ function commit() {
     width: 100%;
     height: 100%;
     padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-panel);
     color: inherit;
     font: inherit;
     text-align: start;
@@ -237,11 +242,20 @@ function commit() {
   }
 
   .icon {
+    flex: 0 0 auto;
     color: var(--smrt-color-primary);
   }
 
+  .heading {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    min-inline-size: 0;
+    padding-inline-end: 4rem;
+  }
+
   .name {
-    font-weight: 600;
+    font-weight: var(--smrt-typography-weight-semibold);
   }
 
   .badge {
@@ -249,7 +263,7 @@ function commit() {
     top: var(--smrt-spacing-3);
     right: var(--smrt-spacing-3);
     padding: 0 var(--smrt-spacing-2);
-    border-radius: 999px;
+    border-radius: var(--smrt-radius-full, 999px);
     background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary);
     font-size: 0.75rem;
@@ -259,7 +273,7 @@ function commit() {
     display: grid;
     gap: var(--smrt-spacing-4);
     padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
   }
 
@@ -283,7 +297,7 @@ function commit() {
 
   .chips li {
     padding: 0 var(--smrt-spacing-3);
-    border-radius: 999px;
+    border-radius: var(--smrt-radius-full, 999px);
     background: var(--smrt-color-surface-container);
   }
 
@@ -305,4 +319,13 @@ function commit() {
     align-items: center;
     gap: var(--smrt-spacing-3);
   }
+
+  /* Forced colours: the selected cookbook keeps a Highlight frame. */
+  @media (forced-colors: active) {
+    .card.selected {
+      border-color: Highlight;
+      outline-color: Highlight;
+    }
+  }
+}
 </style>

package/dist/components/CopyButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { ButtonVariant } from '@happyvertical/smrt-ui';
+import { Button } from '@happyvertical/smrt-ui';
+
+/**
+ * A button that puts `text` on the clipboard and says "Copied" for a moment.
+ * When the clipboard is not available (no secure context, permission denied,
+ * an old browser) it calls `onfail` so the owner can select the text and
+ * tell the person to copy it by hand; the status line belongs to the owner.
+ */
+interface Props {
+  /** What to copy; a function is read at click time. */
+  text: string | (() => string);
+  label: string;
+  copiedLabel?: string;
+  variant?: ButtonVariant;
+  /** How long the button says it copied, in milliseconds. */
+  confirmFor?: number;
+  oncopied?: () => void;
+  onfail?: () => void;
+  /** Replaces `navigator.clipboard.writeText` (tests). */
+  write?: (text: string) => Promise<void>;
+  'aria-describedby'?: string;
+}
+
+let {
+  text,
+  label,
+  copiedLabel = 'Copied',
+  variant = 'primary',
+  confirmFor = 2000,
+  oncopied,
+  onfail,
+  write,
+  'aria-describedby': describedBy,
+}: Props = $props();
+
+let copied = $state(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+async function copy() {
+  const value = typeof text === 'function' ? text() : text;
+  const writer =
+    write ??
+    (typeof navigator !== 'undefined' && navigator.clipboard
+      ? (t: string) => navigator.clipboard.writeText(t)
+      : undefined);
+  try {
+    if (!writer) throw new Error('no clipboard');
+    await writer(value);
+  } catch {
+    copied = false;
+    onfail?.();
+    return;
+  }
+  copied = true;
+  oncopied?.();
+  clearTimeout(timer);
+  timer = setTimeout(() => (copied = false), confirmFor);
+}
+</script>
+
+<Button {variant} onclick={copy} aria-live="polite" aria-describedby={describedBy}>
+  {copied ? copiedLabel : label}
+</Button>

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

@@ -0,0 +1,24 @@
+import type { ButtonVariant } from '@happyvertical/smrt-ui';
+/**
+ * A button that puts `text` on the clipboard and says "Copied" for a moment.
+ * When the clipboard is not available (no secure context, permission denied,
+ * an old browser) it calls `onfail` so the owner can select the text and
+ * tell the person to copy it by hand; the status line belongs to the owner.
+ */
+interface Props {
+    /** What to copy; a function is read at click time. */
+    text: string | (() => string);
+    label: string;
+    copiedLabel?: string;
+    variant?: ButtonVariant;
+    /** How long the button says it copied, in milliseconds. */
+    confirmFor?: number;
+    oncopied?: () => void;
+    onfail?: () => void;
+    /** Replaces `navigator.clipboard.writeText` (tests). */
+    write?: (text: string) => Promise<void>;
+    'aria-describedby'?: string;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;