@happyvertical/smrt-planner 0.0.2 → 0.1.1

package/dist/components/ExportPanel.svelte

@@ -1,35 +1,87 @@
 <script lang="ts">
-import { Button } from '@happyvertical/smrt-ui';
+import { Button, Chip, Disclosure } from '@happyvertical/smrt-ui';
 import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
-import { downloadCookbook } from '../cookbook/file.js';
+import { Textarea } from '@happyvertical/smrt-ui/forms';
+import { describeCookbook, summarizeCookbook } from '../cookbook/describe.js';
+import {
+  downloadCookbook,
+  exportFileName,
+  exportFileSize,
+  formatSize,
+  serializeCookbook,
+} from '../cookbook/file.js';
+import {
+  applyCommand,
+  appNameFor,
+  buildAgentPrompt,
+} from '../cookbook/prompt.js';
 import { cookbookStore } from '../cookbook/store.svelte.js';
 import type { Cookbook } from '../cookbook/types.js';
 import { parseCookbookText } from '../cookbook/validate.js';
 import { useDataSource } from '../data/context.js';
-import { humanize } from '../data/format.js';
 import { kitchenState } from '../kitchen/state.svelte.js';
 import { getLibraryCookbook } from '../library/index.js';
 import { libraryState } from '../library/state.svelte.js';
-import { recipesById } from '../recipes/index.js';
+import CopyButton from './CopyButton.svelte';
+
+/**
+ * The Export tab: what the cookbook holds, a prompt that hands it to a coding
+ * agent, the file download (and the command the file needs), Send to kitchen
+ * when a kitchen is listening, and, apart from those, Import and Reset.
+ */
+interface Props {
+  /** Replaces `navigator.clipboard.writeText` (tests). */
+  write?: (text: string) => Promise<void>;
+}
+
+let { write }: Props = $props();
 
 let fileInput: HTMLInputElement | undefined = $state();
+let promptBox: ReturnType<typeof Textarea> | undefined = $state();
+let commandLine: HTMLElement | undefined = $state();
 /** A validated import waiting for the visitor's confirmation. */
 let pending = $state<Cookbook | null>(null);
 /** What reading the pending import dropped (invalid page customisations). */
 let pendingDropped = $state<string[]>([]);
 let error = $state('');
 let notice = $state('');
+let copyNotice = $state('');
 let confirmingReset = $state(false);
 
-// A file is named for the library cookbook last applied, else a generic name.
-const exportName = () => getLibraryCookbook(libraryState.active ?? '')?.name;
+// A file is named for the cookbook's own name, else the library cookbook last
+// applied, else a generic name.
+const libraryName = $derived(
+  getLibraryCookbook(libraryState.active ?? '')?.name,
+);
 
 const current = $derived(cookbookStore.snapshot());
+const summary = $derived(describeCookbook(current));
+const fileName = $derived(exportFileName(current.name ?? libraryName));
+const fileSize = $derived(formatSize(exportFileSize(current)));
+const appName = $derived(appNameFor(current, libraryName));
+const prompt = $derived(
+  buildAgentPrompt(current, { fallbackName: libraryName }),
+);
+const command = $derived(applyCommand(fileName, appName));
 
-const pages = (b: Cookbook) => Object.keys(b.overviews ?? {}).length;
+const COPY_BY_HAND =
+  'Copying is not available here. The text is selected: press Ctrl+C (Cmd+C on a Mac) to copy it.';
+
+function promptCopyFailed() {
+  const element = promptBox?.getElement();
+  element?.focus();
+  element?.select();
+  copyNotice = COPY_BY_HAND;
+}
 
-const describe = (b: Cookbook) =>
-  `${b.recipes.length} ${b.recipes.length === 1 ? 'recipe' : 'recipes'}, ${b.features.length} ${b.features.length === 1 ? 'feature' : 'features'}, ${b.policies.length} saved ${b.policies.length === 1 ? 'option' : 'options'}${pages(b) ? `, ${pages(b)} customised ${pages(b) === 1 ? 'page' : 'pages'}` : ''}`;
+function commandCopyFailed() {
+  if (commandLine) {
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.selectAllChildren(commandLine);
+  }
+  copyNotice = COPY_BY_HAND;
+}
 
 async function choose(event: Event & { currentTarget: HTMLInputElement }) {
   const input = event.currentTarget;
@@ -53,7 +105,7 @@ async function choose(event: Event & { currentTarget: HTMLInputElement }) {
 function confirmImport() {
   if (pending) {
     cookbookStore.replace(pending);
-    notice = `Imported ${describe(pending)}.${pendingDropped.length ? ` Not imported: ${pendingDropped.join(' ')}` : ''}`;
+    notice = `Imported ${summarizeCookbook(pending)}.${pendingDropped.length ? ` Not imported: ${pendingDropped.join(' ')}` : ''}`;
   }
   pending = null;
   pendingDropped = [];
@@ -75,50 +127,95 @@ function confirmReset() {
 
 <div class="export">
   <p class="meta">
-    Your recipes, their options, the layout and customised pages, kept together in this browser.
-    Export them as a file, or import one to replace what is here. Sample
-    records are not part of it.
+    Your recipes, their options, the theme, the layout and customised pages,
+    kept together in this browser as one cookbook. Sample records are not part
+    of it.
   </p>
-  <section aria-labelledby="current-heading">
-    <h2 id="current-heading">Current cookbook</h2>
-    <p>{describe(current)}.</p>
-    {#if current.recipes.length}
-      <ul>
-        {#each current.recipes as id (id)}
-          <li>{recipesById.get(id)?.label ?? id}</li>
-        {/each}
-      </ul>
-    {/if}
-    {#if current.features.length}
-      <ul>
-        {#each current.features as id (id)}
-          <li>{humanize(id.slice(id.lastIndexOf(':') + 1))}</li>
+
+  <section class="block" aria-labelledby="summary-heading" data-export-section="summary">
+    <h2 id="summary-heading">In this cookbook</h2>
+    {#if summary.length}
+      <dl class="summary">
+        {#each summary as line (line.id)}
+          <dt>{line.label}</dt>
+          <dd>
+            {#if line.chips}
+              <ul class="chips">
+                {#each line.chips as chip, i (`${chip}:${i}`)}
+                  <li><Chip label={chip} size="sm" /></li>
+                {/each}
+              </ul>
+            {:else}
+              {line.text}
+            {/if}
+          </dd>
         {/each}
-      </ul>
+      </dl>
+    {:else}
+      <p class="quiet">Nothing customised yet. Add recipes or apply a cookbook first.</p>
     {/if}
   </section>
 
-  <div class="actions">
-    {#if kitchenState.config}
-      <Button
-        disabled={kitchenState.status === 'sending'}
-        onclick={() => kitchenState.send(cookbookStore.snapshot())}
-      >{kitchenState.status === 'sending' ? 'Sending to kitchen…' : 'Send to kitchen'}</Button>
-      <Button variant="secondary" onclick={() => downloadCookbook(cookbookStore.snapshot(), exportName())}>Download cookbook</Button>
-    {:else}
-      <Button onclick={() => downloadCookbook(cookbookStore.snapshot(), exportName())}>Export cookbook</Button>
-    {/if}
-    <Button variant="secondary" onclick={() => fileInput?.click()}>Import cookbook…</Button>
-    <Button variant="secondary" onclick={() => (confirmingReset = true)}>Reset</Button>
-    <input
-      bind:this={fileInput}
-      type="file"
-      accept="application/json,.json"
-      hidden
-      aria-label="Cookbook file"
-      onchange={choose}
+  <section class="block" aria-labelledby="prompt-heading" data-export-section="prompt">
+    <h2 id="prompt-heading">Copy prompt for your coding agent</h2>
+    <p class="meta" id="prompt-note">
+      Paste it into Claude Code, Codex or another coding agent. The prompt
+      carries the cookbook, creates the app <code>{appName}</code> with the smrt CLI {prompt.version} and
+      starts it. About {formatSize(prompt.bytes)}.
+    </p>
+    <Textarea
+      bind:this={promptBox}
+      class="prompt"
+      value={prompt.text}
+      readonly
+      rows={10}
+      spellcheck={false}
+      wrap="soft"
+      aria-label="Prompt for your coding agent"
+      aria-describedby="prompt-note"
+      interaction={false}
     />
-  </div>
+    <div class="actions" data-export-actions="primary">
+      <CopyButton
+        text={() => prompt.text}
+        label="Copy prompt"
+        {write}
+        oncopied={() => (copyNotice = 'Prompt copied.')}
+        onfail={promptCopyFailed}
+      />
+      {#if kitchenState.config}
+        <Button
+          variant="secondary"
+          disabled={kitchenState.status === 'sending'}
+          onclick={() => kitchenState.send(cookbookStore.snapshot())}
+        >{kitchenState.status === 'sending' ? 'Sending to kitchen…' : 'Send to kitchen'}</Button>
+      {/if}
+      <Button variant="secondary" onclick={() => downloadCookbook(current, current.name ?? libraryName)}>Download cookbook</Button>
+    </div>
+    <p class="notice" role="status" aria-live="polite">{copyNotice}</p>
+  </section>
+
+  <section class="block" aria-labelledby="file-heading" data-export-section="file">
+    <h2 id="file-heading">The downloaded file</h2>
+    <p class="meta">
+      Download writes <code>{fileName}</code> ({fileSize}). To make the app from
+      it yourself, run this where the file is:
+    </p>
+    <div class="command">
+      <code bind:this={commandLine} data-export-command>{command}</code>
+      <CopyButton
+        text={() => command}
+        label="Copy command"
+        variant="secondary"
+        {write}
+        oncopied={() => (copyNotice = 'Command copied.')}
+        onfail={commandCopyFailed}
+      />
+    </div>
+    <Disclosure title="Preview JSON">
+      <pre class="json">{serializeCookbook(current)}</pre>
+    </Disclosure>
+  </section>
 
   {#if kitchenState.needsLink}
     <Alert variant="info" title="Send to kitchen needs its link">
@@ -136,10 +233,6 @@ function confirmReset() {
       <code>smrt cookbook apply</code> on the file.
     </Alert>
   {/if}
-  {#if error}
-    <Alert variant="error" title="Import failed">{error}</Alert>
-  {/if}
-  <p class="notice" role="status" aria-live="polite">{notice}</p>
   {#if kitchenState.outcome}
     <div class="kitchen" role="status" aria-live="polite">
       {#if kitchenState.outcome.ok}
@@ -165,13 +258,40 @@ function confirmReset() {
       {/if}
     </div>
   {/if}
+
+  <section class="block replace" aria-labelledby="replace-heading" data-export-section="replace">
+    <h2 id="replace-heading">Replace or start over</h2>
+    <p class="meta">
+      Both replace everything listed above; download a copy first to keep it.
+    </p>
+    <div class="actions" data-export-actions="replace">
+      <Button variant="secondary" onclick={() => fileInput?.click()}>Import cookbook…</Button>
+      <Button variant="ghost" onclick={() => (confirmingReset = true)}>Reset</Button>
+    </div>
+    <p class="meta">
+      Import swaps this cookbook for one from a file. Reset empties it and
+      removes the sample records you added or changed.
+    </p>
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept="application/json,.json"
+      hidden
+      aria-label="Cookbook file"
+      onchange={choose}
+    />
+    {#if error}
+      <Alert variant="error" title="Import failed">{error}</Alert>
+    {/if}
+    <p class="notice" role="status" aria-live="polite">{notice}</p>
+  </section>
 </div>
 
 <ConfirmDialog
   open={pending !== null}
   title="Replace the current cookbook?"
   message={pending
-    ? `Importing replaces your ${describe(current)} with ${describe(pending)}.`
+    ? `Importing replaces ${summarizeCookbook(current)} with ${summarizeCookbook(pending)}.`
     : ''}
   confirmLabel="Replace"
   destructive
@@ -182,7 +302,7 @@ function confirmReset() {
 <ConfirmDialog
   open={confirmingReset}
   title="Reset the cookbook?"
-  message="This removes every recipe and saved option, and the sample records you added or changed. Export first to keep a copy."
+  message="This removes every recipe, saved option, theme and layout change, and the sample records you added or changed. Download a copy first to keep it."
   confirmLabel="Reset"
   destructive
   onconfirm={confirmReset}
@@ -190,18 +310,35 @@ function confirmReset() {
 />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .export {
     display: grid;
-    gap: var(--smrt-spacing-4);
+    gap: var(--smrt-spacing-5);
+    min-inline-size: 0;
   }
 
   h2,
-  p {
+  p,
+  dl,
+  dd,
+  pre {
     margin: 0;
   }
 
+  h2 {
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .block {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    min-inline-size: 0;
+  }
+
   .meta,
-  .notice {
+  .notice,
+  .quiet {
     color: var(--smrt-color-on-surface-variant);
   }
 
@@ -209,9 +346,107 @@ function confirmReset() {
     display: none;
   }
 
+  .summary {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: var(--smrt-spacing-2) var(--smrt-spacing-4);
+    align-items: baseline;
+  }
+
+  dt {
+    font-weight: var(--smrt-typography-weight-semibold);
+    white-space: nowrap;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
   .actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--smrt-spacing-2);
   }
+
+  /* The prompt: monospace, wrapped so it fits any width, scrolls vertically. */
+  .export :global(.prompt) {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    overflow: auto;
+    max-block-size: 20rem;
+    resize: none;
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    overflow-wrap: anywhere;
+  }
+
+  .command {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--smrt-spacing-2) var(--smrt-spacing-3);
+  }
+
+  .command code {
+    flex: 1 1 16rem;
+    min-inline-size: 0;
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-sunken);
+  }
+
+  .json {
+    max-block-size: 20rem;
+    overflow: auto;
+    padding: var(--smrt-spacing-3);
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-sunken);
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: var(--smrt-typography-body-small-size);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* Import and Reset: set apart from the actions above. */
+  .replace {
+    padding-block-start: var(--smrt-spacing-4);
+    border-block-start: var(--smrt-hairline);
+  }
+
+  /* Phones: one control per row, the summary in one column. */
+  @media (max-width: 30rem) {
+    .summary {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .actions,
+    .command {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .actions > :global([data-smrt-component='Button']),
+    .command > :global([data-smrt-component='Button']) {
+      inline-size: 100%;
+    }
+  }
+
+  /* Forced colours: the command and preview boxes keep a visible edge. */
+  @media (forced-colors: active) {
+    .command code,
+    .json {
+      border-color: CanvasText;
+    }
+  }
+}
 </style>

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

@@ -1,3 +1,12 @@
-declare const ExportPanel: import("svelte").Component<Record<string, never>, {}, "">;
+/**
+ * The Export tab: what the cookbook holds, a prompt that hands it to a coding
+ * agent, the file download (and the command the file needs), Send to kitchen
+ * when a kitchen is listening, and, apart from those, Import and Reset.
+ */
+interface Props {
+    /** Replaces `navigator.clipboard.writeText` (tests). */
+    write?: (text: string) => Promise<void>;
+}
+declare const ExportPanel: import("svelte").Component<Props, {}, "">;
 type ExportPanel = ReturnType<typeof ExportPanel>;
 export default ExportPanel;

package/dist/components/FeatureCard.svelte

@@ -111,6 +111,8 @@ const id = $derived(`feature-${card.id}`);
 </li>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   h3,
   h4,
   p {
@@ -122,7 +124,7 @@ const id = $derived(`feature-${card.id}`);
     align-content: start;
     gap: var(--smrt-spacing-2);
     padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
   }
 
@@ -138,20 +140,19 @@ const id = $derived(`feature-${card.id}`);
   }
 
   h3 {
-    font-size: var(--smrt-font-size-title-medium, 1rem);
+    font: var(--smrt-typography-title-medium-font); letter-spacing: var(--smrt-typography-title-medium-tracking);
   }
 
   h4 {
     color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-font-size-label-medium, 0.75rem);
-    font-weight: 600;
-    letter-spacing: 0.04em;
+    font: var(--smrt-typography-label-medium-font); letter-spacing: var(--smrt-typography-label-medium-tracking);
+    font-weight: var(--smrt-typography-weight-semibold);
     text-transform: uppercase;
   }
 
   .meta {
     color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-font-size-body-small, 0.8125rem);
+    font-size: var(--smrt-typography-body-small-size);
   }
 
   .plain {
@@ -160,16 +161,16 @@ const id = $derived(`feature-${card.id}`);
     margin: 0;
     padding: 0;
     list-style: none;
-    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+    font-size: var(--smrt-typography-body-medium-size);
   }
 
   .kind {
     margin-inline-end: var(--smrt-spacing-1);
     padding: 0 var(--smrt-spacing-2);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
     color: var(--smrt-color-on-surface-variant);
-    font-size: var(--smrt-font-size-label-small, 0.6875rem);
+    font-size: var(--smrt-typography-label-small-size);
   }
 
   .reasons {
@@ -192,6 +193,16 @@ const id = $derived(`feature-${card.id}`);
   }
 
   .summary {
-    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+    font-size: var(--smrt-typography-body-medium-size);
   }
+
+  /* Forced colours: a switched-on feature's border colour is replaced, so it
+     gets a Highlight frame. */
+  @media (forced-colors: active) {
+    .card.selected {
+      border-color: Highlight;
+      outline: 0.125rem solid Highlight;
+    }
+  }
+}
 </style>

package/dist/components/FeaturesPanel.svelte

@@ -110,6 +110,8 @@ function toggle(id: string, on: boolean) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .features {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -131,7 +133,7 @@ function toggle(id: string, on: boolean) {
   }
 
   .count {
-    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+    font-size: var(--smrt-typography-body-medium-size);
   }
 
   .notice:empty {
@@ -152,4 +154,5 @@ function toggle(id: string, on: boolean) {
     padding: 0;
     list-style: none;
   }
+}
 </style>

package/dist/components/FieldInput.svelte

@@ -96,7 +96,7 @@ function jsonFrom(raw: string): unknown {
 const dateOf = (stored: string): string => stored.slice(0, 10);
 </script>
 
-<div class="field" data-invalid={error ? '' : undefined}>
+<div class="field" data-renderer={renderer} data-invalid={error ? '' : undefined}>
   {#if renderer === 'boolean'}
     <Switch
       checked={value === true}
@@ -257,6 +257,8 @@ const dateOf = (stored: string): string => stored.slice(0, 10);
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .field {
     display: grid;
     gap: var(--smrt-spacing-1);
@@ -298,10 +300,11 @@ const dateOf = (stored: string): string => stored.slice(0, 10);
   input[type='url'],
   textarea {
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-control-border);
     border-radius: var(--smrt-radius-medium);
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
     font: inherit;
   }
+}
 </style>

package/dist/components/FieldMapForm.svelte

@@ -17,6 +17,7 @@ import {
 import { catalogModels } from '../forms/shared.js';
 import { recipeState } from '../recipes/state.svelte.js';
 import type { FieldMapForm } from '../recipes/types.js';
+import '../styles/planner-forms.css';
 import FieldInput from './FieldInput.svelte';
 
 interface FieldMapFormProps {
@@ -106,7 +107,7 @@ async function save(event: SubmitEvent) {
 {#if !loaded}
   <p>Loading...</p>
 {:else}
-  <form onsubmit={save} novalidate>
+  <form class="planner-form" onsubmit={save} novalidate>
     <h3>{id === undefined ? 'New' : 'Edit'} {createNoun(active.form.label, noun, noun !== undefined)}</h3>
     {#each inputs as { field, catalogField, modelId } (field.id)}
       <FieldInput
@@ -133,14 +134,8 @@ async function save(event: SubmitEvent) {
 {/if}
 
 <style>
-  form {
-    display: grid;
-    gap: var(--smrt-spacing-3);
-    padding: var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-large);
-  }
-
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   h3 {
     margin: 0;
   }
@@ -166,8 +161,9 @@ async function save(event: SubmitEvent) {
   }
 
   button.secondary {
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-control-border);
     background: transparent;
     color: var(--smrt-color-on-surface);
   }
+}
 </style>

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

@@ -1,6 +1,7 @@
 import type { ModelRecord } from '../data/source.ts';
 import type { ActiveForm } from '../forms/active.ts';
 import type { FieldMapForm } from '../recipes/types.ts';
+import '../styles/planner-forms.css';
 interface FieldMapFormProps {
     active: ActiveForm<FieldMapForm>;
     /** The row to edit; omitted when creating. */