@sempods/apps 0.7.1 → 0.8.0

package/skeleton/app/src/ui/dismiss.ts

@@ -0,0 +1,30 @@
+import { useEffect, type RefObject } from 'react';
+
+/**
+ * Closes a popup on a pointer press outside `container` or on Escape, and
+ * returns focus to `button` after Escape.
+ */
+export function useDismiss(
+  open: boolean,
+  close: () => void,
+  container: RefObject<HTMLElement | null>,
+  button: RefObject<HTMLElement | null>,
+) {
+  useEffect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (!container.current?.contains(event.target as Node)) close();
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      close();
+      button.current?.focus();
+    };
+    document.addEventListener('pointerdown', onPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open, close, container, button]);
+}

package/skeleton/app/src/ui/icons.tsx

@@ -0,0 +1,53 @@
+// Line icons for icon buttons, drawn in the text colour. Each is decorative:
+// the button carries the name (aria-label and title).
+import type { ReactNode } from 'react';
+
+function Icon({ size = 22, children }: { size?: number; children: ReactNode }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const MenuIcon = () => (
+  <Icon>
+    <circle cx="12" cy="5" r="1" />
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="12" cy="19" r="1" />
+  </Icon>
+);
+
+export const ReloadIcon = () => (
+  <Icon>
+    <path d="M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5" />
+  </Icon>
+);
+
+export const AddIcon = () => (
+  <Icon>
+    <path d="M12 5v14M5 12h14" />
+  </Icon>
+);
+
+export const CloseIcon = () => (
+  <Icon size={20}>
+    <path d="M6 6l12 12M18 6L6 18" />
+  </Icon>
+);
+
+export const ChevronIcon = () => (
+  <Icon size={16}>
+    <path d="M6 9l6 6 6-6" />
+  </Icon>
+);

package/skeleton/app/src/ui/ui.css

@@ -0,0 +1,249 @@
+/* The small UI kit: header, menu, context switch, tabs, bottom bar and
+   dialog, on the --sempods-* tokens of index.css. Calm and flat: one line per
+   edge, no shadows. */
+
+/* Header: the app (or the context switch) at the start, icon actions and the
+   menu at the end, on one line at every width. A long name shrinks and wraps
+   inside the title, so the menu stays on screen. */
+main > header {
+  flex-wrap: nowrap;
+}
+main > header h1 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  flex: none;
+}
+.header-actions button {
+  padding: 10px;
+  color: var(--sempods-text);
+}
+
+/* Keeps a heading for screen readers without showing it. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Menu: a button and a short list below it in body text, as wide as its
+   longest item up to the screen's width. */
+.menu {
+  position: relative;
+  min-width: 0;
+}
+.menu-items {
+  position: absolute;
+  top: 100%;
+  z-index: 10;
+  display: grid;
+  width: max-content;
+  min-width: 14rem;
+  max-width: min(24rem, calc(100vw - 32px));
+  font-size: 1rem;
+  font-weight: 400;
+  /* A long name without spaces wraps inside the menu. */
+  overflow-wrap: anywhere;
+  padding: 4px;
+  border: 1px solid var(--sempods-line);
+  border-radius: 8px;
+  background: var(--sempods-bg);
+}
+.menu-end {
+  right: 0;
+}
+.menu-start {
+  left: 0;
+}
+.menu-items button {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  text-align: start;
+  color: var(--sempods-text);
+  font-weight: 400;
+}
+.menu-items button > span {
+  min-width: 0;
+}
+.menu-items small {
+  display: block;
+  color: var(--sempods-muted);
+  font-size: 0.8rem;
+}
+.menu-check {
+  flex: none;
+  width: 1rem;
+}
+.menu-items hr {
+  width: 100%;
+  margin: 4px 0;
+  border: 0;
+  border-top: 1px solid var(--sempods-line);
+}
+
+/* Context switch: app icon and the current context, as the header's title;
+   a failed request to share more shows below it. */
+.context-switch-wrap {
+  min-width: 0;
+}
+.context-switch > button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding: 8px 8px 8px 0;
+  color: var(--sempods-text);
+  font-size: 1.15rem;
+}
+.context-switch > button img {
+  flex: none;
+  width: 28px;
+  height: 28px;
+}
+.context-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.context-switch-problem {
+  margin: 0;
+  color: var(--sempods-muted);
+  font-size: 0.875rem;
+}
+
+/* Lists of items: a row with its checkbox, its name (opens the item) and its
+   actions; the empty state is a quiet line. */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid var(--sempods-line);
+}
+.row-name {
+  flex: 1;
+  min-width: 0;
+  text-align: start;
+  color: var(--sempods-text);
+  font-weight: 400;
+}
+/* A row's notice (a problem or an open outcome) takes its own line. */
+.row > [data-sempods-ui='notice'] {
+  flex-basis: 100%;
+}
+.empty {
+  color: var(--sempods-muted);
+}
+
+/* Tabs: the views as links on one line; the current one is underlined on
+   the row's only line. */
+.tabs {
+  display: flex;
+  gap: 1.25rem;
+  margin: 4px 0 8px;
+  border-bottom: 1px solid var(--sempods-line);
+}
+.tabs a {
+  margin-bottom: -1px;
+  padding: 10px 0;
+  border-bottom: 2px solid transparent;
+  color: var(--sempods-muted);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tabs a:hover {
+  color: var(--sempods-text);
+}
+.tabs a[aria-current='page'] {
+  border-bottom-color: var(--sempods-accent);
+  color: var(--sempods-text);
+  font-weight: 500;
+}
+
+/* Bottom bar: fixed in thumb reach, above the home indicator; the page
+   leaves room for it. */
+.composer {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--sempods-line);
+  background: var(--sempods-bg);
+}
+.composer-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 728px;
+  margin-inline: auto;
+}
+.composer-content > form {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+}
+.composer-content input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+}
+/* The bar's top line frames the input; the caret shows the focus. */
+.composer-content input:focus-visible {
+  outline: none;
+}
+main:has(.composer) {
+  padding-bottom: calc(88px + env(safe-area-inset-bottom));
+}
+
+/* Dialog: centred, a bottom sheet on phones. */
+.dialog {
+  width: min(28rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  border: 1px solid var(--sempods-line);
+  border-radius: 12px;
+  background: var(--sempods-bg);
+  color: var(--sempods-text);
+}
+.dialog::backdrop {
+  background: color-mix(in srgb, #000 35%, transparent);
+}
+.dialog-close {
+  float: right;
+  margin: 4px;
+  color: var(--sempods-muted);
+}
+.dialog-body {
+  clear: both;
+  padding: 0 20px 20px;
+}
+@media (max-width: 30rem) {
+  .dialog {
+    width: 100vw;
+    max-width: 100vw;
+    margin: auto 0 0;
+    border-radius: 12px 12px 0 0;
+  }
+}
+
+/* A primary action: filled, for the one main step of a dialog or form. */
+button.primary {
+  width: 100%;
+  background: var(--sempods-accent);
+  color: var(--sempods-on-accent);
+}
+button.primary:hover:not(:disabled) {
+  background: var(--sempods-accent);
+  opacity: 0.9;
+}

package/skeleton/app/vite.config.ts

@@ -1,13 +1,13 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
-import { base, pwa, server } from './vite.sempods.generated.ts';
+import { base, pageTitle, pwa, server } from './vite.sempods.generated.ts';
 
-// Base path, development port and PWA settings come from apps.json through the
-// generated file; add your own plugins and options here.
+// Base path, development port, page title and PWA settings come from apps.json
+// through the generated file; add your own plugins and options here.
 export default defineConfig({
   base,
   server,
   preview: server,
-  plugins: [react(), ...(pwa ? [VitePWA(pwa)] : [])],
+  plugins: [react(), pageTitle, ...(pwa ? [VitePWA(pwa)] : [])],
 });

package/skills/update/SKILL.md

@@ -72,5 +72,7 @@ instead.
    request's branch, or open a pull request "Update the tooling to <version>",
    with the migration report, each manual case and how it was decided, and
    what to try. Tell the owner what changed in plain words and
-   what they should try. App code, app notes and the owner's entries in
-   `package.json` are never rewritten by the migration.
+   what they should try. App notes and the owner's entries in `package.json`
+   are never rewritten by the migration; of the apps' files it only
+   regenerates the generated configuration and moves files still unchanged
+   from the skeleton where a release's upgrade notes say so.

package/skeleton/app/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#176354"/></svg>

package/skeleton/app/src/start.test.ts

@@ -1,15 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { app } from './sempods.generated.ts';
-import { startMessage } from './start.ts';
-
-describe('startMessage', () => {
-  it('speaks the app language', () => {
-    expect(startMessage('de')).toMatch(/^Verbunden\./);
-    expect(startMessage('en')).toMatch(/^Connected\./);
-  });
-
-  it('has a text for the configured language', () => {
-    // The generated configuration imports without a browser.
-    expect(startMessage(app.language)).not.toBe('');
-  });
-});

package/skeleton/app/src/start.ts

@@ -1,9 +0,0 @@
-import type { Language } from '@sempods/app-sdk';
-
-// Replace this with your app's own domain logic. Pure functions like this one
-// are tested in src/start.test.ts without a browser or a Pod.
-export function startMessage(language: Language): string {
-  return language === 'de'
-    ? 'Verbunden. Beschreibe deinem Assistenten, was diese App tun soll.'
-    : 'Connected. Tell your assistant what this app should do.';
-}