@flamingo-stack/openframe-frontend-core 0.0.449-snapshot.20260718143201 → 0.0.449

package/src/stories/QuickActionMarquee.stories.tsx

@@ -32,14 +32,14 @@ const meta: Meta<typeof QuickActionMarquee> = {
     docs: {
       description: {
         component:
-          'Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo marquee rows) — a single-row preset of the shared `<MarqueeWall>` engine (the same rAF core as the card strips). The item list is padded to ≥12 chips and the wall clones the track for the seamless loop; the clone copy is `aria-hidden` and never focusable. Speed is in px/s (constant on-screen speed regardless of item count). Pauses on hover (`pauseOnHover`, default on) and always under `prefers-reduced-motion`. Pass `onSelect` to make chips interactive buttons; omit it for a purely decorative strip.',
+          'Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo marquee rows). The item list is padded to ≥6 chips and rendered twice so the `qa-marquee` keyframe’s `translateX(-50%)` loops seamlessly; the duplicate half is `aria-hidden` and never focusable. Pauses on hover (`pauseOnHover`, default on) and always under `prefers-reduced-motion`. Pass `onSelect` to make chips interactive buttons; omit it for a purely decorative strip.',
       },
     },
   },
   argTypes: {
     items: { control: false },
     direction: { control: 'inline-radio', options: ['left', 'right'] },
-    speed: { control: { type: 'number', min: 10, max: 200, step: 10 } },
+    duration: { control: { type: 'number', min: 5, max: 120, step: 5 } },
     pauseOnHover: { control: 'boolean' },
     onSelect: { control: false },
   },
@@ -66,7 +66,7 @@ export const Default: Story = {
 /** The two Figma rows: fae (left) over mingo (right, reversed). */
 export const TwoRows: Story = {
   render: () => (
-    <div className="flex flex-col gap-[var(--spacing-system-mf)]">
+    <div className="flex flex-col gap-4">
       <QuickActionMarquee items={FAE_ITEMS} direction="left" onSelect={(i) => console.log(i.id)} />
       <QuickActionMarquee items={MINGO_ITEMS} direction="right" onSelect={(i) => console.log(i.id)} />
     </div>
@@ -93,9 +93,8 @@ export const Decorative: Story = {
 }
 
 /**
- * Fewer than 12 items — the track is auto-repeated up to the `minChips`
- * padding target so one copy always overflows the container and the loop
- * engages.
+ * Fewer than 6 items — the track is auto-repeated up to the `MIN_TRACK_ITEMS`
+ * heuristic so the halved loop still fills the viewport with no visible gap.
  */
 export const FewItems: Story = {
   args: {
@@ -104,11 +103,11 @@ export const FewItems: Story = {
   },
 }
 
-/** Faster scroll (`speed={120}` px/s) and hover-pause disabled. */
+/** Faster loop (`duration={15}`) and hover-pause disabled. */
 export const FastNoPause: Story = {
   args: {
     items: FAE_ITEMS,
-    speed: 120,
+    duration: 15,
     pauseOnHover: false,
     onSelect: (item) => console.log('select', item.id),
   },

package/tailwind.config.ts

@@ -375,11 +375,18 @@ const config: Config = {
           from: { opacity: "0" },
           to: { opacity: "1" },
         },
+        // Endless chip strip (QuickActionMarquee): the track renders its items
+        // twice, so -50% lands exactly one copy over for a seamless loop.
+        "qa-marquee": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-50%)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.3s ease-out",
+        "qa-marquee": "qa-marquee var(--qa-marquee-duration,40s) linear infinite",
       },
     },
   },