@bridger-kr/react 0.1.0

package/dist/components/data/CodeBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/CodeBlock.tsx"],"names":[],"mappings":"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","file":"CodeBlock.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\nimport { useState } from 'react';\n\ntype TokenKind = 'plain' | 'key' | 'str' | 'num' | 'kw' | 'pun';\n\ninterface CodeToken {\n  t: string;\n  c: TokenKind;\n}\n\nfunction highlight(line: string): CodeToken[] {\n  const out: CodeToken[] = [];\n  const re = /(\"(?:[^\"\\\\]|\\\\.)*\"\\s*:)|(\"(?:[^\"\\\\]|\\\\.)*\")|(\\b-?\\d+(?:\\.\\d+)?\\b)|(\\b(?:true|false|null|GET|POST|PUT|DELETE)\\b)|([{}[\\],:])/g;\n  let last = 0;\n  let match: RegExpExecArray | null;\n\n  while ((match = re.exec(line)) !== null) {\n    if (match.index > last) out.push({ t: line.slice(last, match.index), c: 'plain' });\n    if (match[1]) out.push({ t: match[1], c: 'key' });\n    else if (match[2]) out.push({ t: match[2], c: 'str' });\n    else if (match[3]) out.push({ t: match[3], c: 'num' });\n    else if (match[4]) out.push({ t: match[4], c: 'kw' });\n    else if (match[5]) out.push({ t: match[5], c: 'pun' });\n    last = re.lastIndex;\n  }\n\n  if (last < line.length) out.push({ t: line.slice(last), c: 'plain' });\n  return out;\n}\n\nconst COLOR: Record<TokenKind, string> = { plain: '#cdd0d8', key: '#7fd1c0', str: '#e0a96d', num: '#8fb3ff', kw: '#c98aff', pun: '#8a91a3' };\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  /** The snippet, newline-separated. Lightly token-highlighted (JSON/shell). */\n  code?: string;\n  /** Header label, e.g. a filename or \"response\". Falls back to language. */\n  label?: string;\n  language?: string;\n  showLineNumbers?: boolean;\n  copyable?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Dark code surface for the light page (Stripe-style). Header + copy + line numbers.\n * @startingPoint section=\"Data\" subtitle=\"Dark code block with copy\" viewport=\"520x220\"\n */\nexport function CodeBlock({ code = '', label, language = 'json', showLineNumbers = true, copyable = true, style, ...rest }: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n  const lines = String(code).replace(/\\n$/, '').split('\\n');\n\n  const copy = () => {\n    try { navigator.clipboard?.writeText(code); } catch { /* clipboard unavailable */ }\n    setCopied(true); setTimeout(() => setCopied(false), 1400);\n  };\n\n  return (\n    <div {...rest} style={{\n      background: 'var(--dt-code-bg)', border: '1px solid var(--dt-code-border)',\n      borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden', ...style,\n    }}>\n      {(label || copyable) ? (\n        <div style={{\n          display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',\n          borderBottom: '1px solid var(--dt-code-border)',\n        }}>\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: '#8a91a3' }}>{label || language}</span>\n          {copyable ? (\n            <button\n              type=\"button\" onClick={copy}\n              style={{\n                marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none',\n                background: 'transparent', color: copied ? '#34d399' : '#8a91a3', cursor: 'pointer',\n                fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600, padding: 0,\n              }}\n            >\n              {copied ? (\n                <><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>복사됨</>\n              ) : (\n                <><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" /><path d=\"M5 15V5a2 2 0 0 1 2-2h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>복사</>\n              )}\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n      <div style={{ padding: '12px 0', overflowX: 'auto' }}>\n        {lines.map((line, index) => (\n          <div key={index} style={{ display: 'grid', gridTemplateColumns: showLineNumbers ? '38px 1fr' : '1fr', fontFamily: 'var(--dt-font-mono)', fontSize: 12.5, lineHeight: 1.75 }}>\n            {showLineNumbers ? <span style={{ textAlign: 'right', paddingRight: 14, color: '#5a6273', userSelect: 'none' }}>{index + 1}</span> : null}\n            <code style={{ color: COLOR.plain, whiteSpace: 'pre', paddingRight: 14 }}>\n              {highlight(line).map((segment, segmentIndex) => <span key={segmentIndex} style={{ color: COLOR[segment.c] }}>{segment.t}</span>)}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/data/KeyValue.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/KeyValue.tsx
+function KeyValue({ items = [], columns = 1, style, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { ...rest, style: {
+    margin: 0,
+    display: "grid",
+    gridTemplateColumns: columns === 2 ? "1fr 1fr" : "1fr",
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: items.map((item, index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const isLastRow = row === Math.floor((items.length - 1) / columns);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: 14,
+          padding: "11px 14px",
+          borderBottom: isLastRow ? "none" : "1px solid var(--dt-border)",
+          borderRight: columns === 2 && col === 0 ? "1px solid var(--dt-border)" : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { style: { fontSize: 12.5, color: "var(--dt-muted)", flex: "0 0 auto" }, children: item.key }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { style: {
+            margin: 0,
+            textAlign: "right",
+            minWidth: 0,
+            fontFamily: item.mono ? "var(--dt-font-mono)" : "inherit",
+            fontSize: item.mono ? 12.5 : 13,
+            fontWeight: 600,
+            color: item.accent ? "var(--dt-accent)" : "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: item.value })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+exports.KeyValue = KeyValue;
+//# sourceMappingURL=KeyValue.cjs.map
+//# sourceMappingURL=KeyValue.cjs.map

package/dist/components/data/KeyValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/KeyValue.tsx"],"names":["jsx","jsxs"],"mappings":";;;;;AAsBO,SAAS,QAAA,CAAS,EAAE,KAAA,GAAQ,EAAC,EAAG,UAAU,CAAA,EAAG,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AACnF,EAAA,uBACEA,cAAA,CAAC,IAAA,EAAA,EAAI,GAAG,IAAA,EAAM,KAAA,EAAO;AAAA,IACnB,MAAA,EAAQ,CAAA;AAAA,IAAG,OAAA,EAAS,MAAA;AAAA,IACpB,mBAAA,EAAqB,OAAA,KAAY,CAAA,GAAI,SAAA,GAAY,KAAA;AAAA,IACjD,MAAA,EAAQ,mCAAA;AAAA,IAAqC,YAAA,EAAc,qBAAA;AAAA,IAAuB,QAAA,EAAU,QAAA;AAAA,IAC5F,GAAG;AAAA,GACL,EACG,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AAC1B,IAAA,MAAM,GAAA,GAAM,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,OAAO,CAAA;AACtC,IAAA,MAAM,MAAM,KAAA,GAAQ,OAAA;AACpB,IAAA,MAAM,YAAY,GAAA,KAAQ,IAAA,CAAK,OAAO,KAAA,CAAM,MAAA,GAAS,KAAK,OAAO,CAAA;AAEjE,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UAAQ,UAAA,EAAY,UAAA;AAAA,UAAY,cAAA,EAAgB,eAAA;AAAA,UAAiB,GAAA,EAAK,EAAA;AAAA,UAC/E,OAAA,EAAS,WAAA;AAAA,UACT,YAAA,EAAc,YAAY,MAAA,GAAS,4BAAA;AAAA,UACnC,WAAA,EAAa,OAAA,KAAY,CAAA,IAAK,GAAA,KAAQ,IAAI,4BAAA,GAA+B;AAAA,SAC3E;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,QAAA,EAAU,IAAA,EAAM,KAAA,EAAO,iBAAA,EAAmB,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,IAAA,CAAK,GAAA,EAAI,CAAA;AAAA,0BACrFA,cAAA,CAAC,QAAG,KAAA,EAAO;AAAA,YACT,MAAA,EAAQ,CAAA;AAAA,YAAG,SAAA,EAAW,OAAA;AAAA,YAAS,QAAA,EAAU,CAAA;AAAA,YACzC,UAAA,EAAY,IAAA,CAAK,IAAA,GAAO,qBAAA,GAAwB,SAAA;AAAA,YAChD,QAAA,EAAU,IAAA,CAAK,IAAA,GAAO,IAAA,GAAO,EAAA;AAAA,YAAI,UAAA,EAAY,GAAA;AAAA,YAC7C,KAAA,EAAO,IAAA,CAAK,MAAA,GAAS,kBAAA,GAAqB,sBAAA;AAAA,YAC1C,kBAAA,EAAoB,cAAA;AAAA,YACpB,QAAA,EAAU,QAAA;AAAA,YAAU,YAAA,EAAc,UAAA;AAAA,YAAY,UAAA,EAAY;AAAA,WAC5D,EAAI,eAAK,KAAA,EAAM;AAAA;AAAA,OAAA;AAAA,MAhBV;AAAA,KAiBP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ","file":"KeyValue.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface KeyValueItem {\n  key: string;\n  value: ReactNode;\n  /** Render the value in JetBrains Mono (paths, IDs, methods). */\n  mono?: boolean;\n  /** Tint the value persimmon (highlighted field). */\n  accent?: boolean;\n}\n\nexport interface KeyValueProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'style'> {\n  items?: KeyValueItem[];\n  /** 1 = stacked rows, 2 = two-up grid. */\n  columns?: 1 | 2;\n  style?: CSSProperties;\n}\n\n/**\n * Definition list for spec metadata — hairline rows, muted key, ink value.\n * @startingPoint section=\"Data\" subtitle=\"Spec metadata as a definition list\" viewport=\"460x220\"\n */\nexport function KeyValue({ items = [], columns = 1, style, ...rest }: KeyValueProps) {\n  return (\n    <dl {...rest} style={{\n      margin: 0, display: 'grid',\n      gridTemplateColumns: columns === 2 ? '1fr 1fr' : '1fr',\n      border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden',\n      ...style,\n    }}>\n      {items.map((item, index) => {\n        const row = Math.floor(index / columns);\n        const col = index % columns;\n        const isLastRow = row === Math.floor((items.length - 1) / columns);\n\n        return (\n          <div\n            key={index}\n            style={{\n              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14,\n              padding: '11px 14px',\n              borderBottom: isLastRow ? 'none' : '1px solid var(--dt-border)',\n              borderRight: columns === 2 && col === 0 ? '1px solid var(--dt-border)' : 'none',\n            }}\n          >\n            <dt style={{ fontSize: 12.5, color: 'var(--dt-muted)', flex: '0 0 auto' }}>{item.key}</dt>\n            <dd style={{\n              margin: 0, textAlign: 'right', minWidth: 0,\n              fontFamily: item.mono ? 'var(--dt-font-mono)' : 'inherit',\n              fontSize: item.mono ? 12.5 : 13, fontWeight: 600,\n              color: item.accent ? 'var(--dt-accent)' : 'var(--dt-ink-strong)',\n              fontVariantNumeric: 'tabular-nums',\n              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',\n            }}>{item.value}</dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n"]}

package/dist/components/data/KeyValue.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface KeyValueItem {
+    key: string;
+    value: ReactNode;
+    /** Render the value in JetBrains Mono (paths, IDs, methods). */
+    mono?: boolean;
+    /** Tint the value persimmon (highlighted field). */
+    accent?: boolean;
+}
+interface KeyValueProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'style'> {
+    items?: KeyValueItem[];
+    /** 1 = stacked rows, 2 = two-up grid. */
+    columns?: 1 | 2;
+    style?: CSSProperties;
+}
+/**
+ * Definition list for spec metadata — hairline rows, muted key, ink value.
+ * @startingPoint section="Data" subtitle="Spec metadata as a definition list" viewport="460x220"
+ */
+declare function KeyValue({ items, columns, style, ...rest }: KeyValueProps): react.JSX.Element;
+
+export { KeyValue, type KeyValueItem, type KeyValueProps };

package/dist/components/data/KeyValue.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface KeyValueItem {
+    key: string;
+    value: ReactNode;
+    /** Render the value in JetBrains Mono (paths, IDs, methods). */
+    mono?: boolean;
+    /** Tint the value persimmon (highlighted field). */
+    accent?: boolean;
+}
+interface KeyValueProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'style'> {
+    items?: KeyValueItem[];
+    /** 1 = stacked rows, 2 = two-up grid. */
+    columns?: 1 | 2;
+    style?: CSSProperties;
+}
+/**
+ * Definition list for spec metadata — hairline rows, muted key, ink value.
+ * @startingPoint section="Data" subtitle="Spec metadata as a definition list" viewport="460x220"
+ */
+declare function KeyValue({ items, columns, style, ...rest }: KeyValueProps): react.JSX.Element;
+
+export { KeyValue, type KeyValueItem, type KeyValueProps };

package/dist/components/data/KeyValue.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/data/KeyValue.tsx
+function KeyValue({ items = [], columns = 1, style, ...rest }) {
+  return /* @__PURE__ */ jsx("dl", { ...rest, style: {
+    margin: 0,
+    display: "grid",
+    gridTemplateColumns: columns === 2 ? "1fr 1fr" : "1fr",
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: items.map((item, index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const isLastRow = row === Math.floor((items.length - 1) / columns);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: 14,
+          padding: "11px 14px",
+          borderBottom: isLastRow ? "none" : "1px solid var(--dt-border)",
+          borderRight: columns === 2 && col === 0 ? "1px solid var(--dt-border)" : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx("dt", { style: { fontSize: 12.5, color: "var(--dt-muted)", flex: "0 0 auto" }, children: item.key }),
+          /* @__PURE__ */ jsx("dd", { style: {
+            margin: 0,
+            textAlign: "right",
+            minWidth: 0,
+            fontFamily: item.mono ? "var(--dt-font-mono)" : "inherit",
+            fontSize: item.mono ? 12.5 : 13,
+            fontWeight: 600,
+            color: item.accent ? "var(--dt-accent)" : "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: item.value })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+export { KeyValue };
+//# sourceMappingURL=KeyValue.mjs.map
+//# sourceMappingURL=KeyValue.mjs.map

package/dist/components/data/KeyValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/KeyValue.tsx"],"names":[],"mappings":";;;AAsBO,SAAS,QAAA,CAAS,EAAE,KAAA,GAAQ,EAAC,EAAG,UAAU,CAAA,EAAG,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AACnF,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAI,GAAG,IAAA,EAAM,KAAA,EAAO;AAAA,IACnB,MAAA,EAAQ,CAAA;AAAA,IAAG,OAAA,EAAS,MAAA;AAAA,IACpB,mBAAA,EAAqB,OAAA,KAAY,CAAA,GAAI,SAAA,GAAY,KAAA;AAAA,IACjD,MAAA,EAAQ,mCAAA;AAAA,IAAqC,YAAA,EAAc,qBAAA;AAAA,IAAuB,QAAA,EAAU,QAAA;AAAA,IAC5F,GAAG;AAAA,GACL,EACG,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AAC1B,IAAA,MAAM,GAAA,GAAM,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,OAAO,CAAA;AACtC,IAAA,MAAM,MAAM,KAAA,GAAQ,OAAA;AACpB,IAAA,MAAM,YAAY,GAAA,KAAQ,IAAA,CAAK,OAAO,KAAA,CAAM,MAAA,GAAS,KAAK,OAAO,CAAA;AAEjE,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UAAQ,UAAA,EAAY,UAAA;AAAA,UAAY,cAAA,EAAgB,eAAA;AAAA,UAAiB,GAAA,EAAK,EAAA;AAAA,UAC/E,OAAA,EAAS,WAAA;AAAA,UACT,YAAA,EAAc,YAAY,MAAA,GAAS,4BAAA;AAAA,UACnC,WAAA,EAAa,OAAA,KAAY,CAAA,IAAK,GAAA,KAAQ,IAAI,4BAAA,GAA+B;AAAA,SAC3E;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,QAAA,EAAU,IAAA,EAAM,KAAA,EAAO,iBAAA,EAAmB,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,IAAA,CAAK,GAAA,EAAI,CAAA;AAAA,0BACrF,GAAA,CAAC,QAAG,KAAA,EAAO;AAAA,YACT,MAAA,EAAQ,CAAA;AAAA,YAAG,SAAA,EAAW,OAAA;AAAA,YAAS,QAAA,EAAU,CAAA;AAAA,YACzC,UAAA,EAAY,IAAA,CAAK,IAAA,GAAO,qBAAA,GAAwB,SAAA;AAAA,YAChD,QAAA,EAAU,IAAA,CAAK,IAAA,GAAO,IAAA,GAAO,EAAA;AAAA,YAAI,UAAA,EAAY,GAAA;AAAA,YAC7C,KAAA,EAAO,IAAA,CAAK,MAAA,GAAS,kBAAA,GAAqB,sBAAA;AAAA,YAC1C,kBAAA,EAAoB,cAAA;AAAA,YACpB,QAAA,EAAU,QAAA;AAAA,YAAU,YAAA,EAAc,UAAA;AAAA,YAAY,UAAA,EAAY;AAAA,WAC5D,EAAI,eAAK,KAAA,EAAM;AAAA;AAAA,OAAA;AAAA,MAhBV;AAAA,KAiBP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ","file":"KeyValue.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface KeyValueItem {\n  key: string;\n  value: ReactNode;\n  /** Render the value in JetBrains Mono (paths, IDs, methods). */\n  mono?: boolean;\n  /** Tint the value persimmon (highlighted field). */\n  accent?: boolean;\n}\n\nexport interface KeyValueProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'style'> {\n  items?: KeyValueItem[];\n  /** 1 = stacked rows, 2 = two-up grid. */\n  columns?: 1 | 2;\n  style?: CSSProperties;\n}\n\n/**\n * Definition list for spec metadata — hairline rows, muted key, ink value.\n * @startingPoint section=\"Data\" subtitle=\"Spec metadata as a definition list\" viewport=\"460x220\"\n */\nexport function KeyValue({ items = [], columns = 1, style, ...rest }: KeyValueProps) {\n  return (\n    <dl {...rest} style={{\n      margin: 0, display: 'grid',\n      gridTemplateColumns: columns === 2 ? '1fr 1fr' : '1fr',\n      border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden',\n      ...style,\n    }}>\n      {items.map((item, index) => {\n        const row = Math.floor(index / columns);\n        const col = index % columns;\n        const isLastRow = row === Math.floor((items.length - 1) / columns);\n\n        return (\n          <div\n            key={index}\n            style={{\n              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14,\n              padding: '11px 14px',\n              borderBottom: isLastRow ? 'none' : '1px solid var(--dt-border)',\n              borderRight: columns === 2 && col === 0 ? '1px solid var(--dt-border)' : 'none',\n            }}\n          >\n            <dt style={{ fontSize: 12.5, color: 'var(--dt-muted)', flex: '0 0 auto' }}>{item.key}</dt>\n            <dd style={{\n              margin: 0, textAlign: 'right', minWidth: 0,\n              fontFamily: item.mono ? 'var(--dt-font-mono)' : 'inherit',\n              fontSize: item.mono ? 12.5 : 13, fontWeight: 600,\n              color: item.accent ? 'var(--dt-accent)' : 'var(--dt-ink-strong)',\n              fontVariantNumeric: 'tabular-nums',\n              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',\n            }}>{item.value}</dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n"]}

package/dist/components/data/LogRow.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/LogRow.tsx
+var LEVEL = {
+  ok: { dot: "var(--dt-success)", text: "var(--dt-success)", label: "OK" },
+  warn: { dot: "var(--dt-warning)", text: "var(--dt-warning)", label: "WARN" },
+  error: { dot: "var(--dt-danger)", text: "var(--dt-danger)", label: "ERR" },
+  info: { dot: "var(--dt-muted)", text: "var(--dt-muted-strong)", label: "INFO" }
+};
+function LogRow({ entries = [], style, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, style: {
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    background: "var(--dt-surface)",
+    fontVariantNumeric: "tabular-nums",
+    ...style
+  }, children: entries.map((entry, index) => {
+    const level = LEVEL[entry.level] || LEVEL.info;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "auto 14px 1fr auto",
+          alignItems: "center",
+          gap: 12,
+          padding: "9px 14px",
+          borderTop: index === 0 ? "none" : "1px solid var(--dt-border)",
+          fontFamily: "var(--dt-font-mono)",
+          fontSize: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--dt-muted)" }, children: entry.time }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 7, height: 7, borderRadius: 9999, background: level.dot, justifySelf: "center" } }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--dt-ink-strong)", fontWeight: 600 }, children: entry.tool }),
+            entry.message ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--dt-muted-strong)" }, children: [
+              "  ",
+              entry.message
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: entry.latency ? "var(--dt-muted-strong)" : level.text, fontWeight: 600 }, children: entry.latency || level.label })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+exports.LogRow = LogRow;
+//# sourceMappingURL=LogRow.cjs.map
+//# sourceMappingURL=LogRow.cjs.map

package/dist/components/data/LogRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/LogRow.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"LogRow.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nexport type LogLevel = 'ok' | 'warn' | 'error' | 'info';\n\nconst LEVEL: Record<LogLevel, { dot: string; text: string; label: string }> = {\n  ok:    { dot: 'var(--dt-success)', text: 'var(--dt-success)', label: 'OK' },\n  warn:  { dot: 'var(--dt-warning)', text: 'var(--dt-warning)', label: 'WARN' },\n  error: { dot: 'var(--dt-danger)',  text: 'var(--dt-danger)',  label: 'ERR' },\n  info:  { dot: 'var(--dt-muted)',   text: 'var(--dt-muted-strong)', label: 'INFO' },\n};\n\nexport interface LogEntry {\n  time: string;\n  level: LogLevel;\n  tool: string;\n  message?: string;\n  /** Latency string (e.g. \"142ms\"). When absent, the level label shows instead. */\n  latency?: string;\n}\n\nexport interface LogRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {\n  entries?: LogEntry[];\n  style?: CSSProperties;\n}\n\n/**\n * Dense tabular execution-log stream — hairline rows, status dots, mono columns.\n * @startingPoint section=\"Data\" subtitle=\"Execution-log stream\" viewport=\"560x200\"\n */\nexport function LogRow({ entries = [], style, ...rest }: LogRowProps) {\n  return (\n    <div {...rest} style={{\n      border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden',\n      background: 'var(--dt-surface)', fontVariantNumeric: 'tabular-nums', ...style,\n    }}>\n      {entries.map((entry, index) => {\n        const level = LEVEL[entry.level] || LEVEL.info;\n\n        return (\n          <div\n            key={index}\n            style={{\n              display: 'grid', gridTemplateColumns: 'auto 14px 1fr auto', alignItems: 'center', gap: 12,\n              padding: '9px 14px', borderTop: index === 0 ? 'none' : '1px solid var(--dt-border)',\n              fontFamily: 'var(--dt-font-mono)', fontSize: 12,\n            }}\n          >\n            <span style={{ color: 'var(--dt-muted)' }}>{entry.time}</span>\n            <span style={{ width: 7, height: 7, borderRadius: 9999, background: level.dot, justifySelf: 'center' }} />\n            <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n              <span style={{ color: 'var(--dt-ink-strong)', fontWeight: 600 }}>{entry.tool}</span>\n              {entry.message ? <span style={{ color: 'var(--dt-muted-strong)' }}>{'  '}{entry.message}</span> : null}\n            </span>\n            <span style={{ color: entry.latency ? 'var(--dt-muted-strong)' : level.text, fontWeight: 600 }}>\n              {entry.latency || level.label}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/data/LogRow.d.cts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+type LogLevel = 'ok' | 'warn' | 'error' | 'info';
+interface LogEntry {
+    time: string;
+    level: LogLevel;
+    tool: string;
+    message?: string;
+    /** Latency string (e.g. "142ms"). When absent, the level label shows instead. */
+    latency?: string;
+}
+interface LogRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    entries?: LogEntry[];
+    style?: CSSProperties;
+}
+/**
+ * Dense tabular execution-log stream — hairline rows, status dots, mono columns.
+ * @startingPoint section="Data" subtitle="Execution-log stream" viewport="560x200"
+ */
+declare function LogRow({ entries, style, ...rest }: LogRowProps): react.JSX.Element;
+
+export { type LogEntry, type LogLevel, LogRow, type LogRowProps };

package/dist/components/data/LogRow.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+type LogLevel = 'ok' | 'warn' | 'error' | 'info';
+interface LogEntry {
+    time: string;
+    level: LogLevel;
+    tool: string;
+    message?: string;
+    /** Latency string (e.g. "142ms"). When absent, the level label shows instead. */
+    latency?: string;
+}
+interface LogRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    entries?: LogEntry[];
+    style?: CSSProperties;
+}
+/**
+ * Dense tabular execution-log stream — hairline rows, status dots, mono columns.
+ * @startingPoint section="Data" subtitle="Execution-log stream" viewport="560x200"
+ */
+declare function LogRow({ entries, style, ...rest }: LogRowProps): react.JSX.Element;
+
+export { type LogEntry, type LogLevel, LogRow, type LogRowProps };

package/dist/components/data/LogRow.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/data/LogRow.tsx
+var LEVEL = {
+  ok: { dot: "var(--dt-success)", text: "var(--dt-success)", label: "OK" },
+  warn: { dot: "var(--dt-warning)", text: "var(--dt-warning)", label: "WARN" },
+  error: { dot: "var(--dt-danger)", text: "var(--dt-danger)", label: "ERR" },
+  info: { dot: "var(--dt-muted)", text: "var(--dt-muted-strong)", label: "INFO" }
+};
+function LogRow({ entries = [], style, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, style: {
+    border: "1px solid var(--dt-border-strong)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    background: "var(--dt-surface)",
+    fontVariantNumeric: "tabular-nums",
+    ...style
+  }, children: entries.map((entry, index) => {
+    const level = LEVEL[entry.level] || LEVEL.info;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "auto 14px 1fr auto",
+          alignItems: "center",
+          gap: 12,
+          padding: "9px 14px",
+          borderTop: index === 0 ? "none" : "1px solid var(--dt-border)",
+          fontFamily: "var(--dt-font-mono)",
+          fontSize: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)" }, children: entry.time }),
+          /* @__PURE__ */ jsx("span", { style: { width: 7, height: 7, borderRadius: 9999, background: level.dot, justifySelf: "center" } }),
+          /* @__PURE__ */ jsxs("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-ink-strong)", fontWeight: 600 }, children: entry.tool }),
+            entry.message ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--dt-muted-strong)" }, children: [
+              "  ",
+              entry.message
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { color: entry.latency ? "var(--dt-muted-strong)" : level.text, fontWeight: 600 }, children: entry.latency || level.label })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+export { LogRow };
+//# sourceMappingURL=LogRow.mjs.map
+//# sourceMappingURL=LogRow.mjs.map

package/dist/components/data/LogRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/LogRow.tsx"],"names":[],"mappings":"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","file":"LogRow.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nexport type LogLevel = 'ok' | 'warn' | 'error' | 'info';\n\nconst LEVEL: Record<LogLevel, { dot: string; text: string; label: string }> = {\n  ok:    { dot: 'var(--dt-success)', text: 'var(--dt-success)', label: 'OK' },\n  warn:  { dot: 'var(--dt-warning)', text: 'var(--dt-warning)', label: 'WARN' },\n  error: { dot: 'var(--dt-danger)',  text: 'var(--dt-danger)',  label: 'ERR' },\n  info:  { dot: 'var(--dt-muted)',   text: 'var(--dt-muted-strong)', label: 'INFO' },\n};\n\nexport interface LogEntry {\n  time: string;\n  level: LogLevel;\n  tool: string;\n  message?: string;\n  /** Latency string (e.g. \"142ms\"). When absent, the level label shows instead. */\n  latency?: string;\n}\n\nexport interface LogRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {\n  entries?: LogEntry[];\n  style?: CSSProperties;\n}\n\n/**\n * Dense tabular execution-log stream — hairline rows, status dots, mono columns.\n * @startingPoint section=\"Data\" subtitle=\"Execution-log stream\" viewport=\"560x200\"\n */\nexport function LogRow({ entries = [], style, ...rest }: LogRowProps) {\n  return (\n    <div {...rest} style={{\n      border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden',\n      background: 'var(--dt-surface)', fontVariantNumeric: 'tabular-nums', ...style,\n    }}>\n      {entries.map((entry, index) => {\n        const level = LEVEL[entry.level] || LEVEL.info;\n\n        return (\n          <div\n            key={index}\n            style={{\n              display: 'grid', gridTemplateColumns: 'auto 14px 1fr auto', alignItems: 'center', gap: 12,\n              padding: '9px 14px', borderTop: index === 0 ? 'none' : '1px solid var(--dt-border)',\n              fontFamily: 'var(--dt-font-mono)', fontSize: 12,\n            }}\n          >\n            <span style={{ color: 'var(--dt-muted)' }}>{entry.time}</span>\n            <span style={{ width: 7, height: 7, borderRadius: 9999, background: level.dot, justifySelf: 'center' }} />\n            <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n              <span style={{ color: 'var(--dt-ink-strong)', fontWeight: 600 }}>{entry.tool}</span>\n              {entry.message ? <span style={{ color: 'var(--dt-muted-strong)' }}>{'  '}{entry.message}</span> : null}\n            </span>\n            <span style={{ color: entry.latency ? 'var(--dt-muted-strong)' : level.text, fontWeight: 600 }}>\n              {entry.latency || level.label}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/data/Pagination.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/Pagination.tsx
+function Pagination({ page = 1, pageCount = 1, onChange, style, ...rest }) {
+  const go = (targetPage) => {
+    if (targetPage >= 1 && targetPage <= pageCount && targetPage !== page) onChange?.(targetPage);
+  };
+  const pages = [];
+  const add = (targetPage) => pages.push(targetPage);
+  if (pageCount <= 7) {
+    for (let i = 1; i <= pageCount; i += 1) add(i);
+  } else {
+    add(1);
+    if (page > 3) add("\u2026");
+    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i += 1) add(i);
+    if (page < pageCount - 2) add("\u2026");
+    add(pageCount);
+  }
+  const cell = (active) => ({
+    minWidth: 32,
+    height: 32,
+    padding: "0 8px",
+    borderRadius: "var(--dt-radius-sm)",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 600,
+    fontVariantNumeric: "tabular-nums",
+    background: active ? "var(--dt-accent)" : "transparent",
+    color: active ? "var(--dt-accent-ink)" : "var(--dt-muted-strong)"
+  });
+  const arrow = (disabled) => ({ ...cell(false), opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...rest, style: { display: "inline-flex", alignItems: "center", gap: 2, ...style }, "aria-label": "\uD398\uC774\uC9C0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { style: arrow(page <= 1), onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    pages.map((pageItem, index) => pageItem === "\u2026" ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { minWidth: 22, textAlign: "center", color: "var(--dt-muted)" }, children: "\u2026" }, `e${index}`) : /* @__PURE__ */ jsxRuntime.jsx("button", { style: cell(pageItem === page), onClick: () => go(pageItem), "aria-current": pageItem === page ? "page" : void 0, children: pageItem }, pageItem)),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { style: arrow(page >= pageCount), onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+  ] });
+}
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.cjs.map
+//# sourceMappingURL=Pagination.cjs.map

package/dist/components/data/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Pagination.tsx"],"names":["jsx"],"mappings":";;;;;AAYO,SAAS,UAAA,CAAW,EAAE,IAAA,GAAO,CAAA,EAAG,SAAA,GAAY,GAAG,QAAA,EAAU,KAAA,EAAO,GAAG,IAAA,EAAK,EAAoB;AACjG,EAAA,MAAM,EAAA,GAAK,CAAC,UAAA,KAAuB;AAAE,IAAA,IAAI,cAAc,CAAA,IAAK,UAAA,IAAc,aAAa,UAAA,KAAe,IAAA,aAAiB,UAAU,CAAA;AAAA,EAAG,CAAA;AACpI,EAAA,MAAM,QAAoB,EAAC;AAC3B,EAAA,MAAM,GAAA,GAAM,CAAC,UAAA,KAAyB,KAAA,CAAM,KAAK,UAAU,CAAA;AAE3D,EAAA,IAAI,aAAa,CAAA,EAAG;AAAE,IAAA,KAAA,IAAS,IAAI,CAAA,EAAG,CAAA,IAAK,WAAW,CAAA,IAAK,CAAA,MAAO,CAAC,CAAA;AAAA,EAAG,CAAA,MACjE;AACH,IAAA,GAAA,CAAI,CAAC,CAAA;AACL,IAAA,IAAI,IAAA,GAAO,CAAA,EAAG,GAAA,CAAI,QAAG,CAAA;AACrB,IAAA,KAAA,IAAS,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,GAAO,CAAC,GAAG,CAAA,IAAK,IAAA,CAAK,GAAA,CAAI,SAAA,GAAY,GAAG,IAAA,GAAO,CAAC,GAAG,CAAA,IAAK,CAAA,MAAO,CAAC,CAAA;AACzF,IAAA,IAAI,IAAA,GAAO,SAAA,GAAY,CAAA,EAAG,GAAA,CAAI,QAAG,CAAA;AACjC,IAAA,GAAA,CAAI,SAAS,CAAA;AAAA,EACf;AAEA,EAAA,MAAM,IAAA,GAAO,CAAC,MAAA,MAAoC;AAAA,IAChD,QAAA,EAAU,EAAA;AAAA,IAAI,MAAA,EAAQ,EAAA;AAAA,IAAI,OAAA,EAAS,OAAA;AAAA,IAAS,YAAA,EAAc,qBAAA;AAAA,IAAuB,MAAA,EAAQ,MAAA;AAAA,IAAQ,MAAA,EAAQ,SAAA;AAAA,IACzG,QAAA,EAAU,EAAA;AAAA,IAAI,UAAA,EAAY,GAAA;AAAA,IAAK,kBAAA,EAAoB,cAAA;AAAA,IACnD,UAAA,EAAY,SAAS,kBAAA,GAAqB,aAAA;AAAA,IAC1C,KAAA,EAAO,SAAS,sBAAA,GAAyB;AAAA,GAC3C,CAAA;AACA,EAAA,MAAM,KAAA,GAAQ,CAAC,QAAA,MAAsC,EAAE,GAAG,IAAA,CAAK,KAAK,GAAG,OAAA,EAAS,QAAA,GAAW,MAAM,CAAA,EAAG,MAAA,EAAQ,WAAW,aAAA,GAAgB,SAAA,EAAW,SAAS,aAAA,EAAe,UAAA,EAAY,QAAA,EAAU,cAAA,EAAgB,QAAA,EAAS,CAAA;AAEzN,EAAA,uCACG,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAe,UAAA,EAAY,QAAA,EAAU,KAAK,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,cAAW,oBAAA,EACnG,QAAA,EAAA;AAAA,oBAAAA,cAAA,CAAC,YAAO,KAAA,EAAO,KAAA,CAAM,QAAQ,CAAC,CAAA,EAAG,SAAS,MAAM,EAAA,CAAG,IAAA,GAAO,CAAC,GAAG,QAAA,EAAU,IAAA,IAAQ,GAAG,YAAA,EAAW,cAAA,EAC5F,yCAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,MAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,gBAAA,EAAiB,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,GAAE,CAAA,EAC5K,CAAA;AAAA,IACC,MAAM,GAAA,CAAI,CAAC,UAAU,KAAA,KAAU,QAAA,KAAa,2BACzCA,cAAA,CAAC,MAAA,EAAA,EAAuB,OAAO,EAAE,QAAA,EAAU,IAAI,SAAA,EAAW,QAAA,EAAU,OAAO,iBAAA,EAAkB,EAAG,sBAArF,CAAA,CAAA,EAAI,KAAK,CAAA,CAA6E,CAAA,kCAChG,QAAA,EAAA,EAAsB,KAAA,EAAO,KAAK,QAAA,KAAa,IAAI,GAAG,OAAA,EAAS,MAAM,GAAG,QAAQ,CAAA,EAAG,gBAAc,QAAA,KAAa,IAAA,GAAO,SAAS,MAAA,EAAY,QAAA,EAAA,QAAA,EAAA,EAA9H,QAAuI,CAAS,CAAA;AAAA,mCAChK,QAAA,EAAA,EAAO,KAAA,EAAO,MAAM,IAAA,IAAQ,SAAS,GAAG,OAAA,EAAS,MAAM,EAAA,CAAG,IAAA,GAAO,CAAC,CAAA,EAAG,QAAA,EAAU,QAAQ,SAAA,EAAW,YAAA,EAAW,gBAC5G,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gBAAe,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,GAAE,CAAA,EAC1K;AAAA,GAAA,EACF,CAAA;AAEJ","file":"Pagination.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\ntype PageItem = number | '…';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {\n  page?: number;\n  pageCount?: number;\n  onChange?: (page: number) => void;\n  style?: CSSProperties;\n}\n\n/** Pagination — prev/next plus compact page numbers with an ellipsis. */\nexport function Pagination({ page = 1, pageCount = 1, onChange, style, ...rest }: PaginationProps) {\n  const go = (targetPage: number) => { if (targetPage >= 1 && targetPage <= pageCount && targetPage !== page) onChange?.(targetPage); };\n  const pages: PageItem[] = [];\n  const add = (targetPage: PageItem) => pages.push(targetPage);\n\n  if (pageCount <= 7) { for (let i = 1; i <= pageCount; i += 1) add(i); }\n  else {\n    add(1);\n    if (page > 3) add('…');\n    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i += 1) add(i);\n    if (page < pageCount - 2) add('…');\n    add(pageCount);\n  }\n\n  const cell = (active: boolean): CSSProperties => ({\n    minWidth: 32, height: 32, padding: '0 8px', borderRadius: 'var(--dt-radius-sm)', border: 'none', cursor: 'pointer',\n    fontSize: 13, fontWeight: 600, fontVariantNumeric: 'tabular-nums',\n    background: active ? 'var(--dt-accent)' : 'transparent',\n    color: active ? 'var(--dt-accent-ink)' : 'var(--dt-muted-strong)',\n  });\n  const arrow = (disabled: boolean): CSSProperties => ({ ...cell(false), opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' });\n\n  return (\n    <nav {...rest} style={{ display: 'inline-flex', alignItems: 'center', gap: 2, ...style }} aria-label=\"페이지\">\n      <button style={arrow(page <= 1)} onClick={() => go(page - 1)} disabled={page <= 1} aria-label=\"이전\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n      </button>\n      {pages.map((pageItem, index) => pageItem === '…'\n        ? <span key={`e${index}`} style={{ minWidth: 22, textAlign: 'center', color: 'var(--dt-muted)' }}>…</span>\n        : <button key={pageItem} style={cell(pageItem === page)} onClick={() => go(pageItem)} aria-current={pageItem === page ? 'page' : undefined}>{pageItem}</button>)}\n      <button style={arrow(page >= pageCount)} onClick={() => go(page + 1)} disabled={page >= pageCount} aria-label=\"다음\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n      </button>\n    </nav>\n  );\n}\n"]}

package/dist/components/data/Pagination.d.cts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
+    page?: number;
+    pageCount?: number;
+    onChange?: (page: number) => void;
+    style?: CSSProperties;
+}
+/** Pagination — prev/next plus compact page numbers with an ellipsis. */
+declare function Pagination({ page, pageCount, onChange, style, ...rest }: PaginationProps): react.JSX.Element;
+
+export { Pagination, type PaginationProps };

package/dist/components/data/Pagination.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
+    page?: number;
+    pageCount?: number;
+    onChange?: (page: number) => void;
+    style?: CSSProperties;
+}
+/** Pagination — prev/next plus compact page numbers with an ellipsis. */
+declare function Pagination({ page, pageCount, onChange, style, ...rest }: PaginationProps): react.JSX.Element;
+
+export { Pagination, type PaginationProps };

package/dist/components/data/Pagination.mjs

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/data/Pagination.tsx
+function Pagination({ page = 1, pageCount = 1, onChange, style, ...rest }) {
+  const go = (targetPage) => {
+    if (targetPage >= 1 && targetPage <= pageCount && targetPage !== page) onChange?.(targetPage);
+  };
+  const pages = [];
+  const add = (targetPage) => pages.push(targetPage);
+  if (pageCount <= 7) {
+    for (let i = 1; i <= pageCount; i += 1) add(i);
+  } else {
+    add(1);
+    if (page > 3) add("\u2026");
+    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i += 1) add(i);
+    if (page < pageCount - 2) add("\u2026");
+    add(pageCount);
+  }
+  const cell = (active) => ({
+    minWidth: 32,
+    height: 32,
+    padding: "0 8px",
+    borderRadius: "var(--dt-radius-sm)",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 600,
+    fontVariantNumeric: "tabular-nums",
+    background: active ? "var(--dt-accent)" : "transparent",
+    color: active ? "var(--dt-accent-ink)" : "var(--dt-muted-strong)"
+  });
+  const arrow = (disabled) => ({ ...cell(false), opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" });
+  return /* @__PURE__ */ jsxs("nav", { ...rest, style: { display: "inline-flex", alignItems: "center", gap: 2, ...style }, "aria-label": "\uD398\uC774\uC9C0", children: [
+    /* @__PURE__ */ jsx("button", { style: arrow(page <= 1), onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    pages.map((pageItem, index) => pageItem === "\u2026" ? /* @__PURE__ */ jsx("span", { style: { minWidth: 22, textAlign: "center", color: "var(--dt-muted)" }, children: "\u2026" }, `e${index}`) : /* @__PURE__ */ jsx("button", { style: cell(pageItem === page), onClick: () => go(pageItem), "aria-current": pageItem === page ? "page" : void 0, children: pageItem }, pageItem)),
+    /* @__PURE__ */ jsx("button", { style: arrow(page >= pageCount), onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+  ] });
+}
+
+export { Pagination };
+//# sourceMappingURL=Pagination.mjs.map
+//# sourceMappingURL=Pagination.mjs.map

package/dist/components/data/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Pagination.tsx"],"names":[],"mappings":"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","file":"Pagination.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\ntype PageItem = number | '…';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {\n  page?: number;\n  pageCount?: number;\n  onChange?: (page: number) => void;\n  style?: CSSProperties;\n}\n\n/** Pagination — prev/next plus compact page numbers with an ellipsis. */\nexport function Pagination({ page = 1, pageCount = 1, onChange, style, ...rest }: PaginationProps) {\n  const go = (targetPage: number) => { if (targetPage >= 1 && targetPage <= pageCount && targetPage !== page) onChange?.(targetPage); };\n  const pages: PageItem[] = [];\n  const add = (targetPage: PageItem) => pages.push(targetPage);\n\n  if (pageCount <= 7) { for (let i = 1; i <= pageCount; i += 1) add(i); }\n  else {\n    add(1);\n    if (page > 3) add('…');\n    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i += 1) add(i);\n    if (page < pageCount - 2) add('…');\n    add(pageCount);\n  }\n\n  const cell = (active: boolean): CSSProperties => ({\n    minWidth: 32, height: 32, padding: '0 8px', borderRadius: 'var(--dt-radius-sm)', border: 'none', cursor: 'pointer',\n    fontSize: 13, fontWeight: 600, fontVariantNumeric: 'tabular-nums',\n    background: active ? 'var(--dt-accent)' : 'transparent',\n    color: active ? 'var(--dt-accent-ink)' : 'var(--dt-muted-strong)',\n  });\n  const arrow = (disabled: boolean): CSSProperties => ({ ...cell(false), opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' });\n\n  return (\n    <nav {...rest} style={{ display: 'inline-flex', alignItems: 'center', gap: 2, ...style }} aria-label=\"페이지\">\n      <button style={arrow(page <= 1)} onClick={() => go(page - 1)} disabled={page <= 1} aria-label=\"이전\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n      </button>\n      {pages.map((pageItem, index) => pageItem === '…'\n        ? <span key={`e${index}`} style={{ minWidth: 22, textAlign: 'center', color: 'var(--dt-muted)' }}>…</span>\n        : <button key={pageItem} style={cell(pageItem === page)} onClick={() => go(pageItem)} aria-current={pageItem === page ? 'page' : undefined}>{pageItem}</button>)}\n      <button style={arrow(page >= pageCount)} onClick={() => go(page + 1)} disabled={page >= pageCount} aria-label=\"다음\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n      </button>\n    </nav>\n  );\n}\n"]}

package/dist/components/data/StatTile.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/StatTile.tsx
+function StatTile({ label, value, delta, deltaTone = "neutral", hint, style, ...rest }) {
+  const tone = { up: "var(--dt-success)", down: "var(--dt-danger)", neutral: "var(--dt-muted)" }[deltaTone];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, style: { padding: 18, minWidth: 0, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 650, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--dt-muted)" }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, fontSize: 25, fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: value }),
+    delta || hint ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 6, display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--dt-muted)" }, children: [
+      delta ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: tone, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: delta }) : null,
+      hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: hint }) : null
+    ] }) : null
+  ] });
+}
+
+exports.StatTile = StatTile;
+//# sourceMappingURL=StatTile.cjs.map
+//# sourceMappingURL=StatTile.cjs.map

package/dist/components/data/StatTile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/StatTile.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAgBO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,SAAA,GAAY,SAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AAC5G,EAAA,MAAM,IAAA,GAAO,EAAE,EAAA,EAAI,mBAAA,EAAqB,MAAM,kBAAA,EAAoB,OAAA,EAAS,iBAAA,EAAkB,CAAE,SAAS,CAAA;AAExG,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,CAAA,EAAG,GAAG,KAAA,EAAM,EACzD,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,aAAA,EAAe,QAAA,EAAU,aAAA,EAAe,WAAA,EAAa,KAAA,EAAO,iBAAA,IAAsB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,mCACpI,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,UAAU,EAAA,EAAI,UAAA,EAAY,KAAK,UAAA,EAAY,GAAA,EAAK,eAAe,SAAA,EAAW,KAAA,EAAO,wBAAwB,kBAAA,EAAoB,cAAA,IAAmB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAChL,SAAS,IAAA,mBACTD,eAAA,CAAC,SAAI,KAAA,EAAO,EAAE,WAAW,CAAA,EAAG,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,UAAU,GAAA,EAAK,CAAA,EAAG,UAAU,EAAA,EAAI,KAAA,EAAO,mBAAkB,EAC/G,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQC,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,UAAA,EAAY,GAAA,EAAK,kBAAA,EAAoB,cAAA,EAAe,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAU,IAAA;AAAA,MAC5G,IAAA,mBAAOA,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,KAAA,EAChC,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"StatTile.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface StatTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  label: ReactNode;\n  value: ReactNode;\n  /** e.g. \"+8.4%\". */\n  delta?: ReactNode;\n  deltaTone?: 'up' | 'down' | 'neutral';\n  hint?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Metric tile — uppercase label, large tabular value, optional delta.\n * The console's KPI unit. Compose several inside a bordered stat row.\n */\nexport function StatTile({ label, value, delta, deltaTone = 'neutral', hint, style, ...rest }: StatTileProps) {\n  const tone = { up: 'var(--dt-success)', down: 'var(--dt-danger)', neutral: 'var(--dt-muted)' }[deltaTone];\n\n  return (\n    <div {...rest} style={{ padding: 18, minWidth: 0, ...style }}>\n      <div style={{ fontSize: 11, fontWeight: 650, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--dt-muted)' }}>{label}</div>\n      <div style={{ marginTop: 8, fontSize: 25, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--dt-ink-strong)', fontVariantNumeric: 'tabular-nums' }}>{value}</div>\n      {(delta || hint) ? (\n        <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--dt-muted)' }}>\n          {delta ? <span style={{ color: tone, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{delta}</span> : null}\n          {hint ? <span>{hint}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/data/StatTile.d.cts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface StatTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    label: ReactNode;
+    value: ReactNode;
+    /** e.g. "+8.4%". */
+    delta?: ReactNode;
+    deltaTone?: 'up' | 'down' | 'neutral';
+    hint?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Metric tile — uppercase label, large tabular value, optional delta.
+ * The console's KPI unit. Compose several inside a bordered stat row.
+ */
+declare function StatTile({ label, value, delta, deltaTone, hint, style, ...rest }: StatTileProps): react.JSX.Element;
+
+export { StatTile, type StatTileProps };

package/dist/components/data/StatTile.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface StatTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    label: ReactNode;
+    value: ReactNode;
+    /** e.g. "+8.4%". */
+    delta?: ReactNode;
+    deltaTone?: 'up' | 'down' | 'neutral';
+    hint?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Metric tile — uppercase label, large tabular value, optional delta.
+ * The console's KPI unit. Compose several inside a bordered stat row.
+ */
+declare function StatTile({ label, value, delta, deltaTone, hint, style, ...rest }: StatTileProps): react.JSX.Element;
+
+export { StatTile, type StatTileProps };