@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/planner/PlannerControls.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+import { Provider, tryGetAppStateContext } from '@happyvertical/smrt-svelte';
+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 ThemeSection from '../components/ThemeSection.svelte';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { provideDataSource, tryUseDataSource } from '../data/context.js';
+import { createPlannerDataSource } from '../data/planner-source.js';
+import { cookbookNavGroups } from '../library/menu.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { PLANNER_TAB_IDS, type PlannerTabId } from './commands/index.js';
+import { plannerController } from './instance.js';
+import PlannerLifecycle from './PlannerLifecycle.svelte';
+import { plannerTab } from './tab.svelte.js';
+import type { PlannerProps } from './types.js';
+
+/**
+ * The planner's customization controls alone (Cookbooks, Recipes, Theme,
+ * Settings, Export as tabs), for a host that owns the surrounding shell; the
+ * complete `Planner` mounts the same inside its own shell.
+ */
+interface PlannerControlsProps extends PlannerProps {
+  /**
+   * `true` when the complete `Planner` renders these: its own lifecycle
+   * already configured the controller, persistence and inference, so the
+   * controls do not mount a second one.
+   */
+  managedByParent?: boolean;
+}
+
+const DEFAULT_TABS: PlannerTabId[] = [
+  'cookbooks',
+  'recipes',
+  'theme',
+  'settings',
+  'export',
+];
+const UNLISTED_TABS: PlannerTabId[] = ['features', 'layout'];
+
+let {
+  controller = plannerController,
+  basePath,
+  inference,
+  layout = 'own',
+  persistence = 'self',
+  themeControls = false,
+  advancedStylesHref,
+  tabs = DEFAULT_TABS,
+  onready,
+  managedByParent = false,
+}: PlannerControlsProps = $props();
+
+// Generated views and the Cookbooks tab read sample records from a data
+// source: use the host's, else make the planner's own.
+if (!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;
+
+const labels: Record<PlannerTabId, string> = {
+  cookbooks: 'Cookbooks',
+  recipes: 'Recipes',
+  features: 'Features',
+  layout: 'Layout',
+  theme: 'Theme',
+  settings: 'Settings',
+  export: 'Export',
+};
+const shown = $derived(tabs.filter((id) => PLANNER_TAB_IDS.includes(id)));
+// Features and Layout left the default tab strip but stay reachable from
+// their links, the command palette and focus commands.
+const reachable = $derived<readonly PlannerTabId[]>(
+  tabs === DEFAULT_TABS ? [...shown, ...UNLISTED_TABS] : shown,
+);
+const items = $derived(shown.map((id) => ({ id, label: labels[id] })));
+const active = $derived(
+  reachable.includes(plannerTab.active)
+    ? plannerTab.active
+    : (shown[0] ?? 'recipes'),
+);
+
+// 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;
+});
+$effect(() => {
+  const tab = plannerTab.active;
+  untrack(() => {
+    if (controller.snapshot().focus.tab !== tab) {
+      controller.run({ name: 'focus', input: { tab } });
+    }
+  });
+});
+</script>
+
+{#if !managedByParent}
+  <PlannerLifecycle {controller} {basePath} {inference} {persistence} {onready} />
+{/if}
+
+{#snippet view()}
+<div class="planner">
+  <Tabs tabs={items} {active} onchange={select} aria-label="Planner">
+    {#if reachable.includes('cookbooks')}
+      <div hidden={active !== 'cookbooks'}><CookbooksPanel /></div>
+    {/if}
+    {#if reachable.includes('recipes')}
+      <div hidden={active !== 'recipes'}><RecipeCards /></div>
+    {/if}
+    {#if reachable.includes('features')}
+      <div hidden={active !== 'features'}><FeaturesPanel /></div>
+    {/if}
+    {#if reachable.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 reachable.includes('theme')}
+      <div hidden={active !== 'theme'}><ThemeSection provider={themeControls} {advancedStylesHref} /></div>
+    {/if}
+    {#if reachable.includes('settings')}
+      <div hidden={active !== 'settings'}><SettingsPanel /></div>
+    {/if}
+    {#if reachable.includes('export')}
+      <div hidden={active !== 'export'}><ExportPanel /></div>
+    {/if}
+  </Tabs>
+</div>
+{/snippet}
+
+{#if hasAppState}
+  {@render view()}
+{:else}
+  <Provider>{@render view()}</Provider>
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .planner :global(.tab-panel) {
+    padding-top: var(--smrt-spacing-4);
+  }
+
+  /* The strip persists across configure-page route changes; the panel below
+     crossfades with the content. smrt-ui's Tabs owns the classes (`tabs-nav`
+     for button tabs, `tabs-links` for link tabs; one strip per Tabs). Named
+     only while a transition runs, as in Planner.svelte. */
+  :global([data-smrt-view-transition]) .planner :global(.tabs-nav),
+  :global([data-smrt-view-transition]) .planner :global(.tabs-links) {
+    view-transition-name: planner-tabs;
+  }
+
+  /* Phones: smrt-ui's Tabs strip scrolls sideways but shows no sign of it,
+     so the last tab (Export) is easy to miss. Tabs snap into place, and where
+     scroll-driven animations exist a fade at the trailing edge says more
+     follow, lifting as the strip reaches its end (an inactive timeline, a
+     strip that fits, leaves the fade at its initial 0). The real home for
+     this is smrt-ui's Tabs. */
+  .planner :global(.smrt-tabs__nav) {
+    scroll-snap-type: x proximity;
+    overscroll-behavior-x: contain;
+  }
+
+  .planner :global(.smrt-tabs__tab-button) {
+    scroll-snap-align: start;
+  }
+
+  @property --planner-tabs-fade {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0rem;
+  }
+
+  @supports (animation-timeline: scroll()) {
+    .planner :global(.smrt-tabs__nav) {
+      mask-image: linear-gradient(
+        to right,
+        black calc(100% - var(--planner-tabs-fade)),
+        transparent
+      );
+      animation: planner-tabs-fade linear both;
+      animation-timeline: scroll(self inline);
+    }
+
+    @keyframes planner-tabs-fade {
+      from {
+        --planner-tabs-fade: 3rem;
+      }
+      to {
+        --planner-tabs-fade: 0rem;
+      }
+    }
+  }
+
+  .pane {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  /* `display: grid` would otherwise override the inactive pane's `hidden`. */
+  .pane[hidden] {
+    display: none;
+  }
+
+  .meta {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+}
+</style>

package/dist/planner/PlannerControls.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { PlannerProps } from './types.ts';
+/**
+ * The planner's customization controls alone (Cookbooks, Recipes, Theme,
+ * Settings, Export as tabs), for a host that owns the surrounding shell; the
+ * complete `Planner` mounts the same inside its own shell.
+ */
+interface PlannerControlsProps extends PlannerProps {
+    /**
+     * `true` when the complete `Planner` renders these: its own lifecycle
+     * already configured the controller, persistence and inference, so the
+     * controls do not mount a second one.
+     */
+    managedByParent?: boolean;
+}
+declare const PlannerControls: import("svelte").Component<PlannerControlsProps, {}, "">;
+type PlannerControls = ReturnType<typeof PlannerControls>;
+export default PlannerControls;

package/dist/planner/PlannerLifecycle.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import { aiState } from '../ai/instance.js';
+import { browserStorage } from '../cookbook/storage.js';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { provideDataSource, tryUseDataSource } from '../data/context.js';
+import { createPlannerDataSource } from '../data/planner-source.js';
+import { configFromProp } from '../inference/config.js';
+import { libraryState } from '../library/state.svelte.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { type LinkMode, setBasePath } from './app.svelte.js';
+import { createPlannerAssistant } from './assistant.js';
+import { plannerController, plannerRuntime } from './instance.js';
+import type { PlannerProps } from './types.js';
+
+let {
+  controller = plannerController,
+  basePath,
+  inference,
+  persistence = 'self',
+  onready,
+  links = 'path',
+}: Pick<
+  PlannerProps,
+  'controller' | 'basePath' | 'inference' | 'persistence' | 'onready'
+> & {
+  /** `'hash'` in the complete `Planner`, whose pages are fragment routes. */
+  links?: LinkMode;
+} = $props();
+
+const dataSource =
+  tryUseDataSource() ?? provideDataSource(createPlannerDataSource());
+
+$effect.pre(() => {
+  if (basePath !== undefined || links !== 'path') {
+    setBasePath(basePath ?? '', links);
+  }
+});
+
+onMount(() => {
+  const previous = plannerRuntime.onReplaced;
+  plannerRuntime.onReplaced = () => dataSource.reset?.();
+  if (persistence === 'self' && !cookbookStore.loaded) {
+    libraryState.load();
+    cookbookStore.hydrate('', browserStorage());
+  }
+  const assistant = inference
+    ? createPlannerAssistant(controller, inference)
+    : undefined;
+  // The complete Planner's own dock and AI models page read `aiState`, the
+  // store the static app configures from `planner.config.json`; a mount
+  // configures it from the prop instead (the prop wins, as documented).
+  if (inference) {
+    if ('chat' in inference) aiState.useChat(inference.chat, 'Host model');
+    else aiState.configure(configFromProp(inference));
+    aiState.hydrate(
+      recipeState.ids.length > 0 || recipeState.features.length > 0,
+    );
+  }
+  onready?.({ controller, ...(assistant ? { assistant } : {}) });
+  return () => {
+    plannerRuntime.onReplaced = previous;
+  };
+});
+
+$effect(() => {
+  if (persistence !== 'self') return;
+  void JSON.stringify(cookbookStore.snapshot());
+  cookbookStore.scheduleSave();
+});
+</script>
+
+<svelte:window onpagehide={() => persistence === 'self' && cookbookStore.flush()} />

package/dist/planner/PlannerLifecycle.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type LinkMode } from './app.svelte.ts';
+import type { PlannerProps } from './types.ts';
+type $$ComponentProps = Pick<PlannerProps, 'controller' | 'basePath' | 'inference' | 'persistence' | 'onready'> & {
+    /** `'hash'` in the complete `Planner`, whose pages are fragment routes. */
+    links?: LinkMode;
+};
+declare const PlannerLifecycle: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlannerLifecycle = ReturnType<typeof PlannerLifecycle>;
+export default PlannerLifecycle;

package/dist/planner/app.svelte.d.ts

@@ -1,6 +1,16 @@
-export declare function setBasePath(path: string): void;
+/**
+ * How in-app links are written. The static app serves `/m/...` pages under
+ * `basePath`; the mounted `Planner` routes by URL fragment (`#/m/...`) and
+ * serves nothing from the host's paths, so its links are hashes and carry no
+ * query (the mount keeps its selection in memory).
+ */
+export type LinkMode = 'path' | 'hash';
+export declare function setBasePath(path: string, links?: LinkMode): void;
 export declare function getBasePath(): string;
 /** The query string carrying the shareable URL state (the package selection). */
 export declare function appQuery(): string;
-/** An in-app path (`/m/commerce/Order/`) carrying the current app state. */
+/**
+ * An in-app path (`/m/commerce/Order/`) as a link: under the base path with
+ * the current app state, or, in a mounted `Planner`, as its fragment route.
+ */
 export declare function appHref(path: string): string;

package/dist/planner/app.svelte.js

@@ -7,8 +7,10 @@ import { selection } from "./selection.svelte.js";
  * `$app/paths`, so the planner needs no SvelteKit router to build its links.
  */
 let basePath = '';
-export function setBasePath(path) {
+let linkMode = 'path';
+export function setBasePath(path, links = 'path') {
     basePath = path.replace(/\/+$/, '');
+    linkMode = links;
 }
 export function getBasePath() {
     return basePath;
@@ -17,7 +19,15 @@ export function getBasePath() {
 export function appQuery() {
     return composeQuery({ packages: selection.ids });
 }
-/** An in-app path (`/m/commerce/Order/`) carrying the current app state. */
+/**
+ * An in-app path (`/m/commerce/Order/`) as a link: under the base path with
+ * the current app state, or, in a mounted `Planner`, as its fragment route.
+ */
 export function appHref(path) {
-    return `${basePath}${path}${appQuery()}`;
+    if (linkMode === 'hash')
+        return `#${path}`;
+    const query = appQuery();
+    // A path may carry its own query ("View all": `?customerId=<id>`).
+    const joined = query && path.includes('?') ? `${path}&${query.slice(1)}` : path + query;
+    return `${basePath}${joined}`;
 }

package/dist/planner/assistant.js

@@ -18,11 +18,13 @@ function recipeStoreOf(controller) {
 function settingsStoreOf(controller) {
     return {
         read: () => {
-            const { currency, taxRate, paymentTerms } = controller.snapshot().settings;
+            const { currency, taxRate, paymentTerms, pricesIncludeTax, taxRounding } = controller.snapshot().settings;
             return {
                 currency,
                 taxRate: Number((taxRate / 100).toFixed(6)),
                 paymentTerms,
+                pricesIncludeTax,
+                taxRounding,
             };
         },
         write: (settings) => {
@@ -34,6 +36,8 @@ function settingsStoreOf(controller) {
                     ...(settings.paymentTerms
                         ? { paymentTerms: settings.paymentTerms }
                         : {}),
+                    pricesIncludeTax: settings.pricesIncludeTax,
+                    taxRounding: settings.taxRounding,
                 },
             });
         },
@@ -42,7 +46,8 @@ function settingsStoreOf(controller) {
 function themeStoreOf(controller) {
     return {
         read: () => {
-            const { preset, primary, colorScheme } = controller.snapshot().theme;
+            const snapshot = controller.snapshot().theme;
+            const { preset, primary, colorScheme } = snapshot;
             const theme = {};
             if (preset)
                 theme.preset = preset;
@@ -51,6 +56,16 @@ function themeStoreOf(controller) {
             if (colorScheme !== 'system') {
                 theme.colorScheme = colorScheme;
             }
+            if (snapshot.borderRadius) {
+                theme.borderRadius =
+                    snapshot.borderRadius;
+            }
+            if (snapshot.density) {
+                theme.density = snapshot.density;
+            }
+            if (snapshot.contrast) {
+                theme.contrast = snapshot.contrast;
+            }
             return Object.keys(theme).length ? theme : undefined;
         },
         write: (theme) => {
@@ -65,6 +80,9 @@ function themeStoreOf(controller) {
                     ...(theme.preset ? { preset: theme.preset } : {}),
                     ...(theme.custom ? { primary: theme.custom.primary } : {}),
                     ...(theme.colorScheme ? { colorScheme: theme.colorScheme } : {}),
+                    ...(theme.borderRadius ? { borderRadius: theme.borderRadius } : {}),
+                    ...(theme.density ? { density: theme.density } : {}),
+                    ...(theme.contrast ? { contrast: theme.contrast } : {}),
                 },
             });
         },

package/dist/planner/commands/adapter.js

@@ -410,8 +410,9 @@ export function createPlannerAdapter(config) {
     }
     /**
      * Applying a library cookbook that sets no theme keeps the person's own look
-     * (as the Cookbooks tab does): the preset, brand colour and colour scheme
-     * (the font is not carried; `set_theme` has no font). Returns the patch.
+     * (as the Cookbooks tab does): the preset, brand colour, colour scheme,
+     * corner radius, density and contrast (the font is not carried). Returns
+     * the patch.
      */
     function themeToKeep(raw) {
         const input = raw.input;
@@ -430,6 +431,12 @@ export function createPlannerAdapter(config) {
             patch.primary = theme.custom.primary;
         if (theme.colorScheme)
             patch.colorScheme = theme.colorScheme;
+        if (theme.borderRadius)
+            patch.borderRadius = theme.borderRadius;
+        if (theme.density)
+            patch.density = theme.density;
+        if (theme.contrast)
+            patch.contrast = theme.contrast;
         return Object.keys(patch).length ? patch : undefined;
     }
     function runKeepingTheme(raw, runOptions, patch) {

package/dist/planner/commands/types.d.ts

@@ -2,7 +2,7 @@ import type { CommandError as EngineCommandError, CommandInputs as EngineCommand
 export { COOKBOOK_COMMANDS_VERSION as PLANNER_COMMANDS_VERSION } from '@happyvertical/smrt-core/cookbook/engine';
 export type { ExportData, RecipeChanges, RunOptions };
 /** The planner's tabs, in order. Navigation only; never part of the cookbook. */
-export declare const PLANNER_TAB_IDS: readonly ["cookbooks", "recipes", "features", "layout", "settings", "export"];
+export declare const PLANNER_TAB_IDS: readonly ["cookbooks", "recipes", "features", "layout", "theme", "settings", "export"];
 export type PlannerTabId = (typeof PLANNER_TAB_IDS)[number];
 /** Input of each command, keyed by the command's (tool) name. */
 export interface CommandInputs extends EngineCommandInputs {

package/dist/planner/commands/types.js

@@ -13,6 +13,7 @@ export const PLANNER_TAB_IDS = [
     'recipes',
     'features',
     'layout',
+    'theme',
     'settings',
     'export',
 ];

package/dist/planner/header-icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The planner's header controls, as SVG paths for smrt-ui's `Icon` (a filled
+ * path in a 24x24 box, the same language as the shell's own icons).
+ *
+ * The chef's hat (a toque: three lobes over a crown and a band) is an
+ * original drawing, so no outside licence applies; neither smrt-ui's presets
+ * nor smrt-svelte's `SHELL_ICON_PATHS` have one. The export control uses
+ * smrt-ui's `download` preset by name (`EXPORT_ICON`).
+ */
+export declare const CHEF_HAT_ICON = "M4 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 1 1-7 0zM13 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 1 1-7 0zM8 7a4 4 0 1 1 8 0a4 4 0 1 1-8 0zM6 9.5h12V15H6zM7 16.5h10a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1.5a1 1 0 0 1 1-1z";
+/** smrt-ui's preset icon for the export control. */
+export declare const EXPORT_ICON = "download";

package/dist/planner/header-icons.js

@@ -0,0 +1,12 @@
+/**
+ * The planner's header controls, as SVG paths for smrt-ui's `Icon` (a filled
+ * path in a 24x24 box, the same language as the shell's own icons).
+ *
+ * The chef's hat (a toque: three lobes over a crown and a band) is an
+ * original drawing, so no outside licence applies; neither smrt-ui's presets
+ * nor smrt-svelte's `SHELL_ICON_PATHS` have one. The export control uses
+ * smrt-ui's `download` preset by name (`EXPORT_ICON`).
+ */
+export const CHEF_HAT_ICON = 'M4 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 1 1-7 0zM13 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 1 1-7 0zM8 7a4 4 0 1 1 8 0a4 4 0 1 1-8 0zM6 9.5h12V15H6zM7 16.5h10a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1.5a1 1 0 0 1 1-1z';
+/** smrt-ui's preset icon for the export control. */
+export const EXPORT_ICON = 'download';

package/dist/planner/host/HostPlanner.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import Planner from '../Planner.svelte';
+import {
+  type CallKitchenTool,
+  createHostSession,
+  type HostPlan,
+  type HostSession,
+} from './session.svelte.js';
+
+/**
+ * The planner inside a Kitchen host (an MCP app or widget): the complete
+ * `Planner` over a host session that reads and writes the plan through the
+ * host's tools, reconnecting while the page is visible.
+ */
+interface HostPlannerProps {
+  /** Calls one of the host's Kitchen tools by name with its arguments. */
+  callTool: CallKitchenTool;
+  /** A plan the host already holds, received before the first connection. */
+  initial?: HostPlan;
+  /** Called once the session is mounted, with the session to drive it. */
+  onready?: (session: HostSession) => void;
+}
+
+let { callTool, initial, onready }: HostPlannerProps = $props();
+const session = createHostSession((name, args) => callTool(name, args));
+onMount(() => {
+  const stop = session.mount();
+  if (initial) session.receive(initial);
+  const refresh = setInterval(() => {
+    const id = session.current?.planId ?? session.pendingPlanId;
+    if (
+      id &&
+      !session.busy &&
+      !session.retryable &&
+      document.visibilityState === 'visible'
+    ) {
+      void session.connect(id);
+    }
+  }, 1500);
+  try {
+    onready?.(session);
+  } catch (cause) {
+    session.reportError(cause);
+  }
+  return () => {
+    clearInterval(refresh);
+    stop();
+  };
+});
+</script>
+{#if session.error}<p role="alert">{session.error}</p>{/if}
+{#if session.preservedDraft}
+  <details><summary>Preserved edit</summary><textarea readonly value={JSON.stringify(session.preservedDraft, null, 2)} aria-label="Preserved cookbook edit"></textarea></details>
+  <button type="button" onclick={() => session.dismissPreservedDraft()}>Dismiss preserved edit</button>
+{/if}
+{#if session.retryable}
+  <button disabled={session.busy} onclick={() => session.retry()}>Retry same edit</button>
+{/if}
+{#if session.current}
+  <fieldset disabled={session.locked} aria-busy={session.busy}>
+    <Planner persistence="host" themeControls={true} />
+  </fieldset>
+{:else}<p role="status">Waiting for a Kitchen plan…</p>{/if}
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+fieldset { border: 0; padding: 0; min-width: 0; } textarea { width: 100%; min-height: 12rem; }
+}
+</style>

package/dist/planner/host/HostPlanner.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type CallKitchenTool, type HostPlan, type HostSession } from './session.svelte.ts';
+/**
+ * The planner inside a Kitchen host (an MCP app or widget): the complete
+ * `Planner` over a host session that reads and writes the plan through the
+ * host's tools, reconnecting while the page is visible.
+ */
+interface HostPlannerProps {
+    /** Calls one of the host's Kitchen tools by name with its arguments. */
+    callTool: CallKitchenTool;
+    /** A plan the host already holds, received before the first connection. */
+    initial?: HostPlan;
+    /** Called once the session is mounted, with the session to drive it. */
+    onready?: (session: HostSession) => void;
+}
+declare const HostPlanner: import("svelte").Component<HostPlannerProps, {}, "">;
+type HostPlanner = ReturnType<typeof HostPlanner>;
+export default HostPlanner;

package/dist/planner/host/session.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { PlanSnapshot } from '@happyvertical/smrt-core/cookbook/engine';
+import type { Cookbook } from '../../cookbook/types.ts';
+export interface HostPlan {
+    planId: string;
+    snapshot: PlanSnapshot;
+    cookbook: Cookbook;
+}
+export type CallKitchenTool = (name: string, args: Record<string, unknown>) => Promise<unknown>;
+/** One authoritative Kitchen plan projected into the stores the existing panels read. */
+export declare function createHostSession(callTool: CallKitchenTool): {
+    readonly current: HostPlan | null;
+    readonly busy: boolean;
+    readonly error: string;
+    readonly pendingPlanId: string | null;
+    readonly draft: Cookbook | null;
+    readonly preservedDraft: Cookbook | null;
+    dismissPreservedDraft(): void;
+    readonly retryable: boolean;
+    /** Edits wait while a request is unresolved or a preserved draft is unacknowledged. */
+    readonly locked: boolean;
+    refresh: (value: unknown) => void;
+    reportError(cause: unknown): void;
+    receive(value: unknown): void;
+    connect(planId: string): Promise<void>;
+    retry: () => Promise<void>;
+    mount(): () => void;
+};
+export type HostSession = ReturnType<typeof createHostSession>;