@sempods/apps 0.7.1 → 0.8.0

package/scripts/sdk-update.mjs

@@ -55,6 +55,20 @@ export function releaseLinks(version) {
   };
 }
 
+// Since 0.6.0 the SDK ships its release notes and migration guide; read the
+// installed ones, which match the installed code.
+const INSTALLED_DOCS = join('node_modules', '@sempods', 'app-sdk', 'docs');
+
+/**
+ * Where to read about `version` after it is installed: the installed notes
+ * and guide when the SDK ships them, otherwise the published ones.
+ */
+export function releaseDocs(root, version) {
+  const notes = join(INSTALLED_DOCS, 'releases', `${version}.md`);
+  if (!existsSync(join(root, notes))) return releaseLinks(version);
+  return { release: notes, migration: join(INSTALLED_DOCS, 'migration.md') };
+}
+
 /** Plan everything before writing. Registry injection keeps tests offline. */
 export function planUpdate(
   root,
@@ -202,8 +216,9 @@ function main() {
       ? `Updated SDK to ${plan.version}.`
       : `Already at SDK ${plan.version}; nothing changed.`,
   );
+  const docs = releaseDocs(root, plan.version);
   console.log(
-    `SDK release: ${plan.release}\nMigration guide: ${plan.migration}`,
+    `SDK release notes: ${docs.release}\nMigration guide: ${docs.migration}`,
   );
 }
 

package/shared/files/{f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7 → 44c114d4d2c8b172f4757100f79e8a1a00d30c96ba2ad8f75c3373e52f6b849f}

@@ -47,9 +47,9 @@ it. Keep it free of credentials and private data.
 - Created from (`.sempods-baseline.json`): not recorded
 - SDK version at setup (`@sempods/app-sdk` in the root `package.json`): not recorded
 - Owner and review identity: not recorded
-- UI language: not selected
+- Owner's language for the app texts: not recorded
 - First app ID and idea: not selected
-- Test Pod/context: not selected (optional; synthetic data only)
+- Test Pod and contexts: not selected (optional; synthetic data only)
 - sempods version PRs (Dependabot): not chosen
 - Local URL and check result: not checked
 - Pod exercise and remaining gaps: not tested

package/shared/files/{31ede0d1a035d8531100ebfd751510c772ab0871309a0b9752a77fb96187eb53 → 843c078e84912158607ebb8ce0042589d676a742bcd3cf8b6c474d62ff3a6845}

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "new-app": "sempods-apps new-app",
+    "icon": "sempods-apps icon",
     "dev": "sempods-apps dev",
     "regenerate": "sempods-apps regenerate",
     "configure-site": "sempods-apps configure-site",
@@ -18,8 +19,8 @@
     "migrate": "sempods-apps migrate"
   },
   "devDependencies": {
-    "@sempods/app-sdk": "0.5.0",
+    "@sempods/app-sdk": "0.6.0",
     "@sempods/apps": "0.0.0",
-    "@sempods/client-sdk": "0.5.0"
+    "@sempods/client-sdk": "0.6.0"
   }
 }

package/shared/files/{1c29eed0a0297c742ca5814de9081ff8efce3b2da5d9e1bdf90a403873da4aa9 → e1c798ec8536cf8cff6c19caf622fa9076ae210b0d1733a6e82ea2c1f4104c43}

@@ -14,10 +14,20 @@ to it by itself.
 [Open this repository in your assistant and paste the starter prompt](../README.md#start-with-your-idea).
 Describe one thing you want to do: “Add something to my shopping list.” Your
 assistant sets up the app and gives you a local link to open.
-It chooses the technical details and asks you about what the app should do.
+It chooses the technical details and proposes a fitting look. It asks a few
+short questions about what the app is for, whether people use their own data
+or work on the same data, and where new entries and changes should go. You can
+describe these choices as lists or shared areas; no technical terms are needed.
 Review rules and automatic updates can wait until you have tried the first
 version.
 
+Already have data for this app? If you want, connect your Pod to the assistant
+through MCP, its connection to external tools and data. Agree which data it
+may inspect so it can make the app fit your existing tasks, contacts or events.
+This optional look only reads; it does not change your records. You can also
+provide a made-up example or start without it. You still sign in to the app
+separately when trying it.
+
 ## Change
 
 Ask for the next small improvement: “Let me mark an item as bought.” Keep trying
@@ -29,7 +39,12 @@ Your existing apps stay in the same repository.
 Use a test context with made-up data in your Pod. Sign in on the Pod's page,
 then choose that context in the app. Ask your assistant to check a save and a
 reload, and to tell you what it has not tested. Never paste passwords or tokens
-into chat. Without a Pod, you can still try the screen.
+into chat. Without a Pod you only see the sign-in screen; the app's own
+screens need a test context.
+
+Before your assistant hands over a screen, it shows you a screenshot from a
+phone-sized window and asks what you think. Say what you like and what feels
+off; that is how the app gets its look.
 
 ## Keep apps up to date
 

package/shared/snapshot.json

@@ -1,6 +1,6 @@
 {
   "format": 1,
-  "revision": "b9a807367932b1331df3f586df6cd8144ca3db006bd58dd4e4b92cc412dd3ccd",
+  "revision": "b39743fd5d824bb8bd37eaa9298b23ffe281dfd41799d652b5295f96191fdc02",
   "files": {
     ".agents/skills/app-workflow/SKILL.md": "0221b70340152ba3cc615342254603b29b89c4d7d944d7b3b3e647873bdcefa0",
     ".agents/skills/update/SKILL.md": "d3ca3a13c6524a2ee9382977ddc0539790813225f366306024a58c957a4716ee",
@@ -14,12 +14,12 @@
     ".node-version": "b911698dc3cf3227d34d0ad6727f1c4408791203c9665de99ab959331a1fb07d",
     "AGENTS.md": "393b09ecd18889d9e1fdf2a6df12d1f6c193fc7fcd89ba808ad94df521bad8db",
     "CLAUDE.md": "f9e2544290ee8418484e47194444ee58c2ea675682871ae8a8727d1edb17978e",
-    "INIT.md": "f2fb601d5ebc4ca72274ac9d3fcf7b7a96e27958bb92cd065a9165b501ee94d7",
+    "INIT.md": "44c114d4d2c8b172f4757100f79e8a1a00d30c96ba2ad8f75c3373e52f6b849f",
     "README.md": "2818c884d46d97ec14fe4921dbdc147769d29846c08a92b1d3225c5297cfed93",
     "apps.json": "9945f9bd573e5af8aad2e65cc8b4284fbb1d7e8b96c4efdd42eeb49132fb4327",
     "apps/.gitkeep": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
-    "docs/start.md": "1c29eed0a0297c742ca5814de9081ff8efce3b2da5d9e1bdf90a403873da4aa9",
-    "package.json": "31ede0d1a035d8531100ebfd751510c772ab0871309a0b9752a77fb96187eb53",
+    "docs/start.md": "e1c798ec8536cf8cff6c19caf622fa9076ae210b0d1733a6e82ea2c1f4104c43",
+    "package.json": "843c078e84912158607ebb8ce0042589d676a742bcd3cf8b6c474d62ff3a6845",
     "pnpm-workspace.yaml": "4660ca1887261ae658c7f587190e2b71ac91d15b1b6c4cf04dec823fdd0da654"
   }
 }

package/skeleton/app/NOTES.md

@@ -6,9 +6,27 @@ Your assistant keeps these notes up to date so the next session can continue.
 
 What the app is for and its first useful interaction.
 
+## Design
+
+Purpose and who uses it, the theme and how the icon was chosen, with later
+changes the owner asked for.
+
+## Data
+
+Who uses their own data or shared data; who reads, writes and deletes, and
+which limits the Pod can enforce. Which contexts are read, where new records
+go, and where edits to existing records go (the selected context or each
+row's source). What deletion means for other apps using the same records.
+If existing data was inspected, the agreed Pod, contexts and read scope;
+otherwise, what remains unknown. No credentials or private sample values.
+
 ## Vocabulary
 
-Types and properties (full IRIs) the app reads and writes.
+Existing data or standard vocabulary it follows, types and properties (full
+IRIs), text languages and status values. How subject identities and unknown
+fields survive other apps' edits; the reason for any custom extension.
+Which mappings were observed through optional MCP inspection or a supplied
+example, and which are assumptions still to verify.
 
 ## Decisions
 
@@ -16,4 +34,4 @@ Choices the owner made, with the date.
 
 ## Tested
 
-What was tried, against which Pod and context, and what is still untested.
+What was tried, against which Pod and contexts, and what is still untested.

package/skeleton/app/index.html

@@ -3,11 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#176354" />
+    <!-- The layout resizes with the on-screen keyboard and reaches the edges. -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
+    />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111315" />
     <!-- The callback page must not send its code and state in Referer. -->
     <meta name="referrer" content="strict-origin" />
-    <title>__APP_TITLE__</title>
   </head>
   <body>
     <div id="root"></div>

package/skeleton/app/package.json

@@ -11,18 +11,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "19.3.0",
-    "react-dom": "19.3.0"
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   },
   "devDependencies": {
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "6.1.2",
-    "oxlint": "1.87.0",
+    "oxlint": "1.89.0",
     "typescript": "7.0.2",
-    "vite": "8.3.3",
+    "vite": "8.3.5",
     "vite-plugin-pwa": "2.0.0",
-    "vitest": "5.0.3"
+    "vitest": "5.0.5"
   }
 }

package/skeleton/app/src/App.tsx

@@ -1,64 +1,96 @@
 import { useRef, useState } from 'react';
 import { createBrowserRuntime } from '@sempods/app-sdk';
 import {
+  AccessNotice,
   AppAccess,
   SempodsProvider,
   TargetScreen,
   useAppState,
+  useMessages,
   useSdkLocale,
 } from '@sempods/app-sdk/react';
 import { NewVersionNotice } from './NewVersionNotice.tsx';
+import { replaceUrl } from './routes.ts';
 import { app, runtimeOptions } from './sempods.generated.ts';
-import { startMessage } from './start.ts';
+import { texts, uiLocale } from './texts.ts';
+import { MenuIcon } from './ui/icons.tsx';
+import { Menu } from './ui/Menu.tsx';
 
-// One runtime for the app's lifetime, created outside rendering.
-const runtime = createBrowserRuntime(runtimeOptions);
+// One runtime for the app's lifetime, created outside rendering. Its return
+// after a sign-in goes through the router, which then shows that route.
+const runtime = createBrowserRuntime({ ...runtimeOptions, replaceUrl });
+
+// One UI language for the app's texts, the SDK components and the page.
+const { locale, language } = uiLocale(app.language, navigator.languages);
+document.documentElement.lang = language;
 
 // Vite hot replacement ends this module's runtime lifetime.
 if (import.meta.hot) import.meta.hot.dispose(() => runtime.dispose());
 
+// The app icon (public/favicon.svg), decorative next to the app's name.
+const icon = <img src={`${app.basePath}favicon.svg`} alt="" />;
+
 export default function App({
   registration,
 }: {
   readonly registration: Promise<ServiceWorkerRegistration | undefined>;
 }) {
   return (
-    <SempodsProvider runtime={runtime} language={app.language}>
+    <SempodsProvider runtime={runtime} language={language} locale={locale}>
       <NewVersionNotice registration={registration} />
       <Frame />
     </SempodsProvider>
   );
 }
 
-// The app owns its layout. AppAccess shows sign-in and recovery beside the
-// content and hides once a context is readable; the button reopens it.
+// The app owns its layout: a header with the app's icon and name, its icon
+// actions and a menu; AppAccess beside the content for sign-in and recovery,
+// and as a dialog for managing Pods and sharing from the menu. An app that
+// switches between contexts (lists) puts ui/ContextSwitch in place of the
+// h1.
 function Frame() {
-  const [open, setOpen] = useState(false);
-  const focusTarget = useRef<HTMLButtonElement>(null);
+  const [managing, setManaging] = useState(false);
+  const menuButton = useRef<HTMLButtonElement>(null);
   const { connections } = useAppState();
   const { messages } = useSdkLocale();
+  const t = useMessages(texts);
   const header = connections.length > 0;
   return (
     <main>
       {header && (
         <header>
-          <h1>{app.title}</h1>
-          <button
-            ref={focusTarget}
-            aria-expanded={open}
-            onClick={() => setOpen(!open)}
-          >
-            {messages.controls.dataAccess}
-          </button>
+          <h1>
+            {icon}
+            {app.title}
+          </h1>
+          <div className="header-actions">
+            {/* The app's own icon actions go here. */}
+            <Menu
+              label={t.menu}
+              trigger={<MenuIcon />}
+              button={menuButton}
+              items={[
+                {
+                  label: messages.controls.dataAccess,
+                  onSelect: () => setManaging(true),
+                },
+              ]}
+            />
+          </div>
         </header>
       )}
-      {/* Below the header's h1, AppAccess uses h2. */}
+      {/* Below the header's h1, AppAccess uses h2. It explains sign-in and
+          lost access; AccessNotice adds only that a context is read-only. */}
       <AppAccess
         appName={app.title}
+        description={app.description}
+        icon={icon}
         headingLevel={header ? 2 : 1}
-        open={open}
-        focusTarget={focusTarget}
+        open={managing}
+        onClose={() => setManaging(false)}
+        focusTarget={menuButton}
       />
+      <AccessNotice only="write" />
       <TargetScreen>
         <Start />
       </TargetScreen>
@@ -68,6 +100,6 @@ function Frame() {
 
 // Replace this screen with your app. It renders once a Pod context is chosen.
 function Start() {
-  const { language } = useSdkLocale();
-  return <p>{startMessage(language)}</p>;
+  const t = useMessages(texts);
+  return <p>{t.start}</p>;
 }

package/skeleton/app/src/NewVersionNotice.tsx

@@ -1,9 +1,10 @@
-// Adapted from the sempods TypeScript SDK v0.2.0 recipe
+// Adapted from the sempods TypeScript SDK v0.6.0 recipe
 // examples/todo/pwa/register.tsx, licensed under Apache-2.0; see
 // the LICENSE and NOTICE of the @sempods/app-sdk package. Changes: this header; the
-// registration function moved to pwa.ts.
+// registration function moved to pwa.ts; the text comes from texts.ts.
 import { useEffect, useState } from 'react';
-import { useSdkLocale } from '@sempods/app-sdk/react';
+import { useMessages } from '@sempods/app-sdk/react';
+import { texts } from './texts.ts';
 
 /**
  * Render beneath the app's actual locale provider so notices follow its language.
@@ -18,7 +19,7 @@ export function NewVersionNotice({
   readonly registration: Promise<ServiceWorkerRegistration | undefined>;
 }) {
   const [ready, setReady] = useState(false);
-  const { language } = useSdkLocale();
+  const t = useMessages(texts);
   useEffect(() => {
     let active = true;
     let stop = () => {};
@@ -53,11 +54,5 @@ export function NewVersionNotice({
     };
   }, [registration]);
   if (!ready) return null;
-  return (
-    <p role="status">
-      {language === 'de'
-        ? 'Eine neue Version ist bereit. Sie wird verwendet, sobald alle Fenster dieser App geschlossen sind.'
-        : 'A new version is ready. It is used once every window of this app has been closed.'}
-    </p>
-  );
+  return <p role="status">{t.newVersion}</p>;
 }

package/skeleton/app/src/examples/ListScreen.tsx

@@ -0,0 +1,176 @@
+// An example, not mounted: the default screen of a list app, built from the
+// SDK's quickstart screen with the kit. For a list app, copy it next to
+// App.tsx, render <ListScreen /> in place of <Start />, and rename the type,
+// fields, collection and texts to the app's own. Keep App.tsx's runtime,
+// provider and frame; take behaviour from the SDK's examples, never their
+// runtime, provider or styles.
+import {
+  LoadNotice,
+  RemoveButton,
+  ResourceEditor,
+  UnresolvedNotices,
+  UpdateNotice,
+  useCreation,
+  useFieldUpdate,
+  useList,
+  useMessages,
+  useResourceEditor,
+  useSelection,
+  useWorkflowAccess,
+} from '@sempods/app-sdk/react';
+import { fields, flag, text } from '@sempods/client-sdk/edit';
+import { Composer } from '../ui/Composer.tsx';
+import { Dialog } from '../ui/Dialog.tsx';
+import { AddIcon } from '../ui/icons.tsx';
+
+const schema = 'https://schema.org/';
+
+/** What one row is: a name and whether it is done. */
+const item = fields(
+  {
+    name: text(`${schema}name`, { language: null, trim: true }),
+    done: flag(`${schema}actionStatus`, {
+      on: `${schema}CompletedActionStatus`,
+      off: `${schema}PotentialActionStatus`,
+    }),
+  },
+  { type: `${schema}Action` },
+);
+
+// In an app these belong in src/texts.ts.
+const en = {
+  empty: 'Nothing here yet. Add the first item below.',
+  emptyReadOnly: 'Nothing in this list.',
+  done: (name: string) => `Done: ${name}`,
+  remove: (name: string) => `Delete: ${name}`,
+  edit: 'Edit item',
+  close: 'Close',
+  name: 'Name',
+  newItem: 'New item',
+  add: 'Add',
+};
+const listTexts: { readonly en: typeof en; readonly de: typeof en } = {
+  en,
+  de: {
+    empty: 'Noch nichts hier. Füge unten den ersten Eintrag hinzu.',
+    emptyReadOnly: 'Nichts in dieser Liste.',
+    done: (name) => `Erledigt: ${name}`,
+    remove: (name) => `Löschen: ${name}`,
+    edit: 'Eintrag bearbeiten',
+    close: 'Schließen',
+    name: 'Name',
+    newItem: 'Neuer Eintrag',
+    add: 'Hinzufügen',
+  },
+};
+
+export function ListScreen() {
+  const t = useMessages(listTexts);
+  // A list that can only be read gets no input and no invitation to add.
+  const { write } = useWorkflowAccess();
+  const list = useList(item);
+  const items = list.data?.items;
+  // One hook for the list; each row gets its part with `mutate.for(row)`.
+  const mutate = useFieldUpdate(item);
+  const { selected, select } = useSelection();
+  const editor = useResourceEditor(selected, item);
+  const creation = useCreation(item, {
+    initial: { name: '', done: false },
+    collection: 'items',
+  });
+
+  return (
+    <>
+      {/* Loading, a failed read with "Try again", never a failure as empty. */}
+      <LoadNotice {...list} />
+      {(list.state.kind === 'ready' || list.state.kind === 'loading') &&
+        items?.length === 0 &&
+        list.data?.skipped === 0 && (
+          <p className="empty">{write ? t.empty : t.emptyReadOnly}</p>
+        )}
+      <ul className="rows">
+        {items?.map((entry) => {
+          const row = mutate.for(entry);
+          return (
+            <li key={entry.iri} className="row">
+              {/* The label is the checkbox's 44px touch target. */}
+              <label>
+                <input
+                  type="checkbox"
+                  checked={row.data.done}
+                  disabled={!row.canMutate}
+                  onChange={() => void row.update({ done: !row.data.done })}
+                />
+                <span className="visually-hidden">{t.done(row.data.name)}</span>
+              </label>
+              <button
+                className="row-name"
+                onClick={() => void select(entry.iri)}
+              >
+                {row.data.name}
+              </button>
+              {/* Asks in the SDK's dialog before it deletes. */}
+              <RemoveButton
+                disabled={!row.canMutate}
+                onRemove={row.remove}
+                label={t.remove(row.data.name)}
+              />
+              {/* The changed row is the confirmation; problems show here. */}
+              <UpdateNotice {...row.notice} quiet />
+            </li>
+          );
+        })}
+      </ul>
+      {/* Recovery for a row with an open write that is no longer listed. */}
+      <UnresolvedNotices of={mutate} shown={items} />
+      {/* Outside the rows, so the draft stays reachable if its row goes.
+          The SDK's Escape in a field cancels like Cancel and discards the
+          draft; × and a click beside the dialog ask first. */}
+      {selected && (
+        <Dialog
+          label={t.edit}
+          closeLabel={t.close}
+          onClose={() => void select(null)}
+        >
+          <ResourceEditor editor={editor} onClose={() => select(null)}>
+            {(draft, change) => (
+              <label>
+                {t.name}
+                <input
+                  value={draft.name}
+                  onChange={(event) => change({ name: event.target.value })}
+                />
+              </label>
+            )}
+          </ResourceEditor>
+        </Dialog>
+      )}
+      <UpdateNotice {...creation.notice} quiet />
+      {write && (
+        <Composer>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              void creation.create();
+            }}
+          >
+            <input
+              aria-label={t.newItem}
+              placeholder={t.newItem}
+              value={creation.draft.name}
+              disabled={!creation.canEdit}
+              onChange={(event) => creation.change({ name: event.target.value })}
+            />
+            <button
+              aria-label={t.add}
+              title={t.add}
+              disabled={!creation.canCreate}
+            >
+              <AddIcon />
+            </button>
+          </form>
+        </Composer>
+      )}
+    </>
+  );
+}

package/skeleton/app/src/index.css

@@ -1,10 +1,11 @@
 :root {
-  /* Follow the system's light or dark mode; the SDK components follow the page.
-     The colours match the SDK defaults, so AppAccess sits seamlessly on the page. */
+  /* Follow the system's light or dark mode. The colours are the --sempods-*
+     tokens of the app's theme (src/themes/, imported in main.tsx), which
+     colour the app and the SDK components alike. */
   color-scheme: light dark;
   font-family: system-ui, sans-serif;
-  color: light-dark(#202923, #e8eee9);
-  background: light-dark(#fff, #191b1a);
+  color: var(--sempods-text);
+  background: var(--sempods-bg);
 }
 body {
   margin: 0;
@@ -14,24 +15,96 @@ main {
   margin: auto;
   padding: 16px;
 }
-header {
+/* The app's own header; AppAccess brings its own. */
+main > header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-header h1 {
+main > header h1 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   margin: 0;
   font-size: 1.4rem;
 }
-button,
-input,
-select {
+main > header h1 img {
+  width: 28px;
+  height: 28px;
+}
+
+/* The rules below style the app's own markup only. SDK components
+   ([data-sempods-ui]) bring their own styles and are left alone. :where()
+   keeps these rules at zero specificity, so any class overrides them. */
+
+/* Actions read as text, like the SDK's secondary actions: accent colour, no
+   frame, a calm hover and a visible focus, with 44px touch targets. */
+:where(button):not(:where([data-sempods-ui] *, [data-sempods-button])) {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sempods-accent);
   font: inherit;
-  margin: 0.25rem;
-  padding: 0.4rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+:where(button):not(:where([data-sempods-ui] *, [data-sempods-button])):where(
+    :hover:not(:disabled)
+  ) {
+  background: color-mix(in srgb, var(--sempods-accent) 8%, transparent);
+}
+:where(button):not(:where([data-sempods-ui] *, [data-sempods-button])):where(
+    :disabled
+  ) {
+  color: var(--sempods-muted);
+  cursor: default;
+}
+:where(input, select, textarea):not(
+    :where([data-sempods-ui] *, [type='checkbox'], [type='radio'])
+  ) {
+  box-sizing: border-box;
+  min-height: 44px;
+  padding: 8px 10px;
+  border: 1px solid var(--sempods-line);
+  border-radius: 6px;
+  background: var(--sempods-bg);
+  color: var(--sempods-text);
+  font: inherit;
+}
+/* A compact box; its wrapping <label> is the 44px touch target, as in the
+   SDK. Margins are not clickable, so wrap every checkbox in its label. */
+:where(input[type='checkbox'], input[type='radio']):not(
+    :where([data-sempods-ui] *)
+  ) {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  margin-inline-end: 10px;
+  accent-color: var(--sempods-accent);
+}
+:where(label:has(input[type='checkbox'], input[type='radio'])):not(
+    :where([data-sempods-ui] *)
+  ) {
+  display: inline-flex;
+  align-items: center;
+  min-width: 44px;
+  min-height: 44px;
+  cursor: pointer;
+}
+:where(button, input, select, textarea, a):not(
+    :where([data-sempods-ui] *, [data-sempods-button])
+  ):where(:focus-visible) {
+  outline: 2px solid var(--sempods-accent);
+  outline-offset: 2px;
 }
-input[type='checkbox'] {
-  accent-color: light-dark(#226044, #8acda6);
+/* Lists of items, without the browser's indentation and bullets. */
+:where(ul):not(:where([data-sempods-ui] *)) {
+  padding-inline-start: 0;
+  list-style: none;
 }