@happyvertical/smrt-planner 0.0.0-stage → 0.0.2

package/dist/components/ModelOptions.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+import { Input, Switch } from '@happyvertical/smrt-ui/forms';
+import type { CatalogModel } from '../catalog/types.js';
+import {
+  draftFrom,
+  formFields,
+  isFieldLockedOn,
+  type ModelDraft,
+  narrowedFromDraft,
+  resolveExposure,
+  rowsFromDraft,
+  SURFACE_LABEL,
+  SURFACES,
+} from '../recipes/policy.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import type { RecipeModelHints } from '../recipes/types.js';
+import FieldInput from './FieldInput.svelte';
+
+interface ModelOptionsProps {
+  model: CatalogModel;
+  /** The recipe's curation hints for this model. */
+  hints?: RecipeModelHints;
+  /** The heading level of the model's title (3 by default). */
+  headingLevel?: number;
+}
+
+let { model, hints, headingLevel = 3 }: ModelOptionsProps = $props();
+
+function fresh(): ModelDraft {
+  return draftFrom(
+    model,
+    hints,
+    recipeState.rows,
+    recipeState.narrowed[model.id] ?? [],
+  );
+}
+
+// The draft is the form's own copy; it is only written back on Save.
+let draft = $state<ModelDraft>(fresh());
+let status = $state('');
+
+// What the recipe starts from, so locks and hidden parameters are known.
+const seed = $derived(formFields(model, hints));
+const exposure = $derived(resolveExposure(model, hints));
+const hiddenByRecipe = $derived(
+  Object.entries(hints?.fields ?? {})
+    .filter(([, hint]) => hint.visibility === 'hidden')
+    .map(([name]) => name),
+);
+
+function save(event: SubmitEvent) {
+  event.preventDefault();
+  recipeState.save(
+    model.id,
+    rowsFromDraft(model, hints, draft),
+    narrowedFromDraft(model, hints, draft),
+  );
+  status = 'Options saved. The views below use them.';
+}
+
+function reset() {
+  recipeState.reset(model.id);
+  draft = fresh();
+  status = 'Options reset to the recipe defaults.';
+}
+
+function setOrder(name: string, raw: string) {
+  const value = Number(raw);
+  if (raw.trim() !== '' && Number.isFinite(value)) {
+    draft.fields[name].order = value;
+  }
+}
+</script>
+
+<form class="options" onsubmit={save} aria-label={`Options for ${model.name}`}>
+  <svelte:element this={`h${Math.min(headingLevel, 6)}`}>{model.name} options</svelte:element>
+  <p class="hint">
+    Stored in the <code>{model.collection}</code> table. Switch fields on or
+    off and set their label, help, default and order. Saved as field policies.
+  </p>
+
+  <fieldset>
+    <legend>Exposure (can only be narrowed)</legend>
+    <div class="surfaces">
+      {#each SURFACES as surface (surface)}
+        <Switch
+          checked={draft.exposure[surface]}
+          disabled={exposure[surface].locked}
+          onchange={(event) => (draft.exposure[surface] = event.currentTarget.checked)}
+          label={`Expose ${model.name} over ${SURFACE_LABEL[surface]}${exposure[surface].available ? '' : ' (none declared)'}`}
+        />
+      {/each}
+    </div>
+  </fieldset>
+
+  {#each seed as entry (entry.field.name)}
+    {@const name = entry.field.name}
+    {@const lockedOn = isFieldLockedOn(entry)}
+    {@const frozen = entry.locked}
+    {#if draft.fields[name]}
+      <fieldset class="field">
+        <legend><code>{name}</code> <span class="type">{entry.field.type}</span></legend>
+        <Switch
+          checked={draft.fields[name].use}
+          disabled={lockedOn}
+          onchange={(event) => (draft.fields[name].use = event.currentTarget.checked)}
+          label={`Use field ${name}${entry.required ? ' (required)' : frozen ? ' (locked)' : ''}`}
+        />
+        <div class="controls">
+          <label>
+            <span>Label</span>
+            <Input
+              bind:value={draft.fields[name].label}
+              disabled={frozen}
+              aria-label={`Label for ${name}`}
+            />
+          </label>
+          <label>
+            <span>Help text</span>
+            <Input
+              bind:value={draft.fields[name].help}
+              disabled={frozen}
+              aria-label={`Help text for ${name}`}
+            />
+          </label>
+          <fieldset class="default" disabled={frozen}>
+            <FieldInput
+              field={{ ...entry.field, required: false }}
+              modelId={model.id}
+              creatable={false}
+              label={`Default value for ${name}`}
+              idPrefix={`default-${model.name}`}
+              value={draft.fields[name].default}
+              onchange={(value) => {
+                draft.fields[name].default = value;
+              }}
+            />
+          </fieldset>
+          <label>
+            <span>Order</span>
+            <Input
+              type="number"
+              value={draft.fields[name].order}
+              disabled={frozen}
+              oninput={(event) => setOrder(name, event.currentTarget.value)}
+              aria-label={`Order of ${name}`}
+            />
+          </label>
+        </div>
+      </fieldset>
+    {/if}
+  {/each}
+
+  {#if hiddenByRecipe.length}
+    <p class="hint">
+      Hidden by the recipe: {hiddenByRecipe.join(', ')}.
+    </p>
+  {/if}
+
+  <div class="actions">
+    <button type="submit">Save options</button>
+    <button type="button" class="secondary" onclick={reset}>
+      Reset to recipe defaults
+    </button>
+  </div>
+  <p class="status" role="status" aria-live="polite">{status}</p>
+</form>
+
+<style>
+  .options {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+  }
+
+  .hint,
+  .type {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  fieldset {
+    display: grid;
+    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-radius: var(--smrt-radius-large);
+  }
+
+  .surfaces,
+  .controls {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+
+  label {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    font-weight: 500;
+  }
+
+  fieldset.default {
+    padding: 0;
+    border: 0;
+  }
+
+  fieldset.default:disabled {
+    opacity: 0.6;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  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);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { CatalogModel } from '../catalog/types.ts';
+import type { RecipeModelHints } from '../recipes/types.ts';
+interface ModelOptionsProps {
+    model: CatalogModel;
+    /** The recipe's curation hints for this model. */
+    hints?: RecipeModelHints;
+    /** The heading level of the model's title (3 by default). */
+    headingLevel?: number;
+}
+declare const ModelOptions: import("svelte").Component<ModelOptionsProps, {}, "">;
+type ModelOptions = ReturnType<typeof ModelOptions>;
+export default ModelOptions;

package/dist/components/ModelPage.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+import { useShellLayout } from '@happyvertical/smrt-svelte/workspace';
+import { page } from '$app/state';
+import { catalog, getModel } from '../catalog/index.js';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+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 { selection } from '../planner/selection.svelte.js';
+import { FEATURE_SECTION } from '../recipes/features.js';
+import { renderHelp } from '../recipes/help.js';
+import {
+  helpModels,
+  navPath,
+  recipeNav,
+  recipes,
+  sectionId,
+} from '../recipes/index.js';
+import {
+  childLinks,
+  childTitle,
+  hasNavPage,
+  lineageNames,
+} from '../recipes/plumbing.js';
+import { pageScope, scopePreset } from '../recipes/scope.js';
+import { navSectionOf } from '../recipes/sections.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { sectionPath } from '../sections/path.js';
+import FormWorkspace from './FormWorkspace.svelte';
+import ModelWorkspace from './ModelWorkspace.svelte';
+import SectionIcons from './SectionIcons.svelte';
+
+interface ModelPageProps {
+  packageId: string;
+  modelName: string;
+  /** The key of the nav entry this page is (`/m/<pkg>/<Model>/<key>/`). */
+  view?: string;
+}
+
+let { packageId, modelName, view }: ModelPageProps = $props();
+
+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 model = $derived(applied?.model);
+// Added recipes' forms (with their extensions) replace the generic form.
+const forms = $derived(
+  catalogModel ? activeForms(recipeState.ids, recipes, catalogModel.id) : [],
+);
+const recipesWithModel = $derived(
+  recipes.filter(
+    (recipe) => catalogModel && recipe.models.includes(catalogModel.id),
+  ),
+);
+// The recipe the header icons belong to: an added one first. Its section's
+// Help and Options pages are what the icons open.
+const iconRecipe = $derived(
+  recipesWithModel.find((recipe) => recipeState.has(recipe.id)) ??
+    recipesWithModel[0],
+);
+const iconSection = $derived(iconRecipe ? sectionId(iconRecipe) : undefined);
+const iconLabel = $derived(
+  iconRecipe ? (iconRecipe.group?.label ?? iconRecipe.label) : '',
+);
+// Breadcrumbs follow the app's own navigation, not catalog packages: the menu
+// section the model sits in (the user's renamed label wins) and its menu label.
+const shellLayout = useShellLayout();
+// The menu as the visitor sees it (renamed sections and entries, from a
+// cookbook or edit mode): the entry linking to this page wins.
+interface Crumb {
+  section: string;
+  label: string;
+  /** The layout id of the section, to link its page. */
+  sectionId?: string;
+}
+const shellCrumb = $derived.by((): Crumb | undefined => {
+  const here = page.url.pathname;
+  const path = (href: string) => new URL(href, page.url).pathname;
+  for (const group of shellLayout.applied.groups) {
+    const item = group.items.find((i) => path(i.href) === here);
+    if (item) {
+      return {
+        section: group.heading,
+        label: item.label,
+        sectionId: group.id ?? group.heading,
+      };
+    }
+  }
+  const item = shellLayout.applied.nav.find((i) => path(i.href) === here);
+  return item ? { section: item.label, label: item.label } : undefined;
+});
+const navCrumb = $derived.by((): Crumb | undefined => {
+  if (shellCrumb) return shellCrumb;
+  if (!catalogModel) return undefined;
+  const recipe = recipesWithModel.find((r) => recipeState.has(r.id));
+  if (!recipe) {
+    if (!recipeState.hasFeature(catalogModel.id)) return undefined;
+    const renamed =
+      cookbookStore.layout?.sections?.[`section:${FEATURE_SECTION.id}`]?.label;
+    return {
+      section: renamed || FEATURE_SECTION.label,
+      label: humanize(catalogModel.name),
+      sectionId: `section:${FEATURE_SECTION.id}`,
+    };
+  }
+  const section = navSectionOf(recipe);
+  const entry = recipeNav(recipe).find(
+    (e) => e.model.id === catalogModel.id && e.key === view,
+  );
+  const renamed =
+    cookbookStore.layout?.sections?.[`section:${section.id}`]?.label;
+  return {
+    section: renamed || section.label,
+    label: entry?.label ?? catalogModel.name,
+    sectionId: `section:${section.id}`,
+  };
+});
+
+/** "Section / Entry" shows the section as a link; one name when both match. */
+const sameName = (crumb: Crumb) =>
+  crumb.section.trim().toLowerCase() === crumb.label.trim().toLowerCase();
+// The list heading: the menu entry's label unless it is only the model's name.
+const listTitle = $derived(
+  navCrumb &&
+    catalogModel &&
+    navCrumb.label.toLowerCase() !== humanize(catalogModel.name).toLowerCase()
+    ? navCrumb.label
+    : undefined,
+);
+
+// What New creates, from the menu entry: "Sales Orders" -> "sales order".
+// An entry can declare its own noun ("Stock levels" -> "stock entry").
+const declaredNoun = $derived(
+  recipesWithModel
+    .flatMap((r) => recipeNav(r))
+    .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(
+  catalogModel
+    ? pageScope(
+        catalogModel.id,
+        view,
+        recipeState.ids.flatMap((id) => {
+          const recipe = recipes.find((r) => r.id === id);
+          return recipe ? recipeNav(recipe) : [];
+        }),
+      )
+    : undefined,
+);
+const preset = $derived(scopePreset(scope));
+const noun = $derived(
+  navCrumb ? navNoun(navCrumb.label, declaredNoun) : undefined,
+);
+
+// Anchored to this model's fields in the recipe whose Help covers it, when
+// that Help lists them (a recipe with no menu entry shows no fields).
+const helpAnchor = $derived.by(() => {
+  const covering =
+    recipesWithModel.find(
+      (recipe) =>
+        recipe.help &&
+        sectionId(recipe) === iconSection &&
+        recipeState.has(recipe.id),
+    ) ??
+    recipesWithModel.find(
+      (recipe) => recipe.help && sectionId(recipe) === iconSection,
+    );
+  if (!covering?.help) return undefined;
+  const { glossary } = renderHelp(
+    covering.help,
+    helpModels(covering, recipeState.rows),
+  );
+  return glossary.some((entry) => entry.model === modelName)
+    ? `${covering.id}-fields-${modelName}`
+    : undefined;
+});
+// Line items and other dependent records live inside their parent's record
+// view, filtered to it; they have no list page of their own.
+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),
+    };
+  });
+});
+// A child in a recipe without a menu entry (and not added as a feature) is
+// reached through its parents, not as a page.
+const embeddedIn = $derived.by(() => {
+  if (!catalogModel) return [];
+  if (hasNavPage(recipes, catalogModel.id)) return [];
+  if (recipeState.hasFeature(catalogModel.id)) return [];
+  if (!recipesWithModel.length) return [];
+  return recipes.flatMap((recipe) =>
+    recipeNav(recipe).filter((entry) =>
+      childLinks(catalog, [recipe], entry.model.id).some(
+        (link) => link.model.id === catalogModel.id,
+      ),
+    ),
+  );
+});
+const inApp = $derived(
+  selection.has(packageId) ||
+    (catalogModel ? recipeState.hasFeature(catalogModel.id) : false) ||
+    recipesWithModel.some((recipe) => recipeState.has(recipe.id)),
+);
+</script>
+
+<svelte:head>
+  <title>{modelName} · {humanize(packageId)} · smrt planner</title>
+</svelte:head>
+
+{#if model && applied}
+  <main>
+    <div class="bar">
+    <nav aria-label="Breadcrumb">
+      {#if navCrumb}
+        {#if sameName(navCrumb) || !navCrumb.sectionId}
+          {navCrumb.label}
+        {:else}
+          <a href={appHref(sectionPath(navCrumb.sectionId))}>{navCrumb.section}</a>
+          / {navCrumb.label}
+        {/if}
+      {:else}
+        {model.name}
+      {/if}
+      {#if cookbookStore.loaded && !inApp}
+        <span class="meta">(not in your app yet)</span>
+      {/if}
+    </nav>
+    {#if iconSection}
+      <SectionIcons section={iconSection} label={iconLabel} {helpAnchor} />
+    {/if}
+    </div>
+
+    {#if embeddedIn.length}
+      <p>
+        {humanize(model.name)} records live inside their parent record. Open
+        one of:
+        {#each embeddedIn as entry, i (entry.model.id)}
+          {i ? ', ' : ''}<a href={appHref(navPath(entry))}>{entry.label}</a>
+        {/each}
+      </p>
+    {:else if forms.length && model.id === PRODUCT}
+      <FormWorkspace
+        {model}
+        {forms}
+        {scope}
+        {preset}
+        title={listTitle}
+        {noun}
+      />
+    {:else}
+      <ModelWorkspace
+        {model}
+        fields={applied.fields}
+        {forms}
+        {childTables}
+        title={listTitle}
+        {noun}
+        {scope}
+        {preset}
+      />
+    {/if}
+  </main>
+{/if}
+
+<style>
+  main {
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    width: min(100%, 72rem);
+    margin-inline: auto;
+    padding: var(--smrt-spacing-6);
+  }
+
+  .bar {
+    display: flex;
+    align-items: center;
+  }
+
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface ModelPageProps {
+    packageId: string;
+    modelName: string;
+    /** The key of the nav entry this page is (`/m/<pkg>/<Model>/<key>/`). */
+    view?: string;
+}
+declare const ModelPage: import("svelte").Component<ModelPageProps, {}, "">;
+type ModelPage = ReturnType<typeof ModelPage>;
+export default ModelPage;