@humain/ui 2.2.6 → 2.2.9

package/dist/wc/hf-ai-system-message.js

@@ -30,14 +30,14 @@ var n = /* @__PURE__ */ z(A(), 1), i = M(), P = y("flex items-start gap-3 px-4 p
     variant: "info",
     size: "md"
   }
-}), q = y("shrink-0 mt-0.5", {
+}), B = y("shrink-0 mt-0.5", {
   variants: {
     variant: {
       info: "text-primary",
       success: "text-success",
       warning: "text-warning",
       error: "text-destructive",
-      neutral: "text-text-quaternary"
+      neutral: "text-muted-foreground"
     },
     size: {
       sm: "size-4",
@@ -56,7 +56,7 @@ var n = /* @__PURE__ */ z(A(), 1), i = M(), P = y("flex items-start gap-3 px-4 p
   error: k,
   neutral: g
 };
-function C({ children: t, title: e, variant: s = "info", size: r = "md", dismissible: a = !1, onDismiss: m, icon: u, hideIcon: d = !1, actions: c, className: p }) {
+function C({ children: t, title: e, variant: s = "info", size: r = "md", dismissible: o = !1, onDismiss: m, icon: d, hideIcon: u = !1, actions: c, className: p }) {
   const [h, N] = n.useState(!0), w = () => {
     N(!1), m?.();
   }, E = v[s || "info"];
@@ -92,13 +92,13 @@ function C({ children: t, title: e, variant: s = "info", size: r = "md", dismiss
       size: r
     }), "motion-reduce:transition-none", p),
     children: [
-      !d && /* @__PURE__ */ (0, i.jsx)("div", {
-        className: q({
+      !u && /* @__PURE__ */ (0, i.jsx)("div", {
+        className: B({
           variant: s,
           size: r
         }),
         "aria-hidden": "true",
-        children: u || /* @__PURE__ */ (0, i.jsx)(E, { className: "size-full" })
+        children: d || /* @__PURE__ */ (0, i.jsx)(E, { className: "size-full" })
       }),
       /* @__PURE__ */ (0, i.jsxs)("div", {
         className: "flex-1 min-w-0",
@@ -117,7 +117,7 @@ function C({ children: t, title: e, variant: s = "info", size: r = "md", dismiss
           })
         ]
       }),
-      a && /* @__PURE__ */ (0, i.jsx)(S, {
+      o && /* @__PURE__ */ (0, i.jsx)(S, {
         appearance: "ghost",
         variant: "secondary",
         size: "sm",
@@ -130,11 +130,11 @@ function C({ children: t, title: e, variant: s = "info", size: r = "md", dismiss
   }) });
 }
 C.displayName = "AISystemMessage";
-function B({ children: t, variant: e = "info", dismissible: s = !1, onDismiss: r, icon: a, action: m, className: u }) {
-  const [d, c] = n.useState(!0), p = () => {
+function O({ children: t, variant: e = "info", dismissible: s = !1, onDismiss: r, icon: o, action: m, className: d }) {
+  const [u, c] = n.useState(!0), p = () => {
     c(!1), r?.();
   }, h = v[e || "info"];
-  return /* @__PURE__ */ (0, i.jsx)(_, { children: d && /* @__PURE__ */ (0, i.jsxs)(b.div, {
+  return /* @__PURE__ */ (0, i.jsx)(_, { children: u && /* @__PURE__ */ (0, i.jsxs)(b.div, {
     "data-slot": "ai-system-message-banner",
     role: "status",
     "aria-live": "polite",
@@ -159,13 +159,13 @@ function B({ children: t, variant: e = "info", dismissible: s = !1, onDismiss: r
         1
       ]
     },
-    className: l("w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none", e === "info" && "bg-primary/10 text-primary", e === "success" && "bg-success/10 text-success", e === "warning" && "bg-warning/10 text-warning", e === "error" && "bg-destructive/10 text-destructive", e === "neutral" && "bg-muted text-secondary-foreground", u),
+    className: l("w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none", e === "info" && "bg-primary/10 text-primary", e === "success" && "bg-success/10 text-success", e === "warning" && "bg-warning/10 text-warning", e === "error" && "bg-destructive/10 text-destructive", e === "neutral" && "bg-muted text-secondary-foreground", d),
     children: [/* @__PURE__ */ (0, i.jsxs)("div", {
       className: "flex items-center gap-2 flex-1 justify-center",
       children: [
-        a || /* @__PURE__ */ (0, i.jsx)(h, {
+        o || /* @__PURE__ */ (0, i.jsx)(h, {
           "aria-hidden": "true",
-          className: l("size-4 shrink-0", e === "info" && "text-primary", e === "success" && "text-success", e === "warning" && "text-warning", e === "error" && "text-destructive", e === "neutral" && "text-text-quaternary")
+          className: l("size-4 shrink-0", e === "info" && "text-primary", e === "success" && "text-success", e === "warning" && "text-warning", e === "error" && "text-destructive", e === "neutral" && "text-muted-foreground")
         }),
         /* @__PURE__ */ (0, i.jsx)("span", {
           className: "text-sm",
@@ -182,9 +182,9 @@ function B({ children: t, variant: e = "info", dismissible: s = !1, onDismiss: r
     })]
   }) });
 }
-B.displayName = "AISystemMessageBanner";
-var O = I();
-function L(t) {
+O.displayName = "AISystemMessageBanner";
+var L = I();
+function q(t) {
   return { onDismiss: (e) => {
     const s = t.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
     t.dispatchEvent(new s("dismiss", {
@@ -195,13 +195,13 @@ function L(t) {
   } };
 }
 function W(t) {
-  const { _hostElement: e, ...s } = t, r = n.useMemo(() => e ? L(e) : {}, [e]);
+  const { _hostElement: e, ...s } = t, r = n.useMemo(() => e ? q(e) : {}, [e]);
   return n.createElement(C, {
     ...s,
     ...r
   });
 }
-var o = {
+var a = {
   variant: "string",
   size: "string",
   title: "string",
@@ -226,7 +226,7 @@ var o = {
       s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || t.push(s);
     const e = this.ownerDocument.createElement("div");
     for (e.style.display = "contents", this._childrenContainer = this.ownerDocument.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
-    this.appendChild(e), this._root = (0, O.createRoot)(e), this._render();
+    this.appendChild(e), this._root = (0, L.createRoot)(e), this._render();
   }
   disconnectedCallback() {
     this._root?.unmount(), this._root = null;
@@ -235,24 +235,24 @@ var o = {
     this._render();
   }
   static get observedAttributes() {
-    return Object.keys(o).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
+    return Object.keys(a).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
   }
   _setProp(t, e) {
-    const s = o[t] || "string";
+    const s = a[t] || "string";
     this._props[t] = V(e, s), this._render();
   }
   _getProp(t) {
     if (t in this._props) return this._props[t];
-    const e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), s = o[t] || "string";
+    const e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), s = a[t] || "string";
     return f(this.getAttribute(e), s);
   }
   _render() {
     if (!this._root || !this._childrenContainer) return;
     const t = {};
-    for (const [s, r] of Object.entries(o)) if (s in this._props) t[s] = this._props[s];
+    for (const [s, r] of Object.entries(a)) if (s in this._props) t[s] = this._props[s];
     else {
-      const a = s.replace(/([A-Z])/g, "-$1").toLowerCase();
-      t[s] = f(this.getAttribute(a), r);
+      const o = s.replace(/([A-Z])/g, "-$1").toLowerCase();
+      t[s] = f(this.getAttribute(o), r);
     }
     const e = n.createElement(W, {
       ...t,
@@ -266,7 +266,7 @@ var o = {
     this._root.render(e);
   }
 };
-for (const t of Object.keys(o)) Object.defineProperty(j.prototype, t, {
+for (const t of Object.keys(a)) Object.defineProperty(j.prototype, t, {
   get() {
     return this._getProp(t);
   },

package/dist/wc/hf-ai-system-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-ai-system-message.js","names":[],"sources":["../../src/components/organisms/ai/AISystemMessage/AISystemMessage.tsx","../../src/wc/hf-ai-system-message.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst systemMessageVariants = cva(\n  'flex items-start gap-3 px-4 py-3 rounded-xl border',\n  {\n    variants: {\n      variant: {\n        info: 'bg-primary/10 border-primary text-primary',\n        success: 'bg-success/10 border-success/50 text-success',\n        warning: 'bg-warning/10 border-warning/50 text-warning',\n        error: 'bg-destructive/10 border-destructive/50 text-destructive',\n        neutral: 'bg-muted border-border text-secondary-foreground',\n      },\n      size: {\n        sm: 'px-3 py-2 text-xs',\n        md: 'px-4 py-3 text-sm',\n        lg: 'px-5 py-4 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n      size: 'md',\n    },\n  },\n);\n\nconst systemMessageIconVariants = cva('shrink-0 mt-0.5', {\n  variants: {\n    variant: {\n      info: 'text-primary',\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-destructive',\n      neutral: 'text-text-quaternary',\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    size: 'md',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SystemMessageVariant =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral';\n\n// =============================================================================\n// Icon Map\n// =============================================================================\n\nconst iconMap = {\n  info: Info,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  error: AlertCircle,\n  neutral: Info,\n};\n\n// =============================================================================\n// Main AISystemMessage Component\n// =============================================================================\n\nexport interface AISystemMessageProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Title for the message */\n  title?: string;\n  /** Whether the message can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Hide the icon */\n  hideIcon?: boolean;\n  /** Actions to display */\n  actions?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessage({\n  children,\n  title,\n  variant = 'info',\n  size = 'md',\n  dismissible = false,\n  onDismiss,\n  icon,\n  hideIcon = false,\n  actions,\n  className,\n}: AISystemMessageProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, y: -10 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -10, height: 0, marginBottom: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            systemMessageVariants({ variant, size }),\n            'motion-reduce:transition-none',\n            className,\n          )}\n        >\n          {/* Icon */}\n          {!hideIcon && (\n            <div\n              className={systemMessageIconVariants({ variant, size })}\n              aria-hidden=\"true\"\n            >\n              {icon || <IconComponent className=\"size-full\" />}\n            </div>\n          )}\n\n          {/* Content */}\n          <div className=\"flex-1 min-w-0\">\n            {title && <p className=\"font-medium mb-0.5\">{title}</p>}\n            <div className={cn(!title && 'leading-snug')}>{children}</div>\n\n            {/* Actions */}\n            {actions && (\n              <div className=\"flex items-center gap-2 mt-2\">{actions}</div>\n            )}\n          </div>\n\n          {/* Dismiss button */}\n          {dismissible && (\n            <Button\n              appearance=\"ghost\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss message\"\n              className=\"size-6 p-0 shrink-0 -mt-0.5 -me-1 hover:bg-foreground/5\"\n            >\n              <X className=\"size-4\" />\n            </Button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessage.displayName = 'AISystemMessage';\n\n// =============================================================================\n// System Message Banner (Full-width variant)\n// =============================================================================\n\nexport interface AISystemMessageBannerProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Whether the banner can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Action button */\n  action?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessageBanner({\n  children,\n  variant = 'info',\n  dismissible = false,\n  onDismiss,\n  icon,\n  action,\n  className,\n}: AISystemMessageBannerProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message-banner\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, height: 0 }}\n          animate={{ opacity: 1, height: 'auto' }}\n          exit={{ opacity: 0, height: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            'w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none',\n            variant === 'info' && 'bg-primary/10 text-primary',\n            variant === 'success' && 'bg-success/10 text-success',\n            variant === 'warning' && 'bg-warning/10 text-warning',\n            variant === 'error' && 'bg-destructive/10 text-destructive',\n            variant === 'neutral' && 'bg-muted text-secondary-foreground',\n            className,\n          )}\n        >\n          <div className=\"flex items-center gap-2 flex-1 justify-center\">\n            {icon || (\n              <IconComponent\n                aria-hidden=\"true\"\n                className={cn(\n                  'size-4 shrink-0',\n                  variant === 'info' && 'text-primary',\n                  variant === 'success' && 'text-success',\n                  variant === 'warning' && 'text-warning',\n                  variant === 'error' && 'text-destructive',\n                  variant === 'neutral' && 'text-text-quaternary',\n                )}\n              />\n            )}\n            <span className=\"text-sm\">{children}</span>\n            {action}\n          </div>\n\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss banner\"\n              className=\"p-1 rounded hover:bg-foreground/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessageBanner.displayName = 'AISystemMessageBanner';\n\nexport {\n  AISystemMessage,\n  AISystemMessageBanner,\n  systemMessageIconVariants,\n  systemMessageVariants,\n};\n","/**\n * Web Component wrapper for AISystemMessage\n * Custom element: <hf-ai-system-message>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { AISystemMessage } from '../components/organisms/ai/AISystemMessage';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onDismiss: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('dismiss', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction AISystemMessageWrapper(props: React.ComponentProps<typeof AISystemMessage> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(AISystemMessage, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    variant: 'string',\n    size: 'string',\n    title: 'string',\n    dismissible: 'boolean',\n    icon: 'json',\n    hideIcon: 'boolean',\n    actions: 'json',\n    className: 'string'\n};\n\nclass AISystemMessageWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      AISystemMessageWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(AISystemMessageWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-ai-system-message')) {\n  customElements.define('hf-ai-system-message', AISystemMessageWC);\n}\n\nexport { AISystemMessageWC };\nexport default AISystemMessageWC;\n"],"mappings":"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"}
+{"version":3,"file":"hf-ai-system-message.js","names":[],"sources":["../../src/components/organisms/ai/AISystemMessage/AISystemMessage.tsx","../../src/wc/hf-ai-system-message.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst systemMessageVariants = cva(\n  'flex items-start gap-3 px-4 py-3 rounded-xl border',\n  {\n    variants: {\n      variant: {\n        info: 'bg-primary/10 border-primary text-primary',\n        success: 'bg-success/10 border-success/50 text-success',\n        warning: 'bg-warning/10 border-warning/50 text-warning',\n        error: 'bg-destructive/10 border-destructive/50 text-destructive',\n        neutral: 'bg-muted border-border text-secondary-foreground',\n      },\n      size: {\n        sm: 'px-3 py-2 text-xs',\n        md: 'px-4 py-3 text-sm',\n        lg: 'px-5 py-4 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n      size: 'md',\n    },\n  },\n);\n\nconst systemMessageIconVariants = cva('shrink-0 mt-0.5', {\n  variants: {\n    variant: {\n      info: 'text-primary',\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-destructive',\n      neutral: 'text-muted-foreground',\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    size: 'md',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SystemMessageVariant =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral';\n\n// =============================================================================\n// Icon Map\n// =============================================================================\n\nconst iconMap = {\n  info: Info,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  error: AlertCircle,\n  neutral: Info,\n};\n\n// =============================================================================\n// Main AISystemMessage Component\n// =============================================================================\n\nexport interface AISystemMessageProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Title for the message */\n  title?: string;\n  /** Whether the message can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Hide the icon */\n  hideIcon?: boolean;\n  /** Actions to display */\n  actions?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessage({\n  children,\n  title,\n  variant = 'info',\n  size = 'md',\n  dismissible = false,\n  onDismiss,\n  icon,\n  hideIcon = false,\n  actions,\n  className,\n}: AISystemMessageProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, y: -10 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -10, height: 0, marginBottom: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            systemMessageVariants({ variant, size }),\n            'motion-reduce:transition-none',\n            className,\n          )}\n        >\n          {/* Icon */}\n          {!hideIcon && (\n            <div\n              className={systemMessageIconVariants({ variant, size })}\n              aria-hidden=\"true\"\n            >\n              {icon || <IconComponent className=\"size-full\" />}\n            </div>\n          )}\n\n          {/* Content */}\n          <div className=\"flex-1 min-w-0\">\n            {title && <p className=\"font-medium mb-0.5\">{title}</p>}\n            <div className={cn(!title && 'leading-snug')}>{children}</div>\n\n            {/* Actions */}\n            {actions && (\n              <div className=\"flex items-center gap-2 mt-2\">{actions}</div>\n            )}\n          </div>\n\n          {/* Dismiss button */}\n          {dismissible && (\n            <Button\n              appearance=\"ghost\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss message\"\n              className=\"size-6 p-0 shrink-0 -mt-0.5 -me-1 hover:bg-foreground/5\"\n            >\n              <X className=\"size-4\" />\n            </Button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessage.displayName = 'AISystemMessage';\n\n// =============================================================================\n// System Message Banner (Full-width variant)\n// =============================================================================\n\nexport interface AISystemMessageBannerProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Whether the banner can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Action button */\n  action?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessageBanner({\n  children,\n  variant = 'info',\n  dismissible = false,\n  onDismiss,\n  icon,\n  action,\n  className,\n}: AISystemMessageBannerProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message-banner\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, height: 0 }}\n          animate={{ opacity: 1, height: 'auto' }}\n          exit={{ opacity: 0, height: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            'w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none',\n            variant === 'info' && 'bg-primary/10 text-primary',\n            variant === 'success' && 'bg-success/10 text-success',\n            variant === 'warning' && 'bg-warning/10 text-warning',\n            variant === 'error' && 'bg-destructive/10 text-destructive',\n            variant === 'neutral' && 'bg-muted text-secondary-foreground',\n            className,\n          )}\n        >\n          <div className=\"flex items-center gap-2 flex-1 justify-center\">\n            {icon || (\n              <IconComponent\n                aria-hidden=\"true\"\n                className={cn(\n                  'size-4 shrink-0',\n                  variant === 'info' && 'text-primary',\n                  variant === 'success' && 'text-success',\n                  variant === 'warning' && 'text-warning',\n                  variant === 'error' && 'text-destructive',\n                  variant === 'neutral' && 'text-muted-foreground',\n                )}\n              />\n            )}\n            <span className=\"text-sm\">{children}</span>\n            {action}\n          </div>\n\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss banner\"\n              className=\"p-1 rounded hover:bg-foreground/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessageBanner.displayName = 'AISystemMessageBanner';\n\nexport {\n  AISystemMessage,\n  AISystemMessageBanner,\n  systemMessageIconVariants,\n  systemMessageVariants,\n};\n","/**\n * Web Component wrapper for AISystemMessage\n * Custom element: <hf-ai-system-message>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { AISystemMessage } from '../components/organisms/ai/AISystemMessage';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Event wrapper that dispatches custom DOM events\n */\nfunction createEventDispatcher(element: HTMLElement) {\n  return {\n    onDismiss: (value: unknown) => {\n      const CustomEventConstructor =\n        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;\n      element.dispatchEvent(new CustomEventConstructor('dismiss', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      }));\n    }\n  };\n}\n\n/**\n * Wrapper component that connects React events to DOM custom events\n */\nfunction AISystemMessageWrapper(props: React.ComponentProps<typeof AISystemMessage> & { _hostElement?: HTMLElement }) {\n  const { _hostElement, ...restProps } = props;\n\n  const eventHandlers = React.useMemo(() => {\n    if (!_hostElement) return {};\n    return createEventDispatcher(_hostElement);\n  }, [_hostElement]);\n\n  return React.createElement(AISystemMessage, { ...restProps, ...eventHandlers });\n}\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    variant: 'string',\n    size: 'string',\n    title: 'string',\n    dismissible: 'boolean',\n    icon: 'json',\n    hideIcon: 'boolean',\n    actions: 'json',\n    className: 'string'\n};\n\nclass AISystemMessageWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      AISystemMessageWrapper,\n      { ...props, _hostElement: this },\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(AISystemMessageWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-ai-system-message')) {\n  customElements.define('hf-ai-system-message', AISystemMessageWC);\n}\n\nexport { AISystemMessageWC };\nexport default AISystemMessageWC;\n"],"mappings":"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"}

package/dist/wc/hf-code-snippet.js

@@ -6,16 +6,16 @@ import { t as R } from "./check.js";
 import { t as V } from "./copy.js";
 import { t as _ } from "./dist.js";
 import { t as P } from "./button.js";
-import { n as q } from "./syntax-highlight.js";
-import { t as F } from "./syntax-highlight-react.js";
-var i = /* @__PURE__ */ z(E(), 1), s = L(), H = _("overflow-hidden rounded-xl bg-background", {
+import { n as F } from "./syntax-highlight.js";
+import { t as H } from "./syntax-highlight-react.js";
+var o = /* @__PURE__ */ z(E(), 1), s = L(), M = _("overflow-hidden rounded-xl bg-background", {
   variants: { size: {
     sm: "text-xs",
     md: "text-base",
     lg: "text-lg"
   } },
   defaultVariants: { size: "md" }
-}), M = _("select-none font-mono font-bold leading-normal text-text-quaternary", {
+}), O = _("select-none font-mono font-bold leading-normal text-secondary-foreground", {
   variants: { size: {
     sm: "text-xs",
     md: "text-base",
@@ -23,7 +23,7 @@ var i = /* @__PURE__ */ z(E(), 1), s = L(), H = _("overflow-hidden rounded-xl bg
   } },
   defaultVariants: { size: "md" }
 });
-function O(e, t) {
+function D(e, t) {
   return t ? {
     copied: !0,
     resetKey: e.resetKey + 1
@@ -32,37 +32,37 @@ function O(e, t) {
     copied: !1
   };
 }
-function D(e) {
+function q(e) {
   return Number.isFinite(e) ? Math.floor(e) : 1;
 }
 function I({ count: e, startLine: t, size: r }) {
   return /* @__PURE__ */ (0, s.jsx)("div", {
     "aria-hidden": "true",
-    className: a(M({ size: r })),
-    children: Array.from({ length: e }, (c, o) => /* @__PURE__ */ (0, s.jsx)("span", {
+    className: a(O({ size: r })),
+    children: Array.from({ length: e }, (c, i) => /* @__PURE__ */ (0, s.jsx)("span", {
       className: "block mb-px last:mb-0",
-      children: t + o
-    }, o))
+      children: t + i
+    }, i))
   });
 }
-var x = i.forwardRef(({ code: e, language: t, showLineNumbers: r = !0, startLineNumber: c = 1, showCopyButton: o = !1, size: u, className: y, breakpoint: m = "desktop" }, C) => {
-  const v = i.useMemo(() => F(e), [e]), N = i.useMemo(() => e.split(`
-`).length, [e]), j = D(c), [p, h] = i.useReducer(O, {
+var g = o.forwardRef(({ code: e, language: t, showLineNumbers: r = !0, startLineNumber: c = 1, showCopyButton: i = !1, size: u, className: y, breakpoint: m = "desktop" }, C) => {
+  const v = o.useMemo(() => H(e), [e]), N = o.useMemo(() => e.split(`
+`).length, [e]), j = q(c), [d, h] = o.useReducer(D, {
     copied: !1,
     resetKey: 0
-  }), { copied: f } = p, d = i.useRef(null);
-  i.useImperativeHandle(C, () => d.current), i.useEffect(() => {
-    if (!p.copied) return;
+  }), { copied: f } = d, p = o.useRef(null);
+  o.useImperativeHandle(C, () => p.current), o.useEffect(() => {
+    if (!d.copied) return;
     const n = setTimeout(() => {
       h(!1);
     }, 2e3);
     return () => {
       clearTimeout(n);
     };
-  }, [p]);
-  const w = i.useCallback(async () => {
+  }, [d]);
+  const w = o.useCallback(async () => {
     try {
-      const n = d.current?.ownerDocument.defaultView;
+      const n = p.current?.ownerDocument.defaultView;
       if (!n) return;
       await n.navigator.clipboard.writeText(e), h(!0);
     } catch (n) {
@@ -70,24 +70,24 @@ var x = i.forwardRef(({ code: e, language: t, showLineNumbers: r = !0, startLine
     }
   }, [e]), k = m === "mobile" ? "p-4" : "p-6", T = m === "mobile" ? "py-4 px-4 pb-6" : "py-6 px-6 pb-8";
   return /* @__PURE__ */ (0, s.jsxs)("section", {
-    ref: d,
+    ref: p,
     "data-slot": "code-snippet",
     "aria-label": "Code snippet",
-    className: a(H({ size: u }), "relative flex items-start justify-center", y),
-    style: q,
+    className: a(M({ size: u }), "relative flex items-start justify-center", y),
+    style: F,
     children: [
-      (t || o) && /* @__PURE__ */ (0, s.jsxs)("div", {
+      (t || i) && /* @__PURE__ */ (0, s.jsxs)("div", {
         className: "absolute top-2 end-2 flex items-center gap-2 z-10",
         children: [t && /* @__PURE__ */ (0, s.jsx)("span", {
-          className: "text-xs font-medium text-text-quaternary uppercase select-none",
+          className: "text-xs font-medium text-secondary-foreground uppercase select-none",
           children: t
-        }), o && /* @__PURE__ */ (0, s.jsx)(P, {
+        }), i && /* @__PURE__ */ (0, s.jsx)(P, {
           appearance: "ghost",
           variant: "secondary",
           size: "sm",
           onClick: w,
           "aria-label": f ? "Copied to clipboard" : "Copy code to clipboard",
-          className: "h-7 px-2 text-text-quaternary hover:text-secondary-foreground transition-colors duration-150 ease-out",
+          className: "h-7 px-2 text-secondary-foreground hover:text-foreground transition-colors duration-150 ease-out",
           children: f ? /* @__PURE__ */ (0, s.jsx)(R, { className: "size-3.5 text-success" }) : /* @__PURE__ */ (0, s.jsx)(V, { className: "size-3.5" })
         })]
       }),
@@ -111,7 +111,7 @@ var x = i.forwardRef(({ code: e, language: t, showLineNumbers: r = !0, startLine
     ]
   });
 });
-x.displayName = "CodeSnippet";
+g.displayName = "CodeSnippet";
 var K = A(), l = {
   size: "string",
   code: "string",
@@ -121,7 +121,7 @@ var K = A(), l = {
   showCopyButton: "boolean",
   className: "string",
   breakpoint: "string"
-}, g = class extends HTMLElement {
+}, x = class extends HTMLElement {
   _root = null;
   _childrenContainer = null;
   _props = {};
@@ -162,14 +162,14 @@ var K = A(), l = {
     const e = {};
     for (const [r, c] of Object.entries(l)) if (r in this._props) e[r] = this._props[r];
     else {
-      const o = r.replace(/([A-Z])/g, "-$1").toLowerCase();
-      e[r] = b(this.getAttribute(o), c);
+      const i = r.replace(/([A-Z])/g, "-$1").toLowerCase();
+      e[r] = b(this.getAttribute(i), c);
     }
-    const t = i.createElement(x, e);
+    const t = o.createElement(g, e);
     this._root.render(t);
   }
 };
-for (const e of Object.keys(l)) Object.defineProperty(g.prototype, e, {
+for (const e of Object.keys(l)) Object.defineProperty(x.prototype, e, {
   get() {
     return this._getProp(e);
   },
@@ -179,10 +179,10 @@ for (const e of Object.keys(l)) Object.defineProperty(g.prototype, e, {
   enumerable: !0,
   configurable: !0
 });
-typeof customElements < "u" && !customElements.get("hf-code-snippet") && customElements.define("hf-code-snippet", g);
+typeof customElements < "u" && !customElements.get("hf-code-snippet") && customElements.define("hf-code-snippet", x);
 export {
-  g as CodeSnippetWC,
-  g as default
+  x as CodeSnippetWC,
+  x as default
 };
 
 //# sourceMappingURL=hf-code-snippet.js.map

package/dist/wc/hf-code-snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-code-snippet.js","names":[],"sources":["../../src/components/molecules/data/CodeSnippet/CodeSnippet.tsx","../../src/wc/hf-code-snippet.ts"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Check, Copy } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { SUGAR_HIGH_STYLE } from '@/lib/syntax-highlight';\nimport { renderHighlightedCode } from '@/lib/syntax-highlight-react';\nimport { cn } from '@/lib/utils';\n\nconst codeSnippetVariants = cva('overflow-hidden rounded-xl bg-background', {\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst lineNumberVariants = cva(\n  'select-none font-mono font-bold leading-normal text-text-quaternary',\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        md: 'text-base',\n        lg: 'text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nexport interface CodeSnippetProps\n  extends VariantProps<typeof codeSnippetVariants> {\n  /** Code content to display */\n  code: string;\n  /** Programming language label shown in the top-right corner */\n  language?: string;\n  /** Whether to show line numbers */\n  showLineNumbers?: boolean;\n  /** Starting line number */\n  startLineNumber?: number;\n  /** Whether to show a copy-to-clipboard button */\n  showCopyButton?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Responsive breakpoint for compact mode */\n  breakpoint?: 'desktop' | 'mobile';\n}\n\ninterface LineNumbersProps {\n  count: number;\n  startLine: number;\n  size?: 'sm' | 'md' | 'lg' | null;\n}\n\ninterface CopyFeedbackState {\n  copied: boolean;\n  resetKey: number;\n}\n\nfunction copyFeedbackReducer(\n  state: CopyFeedbackState,\n  copied: boolean,\n): CopyFeedbackState {\n  return copied\n    ? { copied: true, resetKey: state.resetKey + 1 }\n    : { ...state, copied: false };\n}\n\nfunction getStartLineNumber(startLineNumber: number): number {\n  return Number.isFinite(startLineNumber) ? Math.floor(startLineNumber) : 1;\n}\n\nfunction LineNumbers({ count, startLine, size }: LineNumbersProps) {\n  return (\n    <div aria-hidden=\"true\" className={cn(lineNumberVariants({ size }))}>\n      {Array.from({ length: count }, (_, i) => (\n        <span key={i} className=\"block mb-px last:mb-0\">\n          {startLine + i}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nconst CodeSnippet = React.forwardRef<HTMLElement, CodeSnippetProps>(\n  (\n    {\n      code,\n      language,\n      showLineNumbers = true,\n      startLineNumber = 1,\n      showCopyButton = false,\n      size,\n      className,\n      breakpoint = 'desktop',\n    },\n    ref,\n  ) => {\n    const highlightedContent = React.useMemo(\n      () => renderHighlightedCode(code),\n      [code],\n    );\n    const lineCount = React.useMemo(() => code.split('\\n').length, [code]);\n    const safeStartLineNumber = getStartLineNumber(startLineNumber);\n\n    const [copyFeedback, setCopyFeedback] = React.useReducer(\n      copyFeedbackReducer,\n      { copied: false, resetKey: 0 },\n    );\n    const { copied } = copyFeedback;\n    const rootRef = React.useRef<HTMLElement>(null);\n\n    // Merge forwarded ref with local ref\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLElement);\n\n    React.useEffect(() => {\n      if (!copyFeedback.copied) return;\n\n      const copyResetTimer = setTimeout(() => {\n        setCopyFeedback(false);\n      }, 2000);\n\n      return () => {\n        clearTimeout(copyResetTimer);\n      };\n    }, [copyFeedback]);\n\n    const handleCopy = React.useCallback(async () => {\n      try {\n        const win = rootRef.current?.ownerDocument.defaultView;\n        if (!win) return;\n        await win.navigator.clipboard.writeText(code);\n        setCopyFeedback(true);\n      } catch (err) {\n        console.error('Failed to copy code:', err);\n      }\n    }, [code]);\n\n    const containerPadding = breakpoint === 'mobile' ? 'p-4' : 'p-6';\n    const contentPadding =\n      breakpoint === 'mobile' ? 'py-4 px-4 pb-6' : 'py-6 px-6 pb-8';\n\n    return (\n      <section\n        ref={rootRef}\n        data-slot=\"code-snippet\"\n        aria-label=\"Code snippet\"\n        className={cn(\n          codeSnippetVariants({ size }),\n          'relative flex items-start justify-center',\n          className,\n        )}\n        style={SUGAR_HIGH_STYLE}\n      >\n        {/* Language badge & copy button */}\n        {(language || showCopyButton) && (\n          <div className=\"absolute top-2 end-2 flex items-center gap-2 z-10\">\n            {language && (\n              <span className=\"text-xs font-medium text-text-quaternary uppercase select-none\">\n                {language}\n              </span>\n            )}\n            {showCopyButton && (\n              <Button\n                appearance=\"ghost\"\n                variant=\"secondary\"\n                size=\"sm\"\n                onClick={handleCopy}\n                aria-label={\n                  copied ? 'Copied to clipboard' : 'Copy code to clipboard'\n                }\n                className=\"h-7 px-2 text-text-quaternary hover:text-secondary-foreground transition-colors duration-150 ease-out\"\n              >\n                {copied ? (\n                  <Check className=\"size-3.5 text-success\" />\n                ) : (\n                  <Copy className=\"size-3.5\" />\n                )}\n              </Button>\n            )}\n          </div>\n        )}\n\n        {/* Line Numbers Sidebar */}\n        {showLineNumbers && (\n          <div\n            className={cn(\n              'shrink-0 self-stretch bg-muted border-e border-border',\n              containerPadding,\n            )}\n          >\n            <LineNumbers\n              count={lineCount}\n              startLine={safeStartLineNumber}\n              size={size}\n            />\n          </div>\n        )}\n\n        {/* Code Content */}\n        <section\n          className={cn(\n            'grow min-w-0 overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n            contentPadding,\n          )}\n          // biome-ignore lint/a11y/noNoninteractiveTabindex: Focusable scroll region satisfies axe scrollable-region-focusable.\n          tabIndex={0}\n          aria-label=\"Code content\"\n        >\n          <pre\n            className={cn(\n              'font-mono font-medium leading-normal !bg-transparent !p-0 !m-0 !border-0 !rounded-none',\n              '[&_.sh__line]:block [&_.sh__line]:leading-normal [&_.sh__line]:mb-px [&_.sh__line:last-child]:mb-0',\n            )}\n          >\n            {highlightedContent}\n          </pre>\n        </section>\n      </section>\n    );\n  },\n);\n\nCodeSnippet.displayName = 'CodeSnippet';\n\nexport { CodeSnippet, codeSnippetVariants, lineNumberVariants };\n","/**\n * Web Component wrapper for CodeSnippet\n * Custom element: <hf-code-snippet>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { CodeSnippet } from '../components/molecules/data/CodeSnippet';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    size: 'string',\n    code: 'string',\n    language: 'string',\n    showLineNumbers: 'boolean',\n    startLineNumber: 'number',\n    showCopyButton: 'boolean',\n    className: 'string',\n    breakpoint: 'string'\n};\n\nclass CodeSnippetWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      CodeSnippet,\n      props,\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(CodeSnippetWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-code-snippet')) {\n  customElements.define('hf-code-snippet', CodeSnippetWC);\n}\n\nexport { CodeSnippetWC };\nexport default CodeSnippetWC;\n"],"mappings":"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"}
+{"version":3,"file":"hf-code-snippet.js","names":[],"sources":["../../src/components/molecules/data/CodeSnippet/CodeSnippet.tsx","../../src/wc/hf-code-snippet.ts"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Check, Copy } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { SUGAR_HIGH_STYLE } from '@/lib/syntax-highlight';\nimport { renderHighlightedCode } from '@/lib/syntax-highlight-react';\nimport { cn } from '@/lib/utils';\n\nconst codeSnippetVariants = cva('overflow-hidden rounded-xl bg-background', {\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst lineNumberVariants = cva(\n  'select-none font-mono font-bold leading-normal text-secondary-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        md: 'text-base',\n        lg: 'text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nexport interface CodeSnippetProps\n  extends VariantProps<typeof codeSnippetVariants> {\n  /** Code content to display */\n  code: string;\n  /** Programming language label shown in the top-right corner */\n  language?: string;\n  /** Whether to show line numbers */\n  showLineNumbers?: boolean;\n  /** Starting line number */\n  startLineNumber?: number;\n  /** Whether to show a copy-to-clipboard button */\n  showCopyButton?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Responsive breakpoint for compact mode */\n  breakpoint?: 'desktop' | 'mobile';\n}\n\ninterface LineNumbersProps {\n  count: number;\n  startLine: number;\n  size?: 'sm' | 'md' | 'lg' | null;\n}\n\ninterface CopyFeedbackState {\n  copied: boolean;\n  resetKey: number;\n}\n\nfunction copyFeedbackReducer(\n  state: CopyFeedbackState,\n  copied: boolean,\n): CopyFeedbackState {\n  return copied\n    ? { copied: true, resetKey: state.resetKey + 1 }\n    : { ...state, copied: false };\n}\n\nfunction getStartLineNumber(startLineNumber: number): number {\n  return Number.isFinite(startLineNumber) ? Math.floor(startLineNumber) : 1;\n}\n\nfunction LineNumbers({ count, startLine, size }: LineNumbersProps) {\n  return (\n    <div aria-hidden=\"true\" className={cn(lineNumberVariants({ size }))}>\n      {Array.from({ length: count }, (_, i) => (\n        <span key={i} className=\"block mb-px last:mb-0\">\n          {startLine + i}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nconst CodeSnippet = React.forwardRef<HTMLElement, CodeSnippetProps>(\n  (\n    {\n      code,\n      language,\n      showLineNumbers = true,\n      startLineNumber = 1,\n      showCopyButton = false,\n      size,\n      className,\n      breakpoint = 'desktop',\n    },\n    ref,\n  ) => {\n    const highlightedContent = React.useMemo(\n      () => renderHighlightedCode(code),\n      [code],\n    );\n    const lineCount = React.useMemo(() => code.split('\\n').length, [code]);\n    const safeStartLineNumber = getStartLineNumber(startLineNumber);\n\n    const [copyFeedback, setCopyFeedback] = React.useReducer(\n      copyFeedbackReducer,\n      { copied: false, resetKey: 0 },\n    );\n    const { copied } = copyFeedback;\n    const rootRef = React.useRef<HTMLElement>(null);\n\n    // Merge forwarded ref with local ref\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLElement);\n\n    React.useEffect(() => {\n      if (!copyFeedback.copied) return;\n\n      const copyResetTimer = setTimeout(() => {\n        setCopyFeedback(false);\n      }, 2000);\n\n      return () => {\n        clearTimeout(copyResetTimer);\n      };\n    }, [copyFeedback]);\n\n    const handleCopy = React.useCallback(async () => {\n      try {\n        const win = rootRef.current?.ownerDocument.defaultView;\n        if (!win) return;\n        await win.navigator.clipboard.writeText(code);\n        setCopyFeedback(true);\n      } catch (err) {\n        console.error('Failed to copy code:', err);\n      }\n    }, [code]);\n\n    const containerPadding = breakpoint === 'mobile' ? 'p-4' : 'p-6';\n    const contentPadding =\n      breakpoint === 'mobile' ? 'py-4 px-4 pb-6' : 'py-6 px-6 pb-8';\n\n    return (\n      <section\n        ref={rootRef}\n        data-slot=\"code-snippet\"\n        aria-label=\"Code snippet\"\n        className={cn(\n          codeSnippetVariants({ size }),\n          'relative flex items-start justify-center',\n          className,\n        )}\n        style={SUGAR_HIGH_STYLE}\n      >\n        {/* Language badge & copy button */}\n        {(language || showCopyButton) && (\n          <div className=\"absolute top-2 end-2 flex items-center gap-2 z-10\">\n            {language && (\n              <span className=\"text-xs font-medium text-secondary-foreground uppercase select-none\">\n                {language}\n              </span>\n            )}\n            {showCopyButton && (\n              <Button\n                appearance=\"ghost\"\n                variant=\"secondary\"\n                size=\"sm\"\n                onClick={handleCopy}\n                aria-label={\n                  copied ? 'Copied to clipboard' : 'Copy code to clipboard'\n                }\n                className=\"h-7 px-2 text-secondary-foreground hover:text-foreground transition-colors duration-150 ease-out\"\n              >\n                {copied ? (\n                  <Check className=\"size-3.5 text-success\" />\n                ) : (\n                  <Copy className=\"size-3.5\" />\n                )}\n              </Button>\n            )}\n          </div>\n        )}\n\n        {/* Line Numbers Sidebar */}\n        {showLineNumbers && (\n          <div\n            className={cn(\n              'shrink-0 self-stretch bg-muted border-e border-border',\n              containerPadding,\n            )}\n          >\n            <LineNumbers\n              count={lineCount}\n              startLine={safeStartLineNumber}\n              size={size}\n            />\n          </div>\n        )}\n\n        {/* Code Content */}\n        <section\n          className={cn(\n            'grow min-w-0 overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n            contentPadding,\n          )}\n          // biome-ignore lint/a11y/noNoninteractiveTabindex: Focusable scroll region satisfies axe scrollable-region-focusable.\n          tabIndex={0}\n          aria-label=\"Code content\"\n        >\n          <pre\n            className={cn(\n              'font-mono font-medium leading-normal !bg-transparent !p-0 !m-0 !border-0 !rounded-none',\n              '[&_.sh__line]:block [&_.sh__line]:leading-normal [&_.sh__line]:mb-px [&_.sh__line:last-child]:mb-0',\n            )}\n          >\n            {highlightedContent}\n          </pre>\n        </section>\n      </section>\n    );\n  },\n);\n\nCodeSnippet.displayName = 'CodeSnippet';\n\nexport { CodeSnippet, codeSnippetVariants, lineNumberVariants };\n","/**\n * Web Component wrapper for CodeSnippet\n * Custom element: <hf-code-snippet>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { CodeSnippet } from '../components/molecules/data/CodeSnippet';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    size: 'string',\n    code: 'string',\n    language: 'string',\n    showLineNumbers: 'boolean',\n    startLineNumber: 'number',\n    showCopyButton: 'boolean',\n    className: 'string',\n    breakpoint: 'string'\n};\n\nclass CodeSnippetWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      CodeSnippet,\n      props,\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(CodeSnippetWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-code-snippet')) {\n  customElements.define('hf-code-snippet', CodeSnippetWC);\n}\n\nexport { CodeSnippetWC };\nexport default CodeSnippetWC;\n"],"mappings":"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"}