@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/planner/Planner.svelte

@@ -1,204 +1,412 @@
 <script lang="ts">
-import { Provider, tryGetAppStateContext } from '@happyvertical/smrt-svelte';
+import type { ShellSlotItem } from '@happyvertical/smrt-svelte/app';
 import {
-  ShellLayoutController,
-  ShellLayoutEditor,
-  useShellLayout,
-} from '@happyvertical/smrt-svelte/workspace';
-import { Tabs } from '@happyvertical/smrt-ui';
-import { onMount, untrack } from 'svelte';
-import CookbooksPanel from '../components/CookbooksPanel.svelte';
-import ExportPanel from '../components/ExportPanel.svelte';
-import FeaturesPanel from '../components/FeaturesPanel.svelte';
-import RecipeCards from '../components/RecipeCards.svelte';
-import SettingsPanel from '../components/SettingsPanel.svelte';
-import { browserStorage } from '../cookbook/storage.js';
-import { cookbookStore } from '../cookbook/store.svelte.js';
+  applyCookbookTheme,
+  buildCookbookShell,
+  CookbookApp,
+  type CookbookSectionHeadingInfo,
+  CookbookSectionPage,
+} from '@happyvertical/smrt-svelte/cookbook';
+import { ShellDockTool } from '@happyvertical/smrt-svelte/workspace';
+import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data-surface';
+import { type ComponentProps, onMount, tick, untrack } from 'svelte';
+import { aiState } from '../ai/instance.js';
+import smrtMark from '../assets/smrt-mark.svg';
+import { catalog, getModel } from '../catalog/index.js';
+import AdvancedStyles from '../components/AdvancedStyles.svelte';
+import AiModelsPage from '../components/AiModelsPage.svelte';
+import BrowserAssistant from '../components/BrowserAssistant.svelte';
+import HeaderIconLink from '../components/HeaderIconLink.svelte';
+import ModelWorkspace from '../components/ModelWorkspace.svelte';
+import PackagePage from '../components/PackagePage.svelte';
+import RecordView from '../components/RecordView.svelte';
+import SectionHeading from '../components/SectionHeading.svelte';
+import ThemeBridge from '../components/ThemeBridge.svelte';
+import { cookbookStore, SHELL_STORAGE_KEY } from '../cookbook/store.svelte.js';
+import type { Cookbook } from '../cookbook/types.js';
 import { provideDataSource, tryUseDataSource } from '../data/context.js';
 import { createPlannerDataSource } from '../data/planner-source.js';
-import { cookbookNavGroups } from '../library/menu.js';
-import { libraryState } from '../library/state.svelte.js';
+import { activeForms } from '../forms/active.js';
+import { runViewTransition } from '../motion/view-transition.js';
+import { plannerLoaders, resolveRecipeExport } from '../overviews/registry.js';
+import {
+  hasNavKey,
+  recipeNav,
+  recipes,
+  recipesById,
+} from '../recipes/index.js';
+import { pageScope, scopePreset } from '../recipes/scope.js';
 import { recipeState } from '../recipes/state.svelte.js';
-import { setBasePath } from './app.svelte.js';
-import { createPlannerAssistant } from './assistant.js';
-import { PLANNER_TAB_IDS, type PlannerTabId } from './commands/index.js';
-import { plannerController, plannerRuntime } from './instance.js';
+import { entryIndex } from '../sections/entries.js';
+import { sectionInfo, sectionTitle } from '../sections/info.js';
+import { sectionIdFromSlug } from '../sections/path.js';
+import { DEFAULT_PRESET } from '../theme/theme.js';
+import { appHref, setBasePath } from './app.svelte.js';
+import { PLANNER_TAB_IDS } from './commands/index.js';
+import { CHEF_HAT_ICON, EXPORT_ICON } from './header-icons.js';
+import PlannerControls from './PlannerControls.svelte';
+import PlannerLifecycle from './PlannerLifecycle.svelte';
+import { parseModelRoute, recordFilter, splitRoute } from './routes.js';
+import { plannerAssistantToggle, plannerShellProps } from './shell.js';
 import { plannerTab } from './tab.svelte.js';
+import { currentPlannerTitle } from './title.svelte.js';
+import { DEFAULT_PLANNER_TITLE } from './title.js';
 import type { PlannerProps } from './types.js';
 
 let {
-  controller = plannerController,
+  controller,
   basePath,
   inference,
-  layout = 'own',
-  persistence = 'self',
-  themeControls = false,
-  tabs = PLANNER_TAB_IDS,
+  persistence,
+  themeControls = true,
+  defaultTitle = DEFAULT_PLANNER_TITLE,
+  tabs,
+  backLink,
   onready,
 }: PlannerProps = $props();
 
-// Links to planner pages carry the base; set before anything renders them.
-$effect.pre(() => {
-  if (basePath !== undefined) setBasePath(basePath);
-});
-
-// Generated views and the Cookbooks tab read sample records from a data
-// source: use the host's, else make the planner's own.
-const dataSource =
-  tryUseDataSource() ?? provideDataSource(createPlannerDataSource());
-
-// smrt-svelte's inputs read the app state. Inside a host's own provider (or
-// the static app's AppShell) use that; otherwise the planner brings one.
-const hasAppState = tryGetAppStateContext() !== null;
+/** The mount's links: its pages are fragment routes, so no host router. */
+const hashHref = (path: string) => `#${path}`;
+// Before anything below renders a link: the planner-wide `appHref` writes
+// fragments too (`PlannerLifecycle` follows `basePath` when it changes).
+setBasePath(untrack(() => basePath) ?? '', 'hash');
+/** The assistant exists only when the host gave the planner a model. */
+const assistant = $derived(inference !== undefined);
 
-const labels: Record<PlannerTabId, string> = {
-  cookbooks: 'Cookbooks',
-  recipes: 'Recipes',
-  features: 'Features',
-  layout: 'Layout',
-  settings: 'Settings',
-  export: 'Export',
+const shellCatalog: ComponentProps<typeof CookbookApp>['catalog'] = {
+  recipes: recipes.map(({ id, label, nav, models, group, section }) => ({
+    id,
+    label,
+    nav,
+    models,
+    group,
+    section,
+  })),
+  models: catalog.packages.flatMap((pkg) =>
+    pkg.models.map((model) => ({
+      id: model.id,
+      name: model.name,
+      packageId: pkg.id,
+      description: model.description,
+      exposed: model.exposed,
+    })),
+  ),
 };
-const shown = $derived(tabs.filter((id) => PLANNER_TAB_IDS.includes(id)));
-const items = $derived(shown.map((id) => ({ id, label: labels[id] })));
-const active = $derived(
-  shown.includes(plannerTab.active)
-    ? plannerTab.active
-    : (shown[0] ?? 'recipes'),
+// The shell falls back to its own default preset; give it the Planner's so the
+// shell provider and ThemeBridge agree when a cookbook names no theme.
+const cookbook = $derived.by(() => {
+  const value = cookbookStore.snapshot();
+  return value.theme?.preset || value.theme?.custom
+    ? value
+    : { ...value, theme: { ...value.theme, preset: DEFAULT_PRESET } };
+});
+const title = $derived(currentPlannerTitle(defaultTitle));
+const shell = $derived(
+  buildCookbookShell({
+    cookbook: cookbook as ComponentProps<typeof CookbookApp>['cookbook'],
+    catalog: shellCatalog,
+  }),
 );
-
-// The headless layout controller: the menu the cookbook generates, edited
-// through the cookbook store, with no AppShell around.
-// Fixed at mount: the two editors are different objects.
-const layoutMode = untrack(() => layout);
-const ownLayout =
-  layoutMode === 'own'
-    ? new ShellLayoutController({
-        nav: () => [],
-        groups: () =>
-          cookbookNavGroups({
-            recipes: recipeState.ids,
-            features: recipeState.features,
-          }),
-        panels: () => undefined,
-        layout: () => cookbookStore.layout,
-        editable: () => true,
-        commit: (next) => cookbookStore.setLayout(next),
-      })
-    : null;
-const shellLayout = layoutMode === 'shell' ? useShellLayout() : null;
-
-const select = (id: string) => {
-  const tab = PLANNER_TAB_IDS.find((t) => t === id);
-  if (tab) plannerTab.active = tab;
-};
-
-// The controller's focus -> the tab on screen, and back, each only on a
-// difference, so a foreign controller and the app's own both stay in step.
-onMount(() => {
-  const stop = controller.subscribe((snapshot) => {
-    const tab = snapshot.focus.tab;
-    if (tab && tab !== plannerTab.active) plannerTab.active = tab;
-  });
-  return stop;
+const defaultRoute = $derived.by(() => {
+  const orderedId = cookbook.layout?.sectionOrder?.find(
+    (id) =>
+      !cookbook.layout?.hidden?.includes(id) &&
+      Object.hasOwn(shell.overviews, id),
+  );
+  const firstId = orderedId ?? shell.sections[0]?.id;
+  return firstId ? shell.sectionPath(firstId) : '/configure/';
 });
-$effect(() => {
-  const tab = plannerTab.active;
-  untrack(() => {
-    if (controller.snapshot().focus.tab !== tab) {
-      controller.run({ name: 'focus', input: { tab } });
-    }
-  });
+const source =
+  tryUseDataSource() ?? provideDataSource(createPlannerDataSource());
+// The app's menu entries with the model and scope each lists, for the
+// shortcuts' record counts.
+const sectionEntries = $derived(
+  entryIndex(
+    recipeState.ids.flatMap((id) => {
+      const recipe = recipesById.get(id);
+      return recipe ? [recipe] : [];
+    }),
+    recipeState.features,
+  ),
+);
+// What the overview widgets' loaders read when they run in this browser: the
+// sample source, the mount's links and the entry index. The shell adds the
+// resolved sections and its own entries for its shortcuts.
+const widgetContext = () => ({
+  source,
+  href: hashHref,
+  entryIndex: sectionEntries,
 });
-
-// A library cookbook applied by a command regenerates the sample records.
+// A reset (a cookbook applied, the app reset) swaps the rows underneath the
+// section page; remounting it reloads its widgets.
+let dataGeneration = $state(0);
+$effect(() =>
+  source.onReset?.(() => {
+    dataGeneration += 1;
+  }),
+);
+let route = $state('');
+// The mount's own hash router. Each change morphs through a view transition
+// (the chrome named below stays put, the content crossfades); the first read
+// paints plainly. `tick` keeps the DOM update inside the transition's
+// callback, where the browser snapshots the new state.
 onMount(() => {
-  const previous = plannerRuntime.onReplaced;
-  plannerRuntime.onReplaced = () => dataSource.reset?.();
+  // One hash change fires both `hashchange` and `popstate`, and `route` is
+  // only assigned inside the transition callback (after the old frame is
+  // captured), so the target is tracked synchronously to transition once.
+  let target = location.hash.slice(1);
+  route = target;
+  const read = () => {
+    const next = location.hash.slice(1);
+    if (next === target) return;
+    target = next;
+    void runViewTransition(async () => {
+      route = next;
+      await tick();
+    });
+  };
+  window.addEventListener('hashchange', read);
+  window.addEventListener('popstate', read);
   return () => {
-    plannerRuntime.onReplaced = previous;
+    window.removeEventListener('hashchange', read);
+    window.removeEventListener('popstate', read);
   };
 });
 
-// Saved in this browser, unless the host looks after it.
-onMount(() => {
-  if (persistence !== 'self') return;
-  if (!cookbookStore.loaded) {
-    libraryState.load();
-    cookbookStore.hydrate('', browserStorage());
-  }
+const currentRoute = $derived(route || defaultRoute);
+// A fragment route may carry a query (`#/m/commerce/Order/?customerId=x`).
+const routeParts = $derived(splitRoute(currentRoute));
+const pathParts = $derived(routeParts.path.split('/').filter(Boolean));
+const sectionSlug = $derived(pathParts[0] === 's' ? pathParts[1] : undefined);
+const packageId = $derived(
+  pathParts[0] === 'packages' ? pathParts[1] : undefined,
+);
+// `/m/<pkg>/<Model>/`, a keyed entry, a record's view or edit page.
+const modelRoute = $derived(
+  pathParts[0] === 'm'
+    ? parseModelRoute(pathParts.slice(1), hasNavKey)
+    : undefined,
+);
+const model = $derived(
+  modelRoute ? getModel(modelRoute.packageId, modelRoute.modelName) : undefined,
+);
+const applied = $derived(model ? recipeState.apply(model) : undefined);
+const forms = $derived(
+  model ? activeForms(recipeState.ids, recipes, model.id) : [],
+);
+// The slice a list page shows: a record's "View all" query, else the keyed
+// entry's filter (the plain entry gives those rows up).
+const scope = $derived.by(() => {
+  if (!model || !modelRoute) return undefined;
+  return (
+    recordFilter(routeParts.search, model) ??
+    pageScope(
+      model.id,
+      modelRoute.view,
+      recipeState.ids.flatMap((id) => {
+        const recipe = recipes.find((r) => r.id === id);
+        return recipe ? recipeNav(recipe) : [];
+      }),
+    )
+  );
 });
+const preset = $derived(scopePreset(scope));
+// The planner's own pages (`#/configure/`, and any route no page above
+// claims) show the customization controls; the header marks them current.
+const configuring = $derived(
+  !sectionSlug &&
+    !packageId &&
+    pathParts[0] !== 'advanced-styles' &&
+    pathParts[0] !== 'ai' &&
+    !(applied && model),
+);
+// `#/configure/<tab>/` opens that tab (the header's export shortcut is
+// `#/configure/export/`); the tabs themselves keep the route as it is.
+const routeTab = $derived(
+  pathParts[0] === 'configure'
+    ? PLANNER_TAB_IDS.find((id) => id === pathParts[1])
+    : undefined,
+);
 $effect(() => {
-  if (persistence !== 'self') return;
-  // Reading it all (layout is deep) subscribes the effect to every part.
-  void JSON.stringify(cookbookStore.snapshot());
-  cookbookStore.scheduleSave();
+  if (routeTab) plannerTab.active = routeTab;
 });
+const exporting = $derived(configuring && plannerTab.active === 'export');
+/** The mount's own way around: a fragment route. */
+const navigate = (path: string) => {
+  location.hash = path;
+};
 
-onMount(() => {
-  const assistant = inference
-    ? createPlannerAssistant(controller, inference)
-    : undefined;
-  onready?.({ controller, ...(assistant ? { assistant } : {}) });
-});
+function updateCookbook(next: ComponentProps<typeof CookbookApp>['cookbook']) {
+  cookbookStore.apply(next as Cookbook);
+}
+
+const slotItems = $derived<ShellSlotItem[]>([
+  ...(backLink
+    ? [
+        {
+          id: 'planner-back',
+          label: backLink.label,
+          slot: 'header.start' as const,
+          render: back,
+        },
+      ]
+    : []),
+  {
+    id: 'planner-customize',
+    label: 'Plan the app',
+    slot: 'header.end' as const,
+    render: customize,
+  },
+  {
+    id: 'planner-export',
+    label: 'Export the app',
+    slot: 'header.end' as const,
+    render: exportLink,
+  },
+]);
+// The shell's own `dock:assistant` button (header end, the dock tab on phones)
+// opens the assistant dock; until the assistant can answer it is a link to the
+// mount's AI setup page.
+const dockToggles = $derived(
+  assistant
+    ? [plannerAssistantToggle(appHref('/ai/'), aiState.assistantReady)]
+    : [],
+);
 </script>
 
-<svelte:window onpagehide={() => persistence === 'self' && cookbookStore.flush()} />
+{#snippet back()}
+  <a class="back" href={backLink?.href} data-planner-back>
+    <span aria-hidden="true">←</span>
+    <span>{backLink?.label}</span>
+  </a>
+{/snippet}
 
-{#snippet view()}
-<div class="planner">
-  <Tabs tabs={items} {active} onchange={select} aria-label="Planner">
-    {#if shown.includes('cookbooks')}
-      <div hidden={active !== 'cookbooks'}><CookbooksPanel /></div>
-    {/if}
-    {#if shown.includes('recipes')}
-      <div hidden={active !== 'recipes'}><RecipeCards /></div>
-    {/if}
-    {#if shown.includes('features')}
-      <div hidden={active !== 'features'}><FeaturesPanel /></div>
-    {/if}
-    {#if shown.includes('layout')}
-      <div hidden={active !== 'layout'} class="pane">
-        <p class="meta">
-          Reorder, move or hide navigation entries and choose which panels show.
-          The layout is saved with the cookbook.
-        </p>
-        <ShellLayoutEditor controller={ownLayout ?? shellLayout ?? undefined} />
-      </div>
-    {/if}
-    {#if shown.includes('settings')}
-      <div hidden={active !== 'settings'}><SettingsPanel {themeControls} /></div>
-    {/if}
-    {#if shown.includes('export')}
-      <div hidden={active !== 'export'}><ExportPanel /></div>
-    {/if}
-  </Tabs>
-</div>
+{#snippet assistantDock(registry: DataSurfaceRegistry)}
+  <ShellDockTool id="assistant" label="Assistant">
+    {#snippet render()}
+      <BrowserAssistant {registry} settingsHref={appHref('/ai/')} />
+    {/snippet}
+  </ShellDockTool>
 {/snippet}
 
-{#if hasAppState}
-  {@render view()}
-{:else}
-  <Provider>{@render view()}</Provider>
-{/if}
+{#snippet sectionHeading({ section }: { section: CookbookSectionHeadingInfo })}
+  <SectionHeading
+    icon={section.icon}
+    title={sectionTitle(section.title, defaultTitle)}
+    description={sectionInfo(section.id).description ?? section.description}
+  />
+{/snippet}
 
-<style>
-  .planner :global(.tab-panel) {
-    padding-top: var(--smrt-spacing-4);
-  }
+<!-- The chef's hat: the planner's own pages (Cookbooks, Recipes, Theme,
+     Settings, Export), apart from the shell's pencil, which edits the layout. -->
+{#snippet customize()}
+  <HeaderIconLink
+    href="#/configure/"
+    label="Plan the app"
+    path={CHEF_HAT_ICON}
+    current={configuring && !exporting}
+    transitionName="planner-customize"
+    onclick={() => plannerTab.leaveExport()}
+  />
+{/snippet}
 
-  .pane {
-    display: grid;
-    gap: var(--smrt-spacing-3);
-  }
+<!-- The export shortcut: the Export tab, where the cookbook is downloaded or
+     sent to the kitchen. The route selects the tab; the click also does, for
+     when the hash is already there. -->
+{#snippet exportLink()}
+  <HeaderIconLink
+    href="#/configure/export/"
+    label="Export the app"
+    icon={EXPORT_ICON}
+    current={exporting}
+    transitionName="planner-export"
+    onclick={() => {
+      plannerTab.active = 'export';
+    }}
+  />
+{/snippet}
 
-  /* `display: grid` would otherwise override the inactive pane's `hidden`. */
-  .pane[hidden] {
-    display: none;
-  }
+<!--
+  The shell's pencil (`layoutEditing`, start of the header) edits the menu
+  and every section overview in place; each edit comes back through
+  `oncookbookchange` and lands in the cookbook's `layout` / `overviews`, so it
+  is saved, exported and imported with the rest of the plan. `loaders`,
+  `widgetContext` and `resolveExport` wire the framework's own section pages
+  (`CookbookSectionPage`, drawn `plain` with the planner's heading) to the
+  sample data; `loaders.shortcuts` adds the record counts.
+-->
+<CookbookApp
+  cookbook={cookbook as ComponentProps<typeof CookbookApp>['cookbook']}
+  catalog={shellCatalog}
+  {title}
+  href={hashHref}
+  currentHref={`#${currentRoute}`}
+  homeHref={`#${defaultRoute}`}
+  storageKey={SHELL_STORAGE_KEY}
+  logoSrc={smrtMark}
+  {slotItems}
+  {dockToggles}
+  dock={assistant ? assistantDock : undefined}
+  loaders={plannerLoaders}
+  {widgetContext}
+  resolveExport={resolveRecipeExport}
+  layoutEditing={{ slot: 'header.start' }}
+  oncookbookchange={updateCookbook}
+  {...plannerShellProps()}
+>
+  <ThemeBridge deferInitial={persistence === 'host'} presetOverride={applyCookbookTheme(shell.theme)} />
+  <PlannerLifecycle {controller} {basePath} {inference} {persistence} {onready} links="hash" />
+  <main class="content">
+    {#if sectionSlug}
+      {#if cookbookStore.loaded}
+        {#key `${sectionSlug}:${dataGeneration}`}
+          <CookbookSectionPage
+            sectionId={sectionIdFromSlug(sectionSlug)}
+            presentation="plain"
+            heading={sectionHeading}
+          />
+        {/key}
+      {/if}
+    {:else if packageId}
+      <PackagePage id={packageId} backHref="#/configure/" />
+    {:else if pathParts[0] === 'advanced-styles'}
+      <AdvancedStyles backHref="#/configure/" />
+    {:else if pathParts[0] === 'ai'}
+      <AiModelsPage backHref="#/configure/" />
+    {:else if applied && model && modelRoute?.recordId}
+      {#key `${model.id}:${modelRoute.recordId}`}
+        <RecordView
+          packageId={modelRoute.packageId}
+          modelName={modelRoute.modelName}
+          recordId={modelRoute.recordId}
+          mode={modelRoute.mode}
+          href={hashHref}
+          {navigate}
+        />
+      {/key}
+    {:else if applied && model}
+      <ModelWorkspace model={applied.model} fields={applied.fields} {forms} {scope} {preset} href={hashHref} />
+    {:else}
+      <PlannerControls {controller} {basePath} {inference} {persistence} {themeControls} {tabs} managedByParent layout="shell" advancedStylesHref="#/advanced-styles/" />
+    {/if}
+  </main>
+</CookbookApp>
 
-  .meta {
-    margin: 0;
-    color: var(--smrt-color-on-surface-variant);
-  }
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  /* `view-transition-name`s: one per surface per screen (a duplicate aborts
+     the transition). AppShell names its brand, nav and dock (`smrt-shell-*`,
+     reserved); these are the planner's own. Like the shell's, they apply only
+     while a transition runs (`html[data-smrt-view-transition]`, set by
+     `runViewTransition`): a name makes a stacking context, and a permanent
+     one on `.content` trapped the record page's phone edit sheet under the
+     shell's top bar. */
+  .content { width: min(100%, 72rem); margin-inline: auto; padding: var(--smrt-spacing-6); }
+  :global([data-smrt-view-transition]) .content { view-transition-name: planner-content; }
+  :global([data-smrt-view-transition]) .back { view-transition-name: planner-back; }
+  .back { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); block-size: 2rem; padding-inline: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size, 0.8125rem); text-decoration: none; white-space: nowrap; border-radius: var(--smrt-radius-medium, 0.5rem); }
+  .back:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); color: var(--smrt-color-on-surface); }
+  .back:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+}
 </style>