@happyvertical/smrt-planner 0.0.0-stage → 0.0.2

package/dist/components/SectionPage.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+// A navigation section's own page. The sidebar lists only sections, so this is
+// where a section's entries are. The page is an editable overview (smrt#3727):
+// by default the entries as shortcut cards (with record counts), then the
+// section's lead model as a count and its latest records. In the shell's
+// layout edit mode the widgets get the overview chrome (add, move, resize,
+// configure, remove, reset) and the entries are listed below with grips,
+// rename and hide controls. A section id no overview can have shows the menu.
+import {
+  ShellSectionIcon,
+  ShellSectionMenu,
+  type ShellSectionMenuEntry,
+  useShellLayout,
+} from '@happyvertical/smrt-svelte/workspace';
+import { page } from '$app/state';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { useDataSource } from '../data/context.js';
+import { humanize, navNoun, pluralize, recordCount } from '../data/format.js';
+import { sectionOverview } from '../overviews/definitions.js';
+import { appHref } from '../planner/app.svelte.js';
+import { requestCreate } from '../planner/create.js';
+import { recipeModels, recipesById } from '../recipes/index.js';
+import { inScope } from '../recipes/scope.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { entryIndex, optionGroups } from '../sections/entries.js';
+import {
+  DEFAULT_SECTION_ICON,
+  sectionInfo,
+  sectionTitle,
+} from '../sections/info.js';
+import SectionActions from './SectionActions.svelte';
+import SectionIcons from './SectionIcons.svelte';
+import SectionOverview from './SectionOverview.svelte';
+
+interface SectionPageProps {
+  /** The layout id: `section:<id>`, `custom:<id>` or `package:<id>`. */
+  sectionId: string;
+}
+
+let { sectionId }: SectionPageProps = $props();
+
+const shell = useShellLayout();
+const source = useDataSource();
+
+const section = $derived(shell.sections.find((s) => s.id === sectionId));
+const title = $derived(sectionTitle(section?.heading));
+const icon = $derived(section?.icon ?? DEFAULT_SECTION_ICON);
+const description = $derived(sectionInfo(sectionId).description);
+const itemIds = $derived(section?.items.map((entry) => entry.id) ?? []);
+
+const added = $derived(
+  recipeState.ids.flatMap((id) => {
+    const recipe = recipesById.get(id);
+    return recipe ? [recipe] : [];
+  }),
+);
+const index = $derived(entryIndex(added, recipeState.features));
+const groups = $derived(optionGroups(itemIds, added));
+const overview = $derived(sectionOverview(sectionId));
+// The option editor offers the app's models: the added recipes' and features'.
+const models = $derived.by(() => {
+  const ids = new Set<string>();
+  const choices: { value: string; label: string }[] = [];
+  const offer = (id: string, name: string) => {
+    if (ids.has(id)) return;
+    ids.add(id);
+    choices.push({ value: id, label: pluralize(humanize(name)) });
+  };
+  for (const recipe of added) {
+    for (const { model } of recipeModels(recipe)) offer(model.id, model.name);
+  }
+  for (const entry of index.values()) offer(entry.model.id, entry.model.name);
+  return choices;
+});
+
+let counts = $state(new Map<string, number>());
+let generation = 0;
+
+async function loadCounts() {
+  const run = ++generation;
+  const next = new Map<string, number>();
+  await Promise.all(
+    itemIds.map(async (id) => {
+      const entry = index.get(id);
+      if (!entry) return;
+      const rows = await source.list(entry.model);
+      next.set(id, rows.filter((row) => inScope(entry.scope, row)).length);
+    }),
+  );
+  // A newer run (the section or the data changed meanwhile) wins.
+  if (run === generation) counts = next;
+}
+
+$effect(() => {
+  void itemIds;
+  void index;
+  void loadCounts();
+});
+// A reset (a cookbook applied, the app reset) swaps the rows underneath.
+$effect(() => source.onReset?.(() => void loadCounts()));
+
+const newNoun = (entry: ShellSectionMenuEntry) => {
+  const target = index.get(entry.id);
+  return target ? navNoun(entry.label, target.noun) : undefined;
+};
+
+function startNew(entry: ShellSectionMenuEntry) {
+  requestCreate(new URL(entry.href, page.url).pathname);
+}
+</script>
+
+<svelte:head>
+  <title>{title} · smrt planner</title>
+</svelte:head>
+
+{#snippet meta(entry: ShellSectionMenuEntry)}
+  {#if counts.has(entry.id)}{recordCount(counts.get(entry.id) ?? 0)}{/if}
+{/snippet}
+
+{#snippet actions(entry: ShellSectionMenuEntry)}
+  {@const noun = newNoun(entry)}
+  {#if noun}
+    <a class="new" href={entry.href} onclick={() => startNew(entry)}>New {noun}</a>
+  {/if}
+{/snippet}
+
+{#if cookbookStore.loaded}
+  <main>
+    {#if section}
+      <header>
+        <span class="mark"><ShellSectionIcon name={icon} size={28} /></span>
+        <div class="heading">
+          <h1>{title}</h1>
+          {#if description}<p>{description}</p>{/if}
+        </div>
+        {#if groups.length === 1}
+          <SectionIcons section={groups[0].id} label={groups[0].label} />
+        {:else if groups.length > 1}
+          <SectionActions label={title} {groups} />
+        {/if}
+      </header>
+      {#if overview}
+        {#key sectionId}
+          <SectionOverview
+            definition={overview}
+            entries={index}
+            {models}
+            label={`${title} overview`}
+          />
+        {/key}
+        {#if shell.editing}
+          <section class="entries" aria-labelledby="section-entries">
+            <h2 id="section-entries">Menu entries</h2>
+            <ShellSectionMenu {sectionId} {meta} />
+          </section>
+        {/if}
+      {:else}
+        <ShellSectionMenu {sectionId} layout="cards" {meta} {actions} />
+      {/if}
+    {:else}
+      <h1>Section not found</h1>
+      <p>This section is not in your app. <a href={appHref('/')}>Back to the Planner</a></p>
+    {/if}
+  </main>
+{/if}
+
+<style>
+  main {
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    width: min(100%, 64rem);
+    margin-inline: auto;
+    padding: var(--smrt-spacing-6);
+  }
+
+  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);
+  }
+
+  .entries {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .entries h2 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .new {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-full, 999px);
+    color: var(--smrt-color-primary);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .new:hover,
+  .new:focus-visible {
+    background: var(--smrt-color-surface-container-high);
+  }
+</style>

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

@@ -0,0 +1,7 @@
+interface SectionPageProps {
+    /** The layout id: `section:<id>`, `custom:<id>` or `package:<id>`. */
+    sectionId: string;
+}
+declare const SectionPage: import("svelte").Component<SectionPageProps, {}, "">;
+type SectionPage = ReturnType<typeof SectionPage>;
+export default SectionPage;

package/dist/components/SettingsPanel.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import type { AppSettings as Settings } from '../settings/app-settings.js';
+import AppSettings from './AppSettings.svelte';
+import ThemeSection from './ThemeSection.svelte';
+
+interface SettingsPanelProps {
+  /** Show the theme preset and light/dark controls (they need a theme provider). */
+  themeControls?: boolean;
+}
+
+let { themeControls = true }: SettingsPanelProps = $props();
+
+// The editor holds its own copy so typing is never fought by the store;
+// changes reach the cookbook after a short pause (and its save follows).
+const DELAY_MS = 300;
+let draft = $state<Settings>(cookbookStore.settings());
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+function change(next: Settings) {
+  draft = next;
+  clearTimeout(timer);
+  timer = setTimeout(commit, DELAY_MS);
+}
+
+function commit() {
+  clearTimeout(timer);
+  timer = undefined;
+  cookbookStore.setSettings(draft);
+}
+
+// A cookbook, import or reset replaces the cookbook: show what it holds.
+$effect(() => {
+  const stored = cookbookStore.settings();
+  if (timer === undefined) draft = stored;
+});
+</script>
+
+<div class="pane">
+  <p class="meta">
+    Defaults for this app. They apply to new records only; existing records
+    keep their values.
+  </p>
+  <AppSettings value={draft} onchange={change} idPrefix="app-settings-tab" />
+  <ThemeSection provider={themeControls} />
+</div>
+
+<svelte:window onpagehide={commit} />
+
+<style>
+  .pane {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .meta {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

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

@@ -0,0 +1,7 @@
+interface SettingsPanelProps {
+    /** Show the theme preset and light/dark controls (they need a theme provider). */
+    themeControls?: boolean;
+}
+declare const SettingsPanel: import("svelte").Component<SettingsPanelProps, {}, "">;
+type SettingsPanel = ReturnType<typeof SettingsPanel>;
+export default SettingsPanel;

package/dist/components/ThemeBridge.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+import {
+  getThemeContext,
+  type ThemePreset,
+} from '@happyvertical/smrt-ui/themes';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { resolveTheme } from '../theme/runtime.js';
+import type { ColorSchemeSetting } from '../theme/theme.js';
+
+// The app document owns the theme. This applies it to the shell's
+// ThemeProvider once the saved document is read, and reads back a change made
+// through the provider's own controls (ThemeSwitcher, ColorSchemeToggle) so
+// that it is saved with the document.
+const context = getThemeContext();
+
+// What this bridge last told the provider, to tell its own writes from a
+// person's. Null until the document has been applied once.
+let applied: { preset: string; colorScheme: ColorSchemeSetting } | null = null;
+
+// Document -> provider.
+$effect(() => {
+  if (!cookbookStore.loaded) return;
+  const wanted = resolveTheme(cookbookStore.theme);
+  if (
+    applied?.preset === wanted.preset &&
+    applied.colorScheme === wanted.colorScheme
+  ) {
+    return;
+  }
+  applied = wanted;
+  if (context.state.preset !== wanted.preset)
+    context.setPreset(wanted.preset as ThemePreset);
+  if (context.state.colorScheme !== wanted.colorScheme) {
+    context.setColorScheme(wanted.colorScheme);
+  }
+});
+
+// Provider -> document.
+$effect(() => {
+  const { preset, colorScheme } = context.state;
+  if (!applied || !cookbookStore.loaded) return;
+  const before = applied;
+  if (preset !== before.preset) {
+    applied = { ...before, preset };
+    cookbookStore.setTheme({
+      ...cookbookStore.theme,
+      preset,
+      custom: undefined,
+    });
+  }
+  if (colorScheme !== before.colorScheme) {
+    applied = { ...(applied ?? before), colorScheme };
+    cookbookStore.setTheme({ ...cookbookStore.theme, colorScheme });
+  }
+});
+</script>

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

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

package/dist/components/ThemeSection.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+import { Button } from '@happyvertical/smrt-ui';
+import { FieldLabel, Input, Select } from '@happyvertical/smrt-ui/forms';
+import {
+  ColorSchemeToggle,
+  ThemeSwitcher,
+} from '@happyvertical/smrt-ui/themes';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { normalizeHex, THEME_FONTS } from '../theme/theme.js';
+
+interface ThemeSectionProps {
+  /**
+   * Show the preset and light/dark controls, which drive a smrt-ui theme
+   * provider. A host that applies the cookbook's theme itself turns them off
+   * and keeps the brand colour, which only writes the document.
+   */
+  provider?: boolean;
+}
+
+let { provider = true }: ThemeSectionProps = $props();
+
+// The app's look. The preset and scheme controls change the shell's theme
+// provider, which ThemeBridge reads back into the document; the brand colour
+// writes the document and the bridge applies it.
+const custom = $derived(cookbookStore.theme?.custom);
+let hex = $state('');
+let invalid = $state(false);
+
+$effect(() => {
+  hex = custom?.primary ?? '';
+  invalid = false;
+});
+
+function setBrand(primary: string, fontFamily = custom?.fontFamily) {
+  const normalized = normalizeHex(primary);
+  invalid = !normalized;
+  if (!normalized) return;
+  cookbookStore.setTheme({
+    ...cookbookStore.theme,
+    custom: { primary: normalized, ...(fontFamily ? { fontFamily } : {}) },
+  });
+}
+
+function setFont(fontFamily: string) {
+  if (!custom) return;
+  setBrand(custom.primary, fontFamily || undefined);
+}
+
+function resetToPreset() {
+  cookbookStore.setTheme({ ...cookbookStore.theme, custom: undefined });
+}
+</script>
+
+<section class="theme" aria-labelledby="theme-heading">
+  <h2 id="theme-heading">Theme</h2>
+  <p class="meta">
+    The look of this app. It is saved with your cookbook and applies as you
+    change it.
+  </p>
+  {#if provider}
+    <div class="row">
+      <ThemeSwitcher label="Preset" variant="select" showIcons={false} />
+      <ColorSchemeToggle variant="segmented" ariaLabel="Colour scheme" />
+    </div>
+  {/if}
+  <div class="brand">
+    <div class="field">
+      <FieldLabel for="theme-brand-colour" label="Brand colour" />
+      <div class="pick">
+        <input
+          id="theme-brand-colour"
+          class="swatch"
+          type="color"
+          aria-label="Brand colour picker"
+          value={custom?.primary ?? '#e68a00'}
+          oninput={(event) => setBrand(event.currentTarget.value)}
+        />
+        <Input
+          type="text"
+          aria-label="Brand colour hex"
+          placeholder="#c2410c"
+          autocomplete="off"
+          spellcheck="false"
+          value={hex}
+          aria-invalid={invalid}
+          oninput={(event) => {
+            hex = event.currentTarget.value;
+            if (hex.trim()) setBrand(hex);
+          }}
+        />
+      </div>
+    </div>
+    <div class="field">
+      <FieldLabel for="theme-brand-font" label="Font" />
+      <Select
+        id="theme-brand-font"
+        value={custom?.fontFamily ?? ''}
+        disabled={!custom}
+        onchange={(event) => setFont(event.currentTarget.value)}
+      >
+        <option value="">Default</option>
+        {#each Object.keys(THEME_FONTS) as font (font)}
+          <option value={font}>{font}</option>
+        {/each}
+      </Select>
+      {#if !custom}
+        <span class="hint">Pick a brand colour to choose a font.</span>
+      {/if}
+    </div>
+    {#if custom}
+      <Button variant="secondary" onclick={resetToPreset}>Reset to preset</Button>
+    {/if}
+  </div>
+  {#if invalid}
+    <p class="meta" role="alert">Use a hex colour like #c2410c.</p>
+  {/if}
+</section>
+
+<style>
+  .theme {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .row,
+  .brand {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-4);
+    align-items: end;
+  }
+
+  .field {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+  }
+
+  .pick {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+    align-items: center;
+  }
+
+  .swatch {
+    inline-size: 3rem;
+    block-size: 2.5rem;
+    padding: var(--smrt-spacing-1);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    background: var(--smrt-color-surface);
+    cursor: pointer;
+  }
+
+  .hint {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.8125rem;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+interface ThemeSectionProps {
+    /**
+     * Show the preset and light/dark controls, which drive a smrt-ui theme
+     * provider. A host that applies the cookbook's theme itself turns them off
+     * and keeps the brand colour, which only writes the document.
+     */
+    provider?: boolean;
+}
+declare const ThemeSection: import("svelte").Component<ThemeSectionProps, {}, "">;
+type ThemeSection = ReturnType<typeof ThemeSection>;
+export default ThemeSection;