@gtkx/cli 0.16.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/cli",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "CLI for GTKX - create and develop GTK4 React applications",
   "keywords": [
     "gtkx",
@@ -58,19 +58,19 @@
     "ejs": "^4.0.1",
     "react-refresh": "^0.18.0",
     "vite": "^7.3.1",
-    "@gtkx/mcp": "0.16.0",
-    "@gtkx/ffi": "0.16.0",
-    "@gtkx/react": "0.16.0"
+    "@gtkx/mcp": "0.17.1",
+    "@gtkx/react": "0.17.1",
+    "@gtkx/ffi": "0.17.1"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/react-refresh": "^0.14.7",
-    "memfs": "^4.56.9",
-    "@gtkx/testing": "0.16.0"
+    "memfs": "^4.56.10",
+    "@gtkx/testing": "0.17.1"
   },
   "peerDependencies": {
     "react": "^19",
-    "@gtkx/testing": "0.16.0"
+    "@gtkx/testing": "0.17.1"
   },
   "peerDependenciesMeta": {
     "@gtkx/testing": {

package/templates/claude/EXAMPLES.md.ejs

@@ -717,3 +717,38 @@ const StackNavigation = () => {
     );
 };
 ```
+
+---
+
+## Animated Card with Toggle
+
+```tsx
+import * as Gtk from "@gtkx/ffi/gtk";
+import { GtkBox, GtkButton, GtkLabel, x } from "@gtkx/react";
+import { useState } from "react";
+
+const AnimatedCard = () => {
+    const [visible, setVisible] = useState(true);
+
+    return (
+        <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={12} marginStart={16} marginEnd={16} marginTop={16} marginBottom={16}>
+            <GtkButton label={visible ? "Hide Card" : "Show Card"} onClicked={() => setVisible(!visible)} halign={Gtk.Align.START} />
+            {visible && (
+                <x.Animation
+                    mode="spring"
+                    initial={{ opacity: 0, scale: 0.8, translateY: -20 }}
+                    animate={{ opacity: 1, scale: 1, translateY: 0 }}
+                    exit={{ opacity: 0, scale: 0.8, translateY: 20 }}
+                    transition={{ damping: 0.7, stiffness: 200 }}
+                    animateOnMount
+                >
+                    <GtkBox orientation={Gtk.Orientation.VERTICAL} spacing={8} cssClasses={["card"]} marginStart={12} marginEnd={12} marginTop={8} marginBottom={8}>
+                        <GtkLabel label="Animated Card" cssClasses={["title-4"]} halign={Gtk.Align.START} />
+                        <GtkLabel label="This card animates in with a spring effect and fades out when dismissed." wrap />
+                    </GtkBox>
+                </x.Animation>
+            )}
+        </GtkBox>
+    );
+};
+```

package/templates/claude/SKILL.md.ejs

@@ -67,6 +67,20 @@ Some widgets require children in specific slots:
 </GtkHeaderBar>
 ```
 
+### Animations
+
+```tsx
+<x.Animation
+    mode="spring"
+    initial={{ opacity: 0, scale: 0.8 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ damping: 0.8, stiffness: 200 }}
+    animateOnMount
+>
+    <GtkLabel label="Animated!" />
+</x.Animation>
+```
+
 ## Key Constraints
 
 - GTK is single-threaded: all widget operations on main thread

package/templates/claude/WIDGETS.md.ejs

@@ -633,17 +633,22 @@ Wrap widgets in `x.Animation` for declarative animations with spring or timed tr
 
 ```tsx
 <x.Animation
-    initial={{ opacity: 0, scaleX: 0.8 }}
-    animate={{ opacity: 1, scaleX: 1 }}
-    transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    mode="spring"
+    initial={{ opacity: 0, scale: 0.8 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ damping: 0.8, stiffness: 200, mass: 1 }}
+    animateOnMount
     onAnimationComplete={() => console.log("done")}
 >
     <GtkBox>...</GtkBox>
 </x.Animation>
 ```
 
-**Props:** `initial`, `animate`, `transition`, `onAnimationComplete`
-**Transition types:** `{ type: "spring", stiffness, damping }` or `{ type: "timed", duration, easing }`
+**Props:** `mode` (`"spring"` | `"timed"`), `initial`, `animate`, `exit`, `transition`, `animateOnMount`, `onAnimationStart`, `onAnimationComplete`
+
+**Spring transition:** `damping`, `stiffness`, `mass`, `initialVelocity`, `clamp`, `delay`
+
+**Timed transition:** `duration`, `easing` (from `Adw.Easing`), `delay`, `repeat`, `reverse`, `alternate`
 
 ---