@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/RecordFeatures.svelte

@@ -7,8 +7,10 @@ import {
   Switch,
   ToggleButton,
 } from '@happyvertical/smrt-ui/forms';
+import { flip } from 'svelte/animate';
 import { catalog } from '../catalog/index.js';
 import { humanize } from '../data/format.js';
+import { motionDuration } from '../motion/tokens.js';
 import { appHref } from '../planner/app.svelte.js';
 import {
   type FeatureEntry,
@@ -105,7 +107,7 @@ function toggle(entry: FeatureEntry, on: boolean) {
     <ul class="rows" aria-label="Features">
       {#each results as entry (entry.id)}
         {@const on = recipeState.hasFeature(entry.id)}
-        <li class:selected={on}>
+        <li class:selected={on} animate:flip={{ duration: motionDuration('medium2', 300) }}>
           <span class="icon" aria-hidden="true"><Icon path={DATABASE} size={22} /></span>
           <div class="text">
             <span class="name">
@@ -132,6 +134,8 @@ function toggle(entry: FeatureEntry, on: boolean) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .features {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -150,7 +154,7 @@ function toggle(entry: FeatureEntry, on: boolean) {
   }
 
   .count {
-    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+    font-size: var(--smrt-typography-body-medium-size);
     font-weight: 400;
   }
 
@@ -169,7 +173,7 @@ function toggle(entry: FeatureEntry, on: boolean) {
     margin: 0;
     padding: 0;
     list-style: none;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
     overflow: hidden;
   }
@@ -182,16 +186,16 @@ function toggle(entry: FeatureEntry, on: boolean) {
   }
 
   .rows li + li {
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .rows li.selected {
-    background: var(--smrt-color-surface-container);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-selected) * 100%), transparent);
   }
 
   .includes {
     color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-font-size-body-small, 0.75rem);
+    font-size: var(--smrt-typography-body-small-size);
   }
 
   .icon {
@@ -220,10 +224,10 @@ function toggle(entry: FeatureEntry, on: boolean) {
 
   .tag {
     padding: 0 var(--smrt-spacing-2);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
     color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-font-size-label-small, 0.6875rem);
+    font-size: var(--smrt-typography-label-small-size);
   }
 
   .text a {
@@ -237,4 +241,14 @@ function toggle(entry: FeatureEntry, on: boolean) {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  /* Forced colours: the selected tint is dropped, so a switched-on row gets a
+     Highlight frame. */
+  @media (forced-colors: active) {
+    .rows li.selected {
+      outline: 0.125rem solid Highlight;
+      outline-offset: -0.125rem;
+    }
+  }
+}
 </style>

package/dist/components/RecordView.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+// A record's page (smrt#3718 record view): the framework's `RecordScreen`
+// over one sample row. Its fields read-only at the top, then the record's
+// own editable overview (`detail:<pkg>.<Model>`, saved in the cookbook with
+// the section pages'): a summary strip, the line items with the record's
+// totals, and the related records as tabs, each with its "View all" to the
+// list narrowed to this record. Edit is the `/edit/` route of the same page:
+// the form (with the line-items editor under it) opens beside the header on
+// desktop and as a sheet on phones. Everything is generic, from the
+// catalog's foreign keys and the framework's field roles.
+//
+// No `$app` import: the static route and the mounted `Planner` both render
+// it, giving it their own `href` and `navigate`.
+import {
+  RecordScreen,
+  type ScreenField,
+  type ScreenRelation,
+} from '@happyvertical/smrt-svelte/screens';
+import {
+  catalog,
+  getModel,
+  getModelByQualifiedName,
+} from '../catalog/index.js';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { useDataSource } from '../data/context.js';
+import {
+  derivedFieldNames,
+  isAllocationModel,
+  isLineModel,
+} from '../data/derived.js';
+import { recordHeading } from '../data/display.js';
+import type { ModelRecord } from '../data/fakes.js';
+import { humanize, labelKey, pluralize } from '../data/format.js';
+import {
+  isProfileLabelled,
+  recordLabel,
+  relationLabels,
+} from '../data/labels.js';
+import {
+  detailOverviewFor,
+  detailOverviewId,
+} from '../overviews/definitions.js';
+import { overviewRegistry } from '../overviews/registry.js';
+import { appHref } from '../planner/app.svelte.js';
+import {
+  filteredListPath,
+  modelPath,
+  type RecordMode,
+  recordPath,
+} from '../planner/routes.js';
+import { recipes, recipesById } from '../recipes/index.js';
+import { childLinks, childTitle, lineageNames } from '../recipes/plumbing.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { screenDefinition, screenPolicy } from '../screens/definition.js';
+import { appModels, screenRelations } from '../screens/relations.js';
+import ChildRecords from './ChildRecords.svelte';
+
+interface RecordViewProps {
+  packageId: string;
+  modelName: string;
+  recordId: string;
+  mode?: RecordMode;
+  /** An in-app path as a link; the planner's `appHref` by default. */
+  href?: (path: string) => string;
+  /** Go to an in-app path; defaults to following `href`. */
+  navigate?: (path: string) => void;
+}
+
+let {
+  packageId,
+  modelName,
+  recordId,
+  mode = 'view',
+  href = appHref,
+  navigate = (path) => {
+    location.assign(href(path));
+  },
+}: RecordViewProps = $props();
+
+const source = useDataSource();
+
+const catalogModel = $derived(getModel(packageId, modelName));
+// Recipe options (field policies, narrowed exposure) shape what is shown.
+const applied = $derived(
+  catalogModel ? recipeState.apply(catalogModel) : undefined,
+);
+const definition = $derived(
+  catalogModel ? screenDefinition(catalogModel) : undefined,
+);
+// A customer or vendor is named by its Profile: in view mode that field is
+// the page title, so the header and the details card leave it out. The
+// edit form keeps it (it is how the name is changed).
+const policy = $derived(
+  catalogModel && applied
+    ? screenPolicy(
+        catalogModel,
+        mode === 'view' && isProfileLabelled(catalogModel)
+          ? applied.fields.filter((f) => f.name !== 'profileId')
+          : applied.fields,
+      )
+    : undefined,
+);
+const added = $derived(
+  recipeState.ids.flatMap((id) => {
+    const recipe = recipesById.get(id);
+    return recipe ? [recipe] : [];
+  }),
+);
+const inApp = $derived(appModels(added, recipeState.features));
+const relations = $derived(
+  catalogModel ? screenRelations(catalog, catalogModel.id, inApp) : [],
+);
+const overviewId = $derived(detailOverviewId(packageId, modelName));
+const overview = $derived(detailOverviewFor(overviewId, inApp));
+// Line items and other dependent records are edited under their parent.
+const childTables = $derived.by(() => {
+  if (!catalogModel) return [];
+  const parentNames = lineageNames(catalog, catalogModel.id);
+  return childLinks(catalog, recipes, catalogModel.id).map((link) => {
+    const view = recipeState.apply(link.model);
+    return {
+      model: view.model,
+      fields: view.fields,
+      fk: link.fk,
+      title: childTitle(link.model.name, parentNames),
+    };
+  });
+});
+/** Shown but never typed: a line's amount, a parent's totals. */
+const calculated = $derived(
+  catalogModel
+    ? derivedFieldNames(
+        catalogModel,
+        childTables.some((c) => isLineModel(c.model)),
+        childTables.some((c) => isAllocationModel(c.model)),
+      )
+    : new Set<string>(),
+);
+
+let record = $state<ModelRecord | undefined>(undefined);
+let loaded = $state(false);
+/**
+ * The header's title for a record with a name (a customer's Profile name);
+ * a document gets none, so the header leads with its kind and identifier
+ * ("Order GRA-3159", the identifier monospace).
+ */
+let title = $state<string | undefined>(undefined);
+/** Labels of the records this one points at, by `labelKey`. */
+let labelMap = $state(new Map<string, string>());
+let submitting = $state(false);
+let deleting = $state(false);
+let error = $state<string | null>(null);
+
+async function load() {
+  if (!catalogModel) {
+    loaded = true;
+    return;
+  }
+  const found = await source.get(catalogModel, recordId);
+  record = found;
+  if (found) {
+    let name: string;
+    [name, labelMap] = await Promise.all([
+      recordLabel(source, catalogModel, found),
+      relationLabels(source, catalogModel.fields, [found]),
+    ]);
+    title =
+      recordHeading(catalogModel, found, name, humanize(modelName)) === name
+        ? name
+        : undefined;
+  }
+  loaded = true;
+}
+
+$effect(() => {
+  // Reload when the record (or the model) changes.
+  recordId;
+  catalogModel?.id;
+  loaded = false;
+  void load();
+});
+// A reset (a cookbook applied, the app reset) swaps the rows underneath.
+$effect(() => source.onReset?.(() => void load()));
+
+const listPath = $derived(modelPath(packageId, modelName));
+const backLabel = $derived(pluralize(humanize(modelName)));
+
+/** The target model of a reference field, through the relations. */
+function targetOf(field: ScreenField): ScreenRelation | undefined {
+  return relations.find(
+    (r) => r.kind === 'reference' && r.field === field.name,
+  );
+}
+
+/**
+ * A referenced record's view page, when its model is in the app; a target
+ * outside it (a customer's Profile in an app without profiles) shows its
+ * label without a link.
+ */
+function hrefFor(field: ScreenField, id: string): string | undefined {
+  const target = targetOf(field);
+  if (!target || !inApp.has(target.model)) return undefined;
+  const found = getModelByQualifiedName(target.model);
+  return found?.model.exposed
+    ? href(recordPath(found.pkg.id, found.model.name, id))
+    : undefined;
+}
+
+// Display names for the referenced records, keyed by their model.
+const labels = $derived(
+  Object.fromEntries(
+    relations
+      .filter((r) => r.kind === 'reference')
+      .map((r) => [
+        r.model,
+        (id: string) => labelMap.get(labelKey(r.model, id)),
+      ]),
+  ),
+);
+
+function viewAllHref(relation: ScreenRelation): string | undefined {
+  const found = getModelByQualifiedName(relation.model);
+  return found?.model.exposed
+    ? href(
+        filteredListPath(
+          found.pkg.id,
+          found.model.name,
+          relation.field,
+          recordId,
+        ),
+      )
+    : undefined;
+}
+
+async function save(values: Record<string, unknown>) {
+  if (!catalogModel) return;
+  const next: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (!calculated.has(key)) next[key] = value;
+  }
+  submitting = true;
+  error = null;
+  try {
+    await source.update(catalogModel, recordId, next);
+    await load();
+    navigate(recordPath(packageId, modelName, recordId));
+  } catch (failure) {
+    error = failure instanceof Error ? failure.message : String(failure);
+  } finally {
+    submitting = false;
+  }
+}
+
+async function remove() {
+  if (!catalogModel) return;
+  deleting = true;
+  try {
+    await source.delete(catalogModel, recordId);
+    navigate(listPath);
+  } finally {
+    deleting = false;
+  }
+}
+
+/** A line item changed: the record's calculated totals moved. */
+async function refreshDerived() {
+  if (!catalogModel) return;
+  const fresh = await source.get(catalogModel, recordId);
+  if (fresh) record = fresh;
+}
+
+/**
+ * What the record page's own widgets read (the planner widget context):
+ * the app's relations for the related tabs and the line items. The
+ * line-items loader reads the record's totals itself, fresh at load time.
+ */
+const widgetContext = $derived({ source, href, relations, viewAllHref });
+</script>
+
+<!-- Line items and other dependent records are edited with the record:
+     RecordScreen renders this under the edit form, in the edit column on
+     desktop and inside the edit sheet on phones. In view mode the overview's
+     line-items widget shows them, so there is no second panel. -->
+{#snippet items()}
+  {#each childTables as child (child.model.id)}
+    <ChildRecords
+      model={child.model}
+      fields={child.fields}
+      fk={child.fk}
+      title={child.title}
+      parentId={recordId}
+      onchanged={refreshDerived}
+    />
+  {/each}
+{/snippet}
+
+{#if !loaded}
+  <p>Loading...</p>
+{:else if !catalogModel || !definition || !record || !overview}
+  <div class="missing">
+    <h1>Record not found</h1>
+    <p>
+      This record is not in your app's sample data.
+      <a href={href(listPath)}>Back to {backLabel.toLowerCase()}</a>
+    </p>
+  </div>
+{:else}
+  {#key `${overviewId}:${inApp.size}`}
+    <div class="record-view" data-record-view={record.id} data-mode={mode}>
+      <RecordScreen
+        {definition}
+        {policy}
+        {record}
+        {relations}
+        {mode}
+        registry={overviewRegistry}
+        {widgetContext}
+        {overview}
+        override={cookbookStore.overview(overviewId)}
+        onoverviewchange={(override) =>
+          cookbookStore.setOverview(overviewId, override)}
+        {hrefFor}
+        {labels}
+        {viewAllHref}
+        {title}
+        {backLabel}
+        {submitting}
+        {deleting}
+        {error}
+        onback={() => navigate(listPath)}
+        onedit={() => navigate(recordPath(packageId, modelName, recordId, 'edit'))}
+        oncancel={() => navigate(recordPath(packageId, modelName, recordId))}
+        onsave={save}
+        ondelete={remove}
+        derivedFields={[...calculated]}
+        items={childTables.length ? items : undefined}
+      />
+    </div>
+  {/key}
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .record-view {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .missing h1 {
+    margin: 0 0 var(--smrt-spacing-2);
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+import { type RecordMode } from '../planner/routes.ts';
+interface RecordViewProps {
+    packageId: string;
+    modelName: string;
+    recordId: string;
+    mode?: RecordMode;
+    /** An in-app path as a link; the planner's `appHref` by default. */
+    href?: (path: string) => string;
+    /** Go to an in-app path; defaults to following `href`. */
+    navigate?: (path: string) => void;
+}
+declare const RecordView: import("svelte").Component<RecordViewProps, {}, "">;
+type RecordView = ReturnType<typeof RecordView>;
+export default RecordView;

package/dist/components/RelationField.svelte

@@ -153,6 +153,8 @@ function picked(id: string) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .plain {
     display: grid;
     gap: var(--smrt-spacing-1);
@@ -163,13 +165,14 @@ function picked(id: string) {
     max-height: 90vh;
     padding: var(--smrt-spacing-2);
     overflow: auto;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-raised);
     color: var(--smrt-color-on-surface);
   }
 
   .create::backdrop {
     background: rgb(0 0 0 / 0.5);
   }
+}
 </style>

package/dist/components/SectionActions.svelte

@@ -38,6 +38,8 @@ let { label, groups }: SectionActionsProps = $props();
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .menu {
     position: relative;
   }
@@ -58,8 +60,8 @@ let { label, groups }: SectionActionsProps = $props();
   }
 
   summary:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   ul {
@@ -70,8 +72,8 @@ let { label, groups }: SectionActionsProps = $props();
     margin: var(--smrt-spacing-1) 0 0;
     padding: var(--smrt-spacing-1);
     list-style: none;
-    background: var(--smrt-color-surface-container-high, var(--smrt-color-surface));
-    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-surface-raised);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-medium);
   }
 
@@ -86,6 +88,7 @@ let { label, groups }: SectionActionsProps = $props();
 
   a:hover,
   a:focus-visible {
-    background: var(--smrt-color-surface-container-highest, var(--smrt-color-surface-variant));
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
+}
 </style>

package/dist/components/SectionHeading.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+// A section page's heading: the section's icon, title and description, then
+// any controls (the static app's Help and Options icons). The static app's
+// `SectionView` and the mounted `Planner`'s `CookbookSectionPage` (its
+// `heading` snippet) both draw it, so the two pages read the same.
+import { ShellSectionIcon } from '@happyvertical/smrt-svelte/workspace';
+import type { Snippet } from 'svelte';
+
+interface SectionHeadingProps {
+  icon: string;
+  title: string;
+  description?: string;
+  /** Controls after the heading. */
+  actions?: Snippet;
+}
+
+let { icon, title, description, actions }: SectionHeadingProps = $props();
+</script>
+
+<header class="section-heading">
+  <span class="mark"><ShellSectionIcon name={icon} size={28} /></span>
+  <div class="heading">
+    <h1>{title}</h1>
+    {#if description}<p>{description}</p>{/if}
+  </div>
+  {@render actions?.()}
+</header>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  header {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .mark {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+    inline-size: 3rem;
+    block-size: 3rem;
+    border-radius: var(--smrt-radius-large, 0.75rem);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .heading {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  .heading p {
+    margin: var(--smrt-spacing-1) 0 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface SectionHeadingProps {
+    icon: string;
+    title: string;
+    description?: string;
+    /** Controls after the heading. */
+    actions?: Snippet;
+}
+declare const SectionHeading: import("svelte").Component<SectionHeadingProps, {}, "">;
+type SectionHeading = ReturnType<typeof SectionHeading>;
+export default SectionHeading;

package/dist/components/SectionIcons.svelte

@@ -56,6 +56,8 @@ const helpHref = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .icons {
     display: flex;
     gap: var(--smrt-spacing-1);
@@ -72,13 +74,13 @@ const helpHref = $derived(
   }
 
   a:hover {
-    background: var(--smrt-color-surface-container-high, rgb(0 0 0 / 8%));
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
     color: var(--smrt-color-on-surface);
   }
 
   a:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   a[aria-current='page'] {
@@ -95,4 +97,14 @@ const helpHref = $derived(
     width: 1.75rem;
     height: 1.75rem;
   }
+
+  /* Forced colours: the current page's background is replaced, so it is drawn
+     as a selected item. */
+  @media (forced-colors: active) {
+    a[aria-current='page'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
 </style>