@tiniestcloud/create 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiniestcloud/create",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Start an app or website for Tiniest Cloud: React, TypeScript, Vite, Tailwind CSS and shadcn/ui, or Astro.",
   "keywords": [
     "tiniest-cloud",

package/skills/tiny-design/SKILL.md

@@ -92,6 +92,14 @@ see-through over the content) and its bottom border. Keep it short — about 56
 on a phone, where an app's screens move to the bottom bar — so it doesn't eat the screen. A
 sidebar stays put the same way (`sticky top-0 h-svh`), and a detail pane beside a long list
 scrolls on its own.
+**Switching the theme crossfades.** Change light and dark only through the starter's
+`setTheme` (src/lib/theme.ts), never by toggling the class yourself: it fades the whole page
+from one theme to the other in 300ms and remembers the choice.
+**The header lines up with the page.** Its row sits in the same container as the content below
+(the same max width and side padding), so the logo starts on the page's left edge and the last
+action ends on its right. Logo, navigation and actions share one line, centred vertically. Icon
+buttons keep their size at every width (`shrink-0`, a fixed square): at a tablet's width
+(640–1024px) the navigation drops its labels or folds into a menu before anything squeezes.
 A website's header may shrink as you scroll, but stays reachable. A long list's search and
 filters stick just below the header the same way, so people can search without scrolling back
 up — on a phone, at least the search. Measure the header (a `ResizeObserver` writing
@@ -317,6 +325,8 @@ apps never come out the same. Every font here is on npm as `@fontsource/<name>`
   every other bottom bar above it; a detail screen keeps its way back and its actions pinned.
 - The header stays at the top while the page scrolls, on a laptop and a phone, with a solid
   background; a long list's search (and filters, where there's room) stays pinned under it.
+- The header's logo and last action line up with the page's edges, and nothing in it squeezes
+  at a tablet's width (768px).
 - No control the browser draws: dates use the calendar, dropdowns the select, hints the tooltip,
   questions a dialog — all styled to the theme.
 - None of the giveaways (the design guide's "What gives generated UI away").

package/templates/app/AGENTS.md

@@ -23,6 +23,8 @@ React, TypeScript, Vite, Tailwind CSS and shadcn/ui, deployed to Tiniest Cloud a
   - `src/lib/` — plain code: helpers, formatting, types (`types.ts`), calculations.
   - `public/` — files served as they are (images, icons), plus `_functions/`, `tiny.rules.json`
     and `tiny.brand.json`.
+  - `public/icon.svg` — the app's mark (the logo in its header), square, on its own background
+    colour. Tiniest Cloud makes it the app's icon: browser tab, home screen, sign-in page, dashboard.
   - A file past about 300 lines is doing too much: move its parts into components and hooks.
 - Components: `npx shadcn@latest add <name>` adds one to src/components/ui. They are a starting
   point: restyle them to fit this app (radius, size, colour, spacing) in src/components/ui.

package/templates/app/src/index.css

@@ -127,4 +127,12 @@
   html {
     @apply font-sans;
     }
-}
+}
+
+/* The theme switch crossfades the page (src/lib/theme.ts). Short, slow at both ends and quick
+   through the middle, so the halfway blend of two opposite themes never registers. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
+}

package/templates/app/src/lib/theme.ts

@@ -21,12 +21,22 @@ function apply(theme: Theme) {
   document.documentElement.style.colorScheme = dark ? "dark" : "light"
 }
 
+/**
+ * Switch the theme, with the page crossfading from one to the other (the timing is in
+ * index.css, `::view-transition-*`). A snapshot fade rather than easing every colour: text and
+ * background travel in opposite directions, and eased one by one they meet in the same grey
+ * halfway. Where the browser has no view transitions, or the person asked for less motion, the
+ * theme just changes.
+ */
 export function setTheme(theme: Theme) {
   document.cookie =
     theme === "system"
       ? "theme=; path=/; max-age=0; samesite=lax"
       : `theme=${theme}; path=/; max-age=31536000; samesite=lax`
-  apply(theme)
+  const doc = document as Document & { startViewTransition?: (update: () => void) => unknown }
+  const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  if (still || typeof doc.startViewTransition !== "function") apply(theme)
+  else doc.startViewTransition(() => apply(theme))
   window.dispatchEvent(new Event("themechange"))
 }