@kb-labs/studio-ui-kit 2.118.2 → 2.119.0-canary.0b4b21a55

package/README.md

@@ -47,7 +47,7 @@ function MyComponent() {
 ## 📊 Component Stats
 
 - **Total Components:** 52
-- **With Tests:** 4/52 (8%)
+- **With Tests:** 6/52 (12%)
 
 **By Category:**
 
@@ -87,7 +87,7 @@ Essential UI components
 | **UICopyButton** | UICopyButton — one-click copy with built-in visual feedback. | ❌ |
 | **UIIcon** | UIIcon component - Icon wrapper with proper theming | ❌ |
 | **UIShimmerText** | UIShimmerText - Animated gradient shimmer on text | ❌ |
-| **UITag** | UITag component - Label/category tag with semantic colors | ❌ |
+| **UITag** | UITag component - Label/category tag with semantic colors | ✅ |
 | **UITitle** | UITitle component - Page/section titles with hierarchy | ❌ |
 
 ### Layout
@@ -153,7 +153,7 @@ Feedback and notification components
 | **UIEmptyState** | UIEmptyState component - Empty state placeholder | ❌ |
 | **UIErrorState** | UIErrorState component - Error state display | ❌ |
 | **UIResult** | UIResult component - Result page | ❌ |
-| **UISkeleton** | UISkeleton component - Loading skeleton | ❌ |
+| **UISkeleton** | UISkeleton component - Loading skeleton | ✅ |
 | **UISpin** | UISpin component - Loading spinner | ❌ |
 
 ### Overlay

package/dist/index.css

@@ -1,74 +1,74 @@
-/* src/core/UIButton.module.css */
-.uiButton {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-css */
+.uiButton_3Yg7B {
 }
-.uiButton svg {
+.uiButton_3Yg7B svg {
   color: inherit !important;
   stroke: currentColor !important;
   fill: currentColor !important;
 }
-.uiButton:disabled svg,
-.uiButton.ant-btn-disabled svg {
+.uiButton_3Yg7B:disabled svg,
+.uiButton_3Yg7B.ant-btn-disabled svg {
   opacity: 0.4;
 }
-.uiButton.ant-btn-sm svg {
+.uiButton_3Yg7B.ant-btn-sm svg {
   width: 14px;
   height: 14px;
 }
-.uiButton svg {
+.uiButton_3Yg7B svg {
   width: 16px;
   height: 16px;
 }
-.uiButton.ant-btn-lg svg {
+.uiButton_3Yg7B.ant-btn-lg svg {
   width: 18px;
   height: 18px;
 }
-.uiButton .ant-btn-icon {
+.uiButton_3Yg7B .ant-btn-icon {
   color: inherit !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.uiButton .ant-btn-icon svg {
+.uiButton_3Yg7B .ant-btn-icon svg {
   vertical-align: middle;
   display: block;
 }
-.uiButton {
+.uiButton_3Yg7B {
   transition:
     transform 100ms ease,
     box-shadow 150ms ease,
     opacity 100ms ease;
 }
-.uiButton:active:not(:disabled):not(.ant-btn-disabled) {
+.uiButton_3Yg7B:active:not(:disabled):not(.ant-btn-disabled) {
   transform: scale(0.96);
   transition: transform 60ms ease;
 }
-.uiButton.ant-btn-primary {
+.uiButton_3Yg7B.ant-btn-primary {
   transition: transform 150ms ease, box-shadow 150ms ease;
 }
-.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {
+.uiButton_3Yg7B.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);
 }
-.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {
+.uiButton_3Yg7B.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {
   transform: scale(0.97);
   box-shadow: none;
   transition: transform 60ms ease;
 }
-.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),
-.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {
+.uiButton_3Yg7B.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),
+.uiButton_3Yg7B.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {
   opacity: 0.75;
 }
-.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),
-.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {
+.uiButton_3Yg7B.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),
+.uiButton_3Yg7B.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {
   background: rgba(0, 0, 0, 0.06) !important;
   transform: scale(0.95);
 }
-[dir=rtl] .uiButton .ant-btn-icon {
+[dir=rtl] .uiButton_3Yg7B .ant-btn-icon {
   transform: scaleX(-1);
 }
 
-/* src/core/UICard.module.css */
-.card {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-css */
+.card_0vX7- {
   --card-accent: var(--border-primary);
   box-shadow: 0 1px 2px var(--shadow);
   transition:
@@ -77,7 +77,7 @@
     border-color 200ms ease;
   position: relative;
 }
-.card::before {
+.card_0vX7-::before {
   content: "";
   position: absolute;
   top: 0;
@@ -89,17 +89,17 @@
   opacity: 0;
   transition: opacity 200ms ease;
 }
-.card.accented::before {
+.card_0vX7-.accented_yICrq::before {
   opacity: 1;
 }
-.card.hoverable:hover {
+.card_0vX7-.hoverable_NBVEA:hover {
   box-shadow: 0 8px 20px -4px var(--shadow-hover);
   border-color: var(--border-secondary);
   transform: translateY(-1px);
 }
 
-/* src/core/UITag.module.css */
-.kb-ui-tag {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-css */
+.kb-ui-tag_D2ji0 {
   transition:
     opacity 100ms ease,
     transform 100ms ease,
@@ -108,105 +108,105 @@
     background-color 150ms ease,
     filter 150ms ease;
 }
-.kb-ui-tag:not([disabled]):hover {
+.kb-ui-tag_D2ji0:not([disabled]):hover {
   filter: brightness(1.06);
 }
-.kb-ui-tag--clickable {
+.kb-ui-tag--clickable_FGDC8 {
   cursor: pointer;
 }
-.kb-ui-tag--clickable:not([disabled]):hover {
+.kb-ui-tag--clickable_FGDC8:not([disabled]):hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));
   border-color: var(--border-secondary);
 }
-.kb-ui-tag--clickable:not([disabled]):active {
+.kb-ui-tag--clickable_FGDC8:not([disabled]):active {
   opacity: 0.7;
   transform: scale(0.94);
   box-shadow: none;
   transition: opacity 50ms ease, transform 50ms ease;
 }
 
-/* src/core/UIIcon.module.css */
-.uiIcon {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-css */
+.uiIcon_k0ec4 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
 }
-.uiIcon svg {
+.uiIcon_k0ec4 svg {
   color: currentColor;
   stroke: currentColor;
   fill: none;
   display: block;
 }
-.uiIcon .anticon {
+.uiIcon_k0ec4 .anticon {
   color: currentColor;
 }
-.uiIcon.clickable {
+.uiIcon_k0ec4.clickable_OssZj {
   cursor: pointer;
   transition: opacity 0.2s ease, transform 0.1s ease;
 }
-.uiIcon.clickable:hover {
+.uiIcon_k0ec4.clickable_OssZj:hover {
   opacity: 0.8;
 }
-.uiIcon.clickable:active {
+.uiIcon_k0ec4.clickable_OssZj:active {
   transform: scale(0.95);
 }
-.uiIcon.size-xs {
+.uiIcon_k0ec4.size-xs_M79Cj {
   font-size: 12px;
   width: 12px;
   height: 12px;
 }
-.uiIcon.size-sm {
+.uiIcon_k0ec4.size-sm_10jDl {
   font-size: 14px;
   width: 14px;
   height: 14px;
 }
-.uiIcon.size-base {
+.uiIcon_k0ec4.size-base_h9Lkp {
   font-size: 16px;
   width: 16px;
   height: 16px;
 }
-.uiIcon.size-lg {
+.uiIcon_k0ec4.size-lg_O0C5x {
   font-size: 20px;
   width: 20px;
   height: 20px;
 }
-.uiIcon.size-xl {
+.uiIcon_k0ec4.size-xl_WXfPC {
   font-size: 24px;
   width: 24px;
   height: 24px;
 }
-.uiIcon.size-2xl {
+.uiIcon_k0ec4.size-2xl_32DCm {
   font-size: 32px;
   width: 32px;
   height: 32px;
 }
-.uiIcon.color-primary {
+.uiIcon_k0ec4.color-primary_h3CLu {
   color: var(--link, #2563EB);
 }
-.uiIcon.color-secondary {
+.uiIcon_k0ec4.color-secondary_4pb5w {
   color: var(--text-secondary, #6B7280);
 }
-.uiIcon.color-success {
+.uiIcon_k0ec4.color-success_O8h6- {
   color: var(--success, #16A34A);
 }
-.uiIcon.color-warning {
+.uiIcon_k0ec4.color-warning_dYWdv {
   color: var(--warning, #F59E0B);
 }
-.uiIcon.color-error {
+.uiIcon_k0ec4.color-error_adjhG {
   color: var(--error, #DC2626);
 }
-.uiIcon.color-info {
+.uiIcon_k0ec4.color-info_TwzBK {
   color: var(--info, #0EA5E9);
 }
-.uiIcon.color-inherit {
+.uiIcon_k0ec4.color-inherit_YCf-Z {
   color: inherit;
 }
-.uiIcon.spin {
-  animation: uiIconSpin 1s linear infinite;
+.uiIcon_k0ec4.spin_rwV9G {
+  animation: uiIconSpin_JA9h9 1s linear infinite;
 }
-@keyframes uiIconSpin {
+@keyframes uiIconSpin_JA9h9 {
   from {
     transform: rotate(0deg);
   }
@@ -214,14 +214,14 @@
     transform: rotate(360deg);
   }
 }
-.uiIcon.disabled {
+.uiIcon_k0ec4.disabled_sSgts {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* src/core/UIShimmerText.module.css */
-.shimmer {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-css */
+.shimmer_Vu6DO {
   background:
     linear-gradient(
       90deg,
@@ -235,10 +235,10 @@
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
-  animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;
+  animation: shimmerMove_64hFq var(--shimmer-duration, 2s) linear infinite;
   display: inline-block;
 }
-@keyframes shimmerMove {
+@keyframes shimmerMove_64hFq {
   0% {
     background-position: 100% 0;
   }
@@ -247,8 +247,8 @@
   }
 }
 
-/* src/feedback/UISkeleton.module.css */
-@keyframes skeletonLoading {
+/* kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-css */
+@keyframes skeletonLoading_Cb6ey {
   0% {
     background-position: 100% 50%;
   }
@@ -256,7 +256,7 @@
     background-position: 0% 50%;
   }
 }
-.skeletonText {
-  animation: skeletonLoading 1.4s ease infinite;
+.skeletonText_D4KLj {
+  animation: skeletonLoading_Cb6ey 1.4s ease infinite;
 }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UICard.module.css","../src/core/UITag.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css","../src/feedback/UISkeleton.module.css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n */\n\n.uiButton {\n  /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton svg {\n  color: inherit !important;\n  stroke: currentColor !important;\n  fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton:disabled svg,\n.uiButton.ant-btn-disabled svg {\n  opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton.ant-btn-sm svg {\n  /* Small button icons */\n  width: 14px;\n  height: 14px;\n}\n\n.uiButton svg {\n  /* Default (middle) button icons */\n  width: 16px;\n  height: 16px;\n}\n\n.uiButton.ant-btn-lg svg {\n  /* Large button icons */\n  width: 18px;\n  height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton .ant-btn-icon {\n  /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n  color: inherit !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.uiButton .ant-btn-icon svg {\n  /* SVG inside icon wrapper */\n  vertical-align: middle;\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton {\n  transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: scale(0.96);\n  transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton.ant-btn-primary {\n  transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: scale(0.97);\n  box-shadow: none;\n  transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n  opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n  background: rgba(0, 0, 0, 0.06) !important;\n  transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton .ant-btn-icon {\n  /* Mirror icon position in RTL */\n  transform: scaleX(-1);\n}\n",".card {\n  --card-accent: var(--border-primary);\n  box-shadow: 0 1px 2px var(--shadow);\n  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;\n  position: relative;\n}\n\n.card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 16px;\n  right: 16px;\n  height: 2px;\n  border-radius: 0 0 2px 2px;\n  background: var(--card-accent);\n  opacity: 0;\n  transition: opacity 200ms ease;\n}\n\n.card.accented::before {\n  opacity: 1;\n}\n\n.card.hoverable:hover {\n  box-shadow: 0 8px 20px -4px var(--shadow-hover);\n  border-color: var(--border-secondary);\n  transform: translateY(-1px);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n *\n * Class name is hardcoded ('kb-ui-tag') because tsup doesn't map\n * CSS module class names in the dist bundle — styles.className is always {}.\n */\n\n.kb-ui-tag {\n  transition: opacity 100ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease, filter 150ms ease;\n}\n\n/*\n * All tags, even plain informational ones (e.g. capability badges on a\n * card), get a subtle brightness lift on hover so the whole UI feels alive.\n */\n.kb-ui-tag:not([disabled]):hover {\n  filter: brightness(1.06);\n}\n\n/* Tags with an onClick additionally get lift/press feedback — they're pressable. */\n.kb-ui-tag--clickable {\n  cursor: pointer;\n}\n\n.kb-ui-tag--clickable:not([disabled]):hover {\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));\n  border-color: var(--border-secondary);\n}\n\n.kb-ui-tag--clickable:not([disabled]):active {\n  opacity: 0.7;\n  transform: scale(0.94);\n  box-shadow: none;\n  transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon svg {\n  color: currentColor;\n  stroke: currentColor;\n  fill: none; /* Most icon libraries use stroke, not fill */\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n */\n.uiIcon .anticon {\n  color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon.clickable {\n  cursor: pointer;\n  transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon.clickable:hover {\n  opacity: 0.8;\n}\n\n.uiIcon.clickable:active {\n  transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon.size-xs {\n  font-size: 12px;\n  width: 12px;\n  height: 12px;\n}\n\n.uiIcon.size-sm {\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n}\n\n.uiIcon.size-base {\n  font-size: 16px;\n  width: 16px;\n  height: 16px;\n}\n\n.uiIcon.size-lg {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n.uiIcon.size-xl {\n  font-size: 24px;\n  width: 24px;\n  height: 24px;\n}\n\n.uiIcon.size-2xl {\n  font-size: 32px;\n  width: 32px;\n  height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon.color-primary {\n  color: var(--link, #2563EB);\n}\n\n.uiIcon.color-secondary {\n  color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon.color-success {\n  color: var(--success, #16A34A);\n}\n\n.uiIcon.color-warning {\n  color: var(--warning, #F59E0B);\n}\n\n.uiIcon.color-error {\n  color: var(--error, #DC2626);\n}\n\n.uiIcon.color-info {\n  color: var(--info, #0EA5E9);\n}\n\n.uiIcon.color-inherit {\n  color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon.spin {\n  animation: uiIconSpin 1s linear infinite;\n}\n\n@keyframes uiIconSpin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/*\n * Disabled state\n */\n.uiIcon.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer {\n  background: linear-gradient(\n    90deg,\n    var(--shimmer-color-1, #888) 0%,\n    var(--shimmer-color-2, #888) 25%,\n    var(--shimmer-highlight, #fff) 50%,\n    var(--shimmer-color-2, #888) 75%,\n    var(--shimmer-color-1, #888) 100%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;\n  display: inline-block;\n}\n\n@keyframes shimmerMove {\n  0%   { background-position: 100% 0; }\n  100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading {\n  0%   { background-position: 100% 50%; }\n  100% { background-position: 0%   50%; }\n}\n\n.skeletonText {\n  animation: skeletonLoading 1.4s ease infinite;\n}\n"],"mappings":";AAOA,CAAC;AAED;AAQA,CAVC,SAUS;AACR,SAAO;AACP,UAAQ;AACR,QAAM;AACR;AAKA,CAnBC,QAmBQ,UAAU;AACnB,CApBC,QAoBQ,CAAC,iBAAiB;AACzB,WAAS;AACX;AAKA,CA3BC,QA2BQ,CAAC,WAAW;AAEnB,SAAO;AACP,UAAQ;AACV;AAEA,CAjCC,SAiCS;AAER,SAAO;AACP,UAAQ;AACV;AAEA,CAvCC,QAuCQ,CAAC,WAAW;AAEnB,SAAO;AACP,UAAQ;AACV;AAMA,CAjDC,SAiDS,CAAC;AAET,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACnB;AAEA,CAzDC,SAyDS,CARC,aAQa;AAEtB,kBAAgB;AAChB,WAAS;AACX;AAKA,CAlEC;AAmEC;AAAA,IAAY,UAAU,MAAM,IAAI;AAAA,IAAE,WAAW,MAAM,IAAI;AAAA,IAAE,QAAQ,MAAM;AACzE;AAEA,CAtEC,QAsEQ,OAAO,KAAK,UAAU,KAAK,CAlD1B;AAmDR,aAAW,MAAM;AACjB,cAAY,UAAU,KAAK;AAC7B;AAKA,CA9EC,QA8EQ,CAAC;AACR,cAAY,UAAU,MAAM,IAAI,EAAE,WAAW,MAAM;AACrD;AAEA,CAlFC,QAkFQ,CAJC,eAIe,MAAM,KAAK,UAAU,KAAK,CA9DzC;AA+DR,aAAW,WAAW;AACtB,cAAY,EAAE,IAAI,KAAK,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC5C;AAEA,CAvFC,QAuFQ,CATC,eASe,OAAO,KAAK,UAAU,KAAK,CAnE1C;AAoER,aAAW,MAAM;AACjB,cAAY;AACZ,cAAY,UAAU,KAAK;AAC7B;AAKA,CAhGC,QAgGQ,CAAC,eAAe,OAAO,KAAK,UAAU,KAAK,CA5E1C;AA6EV,CAjGC,QAiGQ,CAAC,cAAc,OAAO,KAAK,UAAU,KAAK,CA7EzC;AA8ER,WAAS;AACX;AAKA,CAxGC,QAwGQ,CAAC,YAAY,OAAO,KAAK,UAAU,KAAK,CApFvC;AAqFV,CAzGC,QAyGQ,CAAC,YAAY,OAAO,KAAK,UAAU,KAAK,CArFvC;AAsFR,cAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1B,aAAW,MAAM;AACnB;AAKA,CAAC,SAAW,CAjHX,SAiHqB,CAhEX;AAkET,aAAW,OAAO;AACpB;;;AC3HA,CAAC;AACC,iBAAe,IAAI;AACnB,cAAY,EAAE,IAAI,IAAI,IAAI;AAC1B;AAAA,IAAY,WAAW,MAAM,IAAI;AAAA,IAAE,UAAU,MAAM,IAAI;AAAA,IAAE,aAAa,MAAM;AAC5E,YAAU;AACZ;AAEA,CAPC,IAOI;AACH,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,iBAAe,EAAE,EAAE,IAAI;AACvB,cAAY,IAAI;AAChB,WAAS;AACT,cAAY,QAAQ,MAAM;AAC5B;AAEA,CApBC,IAoBI,CAAC,QAAQ;AACZ,WAAS;AACX;AAEA,CAxBC,IAwBI,CAAC,SAAS;AACb,cAAY,EAAE,IAAI,KAAK,KAAK,IAAI;AAChC,gBAAc,IAAI;AAClB,aAAW,WAAW;AACxB;;;ACrBA,CAAC;AACC;AAAA,IAAY,QAAQ,MAAM,IAAI;AAAA,IAAE,UAAU,MAAM,IAAI;AAAA,IAAE,WAAW,MAAM,IAAI;AAAA,IAAE,aAAa,MAAM,IAAI;AAAA,IAAE,iBAAiB,MAAM,IAAI;AAAA,IAAE,OAAO,MAAM;AAClJ;AAMA,CARC,SAQS,KAAK,CAAC,UAAU;AACxB,UAAQ,WAAW;AACrB;AAGA,CAAC;AACC,UAAQ;AACV;AAEA,CAJC,oBAIoB,KAAK,CAAC,UAAU;AACnC,aAAW,WAAW;AACtB,cAAY,EAAE,IAAI,IAAI,IAAI,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxD,gBAAc,IAAI;AACpB;AAEA,CAVC,oBAUoB,KAAK,CAAC,UAAU;AACnC,WAAS;AACT,aAAW,MAAM;AACjB,cAAY;AACZ,cAAY,QAAQ,KAAK,IAAI,EAAE,UAAU,KAAK;AAChD;;;AC5BA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,kBAAgB;AAClB;AAMA,CAXC,OAWO;AACN,SAAO;AACP,UAAQ;AACR,QAAM;AACN,WAAS;AACX;AAMA,CAtBC,OAsBO,CAAC;AACP,SAAO;AACT;AAKA,CA7BC,MA6BM,CAAC;AACN,UAAQ;AACR,cAAY,QAAQ,KAAK,IAAI,EAAE,UAAU,KAAK;AAChD;AAEA,CAlCC,MAkCM,CALC,SAKS;AACf,WAAS;AACX;AAEA,CAtCC,MAsCM,CATC,SASS;AACf,aAAW,MAAM;AACnB;AAKA,CA7CC,MA6CM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CAnDC,MAmDM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CAzDC,MAyDM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CA/DC,MA+DM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CArEC,MAqEM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CA3EC,MA2EM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAKA,CApFC,MAoFM,CAAC;AACN,SAAO,IAAI,MAAM,EAAE;AACrB;AAEA,CAxFC,MAwFM,CAAC;AACN,SAAO,IAAI,gBAAgB,EAAE;AAC/B;AAEA,CA5FC,MA4FM,CAAC;AACN,SAAO,IAAI,SAAS,EAAE;AACxB;AAEA,CAhGC,MAgGM,CAAC;AACN,SAAO,IAAI,SAAS,EAAE;AACxB;AAEA,CApGC,MAoGM,CAAC;AACN,SAAO,IAAI,OAAO,EAAE;AACtB;AAEA,CAxGC,MAwGM,CAAC;AACN,SAAO,IAAI,MAAM,EAAE;AACrB;AAEA,CA5GC,MA4GM,CAAC;AACN,SAAO;AACT;AAKA,CAnHC,MAmHM,CAAC;AACN,aAAW,WAAW,GAAG,OAAO;AAClC;AAEA,WAHa;AAIX;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAKA,CAnIC,MAmIM,CAAC;AACN,WAAS;AACT,UAAQ;AACR,kBAAgB;AAClB;;;ACzIA,CAAC;AACC;AAAA,IAAY;AAAA,MACV,KAAK;AAAA,MACL,IAAI,iBAAiB,EAAE,MAAM,EAAE;AAAA,MAC/B,IAAI,iBAAiB,EAAE,MAAM,GAAG;AAAA,MAChC,IAAI,mBAAmB,EAAE,MAAM,GAAG;AAAA,MAClC,IAAI,iBAAiB,EAAE,MAAM,GAAG;AAAA,MAChC,IAAI,iBAAiB,EAAE,MAAM;AAE/B,mBAAiB,KAAK;AACtB,2BAAyB;AACzB,mBAAiB;AACjB,2BAAyB;AACzB,SAAO;AACP,aAAW,YAAY,IAAI,kBAAkB,EAAE,IAAI,OAAO;AAC1D,WAAS;AACX;AAEA,WAJa;AAKX;AAAO,yBAAqB,KAAK;AAAG;AACpC;AAAO,yBAAqB,MAAM;AAAG;AACvC;;;AC1BA,WAAW;AACT;AAAO,yBAAqB,KAAK;AAAK;AACtC;AAAO,yBAAqB,GAAK;AAAK;AACxC;AAEA,CAAC;AACC,aAAW,gBAAgB,KAAK,KAAK;AACvC;","names":[]}
+{"version":3,"sources":["kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-css","kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-css","kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-css","kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-css","kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-css","kb-css-modules-css:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n *\n * `.ant-btn-*` / `.ant-btn-icon` are Ant Design's own (unscoped) classes on the\n * rendered DOM — wrapped in :global() so CSS Modules doesn't hash them away\n * from under the real selectors.\n */\n\n.uiButton_3Yg7B {\n  /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton_3Yg7B svg {\n  color: inherit !important;\n  stroke: currentColor !important;\n  fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton_3Yg7B:disabled svg,\n.uiButton_3Yg7B.ant-btn-disabled svg {\n  opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton_3Yg7B.ant-btn-sm svg {\n  /* Small button icons */\n  width: 14px;\n  height: 14px;\n}\n\n.uiButton_3Yg7B svg {\n  /* Default (middle) button icons */\n  width: 16px;\n  height: 16px;\n}\n\n.uiButton_3Yg7B.ant-btn-lg svg {\n  /* Large button icons */\n  width: 18px;\n  height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton_3Yg7B .ant-btn-icon {\n  /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n  color: inherit !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.uiButton_3Yg7B .ant-btn-icon svg {\n  /* SVG inside icon wrapper */\n  vertical-align: middle;\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton_3Yg7B {\n  transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton_3Yg7B:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: scale(0.96);\n  transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton_3Yg7B.ant-btn-primary {\n  transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton_3Yg7B.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton_3Yg7B.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: scale(0.97);\n  box-shadow: none;\n  transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton_3Yg7B.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton_3Yg7B.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n  opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton_3Yg7B.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton_3Yg7B.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n  background: rgba(0, 0, 0, 0.06) !important;\n  transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton_3Yg7B .ant-btn-icon {\n  /* Mirror icon position in RTL */\n  transform: scaleX(-1);\n}\n",".card_0vX7- {\n  --card-accent: var(--border-primary);\n  box-shadow: 0 1px 2px var(--shadow);\n  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;\n  position: relative;\n}\n\n.card_0vX7-::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 16px;\n  right: 16px;\n  height: 2px;\n  border-radius: 0 0 2px 2px;\n  background: var(--card-accent);\n  opacity: 0;\n  transition: opacity 200ms ease;\n}\n\n.card_0vX7-.accented_yICrq::before {\n  opacity: 1;\n}\n\n.card_0vX7-.hoverable_NBVEA:hover {\n  box-shadow: 0 8px 20px -4px var(--shadow-hover);\n  border-color: var(--border-secondary);\n  transform: translateY(-1px);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n */\n\n.kb-ui-tag_D2ji0 {\n  transition: opacity 100ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease, filter 150ms ease;\n}\n\n/*\n * All tags, even plain informational ones (e.g. capability badges on a\n * card), get a subtle brightness lift on hover so the whole UI feels alive.\n */\n.kb-ui-tag_D2ji0:not([disabled]):hover {\n  filter: brightness(1.06);\n}\n\n/* Tags with an onClick additionally get lift/press feedback — they're pressable. */\n.kb-ui-tag--clickable_FGDC8 {\n  cursor: pointer;\n}\n\n.kb-ui-tag--clickable_FGDC8:not([disabled]):hover {\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));\n  border-color: var(--border-secondary);\n}\n\n.kb-ui-tag--clickable_FGDC8:not([disabled]):active {\n  opacity: 0.7;\n  transform: scale(0.94);\n  box-shadow: none;\n  transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon_k0ec4 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon_k0ec4 svg {\n  color: currentColor;\n  stroke: currentColor;\n  fill: none; /* Most icon libraries use stroke, not fill */\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n * `.anticon` is Ant Design's own (unscoped) class — wrapped in :global()\n * so CSS Modules doesn't hash it away from the real DOM class.\n */\n.uiIcon_k0ec4 .anticon {\n  color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon_k0ec4.clickable_OssZj {\n  cursor: pointer;\n  transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon_k0ec4.clickable_OssZj:hover {\n  opacity: 0.8;\n}\n\n.uiIcon_k0ec4.clickable_OssZj:active {\n  transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon_k0ec4.size-xs_M79Cj {\n  font-size: 12px;\n  width: 12px;\n  height: 12px;\n}\n\n.uiIcon_k0ec4.size-sm_10jDl {\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n}\n\n.uiIcon_k0ec4.size-base_h9Lkp {\n  font-size: 16px;\n  width: 16px;\n  height: 16px;\n}\n\n.uiIcon_k0ec4.size-lg_O0C5x {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n.uiIcon_k0ec4.size-xl_WXfPC {\n  font-size: 24px;\n  width: 24px;\n  height: 24px;\n}\n\n.uiIcon_k0ec4.size-2xl_32DCm {\n  font-size: 32px;\n  width: 32px;\n  height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon_k0ec4.color-primary_h3CLu {\n  color: var(--link, #2563EB);\n}\n\n.uiIcon_k0ec4.color-secondary_4pb5w {\n  color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon_k0ec4.color-success_O8h6- {\n  color: var(--success, #16A34A);\n}\n\n.uiIcon_k0ec4.color-warning_dYWdv {\n  color: var(--warning, #F59E0B);\n}\n\n.uiIcon_k0ec4.color-error_adjhG {\n  color: var(--error, #DC2626);\n}\n\n.uiIcon_k0ec4.color-info_TwzBK {\n  color: var(--info, #0EA5E9);\n}\n\n.uiIcon_k0ec4.color-inherit_YCf-Z {\n  color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon_k0ec4.spin_rwV9G {\n  animation: uiIconSpin_JA9h9 1s linear infinite;\n}\n\n@keyframes uiIconSpin_JA9h9 {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/*\n * Disabled state\n */\n.uiIcon_k0ec4.disabled_sSgts {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer_Vu6DO {\n  background: linear-gradient(\n    90deg,\n    var(--shimmer-color-1, #888) 0%,\n    var(--shimmer-color-2, #888) 25%,\n    var(--shimmer-highlight, #fff) 50%,\n    var(--shimmer-color-2, #888) 75%,\n    var(--shimmer-color-1, #888) 100%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: shimmerMove_64hFq var(--shimmer-duration, 2s) linear infinite;\n  display: inline-block;\n}\n\n@keyframes shimmerMove_64hFq {\n  0%   { background-position: 100% 0; }\n  100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading_Cb6ey {\n  0%   { background-position: 100% 50%; }\n  100% { background-position: 0%   50%; }\n}\n\n.skeletonText_D4KLj {\n  animation: skeletonLoading_Cb6ey 1.4s ease infinite;\n}\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -3,10 +3,12 @@ import { typography, spacing } from '@kb-labs/studio-ui-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React4 from 'react';
 import { useMemo } from 'react';
+import clsx from 'clsx';
 import { Line, Column, Area, Pie, Bar } from '@ant-design/charts';
 import dayjs from 'dayjs';
 import { useNavigate, useSearchParams, useParams } from 'react-router-dom';
 import { marked } from 'marked';
+import DOMPurify from 'dompurify';
 
 // src/primitives/UIText.tsx
 var { useToken } = theme;
@@ -187,11 +189,11 @@ function UIBadge({ variant = "default", children, ...props }) {
   );
 }
 
-// src/core/UIButton.module.css
-var UIButton_default = {};
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-tokens
+var UIButton_module_default = { "uiButton": "uiButton_3Yg7B" };
 var UIButton = React4.forwardRef(
   function UIButton2({ variant = "default", className, ...rest }, ref) {
-    const combinedClassName = [UIButton_default.uiButton, className].filter(Boolean).join(" ");
+    const combinedClassName = [UIButton_module_default.uiButton, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -204,8 +206,8 @@ var UIButton = React4.forwardRef(
   }
 );
 
-// src/core/UICard.module.css
-var UICard_default = {};
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-tokens
+var UICard_module_default = { "card": "card_0vX7-", "accented": "accented_yICrq", "hoverable": "hoverable_NBVEA" };
 var { useToken: useToken3 } = theme;
 var variantTokens = {
   default: { accent: "var(--border-primary)" },
@@ -243,12 +245,12 @@ function UICard({
       hoverable: false,
       loading,
       ...rest,
-      className: [
-        UICard_default.card,
-        hoverable && UICard_default.hoverable,
-        status !== "default" && UICard_default.accented,
+      className: clsx(
+        UICard_module_default.card,
+        hoverable && UICard_module_default.hoverable,
+        status !== "default" && UICard_module_default.accented,
         rest.className
-      ].filter(Boolean).join(" "),
+      ),
       style: {
         borderColor: token.colorBorder,
         overflow: "hidden",
@@ -262,6 +264,9 @@ function UICard({
     }
   );
 }
+
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-tokens
+var UITag_module_default = { "kb-ui-tag": "kb-ui-tag_D2ji0", "kb-ui-tag--clickable": "kb-ui-tag--clickable_FGDC8" };
 function UITag({
   variant = "default",
   color,
@@ -281,7 +286,11 @@ function UITag({
     default: void 0,
     neutral: void 0
   };
-  const combinedClassName = ["kb-ui-tag", onClick && "kb-ui-tag--clickable", className].filter(Boolean).join(" ");
+  const combinedClassName = clsx(
+    UITag_module_default["kb-ui-tag"],
+    onClick && UITag_module_default["kb-ui-tag--clickable"],
+    className
+  );
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -324,8 +333,8 @@ function UITitle({
   return /* @__PURE__ */ jsx(AntTitle, { level, className, style: { marginBottom: spacing[3], ...style }, children });
 }
 
-// src/core/UIIcon.module.css
-var UIIcon_default = {};
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-tokens
+var UIIcon_module_default = { "uiIcon": "uiIcon_k0ec4", "clickable": "clickable_OssZj", "size-xs": "size-xs_M79Cj", "size-sm": "size-sm_10jDl", "size-base": "size-base_h9Lkp", "size-lg": "size-lg_O0C5x", "size-xl": "size-xl_WXfPC", "size-2xl": "size-2xl_32DCm", "color-primary": "color-primary_h3CLu", "color-secondary": "color-secondary_4pb5w", "color-success": "color-success_O8h6-", "color-warning": "color-warning_dYWdv", "color-error": "color-error_adjhG", "color-info": "color-info_TwzBK", "color-inherit": "color-inherit_YCf-Z", "spin": "spin_rwV9G", "uiIconSpin": "uiIconSpin_JA9h9", "disabled": "disabled_sSgts" };
 var _iconRenderer = null;
 function registerIconRenderer(renderer) {
   _iconRenderer = renderer;
@@ -340,15 +349,15 @@ function UIIcon({
   className,
   style: customStyle
 }) {
-  const classes = [
-    UIIcon_default.uiIcon,
+  const classes = clsx(
+    UIIcon_module_default.uiIcon,
     "anticon",
-    UIIcon_default[`size-${size}`],
-    UIIcon_default[`color-${color}`],
-    spin && UIIcon_default.spin,
-    onClick && UIIcon_default.clickable,
+    UIIcon_module_default[`size-${size}`],
+    UIIcon_module_default[`color-${color}`],
+    spin && UIIcon_module_default.spin,
+    onClick && UIIcon_module_default.clickable,
     className
-  ].filter(Boolean).join(" ");
+  );
   let iconElement = null;
   const iconName = name || (typeof icon === "string" ? icon : null);
   if (iconName) {
@@ -412,8 +421,8 @@ function useUITheme() {
   return result;
 }
 
-// src/core/UIShimmerText.module.css
-var UIShimmerText_default = {};
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-tokens
+var UIShimmerText_module_default = { "shimmer": "shimmer_Vu6DO"};
 function UIShimmerText({
   children,
   color = "var(--text-secondary, #9CA3AF)",
@@ -425,7 +434,7 @@ function UIShimmerText({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: [UIShimmerText_default.shimmer, className].filter(Boolean).join(" "),
+      className: clsx(UIShimmerText_module_default.shimmer, className),
       style: {
         "--shimmer-color-1": color,
         "--shimmer-color-2": color,
@@ -1719,8 +1728,8 @@ function UIErrorState({
   ] }) });
 }
 
-// src/feedback/UISkeleton.module.css
-var UISkeleton_default = {};
+// kb-css-modules-tokens:/home/runner/work/kb-labs/kb-labs/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-tokens
+var UISkeleton_module_default = { "skeletonText": "skeletonText_D4KLj"};
 function UISkeleton({
   loading = true,
   children,
@@ -1777,7 +1786,7 @@ function UISkeletonText({
       children: widths.map((w, i) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: UISkeleton_default.skeletonText,
+          className: clsx(UISkeleton_module_default.skeletonText),
           style: {
             display: "block",
             width: isArray ? typeof w === "number" ? `${w}px` : w : "100%",
@@ -1892,6 +1901,8 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
   const { token } = useToken16();
   const css = `
     .kb-md { font-size: ${token.fontSize}px; line-height: 1.6; color: ${token.colorText}; font-family: ${token.fontFamily}; }
+    .kb-md > *:first-child { margin-top: 0; }
+    .kb-md > *:last-child { margin-bottom: 0; }
     .kb-md h1,.kb-md h2,.kb-md h3,.kb-md h4,.kb-md h5,.kb-md h6 { font-weight:600; line-height:1.3; margin:1.2em 0 0.4em; color:${token.colorTextHeading}; }
     .kb-md h1:first-child,.kb-md h2:first-child,.kb-md h3:first-child { margin-top:0; }
     .kb-md h1 { font-size:1.5em; padding-bottom:0.3em; border-bottom:1px solid ${token.colorBorderSecondary}; }
@@ -1905,7 +1916,12 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
     .kb-md pre { background:${token.colorFillQuaternary}; border:1px solid ${token.colorBorderSecondary}; border-radius:${token.borderRadius}px; padding:12px 16px; overflow-x:auto; margin:0.75em 0; }
     .kb-md pre code { background:none; padding:0; font-size:0.85em; color:${token.colorText}; }
     .kb-md ul,.kb-md ol { padding-left:1.5em; margin:0.6em 0; }
-    .kb-md li { margin:0.2em 0; }
+    .kb-md ul { list-style: disc; }
+    .kb-md ol { list-style: decimal; }
+    .kb-md ul ul { list-style: circle; }
+    .kb-md ol ol, .kb-md ul ol { list-style: decimal; }
+    .kb-md li { margin:0.2em 0; list-style: inherit; }
+    .kb-md li::marker { color:${token.colorTextTertiary}; }
     .kb-md blockquote { margin:0.75em 0; padding:0.4em 1em; border-left:4px solid ${token.colorPrimaryBorder}; background:${token.colorFillQuaternary}; color:${token.colorTextSecondary}; border-radius:0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0; }
     .kb-md blockquote p { margin:0; }
     .kb-md hr { border:none; border-top:1px solid ${token.colorBorderSecondary}; margin:1.2em 0; }
@@ -1915,13 +1931,14 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
     .kb-md tr:nth-child(even) td { background:${token.colorFillQuaternary}; }
     .kb-md img { max-width:100%; border-radius:${token.borderRadius}px; }
   `;
+  const html = DOMPurify.sanitize(marked.parse(content));
   return /* @__PURE__ */ jsxs(UIBox, { className, style: { padding: token.padding, ...customStyle }, children: [
     /* @__PURE__ */ jsx("style", { children: css }),
     /* @__PURE__ */ jsx(
       "div",
       {
         className: "kb-md",
-        dangerouslySetInnerHTML: { __html: marked(content) }
+        dangerouslySetInnerHTML: { __html: html }
       }
     )
   ] });
@@ -1974,9 +1991,15 @@ function UIJsonViewer({
   return /* @__PURE__ */ jsx(UIBox, { className, style, children: /* @__PURE__ */ jsx("pre", { style: codeStyle, children: showLineNumbers ? lines.map((line, index) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("span", { style: lineNumberStyle, children: index + 1 }),
     /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlightJson(line, token) } })
-  ] }, index)) : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: highlightedJson } }) }) });
+  ] }, index)) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      dangerouslySetInnerHTML: { __html: highlightedJson }
+    }
+  ) }) });
 }
 function highlightJson(json, token) {
+  json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   json = json.replace(/"([^"]+)":/g, `<span style="color: ${token.colorPrimary}">"$1"</span>:`);
   json = json.replace(/: "([^"]*)"/g, `: <span style="color: ${token.colorSuccess}">"$1"</span>`);
   json = json.replace(/: (\d+)/g, `: <span style="color: ${token.colorWarning}">$1</span>`);