@flamingo-stack/openframe-frontend-core 0.0.262 → 0.0.263-snapshot.20260612072624

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.262",
+  "version": "0.0.263-snapshot.20260612072624",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/comment-card.tsx

@@ -76,7 +76,7 @@ export function CommentCard({
   const showDeleteButton = canUserDeleteComment()
 
   return (
-    <div className="bg-ods-card border border-ods-border rounded-lg p-4 hover:border-[#FFC008] transition-all group overflow-hidden w-full max-w-full box-border" style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
+    <div className="bg-ods-card border border-ods-border rounded-lg p-4 hover:border-ods-accent transition-all group overflow-hidden w-full max-w-full box-border" style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
       {/* Comment Header */}
       <div className="flex flex-col gap-3 mb-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2 w-full">
         {/* Row 1: Info + Timestamp */}

package/src/components/vendor-display-button.tsx

@@ -31,7 +31,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
     return (
       <button 
         onClick={handleClick}
-        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#1A1A1A] border border-[#2A2A2A] hover:border-[#FFC008]/50 transition-colors"
+        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-ods-card border border-ods-border hover:border-ods-accent/50 transition-colors"
       >
         {logoUrl ? (
           <div className="w-5 h-5 rounded overflow-hidden flex-shrink-0">
@@ -44,13 +44,13 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
             />
           </div>
         ) : (
-          <div className="w-5 h-5 rounded bg-[#2A2A2A] flex items-center justify-center flex-shrink-0">
-            <span className="text-[#666666] text-[10px] font-medium">
+          <div className="w-5 h-5 rounded bg-ods-border flex items-center justify-center flex-shrink-0">
+            <span className="text-ods-text-secondary text-[10px] font-medium">
               {vendor.title.charAt(0).toUpperCase()}
             </span>
           </div>
         )}
-        <span className="text-sm font-medium text-white">
+        <span className="text-sm font-medium text-ods-text-primary">
           {vendor.title}
         </span>
       </button>
@@ -61,7 +61,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
   return (
     <button 
       onClick={handleClick}
-      className="flex items-center gap-2 bg-ods-card border border-ods-border rounded-lg py-2 px-3 hover:border-[#FFC008] transition-colors max-w-full overflow-hidden"
+      className="flex items-center gap-2 bg-ods-card border border-ods-border rounded-lg py-2 px-3 hover:border-ods-accent transition-colors max-w-full overflow-hidden"
     >
       {getVendorLogo(vendor) ? (
         <div className="w-8 h-8 bg-ods-card border border-ods-border rounded-lg flex items-center justify-center flex-shrink-0">

package/src/hooks/ui/use-horizontal-scrollbar.ts

@@ -17,6 +17,7 @@ export function useHorizontalScrollbar() {
   const trackRef = useRef<HTMLDivElement>(null)
   const thumbRef = useRef<HTMLDivElement>(null)
   const roRef = useRef<ResizeObserver | null>(null)
+  const moRef = useRef<MutationObserver | null>(null)
   const [thumbRatio, setThumbRatio] = useState(0)
 
   // Edge-fade state
@@ -94,6 +95,10 @@ export function useHorizontalScrollbar() {
       roRef.current.disconnect()
       roRef.current = null
     }
+    if (moRef.current) {
+      moRef.current.disconnect()
+      moRef.current = null
+    }
     if (rafIdRef.current) {
       cancelAnimationFrame(rafIdRef.current)
       rafIdRef.current = 0
@@ -105,8 +110,20 @@ export function useHorizontalScrollbar() {
       const ratio = node.clientWidth / node.scrollWidth
       setThumbRatio(ratio >= 1 ? 0 : ratio)
 
-      roRef.current = new ResizeObserver(measure)
-      roRef.current.observe(node)
+      const ro = new ResizeObserver(measure)
+      roRef.current = ro
+      const observeAll = () => {
+        ro.disconnect()
+        ro.observe(node)
+        for (const child of Array.from(node.children)) ro.observe(child)
+      }
+      observeAll()
+
+      moRef.current = new MutationObserver(() => {
+        observeAll()
+        measure()
+      })
+      moRef.current.observe(node, { childList: true })
 
       requestAnimationFrame(() => {
         syncThumbToDOM()