@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/SectionOverview.svelte

@@ -5,10 +5,15 @@
 // a customised page is saved, exported and imported with the rest of the app.
 // The shell's pencil edits it like the layout; widget data comes from the
 // in-browser sample source. Mount it under `{#key}` on the section id.
+//
+// The widgets are page sections, not cards in a card: the grid's `plain`
+// presentation drops the tile frame (edit mode brings it back with the
+// controls) and each title is drawn as a section heading.
 import {
   type OverviewDefinition,
   OverviewGrid,
   type OverviewModelChoice,
+  type OverviewWidget,
 } from '@happyvertical/smrt-svelte/overview';
 import { useShellLayout } from '@happyvertical/smrt-svelte/workspace';
 import { onDestroy, untrack } from 'svelte';
@@ -26,9 +31,20 @@ interface SectionOverviewProps {
   models: readonly OverviewModelChoice[];
   /** Accessible name of the grid. */
   label: string;
+  /** Page sections (`plain`, the default) or framed tiles (`card`). */
+  presentation?: 'card' | 'plain';
+  /** An in-app path with the app query; the standalone page's `appHref`. */
+  href?: (path: string) => string;
 }
 
-let { definition, entries, models, label }: SectionOverviewProps = $props();
+let {
+  definition,
+  entries,
+  models,
+  label,
+  presentation = 'plain',
+  href = appHref,
+}: SectionOverviewProps = $props();
 
 const shell = useShellLayout();
 const source = useDataSource();
@@ -36,7 +52,7 @@ const source = useDataSource();
 const controller = createSectionOverview(
   untrack(() => definition),
   cookbookStore,
-  () => ({ source, sections: shell.sections, entries, href: appHref }),
+  () => ({ source, sections: shell.sections, entryIndex: entries, href }),
 );
 
 function reloadAll() {
@@ -62,4 +78,18 @@ $effect(() => source.onReset?.(() => reloadAll()));
 onDestroy(() => controller.destroy());
 </script>
 
-<OverviewGrid {controller} {models} {label} />
+{#snippet heading(_widget: OverviewWidget, title: string)}
+  <span class="section-heading">{title}</span>
+{/snippet}
+
+<OverviewGrid {controller} {models} {label} {presentation} {heading} />
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .section-heading {
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 600);
+  }
+}
+</style>

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

@@ -8,6 +8,10 @@ interface SectionOverviewProps {
     models: readonly OverviewModelChoice[];
     /** Accessible name of the grid. */
     label: string;
+    /** Page sections (`plain`, the default) or framed tiles (`card`). */
+    presentation?: 'card' | 'plain';
+    /** An in-app path with the app query; the standalone page's `appHref`. */
+    href?: (path: string) => string;
 }
 declare const SectionOverview: import("svelte").Component<SectionOverviewProps, {}, "">;
 type SectionOverview = ReturnType<typeof SectionOverview>;

package/dist/components/SectionPage.svelte

@@ -1,36 +1,22 @@
 <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.
+// The static app's section route: the shared `SectionView` plus what only the
+// static app has pages for (the Help and Options icons, which open
+// `/recipes/<id>/`) and the New buttons (which ask the entry page to open its
+// create form through `planner/create.ts`).
 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 { navNoun } from '../data/format.js';
 import { requestCreate } from '../planner/create.js';
-import { recipeModels, recipesById } from '../recipes/index.js';
-import { inScope } from '../recipes/scope.js';
+import { recipesById } from '../recipes/index.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 { sectionTitle } from '../sections/info.js';
 import SectionActions from './SectionActions.svelte';
 import SectionIcons from './SectionIcons.svelte';
-import SectionOverview from './SectionOverview.svelte';
+import SectionView from './SectionView.svelte';
 
 interface SectionPageProps {
   /** The layout id: `section:<id>`, `custom:<id>` or `package:<id>`. */
@@ -40,13 +26,9 @@ interface SectionPageProps {
 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 title = $derived(
+  sectionTitle(shell.sections.find((s) => s.id === sectionId)?.heading),
+);
 
 const added = $derived(
   recipeState.ids.flatMap((id) => {
@@ -55,49 +37,6 @@ const added = $derived(
   }),
 );
 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);
@@ -113,110 +52,30 @@ function startNew(entry: ShellSectionMenuEntry) {
   <title>{title} · smrt planner</title>
 </svelte:head>
 
-{#snippet meta(entry: ShellSectionMenuEntry)}
-  {#if counts.has(entry.id)}{recordCount(counts.get(entry.id) ?? 0)}{/if}
+{#snippet headerActions({ title: heading, itemIds }: { title: string; itemIds: readonly string[] })}
+  {@const groups = optionGroups(itemIds, added)}
+  {#if groups.length === 1}
+    <SectionIcons section={groups[0].id} label={groups[0].label} />
+  {:else if groups.length > 1}
+    <SectionActions label={heading} {groups} />
+  {/if}
 {/snippet}
 
-{#snippet actions(entry: ShellSectionMenuEntry)}
+{#snippet menuActions(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}
+<SectionView {sectionId} {headerActions} {menuActions} />
 
 <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;
-  }
-
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .new {
     padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full, 999px);
     color: var(--smrt-color-primary);
     text-decoration: none;
@@ -225,6 +84,7 @@ function startNew(entry: ShellSectionMenuEntry) {
 
   .new:hover,
   .new:focus-visible {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
+}
 </style>

package/dist/components/SectionView.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+// A navigation section's page body for the static app's section route
+// (`SectionPage.svelte`, which adds the Help/Options icons and the New
+// buttons). The static app's shell is a plain `AppShell`, not `CookbookApp`,
+// so it cannot use the framework's `CookbookSectionPage` (the mounted
+// `Planner` does, with the same `SectionHeading`). It needs no `$app`
+// import: the shell's layout context gives it the section, the cookbook store
+// its overview and the data source its counts.
+//
+// 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, drawn as plain page sections. 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 { tryGetCookbookContext } from '@happyvertical/smrt-svelte/cookbook';
+import {
+  ShellSectionMenu,
+  type ShellSectionMenuEntry,
+  useShellLayout,
+} from '@happyvertical/smrt-svelte/workspace';
+import type { Snippet } from 'svelte';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { useDataSource } from '../data/context.js';
+import { recordCount } from '../data/format.js';
+import { sectionOverview } from '../overviews/definitions.js';
+import { overviewModelChoices } from '../overviews/models.js';
+import { appHref } from '../planner/app.svelte.js';
+import { recipesById } from '../recipes/index.js';
+import { inScope } from '../recipes/scope.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import { entryIndex } from '../sections/entries.js';
+import {
+  DEFAULT_SECTION_ICON,
+  sectionInfo,
+  sectionTitle,
+} from '../sections/info.js';
+import SectionHeading from './SectionHeading.svelte';
+import SectionOverview from './SectionOverview.svelte';
+
+interface SectionViewProps {
+  /** The layout id: `section:<id>`, `custom:<id>` or `package:<id>`. */
+  sectionId: string;
+  /** An in-app path with the app query; the planner's `appHref` by default. */
+  href?: (path: string) => string;
+  /** Controls after the heading (the standalone page's Help and Options icons). */
+  headerActions?: Snippet<[{ title: string; itemIds: readonly string[] }]>;
+  /** Per-entry controls on the menu cards a section without an overview shows. */
+  menuActions?: Snippet<[ShellSectionMenuEntry]>;
+}
+
+let {
+  sectionId,
+  href = appHref,
+  headerActions,
+  menuActions,
+}: SectionViewProps = $props();
+
+const shell = useShellLayout();
+const source = useDataSource();
+// Under a `CookbookApp` the shell's own suggestion (label, icon, description)
+// is the fallback; the static app has none and reads the planner's data.
+const cookbook = tryGetCookbookContext();
+
+const section = $derived(shell.sections.find((s) => s.id === sectionId));
+const suggested = $derived(
+  cookbook?.shell.sections.find((s) => s.id === sectionId),
+);
+const title = $derived(sectionTitle(section?.heading || suggested?.label));
+const icon = $derived(section?.icon ?? suggested?.icon ?? DEFAULT_SECTION_ICON);
+const description = $derived(
+  sectionInfo(sectionId).description ?? suggested?.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 overview = $derived(sectionOverview(sectionId));
+// The option editor offers the app's models: the added recipes' and features'.
+const models = $derived(overviewModelChoices(added, index));
+
+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()));
+</script>
+
+{#snippet meta(entry: ShellSectionMenuEntry)}
+  {#if counts.has(entry.id)}{recordCount(counts.get(entry.id) ?? 0)}{/if}
+{/snippet}
+
+{#if cookbookStore.loaded}
+  <main class="section-view">
+    {#if section}
+      <SectionHeading {icon} {title} {description}>
+        {#snippet actions()}{@render headerActions?.({ title, itemIds })}{/snippet}
+      </SectionHeading>
+      {#if overview}
+        {#key sectionId}
+          <SectionOverview
+            definition={overview}
+            entries={index}
+            {models}
+            {href}
+            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={menuActions} />
+      {/if}
+    {:else}
+      <h1>Section not found</h1>
+      <p>This section is not in your app. <a href={href('/')}>Back to the Planner</a></p>
+    {/if}
+  </main>
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  main {
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    width: min(100%, 64rem);
+    margin-inline: auto;
+    padding: var(--smrt-spacing-6);
+  }
+
+  .entries {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .entries h2 {
+    margin: 0;
+    font: var(--smrt-typography-title-medium-font);
+    letter-spacing: var(--smrt-typography-title-medium-tracking);
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+import { type ShellSectionMenuEntry } from '@happyvertical/smrt-svelte/workspace';
+import type { Snippet } from 'svelte';
+interface SectionViewProps {
+    /** The layout id: `section:<id>`, `custom:<id>` or `package:<id>`. */
+    sectionId: string;
+    /** An in-app path with the app query; the planner's `appHref` by default. */
+    href?: (path: string) => string;
+    /** Controls after the heading (the standalone page's Help and Options icons). */
+    headerActions?: Snippet<[{
+        title: string;
+        itemIds: readonly string[];
+    }]>;
+    /** Per-entry controls on the menu cards a section without an overview shows. */
+    menuActions?: Snippet<[ShellSectionMenuEntry]>;
+}
+declare const SectionView: import("svelte").Component<SectionViewProps, {}, "">;
+type SectionView = ReturnType<typeof SectionView>;
+export default SectionView;

package/dist/components/SettingsPanel.svelte

@@ -2,14 +2,6 @@
 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).
@@ -42,12 +34,13 @@ $effect(() => {
     keep their values.
   </p>
   <AppSettings value={draft} onchange={change} idPrefix="app-settings-tab" />
-  <ThemeSection provider={themeControls} />
 </div>
 
 <svelte:window onpagehide={commit} />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .pane {
     display: grid;
     gap: var(--smrt-spacing-4);
@@ -57,4 +50,5 @@ $effect(() => {
     margin: 0;
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

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

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

package/dist/components/ThemeBridge.svelte

@@ -3,15 +3,39 @@ import {
   getThemeContext,
   type ThemePreset,
 } from '@happyvertical/smrt-ui/themes';
+import { onMount } from 'svelte';
 import { cookbookStore } from '../cookbook/store.svelte.js';
+import {
+  containCustomCss,
+  customCssApproved,
+  customCssDisabled,
+  shellScopeOf,
+} from '../theme/custom-css.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.
+// ThemeProvider once the saved document is read, and reads back a preset or
+// scheme change made through the provider's own controls (ThemeSwitcher,
+// ColorSchemeToggle) so that it is saved with the document.
 const context = getThemeContext();
+let {
+  deferInitial = false,
+  presetOverride,
+}: { deferInitial?: boolean; presetOverride?: string } = $props();
+// A hosted shell's own provider reads browser-local preferences on mount;
+// deferring the first apply lets the plan's theme win over them.
+let ready = $state(false);
+onMount(() => {
+  if (!deferInitial) {
+    ready = true;
+    return;
+  }
+  const timer = setTimeout(() => {
+    ready = true;
+  }, 0);
+  return () => clearTimeout(timer);
+});
 
 // What this bridge last told the provider, to tell its own writes from a
 // person's. Null until the document has been applied once.
@@ -19,8 +43,9 @@ let applied: { preset: string; colorScheme: ColorSchemeSetting } | null = null;
 
 // Document -> provider.
 $effect(() => {
-  if (!cookbookStore.loaded) return;
+  if (!cookbookStore.loaded || !ready) return;
   const wanted = resolveTheme(cookbookStore.theme);
+  if (presetOverride) wanted.preset = presetOverride;
   if (
     applied?.preset === wanted.preset &&
     applied.colorScheme === wanted.colorScheme
@@ -35,6 +60,30 @@ $effect(() => {
   }
 });
 
+// Document -> provider: corner radius, density and contrast. The cookbook is
+// the visitor's own choice here (the Theme tab edits it), so it is applied over
+// a preference the provider read from browser storage, as the preset is.
+// Absent values are the provider's defaults: the preset's own radius, no
+// density override, contrast following the device.
+$effect(() => {
+  if (!cookbookStore.loaded || !ready) return;
+  const theme = cookbookStore.theme;
+  const wanted = {
+    borderRadius: theme?.borderRadius ?? 'md',
+    density: theme?.density,
+    contrast: theme?.contrast ?? 'auto',
+  } as const;
+  const { borderRadius, density, contrast } = context.state.config;
+  if (
+    borderRadius === wanted.borderRadius &&
+    density === wanted.density &&
+    (contrast ?? 'auto') === wanted.contrast
+  ) {
+    return;
+  }
+  context.updateConfig(wanted);
+});
+
 // Provider -> document.
 $effect(() => {
   const { preset, colorScheme } = context.state;
@@ -45,6 +94,9 @@ $effect(() => {
     cookbookStore.setTheme({
       ...cookbookStore.theme,
       preset,
+      fontFamily:
+        cookbookStore.theme?.fontFamily ??
+        cookbookStore.theme?.custom?.fontFamily,
       custom: undefined,
     });
   }
@@ -53,4 +105,28 @@ $effect(() => {
     cookbookStore.setTheme({ ...cookbookStore.theme, colorScheme });
   }
 });
+
+// Marks where this bridge sits, to find the one shell its CSS may style.
+let anchor = $state<HTMLElement | null>(null);
+
+// Each mounted Planner owns its own style element. Cookbook CSS is untrusted:
+// it applies only once approved, contained to the app shell without external
+// loads (see theme/custom-css), and `?styles=off` switches it off.
+$effect(() => {
+  if (typeof document === 'undefined' || !cookbookStore.loaded) return;
+  const css = cookbookStore.theme?.customCss;
+  if (!css || customCssDisabled(location.search) || !customCssApproved(css))
+    return;
+  const scope = shellScopeOf(anchor);
+  if (!scope) return;
+  const contained = containCustomCss(css, scope);
+  if (!contained) return;
+  const style = document.createElement('style');
+  style.dataset.smrtPlannerCustom = '';
+  style.textContent = contained;
+  document.head.append(style);
+  return () => style.remove();
+});
 </script>
+
+<span bind:this={anchor} hidden data-smrt-planner-anchor></span>