5.2 KiB
Landing tiles in V2 onboarding
The source layout is ../storytellurx-tanstack/src/components/persona-tile.tsx and its
.persona-skin rules in src/styles.css. V2 retains the avatar/name/tag, ornament,
blurb and footer structure, skin colors, borders, shadows and typography treatments.
The app uses Arizona throughout UI text, including all tile names, tags and footers.
Tile names use Arizona’s SRFF and slnt axes for persona character. Selection glyphs replace the landing's
illustrative online/busy/offline indicators. All pages stay inside the existing 384px shell.
PersonaOnboardingProvider resolves the existing personaUIRegistry and applies its
getTheme. Each persona owns an onboarding entry in src/personas/<id>/persona.ts.
The tile and model buttons consume that provider; no separate global persona selection
state or conversation state is introduced for onboarding.
Generated assets
src/content/persona-assets.json preserves the 126 established filenames: one world
and thirteen placement recipes per persona, including the two system identities.
All 126 mapped files are present. Each recipe records its name, editable prompt,
public and repository paths, intended usage, composition, treatment and owner.
The prompts are regeneration recipes, not a record of the private generation prefix.
No images were generated in this pass.
| Recipe | Onboarding placement |
|---|---|
portal |
Original landing tile texture layer |
frame |
Separate tile and model-button border-image |
buttonIdle |
Clipped model-button paint |
buttonHover |
Hover/focus image crossfade |
buttonPressed |
Pressed button paint |
atmosphere |
Masked section background |
Labels, card content and native link focus outlines are never clipped or masked. The remaining recipes retain their intended later placements; they are not all rendered by onboarding. The CSS skin also works when image requests fail.
Read the mapping without loading generator defaults:
node scripts/image-generation/list-world-assets.ts --json
Regenerate one mapped placement using the existing helper:
vp run generate:world --persona nelly --placement frame
The helper forwards only the recipe's --prompt and --name to the generator.
It does not override global defaults. Omit --placement for the world recipe.
No generation command was executed to implement or verify this UI.
public-onboarding-tile.spec.ts verifies the shared tile layout, mapped image roles,
keyboard focus and containment at 320px, including the fallback without images.
The generated-image checks allow real asset requests and decode each referenced file.
Chat continuation
The existing chat composer also consumes its current persona's composer,
suggestion, buttonIdle, buttonHover and buttonPressed recipes. Separate
aria-hidden paint spans retain the existing persona components, geometry and
animations. Context changes update the image variables alongside the persona.
The input remains opaque; the composer texture appears in its surrounding surface.
public-chat-assets.spec.ts checks all seven persona switches with real asset
responses, editing, suggestion selection, and 320px containment.
While a response or recovery is running, the same composer button becomes Stop.
It uses the current persona's pause image, existing button geometry, a stable
square icon and a localized accessible label. Stopping aborts the active local
stream or recovery request, preserves partial text, and returns focus to the input.
The streaming and recovery browser tests cover keyboard activation, stable button
bounds, retained text, and cancellation before a recovery result can be applied.
Shared conversation surfaces
The chat shell resolves world, title, metrics, message and divider images from the same persona-owned mapping. Its background is masked at 5.5% opacity; title paint uses 15%, metric paint 8%, and message paint 7%. These layers add no layout boxes, receive no input, and preserve the existing variable-font title, per-persona metrics, bubble shapes, SVG effects and transcript scrolling. The receipt divider is a one-pixel decorative image rule.
Every generated asset family now has an implemented placement across onboarding and chat. The two system identities share the neutral onboarding and composer implementations; their metrics continue to use their existing components.
Persona craft details
persona-ornament.tsx and persona-ornaments.css now own the shared tile ornaments.
PersonaDetail reuses them on model-button, title and composer edges with a separate
decorative mask. Text and focus rings are never masked. Hisoka’s rim responds to
input focus; Polaire’s chat marks omit the illustrative status readout and blinking
dot. All seven persona motifs retain the landing’s geometry.
Arizona replaces serif and monospace UI overrides, including metric labels and request-inspector text. Noto Music remains solely for Nelly’s musical glyph artwork. The variable-font title animations and state-driven persona axes are preserved.