Refactor component paths in sync_components.py for improved structure. Update card and textarea components for better styling and layout. Enhance tooltip component with animation frame scheduling for smoother interactions.

Author: dakixr

scripts/sync_components.py

@@ -43,8 +43,8 @@ def __init__(self, workspace_root: str = "/Users/dakixr/dev"):
 
         # Component directories
         self.uikit_components = self.uikit_path / "src" / "htpy_uikit" / "components"
-        self.ionisium_components = self.ionisium_path / "templates" / "components"
-        self.costcompiler_components = self.costcompiler_path / "templates" / "components"
+        self.ionisium_components = self.ionisium_path / "components"
+        self.costcompiler_components = self.costcompiler_path / "components"
 
         # Projects mapping
         self.projects = {

src/htpy_uikit/components/card.py

@@ -91,7 +91,7 @@ def card(
         nodes.append(header(class_=header_classes)[*header_children])
 
     # Section
-    sec_classes = ""
+    sec_classes = "flex flex-col gap-6"
     if section_class:
         sec_classes = f"{sec_classes} {section_class}"
     nodes.append(section(class_=sec_classes)[children])

src/htpy_uikit/components/textarea.py

@@ -53,7 +53,7 @@ def textarea_component(
         "border-input placeholder:text-muted-foreground focus-visible:border-ring "
         "focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 "
         "dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive "
-        "dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md "
+        "dark:bg-input/30 flex min-h-16 w-full rounded-md field-sizing-content"
         "border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] "
         "outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
     )

src/htpy_uikit/components/tooltip.py

@@ -1,6 +1,7 @@
 from htpy import Node
 from htpy import Renderable
 from htpy import span
+from htpy import template
 from htpy import with_children
 from markupsafe import Markup
 from sourcetypes import js
@@ -50,6 +51,19 @@ def tooltip(
             style: '',
             side: '{side}',
             align: '{align}',
+            _raf: null,
+            schedule() {{
+                cancelAnimationFrame(this._raf || 0);
+                this._raf = requestAnimationFrame(() => {{
+                    this.update();
+                    // Run a second time next frame to account for late layout/teleport
+                    this._raf = requestAnimationFrame(() => this.update());
+                }});
+            }},
+            cancel() {{
+                cancelAnimationFrame(this._raf || 0);
+                this._raf = null;
+            }},
             update() {{
                 const trigger = this.$refs.trigger;
                 const bubble = this.$refs.bubble;
@@ -96,12 +110,12 @@ def tooltip(
         "class_": merge_classes("relative inline-block w-fit", class_),
         "x-ref": "trigger",
         "x-data": Markup(x_data),
-        "@mouseenter": "open = true; $nextTick(() => update())",
-        "@mouseleave": "open = false",
-        "@focus": "open = true; $nextTick(() => update())",
-        "@blur": "open = false",
-        "@resize.window": "open && update()",
-        "@scroll.window": "open && update()",
+        "@mouseenter": "open = true; $nextTick(() => schedule())",
+        "@mouseleave": "open = false; cancel()",
+        "@focus": "open = true; $nextTick(() => schedule())",
+        "@blur": "open = false; cancel()",
+        "@resize.window": "open && schedule()",
+        "@scroll.window": "open && schedule()",
         "tabindex": "0",
         "aria-describedby": "",
     }
@@ -124,5 +138,6 @@ def tooltip(
 
     # Create elements
     bubble = span(**bubble_attrs, **attrs)[content]
+    teleported = template(x_teleport="body")[bubble]
 
-    return span(**wrapper_attrs)[children, bubble]
+    return span(**wrapper_attrs)[children, teleported]