vignette/apps/web/src/pages/AvatarExpressionLab.tsx

import { AppShell } from "../components/shell/AppShell";
import { Kicker } from "../components/ui";
import {
  AVATAR_EXPRESSION_LIBRARY,
  ClientAvatar,
  type AvatarExpression,
  type AvatarPersona,
} from "../components/avatar/ClientAvatar";
import {
  PERSONA_LIVE2D_MODELS,
  live2dModel3Path,
  live2dMotionForExpression,
  type Live2DPersonaCode,
  type Live2DPersonaModel,
} from "../components/avatar/live2dModel";
import "./avatar-expression-lab.css";

const PERSONA_CODES = ["P4", "P5", "P6", "P7"] as const satisfies readonly Live2DPersonaCode[];

function avatarFromModel(model: Live2DPersonaModel): AvatarPersona {
  return {
    code: model.personaCode,
    label: model.displayName,
    ageBand: "teen",
    skinTone: model.art.skinTone,
    hair: { style: model.art.hairStyle, color: model.art.hairColor },
    outfitColor: model.art.outfitColor,
    eyeColor: "#2B2B2B",
    accentColor: model.art.accentColor,
    realism: 0.4,
    resistance: model.personaCode === "P7" ? 0.68 : model.personaCode === "P4" ? 0.3 : 0.45,
    expressionBias: model.defaultExpression,
  };
}

function expressionTone(expression: AvatarExpression): string {
  return AVATAR_EXPRESSION_LIBRARY.find((item) => item.id === expression)?.group ?? "cognitive";
}

export default function AvatarExpressionLab() {
  const models = PERSONA_CODES.map((code) => PERSONA_LIVE2D_MODELS[code]);
  const expressionCount = AVATAR_EXPRESSION_LIBRARY.length;
  const renderedAvatarCount = models.length * expressionCount;

  return (
    <AppShell contextLabel="Live2D QA" navRole="learner">
      <div
        className="axl"
        data-avatar-expression-lab="true"
        data-persona-count={models.length}
        data-expression-count={expressionCount}
        data-rendered-avatar-count={renderedAvatarCount}
      >
        <header className="axl__head">
          {/* 상태가 아니라 단순 섹션 라벨이라 accent dot 을 뺀다(D1). */}
          <Kicker dot={false}>Live2D persona rig</Kicker>
          <div>
            <h1>Persona expression board</h1>
            <p>
              P4-P7 first-party avatar models render every expression motion from the shared
              library.
            </p>
          </div>
          <div className="axl__stats" aria-label="Live2D expression coverage">
            <span>
              <b>{models.length}</b>
              personas
            </span>
            <span>
              <b>{expressionCount}</b>
              expressions
            </span>
            <span>
              <b>{renderedAvatarCount}</b>
              previews
            </span>
          </div>
        </header>

        <div className="axl__stack">
          {models.map((model) => {
            const persona = avatarFromModel(model);
            const modelPath = live2dModel3Path(model);

            return (
              <section
                className="axl__persona"
                data-persona-expression-panel="true"
                data-persona-code={model.personaCode}
                data-live2d-model={model.modelId}
                data-live2d-model-url={modelPath}
                data-expression-count={model.expressions.length}
                key={model.personaCode}
              >
                <div className="axl__persona-head">
                  <ClientAvatar
                    persona={persona}
                    state="idle"
                    affect={model.defaultExpression}
                    size={132}
                    animated={false}
                  />
                  <div className="axl__persona-title">
                    <Kicker dot={false}>{model.personaCode}</Kicker>
                    <h2>{model.displayName}</h2>
                    <dl>
                      <div>
                        <dt>model</dt>
                        <dd>{model.modelId}</dd>
                      </div>
                      <div>
                        <dt>model3</dt>
                        <dd>{modelPath}</dd>
                      </div>
                      <div>
                        <dt>default</dt>
                        <dd>{model.defaultExpression}</dd>
                      </div>
                    </dl>
                  </div>
                </div>

                <div className="axl__grid" role="list" aria-label={`${model.personaCode} expressions`}>
                  {AVATAR_EXPRESSION_LIBRARY.map((expression) => {
                    const motion = live2dMotionForExpression(model, expression.id);
                    const tone = expressionTone(expression.id);

                    return (
                      <article
                        className={`axl__card axl__card--${tone}`}
                        data-expression-card="true"
                        data-expression={expression.id}
                        data-expression-group={tone}
                        data-motion-file={motion.file}
                        data-fade-in-ms={motion.fadeInMs}
                        data-duration-ms={motion.durationMs}
                        key={expression.id}
                        role="listitem"
                      >
                        <ClientAvatar
                          persona={persona}
                          state="idle"
                          affect={expression.id}
                          size={104}
                          animated={false}
                          showCaption={false}
                          showMeta={false}
                        />
                        <div className="axl__card-meta">
                          <b>{expression.label}</b>
                          <span>{expression.id}</span>
                          <small>{motion.file}</small>
                        </div>
                      </article>
                    );
                  })}
                </div>
              </section>
            );
          })}
        </div>
      </div>
    </AppShell>
  );
}