teacup-os 0.1.0 → 0.1.1

package/dist/teacup.js

@@ -145,6 +145,11 @@ function validateManifest(m, folder2, opts = {}) {
     typeof m.description === "string" && m.description.length >= 10 && m.description.length <= 140,
     "description must be one sentence of 10 to 140 characters"
   );
+  const sub = m.subtitle;
+  need(
+    sub === void 0 || words(sub, 3, 40) && !/[.!]$/.test(sub),
+    "subtitle must be 3 to 40 characters, no full stop"
+  );
   need(m.kind === "kit" || m.kind === "framed", "kind must be kit or framed");
   if (opts.outside)
     need(m.url === `https://${m.id}.backed.cc/v/${m.version}/`, "an outside app lives at its own address on backed.cc");
@@ -346,9 +351,23 @@ function smallTextBoxes(file, dir) {
   }
   return out;
 }
-function iconProblems(icon) {
+const ICON_MAX_BYTES = 4e3;
+function iconProblems(icon, exception = false) {
   if (!icon.trimStart().startsWith("<svg")) return ["icon.svg is missing or isn't an SVG"];
-  return /<script|<foreignObject|<iframe|<use|\son[a-z]+\s*=|href\s*=|javascript:/i.test(icon) ? ["icon.svg may only draw shapes: no scripts, event handlers, links or embedded content"] : [];
+  if (/<script|<foreignObject|<iframe|<use|<image|\son[a-z]+\s*=|href\s*=|javascript:|url\(\s*['"]?[a-z]+:/i.test(icon))
+    return ["icon.svg may only draw shapes: no scripts, event handlers, links, pictures or embedded content"];
+  if (exception) return [];
+  const problems = [];
+  const root = icon.match(/<svg[^>]*>/)?.[0] ?? "";
+  if (!/viewBox="0 0 24 24"/.test(root))
+    problems.push('icon.svg should be a Lucide glyph on its 24 grid: viewBox="0 0 24 24" (see lucide.dev)');
+  if (/<text\b/i.test(icon)) problems.push("icon.svg has words in it; an icon is a glyph, never text");
+  const strokes = [...icon.matchAll(/stroke-width\s*[=:]\s*"?([\d.]+)/g)].map((m) => m[1]);
+  if (strokes.some((w) => w !== "2"))
+    problems.push("icon.svg's stroke should be 2, as every Teacup icon's is (Lucide's own weight)");
+  if (Buffer.byteLength(icon) > ICON_MAX_BYTES)
+    problems.push(`icon.svg is ${Buffer.byteLength(icon)} bytes; keep it under ${ICON_MAX_BYTES} (one glyph)`);
+  return problems;
 }
 const glow = (at, colour, clear, size = "120% 90%", reach = "55%") => `radial-gradient(${size} at ${at}, ${colour} 0%, ${clear} ${reach})`;
 const WALLPAPERS = [

package/kit/icons.ts

@@ -0,0 +1,39 @@
+// Teacup's one icon family: Lucide (https://lucide.dev), outlines only, ISC licence (kit/lucide/LICENSE). Only the
+// glyphs Teacup uses are copied in, as they come in lucide-static (1.70.0), into kit/lucide/<name>.svg: add one by
+// copying its file there. Every glyph is drawn on Lucide's 24 grid, in the text's colour, with one stroke weight.
+
+const files = import.meta.glob<string>("./lucide/*.svg", { query: "?raw", import: "default", eager: true });
+
+/** Each glyph's drawing (what's inside its <svg>), by name. */
+export const GLYPHS: Record<string, string> = Object.fromEntries(
+  Object.entries(files).map(([path, svg]) => [
+    path.replace(/^.*\/|\.svg$/g, ""),
+    (svg.match(/<svg[^>]*>([\s\S]*)<\/svg>/)?.[1] ?? "").replace(/\s+/g, " ").trim(),
+  ]),
+);
+
+/** The stroke every glyph is drawn with: Lucide's own 2 on its 24 grid. */
+export const STROKE = 2;
+
+/** A glyph as inline SVG, in the text's colour. */
+export const glyph = (name: string, cls = "glyph", stroke = STROKE) =>
+  `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${stroke}" ` +
+  `stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${GLYPHS[name] ?? ""}</svg>`;
+
+/** The Assistant's orb in the light (apps/assistant/icon.svg is its dark self; shell icons.css draws the same). */
+const ORB_LIGHT =
+  "<style>.orb-bg-a{stop-color:#fff}.orb-bg-b{stop-color:#e8e6f3}.orb-sq{fill:#6a4fe8}.orb-core{fill:#14151e}</style>";
+
+/** Whether an app's mark is drawn edge to edge (the Assistant's orb), not as a glyph in the middle of its tile. */
+export const isFullMark = (svg: string) => /<svg[^>]*\sdata-full/.test(svg);
+
+/**
+ * One of Teacup's own app marks as an image address, as it should look now: a mark that follows light and dark
+ * (data-themed) carries its light colours unless the page is dark.
+ */
+export function markPicture(svg: string): string {
+  const dark = globalThis.document?.documentElement.dataset.theme === "dark";
+  let s = svg.includes("xmlns") ? svg : svg.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
+  if (!dark && s.includes("data-themed")) s = s.replace(/(<svg[^>]*>)/, `$1${ORB_LIGHT}`);
+  return `data:image/svg+xml,${encodeURIComponent(s)}`;
+}

package/kit/lucide/LICENSE

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/kit/lucide/a-large-small.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-a-large-small"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16" />
+  <path d="M15.697 14h5.606" />
+  <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+  <path d="M3.304 13h6.392" />
+</svg>

package/kit/lucide/bell.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-bell"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+</svg>

package/kit/lucide/file.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-file"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+</svg>

package/kit/lucide/folder.svg

@@ -0,0 +1,15 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-folder"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>

package/kit/lucide/history.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-history"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+  <path d="M3 3v5h5" />
+  <path d="M12 7v5l4 2" />
+</svg>

package/kit/lucide/house.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-house"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+  <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+</svg>

package/kit/lucide/image.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-image"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+  <circle cx="9" cy="9" r="2" />
+  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+</svg>

package/kit/lucide/info.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-info"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="M12 16v-4" />
+  <path d="M12 8h.01" />
+</svg>

package/kit/lucide/layout-dashboard.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-layout-dashboard"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="7" height="9" x="3" y="3" rx="1" />
+  <rect width="7" height="5" x="14" y="3" rx="1" />
+  <rect width="7" height="9" x="14" y="12" rx="1" />
+  <rect width="7" height="5" x="3" y="16" rx="1" />
+</svg>

package/kit/lucide/layout-grid.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-layout-grid"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="7" height="7" x="3" y="3" rx="1" />
+  <rect width="7" height="7" x="14" y="3" rx="1" />
+  <rect width="7" height="7" x="14" y="14" rx="1" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
+</svg>

package/kit/lucide/search.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-search"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21 21-4.34-4.34" />
+  <circle cx="11" cy="11" r="8" />
+</svg>

package/kit/lucide/shield.svg

@@ -0,0 +1,15 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-shield"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+</svg>

package/kit/lucide/sparkles.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-sparkles"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+  <path d="M20 2v4" />
+  <path d="M22 4h-4" />
+  <circle cx="4" cy="20" r="2" />
+</svg>

package/kit/lucide/sun-moon.svg

@@ -0,0 +1,19 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-sun-moon"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 2v2" />
+  <path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715" />
+  <path d="M16 12a4 4 0 0 0-4-4" />
+  <path d="m19 5-1.256 1.256" />
+  <path d="M20 12h2" />
+</svg>

package/kit/lucide/trash-2.svg

@@ -0,0 +1,19 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-trash-2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 11v6" />
+  <path d="M14 11v6" />
+  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+  <path d="M3 6h18" />
+  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+</svg>

package/kit/lucide/users.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-users"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <path d="M16 3.128a4 4 0 0 1 0 7.744" />
+  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+  <circle cx="9" cy="7" r="4" />
+</svg>

package/kit/lucide/x.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v1.70.0 - ISC -->
+<svg
+  class="lucide lucide-x"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" />
+</svg>

package/kit/src/client.ts

@@ -3,10 +3,10 @@
 // resolves to a stand-alone context, so apps work either way.
 
 import { type MenuCall, shortcutOf } from "./menus";
+import { stopPageZoom } from "./no-zoom";
 import {
   APP_HEADER,
   APPROVAL_HEADER,
-  type AppFolder,
   type AppNotifications,
   type Change,
   type HostContext,
@@ -17,8 +17,8 @@ import {
   type RpcResponse,
   type ShareItem,
 } from "./protocol";
-
 import type { Listener, Teacup } from "./teacup";
+import { teacupFrom } from "./teacup-above";
 
 export type { Teacup } from "./teacup";
 
@@ -62,8 +62,7 @@ const TEACUP = OUTSIDE ? teacupAbove() : location.origin;
  * is served by `teacup dev` on port 8791).
  */
 function teacupAbove() {
-  const above = location.ancestorOrigins?.[0];
-  return above === "http://localhost:8790" || above === "https://staging.kiit.fyi" ? above : "https://kiit.fyi";
+  return teacupFrom(location.ancestorOrigins?.[0], typeof window === "undefined" ? "" : window.name);
 }
 
 /** Whether something takes typing: a text box, a text area, or anything editable (not a checkbox or a button). */
@@ -157,6 +156,8 @@ export async function connect(appInfo: { name: string; version?: string }, timeo
     addEventListener("focusin", (e) => typesIn(e.target as Element) && say(true));
     addEventListener("focusout", () => setTimeout(() => say(typesIn(document.activeElement)), 120));
   }
+  // A pinch inside an app never zooms all of Teacup on a phone or iPad; the app still gets the touches (no-zoom.ts).
+  if (inside) stopPageZoom();
   // Teacup's own keys reach it from inside an app too, unless the app used them: ⌘K (Ctrl+K) for the quick ask, and
   // Escape, which closes it.
   if (inside && !OUTSIDE)
@@ -167,6 +168,19 @@ export async function connect(appInfo: { name: string; version?: string }, timeo
       if (quick || e.key === "Escape") notify("teacup/key", { key: quick ? "quick-ask" : "escape" });
     });
   const appId = result?.app?.id ?? null;
+  // A link from one of Teacup's own apps to Teacup's own pages (the developer pages, another app) goes to Teacup,
+  // which opens it in a window, rather than taking the place of Teacup (on an installed iPhone, with no way back).
+  if (inside && !OUTSIDE && appId)
+    addEventListener("click", (e) => {
+      const a = (e.target as Element | null)?.closest?.("a[href]") as HTMLAnchorElement | null;
+      if (!a || e.defaultPrevented || a.hasAttribute("download")) return;
+      const u = new URL(a.href);
+      // Other sites open as they always have (a new tab; on an iPhone, Safari's own sheet with Done).
+      if (u.origin !== location.origin) return;
+      if (a.target !== "_blank" && u.pathname.startsWith(`/apps/${appId}/`)) return;
+      e.preventDefault();
+      void request("teacup/open-link", { url: a.href }).catch(() => {});
+    });
   // The app's menu shortcuts, pressed inside its window, go up to Teacup, which runs the item as if it were chosen.
   const shortcuts = new Set(result?.shortcuts ?? []);
   const onKey = (e: KeyboardEvent) => {

package/kit/src/components.css

@@ -21,6 +21,10 @@
 body {
   padding-bottom: var(--teacup-bottom-room, 0px);
 }
+/* For a page whose own box scrolls (not the page itself): its end clear of the Home pill too. */
+.tc-bottom-room {
+  padding-bottom: var(--teacup-bottom-room, 0px);
+}
 :root {
   --teacup-screen: calc(100dvh - var(--teacup-bottom-room, 0px));
 }

package/kit/src/manifest.ts

@@ -131,6 +131,8 @@ export interface Manifest {
   version: string;
   /** One sentence, shown in the store and to Claude. */
   description: string;
+  /** A few words under its name in lists ("Notes you write together"); left out, the start of the description. */
+  subtitle?: string;
   /** kit: built in apps/<id>/ with the kit. framed: an older page Teacup shows as it is. */
   kind: "kit" | "framed";
   /** Where it opens on Teacup's site, ending in "/". */
@@ -197,7 +199,6 @@ const COLLECTION = /^[a-z][a-z0-9_]{1,30}$/;
 const RESERVED = ["teacup", "history", "docs", "system", "files", "mail", "people", "approvals", "messages"];
 /** Reserved names that are Teacup's own system apps (Files), which only they may use. */
 const SYSTEM_IDS = ["files"];
-
 /** Fields decision 31 reserves for later (server code Teacup runs, AI, apps without screens). */
 const NOT_YET = ["server", "ai", "screens"];
 
@@ -222,6 +223,11 @@ export function validateManifest(m: Partial<Manifest>, folder?: string, opts: {
     typeof m.description === "string" && m.description.length >= 10 && m.description.length <= 140,
     "description must be one sentence of 10 to 140 characters",
   );
+  const sub = m.subtitle;
+  need(
+    sub === undefined || (words(sub, 3, 40) && !/[.!]$/.test(sub)),
+    "subtitle must be 3 to 40 characters, no full stop",
+  );
   need(m.kind === "kit" || m.kind === "framed", "kind must be kit or framed");
   if (opts.outside)
     need(m.url === `https://${m.id}.backed.cc/v/${m.version}/`, "an outside app lives at its own address on backed.cc");

package/kit/src/no-zoom.ts

@@ -0,0 +1,15 @@
+// On a phone or iPad, Teacup never zooms as a whole when pinched, as a phone's own home screen and apps never do
+// (docs/os.md). Safari zooms the whole page on a pinch, even one made inside an app's window, unless the page stops
+// its gesture; the viewport's maximum-scale stops it elsewhere. Shared by the shell and the kit, so a pinch anywhere
+// is caught. An app that wants a pinch for its own content (a photo, a map) still gets every touch and pointer
+// event, and handles the pinch itself; only the zoom of all of Teacup is stopped. Laptops keep their own zoom.
+
+/** A touch-first device: no mouse or trackpad that hovers (core/form.ts draws the same line). */
+const touchFirst = () => !matchMedia("(pointer: fine) and (hover: hover)").matches;
+
+export function stopPageZoom(doc: Document = document) {
+  if (typeof matchMedia === "undefined" || !touchFirst()) return;
+  // Safari's own pinch events: stopped, so the page doesn't zoom.
+  for (const type of ["gesturestart", "gesturechange", "gestureend"])
+    doc.addEventListener(type, (e) => e.preventDefault(), { passive: false });
+}

package/kit/src/protocol.ts

@@ -40,8 +40,12 @@ export interface HostContext {
 /** Each person's settings for Teacup, kept on the server (docs/os.md, decision 24). */
 export interface Prefs {
   appearance?: Appearance;
+  /** The desktop's wallpaper: one of Teacup's (wallpapers.ts) or "photo", your own desktop photo. */
   wallpaper?: string;
-  text?: "standard" | "large" | "larger";
+  /** The phone's wallpaper; until it's chosen, the desktop's if that's one of Teacup's, else Teacup's default. */
+  wallpaperPhone?: string;
+  /** Text size: "auto" (or unset) follows the device's own where the browser says it; the rest are fixed. */
+  text?: "auto" | "standard" | "large" | "larger";
   /** The widgets on the home screen, in order: "today" or "<app>.<widget>". */
   widgets?: string[];
   /** Which page of the phone's home screen each widget is on (the first, 0, unless moved). */
@@ -54,8 +58,10 @@ export interface Prefs {
   notify?: Record<string, boolean>;
   /** Each app's own settings, by app and setting id. */
   apps?: Record<string, Record<string, boolean | string>>;
-  /** When your own wallpaper photo last changed, so every device fetches the new one. */
+  /** When your own desktop photo last changed, so every device fetches the new one. */
   wallpaperAt?: number;
+  /** When your own phone photo last changed. */
+  wallpaperPhoneAt?: number;
   /** Today's weather switched off: nothing about it is fetched. Shown unless this is true. */
   weatherHidden?: boolean;
   /** The town Today's weather is for; where you are (Cloudflare's estimate) when there's none, or null. */
@@ -176,7 +182,7 @@ export interface HomeScreen {
     /** The folder it's in, if any. */
     folder?: string;
     /** Its icon: the tile's background, and a picture of the mark on it (a data: address, or the app's own). */
-    icon: { bg: string; picture: string };
+    icon: { bg: string; picture: string; full?: boolean };
   }[];
   /** Your folders of apps, in the order they sit. */
   folders: AppFolder[];

package/kit/src/teacup-above.ts

@@ -0,0 +1,11 @@
+// Which Teacup an outside app is inside (kit/src/client.ts): kiit.fyi, its staging copy, or Teacup on the maker's
+// own computer. Kept apart from the client so it can be tested without a browser.
+
+/**
+ * Which of the three Teacups an outside app is in, from the browser's word for the page above it, or (Firefox has no
+ * `ancestorOrigins`) the frame's name, which the shell sets to `teacup:<its origin>`. Only ever one of the three.
+ */
+export function teacupFrom(ancestor: string | undefined, frameName: string): string {
+  const above = ancestor ?? /^teacup:(.+)$/.exec(frameName)?.[1];
+  return above === "http://localhost:8790" || above === "https://staging.kiit.fyi" ? above : "https://kiit.fyi";
+}

package/kit/src/wallpapers.ts

@@ -75,6 +75,54 @@ export const WALLPAPERS: Wallpaper[] = [
 /** The default, until someone chooses. */
 export const DEFAULT_WALLPAPER = "sky";
 
+/** Each layout has its own wallpaper: the desktop's (landscape) and the phone's (portrait). */
+export type PhotoLayout = "desktop" | "phone";
+
+/** How long a photo's longest side is kept, for each layout: enough for a large laptop screen, or a phone's. */
+export const PHOTO_EDGE: Record<PhotoLayout, number> = { desktop: 2560, phone: 1300 };
+
+/**
+ * The wallpaper a layout shows: its own choice; for a phone not yet chosen, the desktop's if that's one of Teacup's
+ * own (as it was before each had its own), never the desktop's photo; otherwise Teacup's default. `photoAt` is the
+ * version of that layout's photo to fetch, when it shows one.
+ */
+export function wallpaperFor(
+  prefs: { wallpaper?: string; wallpaperAt?: number; wallpaperPhone?: string; wallpaperPhoneAt?: number },
+  layout: PhotoLayout,
+): { id: string; photoAt: number | null } {
+  const ours = (id: string | undefined) => !!id && WALLPAPERS.some((w) => w.id === id);
+  const id =
+    layout === "desktop"
+      ? (prefs.wallpaper ?? DEFAULT_WALLPAPER)
+      : (prefs.wallpaperPhone ?? (ours(prefs.wallpaper) ? prefs.wallpaper : undefined) ?? DEFAULT_WALLPAPER);
+  if (id !== "photo") return { id: ours(id) ? id : DEFAULT_WALLPAPER, photoAt: null };
+  const at = layout === "desktop" ? prefs.wallpaperAt : prefs.wallpaperPhoneAt;
+  // Chosen, but that layout has no photo of its own: Teacup's default instead of an empty grey.
+  return at ? { id: "photo", photoAt: at } : { id: DEFAULT_WALLPAPER, photoAt: null };
+}
+
+/**
+ * The part of a picture `w` by `h` that fills a layout's screen shape (16:10 for a desktop, 9:19.5 for a phone),
+ * centred as near as it can be on the focus point (fx, fy, each 0 to 1), and the size to draw it at.
+ */
+export function photoFrame(w: number, h: number, layout: PhotoLayout, fx = 0.5, fy = 0.5) {
+  const aspect = layout === "desktop" ? 16 / 10 : 9 / 19.5;
+  const cw = Math.min(w, h * aspect);
+  const ch = cw / aspect;
+  const clamp = (v: number, max: number) => Math.round(Math.min(Math.max(v, 0), max));
+  const sx = clamp(fx * w - cw / 2, w - cw);
+  const sy = clamp(fy * h - ch / 2, h - ch);
+  const scale = Math.min(1, PHOTO_EDGE[layout] / Math.max(cw, ch));
+  return {
+    sx,
+    sy,
+    sw: Math.round(cw),
+    sh: Math.round(ch),
+    width: Math.round(cw * scale),
+    height: Math.round(ch * scale),
+  };
+}
+
 /** The CSS that draws them on Teacup's `.wall`, by the page's data-wallpaper and data-theme. */
 export function wallpapersCss(): string {
   return WALLPAPERS.map((w) => {

package/kit/system.ts

@@ -5,4 +5,11 @@
 export { DEVICE_FEATURES, GUIDELINES_VERSION, type Manifest } from "./src/manifest";
 export { mergePrefs } from "./src/prefs";
 export { type Appearance, type HomeScreen, KIT_VERSION, type Prefs, type WeatherPlace } from "./src/protocol";
-export { DEFAULT_WALLPAPER, WALLPAPERS } from "./src/wallpapers";
+export {
+  DEFAULT_WALLPAPER,
+  PHOTO_EDGE,
+  type PhotoLayout,
+  photoFrame,
+  WALLPAPERS,
+  wallpaperFor,
+} from "./src/wallpapers";

package/kit/widgets.css

@@ -80,12 +80,12 @@ button.widget,
 }
 .w-today .wd-big {
   font-weight: 300;
-  font-size: 44px;
+  font-size: calc(44px * var(--text-scale, 1));
   letter-spacing: -0.04em;
   line-height: 1;
 }
 .w-today .wd-sub {
-  font-size: 15px;
+  font-size: calc(15px * var(--text-scale, 1));
   color: var(--wg-soft);
   white-space: nowrap;
 }
@@ -98,7 +98,7 @@ button.widget,
   align-items: center;
   gap: 6px;
   font-weight: 300;
-  font-size: 26px;
+  font-size: calc(26px * var(--text-scale, 1));
   letter-spacing: -0.02em;
   line-height: 1;
 }
@@ -122,7 +122,7 @@ button.widget,
   stroke: #d8902a;
 }
 .w-today .wd-say {
-  font-size: 13px;
+  font-size: calc(13px * var(--text-scale, 1));
   color: var(--wg-soft);
   margin-top: 6px;
   white-space: nowrap;
@@ -136,7 +136,7 @@ button.widget,
   margin-top: 12px;
   padding: 8px 0;
   border-block: 1px solid var(--wg-hair);
-  font-size: 12px;
+  font-size: calc(12px * var(--text-scale, 1));
   color: var(--wg-soft);
 }
 .w-today .wd-hours div {
@@ -150,7 +150,7 @@ button.widget,
 }
 .w-today .wd-hours b {
   font-weight: 400;
-  font-size: 13px;
+  font-size: calc(13px * var(--text-scale, 1));
   color: var(--wg-ink);
 }
 .w-today ul {
@@ -168,7 +168,7 @@ button.widget,
   grid-template-columns: 8px 1fr;
   gap: 10px;
   align-items: baseline;
-  font-size: 14px;
+  font-size: calc(14px * var(--text-scale, 1));
 }
 .w-today li span,
 .w-today .wd-count span {
@@ -203,7 +203,7 @@ button.widget,
     display: grid;
     margin-top: auto;
     padding-top: 8px;
-    font-size: 12px;
+    font-size: calc(12px * var(--text-scale, 1));
     gap: 7px;
     grid-template-columns: 7px 1fr;
   }
@@ -215,10 +215,10 @@ button.widget,
     margin-top: 4px;
   }
   .w-today .wd-sub {
-    font-size: 12px;
+    font-size: calc(12px * var(--text-scale, 1));
   }
   .w-today .wd-now {
-    font-size: 18px;
+    font-size: calc(18px * var(--text-scale, 1));
     gap: 4px;
   }
   .w-today .wd-now .wd-sky {
@@ -229,14 +229,14 @@ button.widget,
     grid-template-columns: repeat(3, 1fr);
     margin-top: 8px;
     padding: 6px 0;
-    font-size: 11px;
+    font-size: calc(11px * var(--text-scale, 1));
   }
   .w-today .wd-hours .wd-sky {
     width: 15px;
     height: 15px;
   }
   .w-today .wd-hours b {
-    font-size: 11px;
+    font-size: calc(11px * var(--text-scale, 1));
   }
 }
 
@@ -249,13 +249,13 @@ button.widget,
 }
 .w-app .wd-big {
   font-weight: 300;
-  font-size: 40px;
+  font-size: calc(40px * var(--text-scale, 1));
   letter-spacing: -0.03em;
   line-height: 1.1;
   margin-top: 10px;
 }
 .w-app .wd-sub {
-  font-size: 15px;
+  font-size: calc(15px * var(--text-scale, 1));
   color: var(--wg-soft);
   margin-top: 2px;
 }
@@ -281,7 +281,7 @@ button.widget,
   padding: 0;
   display: grid;
   gap: 6px;
-  font-size: 15px;
+  font-size: calc(15px * var(--text-scale, 1));
   overflow: hidden;
 }
 .w-app li {
@@ -317,7 +317,7 @@ button.widget,
   min-height: 0;
 }
 .widget-box .w-today .wd-big {
-  font-size: 34px;
+  font-size: calc(34px * var(--text-scale, 1));
 }
 .widget-box .w-today .wd-hours {
   margin-top: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teacup-os",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The teacup command: make, check, try and upload apps for Teacup (kiit.fyi), a web operating system for individuals and teams.",
   "type": "module",
   "bin": {

package/template/app.json

@@ -3,6 +3,7 @@
   "name": "__NAME__",
   "version": "0.1.0",
   "description": "__NAME__: say in one sentence what it does and who it's for.",
+  "subtitle": "__NAME__ in a few words",
   "kind": "kit",
   "url": "/apps/__ID__/",
   "iconBackground": "linear-gradient(160deg,#ffffff,#e9e6df)",

package/template/icon.svg

@@ -1 +1 @@
-<svg viewBox="0 0 40 40" aria-hidden="true"><rect x="8" y="8" width="24" height="24" rx="6" fill="none" stroke="#16181b" stroke-width="2.5"/><circle cx="20" cy="20" r="4" fill="#2f6bff"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="#2b2f36" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><!-- Lucide: box --><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>