@happyvertical/smrt-planner 0.0.1 → 0.1.0

package/dist/catalog/generate/exclusions.d.ts

@@ -16,3 +16,11 @@
 export declare const EXCLUDED_PACKAGES: Readonly<Record<string, string>>;
 export declare const PACKAGE_SCOPE = "@happyvertical/";
 export declare const PACKAGE_PREFIX = "@happyvertical/smrt-";
+/**
+ * Models that are s-m-r-t bookkeeping inside a package the catalog keeps,
+ * never something a visitor would add or see: dropped from the catalog, the
+ * reason recorded here. Qualified names.
+ */
+export declare const EXCLUDED_MODELS: Readonly<Record<string, string>>;
+/** Is `field` of a model in `packageName` a framework-managed money internal? */
+export declare function isInternalMoneyField(packageName: string, field: string): boolean;

package/dist/catalog/generate/exclusions.js

@@ -31,3 +31,32 @@ export const EXCLUDED_PACKAGES = {
 };
 export const PACKAGE_SCOPE = '@happyvertical/';
 export const PACKAGE_PREFIX = `${PACKAGE_SCOPE}smrt-`;
+/**
+ * Models that are s-m-r-t bookkeeping inside a package the catalog keeps,
+ * never something a visitor would add or see: dropped from the catalog, the
+ * reason recorded here. Qualified names.
+ */
+export const EXCLUDED_MODELS = {
+    '@happyvertical/smrt-commerce:MoneyMigrationDocument': 'tenant money-migration journal (smrt#3988); written only by the migration',
+};
+/**
+ * Money-model internals of smrt-commerce (smrt#3988): serialized snapshots
+ * (`*Json`: tax components, registrations, credit bases, sync state), the
+ * freeze identity (`moneySnapshotId`), the migration's rollback copy
+ * (`legacyAmount`) and its marker and owner (`moneyModel`,
+ * `moneyMigrationId`). The framework writes them; generated surfaces and
+ * cookbooks never do. They stay in the catalog marked `system`, so forms,
+ * lists, record pages and policies skip them while sample data still keeps
+ * a line's tax snapshot.
+ */
+const INTERNAL_MONEY_FIELDS = new Set([
+    'moneySnapshotId',
+    'legacyAmount',
+    'moneyModel',
+    'moneyMigrationId',
+]);
+/** Is `field` of a model in `packageName` a framework-managed money internal? */
+export function isInternalMoneyField(packageName, field) {
+    return (packageName === `${PACKAGE_PREFIX}commerce` &&
+        (INTERNAL_MONEY_FIELDS.has(field) || /[a-z]Json$/.test(field)));
+}

package/dist/catalog/generate/extract.js

@@ -1,4 +1,4 @@
-import { PACKAGE_PREFIX } from "./exclusions.js";
+import { EXCLUDED_MODELS, isInternalMoneyField, PACKAGE_PREFIX, } from "./exclusions.js";
 import { extractBrowser, extractRecipeMetadata } from "./recipe-metadata.js";
 /** Fields the framework manages; shown in the catalog, hidden from forms. */
 const SYSTEM_FIELDS = new Set([
@@ -10,7 +10,22 @@ const SYSTEM_FIELDS = new Set([
     'tenantId',
 ]);
 /** Field types that hold other rows, not a value a form can edit. */
-const NON_VALUE_TYPES = new Set(['oneToMany', 'meta']);
+const NON_VALUE_TYPES = new Set(['oneToMany']);
+/**
+ * A `Meta<T>` field is a value kept in the row's `_meta_data` column: the form
+ * edits it as its underlying type (`_meta.underlyingType`). One without that
+ * type is not a value the planner can show.
+ */
+function valueType(field) {
+    if (NON_VALUE_TYPES.has(field.type))
+        return undefined;
+    if (field.type !== 'meta')
+        return field.type;
+    const underlying = field._meta?.underlyingType;
+    return typeof underlying === 'string' && underlying && underlying !== 'meta'
+        ? underlying
+        : undefined;
+}
 const CRUD_VERBS = ['list', 'get', 'create', 'update', 'delete'];
 const byName = (a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
 /** `@happyvertical/smrt-products` -> `products`. */
@@ -27,6 +42,7 @@ function primitiveDefault(value) {
         ? value
         : undefined;
 }
+const FORMATS = new Set(['money', 'date', 'datetime', 'percent']);
 const WIDGETS = new Set([
     'textarea',
     'currency',
@@ -47,6 +63,9 @@ function extractUi(value) {
             ? { order: raw.order }
             : {}),
         ...(typeof raw.locked === 'boolean' ? { locked: raw.locked } : {}),
+        ...(typeof raw.format === 'string' && FORMATS.has(raw.format)
+            ? { format: raw.format }
+            : {}),
         ...(typeof raw.widget === 'string' && WIDGETS.has(raw.widget)
             ? { widget: raw.widget }
             : {}),
@@ -60,14 +79,15 @@ function extractEnum(value) {
         ? value
         : undefined;
 }
-function extractFields(raw) {
+function extractFields(raw, packageName) {
     const fields = [];
     for (const [name, field] of Object.entries(raw.fields)) {
-        if (NON_VALUE_TYPES.has(field.type))
+        const type = valueType(field);
+        if (!type)
             continue;
         const entry = {
             name,
-            type: field.type,
+            type,
             required: field.required === true,
         };
         const fallback = primitiveDefault(field.default);
@@ -85,8 +105,9 @@ function extractFields(raw) {
         if (typeof described === 'string' && described.trim()) {
             entry.description = described.trim();
         }
-        if (SYSTEM_FIELDS.has(name))
+        if (SYSTEM_FIELDS.has(name) || isInternalMoneyField(packageName, name)) {
             entry.system = true;
+        }
         fields.push(entry);
     }
     return fields;
@@ -210,7 +231,7 @@ export function extractPackage(raw) {
     const browser = extractBrowser(knowledge?.browser ?? manifest.browser);
     const objects = Object.values(manifest.objects);
     const objectMap = new Map(objects.map((o) => [o.qualifiedName, o]));
-    const rawModels = objects.filter((o) => isModel(o, objectMap));
+    const rawModels = objects.filter((o) => isModel(o, objectMap) && !EXCLUDED_MODELS[o.qualifiedName]);
     const modelMap = new Map(rawModels.map((m) => [m.qualifiedName, m]));
     const collections = objects.filter((o) => !modelMap.has(o.qualifiedName));
     const knowledgeSurfaces = knowledge?.surfaces ?? null;
@@ -253,7 +274,7 @@ export function extractPackage(raw) {
             aiCallable: mcpOps.has(m.name),
         }))
             .sort(byName);
-        const fields = extractFields(model);
+        const fields = extractFields(model, packageName);
         const references = [
             ...new Set(fields
                 .filter((f) => f.related && ['foreignKey', 'crossPackageRef'].includes(f.type))

package/dist/catalog/types.d.ts

@@ -24,7 +24,14 @@ export interface CatalogFieldUI {
      * in when the catalog loads; a value in the manifest always wins.
      */
     widget?: CatalogFieldWidget;
+    /**
+     * How the value is shown (`_meta.ui.format`), e.g. `money`. A declared
+     * format wins over the planner's name-based guess (`isMoneyField`).
+     */
+    format?: CatalogFieldFormat;
 }
+/** The presentation formats a manifest's `ui.format` may name. */
+export type CatalogFieldFormat = 'money' | 'date' | 'datetime' | 'percent';
 /** The widget hints of happyvertical/smrt#3599. */
 export type CatalogFieldWidget = 'textarea' | 'currency' | 'email' | 'url' | 'phone';
 export interface CatalogField {

package/dist/components/AdvancedStyles.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+import { onDestroy } from 'svelte';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { highlightCss } from '../theme/css-highlight.js';
+import {
+  approveCustomCss,
+  containCustomCss,
+  customCssApproved,
+  customCssDisabled,
+  shellScopeOf,
+} from '../theme/custom-css.svelte.js';
+
+interface Props {
+  backHref?: string;
+}
+let { backHref = '#/configure/' }: Props = $props();
+const css = $derived(cookbookStore.theme?.customCss ?? '');
+let draftCss = $state('');
+let editing = $state(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+const tokens = $derived(highlightCss(draftCss));
+// CSS that arrived with a cookbook waits for the visitor's approval.
+const pending = $derived(Boolean(css) && !editing && !customCssApproved(css));
+let highlight = $state<HTMLElement | null>(null);
+let editor = $state<HTMLTextAreaElement | null>(null);
+
+$effect(() => {
+  const stored = css;
+  if (!editing || stored === draftCss) {
+    draftCss = stored;
+    editing = false;
+  }
+});
+
+// Keep the current keystrokes on screen while the host confirms the cookbook.
+$effect(() => {
+  if (typeof document === 'undefined' || !editing || !draftCss) return;
+  if (customCssDisabled(location.search)) return;
+  const scope = shellScopeOf(editor);
+  if (!scope) return;
+  const contained = containCustomCss(draftCss, scope);
+  if (!contained) return;
+  const style = document.createElement('style');
+  style.dataset.smrtPlannerDraft = '';
+  style.textContent = contained;
+  document.head.append(style);
+  return () => style.remove();
+});
+
+function syncScroll() {
+  if (highlight && editor) {
+    highlight.scrollTop = editor.scrollTop;
+    highlight.scrollLeft = editor.scrollLeft;
+  }
+}
+
+function setCss(value: string) {
+  cookbookStore.setTheme({
+    ...cookbookStore.theme,
+    customCss: value || undefined,
+  });
+}
+
+function editCss(value: string) {
+  // What the visitor types here is theirs to apply.
+  approveCustomCss(value);
+  draftCss = value;
+  editing = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => setCss(draftCss), 400);
+}
+
+onDestroy(() => {
+  clearTimeout(timer);
+  if (editing) setCss(draftCss);
+});
+</script>
+
+<section class="advanced-styles" aria-labelledby="advanced-styles-title">
+  <a class="back" href={backHref} data-sveltekit-reload={backHref.startsWith('/') ? true : undefined}>← Back to Theme</a>
+  <div class="heading">
+    <div>
+      <h1 id="advanced-styles-title">Advanced Styles</h1>
+      <p>Make this app your own with CSS. Changes appear as you type and are saved with your cookbook.</p>
+    </div>
+    <span class="live"><span aria-hidden="true"></span>Live preview</span>
+  </div>
+  {#if pending}
+    <div class="pending" role="status">
+      <p>This cookbook brings its own CSS. It is not applied until you review and approve it.</p>
+      <button type="button" onclick={() => approveCustomCss(css)}>Apply these styles</button>
+    </div>
+  {/if}
+  <label for="advanced-css">Custom CSS</label>
+  <div class="editor">
+    <pre bind:this={highlight} aria-hidden="true"><code>{#each tokens as token}<span class:comment={token.kind === 'comment'} class:selector={token.kind === 'selector'} class:property={token.kind === 'property'} class:value={token.kind === 'value'} class:punctuation={token.kind === 'punctuation'}>{token.text}</span>{/each}</code></pre>
+    <textarea id="advanced-css" bind:this={editor} value={draftCss} oninput={(event) => editCss(event.currentTarget.value)}
+      onscroll={syncScroll} spellcheck="false" maxlength="65536" wrap="off"
+      placeholder="/* Add your app styles here */" aria-describedby="advanced-css-help"></textarea>
+  </div>
+  <p id="advanced-css-help" class="help">Ask your agent to write styles here, or start with a selector like <code>.smrt-admin-shell</code>. Clearing the editor removes your custom styles. Styles apply only inside the app shell and cannot load files from other sites; add <code>?styles=off</code> to the address to turn them off.</p>
+</section>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .advanced-styles { display: grid; gap: 1rem; max-inline-size: 72rem; }
+  .pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); }
+  .pending p { margin: 0; }
+  .back { color: var(--smrt-color-primary); font-weight: 700; text-decoration: none; }
+  .back:hover { text-decoration: underline; }
+  .heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
+  h1, p { margin: 0; }
+  h1 { font: var(--smrt-typography-headline-large-font); letter-spacing: var(--smrt-typography-headline-large-tracking); }
+  .heading p, .help { color: var(--smrt-color-on-surface-variant); }
+  .heading p { margin-top: .35rem; }
+  .live { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .4rem .65rem; border-radius: 2rem; background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); font-size: .8rem; font-weight: 700; }
+  .live span { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--smrt-color-primary); }
+  label { font-weight: 700; }
+  .editor { position: relative; min-block-size: 24rem; border: var(--smrt-control-border); border-radius: var(--smrt-radius-large, .75rem); background: var(--smrt-surface-control); overflow: hidden; }
+  .editor:focus-within { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  pre, textarea { box-sizing: border-box; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 1rem; overflow: auto; white-space: pre; tab-size: 2; font: 500 .9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: normal; }
+  pre { pointer-events: none; color: var(--smrt-color-on-surface); }
+  textarea { z-index: 1; border: 0; resize: none; background: transparent; color: transparent; caret-color: var(--smrt-color-on-surface); -webkit-text-fill-color: transparent; }
+  textarea::selection { background: color-mix(in srgb, var(--smrt-color-primary) 28%, transparent); }
+  textarea:focus { outline: none; }
+  textarea::placeholder { color: var(--smrt-color-on-surface-variant); -webkit-text-fill-color: var(--smrt-color-on-surface-variant); }
+  /* Syntax roles on the theme's own colours, so they follow the scheme and
+     the chosen brand instead of a fixed light/dark palette. */
+  .selector { color: var(--smrt-color-tertiary); }
+  .property { color: var(--smrt-color-primary); }
+  .value { color: var(--smrt-color-secondary); }
+  .comment { color: var(--smrt-color-on-surface-variant); }
+  .punctuation { color: var(--smrt-color-on-surface-variant); }
+  .help { font-size: .9rem; }
+  @media (max-width: 42rem) { .heading { display: grid; } .live { justify-self: start; } }
+}
+</style>

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

@@ -0,0 +1,6 @@
+interface Props {
+    backHref?: string;
+}
+declare const AdvancedStyles: import("svelte").Component<Props, {}, "">;
+type AdvancedStyles = ReturnType<typeof AdvancedStyles>;
+export default AdvancedStyles;

package/dist/components/AiModelsPage.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+// The AI models page ("Set up your assistant"): the static app serves it at
+// `/ai/`, a mounted `Planner` at `#/ai/`. Both render this.
+import { aiState } from '../ai/instance.js';
+import AiSetup from './AiSetup.svelte';
+
+interface AiModelsPageProps {
+  /** Where the breadcrumb's "Planner" leads. */
+  backHref: string;
+}
+
+let { backHref }: AiModelsPageProps = $props();
+</script>
+
+<div class="ai-page">
+  <p class="meta"><a href={backHref}>Planner</a> / AI models</p>
+  <h1>Set up your assistant</h1>
+  <p class="privacy">{aiState.privacyNote}</p>
+  <AiSetup />
+</div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .ai-page {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  h1,
+  p {
+    margin: 0;
+  }
+
+  .meta,
+  .privacy {
+    color: var(--smrt-color-on-surface-variant);
+  }
+}
+</style>

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

@@ -0,0 +1,7 @@
+interface AiModelsPageProps {
+    /** Where the breadcrumb's "Planner" leads. */
+    backHref: string;
+}
+declare const AiModelsPage: import("svelte").Component<AiModelsPageProps, {}, "">;
+type AiModelsPage = ReturnType<typeof AiModelsPage>;
+export default AiModelsPage;

package/dist/components/AiSetup.svelte

@@ -42,6 +42,12 @@ const byo = $derived(aiState.byo);
 const thinkWhere = $derived(
   summaries.find((s) => s.id === 'think')?.where ?? '',
 );
+const modeLabel = {
+  manual: 'Manual planning',
+  byo: 'Your model',
+  browser: 'In-browser model (WebLLM)',
+  host: "This site's server",
+} as const;
 
 const model = $derived(getModel(session.prefs.modelId));
 // A roomy graphics card can run the smarter model; it is only suggested, the
@@ -84,7 +90,28 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
           </p>
         </div>
       </header>
-      {#if mode === 'host'}
+      {#if aiState.availableModes.length > 1}
+        <label>
+          Assistant mode
+          <Select
+            value={mode}
+            onchange={(event) =>
+              aiState.selectInference(event.currentTarget.value as keyof typeof modeLabel)}
+          >
+            {#each aiState.availableModes as option (option)}
+              <option value={option}>{modeLabel[option]}</option>
+            {/each}
+          </Select>
+        </label>
+        <p class="meta">Changing modes happens only when you choose it here.</p>
+      {/if}
+      {#if mode === 'manual'}
+        <p class="status">Inference off</p>
+        <p class="meta">
+          Build, edit, validate and export your cookbook without a model. No
+          provider is contacted and no browser model is downloaded.
+        </p>
+      {:else if mode === 'host'}
         <p class="status">Server</p>
         <p class="meta">
           This site's server answers the assistant. What you type, and a short
@@ -146,7 +173,9 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
             </p>
           {/if}
           <p class="meta">
-            Stored only in this browser, and sent only to {byo.baseUrl || 'the address above'} (https, or this computer).
+            {aiState.inference.credentialPersistence === 'memory'
+              ? 'Kept only in this tab until reload'
+              : 'Stored only in this browser'}, and sent only to {byo.baseUrl || 'the address above'} (https, or this computer).
             <button class="link" type="button" onclick={() => byo.forgetKey()}>
               Forget the key
             </button>
@@ -380,6 +409,8 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
@@ -394,9 +425,9 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
     padding: var(--smrt-spacing-4);
     min-width: 0;
     overflow-wrap: anywhere;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-lg, 12px);
-    background: var(--smrt-color-surface-container-low, transparent);
+    background: var(--smrt-surface-panel, transparent);
   }
 
   header {
@@ -412,7 +443,7 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
   }
 
   .card[data-state='ready'] .badge {
@@ -422,13 +453,13 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
   }
 
   .card[data-state='available'] .badge {
-    border: 1px dashed var(--smrt-color-outline);
+    border: 1px dashed var(--smrt-hairline-strong-color);
     color: var(--smrt-color-on-surface-variant);
   }
 
   .card[data-state='off'] .badge {
     position: relative;
-    border: 1px dashed var(--smrt-color-outline-variant);
+    border: 1px dashed var(--smrt-hairline-color);
     opacity: 0.5;
   }
 
@@ -478,7 +509,7 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
   .notice {
     margin: 0 0 var(--smrt-spacing-3);
     padding: var(--smrt-spacing-3);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-md, 8px);
   }
 
@@ -496,4 +527,5 @@ const handsFreeAvailable = $derived(voice.status === 'ready');
     cursor: pointer;
     font: inherit;
   }
+}
 </style>

package/dist/components/AiStatusIcons.svelte

@@ -30,6 +30,8 @@ const icons: Record<CapabilityId, string> = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .ai-status {
     display: flex;
     gap: var(--smrt-spacing-2);
@@ -48,12 +50,12 @@ const icons: Record<CapabilityId, string> = {
   }
 
   .cap:hover {
-    background: var(--smrt-color-surface-container-high, transparent);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
 
   .cap:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .cap[data-state='ready'] {
@@ -63,14 +65,14 @@ const icons: Record<CapabilityId, string> = {
 
   /* Set up elsewhere but not on: dashed and muted. */
   .cap[data-state='available'] {
-    border: 1px dashed var(--smrt-color-outline);
+    border: 1px dashed var(--smrt-hairline-strong-color);
     color: var(--smrt-color-on-surface-variant);
   }
 
   /* Not possible here: dashed, faded and struck through. */
   .cap[data-state='off'] {
     position: relative;
-    border: 1px dashed var(--smrt-color-outline-variant);
+    border: 1px dashed var(--smrt-hairline-color);
     color: var(--smrt-color-on-surface-variant);
     opacity: 0.5;
   }
@@ -83,4 +85,5 @@ const icons: Record<CapabilityId, string> = {
     border-top: 2px solid currentColor;
     transform: rotate(-45deg);
   }
+}
 </style>

package/dist/components/AppSettings.svelte

@@ -4,9 +4,17 @@ import {
   CurrencySelect,
   FieldLabel,
   Input,
+  Select,
+  Switch,
 } from '@happyvertical/smrt-ui/forms';
+import {
+  defaultTaxCode,
+  EXAMPLE_TAX_CODES,
+  type SampleTaxCode,
+  SEEDED_TAX_CODES,
+} from '../data/money.js';
 import { fractionToPercent, percentToFraction } from '../fields/percent.js';
-import type { AppSettings } from '../settings/app-settings.js';
+import type { AppSettings, TaxRounding } from '../settings/app-settings.js';
 
 interface AppSettingsProps {
   value: AppSettings;
@@ -27,6 +35,18 @@ const TERMS = [
 ];
 
 const set = (patch: Partial<AppSettings>) => onchange({ ...value, ...patch });
+
+/** The code new documents default to, from the tax rate (smrt's activation). */
+const fallback = $derived(defaultTaxCode(value.taxRate));
+/** The other codes a line can choose: the seeded ones and the example pack. */
+const others = $derived(
+  [...SEEDED_TAX_CODES, ...EXAMPLE_TAX_CODES].filter(
+    (code) => code.id !== fallback.id,
+  ),
+);
+const rates = (code: SampleTaxCode) =>
+  code.components.map((part) => part.name).join(' + ') ||
+  `No tax, reported as ${code.kind.replace(/-/g, ' ')}`;
 </script>
 
 <div class="settings">
@@ -51,6 +71,33 @@ const set = (patch: Partial<AppSettings>) => onchange({ ...value, ...patch });
     <span class="percent-sign" aria-hidden="true">%</span>
   </div>
 
+  <div class="field">
+    <FieldLabel for="{idPrefix}-rounding" label="Tax rounding" />
+    <Select
+      id="{idPrefix}-rounding"
+      value={value.taxRounding}
+      onchange={(event) =>
+        set({ taxRounding: event.currentTarget.value as TaxRounding })}
+    >
+      <option value="line">Per line</option>
+      <option value="document">Once per document</option>
+    </Select>
+  </div>
+
+  <div class="field switch">
+    <Switch
+      checked={value.pricesIncludeTax}
+      onchange={(event) =>
+        set({ pricesIncludeTax: event.currentTarget.checked })}
+      label="Prices include tax"
+    />
+    <small>
+      {value.pricesIncludeTax
+        ? 'A line’s amount is what the customer pays; tax is part of it.'
+        : 'Tax is added on top of each line’s amount.'}
+    </small>
+  </div>
+
   <div class="field">
     <FieldLabel for="{idPrefix}-terms" label="Default payment terms" />
     <Input
@@ -70,7 +117,29 @@ const set = (patch: Partial<AppSettings>) => onchange({ ...value, ...patch });
   </div>
 </div>
 
+<section class="tax-codes" aria-labelledby="{idPrefix}-tax-codes">
+  <h3 id="{idPrefix}-tax-codes">Tax codes</h3>
+  <p class="meta">
+    New documents use <strong>{fallback.name}</strong> ({rates(fallback)}),
+    from the default tax rate. A line can choose another code; an exempt
+    customer pays none.
+  </p>
+  <ul>
+    {#each others as code (code.id)}
+      <li data-tax-code={code.code}>
+        <span class="name">{code.name}</span>
+        <span class="rates">{rates(code)}</span>
+      </li>
+    {/each}
+  </ul>
+  <p class="meta">
+    The country codes are smrt’s examples; check they apply before using one.
+  </p>
+</section>
+
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .settings {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
@@ -97,4 +166,39 @@ const set = (patch: Partial<AppSettings>) => onchange({ ...value, ...patch });
     padding-bottom: var(--smrt-spacing-2);
     color: var(--smrt-color-on-surface-variant);
   }
+
+  .switch small,
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .tax-codes {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    margin-top: var(--smrt-spacing-4);
+  }
+
+  .tax-codes h3,
+  .tax-codes p {
+    margin: 0;
+  }
+
+  .tax-codes ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    gap: var(--smrt-spacing-1) var(--smrt-spacing-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .tax-codes li {
+    display: grid;
+  }
+
+  .tax-codes .rates {
+    font-size: 0.875rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+}
 </style>