@breakergames/design-system 0.1.0

package/dist/index.es.js

@@ -0,0 +1,361 @@
+import { jsxs as c, jsx as a, Fragment as u } from "react/jsx-runtime";
+import p from "react";
+function x({
+  variant: e = "primary",
+  size: n = "md",
+  fullWidth: r = !1,
+  loading: l = !1,
+  icon: i,
+  children: s,
+  disabled: t,
+  className: d = "",
+  ...o
+}) {
+  const m = [
+    "maka-btn",
+    `maka-btn--${e}`,
+    `maka-btn--${n}`,
+    r && "maka-btn--full",
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c("button", { className: m, disabled: t || l, ...o, children: [
+    l && /* @__PURE__ */ a("span", { className: "maka-btn__spinner" }),
+    !l && i,
+    s
+  ] });
+}
+const b = p.forwardRef(
+  ({ label: e, error: n, helperText: r, className: l = "", ...i }, s) => /* @__PURE__ */ c("div", { className: "maka-input-wrapper", children: [
+    e && /* @__PURE__ */ a("label", { className: "maka-input-label", children: e }),
+    /* @__PURE__ */ a(
+      "input",
+      {
+        ref: s,
+        className: `maka-input ${n ? "maka-input--error" : ""} ${l}`,
+        ...i
+      }
+    ),
+    n && /* @__PURE__ */ a("span", { className: "maka-input-error", children: n }),
+    !n && r && /* @__PURE__ */ a("span", { className: "maka-input-helper", children: r })
+  ] })
+);
+b.displayName = "Input";
+const v = {
+  "staff-pick": { icon: "⭐", labelEn: "Pick", labelZh: "精选" },
+  hot: { icon: "🔥", labelEn: "Hot", labelZh: "热门" },
+  liked: { icon: "❤️", labelEn: "Loved", labelZh: "好评" },
+  rising: { icon: "📈", labelEn: "Rising", labelZh: "上升" },
+  new: { icon: "✨", labelEn: "New", labelZh: "新品" },
+  trending: { icon: "🚀", labelEn: "Trend", labelZh: "趋势" }
+};
+function $({ type: e, label: n, language: r = "en", className: l = "" }) {
+  const i = v[e], s = n || (r === "zh" ? i.labelZh : i.labelEn);
+  return /* @__PURE__ */ c("span", { className: `maka-badge maka-badge--${e} ${l}`, children: [
+    /* @__PURE__ */ a("span", { children: i.icon }),
+    /* @__PURE__ */ a("span", { children: s })
+  ] });
+}
+function y({ name: e, imageUrl: n, size: r = "md", className: l = "" }) {
+  var s;
+  const i = ((s = e == null ? void 0 : e.charAt(0)) == null ? void 0 : s.toUpperCase()) || "U";
+  return /* @__PURE__ */ a("div", { className: `maka-avatar maka-avatar--${r} ${l}`, children: n ? /* @__PURE__ */ a("img", { src: n, alt: e || "avatar" }) : /* @__PURE__ */ a("span", { children: i }) });
+}
+function w({ label: e, value: n, color: r = "primary", className: l = "" }) {
+  return /* @__PURE__ */ c("div", { className: `maka-stat-card ${l}`, children: [
+    /* @__PURE__ */ a("span", { className: "maka-stat-card__label", children: e }),
+    /* @__PURE__ */ a("span", { className: `maka-stat-card__value maka-stat-card__value--${r}`, children: n })
+  ] });
+}
+function B({ children: e, className: n = "", clickable: r = !1, onClick: l }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `maka-card ${r ? "maka-card--clickable" : ""} ${n}`,
+      onClick: l,
+      role: r ? "button" : void 0,
+      tabIndex: r ? 0 : void 0,
+      children: e
+    }
+  );
+}
+function C({
+  title: e,
+  tagline: n,
+  imageUrl: r,
+  gradientFrom: l,
+  gradientTo: i,
+  badge: s,
+  playCount: t,
+  likeCount: d,
+  onClick: o,
+  className: m = ""
+}) {
+  const h = r ? { backgroundImage: `url(${r})` } : { background: `linear-gradient(135deg, ${l || "#7c5cfa"}, ${i || "#5c9cfa"})` };
+  return /* @__PURE__ */ c("div", { className: `maka-featured-card ${m}`, onClick: o, children: [
+    /* @__PURE__ */ a("div", { className: "maka-featured-card__bg", style: h }),
+    /* @__PURE__ */ a("div", { className: "maka-featured-card__overlay" }),
+    s && /* @__PURE__ */ a("div", { className: "maka-featured-card__badge", children: s }),
+    /* @__PURE__ */ c("div", { className: "maka-featured-card__content", children: [
+      /* @__PURE__ */ a("div", { className: "maka-featured-card__title", children: e }),
+      n && /* @__PURE__ */ a("div", { className: "maka-featured-card__tagline", children: n }),
+      /* @__PURE__ */ c("div", { className: "maka-featured-card__stats", children: [
+        t !== void 0 && /* @__PURE__ */ c("span", { children: [
+          "▶ ",
+          t
+        ] }),
+        d !== void 0 && /* @__PURE__ */ c("span", { children: [
+          "❤ ",
+          d
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function I({
+  title: e,
+  tagline: n,
+  imageUrl: r,
+  primaryColor: l,
+  backgroundColor: i,
+  badge: s,
+  playCount: t,
+  likeCount: d,
+  onClick: o,
+  className: m = ""
+}) {
+  const h = r ? { backgroundImage: `url(${r})` } : { background: `linear-gradient(135deg, ${l || "#7c5cfa"}, ${i || "#1e2a3a"})` };
+  return /* @__PURE__ */ c("div", { className: `maka-scenario-card ${m}`, onClick: o, children: [
+    /* @__PURE__ */ c("div", { className: "maka-scenario-card__image", style: h, children: [
+      /* @__PURE__ */ a("div", { className: "maka-scenario-card__image-overlay" }),
+      /* @__PURE__ */ c("div", { className: "maka-scenario-card__image-stats", children: [
+        t !== void 0 && /* @__PURE__ */ c("span", { children: [
+          "▶ ",
+          t
+        ] }),
+        d !== void 0 && /* @__PURE__ */ c("span", { children: [
+          "❤ ",
+          d
+        ] })
+      ] }),
+      s && /* @__PURE__ */ a("div", { className: "maka-scenario-card__badge-slot", children: s }),
+      /* @__PURE__ */ a("div", { className: "maka-scenario-card__play-overlay", children: /* @__PURE__ */ a("span", { style: { fontSize: 32, color: "white" }, children: "▶" }) })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "maka-scenario-card__body", children: [
+      /* @__PURE__ */ a("div", { className: "maka-scenario-card__title", children: e }),
+      n && /* @__PURE__ */ a("div", { className: "maka-scenario-card__tagline", children: n })
+    ] })
+  ] });
+}
+const N = {
+  searching: "Searching...",
+  generating: "Generating...",
+  ready: "Ready!"
+};
+function S({ status: e = "generating", statusText: n, className: r = "" }) {
+  return /* @__PURE__ */ c("div", { className: `maka-generating-card ${r}`, children: [
+    /* @__PURE__ */ c("div", { className: "maka-generating-card__dots", children: [
+      /* @__PURE__ */ a("div", { className: "maka-generating-card__dot" }),
+      /* @__PURE__ */ a("div", { className: "maka-generating-card__dot" }),
+      /* @__PURE__ */ a("div", { className: "maka-generating-card__dot" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "maka-generating-card__text", children: n || N[e] })
+  ] });
+}
+function E({ content: e, role: n, className: r = "" }) {
+  return /* @__PURE__ */ a("div", { className: `maka-chat-bubble maka-chat-bubble--${n} ${r}`, children: e });
+}
+function G({ liked: e = !1, count: n = 0, onToggle: r, disabled: l, className: i = "" }) {
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      className: `maka-like-btn ${e ? "maka-like-btn--liked" : ""} ${i}`,
+      onClick: r,
+      disabled: l,
+      children: [
+        /* @__PURE__ */ a("span", { children: e ? "❤️" : "🤍" }),
+        n > 0 && /* @__PURE__ */ a("span", { children: n })
+      ]
+    }
+  );
+}
+function Z({
+  placeholder: e = "Search or create games...",
+  onClick: n,
+  isLoading: r = !1,
+  icon: l,
+  className: i = ""
+}) {
+  return /* @__PURE__ */ a("div", { className: `maka-bottom-bar ${r ? "maka-bottom-bar--loading" : ""} ${i}`, children: /* @__PURE__ */ c("div", { className: "maka-bottom-bar__pill", onClick: n, role: "button", tabIndex: 0, children: [
+    /* @__PURE__ */ a("span", { className: "maka-bottom-bar__icon", children: l || "🦙" }),
+    /* @__PURE__ */ a("span", { className: "maka-bottom-bar__placeholder", children: e }),
+    r ? /* @__PURE__ */ a("span", { className: "maka-bottom-bar__spinner" }) : /* @__PURE__ */ a("span", { className: "maka-bottom-bar__send", children: "↑" })
+  ] }) });
+}
+function H({
+  logoText: e = "Makabaka",
+  logoIcon: n,
+  tabs: r = [],
+  activeTab: l,
+  onTabChange: i,
+  userName: s,
+  avatar: t,
+  onSignIn: d,
+  onLogout: o,
+  languageLabel: m = "EN",
+  onLanguageToggle: h,
+  className: _ = ""
+}) {
+  return /* @__PURE__ */ a("header", { className: `maka-header ${_}`, children: /* @__PURE__ */ c("div", { className: "maka-header__inner", children: [
+    /* @__PURE__ */ c("a", { className: "maka-header__logo", href: "/", children: [
+      /* @__PURE__ */ a("span", { className: "maka-header__logo-icon", children: n || "🦙" }),
+      /* @__PURE__ */ a("span", { className: "maka-header__logo-text", children: e })
+    ] }),
+    r.length > 0 && /* @__PURE__ */ a("nav", { className: "maka-header__nav", children: r.map((k) => /* @__PURE__ */ a(
+      "button",
+      {
+        className: `maka-header__tab ${l === k.id ? "maka-header__tab--active" : ""}`,
+        onClick: () => i == null ? void 0 : i(k.id),
+        children: k.label
+      },
+      k.id
+    )) }),
+    /* @__PURE__ */ c("div", { className: "maka-header__actions", children: [
+      h && /* @__PURE__ */ a("button", { className: "maka-header__lang-btn", onClick: h, children: m }),
+      s ? /* @__PURE__ */ c(u, { children: [
+        /* @__PURE__ */ a("span", { className: "maka-header__username", children: s }),
+        t,
+        o && /* @__PURE__ */ a("button", { className: "maka-header__tab", onClick: o, style: { display: "none" }, children: "Logout" })
+      ] }) : d && /* @__PURE__ */ a("button", { className: "maka-header__tab", onClick: d, children: "Sign In" })
+    ] })
+  ] }) });
+}
+function L({ isOpen: e, onClose: n, children: r, size: l = "md", className: i = "" }) {
+  return e ? /* @__PURE__ */ a("div", { className: "maka-modal-backdrop", onClick: n, children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: `maka-modal maka-modal--${l} ${i}`,
+      onClick: (s) => s.stopPropagation(),
+      children: [
+        /* @__PURE__ */ a("button", { className: "maka-modal__close", onClick: n, children: "✕" }),
+        r
+      ]
+    }
+  ) }) : null;
+}
+function P({ isOpen: e, onClose: n, children: r, title: l, subtitle: i, className: s = "" }) {
+  return e ? /* @__PURE__ */ a("div", { className: "maka-bottom-sheet-backdrop", onClick: n, children: /* @__PURE__ */ c("div", { className: `maka-bottom-sheet ${s}`, onClick: (t) => t.stopPropagation(), children: [
+    /* @__PURE__ */ a("div", { className: "maka-bottom-sheet__handle" }),
+    (l || i) && /* @__PURE__ */ c("div", { className: "maka-bottom-sheet__header", children: [
+      /* @__PURE__ */ c("div", { children: [
+        l && /* @__PURE__ */ a("div", { className: "maka-bottom-sheet__title", children: l }),
+        i && /* @__PURE__ */ a("div", { className: "maka-bottom-sheet__subtitle", children: i })
+      ] }),
+      /* @__PURE__ */ a("button", { className: "maka-bottom-sheet__close", onClick: n, children: "✕" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "maka-bottom-sheet__body", children: r })
+  ] }) }) : null;
+}
+function A({ children: e, columns: n = 3, className: r = "" }) {
+  return /* @__PURE__ */ a("div", { className: `maka-game-grid ${n === 4 ? "maka-game-grid--4" : ""} ${r}`, children: e });
+}
+function M({ title: e, icon: n, children: r, className: l = "" }) {
+  return /* @__PURE__ */ c("div", { className: l, children: [
+    (e || n) && /* @__PURE__ */ c("div", { className: "maka-hot-grid__header", children: [
+      n && /* @__PURE__ */ a("span", { className: "maka-hot-grid__header-icon", children: n }),
+      e && /* @__PURE__ */ a("span", { children: e })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "maka-hot-grid__content", children: r })
+  ] });
+}
+function R({ leftColumn: e, rightColumn: n, className: r = "" }) {
+  return /* @__PURE__ */ c("div", { className: `maka-waterfall ${r}`, children: [
+    /* @__PURE__ */ a("div", { className: "maka-waterfall__col", children: e }),
+    /* @__PURE__ */ a("div", { className: "maka-waterfall__col maka-waterfall__col--offset", children: n })
+  ] });
+}
+function W({ size: e = 24, color: n = "currentColor" }) {
+  return /* @__PURE__ */ a("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: n, children: /* @__PURE__ */ a("path", { d: "M8 5v14l11-7L8 5z" }) });
+}
+function j({ size: e = 24, color: n = "currentColor" }) {
+  return /* @__PURE__ */ c("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: n, strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ a("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ a("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function D({ size: e = 24, color: n = "currentColor", filled: r = !1 }) {
+  return /* @__PURE__ */ a("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: r ? n : "none", stroke: n, strokeWidth: "2", children: /* @__PURE__ */ a("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) });
+}
+function F({ size: e = 24, color: n = "currentColor" }) {
+  return /* @__PURE__ */ c("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: n, strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ a("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+    /* @__PURE__ */ a("polyline", { points: "5 12 12 5 19 12" })
+  ] });
+}
+const J = {
+  primary: "#7c5cfa",
+  primaryHover: "#6b4ee0",
+  secondary: "#5c9cfa",
+  accent: "#06d6a0",
+  bgDark: "#1b2838",
+  bgCard: "#1e2a3a",
+  bgHover: "#2a3a4a",
+  textPrimary: "#e8e8ec",
+  danger: "#ef4444",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  like: "#f43f5e"
+}, O = {
+  fontDisplay: '"Plus Jakarta Sans", "Inter", sans-serif',
+  fontBody: '"Inter", sans-serif',
+  weightRegular: 400,
+  weightMedium: 500,
+  weightSemibold: 600,
+  weightBold: 700,
+  weightExtrabold: 800
+}, U = {
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px"
+}, X = {
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  full: "9999px"
+};
+export {
+  F as ArrowUpIcon,
+  y as Avatar,
+  $ as Badge,
+  Z as BottomInputBar,
+  P as BottomSheet,
+  x as Button,
+  B as Card,
+  E as ChatBubble,
+  j as CloseIcon,
+  C as FeaturedCard,
+  A as GameGrid,
+  S as GeneratingCard,
+  H as Header,
+  D as HeartIcon,
+  M as HotGrid,
+  b as Input,
+  G as LikeButton,
+  L as Modal,
+  W as PlayIcon,
+  I as ScenarioCard,
+  w as StatCard,
+  R as WaterfallGrid,
+  J as colors,
+  X as radius,
+  U as spacing,
+  O as typography
+};

package/dist/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap";:root{--maka-primary: #7c5cfa;--maka-primary-hover: #6b4ee0;--maka-secondary: #5c9cfa;--maka-accent: #06d6a0;--maka-bg-dark: #1b2838;--maka-bg-card: #1e2a3a;--maka-bg-hover: #2a3a4a;--maka-bg-overlay: rgba(0, 0, 0, .8);--maka-bg-frosted: rgba(0, 0, 0, .7);--maka-text-primary: #e8e8ec;--maka-text-secondary: rgba(255, 255, 255, .7);--maka-text-muted: rgba(255, 255, 255, .4);--maka-text-disabled: rgba(255, 255, 255, .3);--maka-danger: #ef4444;--maka-danger-bg: rgba(239, 68, 68, .1);--maka-success: #22c55e;--maka-success-bg: rgba(34, 197, 94, .2);--maka-warning: #f59e0b;--maka-warning-bg: rgba(245, 158, 11, .2);--maka-like: #f43f5e;--maka-badge-staff-from: #f59e0b;--maka-badge-staff-to: #eab308;--maka-badge-hot-from: #f97316;--maka-badge-hot-to: #ef4444;--maka-badge-liked-from: #ec4899;--maka-badge-liked-to: #f43f5e;--maka-badge-rising-from: #22c55e;--maka-badge-rising-to: #10b981;--maka-badge-new-from: #a855f7;--maka-badge-new-to: #6366f1;--maka-badge-trending-from: #06b6d4;--maka-badge-trending-to: #3b82f6;--maka-font-display: "Plus Jakarta Sans", "Inter", sans-serif;--maka-font-body: "Inter", sans-serif;--maka-radius-sm: 4px;--maka-radius-md: 8px;--maka-radius-lg: 12px;--maka-radius-xl: 16px;--maka-radius-2xl: 24px;--maka-radius-full: 9999px;--maka-border-subtle: rgba(255, 255, 255, .1);--maka-border-medium: rgba(255, 255, 255, .2);--maka-border-emphasis: rgba(255, 255, 255, .4);--maka-border-primary: rgba(124, 92, 250, .4);--maka-shadow-card: 0 8px 24px rgba(0, 0, 0, .3);--maka-shadow-button: 0 4px 16px rgba(124, 92, 250, .35);--maka-transition-fast: .15s ease;--maka-transition-normal: .3s ease;--maka-space-1: 4px;--maka-space-2: 8px;--maka-space-3: 12px;--maka-space-4: 16px;--maka-space-5: 20px;--maka-space-6: 24px;--maka-space-8: 32px;--maka-space-10: 40px;--maka-space-12: 48px;--maka-space-16: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.maka-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--maka-font-body);font-weight:600;border:none;cursor:pointer;transition:all var(--maka-transition-normal);border-radius:var(--maka-radius-md);white-space:nowrap}.maka-btn:disabled{opacity:.5;cursor:not-allowed}.maka-btn--sm{padding:6px 12px;font-size:13px}.maka-btn--md{padding:10px 24px;font-size:14px}.maka-btn--lg{padding:14px 28px;font-size:16px}.maka-btn--primary{background:linear-gradient(to right,var(--maka-primary),var(--maka-secondary));color:#fff}.maka-btn--primary:hover:not(:disabled){transform:scale(1.03);box-shadow:var(--maka-shadow-button)}.maka-btn--secondary{background:transparent;border:1px solid var(--maka-border-primary);color:var(--maka-primary)}.maka-btn--secondary:hover:not(:disabled){background:#7c5cfa1a;border-color:var(--maka-primary)}.maka-btn--ghost{background:#ffffff0d;border:1px solid var(--maka-border-subtle);color:var(--maka-text-secondary)}.maka-btn--ghost:hover:not(:disabled){background:#ffffff1a;color:var(--maka-text-primary)}.maka-btn--danger{background:var(--maka-danger-bg);border:1px solid rgba(239,68,68,.3);color:var(--maka-danger)}.maka-btn--danger:hover:not(:disabled){background:#ef444433}.maka-btn--full{width:100%}.maka-btn__spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:maka-spin .6s linear infinite}.maka-input-wrapper{display:flex;flex-direction:column;gap:6px}.maka-input-label{font-family:var(--maka-font-body);font-size:14px;font-weight:500;color:var(--maka-text-secondary)}.maka-input{width:100%;padding:10px 16px;font-family:var(--maka-font-body);font-size:14px;color:var(--maka-text-primary);background:var(--maka-bg-dark);border:1px solid var(--maka-border-medium);border-radius:var(--maka-radius-md);outline:none;transition:border-color var(--maka-transition-fast),box-shadow var(--maka-transition-fast)}.maka-input::placeholder{color:var(--maka-text-muted)}.maka-input:focus{border-color:var(--maka-primary);box-shadow:0 0 0 1px var(--maka-primary)}.maka-input--error{border-color:var(--maka-danger)}.maka-input--error:focus{box-shadow:0 0 0 1px var(--maka-danger)}.maka-input-error{font-size:13px;color:var(--maka-danger)}.maka-input-helper{font-size:13px;color:var(--maka-text-muted)}.maka-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--maka-radius-full);font-family:var(--maka-font-body);font-size:11px;font-weight:500;color:#fff;white-space:nowrap}.maka-badge--staff-pick{background:linear-gradient(135deg,var(--maka-badge-staff-from),var(--maka-badge-staff-to))}.maka-badge--hot{background:linear-gradient(135deg,var(--maka-badge-hot-from),var(--maka-badge-hot-to))}.maka-badge--liked{background:linear-gradient(135deg,var(--maka-badge-liked-from),var(--maka-badge-liked-to))}.maka-badge--rising{background:linear-gradient(135deg,var(--maka-badge-rising-from),var(--maka-badge-rising-to))}.maka-badge--new{background:linear-gradient(135deg,var(--maka-badge-new-from),var(--maka-badge-new-to))}.maka-badge--trending{background:linear-gradient(135deg,var(--maka-badge-trending-from),var(--maka-badge-trending-to))}.maka-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--maka-primary),var(--maka-secondary));color:#fff;font-family:var(--maka-font-display);font-weight:700;flex-shrink:0;overflow:hidden}.maka-avatar--sm{width:28px;height:28px;font-size:12px}.maka-avatar--md{width:36px;height:36px;font-size:14px}.maka-avatar--lg{width:48px;height:48px;font-size:18px}.maka-avatar img{width:100%;height:100%;object-fit:cover}.maka-stat-card{display:flex;flex-direction:column;gap:4px;padding:16px;background:#ffffff0d;border:1px solid var(--maka-border-subtle);border-radius:var(--maka-radius-lg)}.maka-stat-card__label{font-family:var(--maka-font-body);font-size:12px;color:var(--maka-text-muted)}.maka-stat-card__value{font-family:var(--maka-font-display);font-size:28px;font-weight:700}.maka-stat-card__value--primary{color:var(--maka-primary)}.maka-stat-card__value--danger{color:var(--maka-like)}.maka-stat-card__value--success{color:var(--maka-accent)}.maka-card{background:var(--maka-bg-card);border:1px solid var(--maka-border-subtle);border-radius:var(--maka-radius-xl);padding:24px;transition:all var(--maka-transition-normal)}.maka-card--clickable{cursor:pointer}.maka-card--clickable:hover{border-color:#7c5cfa4d;box-shadow:var(--maka-shadow-card)}.maka-featured-card{position:relative;border-radius:var(--maka-radius-2xl);overflow:hidden;cursor:pointer;aspect-ratio:4/5}@media (min-width: 1024px){.maka-featured-card{aspect-ratio:3/2}}.maka-featured-card__bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center}.maka-featured-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%)}.maka-featured-card__badge{position:absolute;top:12px;left:12px;z-index:2}.maka-featured-card__content{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2}.maka-featured-card__title{font-family:var(--maka-font-display);font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}.maka-featured-card__tagline{font-size:14px;color:#ffffffb3;margin-bottom:12px}.maka-featured-card__stats{display:flex;align-items:center;gap:16px;font-size:13px;color:#fff9}.maka-featured-card__stats span{display:flex;align-items:center;gap:4px}.maka-featured-card:hover{box-shadow:0 0 0 2px #ffffff4d}.maka-scenario-card{position:relative;border-radius:var(--maka-radius-xl);overflow:hidden;cursor:pointer;background:var(--maka-bg-card);border:1px solid var(--maka-border-subtle);transition:all var(--maka-transition-normal)}.maka-scenario-card:hover{border-color:#7c5cfa4d;box-shadow:var(--maka-shadow-card)}.maka-scenario-card__image{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}.maka-scenario-card__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%)}.maka-scenario-card__image-stats{position:absolute;bottom:8px;left:12px;right:12px;display:flex;align-items:center;gap:12px;font-size:12px;color:#fffc}.maka-scenario-card__image-stats span{display:flex;align-items:center;gap:3px}.maka-scenario-card__body{padding:12px 16px}.maka-scenario-card__title{font-family:var(--maka-font-display);font-size:15px;font-weight:600;color:var(--maka-text-primary);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.maka-scenario-card__tagline{font-size:13px;color:var(--maka-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.maka-scenario-card__badge-slot{position:absolute;top:8px;left:8px;z-index:2}.maka-scenario-card__play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;opacity:0;transition:opacity var(--maka-transition-normal)}.maka-scenario-card:hover .maka-scenario-card__play-overlay{opacity:1}.maka-generating-card{aspect-ratio:16/9;border-radius:var(--maka-radius-xl);background:linear-gradient(135deg,#7c5cfa33,#6b728033);border:1px solid var(--maka-border-subtle);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.maka-generating-card__dots{display:flex;gap:8px}.maka-generating-card__dot{width:8px;height:8px;background:var(--maka-primary);border-radius:50%;animation:maka-bounce 1s infinite}.maka-generating-card__dot:nth-child(2){animation-delay:.15s}.maka-generating-card__dot:nth-child(3){animation-delay:.3s}@keyframes maka-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.maka-generating-card__text{font-size:13px;color:var(--maka-text-muted)}.maka-chat-bubble{max-width:80%;padding:10px 16px;font-family:var(--maka-font-body);font-size:14px;line-height:1.6;color:#fff;word-break:break-word}.maka-chat-bubble--user{margin-left:auto;background:#7c5cfacc;border-radius:var(--maka-radius-xl) var(--maka-radius-xl) var(--maka-radius-sm) var(--maka-radius-xl)}.maka-chat-bubble--assistant{margin-right:auto;background:#ffffff1a;border-radius:var(--maka-radius-xl) var(--maka-radius-xl) var(--maka-radius-xl) var(--maka-radius-sm)}.maka-like-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--maka-border-medium);border-radius:var(--maka-radius-full);background:#ffffff0d;cursor:pointer;transition:all var(--maka-transition-normal);font-family:var(--maka-font-body);font-size:13px;color:var(--maka-text-secondary)}.maka-like-btn:hover{background:#ffffff1a;border-color:var(--maka-border-emphasis)}.maka-like-btn--liked{border-color:#f43f5e80;background:#f43f5e1a;color:var(--maka-like)}.maka-like-btn:disabled{opacity:.5;cursor:not-allowed}.maka-bottom-bar{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--maka-bg-frosted);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:40}.maka-bottom-bar__pill{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff0d;border:1px solid var(--maka-border-subtle);border-radius:var(--maka-radius-full);cursor:pointer;transition:all var(--maka-transition-normal);width:100%}.maka-bottom-bar__pill:hover{background:#ffffff14;border-color:var(--maka-border-medium)}.maka-bottom-bar__icon{font-size:20px;flex-shrink:0}.maka-bottom-bar__placeholder{flex:1;font-family:var(--maka-font-body);font-size:14px;color:var(--maka-text-muted)}.maka-bottom-bar__send{width:32px;height:32px;border-radius:50%;background:#7c5cfa80;border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0;cursor:pointer;transition:all var(--maka-transition-normal)}.maka-bottom-bar__send:hover{background:var(--maka-primary)}.maka-bottom-bar--loading .maka-bottom-bar__pill{border-color:var(--maka-border-primary)}.maka-bottom-bar__spinner{width:16px;height:16px;border:2px solid var(--maka-primary);border-top-color:transparent;border-radius:50%;animation:maka-spin .6s linear infinite;flex-shrink:0}@keyframes maka-spin{to{transform:rotate(360deg)}}.maka-header{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(to bottom,#000000e6,#000000b3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}.maka-header__inner{max-width:896px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}@media (min-width: 1024px){.maka-header__inner{padding:12px 32px}}.maka-header__logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}.maka-header__logo-icon{font-size:28px}.maka-header__logo-text{font-family:var(--maka-font-display);font-size:24px;font-weight:700;background:linear-gradient(to right,var(--maka-primary),var(--maka-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:none}@media (min-width: 1024px){.maka-header__logo-text{display:inline}}.maka-header__nav{display:flex;align-items:center;gap:2px}@media (min-width: 1024px){.maka-header__nav{gap:8px}}.maka-header__tab{padding:6px 10px;border-radius:var(--maka-radius-full);font-family:var(--maka-font-body);font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all var(--maka-transition-normal);background:transparent;color:#fff9}@media (min-width: 1024px){.maka-header__tab{padding:8px 20px;font-size:15px}}.maka-header__tab:hover{color:#fff;background:#ffffff1a}.maka-header__tab--active{background:var(--maka-primary);color:#fff}.maka-header__tab--active:hover{background:var(--maka-primary)}.maka-header__actions{display:flex;align-items:center;gap:8px}@media (min-width: 1024px){.maka-header__actions{gap:12px}}.maka-header__lang-btn{padding:6px 10px;border-radius:var(--maka-radius-full);border:1px solid var(--maka-border-medium);background:transparent;color:var(--maka-text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--maka-transition-normal)}.maka-header__lang-btn:hover{color:#fff;border-color:var(--maka-border-emphasis)}.maka-header__username{font-size:14px;color:var(--maka-text-secondary);display:none}@media (min-width: 1024px){.maka-header__username{display:inline}}.maka-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--maka-bg-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}.maka-modal{background:var(--maka-bg-card);border:1px solid var(--maka-border-subtle);border-radius:var(--maka-radius-2xl);width:100%;max-height:90vh;overflow-y:auto;position:relative}.maka-modal--sm{max-width:400px}.maka-modal--md{max-width:560px}.maka-modal--lg{max-width:896px}.maka-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#00000080;border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background var(--maka-transition-fast)}.maka-modal__close:hover{background:#000000b3}.maka-bottom-sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--maka-bg-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}.maka-bottom-sheet{background:var(--maka-bg-card);border:1px solid var(--maka-border-subtle);border-radius:var(--maka-radius-2xl) var(--maka-radius-2xl) 0 0;width:100%;max-width:560px;max-height:85vh;overflow-y:auto;position:relative}@media (min-width: 1024px){.maka-bottom-sheet-backdrop{align-items:center}.maka-bottom-sheet{border-radius:var(--maka-radius-2xl);max-width:640px}}.maka-bottom-sheet__handle{width:40px;height:4px;border-radius:2px;background:#fff3;margin:12px auto}@media (min-width: 1024px){.maka-bottom-sheet__handle{display:none}}.maka-bottom-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 12px}.maka-bottom-sheet__title{font-family:var(--maka-font-display);font-size:18px;font-weight:600;color:var(--maka-text-primary)}.maka-bottom-sheet__subtitle{font-size:13px;color:var(--maka-text-muted)}.maka-bottom-sheet__close{width:28px;height:28px;border-radius:50%;background:#ffffff1a;border:none;color:var(--maka-text-secondary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.maka-bottom-sheet__body{padding:0 20px 20px}.maka-game-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}@media (min-width: 768px){.maka-game-grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media (min-width: 1024px){.maka-game-grid--4{grid-template-columns:repeat(4,1fr)}}.maka-hot-grid__header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-family:var(--maka-font-display);font-size:18px;font-weight:700;color:var(--maka-text-primary)}.maka-hot-grid__header-icon{font-size:20px}.maka-hot-grid__content{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width: 768px){.maka-hot-grid__content{grid-template-columns:repeat(3,1fr)}}.maka-waterfall{display:grid;grid-template-columns:1fr 1fr;gap:12px}.maka-waterfall__col{display:flex;flex-direction:column;gap:12px}.maka-waterfall__col--offset{padding-top:24px}

package/dist/tokens/colors.d.ts

@@ -0,0 +1,14 @@
+export declare const colors: {
+    readonly primary: "#7c5cfa";
+    readonly primaryHover: "#6b4ee0";
+    readonly secondary: "#5c9cfa";
+    readonly accent: "#06d6a0";
+    readonly bgDark: "#1b2838";
+    readonly bgCard: "#1e2a3a";
+    readonly bgHover: "#2a3a4a";
+    readonly textPrimary: "#e8e8ec";
+    readonly danger: "#ef4444";
+    readonly success: "#22c55e";
+    readonly warning: "#f59e0b";
+    readonly like: "#f43f5e";
+};

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,20 @@
+export declare const spacing: {
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+};
+export declare const radius: {
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "24px";
+    readonly full: "9999px";
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,9 @@
+export declare const typography: {
+    readonly fontDisplay: "\"Plus Jakarta Sans\", \"Inter\", sans-serif";
+    readonly fontBody: "\"Inter\", sans-serif";
+    readonly weightRegular: 400;
+    readonly weightMedium: 500;
+    readonly weightSemibold: 600;
+    readonly weightBold: 700;
+    readonly weightExtrabold: 800;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+export type BadgeType = 'staff-pick' | 'hot' | 'liked' | 'rising' | 'new' | 'trending';
+export interface DiscoveryScenario {
+    id: string;
+    name: string;
+    tagline?: string;
+    coverImageUrl?: string;
+    primaryColor?: string;
+    backgroundColor?: string;
+    playCount?: number;
+    likeCount?: number;
+    commentCount?: number;
+    rating?: number;
+    tags?: string[];
+    badge?: BadgeType;
+    templateId?: string;
+    creator?: {
+        displayName: string;
+    };
+}

package/guidelines/Guidelines.md

@@ -0,0 +1,41 @@
+# Makabaka Design System
+
+Design system for **makabaka.io**, a UGC game discovery and creation platform.
+
+## Visual Identity
+- **Dark theme only** — page background: `#1b2838`, card surface: `#1e2a3a`
+- **Primary purple gradient** — `#7c5cfa` to `#5c9cfa`
+- **Accent green** — `#06d6a0` for success states and highlights
+- **Frosted glass effects** — `backdrop-filter: blur(12px)` on overlays and headers
+- **Rounded corners** — 12px–24px on cards, full-round on pills/badges
+- **Game community aesthetic** — inspired by Steam/Epic Games Store, not retro arcade
+
+## Installation
+```tsx
+import '@makabaka/design-system/theme.css';
+import { Button, Card, Header, ... } from '@makabaka/design-system';
+```
+
+## Rules
+1. Always import `theme.css` at the root of your app.
+2. Use `@makabaka/design-system` components instead of native HTML elements.
+3. Use CSS variables (`--maka-*`) for all colors. Never hardcode hex values in custom styles.
+4. All pages use dark background (`--maka-bg-dark`).
+5. Text is always light on dark. Primary: `--maka-text-primary`, secondary: `--maka-text-secondary`.
+6. Action buttons use `variant="primary"` (gradient purple→blue).
+7. Cards show a purple border glow on hover.
+8. Modals/sheets use frosted backdrop overlay.
+9. The `Header` component is always fixed at the top of the page.
+10. The `BottomInputBar` is always fixed at the bottom of discovery pages.
+
+## Fonts
+- **Display**: Plus Jakarta Sans (headings, logos, card titles)
+- **Body**: Inter (paragraphs, labels, buttons)
+- Import: `https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap`
+
+## Component Reference
+- See `overview-components.md` for the full component catalog
+- See `design-tokens/colors.md` for color palette
+- See `design-tokens/typography.md` for typography scale
+- See `design-tokens/spacing.md` for spacing and radius
+- See `components/*.md` for individual component guides

package/guidelines/components/badge.md

@@ -0,0 +1,25 @@
+# Badge
+
+Colored pill label for game status/category.
+
+## Types
+| Type | Icon | Colors |
+|------|------|--------|
+| `staff-pick` | ⭐ | Amber gradient |
+| `hot` | 🔥 | Orange→Red gradient |
+| `liked` | ❤️ | Pink→Rose gradient |
+| `rising` | 📈 | Green gradient |
+| `new` | ✨ | Purple→Indigo gradient |
+| `trending` | 🚀 | Cyan→Blue gradient |
+
+## Props
+- `type`: BadgeType (required)
+- `label`: string — custom label override
+- `language`: 'en' | 'zh' — auto label language
+
+## Usage
+```tsx
+<Badge type="hot" />
+<Badge type="staff-pick" language="zh" />
+<Badge type="new" label="Fresh!" />
+```

package/guidelines/components/button.md

@@ -0,0 +1,30 @@
+# Button
+
+Action button with multiple variants.
+
+## Variants
+- `primary` — Gradient purple→blue, white text. For main actions (Play, Create, Sign In).
+- `secondary` — Transparent with purple border. For secondary actions (Join Room, Cancel).
+- `ghost` — Subtle white/5% background. For tertiary actions (Logout, language toggle).
+- `danger` — Red tint background. For destructive actions (Delete, Remove).
+
+## Sizes
+- `sm` — 13px font, compact padding. For inline/compact contexts.
+- `md` — 14px font, standard padding. Default size.
+- `lg` — 16px font, large padding. For hero CTAs, full-width form buttons.
+
+## Props
+- `variant`: 'primary' | 'secondary' | 'ghost' | 'danger'
+- `size`: 'sm' | 'md' | 'lg'
+- `fullWidth`: boolean — stretches to container width
+- `loading`: boolean — shows spinner, disables interaction
+- `icon`: ReactNode — icon before label
+- `disabled`: boolean
+
+## Usage
+```tsx
+<Button variant="primary" size="lg" fullWidth>Play Now</Button>
+<Button variant="secondary" icon={<PlayIcon size={16} />}>Create Room</Button>
+<Button variant="ghost" size="sm">Cancel</Button>
+<Button variant="danger" loading>Deleting...</Button>
+```

package/guidelines/components/card.md

@@ -0,0 +1,51 @@
+# Card Components
+
+## Card (base)
+Generic container with dark surface, subtle border, and optional hover effect.
+Use as a wrapper for custom card layouts.
+
+```tsx
+<Card clickable onClick={handleClick}>
+  <h3>Custom Content</h3>
+</Card>
+```
+
+## FeaturedCard
+Large hero card for promoted games. Shows full-bleed background image with gradient overlay, badge, title, tagline, and stats.
+
+```tsx
+<FeaturedCard
+  title="Survival Challenge"
+  tagline="Can you survive the apocalypse?"
+  imageUrl="/covers/survival.jpg"
+  badge={<Badge type="staff-pick" />}
+  playCount={1234}
+  likeCount={567}
+  onClick={handleClick}
+/>
+```
+
+**Aspect ratio**: 4:5 on mobile, 3:2 on desktop.
+
+## ScenarioCard
+Standard game listing card with 4:3 image area, hover play overlay, title, and tagline. Used in grids.
+
+```tsx
+<ScenarioCard
+  title="Office Politics"
+  tagline="Navigate corporate drama"
+  imageUrl="/covers/office.jpg"
+  badge={<Badge type="hot" />}
+  playCount={890}
+  likeCount={234}
+  onClick={handleClick}
+/>
+```
+
+## GeneratingCard
+Loading placeholder while AI generates a game. Shows animated bouncing dots and status text.
+
+```tsx
+<GeneratingCard status="generating" />
+<GeneratingCard status="searching" statusText="Finding games..." />
+```

package/guidelines/components/chat-bubble.md

@@ -0,0 +1,17 @@
+# ChatBubble
+
+Message bubble for MakaAI chat conversations.
+
+## Variants
+- `user` — Right-aligned, purple background (#7c5cfa at 80% opacity), sharp bottom-left corner
+- `assistant` — Left-aligned, translucent white background (10% opacity), sharp bottom-right corner
+
+## Props
+- `content`: string — message text
+- `role`: 'user' | 'assistant'
+
+## Usage
+```tsx
+<ChatBubble role="user" content="Make me a survival game" />
+<ChatBubble role="assistant" content="I'll create a post-apocalyptic survival scenario for you!" />
+```