Lilith Studio · Costume slot authoring

Purpose#

Configure a body-safe avatar costume slot — pick a garment + palette + safety variant for a costume slot, generate a preview artifact, round-trip through V1 editorial approval, and release a versioned costume edition with provenance attached. The page (apps/oshun/web/src/app/lilith-studio/avatar-costume/page.tsx) returns <AvatarCostumeAuthoring /> directly; the <ShellLayout active="studio"> wrapper and the editorial scope gate are supplied by the route's apps/oshun/web/src/app/lilith-studio/layout.tsx.

Entry points#

• Lilith Studio shell (/lilith-studio) — "Avatar and costume" surface tab → "Open Avatar and costume" link
• Direct URL / bookmark — yes (signed-in)

Layout regions#

AvatarCostumeAuthoring (apps/oshun/web/src/app/lilith-studio/avatar-costume/AvatarCostumeAuthoring.tsx):

• Header: eyebrow "Lilith Studio / Avatar costume", title "Costume slot authoring", lede, two header actions — "Lilith shell" → /lilith-studio, "V1 asset library" → /studio/yemaya/asset-library
• Three-panel grid:
  • Slot configuration panel (aria-label="Costume slot configuration"):
    • Costume slot <select> (data-lilith-costume-slot-select) — four options: Torso wrap, Lower drape, Headpiece, Hand prop
    • Garment <select> (data-lilith-costume-garment-select) — four options gated by slot: Tara practice shawl, Lotus walking sash, Moon crown, Practice mala
    • Palette <select> (data-lilith-costume-palette-select) — three options: Moss and gold, Lotus and silver, Night rose
    • Safety variant <select> (data-lilith-costume-safety-select) — three options: Body-safe fit, No face occlusion, Low-motion cloth
  • Preview panel (aria-label="Avatar costume preview"):
    • Avatar silhouette canvas (data-lilith-costume-preview-canvas) with head/body/slot sprites posed by slotId
    • Preview meta strip — garment label, palette label, safety label
    • Preview evidence: kicker "Preview artifact", preview:<slot>: <garment>:<palette> strong, provenance ID
  • Round trip controls panel (aria-label="Round trip controls"):
    • Stage list (data-lilith-costume-round-trip-list): three StageItems — Preview, Editorial, Release (active / done indicators)
    • Actions: "Generate preview" (data-lilith-costume-generate-preview, primary, only when roundTrip.canPreview), "Send for editorial review" (data-lilith-costume-submit-editorial), "Approve editorial" (data-lilith-costume-approve-editorial), "Release costume slot" (data-lilith-costume-release, release button)
• Release evidence section (aria-label="Release evidence"):
  • Evidence grid: Palette (label · swatch), Policy tag (the safety variant's policyTag), Release status
  • Release manifest textarea (read-only, data-lilith-costume-release-manifest)
• LilithProvenanceInspector — surface ID avatar-costume-authoring, asset list combines garments + palettes + safety variants

States#

• Loading — client component; data-hydrated="false" until mount
• Default draft — slot torso-wrap, garment tara-shawl, palette moss-gold, safety body-safe, stage draft
• Stage progression — draft → preview → editorial → approved → released (each button unlocks only at the prior stage)
• Slot changed — changeSlot resets garment to the first matching slot and returns to draft
• Garment / palette / safety changed — resets to draft
• Released — data-release-edition-id="release:<slot>:<garment>"
• Offline — client-only; no network; works offline

Interactions#

Header#

• "Lilith shell" link — href /lilith-studio
• "V1 asset library" link — href /studio/yemaya/asset-library

Slot configuration selects#

• Costume slot select — sets slotId; calls changeSlot which also resets garment
• Garment select — disabled options for non-matching slots; sets garment; resets draft
• Palette select — sets palette; resets draft
• Safety variant select — sets safety; resets draft

Round-trip buttons#

• "Generate preview" button (primary)
  • Function: setStage('preview')
  • Disabled when stage !== 'draft'
• "Send for editorial review" button
  • Function: setStage('editorial')
  • Disabled when stage !== 'preview'
• "Approve editorial" button
  • Function: setStage('approved')
  • Disabled when stage !== 'editorial'
• "Release costume slot" button (release button)
  • Function: setStage('released')
  • Disabled when stage !== 'approved'

Release evidence#

• Release manifest textarea (read-only, aria-label="Avatar costume release manifest")

Provenance inspector#

• LilithProvenanceInspector — read its own walkthrough

Data & contracts#

• Reads: in-file constants AVATAR_COSTUME_SLOTS, AVATAR_COSTUME_GARMENTS, AVATAR_COSTUME_PALETTES, AVATAR_COSTUME_SAFETY_VARIANTS, AVATAR_COSTUME_PROVENANCE_ASSETS
• Writes: client state only (no network in code)
• Realtime: none
• Caching: client bundle
• Auth/role check: middleware enforces signed-in

Cross-references#

• Studio shell: lilith-studio.md
• Sibling editors: lilith-studio-asana.md, lilith-studio-personas.md, lilith-studio-scenes.md, lilith-studio-music.md, lilith-studio-concerts.md, lilith-studio-provenance.md
• Component source: apps/oshun/web/src/app/lilith-studio/avatar-costume/AvatarCostumeAuthoring.tsx

Open questions / known gaps#

• Confirm whether release IDs persist to V1 release edition or stay in client state
• Verify the body-persona safety policy contract — the policyTag strings (persona.body.safe-fit etc.) reference Lilith policy; cross- check with V1/features.md#lilith-persona-policy
• Confirm whether the avatar silhouette previews actual garment art or is only a stub silhouette