@thespielplatz/tsp-tools-theme 0.1.3 → 0.2.1

package/README.md

@@ -34,6 +34,25 @@ Peer expectations (provide them in the consuming app):
 > (A deep relative path such as `extends: ['../..']` can fail to pick up the source dirs;
 > the package name always works.)
 
+### Why `@nuxt/icon` is capped at `~2.3.1`
+
+The layer declares `@nuxt/icon: ~2.3.1` as a direct dependency. This is a **temporary cap**
+around an upstream regression, not a preference.
+
+`@nuxt/icon` 2.4.1 changed its plugin to take `$fetch` from `useRequestFetch()` and then read
+`.native` off it. During SSR that returns Nitro's request-scoped `event.$fetch`, which has no
+`.native` property — so Iconify's fetch is set to `undefined` and **every server-side icon load
+fails**, logging `[Icon] failed to load icon …` per request. `@nuxt/ui` only requires
+`^2.3.1`, so any re-resolve of the tree silently moves consumers onto the broken version.
+
+The cap is in `dependencies` rather than `overrides` on purpose: npm honours `overrides` only
+in the root project, so an `overrides` entry here would not reach consuming apps. `2.3.1`
+satisfies `@nuxt/ui`'s own range, so there is one hoisted copy and no duplication.
+
+Remove the cap once a fixed `@nuxt/icon` ships. To check, drop the pin and look for
+`failed to load icon` in the server log of a production build — the build itself stays green
+either way, which is exactly why this is easy to miss.
+
 ---
 
 ## Global usage (whole app themed)
@@ -147,14 +166,55 @@ for the themed area.
 | `TspThemeProvider` | Scoped wrapper — marks a sub-area as themed (`.tsp-theme`). |
 | `TspSidebar` | App-shell sidebar frame; slots `#brand` `#nav` `#footer`. |
 | `TspSidebarFooter` | User → Logout → divider → theme toggle → GitHub + version. |
+| `TspSiteHeader` | Public/marketing header; slots `#brand` `#nav` `#actions`, prop `sticky`. |
+| `TspSiteFooter` | Public/marketing footer; slots `#brand` `#links` `#actions`. |
 | `TspThemeToggle` | Sun/moon light–dark toggle (uses `useTspColorMode`). |
 | `TspNavItem` | Sidebar nav link (muted → filled-amber when active). |
 | `TspWordmark` | Space Grotesk + amber brand wordmark. |
-| `TspContainer` | Centered content column (`max-w-4xl`, `px-6 sm:px-10`, `pt-10 pb-16`). |
+| `TspContainer` | Centered content column; props `width` (`app` \| `site`) and `padded`. |
 
 App-specific content (branding, nav lists, user identity, GitHub/version values) is injected
 via slots/props — none of it lives in the layer.
 
+### App shell vs site shell
+
+`TspSidebar` + `TspSidebarFooter` are the **logged-in** shell. For a public/marketing surface
+use `TspSiteHeader` + `TspSiteFooter` with the wide container:
+
+```vue
+<TspSiteHeader>
+  <template #brand><NuxtLink to="/"><TspWordmark>tsp<span class="text-primary">.</span>tools</TspWordmark></NuxtLink></template>
+  <template #nav><a href="#tools">Tools</a></template>
+  <template #actions><TspThemeToggle /></template>
+</TspSiteHeader>
+
+<TspContainer width="site"><NuxtPage /></TspContainer>
+
+<TspSiteFooter>
+  <template #brand><TspWordmark>tsp<span class="text-primary">.</span>tools</TspWordmark></template>
+  <template #links><NuxtLink to="/imprint">Imprint</NuxtLink></template>
+</TspSiteFooter>
+```
+
+`TspContainer` defaults to `width="app"` (`max-w-4xl`, `px-6 sm:px-10`) — the app/admin measure.
+`width="site"` is `max-w-[1240px]`, `px-6 md:px-10`, the marketing measure. Both add `pt-10 pb-16`
+unless you pass `:padded="false"` (which is what the header/footer frames do internally).
+
+### Localising the theme toggle
+
+`TspThemeToggle` takes all four strings as props, named by destination — `…ToLight` is what the
+button shows and announces while dark:
+
+```vue
+<TspThemeToggle
+  :label-to-light="t('theme.light')"      :label-to-dark="t('theme.dark')"
+  :aria-label-to-light="t('theme.toLight')" :aria-label-to-dark="t('theme.toDark')"
+/>
+```
+
+The defaults are English. The default slot receives `{ isDark, label }` if you want different
+markup (an icon-only square button, say) while keeping the mechanism.
+
 ---
 
 ## Why `primary` isn't set in `app.config`

package/components/TspContainer.vue

@@ -1,9 +1,32 @@
 <!--
-  Centered content column (design-system.md → Layout): max-w-4xl with
-  px-6 sm:px-10 / pt-10 pb-16. The background stays full-bleed behind it.
+  Centered content column.
+
+  `width` picks the measure (ADR 008, finding 3):
+    app   — max-w-4xl, the logged-in app/admin measure (design-system.md → Layout). Default.
+    site  — 1240px, the marketing measure from the approved storefront mockup.
+
+  `padded` controls the vertical rhythm (pt-10 pb-16). It suits a page body, so it
+  is on by default; header/footer rows want none, so pass `:padded="false"`.
+  The background stays full-bleed behind the column either way.
 -->
 <template>
-  <div class="max-w-4xl mx-auto px-6 sm:px-10 pt-10 pb-16">
+  <div :class="classes">
     <slot />
   </div>
 </template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  width?: 'app' | 'site'
+  padded?: boolean
+}>(), {
+  width: 'app',
+  padded: true,
+})
+
+const classes = computed(() => [
+  'mx-auto',
+  props.width === 'site' ? 'max-w-[1240px] px-6 md:px-10' : 'max-w-4xl px-6 sm:px-10',
+  props.padded ? 'pt-10 pb-16' : '',
+])
+</script>

package/components/TspSiteFooter.vue

@@ -0,0 +1,40 @@
+<!--
+  Marketing/public site footer (ADR 008, finding 2). Frame only: top border,
+  site-width column, brand block over a wrapping link row. The app supplies the
+  content; the legal routes and their labels stay with the app.
+
+    #brand   — logo + wordmark (+ tagline)
+    #links   — inline links, muted
+    #actions — pushed to the right on ≥sm, e.g. a language toggle
+
+  The link row renders only when #links or #actions is filled.
+-->
+<template>
+  <footer class="border-t border-muted pt-9 pb-12">
+    <TspContainer
+      width="site"
+      :padded="false"
+    >
+      <div
+        v-if="$slots.brand"
+        class="flex items-center gap-3"
+      >
+        <slot name="brand" />
+      </div>
+
+      <div
+        v-if="$slots.links || $slots.actions"
+        class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2.5 text-sm text-muted"
+      >
+        <slot name="links" />
+
+        <div
+          v-if="$slots.actions"
+          class="sm:ml-auto"
+        >
+          <slot name="actions" />
+        </div>
+      </div>
+    </TspContainer>
+  </footer>
+</template>

package/components/TspSiteHeader.vue

@@ -0,0 +1,46 @@
+<!--
+  Marketing/public site header (ADR 008, finding 2 — the counterpart to
+  TspSidebar, which only fits the logged-in shell). Frame only: sticky bar,
+  bottom border, translucent backdrop, site-width column. The app supplies the
+  content via slots; no branding, nav or copy lives here.
+
+    #brand   — wordmark / logo link (left)
+    #nav     — inline links; hidden below 900px, so pair it with your own
+               mobile disclosure if you need one
+    #actions — right-hand cluster, e.g. <TspThemeToggle> + a CTA
+
+  Pass `:sticky="false"` for a header that scrolls away.
+-->
+<template>
+  <header :class="['border-b border-muted bg-default/90 backdrop-blur', sticky ? 'sticky top-0 z-50' : '']">
+    <TspContainer
+      width="site"
+      :padded="false"
+      class="flex h-18 items-center"
+    >
+      <slot name="brand" />
+
+      <nav
+        v-if="$slots.nav"
+        class="ml-2 hidden gap-6 min-[900px]:flex"
+      >
+        <slot name="nav" />
+      </nav>
+
+      <div
+        v-if="$slots.actions"
+        class="ml-auto flex items-center gap-2.5"
+      >
+        <slot name="actions" />
+      </div>
+    </TspContainer>
+  </header>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  sticky?: boolean
+}>(), {
+  sticky: true,
+})
+</script>

package/components/TspThemeToggle.vue

@@ -1,14 +1,23 @@
 <!--
   Light/dark toggle. Flips the remembered preference (useTspColorMode); the
   colour-mode plugin applies it. Default content is an icon + label; override via
-  the default slot (receives `{ isDark }`). The button is unstyled-ish so it fits
-  the sidebar footer or a top bar — pass classes to taste.
+  the default slot (receives `{ isDark, label }`). The button is unstyled-ish so it
+  fits the sidebar footer or a top bar — pass classes to taste.
+
+  All four strings are props so a bilingual site can pass its own (ADR 008,
+  finding 4). Naming is by *destination*: `…ToLight` is what the button shows and
+  announces while dark, because pressing it switches to light.
+
+    <TspThemeToggle
+      :label-to-light="t('theme.light')"
+      :aria-label-to-light="t('theme.toLight')"
+      … />
 -->
 <template>
   <button
     type="button"
     data-testid="tsp-theme-toggle"
-    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    :aria-label="isDark ? ariaLabelToLight : ariaLabelToDark"
     class="flex items-center gap-2 px-1 py-1.5 rounded-md text-xs text-muted hover:text-highlighted hover:bg-default"
     @click="toggle"
   >
@@ -16,11 +25,31 @@
       :name="isDark ? 'i-tabler-sun' : 'i-tabler-moon'"
       class="text-base"
     />
-    <slot :is-dark="isDark">{{ isDark ? 'Light mode' : 'Dark mode' }}</slot>
+    <slot
+      :is-dark="isDark"
+      :label="label"
+    >{{ label }}</slot>
   </button>
 </template>
 
 <script setup lang="ts">
+const props = withDefaults(defineProps<{
+  /** Visible label while dark (pressing switches to light). */
+  labelToLight?: string
+  /** Visible label while light. */
+  labelToDark?: string
+  /** aria-label while dark. */
+  ariaLabelToLight?: string
+  /** aria-label while light. */
+  ariaLabelToDark?: string
+}>(), {
+  labelToLight: 'Light mode',
+  labelToDark: 'Dark mode',
+  ariaLabelToLight: 'Switch to light mode',
+  ariaLabelToDark: 'Switch to dark mode',
+})
+
 const { pref, toggle } = useTspColorMode()
 const isDark = computed(() => pref.value === 'dark')
+const label = computed(() => isDark.value ? props.labelToLight : props.labelToDark)
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thespielplatz/tsp-tools-theme",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "tsp.tools design-system theme as a Nuxt layer (Nuxt UI v4 + Tailwind v4): amber-on-anthracite tokens (light + dark), Nunito/Space Grotesk fonts, per-area colour mode, and the shared app shell. Use globally via `extends`, or scoped to a sub-area.",
   "author": "inf0matics",
   "license": "MIT",
@@ -48,9 +48,11 @@
     "build:playground": "nuxi build playground",
     "build:scoped": "nuxi build scoped",
     "typecheck": "nuxi typecheck playground && nuxi typecheck scoped",
-    "release": "npm run lint && npm run typecheck && npm publish"
+    "test:icons": "npm run build:playground && node scripts/check-icons.mjs",
+    "release": "npm run lint && npm run typecheck && npm run test:icons && npm publish"
   },
   "dependencies": {
+    "@nuxt/icon": "~2.3.1",
     "@nuxt/ui": "^4.10.0"
   },
   "peerDependencies": {