@happyvertical/smrt-svelte 0.55.9 → 0.55.11

package/dist/components/cookbook/CookbookApp.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+/**
+ * `CookbookApp` (#3749): `AppShell` driven by a cookbook. A generated app
+ * needs a layout that renders this with `smrt.cookbook.json` (validated) and
+ * the catalog the server helper loads, plus one route that renders
+ * `CookbookSectionPage`.
+ *
+ * It builds the navigation, layout, theme and section overviews with
+ * `buildCookbookShell`, keeps layout and overview edits in memory, and hands
+ * each edit to `oncookbookchange` for the host to persist.
+ */
+import { createRawSnippet, mount, unmount, untrack } from 'svelte';
+import AppShell from '../app/AppShell.svelte';
+import type { ShellSlotItem } from '../app/slot-item.js';
+import { parseRecipeExportRef } from '../overview/recipe-widgets.js';
+import {
+  resolveWidgetComponents,
+  type WidgetComponents,
+  type WidgetRegistry,
+} from '../overview/registry.js';
+import type { OverviewOverride } from '../overview/types.js';
+import {
+  isShellLayoutEmpty,
+  type ShellLayout,
+} from '../workspace/admin-shell/layout.js';
+import { applyCookbookTheme } from './brand-theme.js';
+import { buildCookbookShell, humanize, pluralize } from './build.js';
+import { type CookbookContext, setCookbookContext } from './context.js';
+import { createCookbookRegistry } from './registry.js';
+import type { CookbookAppProps } from './types.js';
+
+let {
+  cookbook,
+  catalog,
+  loaders,
+  widgetContext,
+  resolveExport,
+  oncookbookchange,
+  recipeOrder,
+  entryPath,
+  sectionPath,
+  href,
+  title,
+  slotItems = [],
+  children,
+  ...shellProps
+}: CookbookAppProps = $props();
+
+const shell = $derived(
+  buildCookbookShell({
+    cookbook,
+    catalog,
+    ...(title ? { title } : {}),
+    ...(recipeOrder ? { recipeOrder } : {}),
+    ...(entryPath ? { entryPath } : {}),
+    ...(sectionPath ? { sectionPath } : {}),
+    ...(href ? { href } : {}),
+    dataWidgets: Boolean(loaders?.metric && loaders?.records),
+  }),
+);
+
+// Local copies the user edits; they follow the cookbook whenever it changes.
+let layout = $state.raw<ShellLayout | null>(untrack(() => shell.layout));
+let overrides = $state.raw<Record<string, unknown>>(
+  untrack(() => storedOverrides()),
+);
+
+function storedOverrides(): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(shell.overviews)
+      .filter(([, page]) => page.override != null)
+      .map(([id, page]) => [id, page.override]),
+  );
+}
+
+$effect(() => {
+  layout = shell.layout;
+  overrides = storedOverrides();
+});
+
+function emit() {
+  if (!oncookbookchange) return;
+  const next = { ...cookbook };
+  if (isShellLayoutEmpty(layout)) delete next.layout;
+  else next.layout = layout as ShellLayout;
+  if (Object.keys(overrides).length > 0) {
+    next.overviews = overrides as NonNullable<typeof next.overviews>;
+  } else delete next.overviews;
+  oncookbookchange(next);
+}
+
+const preset = $derived(applyCookbookTheme(shell.theme));
+
+// Widget registry: core widgets plus the recipes' `widget` surfaces.
+let registry = $state.raw<WidgetRegistry | null>(null);
+let components = $state.raw<WidgetComponents>(new Map());
+
+// Keyed by content: an edit rebuilds `shell` but must not rebuild the registry.
+const widgetsKey = $derived(JSON.stringify(shell.widgets));
+const shellWidgetsKey = $derived(JSON.stringify(shell.shellWidgets));
+
+$effect(() => {
+  void widgetsKey;
+  const widgets = untrack(() => shell.widgets);
+  const resolve = resolveExport;
+  const dataLoaders = loaders;
+  let cancelled = false;
+  void (async () => {
+    const created = await createCookbookRegistry({
+      ...(dataLoaders ? { loaders: dataLoaders } : {}),
+      widgets,
+      ...(resolve ? { resolveExport: resolve } : {}),
+    });
+    const resolved = await resolveWidgetComponents(
+      created.registry.list().map((def) => def.type),
+      created.registry,
+    );
+    if (cancelled) return;
+    components = resolved;
+    registry = created.registry;
+  })();
+  return () => {
+    cancelled = true;
+  };
+});
+
+// Recipe `shell-widget` surfaces become movable slot items.
+let recipeSlotItems = $state.raw<ShellSlotItem[]>([]);
+
+$effect(() => {
+  void shellWidgetsKey;
+  const widgets = untrack(() => shell.shellWidgets);
+  const resolve = resolveExport;
+  if (!resolve || widgets.length === 0) {
+    recipeSlotItems = [];
+    return;
+  }
+  let cancelled = false;
+  void (async () => {
+    const items: ShellSlotItem[] = [];
+    for (const widget of widgets) {
+      const ref = parseRecipeExportRef(widget.export);
+      if (!ref) continue;
+      try {
+        const loaded = (await resolve(ref.specifier, ref.exportName)) as
+          | { default?: unknown }
+          | ((...args: never[]) => unknown)
+          | undefined;
+        const component =
+          loaded && typeof loaded === 'object' && 'default' in loaded
+            ? loaded.default
+            : loaded;
+        if (typeof component !== 'function') continue;
+        items.push({
+          id: `recipe:${widget.recipeId}:${ref.exportName}`,
+          label: widget.label,
+          slot: widget.slot,
+          render: createRawSnippet(() => ({
+            render: () => '<span data-cookbook-slot-widget></span>',
+            setup: (node: Element) => {
+              const instance = mount(component as never, {
+                target: node as HTMLElement,
+              });
+              return () => {
+                void unmount(instance);
+              };
+            },
+          })),
+        });
+      } catch {
+        // A widget that cannot load is left out; the shell still renders.
+      }
+    }
+    if (!cancelled) recipeSlotItems = items;
+  })();
+  return () => {
+    cancelled = true;
+  };
+});
+
+const models = $derived.by(() => {
+  const seen = new Set<string>();
+  const choices: { value: string; label: string }[] = [];
+  for (const entry of shell.entries.values()) {
+    if (seen.has(entry.model.id)) continue;
+    seen.add(entry.model.id);
+    choices.push({
+      value: entry.model.id,
+      label: pluralize(humanize(entry.model.name)),
+    });
+  }
+  return choices;
+});
+
+setCookbookContext({
+  get shell() {
+    return shell;
+  },
+  get registry() {
+    return registry;
+  },
+  get components() {
+    return components;
+  },
+  get models() {
+    return models;
+  },
+  overrideFor: (id) => overrides[id] ?? null,
+  setOverride: (id, override: OverviewOverride | null) => {
+    const next = { ...overrides };
+    if (override === null) delete next[id];
+    else next[id] = override;
+    overrides = next;
+    emit();
+  },
+  widgetContext: () => widgetContext?.() ?? {},
+} satisfies CookbookContext);
+</script>
+
+<AppShell
+  {...shellProps}
+  title={shell.title}
+  navMode="sections"
+  navGroups={shell.navGroups}
+  {layout}
+  onlayoutchange={(next) => {
+    layout = next;
+    emit();
+  }}
+  {preset}
+  colorScheme={shell.theme.colorScheme}
+  sectionHref={(id) => shell.sectionPath(id)}
+  slotItems={[...slotItems, ...recipeSlotItems]}
+>
+  {@render children()}
+</AppShell>

package/dist/components/cookbook/CookbookApp.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CookbookAppProps } from './types.js';
+declare const CookbookApp: import("svelte").Component<CookbookAppProps, {}, "">;
+type CookbookApp = ReturnType<typeof CookbookApp>;
+export default CookbookApp;
+//# sourceMappingURL=CookbookApp.svelte.d.ts.map

package/dist/components/cookbook/CookbookApp.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookbookApp.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/cookbook/CookbookApp.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAsNnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/cookbook/CookbookSectionOverview.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+/**
+ * A section page's editable overview (#3749): `OverviewGrid` over the
+ * section's definition. The cookbook owns the override (the controller reads
+ * it and writes each edit back). Mount it under `{#key}` on the section id.
+ */
+import { onDestroy, untrack } from 'svelte';
+import type { OverviewModelChoice } from '../overview/grid-types.js';
+import OverviewGrid from '../overview/OverviewGrid.svelte';
+import type { WidgetComponents, WidgetRegistry } from '../overview/registry.js';
+import type { OverviewDefinition } from '../overview/types.js';
+import { useShellLayout } from '../workspace/admin-shell/layout-context.js';
+import { type CookbookOverviewStore, createSectionOverview } from './page.js';
+import type { CookbookEntry } from './types.js';
+
+interface Props {
+  definition: OverviewDefinition;
+  registry: WidgetRegistry;
+  store: CookbookOverviewStore;
+  entries: ReadonlyMap<string, CookbookEntry>;
+  components: WidgetComponents;
+  models: readonly OverviewModelChoice[];
+  /** Host capabilities for widget loaders. */
+  hostContext: () => Record<string, unknown>;
+  label: string;
+}
+
+let {
+  definition,
+  registry,
+  store,
+  entries,
+  components,
+  models,
+  hostContext,
+  label,
+}: Props = $props();
+
+const layout = useShellLayout();
+
+const controller = createSectionOverview(
+  untrack(() => definition),
+  untrack(() => registry),
+  untrack(() => store),
+  () => ({
+    ...hostContext(),
+    sections: layout.sections,
+    entries,
+  }),
+);
+
+// The shortcuts follow the menu (renames, hides, moves); the grid already
+// requested the first load, so skip that run.
+let first = true;
+$effect(() => {
+  void JSON.stringify(layout.sections);
+  if (first) {
+    first = false;
+    return;
+  }
+  untrack(() => {
+    for (const widget of controller.document.widgets) {
+      controller.reload(widget.id);
+    }
+  });
+});
+
+onDestroy(() => controller.destroy());
+</script>
+
+<OverviewGrid {controller} {components} {models} {label} />

package/dist/components/cookbook/CookbookSectionOverview.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { OverviewModelChoice } from '../overview/grid-types.js';
+import type { WidgetComponents, WidgetRegistry } from '../overview/registry.js';
+import type { OverviewDefinition } from '../overview/types.js';
+import { type CookbookOverviewStore } from './page.js';
+import type { CookbookEntry } from './types.js';
+interface Props {
+    definition: OverviewDefinition;
+    registry: WidgetRegistry;
+    store: CookbookOverviewStore;
+    entries: ReadonlyMap<string, CookbookEntry>;
+    components: WidgetComponents;
+    models: readonly OverviewModelChoice[];
+    /** Host capabilities for widget loaders. */
+    hostContext: () => Record<string, unknown>;
+    label: string;
+}
+declare const CookbookSectionOverview: import("svelte").Component<Props, {}, "">;
+type CookbookSectionOverview = ReturnType<typeof CookbookSectionOverview>;
+export default CookbookSectionOverview;
+//# sourceMappingURL=CookbookSectionOverview.svelte.d.ts.map

package/dist/components/cookbook/CookbookSectionOverview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookbookSectionOverview.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/cookbook/CookbookSectionOverview.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,KAAK,qBAAqB,EAAyB,MAAM,WAAW,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,UAAU,KAAK;IACb,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,cAAc,CAAC;IACzB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACvC,4CAA4C;IAC5C,WAAW,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AA4DD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/cookbook/CookbookSectionPage.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+/**
+ * A navigation section's own page in a cookbook app (#3749). The sidebar lists
+ * only sections, so this is where a section's entries are: an editable
+ * overview (the entries as shortcut cards by default) with the shell's layout
+ * edit mode driving its grid. A section with no overview shows its menu.
+ *
+ * Render it from one route (`s/[slug]/+page.svelte`), inside `CookbookApp`.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.overview.js';
+import type { OverviewOverride } from '../overview/types.js';
+import { useShellLayout } from '../workspace/admin-shell/layout-context.js';
+import ShellSectionIcon from '../workspace/admin-shell/ShellSectionIcon.svelte';
+import ShellSectionMenu from '../workspace/admin-shell/ShellSectionMenu.svelte';
+import CookbookSectionOverview from './CookbookSectionOverview.svelte';
+import { getCookbookContext } from './context.js';
+import { DEFAULT_SECTION_ICON, sectionIdFromSlug } from './sections.js';
+import type { CookbookSectionPageProps } from './types.js';
+
+let { sectionId, slug, children }: CookbookSectionPageProps = $props();
+
+const { t } = useI18n();
+const cookbook = getCookbookContext();
+const layout = useShellLayout();
+
+const id = $derived(sectionId ?? (slug ? sectionIdFromSlug(slug) : ''));
+const section = $derived(layout.sections.find((s) => s.id === id));
+const suggested = $derived(cookbook.shell.sections.find((s) => s.id === id));
+const title = $derived(section?.heading?.trim() || suggested?.label || '');
+const icon = $derived(section?.icon ?? suggested?.icon ?? DEFAULT_SECTION_ICON);
+const description = $derived(suggested?.description);
+const page = $derived(cookbook.shell.overviews[id]);
+const registry = $derived(cookbook.registry);
+const store = {
+  overview: (key: string) => cookbook.overrideFor(key),
+  setOverview: (key: string, override: OverviewOverride | null) =>
+    cookbook.setOverride(key, override),
+};
+</script>
+
+<svelte:head>
+  {#if title}<title>{title}</title>{/if}
+</svelte:head>
+
+<main class="cookbook-section">
+  {#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>
+    </header>
+    {#if page && registry}
+      {#key id}
+        <CookbookSectionOverview
+          definition={page.definition}
+          {registry}
+          {store}
+          entries={cookbook.shell.entries}
+          components={cookbook.components}
+          models={cookbook.models}
+          hostContext={cookbook.widgetContext}
+          label={`${title} overview`}
+        />
+      {/key}
+      {#if layout.editing}
+        <section class="entries" aria-labelledby="cookbook-section-entries">
+          <h2 id="cookbook-section-entries">{t(M['ui.cookbook.menu_entries'])}</h2>
+          <ShellSectionMenu sectionId={id} />
+        </section>
+      {/if}
+    {:else if !page}
+      <ShellSectionMenu sectionId={id} layout="cards" />
+    {/if}
+    {@render children?.()}
+  {:else}
+    <h1>{t(M['ui.cookbook.section_not_found'])}</h1>
+    <p>{t(M['ui.cookbook.section_not_found_hint'])}</p>
+  {/if}
+</main>
+
+<style>
+  .cookbook-section {
+    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: var(--smrt-typography-title-medium-size, 1rem);
+  }
+</style>

package/dist/components/cookbook/CookbookSectionPage.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CookbookSectionPageProps } from './types.js';
+declare const CookbookSectionPage: import("svelte").Component<CookbookSectionPageProps, {}, "">;
+type CookbookSectionPage = ReturnType<typeof CookbookSectionPage>;
+export default CookbookSectionPage;
+//# sourceMappingURL=CookbookSectionPage.svelte.d.ts.map

package/dist/components/cookbook/CookbookSectionPage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookbookSectionPage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/cookbook/CookbookSectionPage.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAyE3D,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/cookbook/brand-theme.d.ts

@@ -0,0 +1,11 @@
+import { type ThemePreset } from '@happyvertical/smrt-ui/themes';
+import type { ResolvedCookbookTheme } from './types.js';
+/**
+ * The preset id `ThemeProvider` should use for a resolved cookbook theme.
+ * A brand colour is registered through `createThemeFromColor` first; a
+ * registered id is never reused for another colour because `ThemeProvider`
+ * looks a theme up once per preset id (the id encodes colour and font).
+ * An unknown preset name falls back to the default rather than breaking.
+ */
+export declare function applyCookbookTheme(theme: ResolvedCookbookTheme): ThemePreset;
+//# sourceMappingURL=brand-theme.d.ts.map

package/dist/components/cookbook/brand-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-theme.d.ts","sourceRoot":"","sources":["../../../src/components/cookbook/brand-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIxD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,WAAW,CAiB5E"}

package/dist/components/cookbook/brand-theme.js

@@ -0,0 +1,24 @@
+import { createThemeFromColor, isValidPreset, registerTheme, } from '@happyvertical/smrt-ui/themes';
+import { DEFAULT_THEME_PRESET, THEME_FONTS } from './theme.js';
+const registered = new Set();
+/**
+ * The preset id `ThemeProvider` should use for a resolved cookbook theme.
+ * A brand colour is registered through `createThemeFromColor` first; a
+ * registered id is never reused for another colour because `ThemeProvider`
+ * looks a theme up once per preset id (the id encodes colour and font).
+ * An unknown preset name falls back to the default rather than breaking.
+ */
+export function applyCookbookTheme(theme) {
+    const { brand } = theme;
+    if (brand) {
+        if (!registered.has(theme.preset)) {
+            const font = brand.fontFamily ? THEME_FONTS[brand.fontFamily] : undefined;
+            registerTheme(createThemeFromColor(brand.primary, theme.preset, 'Brand colour', {
+                ...(font ? { fontFamily: font } : {}),
+            }));
+            registered.add(theme.preset);
+        }
+        return theme.preset;
+    }
+    return (isValidPreset(theme.preset) ? theme.preset : DEFAULT_THEME_PRESET);
+}

package/dist/components/cookbook/build.d.ts

@@ -0,0 +1,8 @@
+import type { BuildCookbookShellOptions, CookbookShell } from './types.js';
+/** `PurchaseOrder` -> `Purchase Order`. */
+export declare function humanize(name: string): string;
+/** `Customer` -> `Customers`, `Category` -> `Categories`. */
+export declare function pluralize(noun: string): string;
+/** Derive the shell configuration from a cookbook (see {@link CookbookShell}). */
+export declare function buildCookbookShell(options: BuildCookbookShellOptions): CookbookShell;
+//# sourceMappingURL=build.d.ts.map

package/dist/components/cookbook/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/components/cookbook/build.ts"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EACV,yBAAyB,EAQzB,aAAa,EAEd,MAAM,YAAY,CAAC;AAEpB,2CAA2C;AAC3C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI9C;AA0ED,kFAAkF;AAClF,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,yBAAyB,GACjC,aAAa,CAyOf"}