ui-studio-style

name	ui-studio-style
description	Editorial specimen-explorer shell — browsable subject and part rails, a dominant clipped 3D stage, inspect controls, details, microscopy/evidence, and comparison. No quizzes or assessment UI. Hunyuan 3D embeds only in this shell.

UI Skill: Canvas Studio Shell

Build a single-page specimen explorer: a calm, editorial scientific workbench where the generated 3D model is the lesson. It should feel like a beautifully laid-out field guide, not a dashboard, scroll article, or quiz app.

Teaching loop: choose a subject → rotate / zoom its 3D model → select a part → read the concise evidence around it → compare it with a related subject.

Copy structure from templates/studio-shell.html. Inline CSS/JS from scripts/ (capsules are self-contained — do not <link> / <script src> skill files).

When to use

Use studio shell	Use page / slide
presentation: studio	Quiz-first, narrative, formula drill
Spatial / 3D catalog (cells, planets, machines)	Long reading / stepped deck
Hunyuan mesh lessons (studio-only)	Anything without a stage

Layout (required)

┌──────────┬────────────────────────────┬──────────────┐
│ Subjects │       STAGE (3D)           │ Details      │
│          │ title · view modes · tip   │ Notes        │
│ Parts    │ rotate · isolate · reset   │ Where it is  │
├──────────┼──────────────┬─────────────┴──────────────┤
│ (span)   │ Evidence     │ Compare                    │
└──────────┴──────────────┴────────────────────────────┘

#	Card	Content budget
1	Subjects	name + 1-line sub (+ optional thumb)
2	Parts	color-dot list
3	Stage	mesh canvas, title/subtitle, view-mode switch, a short drag/zoom tip, and a bottom action bar
4	Details	selected part name, small visual, tagline, 2–4 attrs[]
5	Notes	≤2 sentences plus one-line fun fact
6	Where it occurs	one contextual image, with a concise label
7	Microscope / evidence	up to 3 labelled source thumbnails
8	Compare	two compact subject chips, VS, and one comparison action

Rules:

• body: h-screen overflow-hidden — no page scroll
• Stage card: overflow: hidden; isolation: isolate — mesh must never paint outside
• Short copy only — no essays, chapter maps, self-assessments, quizzes, tutor panels, score/progress UI, or generic dashboard widgets.
• Interaction is tangible: subject/part selection, drag-to-rotate, scroll-to-zoom, reset, isolate/highlight where the model supports it, and a comparison handoff. Do not add games.
• Rename labels per domain (Subjects/Parts → Planets/Moons, Cell Types/Organelles, etc.)

Data schema

var SUBJECTS = {
  "0": {
    title: "…", subtitle: "…",
    meshSrc: "/build/mesh/model.glb",  // or /mesh?key=… / per-subject glb
    defaultPart: "part-0",
    compareA: "…", compareB: "…"
  }
};
var PARTS = {
  "part-0": {
    name: "…", tagline: "…",
    note: "…",           // ≤2 sentences
    funfact: "…",        // one line
    color: "#714da3",
    attrs: [{ label: "…", value: "…" }],  // free-form, not Size/Location/Role unless bio
    evidence: ["q1", "q2", "q3"],
    contextQuery: "…"
  }
};

Subject click updates the stage title, swaps data-mesh-src for a multi-mesh catalog, and selects its default part. Part click rewrites Details, Notes, Microscope evidence, and Where it occurs only.

Visual language

Use a warm, softly textured field-notebook surface: a creamy background, almost-white cards, fine dotted/divider rules, large editorial display titles, and small handwritten or technical-uppercase labels. The 3D asset should feel generously framed, not packed into a dark technical viewport.

• Fonts: Fraunces for titles, Sora for UI, and a restrained handwritten accent for section labels — Google Fonts CSP-allowed.
• Tokens: paste scripts/studio-tokens.css; use one topic accent for selection states and part dots. Do not mix in Hi Tuto cobalt/paper tokens.

3D / mesh (CSP)

Allowed: Tailwind CDN, {{THREE_JS_CDN}}, {{GLTF_LOADER_CDN}} when GLB present.

Forbidden: OrbitControls CDN, ES modules, importmaps, workers, blob: in author HTML.

<canvas id="studio-canvas" width="640" height="420"></canvas>
<div id="mesh-holder" data-mesh-src="/build/mesh/model.glb" data-mesh-canvas="studio-canvas" hidden></div>

• When data-mesh-src is present: do not start a second Three.js loop — mesh runtime owns the canvas
• When absent: inline studio-orbit.js + abstract procedural fallback (never a biology cell unless topic is cells)
• Multi-mesh: set SUBJECTS[id].meshSrc and call window.__hitutoReloadMesh(holder) after swapping the attribute

Images: only go-data-src="/gen?..." or go-data-src="/image?query=...".

Authoring checklist

1. Start from templates/studio-shell.html
2. Fill the studio cards with short, specific subject/part copy and real evidence labels.
3. Wire SUBJECTS/PARTS; one mesh per subject when batch available.
4. Keep the model large, centered, and directly manipulable; never substitute a flat hero image.
5. No second WebGL scene when mesh holder exists.
6. Keep under ~45 KB.
7. Close with </body></html>.

Do / don’t

• Do keep the stage visually dominant and clipped
• Do use free-form attrs[] for any topic
• Do make the model controls communicate real available actions, even when the mesh soft-falls back
• Don’t add quizzes, games, mastery checks, chat/tutor surfaces, or score UI inside studio chapters
• Don’t make the stage look like a generic analytics dashboard
• Don’t mix studio tokens with cobalt/paper brand tokens
• Don’t call Hunyuan outside presentation: studio (provider gate)