refactor: improve marquee

Author: segunadebayo

.changeset/marquee-firefox-flicker-fix.md

@@ -0,0 +1,8 @@
+---
+"@zag-js/marquee": patch
+---
+
+- Fix Firefox flicker when marquee animation loops
+- Use margin-based spacing instead of gap for items
+- Use `backface-visibility: hidden` for better GPU acceleration
+- Add new `item` part with `getItemProps()` method

examples/next-ts/pages/marquee.tsx

@@ -27,7 +27,7 @@ export default function Page() {
             {Array.from({ length: api.contentCount }).map((_, index) => (
               <div key={index} {...api.getContentProps({ index })}>
                 {marqueeData.map((item, i) => (
-                  <div key={i} className="marquee-item">
+                  <div key={i} {...api.getItemProps()}>
                     <span className="marquee-logo">{item.logo}</span>
                     <span className="marquee-name">{item.name}</span>
                   </div>

examples/nuxt-ts/pages/marquee.vue

@@ -24,7 +24,7 @@ const api = computed(() => marquee.connect(service, normalizeProps))
 
       <div v-bind="api.getViewportProps()">
         <div v-for="index in api.contentCount" :key="index - 1" v-bind="api.getContentProps({ index: index - 1 })">
-          <div v-for="(item, i) in marqueeData" :key="i" class="marquee-item">
+          <div v-for="(item, i) in marqueeData" :key="i" v-bind="api.getItemProps()">
             <span class="marquee-logo">{{ item.logo }}</span>
             <span class="marquee-name">{{ item.name }}</span>
           </div>

examples/solid-ts/src/routes/marquee.tsx

@@ -31,7 +31,7 @@ export default function Page() {
                 <div {...api().getContentProps({ index })}>
                   <For each={marqueeData}>
                     {(item) => (
-                      <div class="marquee-item">
+                      <div {...api().getItemProps()}>
                         <span class="marquee-logo">{item.logo}</span>
                         <span class="marquee-name">{item.name}</span>
                       </div>

examples/svelte-ts/src/routes/marquee/+page.svelte

@@ -28,7 +28,7 @@
       {#each Array.from({ length: api.contentCount }) as _, index}
         <div {...api.getContentProps({ index })}>
           {#each marqueeData as item}
-            <div class="marquee-item">
+            <div {...api.getItemProps()}>
               <span class="marquee-logo">{item.logo}</span>
               <span class="marquee-name">{item.name}</span>
             </div>

packages/docs/data/api.json

@@ -2342,14 +2342,58 @@
   },
   "image-cropper": {
     "api": {
+      "zoom": {
+        "type": "number",
+        "description": "The current zoom level of the image."
+      },
+      "rotation": {
+        "type": "number",
+        "description": "The current rotation of the image in degrees."
+      },
+      "flip": {
+        "type": "FlipState",
+        "description": "The current flip state of the image."
+      },
+      "crop": {
+        "type": "Rect",
+        "description": "The current crop area rectangle in viewport coordinates."
+      },
+      "offset": {
+        "type": "Point",
+        "description": "The current offset (pan position) of the image."
+      },
+      "naturalSize": {
+        "type": "Size",
+        "description": "The natural (original) size of the image."
+      },
+      "viewportRect": {
+        "type": "BoundingRect",
+        "description": "The viewport rectangle dimensions and position."
+      },
+      "dragging": {
+        "type": "boolean",
+        "description": "Whether the crop area is currently being dragged."
+      },
+      "panning": {
+        "type": "boolean",
+        "description": "Whether the image is currently being panned."
+      },
       "setZoom": {
         "type": "(zoom: number) => void",
         "description": "Function to set the zoom level of the image."
       },
+      "zoomBy": {
+        "type": "(delta: number) => void",
+        "description": "Function to zoom the image by a relative amount."
+      },
       "setRotation": {
         "type": "(rotation: number) => void",
         "description": "Function to set the rotation of the image."
       },
+      "rotateBy": {
+        "type": "(degrees: number) => void",
+        "description": "Function to rotate the image by a relative amount in degrees."
+      },
       "setFlip": {
         "type": "(flip: Partial<FlipState>) => void",
         "description": "Function to set the flip state of the image."
@@ -2366,9 +2410,17 @@
         "type": "(handlePosition: HandlePosition, delta: number) => void",
         "description": "Function to resize the crop area from a handle programmatically."
       },
+      "reset": {
+        "type": "() => void",
+        "description": "Function to reset the cropper to its initial state."
+      },
       "getCroppedImage": {
         "type": "(options?: GetCroppedImageOptions) => Promise<string | Blob>",
         "description": "Function to get the cropped image with all transformations applied.\nReturns a Promise that resolves to either a Blob or data URL."
+      },
+      "getCropData": {
+        "type": "() => CropData",
+        "description": "Function to get the crop data in natural image pixel coordinates.\nThese coordinates are relative to the original image dimensions,\naccounting for zoom, rotation, and flip transformations.\nUse this for server-side cropping or state persistence."
       }
     },
     "context": {