@thespielplatz/tsp-tools-theme 0.2.0 → 0.3.0

package/components/TspCodeBlock.vue

@@ -0,0 +1,68 @@
+<!--
+  A block of configuration to copy — a JSON snippet, a shell line.
+
+    <TspCodeBlock :code="config" />
+    <TspCodeBlock :code="config" copy-label="Copy with API key" />
+
+  Bordered on the page surface rather than filled again: it lives inside a
+  TspSectionCard, and a filled box inside a filled card is the cards-inside-
+  cards ADR 018 rules out.
+
+  The copy button is a real labelled button, not an icon in the corner, because
+  what it copies is often not exactly what is shown — a config with the key
+  redacted on screen and filled in on copy. An icon cannot say that; a label can.
+-->
+<template>
+  <div>
+    <pre
+      data-testid="tsp-code-block"
+      class="overflow-x-auto rounded-md border border-default bg-default p-4 font-mono text-xs leading-relaxed text-muted tsp-scroll-quiet"
+    ><code>{{ code }}</code></pre>
+
+    <div
+      v-if="copyValue || code"
+      class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2"
+    >
+      <!-- shrink-0 + nowrap: in a flex row beside the help text the button was
+           being squeezed until its own label wrapped onto two lines. The help
+           text wraps instead — it is prose, the label is not. -->
+      <UButton
+        color="primary"
+        icon="i-tabler-copy"
+        class="shrink-0 whitespace-nowrap"
+        @click="copyAll"
+      >
+        {{ copied ? copiedLabel : copyLabel }}
+      </UButton>
+      <p
+        v-if="help"
+        class="min-w-0 flex-1 text-xs text-dimmed"
+      >
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  /** What is SHOWN. */
+  code: string
+  /** What is COPIED, when that differs — e.g. the same config with the real key. */
+  copyValue?: string
+  /** Button label at rest. */
+  copyLabel?: string
+  /** Button label for the moment after a successful copy. */
+  copiedLabel?: string
+  /** One muted line under the block — e.g. what the placeholder stands for. */
+  help?: string
+}>(), {
+  copyValue: undefined,
+  copyLabel: 'Copy',
+  copiedLabel: 'Copied',
+  help: undefined,
+})
+
+const { copied, copy } = useTspCopy()
+const copyAll = () => copy(props.copyValue ?? props.code)
+</script>

package/components/TspContainer.vue

@@ -2,7 +2,13 @@
   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.
+    app   — max-w-6xl (1152px), the logged-in app/admin measure
+            (design-system.md → Layout). Default. It was max-w-4xl (896px),
+            inherited from tsp.tools' local container and never actually
+            measured: beside the 224px sidebar that left ~160px of dead page on
+            each side at 1440px and ~400px at 1920px, squeezing exactly the
+            tables and card grids that need the room. Prose is capped per page
+            instead, where the paragraph is.
     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
@@ -17,7 +23,9 @@
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
+  /** `app` = 1152px, the logged-in measure. `site` = 1240px, the marketing one. */
   width?: 'app' | 'site'
+  /** Vertical rhythm (`pt-10 pb-16`). Off for header/footer frames. */
   padded?: boolean
 }>(), {
   width: 'app',
@@ -26,7 +34,7 @@ const props = withDefaults(defineProps<{
 
 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.width === 'site' ? 'max-w-[1240px] px-6 md:px-10' : 'max-w-6xl px-6 sm:px-10',
   props.padded ? 'pt-10 pb-16' : '',
 ])
 </script>

package/components/TspCopyButton.vue

@@ -0,0 +1,40 @@
+<!--
+  Copy-to-clipboard button. Confirms by swapping its own icon for a tick for a
+  moment — a copy that gives no feedback leaves you pressing it twice.
+
+  The copying itself is useTspCopy(), shared with TspCodeBlock: the two had the
+  same secure-context fallback written out twice, and had already drifted (only
+  one of them set `readonly` on the fallback textarea).
+-->
+<template>
+  <button
+    type="button"
+    data-testid="tsp-copy-button"
+    :aria-label="copied ? copiedLabel : label"
+    :title="copied ? copiedLabel : label"
+    class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted hover:text-highlighted hover:bg-default"
+    @click="copy"
+  >
+    <UIcon
+      :name="copied ? 'i-tabler-check' : 'i-tabler-copy'"
+      :class="['text-lg', copied ? 'tsp-text-brand' : '']"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  /** The string put on the clipboard. */
+  value: string
+  /** Button label at rest. */
+  label?: string
+  /** Button label for the moment after a successful copy. */
+  copiedLabel?: string
+}>(), {
+  label: 'Copy',
+  copiedLabel: 'Copied',
+})
+
+const { copied, copy: run } = useTspCopy()
+const copy = () => run(props.value)
+</script>

package/components/TspCopyField.vue

@@ -0,0 +1,102 @@
+<!--
+  A read-only value with a copy button — an endpoint, a server URL, an API key.
+
+    <TspCopyField label="Endpoint" value="https://trips.tsp.tools/mcp" />
+    <TspCopyField label="API key" :value="key" secret help="Treat this like a password." />
+
+  `secret` masks the value behind a reveal, the same rule TspUserCard follows:
+  WHILE HIDDEN THE VALUE IS NOT RENDERED. Covering it with CSS leaves it in the
+  page source, copyable and readable by anything walking the DOM — which is not
+  masking, it only looks like it. Copy still copies the real value: the point is
+  that it is not on screen, not that it is unreachable.
+
+  Monospace, because these are values you compare character by character.
+-->
+<template>
+  <div>
+    <!-- `for` pointed at a <code>, which is not a labelable element, so the
+         association did nothing. aria-labelledby names the value directly. -->
+    <p
+      v-if="label"
+      :id="`${id}-label`"
+      class="block mb-1 text-xs font-bold text-toned"
+    >{{ label }}</p>
+
+    <div class="flex items-center gap-1 rounded-md border border-default bg-default pl-3 pr-1 py-1">
+      <code
+        :id="id"
+        :aria-labelledby="label ? `${id}-label` : undefined"
+        data-testid="tsp-copy-field-value"
+        class="flex-1 min-w-0 truncate font-mono text-sm text-muted"
+      >{{ secret && !revealed ? mask : value }}</code>
+
+      <button
+        v-if="secret"
+        type="button"
+        data-testid="tsp-copy-field-reveal"
+        :aria-pressed="revealed"
+        :aria-label="revealed ? hideLabel : revealLabel"
+        :title="revealed ? hideLabel : revealLabel"
+        class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted hover:text-highlighted hover:bg-elevated"
+        @click="toggle"
+      >
+        <UIcon
+          :name="revealed ? 'i-tabler-eye-off' : 'i-tabler-eye'"
+          class="text-lg"
+        />
+      </button>
+
+      <TspCopyButton
+        :value="value"
+        :label="copyLabel"
+        :copied-label="copiedLabel"
+      />
+    </div>
+
+    <div
+      v-if="help || $slots.help"
+      class="mt-1.5 flex items-start gap-3 text-xs text-dimmed"
+    >
+      <span class="flex-1">{{ help }}</span>
+      <slot name="help" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  /** What is shown and copied. Not rendered at all while masked. */
+  value: string
+  /** Field label above the value. */
+  label?: string
+  /** One muted line under the field. */
+  help?: string
+  /** Mask the value behind a reveal. */
+  secret?: boolean
+  /** Accessible name for the eye while the value is hidden. */
+  revealLabel?: string
+  /** Accessible name for the eye while the value is shown. */
+  hideLabel?: string
+  /** Accessible name for the copy button at rest. */
+  copyLabel?: string
+  /** Accessible name for it just after a successful copy. */
+  copiedLabel?: string
+}>(), {
+  label: undefined,
+  help: undefined,
+  secret: false,
+  revealLabel: 'Show',
+  hideLabel: 'Hide',
+  copyLabel: 'Copy',
+  copiedLabel: 'Copied',
+})
+
+const id = useId()
+const { revealed, toggle, mask } = useTspReveal(28)
+
+// A rotated secret must start masked. The "Regenerate" action this component is
+// designed to sit beside swaps `value` on the SAME instance, so without this
+// the brand-new key appears in the clear with no fresh disclosure — at the one
+// moment masking matters most.
+watch(() => props.value, () => { revealed.value = false })
+</script>

package/components/TspFooterRow.vue

@@ -0,0 +1,56 @@
+<!--
+  One row of the sidebar footer nav — icon + label, styled exactly like a
+  TspNavItem at rest. This exists because gage, pogo and trips each carried the
+  same `footerRowClass` string in their own layout; no consumer should write it
+  again (theme 0.3.0).
+
+  Fixed 32px height rather than vertical padding, so it matches the other rows
+  in TspSidebarFooter even when one of them holds a control (spec 03).
+
+  With `to`, the row goes amber on its own route, like TspNavItem — a footer row
+  that is a real destination (the user page) has to be able to say "you are
+  here". `href` and `button` rows have no route to match, so they never do.
+
+  Renders a <NuxtLink> with `to`, an <a> with `href`, or a <button> with
+  neither:
+
+    <TspFooterRow href="/sign-out" icon="i-tabler-logout">Logout</TspFooterRow>
+-->
+<template>
+  <component
+    :is="tag"
+    v-bind="linkProps"
+    data-testid="tsp-footer-row"
+    class="flex items-center gap-2.5 h-8 px-3 rounded-md text-sm font-normal text-muted hover:text-highlighted hover:bg-default"
+    :active-class="to ? 'tsp-text-brand' : undefined"
+  >
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      class="text-lg"
+    />
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  /** Internal route — renders a NuxtLink. */
+  to?: string
+  /** External or non-router href — renders an <a>. */
+  href?: string
+  /** Tabler icon name. Every footer row carries one. */
+  icon?: string
+}>()
+
+const tag = computed(() => {
+  if (props.to) return resolveComponent('NuxtLink')
+  return props.href ? 'a' : 'button'
+})
+
+const linkProps = computed(() => {
+  if (props.to) return { to: props.to }
+  if (props.href) return { href: props.href }
+  return { type: 'button' as const }
+})
+</script>

package/components/TspLanguageToggle.vue

@@ -0,0 +1,75 @@
+<!--
+  DE/EN segmented control — the component gage, trips, pogo and tsp-tools each
+  built by hand (theme 0.3.0).
+
+  It owns APPEARANCE ONLY. Which locales exist, and how a choice is persisted,
+  stay with the app: pass the codes in, bind v-model, react in the app.
+
+  Every string is a prop with an English default (ADR 008, finding 4 — the same
+  mistake TspThemeToggle had to be fixed for in 0.2.0). `labels` are the
+  accessible names; the visible text is the code itself, uppercased, unless the
+  default slot says otherwise.
+
+    <TspLanguageToggle
+      v-model="locale"
+      :locales="['de', 'en']"
+      :group-label="t('shell.language')"
+      :labels="{ de: t('shell.german'), en: t('shell.english') }"
+    />
+
+  The selected segment is amber TEXT on a raised surface, not an amber fill:
+  ADR 018 leaves the fill to primary buttons, and this control usually sits in
+  the sidebar footer.
+-->
+<template>
+  <div
+    data-testid="tsp-language-toggle"
+    role="group"
+    :aria-label="groupLabel"
+    class="inline-flex items-center gap-0.5 rounded-md border border-default p-0.5"
+  >
+    <button
+      v-for="code in locales"
+      :key="code"
+      type="button"
+      :data-testid="`tsp-lang-${code}`"
+      :aria-pressed="code === modelValue"
+      :aria-label="labelFor(code)"
+      :title="labelFor(code)"
+      :lang="code"
+      class="rounded-sm px-2 py-0.5 text-xs font-bold uppercase transition-colors"
+      :class="code === modelValue
+        ? 'bg-accented tsp-text-brand'
+        : 'text-muted hover:text-highlighted'"
+      @click="select(code)"
+    >
+      <slot
+        :locale="code"
+        :label="labelFor(code)"
+      >{{ code }}</slot>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  /** The active locale code. */
+  modelValue?: string
+  /** The codes to offer, in display order. */
+  locales?: string[]
+  /** aria-label for the group. */
+  groupLabel?: string
+  /** Accessible name per code (aria-label + title). Falls back to the code. */
+  labels?: Record<string, string>
+}>(), {
+  modelValue: undefined,
+  locales: () => ['de', 'en'],
+  groupLabel: 'Language',
+  labels: () => ({ de: 'German', en: 'English' }),
+})
+
+const emit = defineEmits<{ 'update:modelValue': [code: string] }>()
+
+const labelFor = (code: string) => props.labels[code] ?? code.toUpperCase()
+const select = (code: string) => emit('update:modelValue', code)
+</script>

package/components/TspNavBadge.vue

@@ -0,0 +1,36 @@
+<!--
+  The small pill on a nav row — stash's OWNER / MEMBER (spec 05).
+
+  TONES ARE PRESENTATIONAL, NOT SEMANTIC (`primary` | `neutral`). The layer has
+  no idea what roles a service has, and naming them `owner`/`member` here would
+  bake one app's permission model into eight. The app decides which tone means
+  what.
+
+  BOTH TONES ARE OUTLINES. ADR 018 gives the amber fill to primary buttons
+  alone, and the sidebar is swept for amber fills at rest — an amber pill here
+  would be exactly the "one small filled block competing with the primary
+  button" that ADR was written about.
+-->
+<template>
+  <span
+    data-testid="tsp-nav-badge"
+    :data-tone="tone"
+    class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-bold uppercase tracking-wide"
+    :class="tone === 'primary'
+      ? 'tsp-text-brand border-current'
+      : 'text-muted border-default'"
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** `primary` = amber outline, `neutral` = grey. Outline only — a fill in the sidebar would
+   * read as a primary button (ADR 018).
+   */
+  tone?: 'primary' | 'neutral'
+}>(), {
+  tone: 'neutral',
+})
+</script>

package/components/TspNavGroup.vue

@@ -0,0 +1,58 @@
+<!--
+  A nav item that owns sub-items (spec 04, variant A).
+
+    <TspNavGroup to="/fahrten" icon="i-tabler-car" label="Fahrten">
+      <TspNavSubItem to="/fahrten/alle">Alle Fahrten</TspNavSubItem>
+    </TspNavGroup>
+
+  Children are ALWAYS VISIBLE. The collapsible variant was rejected: it needs an
+  open/closed value that has to survive navigation and then be remembered per
+  user, which is a persistence question this layer has no business answering.
+
+  The parent is an ordinary TspNavItem and needs no special colour — under
+  reading 2 every top-level row is already white.
+
+  The indent is measured, not guessed: `ml-[1.375rem]` puts the hairline under
+  the centre of the parent's icon (px-3 = 12px, plus half of the 18px icon), so
+  the spine hangs from the icon rather than floating between columns.
+-->
+<template>
+  <div
+    data-testid="tsp-nav-group"
+    class="flex shrink-0 flex-col gap-0.5"
+  >
+    <TspNavItem
+      :to="to"
+      :icon="icon"
+      :badge="badge"
+      :badge-tone="badgeTone"
+    >
+      {{ label }}
+    </TspNavItem>
+    <div
+      data-testid="tsp-nav-group-children"
+      class="ml-[1.375rem] pl-3 border-l border-default flex flex-col gap-0.5"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** Route of the parent row itself — the group is a destination, not just a heading. */
+  to: string
+  /** Tabler icon name for the parent row. */
+  icon?: string
+  /** Text of the parent row. */
+  label: string
+  /** Optional pill on the right, e.g. a role. */
+  badge?: string
+  /** Tone of that pill; see TspNavBadge. */
+  badgeTone?: 'primary' | 'neutral'
+}>(), {
+  icon: undefined,
+  badge: undefined,
+  badgeTone: 'neutral',
+})
+</script>

package/components/TspNavItem.vue

@@ -1,25 +1,81 @@
 <!--
-  Sidebar nav link: muted by default, filled-amber when active. Pass a Tabler
-  icon name (`i-tabler-*`) and the route.
+  Sidebar nav link: WHITE at rest, amber TEXT on a transparent background when
+  active. Pass a Tabler icon name (`i-tabler-*`) and the route.
+
+  White at rest is spec 04 (reading 2) REVISING ADR 018, which had these rows
+  muted for a quieter shell. What survives from that ADR: no amber fill at rest
+  anywhere, rows stay weight 400, and amber means "you are here". Sub-items
+  inside a TspNavGroup stay muted, so the nav reads white → muted → amber.
+
+  Row metrics are stash's: 32 px tall, 6 px radius, weight 400. The same row
+  style is used by TspFooterRow — keep the two class strings in step.
 -->
 <template>
-  <NuxtLink
-    :to="to"
-    class="flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-bold text-muted hover:text-highlighted hover:bg-default"
-    active-class="!text-inverted bg-primary hover:!bg-primary"
+  <component
+    :is="tag"
+    v-bind="linkProps"
+    data-testid="tsp-nav-item"
+    class="group relative flex shrink-0 items-center gap-2.5 h-8 px-3 rounded-md text-sm font-normal text-highlighted hover:bg-default"
+    :active-class="to ? 'tsp-text-brand' : undefined"
   >
     <UIcon
       v-if="icon"
       :name="icon"
-      class="text-lg"
+      class="text-lg shrink-0"
     />
-    <slot />
-  </NuxtLink>
+    <!-- The LABEL gives way, not the badge: rows are a fixed 32px, so letting
+         a long name push the badge onto a second line (as stash does) would
+         break the row rhythm. TspNavLabel gives the truncated text back on
+         hover. -->
+    <TspNavLabel><slot /></TspNavLabel>
+    <TspNavBadge
+      v-if="badge"
+      :tone="badgeTone"
+      class="ml-auto"
+    >{{ badge }}</TspNavBadge>
+  </component>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  to: string
+const props = withDefaults(defineProps<{
+  /** Internal route — renders a NuxtLink. */
+  to?: string
+  /** External or non-router destination — renders an <a>. A section labelled
+      "External" whose rows cannot leave the app is not much of a section. */
+  href?: string
+  /** Only with `href`. Any target that leaves this context also gets `rel="noopener
+   * noreferrer"`.
+   */
+  target?: string
+  /** Tabler icon name. Every nav row carries one. */
   icon?: string
-}>()
+  /** Optional pill on the right of the row, e.g. a role. */
+  badge?: string
+  /** Tone of the badge; see TspNavBadge. */
+  badgeTone?: 'primary' | 'neutral'
+}>(), {
+  to: undefined,
+  href: undefined,
+  target: undefined,
+  icon: undefined,
+  badge: undefined,
+  badgeTone: 'neutral',
+})
+
+// resolveComponent must run in setup, not in a template expression: there it
+// returns the NAME and Vue renders a literal <NuxtLink> element instead of an
+// anchor. lint, typecheck and the build all stay green while the whole nav is
+// broken — only the e2e caught it. Same shape as TspFooterRow, deliberately.
+const tag = computed(() => (props.href ? 'a' : resolveComponent('NuxtLink')))
+
+const linkProps = computed(() => (props.href
+  ? {
+      href: props.href,
+      target: props.target,
+      // Any target that leaves this browsing context, not just _blank: a
+      // NAMED target (`target="docs"`) also hands the opened document a live
+      // window.opener, and the browser's implicit noopener covers _blank only.
+      rel: props.target && props.target !== '_self' ? 'noopener noreferrer' : undefined,
+    }
+  : { to: props.to }))
 </script>

package/components/TspNavLabel.vue

@@ -0,0 +1,56 @@
+<!--
+  A nav row's label: truncated to the sidebar, with the full text revealed on
+  hover after a short pause.
+
+  NOT a tooltip bubble — it is the label itself, in the row's own surface,
+  allowed to run past the sidebar edge. A 224px sidebar will always be too
+  narrow for some project names, and truncating with no way to read the rest
+  makes those rows useless.
+
+  The reveal only exists when the text ACTUALLY overflows, measured rather than
+  guessed: rendering it for every row would put an invisible overlay on labels
+  that do not need one.
+
+  It is aria-hidden. CSS truncation does not remove text, so a screen reader
+  already reads the full label from the element above — the reveal is purely
+  visual, and announcing it would read every long row twice.
+
+  Appears after 500ms, disappears instantly: `delay-500` applies only under
+  group-hover, so the delay is on the way in and not on the way out.
+-->
+<template>
+  <span
+    class="relative min-w-0 flex-1"
+    @mouseenter="measure"
+  >
+    <span
+      ref="labelEl"
+      data-testid="tsp-nav-label"
+      class="block truncate"
+    >
+      <slot />
+    </span>
+    <span
+      v-if="overflowing"
+      data-testid="tsp-nav-label-full"
+      aria-hidden="true"
+      class="pointer-events-none absolute left-0 top-1/2 z-30 w-max max-w-64 -translate-y-1/2 rounded-md border border-default bg-elevated px-2 py-1 whitespace-nowrap opacity-0 shadow-lg transition-opacity duration-150 delay-0 group-hover:opacity-100 group-hover:delay-500"
+    >
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const labelEl = ref<HTMLElement | null>(null)
+const overflowing = ref(false)
+
+// Measured, not assumed. Re-measured on hover as well as on mount, because the
+// sidebar's width and the row's content can both change after first render.
+const measure = () => {
+  const el = labelEl.value
+  if (el) overflowing.value = el.scrollWidth > el.clientWidth
+}
+
+onMounted(measure)
+</script>

package/components/TspNavSection.vue

@@ -0,0 +1,33 @@
+<!--
+  A break in the nav: a rule, optionally followed by a small label.
+
+    <TspNavSection label="External" />   rule + label
+    <TspNavSection />                    bare divider
+
+  The label deliberately shares the sidebar footer's `User` treatment — 10px,
+  uppercase, muted — so a section header reads the same wherever it appears
+  (spec 04).
+-->
+<template>
+  <div
+    data-testid="tsp-nav-section"
+    :data-bare="!label"
+    class="mt-3 shrink-0"
+  >
+    <hr class="border-default">
+    <p
+      v-if="label"
+      data-testid="tsp-nav-section-label"
+      class="px-3 mt-3 mb-1 text-[10px] uppercase tracking-wide text-muted"
+    >
+      {{ label }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  /** Omit for a bare divider. */
+  label?: string
+}>()
+</script>