System-Infos für v0: Kiosk-Template & Companion App

Zweck: Diese Infos an v0 mitgeben, damit generierte Konzepte/Apps zu unserem CockpitOS-System passen (Digital Signage + Wayfinding für Malls in Deutschland).

---

Kontext für v0

• Alte Version: Digital Signage App mit Wayfinding für Malls – in die Jahre gekommen, Lücken im User-Flow.
• Neues System: Deutlich mehr Features, aber die UI fehlt noch – dafür soll v0 Konzepte/Templates liefern.
• Zwei Oberflächen (immer Paar):
  1. Kiosk = großer Touchscreen im Center (Wegfinder/Info-Terminal) → v0 Teil H (+ F/F2 für Plan).
  2. Companion / NOW! = Handy-App. User scannt QR-Code am Kiosk und macht auf dem Handy weiter → v0 Teil I (immer zusammen mit Kiosk im selben Projekt).

Copy-Paste-Instructions: v0 + Cockpit (So geht’s) — Teil H & I (Instructions „Cockpit H“ + „Cockpit I“).

Kiosk = Info-Terminal (kein großes Handy)

Eine 55″-Stele ist kein vergrößertes Smartphone. v0 soll Terminal-Style bauen:

• Plan als Hero — mindestens 75 % der Fläche (2D/3D Centerplan)
• Kompakter Header — ca. 40 px (Logo, Uhr), kein großer Hero-Banner
• Floating Floor-Pills — Etagen-Tabs als kleine Pills über dem Plan (Overlay)
• Schmale Icon-Toolbar unten — Suche, Shops, Route, Handoff-QR
• Kompakte Info-Cards für Shop/Route — keine Mobile-Vollbild-Sheets
• Höhere Informationsdichte, kleinere Typografie als die Companion (Teil I)

Vercel-Hosting (zusätzlich zu Cockpit)

Website, Kiosk und Companion können parallel laufen: Cockpit (*.cockpit-os.de, Preview, Custom Domain) und optional v0/Vercel. Die API bleibt dashboard.cockpit-os.de.

Details: Parallele Frontends (Website, Signage, Companion)

---

1. Kiosk (Touchscreen) – was das System kann

Screens (alle konfigurierbar ein-/ausblendbar)

Screen	Beschreibung
Home	Hero (Bild/Video/Slideshow, optional zeitgesteuert), Willkommenstext, Quick-Links (Shops, Centerplan, Services, Aktuelles). Optional: Bento-Grid mit Welcome + Mood-Cards.
Shops	Shop-Übersicht mit Suche, A–Z-Filter, Kategorien. Keine Hardcodes – Daten aus Props/CMS.
Shop Detail	Einzelner Shop: Name, Logo, Kategorie, Etage, Öffnungszeiten, ggf. Route starten.
Centerplan	Interaktive Karte (Wayfinding): Etagen, Shops/Standorte, Routenberechnung, „Auf Handy fortsetzen“ per QR.
Services	Service-Übersicht (Info, Fundbüro, WC, etc.) – aus CMS.
Aktuelles	Feed aus News, Events, Angebote, Jobs – einheitliche Content-Cards.
Aktuelles Detail	Einzelansicht für einen News-/Event-/Angebot-/Job-Eintrag.
Social Media (optional)	Widget (z. B. Elfsight) – konfigurierbar.

Navigation zwischen Screens über onNavigate-Callback (kein Router für Template-internen Flow). Screen-Reihenfolge und aktive Screens pro Center konfigurierbar.

Kiosk-Konfiguration (aus CMS/Dashboard)

• Template: z. B. standard | wayfinder | foodcourt.
• Theme: light | dark.
• Hero: ein Bild oder Hero-Media-Playlist: mehrere Items (Bild / Video / Slideshow), optional mit Zeitfenster (startTime/endTime HH:MM).
• Bento Grid (Home): Welcome-Text, Subtext, Mood-Medien für Welcome und pro Quick-Link, bis zu 3 Mood-Cards – alles konfigurierbar.
• Farben: primary, secondary, background, accent; optional pro Quick-Link (shops, centerplan, services, aktuelles).
• Design: glassmorphism, animations, decorativeShapes (Dreiecke/Kreise) – optional.
• Features (ein/aus): Suche, Wayfinding, Services, Barrierefreiheit, Companion (QR-Code „Auf Handy fortsetzen“).
• Quick-Links: Liste aus Config (id, label, icon, route, enabled).

Alles dynamisch aus Config/Props – keine fest verdrahteten Texte oder Center-Namen.

Wayfinding am Kiosk

• Multi-Floor: Etagen, Portale (Treppe/Aufzug/Rolltreppe), Routen über Etagen.
• Routenberechnung: Start (z. B. Kiosk am Haupteingang) → Ziel (Shop/Standort); API: POST /api/wayfinding/routing.
• Barrierefreiheit: Optionen wie „Aufzug bevorzugen“, „Treppen vermeiden“ – an Routing-API übergeben.
• „Auf Handy fortsetzen“: QR-Code generieren → führt in Companion mit Session (centerId, sessionKey) und optional Ziel (z. B. shopId), damit der Nutzer die gleiche Route auf dem Handy sieht.
• Shop-Overlay (3D-Karte): Beim Öffnen eines Shop-Detail-Overlays wird die Karte so gerahmt, dass Kiosk-Startpunkt und angetippter Shop gleichzeitig sichtbar sind; nach Schließen des Overlays kehrt die Ansicht zur normalen Kartenansicht (ohne aktive Navigationsroute bleibt die bisherige Logik unverändert).

Content-Typen (alle aus CMS)

• News (Autor, Kategorie, Tags, Video, Shop-Verknüpfungen).
• Events (Start/Ende, Ort, Preis, Shop/Service).
• Angebote (Rabatt, Gültigkeit, Shop).
• Jobs (Anforderungen, Gehalt, Frist, externe URL).
• Hot Picks: kuratierte Empfehlungen (Shop/Event/News/Offer) – für Signage und Companion kanalfähig.

Keine Platzhalter-Texte im Template – nur Fallbacks, wenn z. B. shops.length === 0.

---

2. Companion App (Handy) – was das System kann

Einstieg & Session

• User scannt QR am Kiosk → Öffnung mit centerId + sessionKey (und optional z. B. shopId für Wayfinding).
• Ohne QR: Aufruf mit centerId (und optional sessionKey) – z. B. Start auf Center Overview.
• AI Premium Companion (NOW!-Start mit Karte): Im Shop-Overlay „Route planen“ startet die Navigation auf derselben Karten-Ansicht (kein Wechsel in eine zweite Centerplan-Seite). Es erscheinen die Route-Leiste (Zurück, Barrierefrei, Plan/AR) und das Schritte-Panel; AR weiterhin als Vollbild. Über das Menüpunkt Centerplan bleibt die dedizierte Wayfinding-Vollbildansicht erreichbar.
• NOW! App-Chrome: Kopfzeile (Logo, NOW!, Aktionen) und Concierge-Eingabe unten sind fest im Layout bzw. position: fixed ans Viewport gebunden; nur der Bereich darunter scrollt. Die Companion-Shell nutzt keine seitliche Slide-Animation mehr auf dem Screen-Container, damit fixed zuverlässig zum Viewport bleibt (kein „mitscrollender“ Header). Die Start-Kopfzeile auf der Karten-Home ist ohne Vollbreiten-Balken: Logo und Aktionen sitzen in schwebenden Glas-Pills (wie die Route-Leiste). Sobald eine Inline-Route aktiv ist, wird diese Kopfzeile komplett ausgeblendet (nur Abstand für die Safe Area), damit nicht zwei Header übereinanderliegen – unabhängig davon, ob centerId in dem Moment schon gesetzt ist.
• Gleicher Centerplan wie Kiosk (3D): Companion rendert WayfinderMapEmbed → dieselbe ModularIsometricWayfinding-Komponente wie der Kiosk (sofern nicht bewusst 2D/SVG per force2DMap). Die Overlay-UI darf kein vollflächiges Scroll-Layer über der Karte legen, sonst blockiert das Tippen auf Flächen (Fix: nur Banner-Bereich scrollt, Karten-Zwischenraum bleibt durchlässig).
• Shop-Detail-Sheet (MapInfoSheet) und Chat: Das Bottom-Sheet muss außerhalb des relative z-10-Overlay-Containers gerendert werden. Liegt es darin, bleibt seine Ebene unter der fixierten Concierge-Leiste (z-[60]); dann wirken Klicks auf „Route planen“ wie Treffer auf die Suggestion-Chips dahinter.
• Karte antippen (Companion Home): Die Karten-Fläche (fixed, pointer-events: auto) liegt unter der UI-Schicht mit pointer-events: none; interaktive Teile (Header, Banner-Box) haben pointer-events: auto. Die Highlights-Leiste hat außen pointer-events: none, innen nur den sichtbaren Streifen auto. Die eingeklappte Chatbar (CompanionChatbar): äußerer fixed-Wrapper pointer-events: none, nur die untere Glas-Leiste pointer-events: auto – sonst fängt eine unsichtbare Fläche Klicks ab (z. B. wirkt ein Tipp auf „Details“ im Shop-Sheet wie Öffnen des Chats).
• Shop-Sheet über allem: MapInfoSheet (Companion, nicht Kiosk) nutzt z-index ~500/510 über Concierge (z-[60]), damit Backdrop + Sheet sicher über Dev-Indikator (Next.js „N“) und Chat liegen. Im Dev kann next.config devIndicators: false gesetzt sein (digital-signage), damit der Indikator die UI nicht überlagert.
• Details & Angebote (Vollbild): „Details“ im Shop-Sheet wechselt nicht ins Leere: Die Companion-Shell (AIPremiumCompanionShell) öffnet dieselbe Vollbild-Shop-Detail-Komponente wie der Kiosk (KioskShopDetail), mit Shops/Services aus derselben API/Cache-Pipeline wie der Kiosk. „Angebote“ öffnet die Angebots-Liste (KioskOffersSlideUp) als Vollbild-Overlay; Karten-Navigation nutzt den Shop-Namen aus dem Angebot.

Companion-Routen (alle vorhanden / geplant)

Route	Bedeutung
/companion/center-overview	Start: „Was geht heute im Center“ – Quick Actions, Hot Picks, Parkplatz, etc.
/companion/shops	Shop-Verzeichnis (Liste/Grid).
/companion/shops/[shopId]	Shop-Detail.
/companion/events	Events-Liste.
/companion/news	News-Liste.
/companion/offers	Angebote.
/companion/wayfinding	Wayfinder (gleiche Logik wie Kiosk, Modus companion) – inkl. Multi-Floor, Route, „Von Haupteingang“ etc.
/companion/feedback/general	Allgemeines Feedback.
/companion/feedback/[locationId]	Feedback zu einer Location (z. B. WC, Service).
/companion/reward-status	Treueprogramm – Punkte, Status.
/companion/qr/[qrCodeId]	Deep-Link nach QR-Scan (Parking, Event, News, Offer, Wayfinding, Feedback, …).

Design: eigenes Companion-Layout (eindeutig „Handy-App“, nicht 1:1 Kiosk), mit eigenem Design-System (Abstände, Radius, Typo, Cards).

Companion-Features (pro Center ein-/ausschaltbar)

• Wayfinding & Navigation (3D-Karte, Wegbeschreibung).
• AR-Navigation (Beta): Kamera-Livebild mit Richtungspfeil, Dead Reckoning (Gyroskop + Schrittzaehler), Map Matching auf Korridor-Graph. Toggle zwischen Plan und AR.
• AR Image Tracking (Beta): Shopfront-Erkennung per MindAR.js -- Kamera auf Ladenfront richten, Shop-Name, Angebote und Events als Overlay. Gleichzeitig Re-Kalibrierung der Navigation.
• Shop-Verzeichnis.
• AI-Assistent (Chatbot für Fragen zum Center).
• Events & News.
• Angebote.
• Parkplatz-Info (Verfügbarkeit, ggf. Navigation).
• QR-Scanner (QR-Codes im Center scannen).
• Treueprogramm (Punkte sammeln / einlösen).

Companion-Layout-Config

• showMap: Karte als Hintergrund (ja/nein).
• showQuickLinks: Quick-Links auf Start/Overview anzeigen.
• theme: light | dark.

Companion nutzt centerConfig.companionConfig (Branding, Farben, Layout, Feature-Flags) – alles aus Backend/CMS.

---

3. Gemeinsame technische Vorgaben (für v0-Templates)

• Framework: Next.js 14, TypeScript, Tailwind CSS, Framer Motion.
• Kiosk: Client Component ('use client') – Touch, Interaktivität, onNavigate.
• Daten: Alles aus Props/Config (config, shops, services, content, centerId, kioskConfig) – keine Hardcodes für Center-Namen, Texte, Shops.
• Bilder: next/image; Fallbacks wenn kein Logo/Hero.
• Touch: Große Targets (min. 44–60 px), klare Zustände (hover/active).
• Barrierefreiheit: Optional Toggle am Kiosk; ARIA-Labels für wichtige Aktionen.
• Responsive: Kiosk für verschiedene Auflösungen; Companion klar mobil-first.

Was v0 vermeiden soll

• Keine API-Calls im Template (Daten kommen als Props).
• Keine fest verdrahteten Center-Namen, Adressen oder Dummy-Shops.
• Keine externen Dependencies außer Next.js, React, Tailwind, Framer Motion (sofern nicht ausdrücklich gewünscht).

---

4. Kurzfassung für den v0-Prompt (Copy & Paste)

UNSER SYSTEM (CockpitOS):

- Kiosk = Touchscreen im Mall; Companion = Handy-App. User scannt QR am Kiosk und macht auf dem Handy weiter (Session: centerId, sessionKey; optional shopId für Route).

Kiosk-Screens (alle aus Config ein-/ausblendbar): Home (Hero + Quick-Links, optional Bento/Mood), Shops, Shop Detail, Centerplan (Wayfinding, Multi-Floor, „Auf Handy fortsetzen“-QR), Services, Aktuelles, Aktuelles Detail, optional Social.

Kiosk-Config: Template, Theme, Hero (Bild oder Media-Playlist mit Zeitfenster), Bento/Welcome/Mood, Farben, Glassmorphism, Animations, Feature-Flags (Suche, Wayfinding, Services, Barrierefreiheit, Companion-QR), Quick-Links-Liste.

Wayfinding: Etagen, Portale, Routen über Etagen, Barrierefreiheit (Aufzug/Treppe), QR → Companion mit gleicher Route.

Companion: Center Overview, Shops, Events, News, Offers, Wayfinding, Feedback, Parking, Reward-Status, QR-Deep-Links. Features pro Center konfigurierbar (Wayfinding, Shops, AI-Chat, Events, Offers, Parking, QR, Loyalty). Layout: showMap, showQuickLinks, theme. Eigenes Companion-Design (nicht 1:1 Kiosk).

AR-Navigation (Beta): Companion bietet Plan/AR-Toggle. AR = Kamera-Livebild mit Richtungspfeil (Dead Reckoning: Gyroskop + Schrittzaehler + Map Matching). Shopfront-Erkennung per MindAR.js Image Tracking: Kamera auf Ladenfront -> Overlay mit Shop-Name, Angeboten, Events. Dashboard: Shopfront-Bilder pro Waypoint hinterlegen, AR-Marker kompilieren (.mind-Datei). API: /api/ar/image-targets liefert Marker-Daten.

Content: News, Events, Angebote, Jobs, Hot Picks – alles aus CMS/Props. Keine Hardcodes. Technik: Next.js 14, TS, Tailwind, Framer Motion; Kiosk = Client Component, Touch-optimiert, Daten nur aus Props.

---

5. Wo das im Projekt steht (für Entwickler)

• Kiosk-Template: apps/digital-signage/src/components/templates/kiosk-standard/ (README, config, Screens).
• Kiosk-Types/Config: apps/dashboard/src/types/kiosk.ts, Bento/Hero in Config.
• Companion-Routen: apps/digital-signage/src/companion/constants.ts (COMPANION_ROUTES).
• Companion-Config: apps/dashboard/src/components/center/kiosk-configuration-new/companion-config-section.tsx (Features, Layout).
• Wayfinding: docs/wayfinding/APPS-WAYFINDING-SUPPORT.md, Wayfinder apps/digital-signage/src/app/wayfinder/page.tsx (mode: default | touchscreen | companion).
• v0-Prompt (bisheriger): cockpit-docs/docs/templates/kiosk-prompt.mdx bzw. apps/docs/src/content/docs/templates/kiosk-prompt.mdx.
• AR-Navigation (Companion):
  • AR-View: apps/digital-signage/src/companion/components/ar/ARNavigationView.tsx
  • AR-Overlay: apps/digital-signage/src/companion/components/ar/ARShopOverlay.tsx
  • AR-Hooks: apps/digital-signage/src/companion/hooks/use-ar-navigation.ts (Dead Reckoning), use-image-tracking.ts (MindAR)
  • AR-Utils: apps/digital-signage/src/companion/lib/ar-utils.ts (Position-JSON mit AR-Feldern)
  • Image Targets API: apps/digital-signage/src/app/api/ar/image-targets/route.ts
  • MindAR-Compiler (Dashboard): apps/dashboard/src/lib/wayfinding/mind-ar-compiler.ts
  • Three.js-Compat-Shim: apps/digital-signage/src/lib/three-compat.js, apps/dashboard/src/lib/wayfinding/three-compat.js

---

6. Vorgefertigter Einleitungstext für v0 (mit System-Infos)

Du kannst so starten und danach deinen konkreten Wunsch (z. B. „Bento-Home mit großen Touch-Tiles“ oder „Companion Center-Overview mit Karte und Quick Actions“) anhängen:

Auf den Screenshots siehst du die aktuelle Version unserer Digital Signage App mit Wayfinding für Malls in Deutschland. Sie ist in die Jahre gekommen und hat viele Lücken im User-Flow. Die Signage-App kommt mit einer Companion App: Der User scannt am großen Touchscreen im Center einen QR-Code und kann auf dem Handy weitermachen.

Unser neues System kann viel mehr, aber die UI fehlt noch. Hier sind die Infos zum System, damit dein Konzept/Template dazu passt:

[HIER DEN INHALT AUS ABSCHNITT 4 "Kurzfassung für den v0-Prompt" EINFÜGEN]

Technik: Next.js 14, TypeScript, Tailwind, Framer Motion. Kiosk = Client Component, alle Daten aus Props (config, shops, services, content). Touch-optimiert, große Buttons, Fallbacks für leere Daten. Keine API-Calls im Template, keine hardcodierten Center-Namen oder Dummy-Inhalte.

[DEIN KONKRETER WUNSCH, z. B.:]
Bitte entwirf ein neues Kiosk-Home mit Bento-Grid und klarem „Auf Handy fortsetzen“-QR. Oder: Entwirf die Companion Center-Overview mit Karte im Hintergrund und Quick Actions für Shops, Wayfinding, Events und Feedback.