@retro-antlitz-kartei/react-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,743 @@
+import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import { renderAvatar, normalizeConfig, DEFAULT_CONFIG, configFromSeed, PART_NAMES, BG, encodeConfig, SKIN, CLOTH, randomConfig, decodeConfig } from '@retro-antlitz-kartei/generator';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AvatarArena, POSES, POSE_NAMES } from '@retro-antlitz-kartei/animate';
+
+// src/AvatarEditor.tsx
+function AvatarPreview({
+  config,
+  width = 320,
+  height = 400,
+  background = true,
+  floor = true,
+  className,
+  style,
+  onClick
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    renderAvatar(canvas, config, { background, floor });
+  }, [config, background, floor, width, height]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref,
+      width,
+      height,
+      className,
+      style: { imageRendering: "pixelated", display: "block", ...style },
+      onClick
+    }
+  );
+}
+function CombatModal({ config, theme: t, onClose }) {
+  const canvasRef = useRef(null);
+  const arenaRef = useRef(null);
+  const [pose, setPose] = useState("idle");
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const arena = new AvatarArena(canvas, { pose: "idle" });
+    arena.setConfig(config);
+    arenaRef.current = arena;
+    return () => arena.destroy();
+  }, []);
+  useEffect(() => {
+    arenaRef.current?.setConfig(config);
+  }, [config]);
+  useEffect(() => {
+    arenaRef.current?.setPose(pose);
+  }, [pose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: onClose,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        background: "rgba(8,4,16,0.82)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "20px",
+        backdropFilter: "blur(3px)"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            background: t.cabinet,
+            border: "4px solid " + t.cabinetBorder,
+            borderRadius: t.paper ? "6px" : "14px",
+            padding: "18px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            width: "100%",
+            maxWidth: "420px",
+            boxShadow: "0 20px 60px rgba(0,0,0,.6)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontFamily: t.mono, fontSize: "10px", color: t.title, letterSpacing: "1px" }, children: "\u2694 COMBAT MODE" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    fontFamily: t.mono,
+                    fontSize: "11px",
+                    cursor: "pointer",
+                    width: "30px",
+                    height: "30px",
+                    borderRadius: "7px",
+                    border: "2px solid " + t.panelBorder,
+                    background: "#ffffff10",
+                    color: "#fff",
+                    flex: "0 0 auto"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                width: 360,
+                height: 380,
+                style: {
+                  width: "100%",
+                  maxWidth: "360px",
+                  aspectRatio: "360 / 380",
+                  imageRendering: "pixelated",
+                  display: "block",
+                  margin: "0 auto",
+                  borderRadius: "8px",
+                  border: "3px solid " + t.cabinetBorder,
+                  background: "#0c0618"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "7px" }, children: POSES.map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setPose(p),
+                style: {
+                  fontFamily: t.mono,
+                  fontSize: "7px",
+                  letterSpacing: ".5px",
+                  cursor: "pointer",
+                  padding: "10px 4px",
+                  borderRadius: "6px",
+                  border: "2px solid " + (pose === p ? "#00f0ff" : "#3a2f55"),
+                  background: pose === p ? "#00f0ff" : "#1c0d33",
+                  color: pose === p ? "#10131c" : "#cdbcff"
+                },
+                children: POSE_NAMES[p].toUpperCase()
+              },
+              p
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/theme.ts
+var LAYOUTS = [
+  { key: "arcade", name: "ARCADE" },
+  { key: "kompakt", name: "COMPACT" },
+  { key: "steckbrief", name: "WANTED" }
+];
+var MONO = "'Press Start 2P',monospace";
+var BODY = "'VT323',monospace";
+function theme(layout) {
+  if (layout === "kompakt") {
+    return {
+      stageBg: "#10131c",
+      cabinet: "#1a1f2e",
+      cabinetBorder: "#2a3145",
+      marqueeBg: "#232a3d",
+      title: "#7df9ff",
+      accent: "#ff5d8f",
+      screenBg: "#0b0e16",
+      panel: "#222a3d",
+      panelBorder: "#323b54",
+      rowBg: "#1a2032",
+      text: "#cdd6f4",
+      sub: "#8a93b2",
+      mainDir: "row",
+      mono: MONO,
+      body: BODY,
+      radius: "14px",
+      titleText: "AVATAR EDITOR",
+      glow: false,
+      paper: false
+    };
+  }
+  if (layout === "steckbrief") {
+    return {
+      stageBg: "#3a2a18",
+      cabinet: "#efe2c4",
+      cabinetBorder: "#7a5a32",
+      marqueeBg: "#c0392b",
+      title: "#fff4dc",
+      accent: "#c0392b",
+      screenBg: "#d8c9a6",
+      panel: "#e6d8ba",
+      panelBorder: "#b89a64",
+      rowBg: "#f3ead2",
+      text: "#4a3520",
+      sub: "#8a6e44",
+      mainDir: "row",
+      mono: MONO,
+      body: BODY,
+      radius: "4px",
+      titleText: "WANTED",
+      glow: false,
+      paper: true
+    };
+  }
+  return {
+    // arcade
+    stageBg: "#1a0b2e",
+    cabinet: "#3a1d5c",
+    cabinetBorder: "#ff2e88",
+    marqueeBg: "#120726",
+    title: "#ffe600",
+    accent: "#00f0ff",
+    screenBg: "#06010f",
+    panel: "#2a1248",
+    panelBorder: "#7b2ff7",
+    rowBg: "#1c0d33",
+    text: "#ffe600",
+    sub: "#b48cff",
+    mainDir: "column",
+    mono: MONO,
+    body: BODY,
+    radius: "10px",
+    titleText: "AVATAR-O-MAT",
+    glow: true,
+    paper: false
+  };
+}
+var FONT_HREFS = [
+  "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap"
+];
+var PART_CONTROLS = [
+  { key: "gender", label: "BUILD" },
+  { key: "hut", label: "HAT" },
+  { key: "haare", label: "HAIR" },
+  { key: "ohren", label: "EARS" },
+  { key: "nase", label: "NOSE" },
+  { key: "acc", label: "ACCESSORY" },
+  { key: "torso", label: "TOP" },
+  { key: "hose", label: "TROUSERS" }
+];
+var VIEW_OPTIONS = [
+  { key: "left", name: "LEFT" },
+  { key: "front", name: "FRONT" },
+  { key: "right", name: "RIGHT" }
+];
+function useControllable(controlled, initial, onChange) {
+  const [internal, setInternal] = useState(initial);
+  const value = controlled !== void 0 ? controlled : internal;
+  const set = useCallback(
+    (v) => {
+      if (controlled === void 0) setInternal(v);
+      onChange?.(v);
+    },
+    [controlled, onChange]
+  );
+  return [value, set];
+}
+function AvatarEditor(props) {
+  const {
+    value,
+    defaultValue,
+    seed,
+    onChange,
+    layout: layoutProp,
+    defaultLayout = "arcade",
+    onLayoutChange,
+    showLayoutPicker = true,
+    showCombat = true,
+    showCode = true,
+    showSeed = true,
+    loadFonts = true,
+    className,
+    style
+  } = props;
+  const initialConfig = useMemo(
+    () => normalizeConfig(value ?? defaultValue ?? (seed ? configFromSeed(seed) : DEFAULT_CONFIG)),
+    // initial only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [config, setConfig] = useControllable(value, initialConfig, onChange);
+  const [layout, setLayout] = useControllable(layoutProp, defaultLayout, onLayoutChange);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [codeInput, setCodeInput] = useState("");
+  const [codeMsg, setCodeMsg] = useState("");
+  const [seedInput, setSeedInput] = useState(seed ?? "");
+  const t = theme(layout);
+  useEffect(() => {
+    if (!loadFonts || typeof document === "undefined") return;
+    for (const href of FONT_HREFS) {
+      if (document.querySelector(`link[href="${href}"]`)) continue;
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      document.head.appendChild(link);
+    }
+    if (!document.getElementById("rak-keyframes")) {
+      const s = document.createElement("style");
+      s.id = "rak-keyframes";
+      s.textContent = "@keyframes rak-coinpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}";
+      document.head.appendChild(s);
+    }
+  }, [loadFonts]);
+  const patch = useCallback((p) => setConfig({ ...config, ...p }), [config, setConfig]);
+  const cycle = useCallback(
+    (key, dir) => {
+      const len = PART_NAMES[key].length;
+      patch({ [key]: (config[key] + dir + len) % len });
+    },
+    [config, patch]
+  );
+  const onRandom = () => setConfig({ ...randomConfig(), view: config.view });
+  const onCopyCode = () => {
+    const code = encodeConfig(config);
+    try {
+      navigator.clipboard.writeText(code);
+      setCodeMsg("Copied!");
+    } catch {
+      setCodeInput(code);
+      setCodeMsg("Selected");
+    }
+  };
+  const onLoadCode = () => {
+    if (!codeInput.trim()) return;
+    const next = decodeConfig(codeInput, config);
+    setConfig(next);
+    setCodeMsg("Loaded!");
+  };
+  const onGenerateSeed = () => {
+    if (!seedInput.trim()) return;
+    setConfig({ ...configFromSeed(seedInput), view: config.view });
+  };
+  const arrowStyle = {
+    fontFamily: t.mono,
+    fontSize: "10px",
+    cursor: "pointer",
+    flex: "0 0 auto",
+    width: "32px",
+    height: "32px",
+    borderRadius: t.paper ? "3px" : "7px",
+    border: "2px solid " + t.accent,
+    background: t.glow ? t.accent : t.accent + "22",
+    color: t.glow ? "#10131c" : t.accent,
+    lineHeight: 1
+  };
+  const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    background: t.rowBg,
+    borderRadius: t.paper ? "3px" : "8px",
+    padding: "6px 8px",
+    border: "1px solid " + t.panelBorder
+  };
+  const partLabelStyle = { fontFamily: t.mono, fontSize: "7px", color: t.sub, letterSpacing: "1px" };
+  const partValueStyle = { fontFamily: t.body, fontSize: "19px", color: t.text, lineHeight: 1.1, marginTop: "2px" };
+  const dividerStyle = { height: "2px", background: t.panelBorder, opacity: 0.6, margin: "2px 0" };
+  const swatchRowStyle = { display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" };
+  const swatchLabelStyle = { fontFamily: t.mono, fontSize: "7px", color: t.sub, letterSpacing: "1px", width: "78px", flex: "0 0 auto" };
+  const codeFieldStyle = {
+    flex: "1 1 auto",
+    minWidth: 0,
+    fontFamily: "monospace",
+    fontSize: "11px",
+    padding: "7px 8px",
+    borderRadius: t.paper ? "3px" : "6px",
+    border: "2px solid " + t.panelBorder,
+    background: t.paper ? "#fff" : "#0c111c",
+    color: t.text,
+    outline: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    boxSizing: "border-box"
+  };
+  const smallBtnStyle = {
+    fontFamily: t.mono,
+    fontSize: "7px",
+    letterSpacing: ".5px",
+    cursor: "pointer",
+    padding: "8px 9px",
+    borderRadius: t.paper ? "3px" : "6px",
+    border: "2px solid " + t.accent,
+    background: t.glow ? t.accent : t.accent + "22",
+    color: t.glow ? "#10131c" : t.accent,
+    flex: "0 0 auto"
+  };
+  const codeLabelStyle = { fontFamily: t.mono, fontSize: "7px", color: t.sub, letterSpacing: "1px" };
+  const swatchBtn = (col, active) => ({
+    background: col,
+    width: "22px",
+    height: "22px",
+    cursor: "pointer",
+    padding: 0,
+    borderRadius: t.paper ? "2px" : "5px",
+    border: "2px solid " + (active ? t.accent : t.paper ? "#00000033" : "#ffffff44"),
+    boxShadow: active ? "0 0 0 2px " + t.accent + "66" : "none"
+  });
+  const nameDisplay = PART_NAMES.torso[config.torso].toUpperCase();
+  const partRow = (key, label) => /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsx("button", { onClick: () => cycle(key, -1), style: arrowStyle, children: "\u25C0" }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("div", { style: partLabelStyle, children: label }),
+      /* @__PURE__ */ jsx("div", { style: partValueStyle, children: PART_NAMES[key][config[key]] })
+    ] }),
+    /* @__PURE__ */ jsx("button", { onClick: () => cycle(key, 1), style: arrowStyle, children: "\u25B6" })
+  ] }, key);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        minHeight: "100%",
+        width: "100%",
+        background: t.stageBg,
+        padding: "24px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        fontFamily: t.body,
+        backgroundImage: "radial-gradient(circle at 50% 0%, " + t.accent + "22, transparent 60%)",
+        boxSizing: "border-box",
+        ...style
+      },
+      children: [
+        showLayoutPicker && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "center", flexWrap: "wrap", marginBottom: "14px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: t.mono, fontSize: "9px", color: "#fff", opacity: 0.55, letterSpacing: "1px" }, children: "LAYOUT" }),
+          LAYOUTS.map((l) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setLayout(l.key),
+              style: {
+                fontFamily: t.mono,
+                fontSize: "8px",
+                letterSpacing: "1px",
+                cursor: "pointer",
+                padding: "7px 9px",
+                borderRadius: "6px",
+                border: "2px solid " + (layout === l.key ? t.accent : "#ffffff22"),
+                background: layout === l.key ? t.accent : "#ffffff10",
+                color: layout === l.key ? "#10131c" : "#fff"
+              },
+              children: l.name
+            },
+            l.key
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: t.mainDir === "row" ? "860px" : "540px",
+              background: t.cabinet,
+              border: "4px solid " + t.cabinetBorder,
+              borderRadius: t.radius,
+              boxShadow: "0 18px 50px rgba(0,0,0,.5)" + (t.glow ? ", 0 0 30px " + t.accent + "33" : ""),
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: t.marqueeBg,
+                    padding: "14px",
+                    display: "flex",
+                    gap: "12px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderBottom: "3px solid " + t.cabinetBorder
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent } }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: t.mono,
+                          fontSize: t.titleText === "WANTED" ? "20px" : "15px",
+                          color: t.title,
+                          letterSpacing: "2px",
+                          textShadow: t.glow ? "0 0 10px " + t.accent : "2px 2px 0 #00000044"
+                        },
+                        children: t.titleText
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent } })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: t.mainDir,
+                    gap: "16px",
+                    padding: "18px",
+                    alignItems: t.mainDir === "row" ? "stretch" : "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          flex: t.mainDir === "row" ? "0 0 300px" : "0 0 auto",
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "8px",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                position: "relative",
+                                padding: "10px",
+                                background: t.screenBg,
+                                borderRadius: t.paper ? "4px" : "10px",
+                                border: "4px solid " + t.cabinetBorder,
+                                boxShadow: "inset 0 0 20px rgba(0,0,0,.6)",
+                                cursor: showCombat ? "pointer" : "default"
+                              },
+                              onClick: showCombat ? () => setModalOpen(true) : void 0,
+                              children: [
+                                /* @__PURE__ */ jsx(AvatarPreview, { config, width: 320, height: 400, style: { width: "264px", height: "330px", borderRadius: "3px" } }),
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      inset: "10px",
+                                      pointerEvents: "none",
+                                      borderRadius: "3px",
+                                      backgroundImage: "repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px)",
+                                      mixBlendMode: "multiply"
+                                    }
+                                  }
+                                ),
+                                showCombat && /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      right: "14px",
+                                      bottom: "14px",
+                                      fontFamily: t.mono,
+                                      fontSize: "7px",
+                                      letterSpacing: "1px",
+                                      color: t.title,
+                                      background: t.marqueeBg,
+                                      border: "2px solid " + t.cabinetBorder,
+                                      borderRadius: "6px",
+                                      padding: "5px 7px",
+                                      pointerEvents: "none"
+                                    },
+                                    children: "\u2694 FIGHT"
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: t.mono,
+                                fontSize: "9px",
+                                color: t.title,
+                                letterSpacing: "1px",
+                                padding: "6px 10px",
+                                background: t.marqueeBg,
+                                borderRadius: "5px",
+                                textAlign: "center",
+                                border: "2px solid " + t.cabinetBorder
+                              },
+                              children: "THE " + nameDisplay + " WEARER"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { style: { width: "264px", maxWidth: "100%", display: "flex", flexDirection: "column", gap: "8px", marginTop: "2px" }, children: [
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", width: "100%" }, children: VIEW_OPTIONS.map((o) => /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => patch({ view: o.key }),
+                                style: {
+                                  fontFamily: t.mono,
+                                  fontSize: "7px",
+                                  letterSpacing: ".5px",
+                                  cursor: "pointer",
+                                  flex: 1,
+                                  padding: "8px 4px",
+                                  borderRadius: t.paper ? "3px" : "6px",
+                                  border: "2px solid " + (config.view === o.key ? t.accent : t.panelBorder),
+                                  background: config.view === o.key ? t.accent : t.paper ? "#ffffff55" : "#ffffff10",
+                                  color: config.view === o.key ? "#10131c" : t.text
+                                },
+                                children: o.name
+                              },
+                              o.key
+                            )) }),
+                            partRow("mund", "MOUTH"),
+                            /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
+                              /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "BACKGROUND" }),
+                              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: BG.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ bg: i }), style: swatchBtn(c, config.bg === i) }, c)) })
+                            ] }),
+                            showCode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+                              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                                /* @__PURE__ */ jsx("span", { style: codeLabelStyle, children: "CODE" }),
+                                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+                                  /* @__PURE__ */ jsx("div", { style: codeFieldStyle, children: encodeConfig(config) }),
+                                  /* @__PURE__ */ jsx("button", { onClick: onCopyCode, style: smallBtnStyle, children: "COPY" })
+                                ] }),
+                                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      value: codeInput,
+                                      onChange: (e) => {
+                                        setCodeInput(e.target.value);
+                                        setCodeMsg("");
+                                      },
+                                      placeholder: "Paste code\u2026",
+                                      style: codeFieldStyle
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("button", { onClick: onLoadCode, style: smallBtnStyle, children: "LOAD" })
+                                ] }),
+                                codeMsg && /* @__PURE__ */ jsx("span", { style: { fontFamily: t.mono, fontSize: "7px", color: t.accent }, children: codeMsg })
+                              ] })
+                            ] }),
+                            showSeed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+                              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                                /* @__PURE__ */ jsx("span", { style: codeLabelStyle, children: "SEED" }),
+                                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      value: seedInput,
+                                      onChange: (e) => setSeedInput(e.target.value),
+                                      onKeyDown: (e) => {
+                                        if (e.key === "Enter") onGenerateSeed();
+                                      },
+                                      placeholder: "e.g. your name\u2026",
+                                      style: codeFieldStyle
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("button", { onClick: onGenerateSeed, style: smallBtnStyle, children: "GENERATE" })
+                                ] })
+                              ] })
+                            ] })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          width: t.mainDir === "column" ? "100%" : "auto",
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "9px",
+                          background: t.panel,
+                          border: "3px solid " + t.panelBorder,
+                          borderRadius: t.paper ? "4px" : "10px",
+                          padding: "14px"
+                        },
+                        children: [
+                          PART_CONTROLS.map((c) => partRow(c.key, c.label)),
+                          /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+                          /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
+                            /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "SKIN" }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: SKIN.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ skin: i }), style: swatchBtn(c, config.skin === i) }, c)) })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
+                            /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "CLOTHING" }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: CLOTH.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ cloth: i }), style: swatchBtn(c, config.cloth === i) }, c)) })
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: onRandom,
+                              style: {
+                                fontFamily: t.mono,
+                                fontSize: "10px",
+                                letterSpacing: "1px",
+                                cursor: "pointer",
+                                padding: "12px",
+                                borderRadius: t.paper ? "3px" : "9px",
+                                marginTop: "2px",
+                                border: "3px solid " + t.title,
+                                background: t.accent,
+                                color: "#10131c"
+                              },
+                              children: "\u{1F3B2} RANDOM"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: t.marqueeBg,
+                    padding: "10px",
+                    display: "flex",
+                    gap: "10px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: t.title,
+                    borderTop: "3px solid " + t.cabinetBorder
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: t.accent, fontSize: "14px", animation: "rak-coinpulse 1.2s ease-in-out infinite" }, children: "\u25CF" }),
+                    /* @__PURE__ */ jsx("span", { style: { fontFamily: t.mono, fontSize: "8px", letterSpacing: "1px" }, children: "INSERT COIN \xB7 SATIRE EDITION" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showCombat && modalOpen && /* @__PURE__ */ jsx(CombatModal, { config, theme: t, onClose: () => setModalOpen(false) })
+      ]
+    }
+  );
+}
+
+export { AvatarEditor, AvatarPreview, CombatModal, FONT_HREFS, LAYOUTS, theme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map