@tipp/ui 2.8.0 → 2.10.0

package/dist/chunk-36W7VD2Z.js

@@ -0,0 +1,13 @@
+// src/utils/clamp-style.ts
+var clampStyle = (lines) => ({
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: lines,
+  lineClamp: lines,
+  overflow: "hidden"
+});
+
+export {
+  clampStyle
+};
+//# sourceMappingURL=chunk-36W7VD2Z.js.map

package/dist/chunk-36W7VD2Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/clamp-style.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * 여러 줄 말줄임(line-clamp) 스타일. 지정한 줄 수까지만 표시하고 넘치면 `…`로 자른다.\n *\n * Radix의 `truncate`(white-space:nowrap 강제 1줄)와 달리, 줄바꿈을 허용한 뒤\n * `lines` 줄에서 자른다. `Typo`/`Heading`의 `clamp` prop 구현에 사용된다.\n *\n * @param lines - 표시할 최대 줄 수 (1, 2, 3 …)\n */\nexport const clampStyle = (lines: number): CSSProperties => ({\n  display: '-webkit-box',\n  WebkitBoxOrient: 'vertical',\n  WebkitLineClamp: lines,\n  lineClamp: lines,\n  overflow: 'hidden',\n});\n"],"mappings":";AAUO,IAAM,aAAa,CAAC,WAAkC;AAAA,EAC3D,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,UAAU;AACZ;","names":[]}

package/dist/{chunk-7XMPNH2X.js → chunk-3DZIX4CE.js}

@@ -18,24 +18,24 @@ import {
 import {
   Select
 } from "./chunk-YXMB4MCM.js";
-import {
-  IconButton
-} from "./chunk-7RJYF5L3.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Checkbox
 } from "./chunk-ZCGH6TJ3.js";
+import {
+  IconButton
+} from "./chunk-7RJYF5L3.js";
 import {
   Typo
-} from "./chunk-YXFHD2PY.js";
+} from "./chunk-L4QQGIYQ.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
 import {
   Button
 } from "./chunk-2LCH3PDF.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -686,4 +686,4 @@ function DynamicFormEditorFieldEditorPanel(props) {
 export {
   DynamicFormEditorFieldEditorPanel
 };
-//# sourceMappingURL=chunk-7XMPNH2X.js.map
+//# sourceMappingURL=chunk-3DZIX4CE.js.map

package/dist/chunk-3UGBMKSQ.js

@@ -0,0 +1,166 @@
+import {
+  ScriptTranscript
+} from "./chunk-EHDUKUML.js";
+import {
+  computeSpeechShare,
+  isLengthClose
+} from "./chunk-4YAA25AV.js";
+import {
+  Tabs
+} from "./chunk-CGDBUDY3.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Dialog
+} from "./chunk-KDS7OQOY.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  __async
+} from "./chunk-CRTRMMJ7.js";
+
+// src/app/roleplay/parts/session-replay-dialog.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveUrl(raw, disp, resolver) {
+  return __async(this, null, function* () {
+    if (!raw) return void 0;
+    if (!resolver) return raw;
+    try {
+      return yield resolver(raw, { disposition: disp });
+    } catch (e) {
+      return raw;
+    }
+  });
+}
+function SessionReplayDialog({
+  open,
+  onOpenChange,
+  detail,
+  script,
+  onResolveMediaUrl
+}) {
+  var _a, _b, _c;
+  const videoRef = useRef(null);
+  const audioRef = useRef(null);
+  const hasVideo = Boolean(detail.trainingVideoURL);
+  const hasAudio = Boolean(detail.trainingAudioURL);
+  const [tab, setTab] = useState(hasVideo ? "video" : "audio");
+  const [currentMs, setCurrentMs] = useState(0);
+  const [videoSec, setVideoSec] = useState((_a = detail.videoDurationSec) != null ? _a : null);
+  const [audioSec, setAudioSec] = useState((_b = detail.audioDurationSec) != null ? _b : null);
+  const [resolvedVideoUrl, setResolvedVideoUrl] = useState(void 0);
+  const [resolvedAudioUrl, setResolvedAudioUrl] = useState(void 0);
+  useEffect(() => {
+    if (!open) return;
+    void resolveUrl(detail.trainingVideoURL, "inline", onResolveMediaUrl).then(
+      setResolvedVideoUrl
+    );
+    void resolveUrl(detail.trainingAudioURL, "inline", onResolveMediaUrl).then(
+      setResolvedAudioUrl
+    );
+  }, [open, detail.trainingVideoURL, detail.trainingAudioURL, onResolveMediaUrl]);
+  const lines = useMemo(() => {
+    var _a2;
+    return (_a2 = script == null ? void 0 : script.items) != null ? _a2 : [];
+  }, [script == null ? void 0 : script.items]);
+  const speechShare = useMemo(() => computeSpeechShare(lines), [lines]);
+  const sttSec = ((_c = script == null ? void 0 : script.durationMs) != null ? _c : 0) / 1e3;
+  const canSync = tab === "video" ? hasVideo && isLengthClose(videoSec, sttSec) : hasAudio && isLengthClose(audioSec, sttSec);
+  const activeMediaRef = tab === "video" ? videoRef : audioRef;
+  const handleSeek = (startMs) => {
+    if (!canSync) return;
+    const el = activeMediaRef.current;
+    if (!el) return;
+    el.currentTime = startMs / 1e3;
+    void el.play();
+  };
+  const handleTimeUpdate = () => {
+    const el = activeMediaRef.current;
+    if (el) {
+      setCurrentMs(el.currentTime * 1e3);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { onOpenChange, open, children: /* @__PURE__ */ jsx(Dialog.Content, { maxWidth: "1040px", title: "\uC138\uC158 \uB2E4\uC2DC\uBCF4\uAE30", width: "100%", children: /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      columns: { initial: "1", md: "minmax(0, 1fr) minmax(0, 1.05fr)" },
+      gap: "5",
+      mt: "2",
+      children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+          Tabs.Root,
+          {
+            onValueChange: (v) => {
+              setTab(v);
+            },
+            value: tab,
+            children: [
+              /* @__PURE__ */ jsxs(Tabs.List, { children: [
+                hasVideo ? /* @__PURE__ */ jsx(Tabs.Trigger, { value: "video", children: "\uC601\uC0C1" }) : null,
+                hasAudio ? /* @__PURE__ */ jsx(Tabs.Trigger, { value: "audio", children: "\uC624\uB514\uC624" }) : null
+              ] }),
+              hasVideo ? /* @__PURE__ */ jsx(Tabs.Content, { value: "video", children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  mt: "3",
+                  style: {
+                    borderRadius: "var(--radius-3)",
+                    overflow: "hidden",
+                    background: "var(--gray-3)"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      controls: true,
+                      onLoadedMetadata: () => {
+                        var _a2, _b2;
+                        setVideoSec((_b2 = (_a2 = videoRef.current) == null ? void 0 : _a2.duration) != null ? _b2 : null);
+                      },
+                      onTimeUpdate: handleTimeUpdate,
+                      ref: videoRef,
+                      src: resolvedVideoUrl,
+                      style: { width: "100%", display: "block", maxHeight: 440 }
+                    }
+                  )
+                }
+              ) }) : null,
+              hasAudio ? /* @__PURE__ */ jsx(Tabs.Content, { value: "audio", children: /* @__PURE__ */ jsx(Box, { mt: "3", children: /* @__PURE__ */ jsx(
+                "audio",
+                {
+                  controls: true,
+                  onLoadedMetadata: () => {
+                    var _a2, _b2;
+                    setAudioSec((_b2 = (_a2 = audioRef.current) == null ? void 0 : _a2.duration) != null ? _b2 : null);
+                  },
+                  onTimeUpdate: handleTimeUpdate,
+                  ref: audioRef,
+                  src: resolvedAudioUrl,
+                  style: { width: "100%" }
+                }
+              ) }) }) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ScriptTranscript,
+          {
+            canSync,
+            currentMs,
+            lines,
+            onSeek: handleSeek,
+            partnerName: detail.characterTitle,
+            speechShare
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+export {
+  SessionReplayDialog
+};
+//# sourceMappingURL=chunk-3UGBMKSQ.js.map

package/dist/chunk-3UGBMKSQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/roleplay/parts/session-replay-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Box, Dialog, Grid, Tabs } from '../../../atoms';\nimport { computeSpeechShare, isLengthClose } from '../utils/session-utils';\nimport type { RpSessionDetailData, RpSessionScript } from '../types';\nimport { ScriptTranscript } from './script-transcript';\n\nexport interface SessionReplayDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  detail: RpSessionDetailData;\n  script?: RpSessionScript | null;\n  onResolveMediaUrl?: (\n    rawUrl: string,\n    options: { disposition: 'inline' | 'attachment' }\n  ) => string | Promise<string>;\n}\n\ntype ReplayTab = 'video' | 'audio';\n\nasync function resolveUrl(\n  raw: string | null | undefined,\n  disp: 'inline' | 'attachment',\n  resolver?: (rawUrl: string, options: { disposition: 'inline' | 'attachment' }) => string | Promise<string>\n): Promise<string | undefined> {\n  if (!raw) return undefined;\n  if (!resolver) return raw;\n  try {\n    return await resolver(raw, { disposition: disp });\n  } catch {\n    return raw;\n  }\n}\n\nexport function SessionReplayDialog({\n  open,\n  onOpenChange,\n  detail,\n  script,\n  onResolveMediaUrl,\n}: SessionReplayDialogProps): React.ReactElement {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const hasVideo = Boolean(detail.trainingVideoURL);\n  const hasAudio = Boolean(detail.trainingAudioURL);\n\n  const [tab, setTab] = useState<ReplayTab>(hasVideo ? 'video' : 'audio');\n  const [currentMs, setCurrentMs] = useState(0);\n  const [videoSec, setVideoSec] = useState<number | null>(detail.videoDurationSec ?? null);\n  const [audioSec, setAudioSec] = useState<number | null>(detail.audioDurationSec ?? null);\n\n  const [resolvedVideoUrl, setResolvedVideoUrl] = useState<string | undefined>(undefined);\n  const [resolvedAudioUrl, setResolvedAudioUrl] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!open) return;\n    void resolveUrl(detail.trainingVideoURL, 'inline', onResolveMediaUrl).then(\n      setResolvedVideoUrl\n    );\n    void resolveUrl(detail.trainingAudioURL, 'inline', onResolveMediaUrl).then(\n      setResolvedAudioUrl\n    );\n  }, [open, detail.trainingVideoURL, detail.trainingAudioURL, onResolveMediaUrl]);\n\n  const lines = useMemo(() => script?.items ?? [], [script?.items]);\n  const speechShare = useMemo(() => computeSpeechShare(lines), [lines]);\n  const sttSec = (script?.durationMs ?? 0) / 1000;\n\n  const canSync =\n    tab === 'video'\n      ? hasVideo && isLengthClose(videoSec, sttSec)\n      : hasAudio && isLengthClose(audioSec, sttSec);\n\n  const activeMediaRef = tab === 'video' ? videoRef : audioRef;\n\n  const handleSeek = (startMs: number): void => {\n    if (!canSync) return;\n    const el = activeMediaRef.current;\n    if (!el) return;\n    el.currentTime = startMs / 1000;\n    void el.play();\n  };\n\n  const handleTimeUpdate = (): void => {\n    const el = activeMediaRef.current;\n    if (el) {\n      setCurrentMs(el.currentTime * 1000);\n    }\n  };\n\n  return (\n    <Dialog.Root onOpenChange={onOpenChange} open={open}>\n      <Dialog.Content maxWidth=\"1040px\" title=\"세션 다시보기\" width=\"100%\">\n        <Grid\n          columns={{ initial: '1', md: 'minmax(0, 1fr) minmax(0, 1.05fr)' }}\n          gap=\"5\"\n          mt=\"2\"\n        >\n          <Box>\n            <Tabs.Root\n              onValueChange={(v) => {\n                setTab(v as ReplayTab);\n              }}\n              value={tab}\n            >\n              <Tabs.List>\n                {hasVideo ? <Tabs.Trigger value=\"video\">영상</Tabs.Trigger> : null}\n                {hasAudio ? <Tabs.Trigger value=\"audio\">오디오</Tabs.Trigger> : null}\n              </Tabs.List>\n              {hasVideo ? (\n                <Tabs.Content value=\"video\">\n                  <Box\n                    mt=\"3\"\n                    style={{\n                      borderRadius: 'var(--radius-3)',\n                      overflow: 'hidden',\n                      background: 'var(--gray-3)',\n                    }}\n                  >\n                    {/* eslint-disable-next-line jsx-a11y/media-has-caption -- 학습 다시보기 영상은 자막 트랙이 없는 사용자 녹화본 */}\n                    <video\n                      controls\n                      onLoadedMetadata={() => {\n                        setVideoSec(videoRef.current?.duration ?? null);\n                      }}\n                      onTimeUpdate={handleTimeUpdate}\n                      ref={videoRef}\n                      src={resolvedVideoUrl}\n                      style={{ width: '100%', display: 'block', maxHeight: 440 }}\n                    />\n                  </Box>\n                </Tabs.Content>\n              ) : null}\n              {hasAudio ? (\n                <Tabs.Content value=\"audio\">\n                  <Box mt=\"3\">\n                    {/* eslint-disable-next-line jsx-a11y/media-has-caption -- 학습 다시보기 오디오는 자막 트랙이 없는 사용자 녹음본 */}\n                    <audio\n                      controls\n                      onLoadedMetadata={() => {\n                        setAudioSec(audioRef.current?.duration ?? null);\n                      }}\n                      onTimeUpdate={handleTimeUpdate}\n                      ref={audioRef}\n                      src={resolvedAudioUrl}\n                      style={{ width: '100%' }}\n                    />\n                  </Box>\n                </Tabs.Content>\n              ) : null}\n            </Tabs.Root>\n          </Box>\n\n          <ScriptTranscript\n            canSync={canSync}\n            currentMs={currentMs}\n            lines={lines}\n            onSeek={handleSeek}\n            partnerName={detail.characterTitle}\n            speechShare={speechShare}\n          />\n        </Grid>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/{chunk-XFFVIWAD.js → chunk-47QYYEMG.js}

@@ -1,6 +1,6 @@
 import {
   curriculum_item_title_default
-} from "./chunk-C5CEDLV6.js";
+} from "./chunk-QLOYGKKM.js";
 import {
   getCurriculumContentSubTypeText,
   getCurriculumIcon
@@ -26,4 +26,4 @@ var section_item_default = SectionCommonItem;
 export {
   section_item_default
 };
-//# sourceMappingURL=chunk-XFFVIWAD.js.map
+//# sourceMappingURL=chunk-47QYYEMG.js.map

package/dist/{chunk-VVJEXKCB.js → chunk-4GH4R4VJ.js}

@@ -1,24 +1,24 @@
 import {
   DatePickerButton
-} from "./chunk-6JPGF4MB.js";
+} from "./chunk-AT5PAJLW.js";
 import {
   Form
-} from "./chunk-77YN5S26.js";
+} from "./chunk-AELKCD6B.js";
 import {
   TextArea
 } from "./chunk-5XYPLDI5.js";
 import {
   TextField
 } from "./chunk-6NPTJBFE.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
 import {
   Button
 } from "./chunk-2LCH3PDF.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   __spreadValues
 } from "./chunk-CRTRMMJ7.js";
@@ -142,4 +142,4 @@ function GoalManageCardEdit(props) {
 export {
   GoalManageCardEdit
 };
-//# sourceMappingURL=chunk-VVJEXKCB.js.map
+//# sourceMappingURL=chunk-4GH4R4VJ.js.map

package/dist/chunk-4YAA25AV.js

@@ -0,0 +1,161 @@
+// src/app/roleplay/utils/session-utils.ts
+import { format } from "date-fns";
+var COLOR_VARS = {
+  green: {
+    fg: "var(--green-11)",
+    bg: "var(--green-a3)",
+    border: "var(--green-a6)"
+  },
+  amber: {
+    fg: "var(--amber-11)",
+    bg: "var(--amber-a3)",
+    border: "var(--amber-a6)"
+  },
+  red: { fg: "var(--red-11)", bg: "var(--red-a3)", border: "var(--red-a6)" },
+  gray: { fg: "var(--gray-9)", bg: "var(--gray-a3)", border: "var(--gray-5)" }
+};
+function qualityColor(quality) {
+  switch (quality) {
+    case "\uCDA9\uC871":
+      return "green";
+    case "\uBD80\uBD84\uCDA9\uC871":
+      return "amber";
+    case "\uBBF8\uD761":
+      return "red";
+    default:
+      return "gray";
+  }
+}
+var QUALITY_RATIO = {
+  \uCDA9\uC871: 1,
+  \uBD80\uBD84\uCDA9\uC871: 0.6,
+  \uBBF8\uD761: 0.3
+};
+function qualityRatio(quality) {
+  return quality === null ? null : QUALITY_RATIO[quality];
+}
+function gradeColorFromLabel(label) {
+  if (!label) return "gray";
+  if (label.includes("\uBBF8\uD761") || label.includes("\uBD80\uC871") || label.includes("\uBBF8\uB2EC"))
+    return "red";
+  if (label.includes("\uBD80\uBD84") || label.includes("\uBCF4\uD1B5")) return "amber";
+  if (label.includes("\uCDA9\uC871") || label.includes("\uC6B0\uC218") || label.includes("\uCDA9\uBD84"))
+    return "green";
+  return "gray";
+}
+function stepColor(step) {
+  return step.quality !== null ? qualityColor(step.quality) : gradeColorFromLabel(step.qualityLabel);
+}
+function stepVars(step) {
+  return COLOR_VARS[stepColor(step)];
+}
+function stepRatio(step) {
+  if (step.maxScore !== null && step.maxScore > 0 && step.score !== null) {
+    return Math.max(0, Math.min(1, step.score / step.maxScore));
+  }
+  return qualityRatio(step.quality);
+}
+function stepScoreText(step) {
+  if (step.score === null) return null;
+  return step.maxScore !== null ? `${step.score}/${step.maxScore}` : `${step.score}`;
+}
+function stepGradeLabel(step) {
+  return step.qualityLabel;
+}
+function hasStepSignal(step) {
+  return step.score !== null || step.qualityLabel !== null;
+}
+var LETTER_RE = /[A-Za-z]/;
+function stepCode(step) {
+  if (step.initial !== null && step.initial.trim().length > 0) {
+    return step.initial.trim();
+  }
+  const label = step.label.trim();
+  const first = label.charAt(0);
+  const second = label.charAt(1);
+  if (LETTER_RE.test(first) && (second === " " || second === "\u2014" || second === "-")) {
+    return first.toUpperCase();
+  }
+  if (first === "[" && LETTER_RE.test(second) && label.charAt(2) === "]") {
+    return second.toUpperCase();
+  }
+  return step.key.split("_")[0].slice(0, 4).toUpperCase();
+}
+function formatDuration(seconds) {
+  if (seconds === null) return "\u2014";
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}\uBD84 ${String(s).padStart(2, "0")}\uCD08`;
+}
+function formatDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return format(d, "M/d HH:mm");
+}
+function formatTimestamp(ms) {
+  const total = Math.floor(ms / 1e3);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+var SYNC_TOLERANCE = 0.05;
+function isLengthClose(mediaSec, sttSec) {
+  if (!mediaSec || mediaSec <= 0 || sttSec <= 0) {
+    return false;
+  }
+  return Math.abs(mediaSec - sttSec) / Math.max(mediaSec, sttSec) <= SYNC_TOLERANCE;
+}
+var SPEECH_OVERTALK_THRESHOLD = 40;
+function computeSpeechShare(lines) {
+  let userChars = 0;
+  let partnerChars = 0;
+  for (const line of lines) {
+    const count = line.text.replace(/\s/g, "").length;
+    if (line.speaker === "user") {
+      userChars += count;
+    } else {
+      partnerChars += count;
+    }
+  }
+  const total = userChars + partnerChars;
+  if (total === 0) {
+    return null;
+  }
+  const userPct = Math.round(userChars / total * 100);
+  return { userPct, partnerPct: 100 - userPct };
+}
+var STATUS_LABEL = {
+  complete: "\uBD84\uC11D \uC644\uB8CC",
+  completed: "\uBD84\uC11D \uC644\uB8CC",
+  analyzing: "AI \uBD84\uC11D \uC911",
+  partial: "\uC77C\uBD80 \uC0B0\uCD9C\uBB3C \uC5C6\uC74C"
+};
+function statusLabelOf(status) {
+  var _a;
+  if (!status) return "\uC138\uC158";
+  return (_a = STATUS_LABEL[status]) != null ? _a : status;
+}
+
+export {
+  COLOR_VARS,
+  qualityColor,
+  QUALITY_RATIO,
+  qualityRatio,
+  gradeColorFromLabel,
+  stepColor,
+  stepVars,
+  stepRatio,
+  stepScoreText,
+  stepGradeLabel,
+  hasStepSignal,
+  stepCode,
+  formatDuration,
+  formatDate,
+  formatTimestamp,
+  SYNC_TOLERANCE,
+  isLengthClose,
+  SPEECH_OVERTALK_THRESHOLD,
+  computeSpeechShare,
+  statusLabelOf
+};
+//# sourceMappingURL=chunk-4YAA25AV.js.map

package/dist/chunk-4YAA25AV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/roleplay/utils/session-utils.ts"],"sourcesContent":["// 롤플레잉 세션 상세 순수 유틸 함수 모음.\n// 원본: website/src/modules/customer/roleplay/pages/RpSessionDetail/RpSessionDetail.tsx\n// 'use client' 없음 — 순수 함수, 클라이언트 전용 아님.\n\nimport { format } from 'date-fns';\nimport type { RpSessionScriptLine } from '../types';\nimport type { RpQuality, RpReportStep } from './report-parse';\n\n/* ───────────────────────── 타입 ───────────────────────── */\n\nexport interface SpeechShare { userPct: number; partnerPct: number }\n\nexport type QColor = 'green' | 'amber' | 'red' | 'gray';\n\n/* ───────────────────────── 색 변수 ───────────────────────── */\n\nexport const COLOR_VARS: Record<QColor, { fg: string; bg: string; border: string }> = {\n  green: {\n    fg: 'var(--green-11)',\n    bg: 'var(--green-a3)',\n    border: 'var(--green-a6)',\n  },\n  amber: {\n    fg: 'var(--amber-11)',\n    bg: 'var(--amber-a3)',\n    border: 'var(--amber-a6)',\n  },\n  red: { fg: 'var(--red-11)', bg: 'var(--red-a3)', border: 'var(--red-a6)' },\n  gray: { fg: 'var(--gray-9)', bg: 'var(--gray-a3)', border: 'var(--gray-5)' },\n};\n\n/* ───────────────────────── 등급 색 ───────────────────────── */\n\nexport function qualityColor(quality: RpQuality | null): QColor {\n  switch (quality) {\n    case '충족':\n      return 'green';\n    case '부분충족':\n      return 'amber';\n    case '미흡':\n      return 'red';\n    default:\n      return 'gray';\n  }\n}\n\nexport const QUALITY_RATIO: Record<RpQuality, number> = {\n  충족: 1,\n  부분충족: 0.6,\n  미흡: 0.3,\n} as const;\n\nexport function qualityRatio(quality: RpQuality | null): number | null {\n  return quality === null ? null : QUALITY_RATIO[quality];\n}\n\n// 표준 등급이 아닌 자유 등급 문자열에서 색만 키워드로 추정(비율은 산출하지 않음).\nexport function gradeColorFromLabel(label: string | null): QColor {\n  if (!label) return 'gray';\n  if (\n    label.includes('미흡') ||\n    label.includes('부족') ||\n    label.includes('미달')\n  )\n    return 'red';\n  if (label.includes('부분') || label.includes('보통')) return 'amber';\n  if (\n    label.includes('충족') ||\n    label.includes('우수') ||\n    label.includes('충분')\n  )\n    return 'green';\n  return 'gray';\n}\n\n/* ───────────────────────── 단계(Step) 헬퍼 ───────────────────────── */\n\n// 단계 색: 표준 등급 우선, 없으면 라벨 키워드 추정.\nexport function stepColor(step: RpReportStep): QColor {\n  return step.quality !== null\n    ? qualityColor(step.quality)\n    : gradeColorFromLabel(step.qualityLabel);\n}\n\nexport function stepVars(step: RpReportStep): { fg: string; bg: string; border: string } {\n  return COLOR_VARS[stepColor(step)];\n}\n\n// progress/radar 정규화 비율(0~1). score/maxScore 우선, 없으면 표준 등급 비율, 둘 다 없으면 null.\nexport function stepRatio(step: RpReportStep): number | null {\n  if (step.maxScore !== null && step.maxScore > 0 && step.score !== null) {\n    return Math.max(0, Math.min(1, step.score / step.maxScore));\n  }\n  return qualityRatio(step.quality);\n}\n\n// 점수 텍스트: max 있으면 'score/max', 없으면 'score', score 없으면 null.\nexport function stepScoreText(step: RpReportStep): string | null {\n  if (step.score === null) return null;\n  return step.maxScore !== null\n    ? `${step.score}/${step.maxScore}`\n    : `${step.score}`;\n}\n\n// 표시할 등급 라벨(자유 문자열 포함). 없으면 null.\nexport function stepGradeLabel(step: RpReportStep): string | null {\n  return step.qualityLabel;\n}\n\n// 단계에 표시할 평가 정보가 하나라도 있는지(점수 또는 등급).\nexport function hasStepSignal(step: RpReportStep): boolean {\n  return step.score !== null || step.qualityLabel !== null;\n}\n\n// radar 축/요약 라벨용 짧은 코드.\n// displayMeta.steps.initial 이 지정돼 있으면 최우선(이니셜 충돌 해소).\n// 없으면 기존 휴리스틱: acronym 프레임워크는 선두 글자, 아니면 키 약식.\nconst LETTER_RE = /[A-Za-z]/;\n\nexport function stepCode(step: RpReportStep): string {\n  if (step.initial !== null && step.initial.trim().length > 0) {\n    return step.initial.trim();\n  }\n  const label = step.label.trim();\n  const first = label.charAt(0);\n  const second = label.charAt(1);\n  // \"O — Opening\" / \"O - Opening\" / \"O Opening\" 형태\n  if (\n    LETTER_RE.test(first) &&\n    (second === ' ' || second === '—' || second === '-')\n  ) {\n    return first.toUpperCase();\n  }\n  // \"[I] Introduction\" 형태\n  if (first === '[' && LETTER_RE.test(second) && label.charAt(2) === ']') {\n    return second.toUpperCase();\n  }\n  return step.key.split('_')[0].slice(0, 4).toUpperCase();\n}\n\n/* ───────────────────────── 포맷 유틸 ───────────────────────── */\n\nexport function formatDuration(seconds: number | null): string {\n  if (seconds === null) return '—';\n  const m = Math.floor(seconds / 60);\n  const s = seconds % 60;\n  return `${m}분 ${String(s).padStart(2, '0')}초`;\n}\n\nexport function formatDate(iso: string): string {\n  const d = new Date(iso);\n  if (Number.isNaN(d.getTime())) return iso;\n  return format(d, 'M/d HH:mm');\n}\n\nexport function formatTimestamp(ms: number): string {\n  const total = Math.floor(ms / 1000);\n  const m = Math.floor(total / 60);\n  const s = total % 60;\n  return `${m}:${String(s).padStart(2, '0')}`;\n}\n\n/* ───────────────────────── 미디어 싱크 ───────────────────────── */\n\n// 미디어 길이와 STT 길이가 이 비율 이내로 가까우면 싱크(클릭 seek/재생 하이라이트) 활성.\nexport const SYNC_TOLERANCE = 0.05;\n\nexport function isLengthClose(mediaSec: number | null, sttSec: number): boolean {\n  if (!mediaSec || mediaSec <= 0 || sttSec <= 0) {\n    return false;\n  }\n  return (\n    Math.abs(mediaSec - sttSec) / Math.max(mediaSec, sttSec) <= SYNC_TOLERANCE\n  );\n}\n\n/* ───────────────────────── 발화량 ───────────────────────── */\n\n// 내 발화량이 이 비율을 넘으면 과다 발화로 간주(빨간 막대 + 주의 문구).\nexport const SPEECH_OVERTALK_THRESHOLD = 40;\n\n// 화자별 발화량 비율. 기준은 공백·개행 제거 글자 수(실제 말한 양에 근접, 공백 패턴 왜곡 방지).\n// 발화 글자가 전혀 없으면 null → 미표시.\nexport function computeSpeechShare(lines: RpSessionScriptLine[]): SpeechShare | null {\n  let userChars = 0;\n  let partnerChars = 0;\n  for (const line of lines) {\n    const count = line.text.replace(/\\s/g, '').length;\n    if (line.speaker === 'user') {\n      userChars += count;\n    } else {\n      partnerChars += count;\n    }\n  }\n  const total = userChars + partnerChars;\n  if (total === 0) {\n    return null;\n  }\n  const userPct = Math.round((userChars / total) * 100);\n  return { userPct, partnerPct: 100 - userPct };\n}\n\n/* ───────────────────────── 세션 상태 ───────────────────────── */\n\nconst STATUS_LABEL: Record<string, string> = {\n  complete: '분석 완료',\n  completed: '분석 완료',\n  analyzing: 'AI 분석 중',\n  partial: '일부 산출물 없음',\n};\n\nexport function statusLabelOf(status: string | null): string {\n  if (!status) return '세션';\n  return STATUS_LABEL[status] ?? status;\n}\n"],"mappings":";AAIA,SAAS,cAAc;AAYhB,IAAM,aAAyE;AAAA,EACpF,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,EACV;AAAA,EACA,KAAK,EAAE,IAAI,iBAAiB,IAAI,iBAAiB,QAAQ,gBAAgB;AAAA,EACzE,MAAM,EAAE,IAAI,iBAAiB,IAAI,kBAAkB,QAAQ,gBAAgB;AAC7E;AAIO,SAAS,aAAa,SAAmC;AAC9D,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,gBAA2C;AAAA,EACtD,cAAI;AAAA,EACJ,0BAAM;AAAA,EACN,cAAI;AACN;AAEO,SAAS,aAAa,SAA0C;AACrE,SAAO,YAAY,OAAO,OAAO,cAAc,OAAO;AACxD;AAGO,SAAS,oBAAoB,OAA8B;AAChE,MAAI,CAAC,MAAO,QAAO;AACnB,MACE,MAAM,SAAS,cAAI,KACnB,MAAM,SAAS,cAAI,KACnB,MAAM,SAAS,cAAI;AAEnB,WAAO;AACT,MAAI,MAAM,SAAS,cAAI,KAAK,MAAM,SAAS,cAAI,EAAG,QAAO;AACzD,MACE,MAAM,SAAS,cAAI,KACnB,MAAM,SAAS,cAAI,KACnB,MAAM,SAAS,cAAI;AAEnB,WAAO;AACT,SAAO;AACT;AAKO,SAAS,UAAU,MAA4B;AACpD,SAAO,KAAK,YAAY,OACpB,aAAa,KAAK,OAAO,IACzB,oBAAoB,KAAK,YAAY;AAC3C;AAEO,SAAS,SAAS,MAAgE;AACvF,SAAO,WAAW,UAAU,IAAI,CAAC;AACnC;AAGO,SAAS,UAAU,MAAmC;AAC3D,MAAI,KAAK,aAAa,QAAQ,KAAK,WAAW,KAAK,KAAK,UAAU,MAAM;AACtE,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,QAAQ,CAAC;AAAA,EAC5D;AACA,SAAO,aAAa,KAAK,OAAO;AAClC;AAGO,SAAS,cAAc,MAAmC;AAC/D,MAAI,KAAK,UAAU,KAAM,QAAO;AAChC,SAAO,KAAK,aAAa,OACrB,GAAG,KAAK,KAAK,IAAI,KAAK,QAAQ,KAC9B,GAAG,KAAK,KAAK;AACnB;AAGO,SAAS,eAAe,MAAmC;AAChE,SAAO,KAAK;AACd;AAGO,SAAS,cAAc,MAA6B;AACzD,SAAO,KAAK,UAAU,QAAQ,KAAK,iBAAiB;AACtD;AAKA,IAAM,YAAY;AAEX,SAAS,SAAS,MAA4B;AACnD,MAAI,KAAK,YAAY,QAAQ,KAAK,QAAQ,KAAK,EAAE,SAAS,GAAG;AAC3D,WAAO,KAAK,QAAQ,KAAK;AAAA,EAC3B;AACA,QAAM,QAAQ,KAAK,MAAM,KAAK;AAC9B,QAAM,QAAQ,MAAM,OAAO,CAAC;AAC5B,QAAM,SAAS,MAAM,OAAO,CAAC;AAE7B,MACE,UAAU,KAAK,KAAK,MACnB,WAAW,OAAO,WAAW,YAAO,WAAW,MAChD;AACA,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,MAAI,UAAU,OAAO,UAAU,KAAK,MAAM,KAAK,MAAM,OAAO,CAAC,MAAM,KAAK;AACtE,WAAO,OAAO,YAAY;AAAA,EAC5B;AACA,SAAO,KAAK,IAAI,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,YAAY;AACxD;AAIO,SAAS,eAAe,SAAgC;AAC7D,MAAI,YAAY,KAAM,QAAO;AAC7B,QAAM,IAAI,KAAK,MAAM,UAAU,EAAE;AACjC,QAAM,IAAI,UAAU;AACpB,SAAO,GAAG,CAAC,UAAK,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAC5C;AAEO,SAAS,WAAW,KAAqB;AAC9C,QAAM,IAAI,IAAI,KAAK,GAAG;AACtB,MAAI,OAAO,MAAM,EAAE,QAAQ,CAAC,EAAG,QAAO;AACtC,SAAO,OAAO,GAAG,WAAW;AAC9B;AAEO,SAAS,gBAAgB,IAAoB;AAClD,QAAM,QAAQ,KAAK,MAAM,KAAK,GAAI;AAClC,QAAM,IAAI,KAAK,MAAM,QAAQ,EAAE;AAC/B,QAAM,IAAI,QAAQ;AAClB,SAAO,GAAG,CAAC,IAAI,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAC3C;AAKO,IAAM,iBAAiB;AAEvB,SAAS,cAAc,UAAyB,QAAyB;AAC9E,MAAI,CAAC,YAAY,YAAY,KAAK,UAAU,GAAG;AAC7C,WAAO;AAAA,EACT;AACA,SACE,KAAK,IAAI,WAAW,MAAM,IAAI,KAAK,IAAI,UAAU,MAAM,KAAK;AAEhE;AAKO,IAAM,4BAA4B;AAIlC,SAAS,mBAAmB,OAAkD;AACnF,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,aAAW,QAAQ,OAAO;AACxB,UAAM,QAAQ,KAAK,KAAK,QAAQ,OAAO,EAAE,EAAE;AAC3C,QAAI,KAAK,YAAY,QAAQ;AAC3B,mBAAa;AAAA,IACf,OAAO;AACL,sBAAgB;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,YAAY;AAC1B,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,EACT;AACA,QAAM,UAAU,KAAK,MAAO,YAAY,QAAS,GAAG;AACpD,SAAO,EAAE,SAAS,YAAY,MAAM,QAAQ;AAC9C;AAIA,IAAM,eAAuC;AAAA,EAC3C,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,SAAS,cAAc,QAA+B;AAnN7D;AAoNE,MAAI,CAAC,OAAQ,QAAO;AACpB,UAAO,kBAAa,MAAM,MAAnB,YAAwB;AACjC;","names":[]}

package/dist/{chunk-MTESLX7K.js → chunk-5IGBFB67.js}

@@ -7,33 +7,30 @@ import {
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
+import {
+  Collapse
+} from "./chunk-NFDQJVFA.js";
 import {
   Heading
-} from "./chunk-YIVIBIK2.js";
+} from "./chunk-USGOLLYO.js";
 import {
   IconButton
 } from "./chunk-7RJYF5L3.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
-import {
-  Collapse
-} from "./chunk-NFDQJVFA.js";
-import {
-  Badge
-} from "./chunk-BK74U562.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
 import {
   Typo
-} from "./chunk-YXFHD2PY.js";
+} from "./chunk-L4QQGIYQ.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
 import {
   Button
 } from "./chunk-2LCH3PDF.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -41,6 +38,9 @@ import {
   RocketIcon,
   TrashIcon
 } from "./chunk-VOME2TE7.js";
+import {
+  Badge
+} from "./chunk-BK74U562.js";
 import {
   __spreadValues
 } from "./chunk-CRTRMMJ7.js";
@@ -162,4 +162,4 @@ function GoalManageCardRead(props) {
 export {
   GoalManageCardRead
 };
-//# sourceMappingURL=chunk-MTESLX7K.js.map
+//# sourceMappingURL=chunk-5IGBFB67.js.map

package/dist/chunk-5QIT4URV.js

@@ -0,0 +1,87 @@
+import {
+  stepCode,
+  stepGradeLabel,
+  stepRatio,
+  stepScoreText
+} from "./chunk-4YAA25AV.js";
+import {
+  Chart,
+  useTokenColors
+} from "./chunk-UXAEOCOH.js";
+
+// src/app/roleplay/parts/step-radar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StepRadar({ steps }) {
+  const { colors, probe } = useTokenColors({
+    accent: ["--accent-9", "#5b5bd6"],
+    grid: ["--gray-5", "#e0e0e0"],
+    label: ["--gray-11", "#646464"]
+  });
+  const indicator = steps.map((s) => ({ name: stepCode(s), max: 1 }));
+  const values = steps.map((s) => {
+    var _a;
+    return (_a = stepRatio(s)) != null ? _a : 0;
+  });
+  const option = {
+    tooltip: {
+      trigger: "item",
+      formatter: () => steps.map(
+        (s) => {
+          var _a, _b;
+          return `${stepCode(s)} ${(_b = (_a = stepScoreText(s)) != null ? _a : stepGradeLabel(s)) != null ? _b : "\u2014"}`;
+        }
+      ).join("<br/>")
+    },
+    radar: {
+      indicator,
+      radius: "66%",
+      center: ["50%", "50%"],
+      splitNumber: 4,
+      axisName: { color: colors.label, fontSize: 10, fontWeight: "bold" },
+      // ds-allow: chart-lib
+      splitLine: { lineStyle: { color: colors.grid } },
+      splitArea: { show: false },
+      axisLine: { lineStyle: { color: colors.grid } }
+    },
+    series: [
+      {
+        type: "radar",
+        data: [
+          {
+            value: values,
+            name: "\uC774\uBC88 \uC138\uC158",
+            areaStyle: { color: colors.accent, opacity: 0.18 },
+            lineStyle: { color: colors.accent, width: 2 },
+            itemStyle: { color: colors.accent },
+            symbolSize: 4
+          }
+        ]
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "\uD3C9\uAC00 \uB2E8\uACC4 \uB808\uC774\uB354 \uCC28\uD2B8",
+      role: "img",
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minWidth: 0,
+        overflow: "hidden"
+      },
+      children: [
+        probe,
+        /* @__PURE__ */ jsx("div", { style: { width: "100%", maxWidth: 300, height: 280 }, children: /* @__PURE__ */ jsx(Chart, { option }) })
+      ]
+    }
+  );
+}
+
+export {
+  StepRadar
+};
+//# sourceMappingURL=chunk-5QIT4URV.js.map

package/dist/chunk-5QIT4URV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/roleplay/parts/step-radar.tsx"],"sourcesContent":["'use client';\n\nimport type { EChartsOption } from 'echarts';\nimport type { RpReportStep } from '../utils/report-parse';\nimport { stepCode, stepGradeLabel, stepRatio, stepScoreText } from '../utils/session-utils';\nimport { Chart, useTokenColors } from '../chart/session-chart';\n\nexport interface StepRadarProps {\n  steps: RpReportStep[];\n}\n\nexport function StepRadar({ steps }: StepRadarProps): React.ReactElement {\n  const { colors, probe } = useTokenColors({\n    accent: ['--accent-9', '#5b5bd6'],\n    grid: ['--gray-5', '#e0e0e0'],\n    label: ['--gray-11', '#646464'],\n  });\n\n  const indicator = steps.map((s) => ({ name: stepCode(s), max: 1 }));\n  const values = steps.map((s) => stepRatio(s) ?? 0);\n\n  const option: EChartsOption = {\n    tooltip: {\n      trigger: 'item',\n      formatter: () =>\n        steps\n          .map(\n            (s) =>\n              `${stepCode(s)} ${stepScoreText(s) ?? stepGradeLabel(s) ?? '—'}`\n          )\n          .join('<br/>'),\n    },\n    radar: {\n      indicator,\n      radius: '66%',\n      center: ['50%', '50%'],\n      splitNumber: 4,\n      axisName: { color: colors.label, fontSize: 10, fontWeight: 'bold' }, // ds-allow: chart-lib\n      splitLine: { lineStyle: { color: colors.grid } },\n      splitArea: { show: false },\n      axisLine: { lineStyle: { color: colors.grid } },\n    },\n    series: [\n      {\n        type: 'radar',\n        data: [\n          {\n            value: values,\n            name: '이번 세션',\n            areaStyle: { color: colors.accent, opacity: 0.18 },\n            lineStyle: { color: colors.accent, width: 2 },\n            itemStyle: { color: colors.accent },\n            symbolSize: 4,\n          },\n        ],\n      },\n    ],\n  };\n\n  return (\n    <div\n      aria-label=\"평가 단계 레이더 차트\"\n      role=\"img\"\n      style={{\n        position: 'relative',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100%',\n        minWidth: 0,\n        overflow: 'hidden',\n      }}\n    >\n      {probe}\n      <div style={{ width: '100%', maxWidth: 300, height: 280 }}>\n        <Chart option={option} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA4DI,SAeI,KAfJ;AAjDG,SAAS,UAAU,EAAE,MAAM,GAAuC;AACvE,QAAM,EAAE,QAAQ,MAAM,IAAI,eAAe;AAAA,IACvC,QAAQ,CAAC,cAAc,SAAS;AAAA,IAChC,MAAM,CAAC,YAAY,SAAS;AAAA,IAC5B,OAAO,CAAC,aAAa,SAAS;AAAA,EAChC,CAAC;AAED,QAAM,YAAY,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM,SAAS,CAAC,GAAG,KAAK,EAAE,EAAE;AAClE,QAAM,SAAS,MAAM,IAAI,CAAC,MAAG;AAnB/B;AAmBkC,2BAAU,CAAC,MAAX,YAAgB;AAAA,GAAC;AAEjD,QAAM,SAAwB;AAAA,IAC5B,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW,MACT,MACG;AAAA,QACC,CAAC,MAAG;AA3BhB;AA4Bc,oBAAG,SAAS,CAAC,CAAC,KAAI,yBAAc,CAAC,MAAf,YAAoB,eAAe,CAAC,MAApC,YAAyC,QAAG;AAAA;AAAA,MAClE,EACC,KAAK,OAAO;AAAA,IACnB;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ,CAAC,OAAO,KAAK;AAAA,MACrB,aAAa;AAAA,MACb,UAAU,EAAE,OAAO,OAAO,OAAO,UAAU,IAAI,YAAY,OAAO;AAAA;AAAA,MAClE,WAAW,EAAE,WAAW,EAAE,OAAO,OAAO,KAAK,EAAE;AAAA,MAC/C,WAAW,EAAE,MAAM,MAAM;AAAA,MACzB,UAAU,EAAE,WAAW,EAAE,OAAO,OAAO,KAAK,EAAE;AAAA,IAChD;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,UACJ;AAAA,YACE,OAAO;AAAA,YACP,MAAM;AAAA,YACN,WAAW,EAAE,OAAO,OAAO,QAAQ,SAAS,KAAK;AAAA,YACjD,WAAW,EAAE,OAAO,OAAO,QAAQ,OAAO,EAAE;AAAA,YAC5C,WAAW,EAAE,OAAO,OAAO,OAAO;AAAA,YAClC,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAO;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,MAEC;AAAA;AAAA,QACD,oBAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,UAAU,KAAK,QAAQ,IAAI,GACtD,8BAAC,SAAM,QAAgB,GACzB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-LXL7GJUM.js → chunk-5RIAIE2J.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-FR2GDOU2.js";
 import {
   Pagination
-} from "./chunk-5SXTL6NO.js";
+} from "./chunk-RWJUXAFY.js";
 import {
   Typo
-} from "./chunk-YXFHD2PY.js";
+} from "./chunk-L4QQGIYQ.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
@@ -234,4 +234,4 @@ export {
   createColumnHelper,
   ExpandTable
 };
-//# sourceMappingURL=chunk-LXL7GJUM.js.map
+//# sourceMappingURL=chunk-5RIAIE2J.js.map

package/dist/{chunk-R43F6ZWT.js → chunk-64DSUMXA.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk-ZPUNTAVI.js";
 import {
   Heading
-} from "./chunk-YIVIBIK2.js";
+} from "./chunk-USGOLLYO.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -54,4 +54,4 @@ function SessionUserInfoDetail({
 export {
   SessionUserInfoDetail
 };
-//# sourceMappingURL=chunk-R43F6ZWT.js.map
+//# sourceMappingURL=chunk-64DSUMXA.js.map