@pylerai/design-system 2.3.1-rc.1 → 2.5.0

package/dist/components/ui/table.js

@@ -7,27 +7,27 @@ import { Checkbox as C } from "./checkbox.js";
 const S = {
   borderRight: "3px solid var(--ds-line-normal)"
 }, j = f.forwardRef(
-  ({ className: l, ...r }, n) => /* @__PURE__ */ a(
+  ({ className: i, ...r }, n) => /* @__PURE__ */ a(
     "div",
     {
       ref: n,
       role: "table",
-      className: g("w-full overflow-x-auto", l),
+      className: g("w-full overflow-x-auto", i),
       ...r
     }
   )
 );
 j.displayName = "TableRoot";
 const L = f.forwardRef(
-  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
+  (i, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...i })
 );
 L.displayName = "TableHead";
 const R = f.forwardRef(
-  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
+  (i, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...i })
 );
 R.displayName = "TableBody";
 const N = f.forwardRef(
-  ({ className: l, hoverable: r = !0, selected: n, ...i }, s) => /* @__PURE__ */ a(
+  ({ className: i, hoverable: r = !0, selected: n, ...l }, s) => /* @__PURE__ */ a(
     "div",
     {
       ref: s,
@@ -37,43 +37,43 @@ const N = f.forwardRef(
         "flex items-stretch w-full",
         r && "hover:bg-ds-surface-strong",
         n && "bg-ds-surface-normal",
-        l
+        i
       ),
-      ...i
+      ...l
     }
   )
 );
 N.displayName = "TableRow";
 const k = f.forwardRef(
   ({
-    className: l,
+    className: i,
     children: r,
     sortable: n,
-    sortDirection: i,
+    sortDirection: l,
     onSort: s,
     info: d,
     fixedLine: m,
     align: h = "left",
-    width: p,
-    style: b,
+    width: b,
+    style: p,
     ...y
   }, c) => {
-    const v = n && i != null;
+    const v = n && l != null;
     return /* @__PURE__ */ x(
       "div",
       {
         ref: c,
         role: "columnheader",
         tabIndex: n ? 0 : void 0,
-        "aria-sort": n ? i === "asc" ? "ascending" : i === "desc" ? "descending" : "none" : void 0,
+        "aria-sort": n ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
         className: g(
-          "flex h-10 items-center gap-1 border-t border-ds-line-normal bg-ds-surface-normal px-3 py-2.5",
-          p ? "shrink-0" : "flex-1 min-w-0",
+          "flex h-10 items-center gap-1 border-b border-ds-line-normal bg-ds-surface-alternative px-3 py-2.5",
+          b ? "shrink-0" : "flex-1 min-w-0",
           h === "right" && "justify-end",
           n && "cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
-          l
+          i
         ),
-        style: { width: p, ...m ? S : {}, ...b },
+        style: { width: b, ...m ? S : {}, ...p },
         onClick: n ? s : void 0,
         onKeyDown: n ? (u) => {
           (u.key === "Enter" || u.key === " ") && (u.preventDefault(), s?.());
@@ -88,7 +88,7 @@ const k = f.forwardRef(
               className: g(
                 "shrink-0 transition-transform duration-150",
                 v ? "text-ds-text-strong" : "text-ds-text-disabled",
-                i === "asc" && "rotate-180"
+                l === "asc" && "rotate-180"
               )
             }
           )
@@ -99,18 +99,18 @@ const k = f.forwardRef(
 );
 k.displayName = "TableHeaderCell";
 const T = f.forwardRef(
-  ({ className: l, align: r = "left", fixedLine: n, width: i, style: s, children: d, ...m }, h) => /* @__PURE__ */ a(
+  ({ className: i, align: r = "left", fixedLine: n, width: l, style: s, children: d, ...m }, h) => /* @__PURE__ */ a(
     "div",
     {
       ref: h,
       role: "cell",
       className: g(
         "flex items-center border-b border-ds-line-normal px-3 py-2",
-        i ? "shrink-0" : "flex-1 min-w-0",
+        l ? "shrink-0" : "flex-1 min-w-0",
         r === "right" && "justify-end",
-        l
+        i
       ),
-      style: { width: i, ...n ? S : {}, ...s },
+      style: { width: l, ...n ? S : {}, ...s },
       ...m,
       children: d
     }
@@ -118,21 +118,21 @@ const T = f.forwardRef(
 );
 T.displayName = "TableCell";
 function Y({
-  columns: l,
+  columns: i,
   data: r,
   sortKey: n,
-  sortDirection: i,
+  sortDirection: l,
   onSort: s,
   selectedRows: d,
   onRowSelect: m,
   onSelectAll: h,
-  getRowKey: p,
-  onRowClick: b,
+  getRowKey: b,
+  onRowClick: p,
   className: y
 }) {
   const c = d !== void 0, v = c && r.length > 0 && d.length === r.length, u = c && d.length > 0 && d.length < r.length, E = (e) => {
     if (!s) return;
-    s(e, n === e && i === "asc" ? "desc" : "asc");
+    s(e, n === e && l === "asc" ? "desc" : "asc");
   };
   return /* @__PURE__ */ x(j, { className: y, children: [
     /* @__PURE__ */ a(L, { children: /* @__PURE__ */ x(N, { hoverable: !1, children: [
@@ -145,11 +145,11 @@ function Y({
           onChange: (e) => h?.(e)
         }
       ) }),
-      l.map((e) => /* @__PURE__ */ a(
+      i.map((e) => /* @__PURE__ */ a(
         k,
         {
           sortable: e.sortable,
-          sortDirection: e.sortable && n === e.key ? i ?? null : null,
+          sortDirection: e.sortable && n === e.key ? l ?? null : null,
           onSort: () => E(e.key),
           info: e.info,
           fixedLine: e.fixedLine,
@@ -161,13 +161,13 @@ function Y({
       ))
     ] }) }),
     /* @__PURE__ */ a(R, { children: r.map((e, o) => {
-      const H = p ? p(e, o) : o, w = c && d.includes(o);
+      const H = b ? b(e, o) : o, w = c && d.includes(o);
       return /* @__PURE__ */ x(
         N,
         {
           selected: w,
-          onClick: b ? () => b(e, o) : void 0,
-          className: b ? "cursor-pointer" : void 0,
+          onClick: p ? () => p(e, o) : void 0,
+          className: p ? "cursor-pointer" : void 0,
           children: [
             c && /* @__PURE__ */ a(T, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ a(
               C,
@@ -178,7 +178,7 @@ function Y({
                 onClick: (t) => t.stopPropagation()
               }
             ) }),
-            l.map((t) => /* @__PURE__ */ a(
+            i.map((t) => /* @__PURE__ */ a(
               T,
               {
                 align: t.align,

package/dist/components/ui/tabs.js

@@ -1,55 +1,54 @@
 "use client";
 import { jsx as h } from "react/jsx-runtime";
 import { cn as T } from "../../lib/utils.js";
-import * as o from "react";
-const $ = o.createContext(null);
+import * as s from "react";
+const $ = s.createContext(null);
 function C() {
-  const e = o.useContext($);
+  const e = s.useContext($);
   if (!e) throw new Error("TabsTrigger must be used within Tabs");
   return e;
 }
-const A = o.forwardRef(
+const A = s.forwardRef(
   ({
     value: e,
     defaultValue: t = "",
-    onValueChange: l,
-    variant: a = "underline",
+    onValueChange: d,
+    variant: l = "underline",
     children: f,
-    className: x
-  }, b) => {
-    const [u, p] = o.useState(t), g = e !== void 0, i = g ? e : u, m = o.useId(), [w, n] = o.useState(() => /* @__PURE__ */ new Set()), y = o.useCallback((c) => (n((d) => {
-      if (d.has(c)) return d;
-      const r = new Set(d);
-      return r.add(c), r;
-    }), () => n((d) => {
-      if (!d.has(c)) return d;
-      const r = new Set(d);
-      return r.delete(c), r;
+    className: b
+  }, x) => {
+    const [u, p] = s.useState(t), g = e !== void 0, i = g ? e : u, m = s.useId(), [w, r] = s.useState(() => /* @__PURE__ */ new Set()), y = s.useCallback((c) => (r((a) => {
+      if (a.has(c)) return a;
+      const n = new Set(a);
+      return n.add(c), n;
+    }), () => r((a) => {
+      if (!a.has(c)) return a;
+      const n = new Set(a);
+      return n.delete(c), n;
     })), []), k = (c) => {
-      g || p(c), l?.(c);
-    }, s = o.useMemo(
-      () => ({ value: i, onValueChange: k, variant: a, baseId: m, panels: w, registerPanel: y }),
+      g || p(c), d?.(c);
+    }, o = s.useMemo(
+      () => ({ value: i, onValueChange: k, variant: l, baseId: m, panels: w, registerPanel: y }),
       // handleChange 는 렌더마다 새로 만들어지지만 참조하는 값이 아래 의존성에 모두 들어 있다
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [i, g, l, a, m, w, y]
+      [i, g, d, l, m, w, y]
     );
-    return /* @__PURE__ */ h($.Provider, { value: s, children: /* @__PURE__ */ h("div", { ref: b, className: T("flex flex-col", x), children: f }) });
+    return /* @__PURE__ */ h($.Provider, { value: o, children: /* @__PURE__ */ h("div", { ref: x, className: T("flex flex-col", b), children: f }) });
   }
 );
 A.displayName = "Tabs";
-const R = o.forwardRef(
-  ({ children: e, className: t }, l) => {
-    const { variant: a } = C();
+const R = s.forwardRef(
+  ({ children: e, className: t }, d) => {
+    const { variant: l } = C();
     return /* @__PURE__ */ h(
       "div",
       {
-        ref: l,
+        ref: d,
         role: "tablist",
         className: T(
-          "flex items-center",
-          a === "underline" && "gap-5",
-          a === "outline" && "gap-1",
-          a === "round" && "bg-ds-surface-strong p-1 rounded-ds-md",
+          // 탭 아이템 간격은 모든 변형 공통 32px
+          "flex items-center gap-8",
+          l === "round" && "bg-ds-surface-strong p-1 rounded-ds-md",
           t
         ),
         children: e
@@ -58,17 +57,17 @@ const R = o.forwardRef(
   }
 );
 R.displayName = "TabsList";
-const P = o.forwardRef(
-  ({ value: e, disabled: t, children: l, className: a, onClick: f, onKeyDown: x, ...b }, u) => {
-    const { value: p, onValueChange: g, variant: i, baseId: m, panels: w } = C(), n = p === e, y = w.has(e), k = (s) => {
-      if (x?.(s), s.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(s.key)) return;
-      const d = s.currentTarget.closest('[role="tablist"]'), r = Array.from(
-        d?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
+const P = s.forwardRef(
+  ({ value: e, disabled: t, children: d, className: l, onClick: f, onKeyDown: b, ...x }, u) => {
+    const { value: p, onValueChange: g, variant: i, baseId: m, panels: w } = C(), r = p === e, y = w.has(e), k = (o) => {
+      if (b?.(o), o.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(o.key)) return;
+      const a = o.currentTarget.closest('[role="tablist"]'), n = Array.from(
+        a?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
       );
-      if (r.length === 0) return;
-      s.preventDefault();
-      const I = r.indexOf(s.currentTarget), N = s.key === "Home" ? 0 : s.key === "End" ? r.length - 1 : s.key === "ArrowRight" ? (I + 1 + r.length) % r.length : (I - 1 + r.length) % r.length;
-      r[N].focus(), r[N].click();
+      if (n.length === 0) return;
+      o.preventDefault();
+      const I = n.indexOf(o.currentTarget), N = o.key === "Home" ? 0 : o.key === "End" ? n.length - 1 : o.key === "ArrowRight" ? (I + 1 + n.length) % n.length : (I - 1 + n.length) % n.length;
+      n[N].focus(), n[N].click();
     };
     return /* @__PURE__ */ h(
       "button",
@@ -77,64 +76,72 @@ const P = o.forwardRef(
         role: "tab",
         type: "button",
         id: `${m}-tab-${e}`,
-        "aria-selected": n,
+        "aria-selected": r,
         "aria-controls": y ? `${m}-panel-${e}` : void 0,
-        tabIndex: n ? 0 : -1,
+        tabIndex: r ? 0 : -1,
         disabled: t,
-        onClick: (s) => {
-          t || g(e), f?.(s);
+        onClick: (o) => {
+          t || g(e), f?.(o);
         },
         onKeyDown: k,
         className: T(
-          "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-colors focus-visible:outline-none",
+          "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-[color,background-color,border-color,box-shadow] focus-visible:outline-none",
+          // 선택되지 않은 탭(비활성 포함)은 모든 변형 공통 14 Regular. 선택된 탭의 글씨는 변형별로 아래에서 정한다
+          !r && "text-body-2-r",
           i === "underline" && [
-            "h-11 text-body-2-sb",
-            n && !t && "border-b-2 border-ds-text-strong text-ds-text-strong",
-            !n && !t && "text-ds-text-normal",
+            // 밑줄 자리(2px)를 모든 탭에 투명하게 깔아 둔다. 선택 탭에만 테두리가 있으면
+            // 같은 h-11 안에서 글자가 1px 위로 밀려 선택 탭만 떠 보인다
+            "h-11 border-b-2 border-transparent",
+            r && "text-body-2-sb",
+            r && !t && "border-ds-text-strong text-ds-text-strong",
+            !r && !t && "text-ds-text-normal",
             t && "text-ds-text-disabled cursor-not-allowed"
           ],
           i === "box" && [
-            "h-10 px-3 rounded-ds-md text-body-3-m",
-            n && !t && "bg-ds-surface-normal text-ds-text-strong",
-            !n && !t && "bg-ds-background-default text-ds-text-normal",
+            "h-10 px-3 rounded-ds-md",
+            r && "text-body-3-m",
+            r && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !r && !t && "bg-ds-background-default text-ds-text-normal",
             t && "bg-ds-background-default text-ds-text-disabled cursor-not-allowed"
           ],
           i === "outline" && [
-            "h-8 px-3 rounded-full text-body-4-m",
-            n && !t && "bg-ds-surface-normal text-ds-text-strong",
-            !n && !t && "bg-ds-background-default border border-ds-line-normal text-ds-text-normal",
+            "h-8 px-3 rounded-full",
+            r && "text-body-4-m",
+            r && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !r && !t && "bg-ds-background-default border border-ds-line-normal text-ds-text-normal",
             t && "bg-ds-background-default border border-ds-line-normal text-ds-text-disabled cursor-not-allowed"
           ],
           i === "round" && [
-            "h-7 px-2.5 rounded text-body-4-r",
-            n && !t && "bg-ds-surface-alternative text-ds-text-strong",
-            !n && !t && "bg-ds-surface-strong text-ds-text-normal",
+            "h-7 px-2.5 rounded",
+            r && "text-body-4-m",
+            r && !t && "bg-ds-surface-alternative text-ds-text-strong shadow-ds-default",
+            !r && !t && "bg-ds-surface-strong text-ds-text-normal",
             t && "bg-ds-surface-strong text-ds-text-disabled cursor-not-allowed"
           ],
-          a
+          l
         ),
-        ...b,
-        children: l
+        ...x,
+        children: d
       }
     );
   }
 );
 P.displayName = "TabsTrigger";
-const S = o.forwardRef(
-  ({ value: e, children: t, className: l }, a) => {
-    const { value: f, baseId: x, registerPanel: b } = C(), u = f === e;
-    return o.useEffect(() => {
+const S = s.forwardRef(
+  ({ value: e, children: t, className: d }, l) => {
+    const { value: f, baseId: b, registerPanel: x } = C(), u = f === e;
+    return s.useEffect(() => {
       if (u)
-        return b(e);
-    }, [u, e, b]), u ? /* @__PURE__ */ h(
+        return x(e);
+    }, [u, e, x]), u ? /* @__PURE__ */ h(
       "div",
       {
-        ref: a,
+        ref: l,
         role: "tabpanel",
-        id: `${x}-panel-${e}`,
-        "aria-labelledby": `${x}-tab-${e}`,
+        id: `${b}-panel-${e}`,
+        "aria-labelledby": `${b}-tab-${e}`,
         tabIndex: 0,
-        className: T("mt-4", l),
+        className: T("mt-4", d),
         children: t
       }
     ) : null;

package/dist/components/ui/timeline-tracks.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+/** Timeline 트랙 타입 · 색 팔레트 · 트랙 행 렌더러. Timeline 내부용 — 타입만 index.tsx 로 공개한다. */
+export interface TimelineTrackBase {
+    id: string;
+    label: React.ReactNode;
+    /**
+     * 트랙 색 강제 지정 (CSS color · `var(--ds-*)`). 보통은 비워 둔다 — 비우면
+     * `TRACK_PALETTE` 에서 서로 잘 구분되는 색이 트랙 순서대로 자동 배정된다.
+     */
+    color?: string;
+    /** 표 아래 범례에 쓰는 설명 (예: `Probability (darker = higher)`). 없으면 범례에서 빠진다. */
+    description?: React.ReactNode;
+}
+/** 구간별 강도 — `values` 를 전체 길이에 균등 분할해 진할수록 높게 칠한다. */
+export interface TimelineHeatmapTrack extends TimelineTrackBase {
+    type: "heatmap";
+    /**
+     * 0~1. 값 하나가 구간 하나(div)라 화면 폭보다 많으면 보이지도 않고 DOM 만 늘어난다 —
+     * 소비처에서 구간 평균으로 줄여 수백 개 이하로 넘긴다.
+     */
+    values: number[];
+}
+/** 시간에 따른 점수 — 균등 간격 샘플을 영역 그래프로 그린다. */
+export interface TimelineLineTrack extends TimelineTrackBase {
+    type: "line";
+    values: number[];
+    /** `values` 의 최댓값 기준. 기본 100 */
+    max?: number;
+}
+/** 이벤트 구간 — 시작·끝(초)에 막대를 놓는다. */
+export interface TimelineEventsTrack extends TimelineTrackBase {
+    type: "events";
+    events: {
+        start: number;
+        end: number;
+        label?: string;
+    }[];
+}
+export type TimelineTrack = TimelineHeatmapTrack | TimelineLineTrack | TimelineEventsTrack;
+/**
+ * 자동 배정 순서 — `category` 토큰 11색을 CIEDE2000 기준 farthest-point 로 정렬했다.
+ * 각 색은 앞선 색들과 플레이헤드 빨강(`primary-red-normal`)에서 가장 먼 것을 고른 결과이고,
+ * 괄호는 앞선 색들·플레이헤드와의 최소 ΔE00 이다. 앞 6색은 서로 ΔE00 ≥ 21.8 로 한눈에 구분되고,
+ * 7번째부터는 차이가 줄어 트랙이 많으면 비슷한 색이 섞일 수 있다.
+ * 토큰 값이 바뀌면 순서를 다시 계산해야 한다 — `npm run check:tokens` 가 순서와 최솟값을 대조한다.
+ */
+export declare const TRACK_PALETTE: readonly ["var(--ds-category-politics)", "var(--ds-category-talk)", "var(--ds-category-religion)", "var(--ds-category-overseas)", "var(--ds-category-controversy)", "var(--ds-category-custom)", "var(--ds-category-sensitive)", "var(--ds-category-hate)", "var(--ds-category-issue)", "var(--ds-category-violence)", "var(--ds-category-sexual)"];
+export declare const ROW_HEIGHT: Record<TimelineTrack["type"], string>;
+export declare function TrackSwatch({ track, color }: {
+    track: TimelineTrack;
+    color: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const HeatmapRow: React.NamedExoticComponent<{
+    track: TimelineHeatmapTrack;
+    color: string;
+    duration: number;
+}>;
+export declare const LineRow: React.NamedExoticComponent<{
+    track: TimelineLineTrack;
+    color: string;
+}>;
+export declare const EventsRow: React.NamedExoticComponent<{
+    track: TimelineEventsTrack;
+    color: string;
+    duration: number;
+}>;

package/dist/components/ui/timeline-tracks.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as n, jsxs as g, Fragment as x } from "react/jsx-runtime";
+import { formatTime as c } from "../../lib/format-time.js";
+import { clamp as l } from "../../lib/utils.js";
+import * as u from "react";
+const b = [
+  "var(--ds-category-politics)",
+  // 초록 (70.6)
+  "var(--ds-category-talk)",
+  // 파랑 (46.4)
+  "var(--ds-category-religion)",
+  // 노랑 (36.2)
+  "var(--ds-category-overseas)",
+  // 분홍 (34.2)
+  "var(--ds-category-controversy)",
+  // 청록 (24.5)
+  "var(--ds-category-custom)",
+  // 올리브 (21.9)
+  "var(--ds-category-sensitive)",
+  // 자주 (21.6)
+  "var(--ds-category-hate)",
+  // 보라 (20.2)
+  "var(--ds-category-issue)",
+  // 하늘 (19.4)
+  "var(--ds-category-violence)",
+  // 살구 (17.4)
+  "var(--ds-category-sexual)"
+  // 빨강 (5.6)
+], d = (o, e) => `color-mix(in srgb, ${o} ${Math.round(l(e, 0, 1) * 100)}%, var(--ds-background-default))`, v = (o) => 0.15 + 0.85 * l(o, 0, 1), R = {
+  heatmap: "h-10",
+  line: "h-[60px]",
+  events: "h-10"
+};
+function k({ track: o, color: e }) {
+  return o.type === "heatmap" ? /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "flex h-2 w-2 shrink-0", children: [0, 0.5, 1].map((s) => /* @__PURE__ */ n("span", { className: "h-full flex-1", style: { background: d(e, v(s)) } }, s)) }) : /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "size-2 shrink-0", style: { background: e } });
+}
+const N = u.memo(function({ track: e, color: s, duration: r }) {
+  const t = e.values.length;
+  return /* @__PURE__ */ n("div", { className: "flex h-3 w-full", children: e.values.map((i, a) => /* @__PURE__ */ n(
+    "div",
+    {
+      title: `${c(a / t * r)}–${c((a + 1) / t * r)} · ${Math.round(l(i, 0, 1) * 100)}%`,
+      className: "h-full min-w-px flex-1 hover:outline hover:outline-1 hover:-outline-offset-1 hover:outline-ds-primitive-black",
+      style: { background: d(s, v(i)) }
+    },
+    a
+  )) });
+}), E = u.memo(function({ track: e, color: s }) {
+  const r = e.max && e.max > 0 ? e.max : 100, t = e.values.length;
+  if (t === 0) return null;
+  const a = `M${e.values.map((m, h) => {
+    const p = t === 1 ? 50 : h / (t - 1) * 100, f = 100 - l(m / r, 0, 1) * 100;
+    return `${p},${f}`;
+  }).join(" L")}`;
+  return /* @__PURE__ */ g("svg", { "aria-hidden": !0, viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-x-0 bottom-0 top-3 h-[calc(100%-12px)] w-full overflow-visible", children: [
+    /* @__PURE__ */ n("path", { d: `${a} L100,100 L0,100 Z`, fill: s, fillOpacity: 0.12 }),
+    /* @__PURE__ */ n("path", { d: a, fill: "none", stroke: s, strokeWidth: 1, vectorEffect: "non-scaling-stroke" })
+  ] });
+}), L = u.memo(function({ track: e, color: s, duration: r }) {
+  return /* @__PURE__ */ n(x, { children: e.events.map((t, i) => {
+    const a = l(t.start / r, 0, 1), m = l(t.end / r, a, 1);
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        title: `${t.label ? `${t.label} · ` : ""}${c(t.start)}–${c(t.end)}`,
+        className: "absolute top-1/2 h-3 min-w-[2px] -translate-y-1/2",
+        style: { left: `${a * 100}%`, width: `${(m - a) * 100}%`, background: s }
+      },
+      i
+    );
+  }) });
+});
+export {
+  L as EventsRow,
+  N as HeatmapRow,
+  E as LineRow,
+  R as ROW_HEIGHT,
+  b as TRACK_PALETTE,
+  k as TrackSwatch
+};

package/dist/components/ui/timeline.d.ts

@@ -0,0 +1,31 @@
+import { TimelineTrack } from './timeline-tracks';
+import * as React from "react";
+export type { TimelineTrack, TimelineHeatmapTrack, TimelineLineTrack, TimelineEventsTrack, } from './timeline-tracks';
+export interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSeek"> {
+    /** 전체 길이(초) */
+    duration: number;
+    /**
+     * 트랙 행은 `React.memo` 라 플레이헤드가 움직여도 다시 그리지 않는다 — 단, 트랙 객체 참조가 같을 때만.
+     * `currentTime` 을 가진 컴포넌트에서 렌더마다 `.map` 으로 새로 만들지 말고 `useMemo` 등으로 고정해 넘긴다.
+     */
+    tracks: TimelineTrack[];
+    /** 재생 위치(초) — 주면 빨간 플레이헤드를 그린다. `onSeek` 을 쓰면 키보드 이동 기준이므로 함께 넘긴다 */
+    currentTime?: number;
+    /** 시간 영역 클릭·키보드(←→)로 위치를 고르면 초 단위로 호출된다 */
+    onSeek?: (time: number) => void;
+    /**
+     * 눈금 간격(초, 1 이상). 비우면 길이·폭에 맞춰 눈금이 최대 8개가 되도록 고른다 (60초 영상 → 10초).
+     * 주어도 1초 미만이거나 눈금이 폭에 비해 너무 많아지면(눈금당 64px 미만) 자동 간격을 쓴다.
+     */
+    tickInterval?: number;
+    /** 접근성 라벨 — `onSeek` 이 있으면 시크 슬라이더(기본 "타임라인 재생 위치"), 없으면 루트에 붙는다 */
+    "aria-label"?: string;
+    /** 트랙 이름 열 폭(px). 기본 240 (Figma). 좁은 화면에서는 줄여서 넘긴다. */
+    labelWidth?: number;
+}
+/**
+ * Figma TimeLine (Instant Case). 영상 길이를 가로축으로 히트맵·점수 그래프·이벤트 구간 트랙을
+ * 쌓고, 재생 위치를 빨간 플레이헤드로 보여준다. 트랙 색은 `TRACK_PALETTE` 에서 자동 배정된다.
+ */
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;
+export { Timeline };