97 lines
5.2 KiB
Markdown
97 lines
5.2 KiB
Markdown
# 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:
|
||
|
||
```sh
|
||
node scripts/image-generation/list-world-assets.ts --json
|
||
```
|
||
|
||
Regenerate one mapped placement using the existing helper:
|
||
|
||
```sh
|
||
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.
|