@j-solution/components 1.6.1 → 1.8.0

package/components/molecules/JTabs.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as V, computed as d, ref as w, watch as g, createBlock as u, openBlock as n, unref as o, normalizeClass as v, withCtx as f, createVNode as x, createElementVNode as C, createElementBlock as m, Fragment as y, renderList as k, createCommentVNode as T, toDisplayString as b, renderSlot as A, resolveDynamicComponent as B, mergeProps as D, nextTick as $ } from "vue";
+import { defineComponent as B, computed as d, ref as N, watch as x, createBlock as u, openBlock as s, unref as i, normalizeClass as v, withCtx as f, createVNode as y, createElementVNode as _, createElementBlock as m, Fragment as k, renderList as T, createCommentVNode as b, toDisplayString as $, renderSlot as j, resolveDynamicComponent as D, mergeProps as L, nextTick as P } from "vue";
 import "../shadcn/index.js";
-import { X as L } from "lucide-vue-next";
-import { cn as F } from "../../lib/utils.js";
+import { X as F } from "lucide-vue-next";
+import { cn as C } from "../../lib/utils.js";
 import H from "../atoms/JIcon.vue.js";
 import J from "../shadcn/Tabs.vue.js";
 import R from "../shadcn/TabsList.vue.js";
@@ -10,109 +10,103 @@ import X from "../shadcn/TabsContent.vue.js";
 const Y = { class: "flex-1 truncate" }, q = ["aria-label", "onClick"], G = { class: "flex-1 w-full overflow-auto" }, K = {
   key: 1,
   class: "p-4"
-}, M = { class: "text-muted-foreground" }, ne = /* @__PURE__ */ V({
+}, M = { class: "text-muted-foreground" }, ne = /* @__PURE__ */ B({
   __name: "JTabs",
   props: {
     tabs: {},
     activeTabId: {},
-    className: {},
-    listClassName: {},
+    class: {},
+    listClass: {},
     styletype: { default: "default" }
   },
   emits: ["tabChange", "tabClose", "update:activeTabId"],
-  setup(N, { emit: P }) {
-    const s = N, r = P, c = d(() => Array.isArray(s.tabs) ? s.tabs : []), a = w(
-      s.activeTabId || (c.value.length > 0 ? c.value[0]?.id : "") || ""
+  setup(S, { emit: z }) {
+    const n = S, r = z, c = d(() => Array.isArray(n.tabs) ? n.tabs : []), a = N(
+      n.activeTabId || (c.value.length > 0 ? c.value[0]?.id : "") || ""
     );
-    let i = !1;
-    g(() => s.activeTabId, (e) => {
+    let o = !1;
+    x(() => n.activeTabId, (e) => {
       e !== void 0 && e !== a.value && (a.value = e);
-    }, { immediate: !0 }), g(c, (e) => {
-      !s.activeTabId && e.length > 0 && !e.find((l) => l.id === a.value) && e[0] && (a.value = e[0].id);
+    }, { immediate: !0 }), x(c, (e) => {
+      !n.activeTabId && e.length > 0 && !e.find((l) => l.id === a.value) && e[0] && (a.value = e[0].id);
     });
-    const S = (e) => {
-      if (i) return;
+    const E = (e) => {
+      if (o) return;
       const l = String(e);
-      l !== a.value && (i = !0, a.value = l, r("update:activeTabId", l), r("tabChange", l), $(() => {
-        i = !1;
+      l !== a.value && (o = !0, a.value = l, r("update:activeTabId", l), r("tabChange", l), P(() => {
+        o = !1;
       }));
-    }, z = (e) => {
-      i || e === a.value || (i = !0, a.value = e, r("update:activeTabId", e), r("tabChange", e), $(() => {
-        i = !1;
+    }, I = (e) => {
+      o || e === a.value || (o = !0, a.value = e, r("update:activeTabId", e), r("tabChange", e), P(() => {
+        o = !1;
       }));
-    }, E = (e, l) => {
+    }, V = (e, l) => {
       e.stopPropagation(), r("tabClose", l);
-    }, I = d(() => {
-      const e = ["flex", "flex-col", "w-full", "h-full"];
-      return s.className && e.push(s.className), e.join(" ");
-    }), _ = {
+    }, w = d(() => C("flex flex-col w-full h-full", n.class)), h = {
       default: {
-        tabPaddingClass: "px-3 py-2",
-        tabTextSizeClass: "text-sm",
-        listPaddingClass: "p-2"
+        tabPaddingClass: "px-2.5 py-1",
+        tabTextSizeClass: "text-xs",
+        listPaddingClass: "p-0.5"
       },
       minimal: {
-        tabPaddingClass: "px-2 py-1",
+        tabPaddingClass: "px-2 py-0.5",
         tabTextSizeClass: "text-xs",
-        listPaddingClass: "p-1"
+        listPaddingClass: "p-0.5"
       }
-    }, p = d(() => _[s.styletype] ?? _.default), j = d(() => {
-      const e = ["w-full", "justify-start", p.value.listPaddingClass];
-      return s.listClassName && e.push(s.listClassName), e.join(" ");
-    });
-    return (e, l) => (n(), u(o(J), {
+    }, p = d(() => h[n.styletype] ?? h.default), A = d(() => C("w-full justify-start", p.value.listPaddingClass, n.listClass));
+    return (e, l) => (s(), u(i(J), {
       "model-value": a.value,
-      "onUpdate:modelValue": S,
+      "onUpdate:modelValue": E,
       orientation: "horizontal",
-      class: v(I.value)
+      class: v(w.value)
     }, {
       default: f(() => [
-        x(o(R), {
-          class: v(j.value)
+        y(i(R), {
+          class: v(A.value)
         }, {
           default: f(() => [
-            (n(!0), m(y, null, k(c.value, (t) => (n(), u(o(U), {
+            (s(!0), m(k, null, T(c.value, (t) => (s(), u(i(U), {
               key: t.id,
               value: t.id,
-              onClick: (h) => z(t.id),
-              class: v(o(F)("!flex !items-center !gap-2", p.value.tabPaddingClass, p.value.tabTextSizeClass))
+              onClick: (g) => I(t.id),
+              class: v(i(C)("!flex !items-center !gap-2", p.value.tabPaddingClass, p.value.tabTextSizeClass))
             }, {
               default: f(() => [
-                t.icon ? (n(), u(H, {
+                t.icon ? (s(), u(H, {
                   key: 0,
                   name: t.icon,
                   size: "sm",
                   class: "flex-shrink-0"
-                }, null, 8, ["name"])) : T("", !0),
-                C("span", Y, b(t.label), 1),
-                t.closable ? (n(), m("button", {
+                }, null, 8, ["name"])) : b("", !0),
+                _("span", Y, $(t.label), 1),
+                t.closable ? (s(), m("button", {
                   key: 1,
                   type: "button",
-                  class: "flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center",
+                  class: "flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center",
                   "aria-label": `${t.label} 탭 닫기`,
-                  onClick: (h) => E(h, t.id)
+                  onClick: (g) => V(g, t.id)
                 }, [
-                  x(o(L), { class: "h-3 w-3" })
-                ], 8, q)) : T("", !0)
+                  y(i(F), { class: "h-2.5 w-2.5" })
+                ], 8, q)) : b("", !0)
               ]),
               _: 2
             }, 1032, ["value", "onClick", "class"]))), 128))
           ]),
           _: 1
         }, 8, ["class"]),
-        C("div", G, [
-          (n(!0), m(y, null, k(c.value, (t) => (n(), u(o(X), {
+        _("div", G, [
+          (s(!0), m(k, null, T(c.value, (t) => (s(), u(i(X), {
             key: `content-${t.id}`,
             value: t.id,
             class: "h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col"
           }, {
             default: f(() => [
-              A(e.$slots, `content-${t.id}`, { tab: t }, () => [
-                t.component ? (n(), u(B(t.component), D({
+              j(e.$slots, `content-${t.id}`, { tab: t }, () => [
+                t.component ? (s(), u(D(t.component), L({
                   key: 0,
                   ref_for: !0
-                }, t.props || {}), null, 16)) : (n(), m("div", K, [
-                  C("p", M, b(t.label) + " 콘텐츠", 1)
+                }, t.props || {}), null, 16)) : (s(), m("div", K, [
+                  _("p", M, $(t.label) + " 콘텐츠", 1)
                 ]))
               ], !0)
             ]),

package/components/molecules/JTabs.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"JTabs.vue2.js","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['flex', 'flex-col', 'w-full', 'h-full']\r\n  \r\n  if (props.className) {\r\n    classes.push(props.className)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-3 py-2',\r\n    tabTextSizeClass: 'text-sm',\r\n    listPaddingClass: 'p-2',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-1',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  const classes = ['w-full', 'justify-start', preset.value.listPaddingClass]\r\n  \r\n  if (props.listClassName) {\r\n    classes.push(props.listClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-3 w-3\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.5rem;\r\n  gap: 0.25rem;\r\n  border-bottom: none;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n * 탭 버튼 스타일 - 명확한 구분\r\n * Tab button styles - clear distinction\r\n */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.625rem 1rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n */\r\n:deep([role=\"tablist\"][class*=\"p-1\"] [role=\"tab\"]) {\r\n  padding: 0.625rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 콘텐츠 영역에 상단 보더 추가\r\n * Add top border to content area\r\n */\r\n:deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border));\r\n}\r\n\r\n/**\r\n * 다크모드에서 콘텐츠 영역 보더 - 더 부드러운 구분\r\n * Content area border in dark mode - subtler separation\r\n */\r\n.dark :deep([role=\"tabpanel\"]) {\r\n  border-top: 1px solid hsl(var(--border) / 0.6);\r\n}\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","rootClasses","classes","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","e","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"JTabs.vue2.js","sources":["../../../../src/components/molecules/JTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/shadcn'\r\nimport type { JTabsProps, JTabsEmits } from '@/types/dynamic-tabs.types'\r\nimport { X } from 'lucide-vue-next'\r\nimport { cn } from '@/lib/utils'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\n\r\n/**\r\n * JTabs - 기본 탭 UI 컴포넌트 (molecules)\r\n * Basic Tabs UI Component\r\n * \r\n * @description\r\n * 정적인 탭 목록을 렌더링하는 기본 탭 컴포넌트입니다.\r\n * 닫기 버튼, 아이콘 등을 지원합니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JTabs \r\n *   :tabs=\"tabs\"\r\n *   :active-tab-id=\"activeId\"\r\n *   @tab-change=\"handleChange\"\r\n *   @tab-close=\"handleClose\"\r\n * />\r\n * ```\r\n */\r\n\r\ntype StyleType = 'default' | 'minimal'\r\n\r\nconst props = withDefaults(defineProps<JTabsProps>(), {\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JTabsEmits>()\r\n\r\n/**\r\n * 안전한 tabs 배열 (undefined/null 체크)\r\n * Safe tabs array (undefined/null check)\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(props.tabs) ? props.tabs : []\r\n})\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst internalActiveId = ref<string>(\r\n  props.activeTabId || (safeTabs.value.length > 0 ? safeTabs.value[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * 이벤트 처리 중 플래그 (중복 이벤트 방지)\r\n * Flag to prevent duplicate events\r\n */\r\nlet isHandlingEvent = false\r\n\r\n/**\r\n * props.activeTabId가 변경되면 내부 상태 동기화\r\n * Sync internal state when props.activeTabId changes\r\n */\r\nwatch(() => props.activeTabId, (newValue) => {\r\n  if (newValue !== undefined && newValue !== internalActiveId.value) {\r\n    internalActiveId.value = newValue\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * props.tabs가 변경되고 activeTabId가 없으면 첫 번째 탭 활성화\r\n * Activate first tab when tabs change and no activeTabId\r\n */\r\nwatch(safeTabs, (newTabs) => {\r\n  if (!props.activeTabId && newTabs.length > 0 && !newTabs.find(t => t.id === internalActiveId.value) && newTabs[0]) {\r\n    internalActiveId.value = newTabs[0].id\r\n  }\r\n})\r\n\r\n/**\r\n * 탭 값 변경 핸들러 (reka-ui TabsRoot에서 직접 호출됨)\r\n * Tab value change handler (called directly from reka-ui TabsRoot)\r\n */\r\nconst handleTabValueChange = (value: string | number) => {\r\n  if (isHandlingEvent) return\r\n  \r\n  const stringValue = String(value)\r\n  if (stringValue !== internalActiveId.value) {\r\n    isHandlingEvent = true\r\n    internalActiveId.value = stringValue\r\n    emit('update:activeTabId', stringValue)\r\n    emit('tabChange', stringValue)\r\n    // 다음 tick에서 플래그 리셋\r\n    nextTick(() => {\r\n      isHandlingEvent = false\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 탭 클릭 핸들러 (백업 방안 - reka-ui 이벤트가 작동하지 않을 경우)\r\n * Tab click handler (backup - in case reka-ui events don't work)\r\n */\r\nconst handleTabClick = (tabId: string) => {\r\n  // reka-ui 이벤트가 작동하지 않을 경우 직접 처리\r\n  // handleTabValueChange가 이미 처리했으면 중복 방지\r\n  if (isHandlingEvent || tabId === internalActiveId.value) return\r\n  \r\n  isHandlingEvent = true\r\n  internalActiveId.value = tabId\r\n  emit('update:activeTabId', tabId)\r\n  emit('tabChange', tabId)\r\n  // 다음 tick에서 플래그 리셋\r\n  nextTick(() => {\r\n    isHandlingEvent = false\r\n  })\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleCloseTab = (e: Event, tabId: string) => {\r\n  e.stopPropagation() // 탭 클릭 이벤트 전파 방지\r\n  emit('tabClose', tabId)\r\n}\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  return cn('flex flex-col w-full h-full', props.class)\r\n})\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  tabPaddingClass: string\r\n  tabTextSizeClass: string\r\n  listPaddingClass: string\r\n}> = {\r\n  default: {\r\n    tabPaddingClass: 'px-2.5 py-1',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n  minimal: {\r\n    tabPaddingClass: 'px-2 py-0.5',\r\n    tabTextSizeClass: 'text-xs',\r\n    listPaddingClass: 'p-0.5',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 탭 리스트 클래스\r\n * Tabs list classes\r\n */\r\nconst listClasses = computed(() => {\r\n  return cn('w-full justify-start', preset.value.listPaddingClass, props.listClass)\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Tabs\r\n    :model-value=\"internalActiveId\"\r\n    @update:model-value=\"handleTabValueChange\"\r\n    orientation=\"horizontal\"\r\n    :class=\"rootClasses\"\r\n  >\r\n    <!-- 탭 헤더 영역 / Tab Headers -->\r\n    <TabsList :class=\"listClasses\">\r\n      <TabsTrigger\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        :value=\"tab.id\"\r\n        @click=\"handleTabClick(tab.id)\"\r\n        :class=\"cn('!flex !items-center !gap-2', preset.tabPaddingClass, preset.tabTextSizeClass)\"\r\n      >\r\n        <!-- 탭 아이콘 (있을 경우) / Tab Icon -->\r\n        <JIcon \r\n          v-if=\"tab.icon\" \r\n          :name=\"tab.icon\" \r\n          size=\"sm\"\r\n          class=\"flex-shrink-0\"\r\n        />\r\n        \r\n        <!-- 탭 레이블 / Tab Label -->\r\n        <span class=\"flex-1 truncate\">{{ tab.label }}</span>\r\n        \r\n        <!-- 닫기 버튼 / Close Button (항상 표시) -->\r\n        <button\r\n          v-if=\"tab.closable\"\r\n          type=\"button\"\r\n          class=\"flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center\"\r\n          :aria-label=\"`${tab.label} 탭 닫기`\"\r\n          @click=\"(e) => handleCloseTab(e, tab.id)\"\r\n        >\r\n          <X class=\"h-2.5 w-2.5\" />\r\n        </button>\r\n      </TabsTrigger>\r\n    </TabsList>\r\n\r\n    <!-- 탭 콘텐츠 영역 / Tab Contents -->\r\n    <div class=\"flex-1 w-full overflow-auto\">\r\n      <TabsContent\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"`content-${tab.id}`\"\r\n        :value=\"tab.id\"\r\n        class=\"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col\"\r\n      >\r\n        <!-- 슬롯 우선 / Slot First -->\r\n        <slot :name=\"`content-${tab.id}`\" :tab=\"tab\">\r\n          <!-- 동적 컴포넌트 렌더링 / Dynamic Component Rendering -->\r\n          <component\r\n            v-if=\"tab.component\"\r\n            :is=\"tab.component\"\r\n            v-bind=\"tab.props || {}\"\r\n          />\r\n          \r\n          <!-- 기본 콘텐츠 / Default Content -->\r\n          <div v-else class=\"p-4\">\r\n            <p class=\"text-muted-foreground\">{{ tab.label }} 콘텐츠</p>\r\n          </div>\r\n        </slot>\r\n      </TabsContent>\r\n    </div>\r\n  </Tabs>\r\n</template>\r\n\r\n<style scoped>\r\n/**\r\n * 탭 리스트 스타일 - 하단 보더 제거\r\n * Tab list styles without bottom border\r\n */\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\r\n  background: hsl(var(--background));\r\n  padding: 0 0.5rem;\r\n  padding-top: 0.25rem;\r\n  gap: 0.25rem;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar) {\r\n  height: 6px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-track) {\r\n  background: transparent;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n:deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/**\r\n * 다크모드에서 스크롤바 스타일\r\n * Scrollbar styles in dark mode\r\n */\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb) {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)::-webkit-scrollbar-thumb:hover) {\r\n  background-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.dark :deep([role=\"tablist\"]:not(.ag-side-buttons)) {\r\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\r\n}\r\n\r\n/**\r\n  * 탭 버튼 스타일 - 명확한 구분\r\n  * Tab button styles - clear distinction\r\n  */\r\n:deep([role=\"tab\"]) {\r\n  position: relative;\r\n  padding: 0.375rem 0.75rem;\r\n  border-radius: 0.375rem 0.375rem 0 0;\r\n  transition: all 0.2s ease;\r\n  border: 1px solid transparent;\r\n  border-bottom: none;\r\n}\r\n\r\n/**\r\n  * Minimal 스타일 탭 버튼 - JSidebarAdvanced와 높이 맞춤\r\n  */\r\n:deep([role=\"tablist\"][class*=\"p-0.5\"] [role=\"tab\"]) {\r\n  padding: 0.25rem 0.5rem;\r\n}\r\n\r\n/**\r\n * 비활성 탭 - 명확하게 구분\r\n * Inactive tabs - clear distinction\r\n */\r\n:deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--muted) / 0.2);\r\n  color: hsl(var(--muted-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.4);\r\n  border-left: 1px solid hsl(var(--border) / 0.4);\r\n  border-right: 1px solid hsl(var(--border) / 0.4);\r\n}\r\n\r\n:deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted) / 0.4);\r\n  color: hsl(var(--foreground));\r\n}\r\n\r\n/**\r\n * 다크모드에서 비활성 탭 - 다크 배경색 사용\r\n * Inactive tabs in dark mode - use dark background\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]) {\r\n  background: hsl(var(--secondary));\r\n  color: hsl(var(--secondary-foreground));\r\n  border-top: 1px solid hsl(var(--border) / 0.5);\r\n  border-left: 1px solid hsl(var(--border) / 0.5);\r\n  border-right: 1px solid hsl(var(--border) / 0.5);\r\n}\r\n\r\n.dark :deep([role=\"tab\"][data-state=\"inactive\"]:hover) {\r\n  background: hsl(var(--muted));\r\n  color: hsl(var(--muted-foreground));\r\n}\r\n\r\n/**\r\n * 활성 탭 - 강조된 스타일\r\n * Active tab - emphasized style\r\n */\r\n:deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--background));\r\n  color: hsl(var(--foreground));\r\n  font-weight: 500;\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n  z-index: 1;\r\n}\r\n\r\n/**\r\n * 다크모드에서 활성 탭 - 배경색 명확히 구분\r\n * Active tab in dark mode - clear background distinction\r\n */\r\n.dark :deep([role=\"tab\"][data-state=\"active\"]) {\r\n  background: hsl(var(--card));\r\n  color: hsl(var(--card-foreground));\r\n  border-top: 2px solid hsl(var(--primary));\r\n  border-left: 1px solid hsl(var(--border));\r\n  border-right: 1px solid hsl(var(--border));\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n</style>\r\n\r\n"],"names":["props","__props","emit","__emit","safeTabs","computed","internalActiveId","ref","isHandlingEvent","watch","newValue","newTabs","t","handleTabValueChange","value","stringValue","nextTick","handleTabClick","tabId","handleCloseTab","rootClasses","cn","STYLE_PRESETS","preset","listClasses","_createBlock","_unref","Tabs","_createVNode","TabsList","_createElementBlock","_Fragment","_renderList","tab","TabsTrigger","$event","_normalizeClass","JIcon","_createElementVNode","_hoisted_1","_toDisplayString","e","X","_hoisted_3","TabsContent","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent","_mergeProps","_hoisted_4","_hoisted_5"],"mappings":"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"}

package/components/molecules/JTitlebar.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),b=require("../atoms/JLabel.vue.cjs"),x=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const C={class:"flex items-center gap-3 flex-1"},y={class:"flex items-center gap-2"},g={class:"p-2"},k={class:"text-sm text-muted-foreground whitespace-normal break-words"},h={key:0,class:"flex items-center gap-2"},v={key:1},_=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},showHelp:{type:Boolean},buttons:{default:()=>[]}},emits:["buttonClick","help"],setup(r,{emit:u}){const d=r,i={default:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>i[d.styletype]??i.default),a=u,m=s=>{s.onClick?.(),a("buttonClick",s)};return(s,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class))},[e.createElementVNode("div",C,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,size:"md",class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createVNode(e.unref(b.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("text-lg font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createElementVNode("p",k,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0),r.showHelp?(e.openBlock(),e.createBlock(e.unref(o.default),{key:1,name:"circleQuestionMark",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-pointer transition-colors inline-flex",l.value.infoIconClass)),onClick:c[0]||(c[0]=t=>a("help"))},null,8,["class"])):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,f)=>(e.openBlock(),e.createBlock(e.unref(p.default),{key:f,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,class:e.normalizeClass(t.size==="sm"?"h-8":t.size==="lg"?"h-11":"h-9"),onClick:q=>m(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","class","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("../atoms/JButton.vue.cjs");require("../shadcn/index.cjs");require("lucide-vue-next");const n=require("../../lib/utils.cjs");require("@internationalized/date");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");const o=require("../atoms/JIcon.vue.cjs"),b=require("../atoms/JLabel.vue.cjs"),p=require("../atoms/JPopover.vue.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */;/* empty css                        */;/* empty css                            */require("vue-sonner");const C={class:"flex items-center gap-3 flex-1"},y={class:"flex items-center gap-2"},g={class:"p-2"},k={class:"text-xs text-muted-foreground whitespace-normal break-words"},h={key:0,class:"flex items-center gap-2"},v={key:1},q=e.defineComponent({__name:"JTitlebar",props:{styletype:{default:"default"},icon:{},title:{},description:{},showHelp:{type:Boolean},buttons:{default:()=>[]},class:{}},emits:["buttonClick","help"],setup(r,{emit:d}){const i=r,a={default:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background",iconClass:"text-primary",titleClass:"text-foreground text-md",infoIconClass:"text-muted-foreground hover:text-primary"},primary:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-blue-400/30 bg-blue-500",iconClass:"text-white",titleClass:"text-white font-semibold text-md",infoIconClass:"text-white/80 hover:text-white"},accent:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-blue-200 bg-blue-50",iconClass:"text-blue-600",titleClass:"text-blue-700 font-semibold text-md",infoIconClass:"text-blue-600/70 hover:text-blue-700"},neutral:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-gray-300 bg-gray-100",iconClass:"text-gray-600",titleClass:"text-gray-700 text-md",infoIconClass:"text-gray-500 hover:text-gray-700"},elevated:{class:"flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md",iconClass:"text-primary",titleClass:"text-foreground font-semibold text-md",infoIconClass:"text-muted-foreground hover:text-primary"}},l=e.computed(()=>a[i.styletype]??a.default),c=d,m=s=>{s.onClick?.(),c("buttonClick",s)};return(s,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(l.value.class,i.class))},[e.createElementVNode("div",C,[r.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:r.icon,class:e.normalizeClass(l.value.iconClass)},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createVNode(e.unref(b.default),{text:r.title||"",class:e.normalizeClass(e.unref(n.cn)("font-semibold",l.value.titleClass))},null,8,["text","class"]),r.description?(e.openBlock(),e.createBlock(e.unref(p.default),{key:0,position:"bottom",align:"center","side-offset":8},{trigger:e.withCtx(()=>[e.createVNode(e.unref(o.default),{name:"info",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-help transition-colors inline-flex",l.value.infoIconClass))},null,8,["class"])]),default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createElementVNode("p",k,e.toDisplayString(r.description),1)])]),_:1})):e.createCommentVNode("",!0),r.showHelp?(e.openBlock(),e.createBlock(e.unref(o.default),{key:1,name:"circleQuestionMark",size:"sm",class:e.normalizeClass(e.unref(n.cn)("cursor-pointer transition-colors inline-flex",l.value.infoIconClass)),onClick:u[0]||(u[0]=t=>c("help"))},null,8,["class"])):e.createCommentVNode("",!0)])]),r.buttons&&r.buttons.length>0?(e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.buttons,(t,f)=>(e.openBlock(),e.createBlock(e.unref(x.default),{key:f,variant:t.variant,styletype:t.styletype,disabled:t.disabled,loading:t.loading,size:t.size,onClick:_=>m(t)},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createBlock(e.unref(o.default),{key:0,name:t.icon,size:"sm",class:"mr-1.5"},null,8,["name"])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),_:2},1032,["variant","styletype","disabled","loading","size","onClick"]))),128))])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"buttons")],2))}});exports.default=q;
 //# sourceMappingURL=JTitlebar.vue.cjs.map

package/components/molecules/JTitlebar.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JTitlebar.vue.cjs","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"JTitlebar.vue.cjs","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n    /** 추가 클래스 (외부 커스터마이징용) */\n    class?: string\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground text-md',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold text-md',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold text-md',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700 text-md',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold text-md',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class, props.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-xs text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :size=\"button.size\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","cn","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}

package/components/molecules/JTitlebar.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as w, computed as _, createElementBlock as c, openBlock as l, normalizeClass as o, unref as t, createElementVNode as m, createCommentVNode as i, renderSlot as z, createBlock as n, createVNode as y, withCtx as f, toDisplayString as g, Fragment as I, renderList as $ } from "vue";
-import j from "../atoms/JButton.vue.js";
+import { defineComponent as w, computed as z, createElementBlock as c, openBlock as o, normalizeClass as r, unref as t, createElementVNode as m, createCommentVNode as l, renderSlot as I, createBlock as n, createVNode as g, withCtx as f, toDisplayString as C, Fragment as B, renderList as _ } from "vue";
+import $ from "../atoms/JButton.vue.js";
 import "../shadcn/index.js";
 import "lucide-vue-next";
 import { cn as d } from "../../lib/utils.js";
@@ -13,7 +13,7 @@ import "reka-ui";
 /* empty css                      */
 import "../shadcn/avatar-variants.js";
 import u from "../atoms/JIcon.vue.js";
-import B from "../atoms/JLabel.vue.js";
+import j from "../atoms/JLabel.vue.js";
 import E from "../atoms/JPopover.vue.js";
 import "dompurify";
 /* empty css                     */
@@ -24,11 +24,13 @@ import "ag-grid-enterprise";
 /* empty css                                                                                                          */
 /* empty css                                                                                                          */
 /* empty css                  */
+/* empty css                      */
+/* empty css                          */
 import "vue-sonner";
-const S = { class: "flex items-center gap-3 flex-1" }, N = { class: "flex items-center gap-2" }, T = { class: "p-2" }, V = { class: "text-sm text-muted-foreground whitespace-normal break-words" }, H = {
+const S = { class: "flex items-center gap-3 flex-1" }, N = { class: "flex items-center gap-2" }, T = { class: "p-2" }, V = { class: "text-xs text-muted-foreground whitespace-normal break-words" }, H = {
   key: 0,
   class: "flex items-center gap-2"
-}, L = { key: 1 }, de = /* @__PURE__ */ w({
+}, J = { key: 1 }, fe = /* @__PURE__ */ w({
   __name: "JTitlebar",
   props: {
     styletype: { default: "default" },
@@ -36,123 +38,123 @@ const S = { class: "flex items-center gap-3 flex-1" }, N = { class: "flex items-
     title: {},
     description: {},
     showHelp: { type: Boolean },
-    buttons: { default: () => [] }
+    buttons: { default: () => [] },
+    class: {}
   },
   emits: ["buttonClick", "help"],
   setup(s, { emit: h }) {
-    const C = s, p = {
+    const p = s, x = {
       default: {
         // 기본: 흰 배경 + 얇은 보더 (가장 일반적)
-        class: "flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background",
+        class: "flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background",
         iconClass: "text-primary",
-        titleClass: "text-foreground",
+        titleClass: "text-foreground text-md",
         infoIconClass: "text-muted-foreground hover:text-primary"
       },
       primary: {
         // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)
         // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함
-        class: "flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500",
+        class: "flex items-center justify-between w-full h-8 px-3 border-b border-blue-400/30 bg-blue-500",
         iconClass: "text-white",
-        titleClass: "text-white font-semibold",
+        titleClass: "text-white font-semibold text-md",
         infoIconClass: "text-white/80 hover:text-white"
       },
       accent: {
         // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)
         // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함
-        class: "flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50",
+        class: "flex items-center justify-between w-full h-8 px-3 border-b border-blue-200 bg-blue-50",
         iconClass: "text-blue-600",
-        titleClass: "text-blue-700 font-semibold",
+        titleClass: "text-blue-700 font-semibold text-md",
         infoIconClass: "text-blue-600/70 hover:text-blue-700"
       },
       neutral: {
         // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)
         // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함
-        class: "flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100",
+        class: "flex items-center justify-between w-full h-8 px-3 border-b border-gray-300 bg-gray-100",
         iconClass: "text-gray-600",
-        titleClass: "text-gray-700",
+        titleClass: "text-gray-700 text-md",
         infoIconClass: "text-gray-500 hover:text-gray-700"
       },
       elevated: {
         // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)
-        class: "flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md",
+        class: "flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md",
         iconClass: "text-primary",
-        titleClass: "text-foreground font-semibold",
+        titleClass: "text-foreground font-semibold text-md",
         infoIconClass: "text-muted-foreground hover:text-primary"
       }
-    }, r = _(() => p[C.styletype] ?? p.default), x = h, k = (a) => {
-      a.onClick?.(), x("buttonClick", a);
+    }, i = z(() => x[p.styletype] ?? x.default), b = h, k = (a) => {
+      a.onClick?.(), b("buttonClick", a);
     };
-    return (a, b) => (l(), c("div", {
-      class: o(t(d)(r.value.class))
+    return (a, y) => (o(), c("div", {
+      class: r(t(d)(i.value.class, p.class))
     }, [
       m("div", S, [
-        s.icon ? (l(), n(t(u), {
+        s.icon ? (o(), n(t(u), {
           key: 0,
           name: s.icon,
-          size: "md",
-          class: o(r.value.iconClass)
-        }, null, 8, ["name", "class"])) : i("", !0),
+          class: r(i.value.iconClass)
+        }, null, 8, ["name", "class"])) : l("", !0),
         m("div", N, [
-          y(t(B), {
+          g(t(j), {
             text: s.title || "",
-            class: o(t(d)("text-lg font-semibold", r.value.titleClass))
+            class: r(t(d)("font-semibold", i.value.titleClass))
           }, null, 8, ["text", "class"]),
-          s.description ? (l(), n(t(E), {
+          s.description ? (o(), n(t(E), {
             key: 0,
             position: "bottom",
             align: "center",
             "side-offset": 8
           }, {
             trigger: f(() => [
-              y(t(u), {
+              g(t(u), {
                 name: "info",
                 size: "sm",
-                class: o(t(d)("cursor-help transition-colors inline-flex", r.value.infoIconClass))
+                class: r(t(d)("cursor-help transition-colors inline-flex", i.value.infoIconClass))
               }, null, 8, ["class"])
             ]),
             default: f(() => [
               m("div", T, [
-                m("p", V, g(s.description), 1)
+                m("p", V, C(s.description), 1)
               ])
             ]),
             _: 1
-          })) : i("", !0),
-          s.showHelp ? (l(), n(t(u), {
+          })) : l("", !0),
+          s.showHelp ? (o(), n(t(u), {
             key: 1,
             name: "circleQuestionMark",
             size: "sm",
-            class: o(t(d)("cursor-pointer transition-colors inline-flex", r.value.infoIconClass)),
-            onClick: b[0] || (b[0] = (e) => x("help"))
-          }, null, 8, ["class"])) : i("", !0)
+            class: r(t(d)("cursor-pointer transition-colors inline-flex", i.value.infoIconClass)),
+            onClick: y[0] || (y[0] = (e) => b("help"))
+          }, null, 8, ["class"])) : l("", !0)
         ])
       ]),
-      s.buttons && s.buttons.length > 0 ? (l(), c("div", H, [
-        (l(!0), c(I, null, $(s.buttons, (e, v) => (l(), n(t(j), {
+      s.buttons && s.buttons.length > 0 ? (o(), c("div", H, [
+        (o(!0), c(B, null, _(s.buttons, (e, v) => (o(), n(t($), {
           key: v,
           variant: e.variant,
           styletype: e.styletype,
           disabled: e.disabled,
           loading: e.loading,
-          class: o(e.size === "sm" ? "h-8" : e.size === "lg" ? "h-11" : "h-9"),
-          onClick: (D) => k(e)
+          size: e.size,
+          onClick: (L) => k(e)
         }, {
           default: f(() => [
-            e.icon ? (l(), n(t(u), {
+            e.icon ? (o(), n(t(u), {
               key: 0,
               name: e.icon,
               size: "sm",
               class: "mr-1.5"
-            }, null, 8, ["name"])) : i("", !0),
-            e.text ? (l(), c("span", L, g(e.text), 1)) : i("", !0)
+            }, null, 8, ["name"])) : l("", !0),
+            e.text ? (o(), c("span", J, C(e.text), 1)) : l("", !0)
           ]),
           _: 2
-        }, 1032, ["variant", "styletype", "disabled", "loading", "class", "onClick"]))), 128))
-      ])) : i("", !0),
-      z(a.$slots, "buttons")
+        }, 1032, ["variant", "styletype", "disabled", "loading", "size", "onClick"]))), 128))
+      ])) : l("", !0),
+      I(a.$slots, "buttons")
     ], 2));
   }
 });
 export {
-  de as default
+  fe as default
 };
 //# sourceMappingURL=JTitlebar.vue.js.map

package/components/molecules/JTitlebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JTitlebar.vue.js","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-14 px-4 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        size=\"md\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('text-lg font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-sm text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :class=\"button.size === 'sm' ? 'h-8' : button.size === 'lg' ? 'h-11' : 'h-9'\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAMA,IAAQC,GAwBRC,IAKD;AAAA,MACH,SAAS;AAAA;AAAA,QAEP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAEjB,SAAS;AAAA;AAAA;AAAA,QAGP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAEjB,QAAQ;AAAA;AAAA;AAAA,QAGN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAEjB,SAAS;AAAA;AAAA;AAAA,QAGP,OAAO;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAEjB,UAAU;AAAA;AAAA,QAER,OAAO;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,IACjB,GAGIC,IAASC,EAAS,MACfF,EAAcF,EAAM,SAAS,KAAKE,EAAc,OACxD,GAEKG,IAAOC,GAOPC,IAAoB,CAACC,MAA2B;AAKpD,MAAAA,EAAO,UAAA,GACPH,EAAK,eAAeG,CAAM;AAAA,IAC5B;2BAIEC,EAyEM,OAAA;AAAA,MAzEA,OAAKC,EAAEC,EAAAC,CAAA,EAAGT,EAAA,MAAO,KAAK,CAAA;AAAA,IAAA;MAE1BU,EA6CM,OA7CNC,GA6CM;AAAA,QA1CIb,EAAA,aADRc,EAKEJ,EAAAK,CAAA,GAAA;AAAA;UAHC,MAAMf,EAAA;AAAA,UACP,MAAK;AAAA,UACJ,OAAKS,EAAEP,EAAA,MAAO,SAAS;AAAA,QAAA;QAI1BU,EAkCM,OAlCNI,GAkCM;AAAA,UAhCJC,EAGEP,EAAAQ,CAAA,GAAA;AAAA,YAFC,MAAMlB,EAAA,SAAK;AAAA,YACX,OAAKS,EAAEC,EAAAC,CAAA,EAAE,yBAA0BT,EAAA,MAAO,UAAU,CAAA;AAAA,UAAA;UAK/CF,EAAA,oBADRc,EAgBWJ,EAAAS,CAAA,GAAA;AAAA;YAdT,UAAS;AAAA,YACT,OAAM;AAAA,YACL,eAAa;AAAA,UAAA;YAEH,WACT,MAIE;AAAA,cAJFF,EAIEP,EAAAK,CAAA,GAAA;AAAA,gBAHA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACJ,OAAKN,EAAEC,EAAAC,CAAA,EAAE,6CAA8CT,EAAA,MAAO,aAAa,CAAA;AAAA,cAAA;;uBAGhF,MAEM;AAAA,cAFNU,EAEM,OAFNQ,GAEM;AAAA,gBADJR,EAA4F,KAA5FS,GAA4FC,EAAlBtB,EAAA,WAAW,GAAA,CAAA;AAAA,cAAA;;;;UAMjFA,EAAA,iBADRc,EAMEJ,EAAAK,CAAA,GAAA;AAAA;YAJA,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,OAAKN,EAAEC,EAAAC,CAAA,EAAE,gDAAiDT,EAAA,MAAO,aAAa,CAAA;AAAA,YAC9E,gCAAOE,EAAI,MAAA;AAAA,UAAA;;;MAOPJ,EAAA,WAAWA,EAAA,QAAQ,SAAM,KAApCuB,KAAAf,EAcM,OAdNgB,GAcM;AAAA,SAbJD,EAAA,EAAA,GAAAf,EAYUiB,GAAA,MAAAC,EAXkB1B,EAAA,SAAO,CAAzBO,GAAQoB,YADlBb,EAYUJ,EAAAkB,CAAA,GAAA;AAAA,UAVP,KAAKD;AAAA,UACL,SAASpB,EAAO;AAAA,UAChB,WAAWA,EAAO;AAAA,UAClB,UAAUA,EAAO;AAAA,UACjB,SAASA,EAAO;AAAA,UAChB,SAAOA,EAAO,SAAI,OAAA,QAAoBA,EAAO,SAAI,OAAA,SAAA,KAAA;AAAA,UACjD,SAAK,CAAAsB,MAAEvB,EAAkBC,CAAM;AAAA,QAAA;qBAEhC,MAAyE;AAAA,YAA5DA,EAAO,aAApBO,EAAyEJ,EAAAK,CAAA,GAAA;AAAA;cAA9C,MAAMR,EAAO;AAAA,cAAM,MAAK;AAAA,cAAK,OAAM;AAAA,YAAA;YAClDA,EAAO,aAAnBC,EAAiD,QAAAsB,GAAAR,EAArBf,EAAO,IAAI,GAAA,CAAA;;;;;MAS3CwB,EAAuBC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"JTitlebar.vue.js","sources":["../../../../src/components/molecules/JTitlebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { JIcon, JLabel, JPopover, JButton } from '@/components/atoms'\nimport type { ButtonVariants } from '@/components/shadcn'\nimport { cn } from \"@/lib/utils\"\n\nexport type TitlebarButton = {\n  /** 버튼 아이콘 */\n  icon?: string\n  /** 버튼 텍스트 */\n  text?: string\n  /** 버튼 클릭 핸들러 */\n  onClick?: () => void\n  /** 버튼 variant */\n  variant?: ButtonVariants['variant']\n  /** 버튼 스타일 타입 */\n  styletype?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'ghost' | 'link' | 'sm' | 'lg' | 'icon'\n  /** 버튼 size */\n  size?: 'sm' | 'md' | 'lg'\n  /** 버튼 비활성화 */\n  disabled?: boolean\n  /** 버튼 로딩 상태 */\n  loading?: boolean\n}\n\ntype StyleType =\n  | 'default'    // 기본 스타일: 일반 페이지용 (흰 배경, 얇은 보더)\n  | 'primary'    // 강조 스타일: 주요 기능용 (밝은 파란 배경, 흰 텍스트)\n  | 'accent'     // 액센트 스타일: 부드러운 강조용 (연한 파란 배경, 진한 텍스트)\n  | 'neutral'    // 중립 스타일: 서브 페이지용 (회색 배경, 회색 텍스트)\n  | 'elevated'   // 강조 스타일: 깊이감 있는 구분 (흰 배경, 그림자, 보더)\n\nconst props = withDefaults(\n  defineProps<{\n    /** Titlebar 스타일 타입 */\n    styletype?: StyleType\n    /** 프로그램 아이콘 */\n    icon?: string\n    /** 프로그램명 */\n    title?: string\n    /** 프로그램 설명 (Popover에 표시) */\n    description?: string\n    /** 도움말 아이콘(?) 표시 여부 — 클릭 시 help 이벤트 emit */\n    showHelp?: boolean\n    /** 메인 버튼 목록 */\n    buttons?: TitlebarButton[]\n    /** 추가 클래스 (외부 커스터마이징용) */\n    class?: string\n  }>(),\n  {\n    styletype: 'default',\n    buttons: () => [],\n  }\n)\n\n/**\n * styletype -> class 매핑 (배경, 보더, 그림자 등)\n */\nconst STYLE_PRESETS: Record<StyleType, { \n  class: string\n  iconClass: string      // 아이콘 색상 클래스\n  titleClass: string     // 제목 텍스트 색상 클래스\n  infoIconClass: string  // 정보 아이콘 색상 클래스\n}> = {\n  default: {\n    // 기본: 흰 배경 + 얇은 보더 (가장 일반적)\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground text-md',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n  primary: {\n    // 강조: 밝은 파란 배경 + 흰 텍스트 (명확한 강조)\n    // text-white를 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-blue-400/30 bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-white font-semibold text-md',\n    infoIconClass: 'text-white/80 hover:text-white',\n  },\n  accent: {\n    // 액센트: 연한 파란 배경 + 진한 파란 텍스트 (부드러운 강조)\n    // text-blue-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-blue-200 bg-blue-50',\n    iconClass: 'text-blue-600',\n    titleClass: 'text-blue-700 font-semibold text-md',\n    infoIconClass: 'text-blue-600/70 hover:text-blue-700',\n  },\n  neutral: {\n    // 중립: 회색 배경 + 회색 텍스트 (확실한 구분)\n    // text-gray-700을 제거하여 버튼이 색상 상속을 받지 않도록 함\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-gray-300 bg-gray-100',\n    iconClass: 'text-gray-600',\n    titleClass: 'text-gray-700 text-md',\n    infoIconClass: 'text-gray-500 hover:text-gray-700',\n  },\n  elevated: {\n    // 강조: 흰 배경 + 그림자 + 보더 (깊이감 있는 구분)\n    class: 'flex items-center justify-between w-full h-8 px-3 border-b border-border bg-background shadow-md',\n    iconClass: 'text-primary',\n    titleClass: 'text-foreground font-semibold text-md',\n    infoIconClass: 'text-muted-foreground hover:text-primary',\n  },\n}\n\nconst preset = computed(() => {\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst emit = defineEmits<{\n  /** 버튼 클릭 이벤트 */\n  buttonClick: [button: TitlebarButton]\n  /** 도움말 아이콘 클릭 이벤트 */\n  help: []\n}>()\n\nconst handleButtonClick = (button: TitlebarButton) => {\n  // 버튼 클릭 핸들러 패턴:\n  // 1. button.onClick이 있으면 실행 (인라인 핸들러)\n  // 2. 항상 emit('buttonClick', button) 실행 (부모 컴포넌트로 전달)\n  // 주의: onClick과 emit이 모두 실행되므로 중복 처리 가능성 있음\n  button.onClick?.()\n  emit('buttonClick', button)\n}\n</script>\n\n<template>\n  <div :class=\"cn(preset.class, props.class)\">\n    <!-- 왼쪽: 아이콘 + 프로그램명 -->\n    <div class=\"flex items-center gap-3 flex-1\">\n      <!-- 아이콘 -->\n      <JIcon \n        v-if=\"icon\" \n        :name=\"icon\" \n        :class=\"preset.iconClass\"\n      />\n      \n      <!-- 프로그램명 + 정보 아이콘 + Popover -->\n      <div class=\"flex items-center gap-2\">\n        <!-- 프로그램명 -->\n        <JLabel \n          :text=\"title || ''\" \n          :class=\"cn('font-semibold', preset.titleClass)\"\n        />\n        \n        <!-- 정보 아이콘 (description이 있을 때만 표시) -->\n        <JPopover \n          v-if=\"description\" \n          position=\"bottom\"\n          align=\"center\"\n          :side-offset=\"8\"\n        >\n          <template #trigger>\n            <JIcon \n              name=\"info\" \n              size=\"sm\" \n              :class=\"cn('cursor-help transition-colors inline-flex', preset.infoIconClass)\"\n            />\n          </template>\n          <div class=\"p-2\">\n            <p class=\"text-xs text-muted-foreground whitespace-normal break-words\">{{ description }}</p>\n          </div>\n        </JPopover>\n\n        <!-- 도움말 아이콘 (showHelp일 때 표시, 클릭 시 help 이벤트) -->\n        <JIcon\n          v-if=\"showHelp\"\n          name=\"circleQuestionMark\"\n          size=\"sm\"\n          :class=\"cn('cursor-pointer transition-colors inline-flex', preset.infoIconClass)\"\n          @click=\"emit('help')\"\n        />\n      </div>\n    </div>\n\n    <!-- 오른쪽: 메인 버튼들 -->\n    <!-- buttons prop으로 정의된 버튼들 (v-if로 조건부 렌더링) -->\n    <div v-if=\"buttons && buttons.length > 0\" class=\"flex items-center gap-2\">\n      <JButton\n        v-for=\"(button, index) in buttons\"\n        :key=\"index\"\n        :variant=\"button.variant\"\n        :styletype=\"button.styletype\"\n        :disabled=\"button.disabled\"\n        :loading=\"button.loading\"\n        :size=\"button.size\"\n        @click=\"handleButtonClick(button)\"\n      >\n        <JIcon v-if=\"button.icon\" :name=\"button.icon\" size=\"sm\" class=\"mr-1.5\" />\n        <span v-if=\"button.text\">{{ button.text }}</span>\n      </JButton>\n    </div>\n\n    <!-- 버튼 슬롯 레이아웃 설명:\n         - buttons prop과 buttons slot이 모두 제공되면 함께 표시됨\n         - buttons prop: 구조화된 버튼 정의 (JButton 컴포넌트 사용)\n         - buttons slot: 완전한 커스텀 버튼 제어 가능\n         - 레이아웃: buttons prop이 먼저 렌더링되고, 그 다음 slot이 렌더링됨 -->\n    <slot name=\"buttons\" />\n  </div>\n</template>\n\n"],"names":["props","__props","STYLE_PRESETS","preset","computed","emit","__emit","handleButtonClick","button","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_createBlock","JIcon","_hoisted_2","_createVNode","JLabel","cn","JPopover","_hoisted_3","_hoisted_4","_toDisplayString","_openBlock","_hoisted_5","_Fragment","_renderList","index","JButton","$event","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}