@happyvertical/smrt-planner 0.0.0-stage → 0.0.1

package/dist/components/RecipeCards.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+import { Fieldset, Switch } from '@happyvertical/smrt-ui/forms';
+import {
+  buildCards,
+  cardIsOn,
+  cardLocks,
+  mainLockNote,
+  mainSwitchChange,
+  type PlannerCard,
+  subLockNote,
+  subSwitchChange,
+} from '../recipes/cards.js';
+import { recipes, recipesById } from '../recipes/index.js';
+import { recipeState } from '../recipes/state.svelte.js';
+
+const cards = buildCards(recipes);
+
+let notice = $state('');
+
+const label = (id: string) => recipesById.get(id)?.label ?? id;
+const names = (ids: readonly string[]) => ids.map(label).join(', ');
+
+// Switching never navigates: the recipe appears in the menu to explore
+// whenever the visitor likes, and the status line announces what changed.
+function apply(change: { add: string[]; remove: string[] }) {
+  const before = new Set(recipeState.ids);
+  if (change.add.length) recipeState.add(...change.add);
+  if (change.remove.length) recipeState.remove(...change.remove);
+  const after = new Set(recipeState.ids);
+  const added = recipeState.ids.filter((id) => !before.has(id));
+  const removed = [...before].filter((id) => !after.has(id));
+  const parts: string[] = [];
+  if (added.length) parts.push(`Added ${names(added)} to the menu.`);
+  if (removed.length) parts.push(`Removed ${names(removed)} from the menu.`);
+  notice = parts.join(' ');
+}
+
+/** What a one-recipe card pulls in, in words; empty when nothing. */
+function needsOf(card: PlannerCard): string {
+  const recipe = card.recipes[0];
+  if (!recipe || card.hasSubSwitches) return '';
+  return [
+    ...recipe.requires.map(label),
+    ...(recipe.requiresAny ?? []).map((alts) => `one of ${names(alts)}`),
+  ].join(', ');
+}
+
+const mainOn = (card: PlannerCard) => cardIsOn(card, recipeState.ids);
+</script>
+
+  <ul class="cards" aria-label="Recipes">
+    {#each cards as card (card.id)}
+      {@const on = mainOn(card)}
+      {@const locks = cardLocks(card, recipeState.ids, recipesById)}
+      {@const needed = locks.main}
+      <li class:selected={on}>
+        <h2 id={`card-${card.id}`}>{card.label}</h2>
+        <p class="description" id={`card-${card.id}-summary`}>{card.summary}</p>
+        <Switch
+          label={card.label}
+          checked={on}
+          disabled={needed.length > 0}
+          aria-describedby={`card-${card.id}-summary${needed.length ? ` card-${card.id}-needed` : ''}`}
+          onchange={(event) =>
+            apply(mainSwitchChange(card, recipeState.ids, event.currentTarget.checked))}
+        />
+        {#if needed.length}
+          <p class="meta" id={`card-${card.id}-needed`}>{mainLockNote(card, needed.map(label))}</p>
+        {/if}
+        {#if card.hasSubSwitches}
+          <Fieldset legend={`${card.label} recipes`} stack class="subs">
+            {#each card.recipes as recipe (recipe.id)}
+              {@const subOn = recipeState.has(recipe.id)}
+              {@const subNeeded = locks.subs[recipe.id] ?? []}
+              <div class="sub">
+                <Switch
+                  label={recipe.label}
+                  size="sm"
+                  checked={subOn}
+                  disabled={subNeeded.length > 0}
+                  aria-describedby={`sub-${recipe.id}-summary${subNeeded.length ? ` sub-${recipe.id}-needed` : ''}`}
+                  onchange={(event) =>
+                    apply(subSwitchChange(recipe.id, event.currentTarget.checked))}
+                />
+                <p class="meta" id={`sub-${recipe.id}-summary`}>{recipe.summary}</p>
+                {#if subNeeded.length}
+                  <p class="meta" id={`sub-${recipe.id}-needed`}>
+                    {subLockNote(card, recipe.label, subNeeded.map(label))}
+                  </p>
+                {/if}
+              </div>
+            {/each}
+          </Fieldset>
+        {/if}
+        {#if !on && needsOf(card)}
+          <p class="meta">Needs {needsOf(card)}.</p>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  <p class="notice" role="status" aria-live="polite">{notice}</p>
+
+<style>
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta,
+  .description,
+  .notice {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .notice:empty {
+    display: none;
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    gap: var(--smrt-spacing-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cards li {
+    display: grid;
+    align-content: start;
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  .cards li.selected {
+    border-color: var(--smrt-color-primary);
+  }
+
+  .sub {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const RecipeCards: import("svelte").Component<Record<string, never>, {}, "">;
+type RecipeCards = ReturnType<typeof RecipeCards>;
+export default RecipeCards;

package/dist/components/RecipeHelp.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+import { renderHelp } from '../recipes/help.js';
+import { helpModels } from '../recipes/index.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import type { Recipe } from '../recipes/types.js';
+import HelpView from './HelpView.svelte';
+
+interface RecipeHelpProps {
+  recipe: Recipe;
+  /** Show the recipe's own heading: set when the page lists several recipes. */
+  titled?: boolean;
+}
+
+let { recipe, titled = false }: RecipeHelpProps = $props();
+
+const applied = $derived(helpModels(recipe, recipeState.rows));
+// Re-rendered whenever the app's options change.
+const rendered = $derived(
+  recipe.help ? renderHelp(recipe.help, applied) : undefined,
+);
+</script>
+
+<section aria-label={recipe.label}>
+  {#if titled}
+    <h2 id={`help-${recipe.id}`}>{recipe.label}</h2>
+    <p class="meta">{recipe.summary}</p>
+  {/if}
+  {#if rendered}
+    <HelpView
+      blocks={rendered.blocks}
+      glossary={rendered.glossary}
+      idPrefix={`${recipe.id}-`}
+      startLevel={titled ? 3 : 2}
+    />
+  {:else}
+    <p>There is no help for {recipe.label} yet.</p>
+  {/if}
+</section>
+
+<style>
+  section {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Recipe } from '../recipes/types.ts';
+interface RecipeHelpProps {
+    recipe: Recipe;
+    /** Show the recipe's own heading: set when the page lists several recipes. */
+    titled?: boolean;
+}
+declare const RecipeHelp: import("svelte").Component<RecipeHelpProps, {}, "">;
+type RecipeHelp = ReturnType<typeof RecipeHelp>;
+export default RecipeHelp;

package/dist/components/RecipeOptions.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+import { humanize } from '../data/format.js';
+import { appHref } from '../planner/app.svelte.js';
+import {
+  getRecipe,
+  navPath,
+  recipeModels,
+  recipeNav,
+  recipePackage,
+  sectionId,
+} from '../recipes/index.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import type { Recipe } from '../recipes/types.js';
+import ModelOptions from './ModelOptions.svelte';
+
+interface RecipeOptionsProps {
+  recipe: Recipe;
+  /** Show the recipe's own heading: set when the page lists several recipes. */
+  titled?: boolean;
+}
+
+let { recipe, titled = false }: RecipeOptionsProps = $props();
+
+// Under the page's h1: a titled recipe is an h2 with its parts at h3, an
+// untitled one has its parts at h2.
+const part = $derived(titled ? 'h3' : 'h2');
+const added = $derived(recipeState.has(recipe.id));
+const neededBy = $derived(recipeState.requiredBy(recipe.id));
+const models = $derived(recipeModels(recipe));
+const label = (id: string) => getRecipe(id)?.label ?? id;
+const requiredHref = (id: string) => {
+  const required = getRecipe(id);
+  return appHref(`/recipes/${required ? sectionId(required) : id}/`);
+};
+</script>
+
+<section class="recipe" aria-label={recipe.label}>
+  <header>
+    {#if titled}<h2>{recipe.label}</h2>{/if}
+    <p>{recipe.summary}</p>
+    <p class="meta">
+      <code>{recipe.id}</code> · from
+      {recipePackage(recipe) ? humanize(recipePackage(recipe)?.id ?? '') : 'unknown package'}
+    </p>
+    {#if recipe.requires.length}
+      <p class="meta">
+        Needs:
+        {#each recipe.requires as required, i (required)}
+          {#if i > 0},
+          {/if}<a href={requiredHref(required)}>{label(required)}</a>
+        {/each}
+      </p>
+    {/if}
+    <div class="actions">
+      <button
+        type="button"
+        class:secondary={added}
+        disabled={neededBy.length > 0}
+        onclick={() =>
+          added ? recipeState.remove(recipe.id) : recipeState.add(recipe.id)}
+      >
+        {neededBy.length
+          ? `Remove ${recipe.label} (needed by ${neededBy.map(label).join(', ')})`
+          : added
+            ? `Remove ${recipe.label} from my app`
+            : `Add ${recipe.label} to my app`}
+      </button>
+    </div>
+  </header>
+
+  <div class="adds">
+    <svelte:element this={part}>What it adds</svelte:element>
+    <ul>
+      {#each recipeNav(recipe) as entry (entry.model.id)}
+        <li>
+          {#if added}
+            <a href={appHref(navPath(entry))}>{entry.label}</a>
+          {:else}
+            {entry.label}
+          {/if}
+          <span class="meta">list, create, edit and delete views for {entry.model.name}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  {#if added}
+    <div class="options">
+      <svelte:element this={part}>Options</svelte:element>
+      <p class="meta">
+        Generated from the parameters {recipe.label}'s models declare. Saving
+        writes field policies, held in memory for now.
+      </p>
+      {#each models as { model } (model.id)}
+        <ModelOptions
+          {model}
+          hints={recipe.options?.[model.id]}
+          headingLevel={titled ? 4 : 3}
+        />
+      {/each}
+    </div>
+  {:else}
+    <p class="meta">Add this recipe to set its options.</p>
+  {/if}
+</section>
+
+<style>
+  .recipe,
+  header,
+  .adds,
+  .options {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    justify-items: start;
+  }
+
+  .options {
+    justify-items: stretch;
+  }
+
+  h2,
+  h3,
+  p,
+  .adds > :first-child,
+  .options > :first-child {
+    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);
+  }
+
+  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);
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Recipe } from '../recipes/types.ts';
+interface RecipeOptionsProps {
+    recipe: Recipe;
+    /** Show the recipe's own heading: set when the page lists several recipes. */
+    titled?: boolean;
+}
+declare const RecipeOptions: import("svelte").Component<RecipeOptionsProps, {}, "">;
+type RecipeOptions = ReturnType<typeof RecipeOptions>;
+export default RecipeOptions;

package/dist/components/RecordFeatures.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+// Material Design Icons "storage" (Apache-2.0,
+// https://github.com/google/material-design-icons); smrt-ui's Icon fills its path.
+import { Icon } from '@happyvertical/smrt-ui';
+import {
+  SearchInput,
+  Switch,
+  ToggleButton,
+} from '@happyvertical/smrt-ui/forms';
+import { catalog } from '../catalog/index.js';
+import { humanize } from '../data/format.js';
+import { appHref } from '../planner/app.svelte.js';
+import {
+  type FeatureEntry,
+  featureEntries,
+  featurePackages,
+  featureSummary,
+  filterFeatures,
+  visibleFeatures,
+} from '../recipes/features.js';
+import { recipes } from '../recipes/index.js';
+import { recipeState } from '../recipes/state.svelte.js';
+
+const DATABASE =
+  'M12 3C7.58 3 4 4.79 4 7v10c0 2.21 3.59 4 8 4s8-1.79 8-4V7c0-2.21-3.58-4-8-4zm6 14c0 .5-2.13 2-6 2s-6-1.5-6-2v-2.23c1.61.78 3.72 1.23 6 1.23s4.39-.45 6-1.23V17zm0-4.55c-1.3.95-3.58 1.55-6 1.55s-4.7-.6-6-1.55V9.64c1.47.83 3.61 1.36 6 1.36s4.53-.53 6-1.36v2.81zM12 9C8.13 9 6 7.5 6 7s2.13-2 6-2 6 1.5 6 2-2.13 2-6 2z';
+
+const all = featureEntries(catalog, recipes);
+
+let query = $state('');
+let packageId = $state<string | null>(null);
+let showAll = $state(false);
+let notice = $state('');
+
+// Chips offer only packages that have a result for the current search.
+const pool = $derived(visibleFeatures(all, showAll));
+const chips = $derived(featurePackages(filterFeatures(pool, query)));
+const active = $derived(
+  packageId && chips.includes(packageId) ? packageId : null,
+);
+const results = $derived(filterFeatures(pool, query, active));
+// Plumbing the current search and package filter would match, now hidden.
+const hidden = $derived(
+  showAll ? 0 : filterFeatures(all, query, active).length - results.length,
+);
+
+// Switching never navigates: the feature joins the menu whenever the visitor
+// likes, and the status line announces what changed.
+function toggle(entry: FeatureEntry, on: boolean) {
+  if (on) recipeState.addFeature(entry.id);
+  else recipeState.removeFeature(entry.id);
+  notice = on
+    ? `Added ${entry.label} to the menu.`
+    : `Removed ${entry.label} from the menu.`;
+}
+</script>
+
+<div class="features">
+  <p class="meta">
+    Models no recipe covers. Add one to give it a list and a form of its own
+    under More in the menu.
+  </p>
+
+  <SearchInput
+    value={query}
+    onsearch={(next) => {
+      query = next;
+    }}
+    label="Search features"
+    placeholder="Search models, packages and fields"
+    debounceMs={0}
+  />
+
+  {#if chips.length > 1}
+    <div class="chips" role="group" aria-label="Filter by package">
+      <ToggleButton pressed={active === null} onclick={() => (packageId = null)}>
+        All
+      </ToggleButton>
+      {#each chips as id (id)}
+        <ToggleButton
+          pressed={active === id}
+          onclick={() => (packageId = active === id ? null : id)}
+        >
+          {humanize(id)}
+        </ToggleButton>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="bar">
+    <h2 class="count">
+      {results.length} {results.length === 1 ? 'feature' : 'features'}{hidden
+        ? ` (${hidden} hidden)`
+        : ''}
+    </h2>
+    <Switch
+      checked={showAll}
+      label="Show all"
+      onchange={(event) => {
+        showAll = event.currentTarget.checked;
+      }}
+    />
+  </div>
+
+  {#if results.length}
+    <ul class="rows" aria-label="Features">
+      {#each results as entry (entry.id)}
+        {@const on = recipeState.hasFeature(entry.id)}
+        <li class:selected={on}>
+          <span class="icon" aria-hidden="true"><Icon path={DATABASE} size={22} /></span>
+          <div class="text">
+            <span class="name">
+              <a href={appHref(`/packages/${entry.packageId}/`)}>{entry.label}</a>
+              {#if entry.plumbing}<span class="tag">plumbing</span>{/if}
+            </span>
+            <span class="meta">{featureSummary(entry)}</span>
+            {#if entry.includes.length}
+              <span class="includes">+ {entry.includes.join(', ')}</span>
+            {/if}
+          </div>
+          <Switch
+            checked={on}
+            aria-label={`${on ? 'Remove' : 'Add'} ${entry.label} feature`}
+            onchange={(event) => toggle(entry, event.currentTarget.checked)}
+          />
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <p class="empty">No features match "{query}".</p>
+  {/if}
+  <p class="notice" role="status" aria-live="polite">{notice}</p>
+</div>
+
+<style>
+  .features {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta,
+  .notice,
+  .empty,
+  .count {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .count {
+    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+    font-weight: 400;
+  }
+
+  .notice:empty {
+    display: none;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .rows {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+    overflow: hidden;
+  }
+
+  .rows li {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+  }
+
+  .rows li + li {
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .rows li.selected {
+    background: var(--smrt-color-surface-container);
+  }
+
+  .includes {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-font-size-body-small, 0.75rem);
+  }
+
+  .icon {
+    display: inline-flex;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .text {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .name {
+    display: flex;
+    align-items: baseline;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .tag {
+    padding: 0 var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-font-size-label-small, 0.6875rem);
+  }
+
+  .text a {
+    width: fit-content;
+    color: var(--smrt-color-on-surface);
+    font-weight: 500;
+  }
+
+  .text .meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const RecordFeatures: import("svelte").Component<Record<string, never>, {}, "">;
+type RecordFeatures = ReturnType<typeof RecordFeatures>;
+export default RecordFeatures;