@tipp/ui 2.8.0 → 2.10.0

package/dist/app/platform/userInfos/utils.js

@@ -6,69 +6,67 @@ import {
   sessionList
 } from "../../../chunk-BZ3EXV6A.js";
 import "../../../chunk-HBF6IIVZ.js";
-import "../../../chunk-77YN5S26.js";
-import "../../../chunk-KNIIDDYM.js";
-import "../../../chunk-6TU647KJ.js";
-import "../../../chunk-CGDBUDY3.js";
+import "../../../chunk-AELKCD6B.js";
 import "../../../chunk-5XYPLDI5.js";
 import "../../../chunk-6NPTJBFE.js";
 import "../../../chunk-LNPFV5BJ.js";
-import "../../../chunk-MUPK4L3U.js";
-import "../../../chunk-MUNMDHRF.js";
-import "../../../chunk-IT7ZTP7F.js";
 import "../../../chunk-YXMB4MCM.js";
 import "../../../chunk-HYITAA4J.js";
 import "../../../chunk-5H3YPCZK.js";
 import "../../../chunk-FR2GDOU2.js";
 import "../../../chunk-74DX4CU7.js";
-import "../../../chunk-Z2U2YQOG.js";
-import "../../../chunk-5SXTL6NO.js";
-import "../../../chunk-RMW3MQF5.js";
+import "../../../chunk-KNIIDDYM.js";
+import "../../../chunk-6TU647KJ.js";
+import "../../../chunk-CGDBUDY3.js";
 import "../../../chunk-TNNF5Q62.js";
 import "../../../chunk-YO3BQW6S.js";
 import "../../../chunk-DX3DLP5Z.js";
 import "../../../chunk-SA7AYYQS.js";
 import "../../../chunk-3TOUVBIB.js";
-import "../../../chunk-EGEQY3KT.js";
-import "../../../chunk-24PX34TH.js";
+import "../../../chunk-MUPK4L3U.js";
+import "../../../chunk-MUNMDHRF.js";
+import "../../../chunk-IT7ZTP7F.js";
 import "../../../chunk-XQOL7UBI.js";
 import "../../../chunk-TULWX7D6.js";
 import "../../../chunk-BI6TW3ZO.js";
-import "../../../chunk-ZPUNTAVI.js";
-import "../../../chunk-Z54XTEAF.js";
-import "../../../chunk-YIVIBIK2.js";
-import "../../../chunk-JCUG2XKB.js";
-import "../../../chunk-645GPOW2.js";
-import "../../../chunk-U7N2PWMO.js";
-import "../../../chunk-7RJYF5L3.js";
-import "../../../chunk-HF6GNDPV.js";
+import "../../../chunk-USL6PICI.js";
+import "../../../chunk-RWJUXAFY.js";
+import "../../../chunk-RMW3MQF5.js";
 import "../../../chunk-T73HHR3I.js";
-import "../../../chunk-5FLPPHUZ.js";
+import "../../../chunk-MQKIIIBW.js";
 import "../../../chunk-2M3UFZUD.js";
 import "../../../chunk-PT57HCAI.js";
 import "../../../chunk-2DZ2Y3JI.js";
-import "../../../chunk-72ZC7DBY.js";
-import "../../../chunk-EIKFXUNC.js";
-import "../../../chunk-RP2RGCAW.js";
-import "../../../chunk-JETG3WEI.js";
+import "../../../chunk-GNB4A34H.js";
+import "../../../chunk-EGEQY3KT.js";
+import "../../../chunk-24PX34TH.js";
 import "../../../chunk-WG5OK3YN.js";
 import "../../../chunk-ZCGH6TJ3.js";
 import "../../../chunk-UFWDQGOK.js";
 import "../../../chunk-NFDQJVFA.js";
 import "../../../chunk-Q37G2GS6.js";
-import "../../../chunk-6SYFG6YY.js";
-import "../../../chunk-GPZXD762.js";
-import "../../../chunk-BK74U562.js";
+import "../../../chunk-ZPUNTAVI.js";
+import "../../../chunk-KDS7OQOY.js";
+import "../../../chunk-USGOLLYO.js";
+import "../../../chunk-JCUG2XKB.js";
+import "../../../chunk-645GPOW2.js";
+import "../../../chunk-U7N2PWMO.js";
+import "../../../chunk-7RJYF5L3.js";
+import "../../../chunk-HF6GNDPV.js";
 import "../../../chunk-UFRB2BVD.js";
 import "../../../chunk-4Y5BEXVN.js";
-import "../../../chunk-IA4WXGVH.js";
-import "../../../chunk-YXFHD2PY.js";
+import "../../../chunk-75EY7LBP.js";
+import "../../../chunk-L4QQGIYQ.js";
 import "../../../chunk-LDBWASUA.js";
 import "../../../chunk-PO2PBAHW.js";
+import "../../../chunk-36W7VD2Z.js";
 import "../../../chunk-25HMMI7R.js";
 import "../../../chunk-2LCH3PDF.js";
 import "../../../chunk-LQY4RKWI.js";
 import "../../../chunk-ZD7MNMED.js";
+import "../../../chunk-EIKFXUNC.js";
+import "../../../chunk-RP2RGCAW.js";
+import "../../../chunk-JETG3WEI.js";
 import "../../../chunk-VOME2TE7.js";
 import "../../../chunk-JVXATVAC.js";
 import "../../../chunk-B3VSXNTH.js";
@@ -88,8 +86,11 @@ import "../../../chunk-ZUYCXCPW.js";
 import "../../../chunk-YVFNJE4E.js";
 import "../../../chunk-GI4AN2IZ.js";
 import "../../../chunk-WYWM2HSZ.js";
-import "../../../chunk-VFQD57ZY.js";
 import "../../../chunk-EAXUQEO5.js";
+import "../../../chunk-6SYFG6YY.js";
+import "../../../chunk-GPZXD762.js";
+import "../../../chunk-BK74U562.js";
+import "../../../chunk-VFQD57ZY.js";
 import "../../../chunk-CRTRMMJ7.js";
 export {
   CopyButton,

package/dist/app/roleplay/chart/session-chart.cjs

@@ -0,0 +1,351 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/app/roleplay/chart/session-chart.tsx
+var session_chart_exports = {};
+__export(session_chart_exports, {
+  Chart: () => Chart,
+  useTokenColors: () => useTokenColors
+});
+module.exports = __toCommonJS(session_chart_exports);
+var import_react = require("react");
+var import_react_resize_detector = require("react-resize-detector");
+var echarts = __toESM(require("echarts/core"), 1);
+var ReactEChartsCoreNs = __toESM(require("echarts-for-react/lib/core"), 1);
+var import_charts = require("echarts/charts");
+var import_renderers = require("echarts/renderers");
+var import_components = require("echarts/components");
+
+// src/charts/horizontal-bar-chart.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/charts/chart-theme.json
+var chart_theme_default = {
+  version: 1,
+  themeName: "customed",
+  theme: {
+    seriesCnt: "5",
+    backgroundColor: "rgba(0,0,0,0)",
+    titleColor: "#1c2024",
+    subtitleColor: "#8d8d8d",
+    textColorShow: false,
+    textColor: "#333",
+    markTextColor: "#ffffff",
+    color: [
+      "#ffe629",
+      "#3e63dd",
+      "#ec9455",
+      "#5bb98b",
+      "#cb1d63",
+      "#3ba272",
+      "#fc8452",
+      "#9a60b4",
+      "#ea7ccc"
+    ],
+    borderColor: "#8d8d8d",
+    borderWidth: 0,
+    visualMapColor: ["#bf444c", "#d88273", "#f6efa6"],
+    legendTextColor: "#1c2024",
+    kColor: "#eb5454",
+    kColor0: "#47b262",
+    kBorderColor: "#eb5454",
+    kBorderColor0: "#47b262",
+    kBorderWidth: 1,
+    lineWidth: 2,
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    symbolBorderWidth: 1,
+    lineSmooth: false,
+    graphLineWidth: 1,
+    graphLineColor: "#aaa",
+    mapLabelColor: "#000",
+    mapLabelColorE: "rgb(100,0,0)",
+    mapBorderColor: "#444",
+    mapBorderColorE: "#444",
+    mapBorderWidth: 0.5,
+    mapBorderWidthE: 1,
+    mapAreaColor: "#eee",
+    mapAreaColorE: "rgba(255,215,0,0.8)",
+    axes: [
+      {
+        type: "all",
+        name: "\u901A\u7528\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "category",
+        name: "\u7C7B\u76EE\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: false,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "value",
+        name: "\u6570\u503C\u5750\u6807\u8F74",
+        axisLineShow: false,
+        axisLineColor: "#6E7079",
+        axisTickShow: false,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "log",
+        name: "\u5BF9\u6570\u5750\u6807\u8F74",
+        axisLineShow: false,
+        axisLineColor: "#6E7079",
+        axisTickShow: false,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "time",
+        name: "\u65F6\u95F4\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: false,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    ],
+    axisSeperateSetting: true,
+    toolboxColor: "#8d8d8d",
+    toolboxEmphasisColor: "#1c2024",
+    tooltipAxisColor: "#cccccc",
+    tooltipAxisWidth: 1,
+    timelineLineColor: "#dae1f5",
+    timelineLineWidth: 2,
+    timelineItemColor: "#a4b1d7",
+    timelineItemColorE: "#ffffff",
+    timelineCheckColor: "#316bf3",
+    timelineCheckBorderColor: "#ffffff",
+    timelineItemBorderWidth: 1,
+    timelineControlColor: "#a4b1d7",
+    timelineControlBorderColor: "#a4b1d7",
+    timelineControlBorderWidth: 1,
+    timelineLabelColor: "#a4b1d7"
+  }
+};
+
+// src/charts/chart-default-props.tsx
+var EchartDefaultProps = {
+  opts: { renderer: "svg" },
+  theme: chart_theme_default,
+  option: {
+    textStyle: { fontFamily: "Pretendard Variable" },
+    tooltip: { textStyle: { fontSize: 16 } }
+  }
+};
+
+// src/app/roleplay/chart/session-chart.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function unwrapDefault(mod) {
+  let current = mod;
+  while (current !== null && typeof current === "object" && "default" in current) {
+    current = current.default;
+  }
+  return current;
+}
+function isComponentType(value) {
+  return typeof value === "function";
+}
+var unwrappedChart = unwrapDefault(ReactEChartsCoreNs);
+var ReactEChartsCore = isComponentType(unwrappedChart) ? unwrappedChart : ReactEChartsCoreNs.default;
+echarts.use([
+  import_renderers.SVGRenderer,
+  import_charts.LineChart,
+  import_charts.RadarChart,
+  import_components.TooltipComponent,
+  import_components.GridComponent,
+  import_components.LegendComponent,
+  import_components.AriaComponent,
+  import_components.AxisPointerComponent,
+  import_components.PolarComponent,
+  import_components.RadarComponent
+]);
+function deepMerge(base, override) {
+  if (!override) return base;
+  if (typeof base !== "object" || !base || Array.isArray(base) || typeof override !== "object" || Array.isArray(override)) {
+    return override;
+  }
+  const out = __spreadValues({}, base);
+  for (const [k, v] of Object.entries(override)) {
+    out[k] = k in out ? deepMerge(out[k], v) : v;
+  }
+  return out;
+}
+function Chart(_a) {
+  var _b = _a, {
+    option: optionProp
+  } = _b, rest = __objRest(_b, [
+    "option"
+  ]);
+  const { width, height, ref } = (0, import_react_resize_detector.useResizeDetector)({
+    handleHeight: true,
+    refreshMode: "debounce",
+    refreshRate: 100
+  });
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const option = (0, import_react.useMemo)(() => {
+    const baseOption = {
+      textStyle: { fontFamily: "var(--default-font-family, 'Noto Sans KR')" },
+      tooltip: { textStyle: { fontSize: 13 } },
+      // ds-allow: chart-lib
+      animation: false
+    };
+    return deepMerge(baseOption, optionProp);
+  }, [optionProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, style: { width: "100%", height: "100%" }, children: mounted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ReactEChartsCore,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, EchartDefaultProps), {
+      echarts,
+      opts: { renderer: "svg" },
+      style: { height, width }
+    }), rest), {
+      option
+    })
+  ) : null });
+}
+function normalizeColor(value, fallback) {
+  const v = value.trim();
+  if (!v) return fallback;
+  if (/^#|^rgb|^hsl/i.test(v)) return v;
+  try {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return fallback;
+    ctx.fillStyle = "#000";
+    ctx.fillStyle = v;
+    const out = ctx.fillStyle;
+    return /color\(|^$/i.test(out) ? fallback : out;
+  } catch (e) {
+    return fallback;
+  }
+}
+function useTokenColors(vars) {
+  const probeRef = (0, import_react.useRef)(null);
+  const fallbacks = (0, import_react.useMemo)(() => {
+    const f = {};
+    for (const k of Object.keys(vars)) f[k] = vars[k][1];
+    return f;
+  }, [vars]);
+  const [resolved, setResolved] = (0, import_react.useState)(fallbacks);
+  const key = JSON.stringify(vars);
+  const varsRef = (0, import_react.useRef)(vars);
+  varsRef.current = vars;
+  (0, import_react.useEffect)(() => {
+    const el = probeRef.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    const next = {};
+    for (const k of Object.keys(varsRef.current)) {
+      const [cssVar, fallback] = varsRef.current[k];
+      next[k] = normalizeColor(cs.getPropertyValue(cssVar), fallback);
+    }
+    setResolved(next);
+  }, [key]);
+  const probe = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      "aria-hidden": true,
+      ref: probeRef,
+      style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }
+    }
+  );
+  return { colors: resolved, probe };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart,
+  useTokenColors
+});
+//# sourceMappingURL=session-chart.cjs.map

package/dist/app/roleplay/chart/session-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/app/roleplay/chart/session-chart.tsx","../../../../src/charts/horizontal-bar-chart.tsx","../../../../src/charts/chart-theme.json","../../../../src/charts/chart-default-props.tsx"],"sourcesContent":["'use client';\n\n// echarts 기반 Chart 래퍼 + 토큰 색 해석 훅.\n// echarts 본체/echarts-for-react/react-resize-detector 는 @tipp/ui 의 optional peerDependency.\n// 이 모듈은 subpath(@tipp/ui/roleplay)로만 노출되어 메인 번들에서 격리된다.\n// SSR 안전: echarts/ResizeObserver 는 클라이언트 전용이라 마운트 이후에만 렌더한다.\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport type { EChartsOption } from 'echarts';\nimport * as echarts from 'echarts/core';\nimport * as ReactEChartsCoreNs from 'echarts-for-react/lib/core';\nimport { LineChart, RadarChart } from 'echarts/charts';\nimport { SVGRenderer } from 'echarts/renderers';\nimport {\n  AxisPointerComponent,\n  AriaComponent,\n  TooltipComponent,\n  GridComponent,\n  LegendComponent,\n  PolarComponent,\n  RadarComponent,\n} from 'echarts/components';\nimport { EchartDefaultProps } from '../../../charts';\n\n// CJS/ESM interop 정규화.\n// echarts-for-react/lib/core 는 CJS(exports.default = 클래스)이고 @tipp/ui 는 strict ESM(\"type\":\"module\")\n// 이라, 번들러/런타임에 따라 실제 컴포넌트가 default 로 0~2 겹 감싸진다. 특히 webpack 이 __esModule 를\n// 무시하면 module.exports 를 한 번 더 감싸 ReactEChartsCoreNs.default.default 에 클래스가 들어가고,\n// 그대로 렌더하면 React 가 \"Element type is invalid (got: object)\" 로 던진다.\n// 함수(클래스/함수형 컴포넌트)가 나올 때까지 default 를 풀어 정규화한다.\ntype EChartsComponentType = typeof ReactEChartsCoreNs.default;\n\nfunction unwrapDefault(mod: unknown): unknown {\n  let current = mod;\n  while (current !== null && typeof current === 'object' && 'default' in current) {\n    current = current.default;\n  }\n  return current;\n}\n\nfunction isComponentType(value: unknown): value is EChartsComponentType {\n  return typeof value === 'function';\n}\n\nconst unwrappedChart = unwrapDefault(ReactEChartsCoreNs);\nconst ReactEChartsCore: EChartsComponentType = isComponentType(unwrappedChart)\n  ? unwrappedChart\n  : ReactEChartsCoreNs.default;\n\necharts.use([\n  SVGRenderer,\n  LineChart,\n  RadarChart,\n  TooltipComponent,\n  GridComponent,\n  LegendComponent,\n  AriaComponent,\n  AxisPointerComponent,\n  PolarComponent,\n  RadarComponent,\n]);\n\n// base/option 깊은 병합 (배열은 option 우선)\nfunction deepMerge<T>(base: T, override: unknown): T {\n  if (!override) return base;\n  if (\n    typeof base !== 'object' ||\n    !base ||\n    Array.isArray(base) ||\n    typeof override !== 'object' ||\n    Array.isArray(override)\n  ) {\n    return override as T;\n  }\n  const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };\n  for (const [k, v] of Object.entries(override as Record<string, unknown>)) {\n    out[k] = k in out ? deepMerge(out[k], v) : v;\n  }\n  return out as T;\n}\n\nexport type ChartProps = Omit<\n  React.ComponentProps<typeof ReactEChartsCore>,\n  'option' | 'echarts'\n> & {\n  option: EChartsOption;\n};\n\nexport function Chart({\n  option: optionProp,\n  ...rest\n}: ChartProps): React.ReactElement {\n  const { width, height, ref } = useResizeDetector({\n    handleHeight: true,\n    refreshMode: 'debounce',\n    refreshRate: 100,\n  });\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const option = useMemo(() => {\n    const baseOption: EChartsOption = {\n      textStyle: { fontFamily: \"var(--default-font-family, 'Noto Sans KR')\" },\n      tooltip: { textStyle: { fontSize: 13 } }, // ds-allow: chart-lib\n      animation: false,\n    };\n    return deepMerge(baseOption, optionProp);\n  }, [optionProp]);\n\n  return (\n    <div ref={ref} style={{ width: '100%', height: '100%' }}>\n      {mounted ? (\n        <ReactEChartsCore\n          {...EchartDefaultProps}\n          echarts={echarts}\n          opts={{ renderer: 'svg' }}\n          style={{ height, width }}\n          {...rest}\n          option={option}\n        />\n      ) : null}\n    </div>\n  );\n}\n\n// 임의의 CSS 색 문자열을 echarts(zrender)가 파싱 가능한 rgb(a)로 정규화한다.\nfunction normalizeColor(value: string, fallback: string): string {\n  const v = value.trim();\n  if (!v) return fallback;\n  if (/^#|^rgb|^hsl/i.test(v)) return v;\n  try {\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return fallback;\n    ctx.fillStyle = '#000';\n    ctx.fillStyle = v;\n    const out = ctx.fillStyle;\n    return /color\\(|^$/i.test(out) ? fallback : out;\n  } catch {\n    return fallback;\n  }\n}\n\n// @tipp/ui 토큰(CSS 변수)을 echarts 가 먹을 수 있는 실제 색 문자열로 해석하는 훅.\nexport function useTokenColors<K extends string>(\n  vars: Record<K, [cssVar: string, fallback: string]>\n): {\n  colors: Record<K, string>;\n  probe: React.ReactNode;\n} {\n  const probeRef = useRef<HTMLSpanElement | null>(null);\n  const fallbacks = useMemo(() => {\n    const f = {} as Record<K, string>;\n    for (const k of Object.keys(vars) as K[]) f[k] = vars[k][1];\n    return f;\n  }, [vars]);\n  const [resolved, setResolved] = useState<Record<K, string>>(fallbacks);\n  const key = JSON.stringify(vars);\n  // vars 객체는 매 렌더 새 참조라 deps에 직접 넣을 수 없어 ref로 최신값을 참조하고,\n  // 실제 변경 추적은 직렬화한 key 로 한다.\n  const varsRef = useRef(vars);\n  varsRef.current = vars;\n  useEffect(() => {\n    const el = probeRef.current;\n    if (!el) return;\n    const cs = getComputedStyle(el);\n    const next = {} as Record<K, string>;\n    for (const k of Object.keys(varsRef.current) as K[]) {\n      const [cssVar, fallback] = varsRef.current[k];\n      next[k] = normalizeColor(cs.getPropertyValue(cssVar), fallback);\n    }\n    setResolved(next);\n  }, [key]);\n  const probe = (\n    <span\n      aria-hidden\n      ref={probeRef}\n      style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}\n    />\n  );\n  return { colors: resolved, probe };\n}\n","import React from 'react';\n\nexport interface HorizontalBarChartProps {\n  /** 100% 바가 뜻하는 전체 값 */\n  total: number;\n  /** 화면에 채워져보이는 값 */\n  value: number;\n  /** 배경 색상 */\n  backgroundColor?: string;\n  /** 바의 색상 */\n  barColor?: string;\n  /** 바의 높이 */\n  height?: number;\n  /**\n   * 바의 모서리 둥글기. 숫자는 px로 처리된다.\n   * 생략 시 완전히 둥근 형태(pill), `0`이면 완전 사각형.\n   */\n  borderRadius?: number | string;\n}\n\nexport function HorizontalBarChart(\n  props: HorizontalBarChartProps\n): React.ReactNode {\n  const { total, value, backgroundColor, barColor, height, borderRadius } =\n    props;\n  return (\n    <div\n      className=\"tipp_horizontal-bar-chart bar-wrapper\"\n      style={{ height, backgroundColor, borderRadius }}\n    >\n      <div\n        style={{\n          width: `${Math.round((value / total) * 100)}%`,\n          height: '100%',\n        }}\n      >\n        <div className=\"bar\" style={{ backgroundColor: barColor }} />\n      </div>\n    </div>\n  );\n}\n","{\n  \"version\": 1,\n  \"themeName\": \"customed\",\n  \"theme\": {\n    \"seriesCnt\": \"5\",\n    \"backgroundColor\": \"rgba(0,0,0,0)\",\n    \"titleColor\": \"#1c2024\",\n    \"subtitleColor\": \"#8d8d8d\",\n    \"textColorShow\": false,\n    \"textColor\": \"#333\",\n    \"markTextColor\": \"#ffffff\",\n    \"color\": [\n      \"#ffe629\",\n      \"#3e63dd\",\n      \"#ec9455\",\n      \"#5bb98b\",\n      \"#cb1d63\",\n      \"#3ba272\",\n      \"#fc8452\",\n      \"#9a60b4\",\n      \"#ea7ccc\"\n    ],\n    \"borderColor\": \"#8d8d8d\",\n    \"borderWidth\": 0,\n    \"visualMapColor\": [\"#bf444c\", \"#d88273\", \"#f6efa6\"],\n    \"legendTextColor\": \"#1c2024\",\n    \"kColor\": \"#eb5454\",\n    \"kColor0\": \"#47b262\",\n    \"kBorderColor\": \"#eb5454\",\n    \"kBorderColor0\": \"#47b262\",\n    \"kBorderWidth\": 1,\n    \"lineWidth\": 2,\n    \"symbolSize\": 4,\n    \"symbol\": \"emptyCircle\",\n    \"symbolBorderWidth\": 1,\n    \"lineSmooth\": false,\n    \"graphLineWidth\": 1,\n    \"graphLineColor\": \"#aaa\",\n    \"mapLabelColor\": \"#000\",\n    \"mapLabelColorE\": \"rgb(100,0,0)\",\n    \"mapBorderColor\": \"#444\",\n    \"mapBorderColorE\": \"#444\",\n    \"mapBorderWidth\": 0.5,\n    \"mapBorderWidthE\": 1,\n    \"mapAreaColor\": \"#eee\",\n    \"mapAreaColorE\": \"rgba(255,215,0,0.8)\",\n    \"axes\": [\n      {\n        \"type\": \"all\",\n        \"name\": \"通用坐标轴\",\n        \"axisLineShow\": true,\n        \"axisLineColor\": \"#6E7079\",\n        \"axisTickShow\": true,\n        \"axisTickColor\": \"#6E7079\",\n        \"axisLabelShow\": true,\n        \"axisLabelColor\": \"#6E7079\",\n        \"splitLineShow\": true,\n        \"splitLineColor\": [\"#E0E6F1\"],\n        \"splitAreaShow\": false,\n        \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n      },\n      {\n        \"type\": \"category\",\n        \"name\": \"类目坐标轴\",\n        \"axisLineShow\": true,\n        \"axisLineColor\": \"#6E7079\",\n        \"axisTickShow\": true,\n        \"axisTickColor\": \"#6E7079\",\n        \"axisLabelShow\": true,\n        \"axisLabelColor\": \"#6E7079\",\n        \"splitLineShow\": false,\n        \"splitLineColor\": [\"#E0E6F1\"],\n        \"splitAreaShow\": false,\n        \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n      },\n      {\n        \"type\": \"value\",\n        \"name\": \"数值坐标轴\",\n        \"axisLineShow\": false,\n        \"axisLineColor\": \"#6E7079\",\n        \"axisTickShow\": false,\n        \"axisTickColor\": \"#6E7079\",\n        \"axisLabelShow\": true,\n        \"axisLabelColor\": \"#6E7079\",\n        \"splitLineShow\": true,\n        \"splitLineColor\": [\"#E0E6F1\"],\n        \"splitAreaShow\": false,\n        \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n      },\n      {\n        \"type\": \"log\",\n        \"name\": \"对数坐标轴\",\n        \"axisLineShow\": false,\n        \"axisLineColor\": \"#6E7079\",\n        \"axisTickShow\": false,\n        \"axisTickColor\": \"#6E7079\",\n        \"axisLabelShow\": true,\n        \"axisLabelColor\": \"#6E7079\",\n        \"splitLineShow\": true,\n        \"splitLineColor\": [\"#E0E6F1\"],\n        \"splitAreaShow\": false,\n        \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n      },\n      {\n        \"type\": \"time\",\n        \"name\": \"时间坐标轴\",\n        \"axisLineShow\": true,\n        \"axisLineColor\": \"#6E7079\",\n        \"axisTickShow\": true,\n        \"axisTickColor\": \"#6E7079\",\n        \"axisLabelShow\": true,\n        \"axisLabelColor\": \"#6E7079\",\n        \"splitLineShow\": false,\n        \"splitLineColor\": [\"#E0E6F1\"],\n        \"splitAreaShow\": false,\n        \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n      }\n    ],\n    \"axisSeperateSetting\": true,\n    \"toolboxColor\": \"#8d8d8d\",\n    \"toolboxEmphasisColor\": \"#1c2024\",\n    \"tooltipAxisColor\": \"#cccccc\",\n    \"tooltipAxisWidth\": 1,\n    \"timelineLineColor\": \"#dae1f5\",\n    \"timelineLineWidth\": 2,\n    \"timelineItemColor\": \"#a4b1d7\",\n    \"timelineItemColorE\": \"#ffffff\",\n    \"timelineCheckColor\": \"#316bf3\",\n    \"timelineCheckBorderColor\": \"#ffffff\",\n    \"timelineItemBorderWidth\": 1,\n    \"timelineControlColor\": \"#a4b1d7\",\n    \"timelineControlBorderColor\": \"#a4b1d7\",\n    \"timelineControlBorderWidth\": 1,\n    \"timelineLabelColor\": \"#a4b1d7\"\n  }\n}\n","import chartTheme from './chart-theme.json';\n\nexport const EchartDefaultProps = {\n  opts: { renderer: 'svg' as const },\n  theme: chartTheme,\n  option: {\n    textStyle: { fontFamily: 'Pretendard Variable' },\n    tooltip: { textStyle: { fontSize: 16 } },\n  },\n} as const;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/app/roleplay/chart/session-chart.d.cts

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { EChartsOption } from 'echarts';
+import * as ReactEChartsCoreNs from 'echarts-for-react/lib/core';
+
+type EChartsComponentType = typeof ReactEChartsCoreNs.default;
+declare const ReactEChartsCore: EChartsComponentType;
+type ChartProps = Omit<React__default.ComponentProps<typeof ReactEChartsCore>, 'option' | 'echarts'> & {
+    option: EChartsOption;
+};
+declare function Chart({ option: optionProp, ...rest }: ChartProps): React__default.ReactElement;
+declare function useTokenColors<K extends string>(vars: Record<K, [cssVar: string, fallback: string]>): {
+    colors: Record<K, string>;
+    probe: React__default.ReactNode;
+};
+
+export { Chart, type ChartProps, useTokenColors };

package/dist/app/roleplay/chart/session-chart.d.ts

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { EChartsOption } from 'echarts';
+import * as ReactEChartsCoreNs from 'echarts-for-react/lib/core';
+
+type EChartsComponentType = typeof ReactEChartsCoreNs.default;
+declare const ReactEChartsCore: EChartsComponentType;
+type ChartProps = Omit<React__default.ComponentProps<typeof ReactEChartsCore>, 'option' | 'echarts'> & {
+    option: EChartsOption;
+};
+declare function Chart({ option: optionProp, ...rest }: ChartProps): React__default.ReactElement;
+declare function useTokenColors<K extends string>(vars: Record<K, [cssVar: string, fallback: string]>): {
+    colors: Record<K, string>;
+    probe: React__default.ReactNode;
+};
+
+export { Chart, type ChartProps, useTokenColors };

package/dist/app/roleplay/chart/session-chart.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  Chart,
+  useTokenColors
+} from "../../../chunk-UXAEOCOH.js";
+import "../../../chunk-PSINRHYW.js";
+import "../../../chunk-WSWSAPSS.js";
+import "../../../chunk-RXK3JM34.js";
+import "../../../chunk-CRTRMMJ7.js";
+export {
+  Chart,
+  useTokenColors
+};
+//# sourceMappingURL=session-chart.js.map