refactor(flip-card): composable Front/Back API with motion-safe code#511
Open
sudhashrestha wants to merge 3 commits into
Open
refactor(flip-card): composable Front/Back API with motion-safe code#511sudhashrestha wants to merge 3 commits into
sudhashrestha wants to merge 3 commits into
Conversation
…forms Replace fixed image/title props with FlipCard.Front and FlipCard.Back. Consumers own face markup. Flip uses transform-only transitions with reduced-motion guards. Co-authored-by: Cursor <cursoragent@cursor.com>
📝 WalkthroughWalkthroughFlipCard refactored into composable subcomponents (FlipCardRoot, Front, Back) using React context for rotation axis; FlippingCards built as grid wrapper around FlipCard; SplitReveal modularized from 570-line monolith into composable submodules (root, overlay, progress, task, images, utilities) with Context-based state sharing; stories, demos, and documentation updated to show composition-based APIs; build-registry enhanced for robust relative import resolution. ChangesCard Composition Refactor
SplitReveal Modularization
Build System
Sequence DiagramssequenceDiagram
participant SplitRevealRoot
participant SplitRevealTask
participant executeTask
participant report callback
participant phases
SplitRevealRoot->>SplitRevealRoot: initialize reducer (loading phase)
SplitRevealTask->>SplitRevealRoot: registerTask(id, task)
SplitRevealRoot->>executeTask: run all registered tasks with abort signal
executeTask->>executeTask: run task.run or iterate task.generator
executeTask->>report callback: report({loaded, total})
report callback->>SplitRevealRoot: dispatch progress update
SplitRevealRoot->>phases: transition fade-ui → reveal → done with delays
SplitRevealRoot->>SplitRevealRoot: cleanup, invoke onComplete
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying animata with
|
| Latest commit: |
e2c3ac8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5105e99d.animata.pages.dev |
| Branch Preview URL: | https://refactor-flip-card-composabl.animata.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/card/flip-card.tsx`:
- Around line 13-21: The hover rotation entries in ROTATION_CLASS (the hover
strings for keys x and y) cancel the flip under prefers-reduced-motion causing
FlipCardBack to remain pre-rotated and inaccessible; remove the motion-reduce
override tokens ("motion-reduce:group-hover/card:rotate-x-0" and
"motion-reduce:group-hover/card:rotate-y-0") from the hover values so the hover
still applies instantly for reduced-motion users (the existing
motion-reduce:transition-none handling at the transition site can remain as-is);
keep the back rotations ("rotate-x-180" / "rotate-y-180") unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ae1301a5-1e28-4a41-8f14-241aa590eb0a
📒 Files selected for processing (6)
animata/card/flip-card.stories.tsxanimata/card/flip-card.tsxanimata/card/swap-card.tsxcontent/docs/card/flip-card.mdxcontent/docs/card/index.mdxcontent/docs/changelog/2026-06.mdx
Comment on lines
+13
to
+21
| const ROTATION_CLASS = { | ||
| x: { | ||
| hover: "group-hover/card:rotate-x-180 motion-reduce:group-hover/card:rotate-x-0", | ||
| back: "rotate-x-180", | ||
| }, | ||
| y: { | ||
| hover: "group-hover/card:rotate-y-180 motion-reduce:group-hover/card:rotate-y-0", | ||
| back: "rotate-y-180", | ||
| }, |
There was a problem hiding this comment.
Reduced-motion users can no longer access the back face.
Lines 15 and 19 cancel the hover rotation under prefers-reduced-motion, so the card never flips while FlipCardBack stays pre-rotated at 180°. That makes the back content visually unreachable for those users. motion-reduce:transition-none on Line 44 already removes the animation; the rotation override should be dropped so the flip still happens instantly.
Suggested fix
const ROTATION_CLASS = {
x: {
- hover: "group-hover/card:rotate-x-180 motion-reduce:group-hover/card:rotate-x-0",
+ hover: "group-hover/card:rotate-x-180",
back: "rotate-x-180",
},
y: {
- hover: "group-hover/card:rotate-y-180 motion-reduce:group-hover/card:rotate-y-0",
+ hover: "group-hover/card:rotate-y-180",
back: "rotate-y-180",
},
} as const;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const ROTATION_CLASS = { | |
| x: { | |
| hover: "group-hover/card:rotate-x-180 motion-reduce:group-hover/card:rotate-x-0", | |
| back: "rotate-x-180", | |
| }, | |
| y: { | |
| hover: "group-hover/card:rotate-y-180 motion-reduce:group-hover/card:rotate-y-0", | |
| back: "rotate-y-180", | |
| }, | |
| const ROTATION_CLASS = { | |
| x: { | |
| hover: "group-hover/card:rotate-x-180", | |
| back: "rotate-x-180", | |
| }, | |
| y: { | |
| hover: "group-hover/card:rotate-y-180", | |
| back: "rotate-y-180", | |
| }, | |
| } as const; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/card/flip-card.tsx` around lines 13 - 21, The hover rotation entries
in ROTATION_CLASS (the hover strings for keys x and y) cancel the flip under
prefers-reduced-motion causing FlipCardBack to remain pre-rotated and
inaccessible; remove the motion-reduce override tokens
("motion-reduce:group-hover/card:rotate-x-0" and
"motion-reduce:group-hover/card:rotate-y-0") from the hover values so the hover
still applies instantly for reduced-motion users (the existing
motion-reduce:transition-none handling at the transition site can remain as-is);
keep the back rotations ("rotate-x-180" / "rotate-y-180") unchanged.
Replace list prop and inline 3D flip with FlippingCards.Item.Front/Back. Storybook demo and docs updated; accent helper exported for back faces. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/list/flipping-cards.stories.tsx`:
- Around line 63-67: The story hardcodes light-only colors in
FlippingCards.Item.Front and its children; make these classes theme-responsive
by replacing static color classes with light/dark-aware classes. Update
FlippingCards.Item.Front’s className from "flex bg-white" to include a dark
variant (e.g. "flex bg-white dark:bg-slate-900" or your design token like "flex
bg-surface dark:bg-surface-dark"), change the inner div’s border/text classes
from "border border-black/15 ... text-sm" to use dual-mode classes (e.g. "border
border-black/15 dark:border-white/15 text-black dark:text-white px-3 py-4
text-sm"), and update the span classes that use "text-black" and "border-black"
to corresponding "text-black dark:text-white" and "border-black/15
dark:border-white/15" (or your token equivalents) so the face adapts in dark
mode. Ensure all color uses within FlippingCards.Item.Front, the inner
container, and both spans are converted to light/dark variants or theme tokens.
In `@animata/list/flipping-cards.tsx`:
- Around line 31-33: Replace the arbitrary HSL hue math in
getFlippingCardsAccent with the theme accent token so the component uses the
shared accent styling; specifically, change the function
getFlippingCardsAccent(index: number) to return the theme value like
"hsl(var(--accent))" (or "hsl(var(--accent) / <alpha>)" if you need opacity)
instead of computing `(index * 47) % 360`.
In `@content/docs/list/flipping-cards.mdx`:
- Line 21: The docs note incorrectly lists Marquee as a required install for the
flipping-cards example; update content/docs/list/flipping-cards.mdx to remove
the sentence that instructs installing Marquee and instead mention only the
required Flip Card, and confirm the example file animata/list/flipping-cards.tsx
(which does not import or use Marquee) needs no code changes—just update the
text to say "This uses [Flip Card](/docs/card/flip-card) for the hover flip" and
remove the Marquee install reference.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9acbc95c-a295-48ea-8d5a-2f34ea4e7f5f
📒 Files selected for processing (5)
animata/list/flipping-cards.stories.tsxanimata/list/flipping-cards.tsxcontent/docs/changelog/2026-06.mdxcontent/docs/list/flipping-cards.mdxcontent/docs/list/index.mdx
Comment on lines
+63
to
+67
| <FlippingCards.Item.Front className="flex bg-white"> | ||
| <div className="flex w-full flex-col border border-black/15 px-3 py-4 text-sm"> | ||
| <span className="border-t-2 border-black pt-1 text-black">{item.font}</span> | ||
| <span className="mt-4 border-b-2 border-black px-1 font-serif text-8xl text-black"> | ||
| {item.title} |
There was a problem hiding this comment.
Make the story face markup theme-responsive.
The face content hardcodes light-only colors (bg-white, text-black, border-black), so the demo does not adapt properly in dark mode.
Suggested token-based class update
- <FlippingCards.Item.Front className="flex bg-white">
- <div className="flex w-full flex-col border border-black/15 px-3 py-4 text-sm">
- <span className="border-t-2 border-black pt-1 text-black">{item.font}</span>
- <span className="mt-4 border-b-2 border-black px-1 font-serif text-8xl text-black">
+ <FlippingCards.Item.Front className="flex bg-card text-card-foreground">
+ <div className="flex w-full flex-col border border-border/60 px-3 py-4 text-sm">
+ <span className="border-t-2 border-border pt-1">{item.font}</span>
+ <span className="mt-4 border-b-2 border-border px-1 font-serif text-8xl">
{item.title}
</span>
@@
- <span className="text-black">See more</span>
- <PlusCircle size={18} color="black" />
+ <span className="text-card-foreground">See more</span>
+ <PlusCircle size={18} className="text-card-foreground" />As per coding guidelines, "All new components must be theme-responsive with support for both light and dark themes".
Also applies to: 84-85
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/list/flipping-cards.stories.tsx` around lines 63 - 67, The story
hardcodes light-only colors in FlippingCards.Item.Front and its children; make
these classes theme-responsive by replacing static color classes with
light/dark-aware classes. Update FlippingCards.Item.Front’s className from "flex
bg-white" to include a dark variant (e.g. "flex bg-white dark:bg-slate-900" or
your design token like "flex bg-surface dark:bg-surface-dark"), change the inner
div’s border/text classes from "border border-black/15 ... text-sm" to use
dual-mode classes (e.g. "border border-black/15 dark:border-white/15 text-black
dark:text-white px-3 py-4 text-sm"), and update the span classes that use
"text-black" and "border-black" to corresponding "text-black dark:text-white"
and "border-black/15 dark:border-white/15" (or your token equivalents) so the
face adapts in dark mode. Ensure all color uses within FlippingCards.Item.Front,
the inner container, and both spans are converted to light/dark variants or
theme tokens.
Source: Coding guidelines
Comment on lines
+31
to
33
| export function getFlippingCardsAccent(index: number) { | ||
| return `hsl(${(index * 47) % 360} 45% 55%)`; | ||
| } |
There was a problem hiding this comment.
Align getFlippingCardsAccent with the theme accent token.
The helper currently generates arbitrary hues, which bypasses the shared accent token and can drift from theme styling.
Suggested token-based implementation
export function getFlippingCardsAccent(index: number) {
- return `hsl(${(index * 47) % 360} 45% 55%)`;
+ const alpha = index % 2 === 0 ? "0.9" : "0.75";
+ return `hsl(var(--accent) / ${alpha})`;
}As per coding guidelines, "Theme accent color is hsl(var(--accent)) which is purple/violet".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export function getFlippingCardsAccent(index: number) { | |
| return `hsl(${(index * 47) % 360} 45% 55%)`; | |
| } | |
| export function getFlippingCardsAccent(index: number) { | |
| const alpha = index % 2 === 0 ? "0.9" : "0.75"; | |
| return `hsl(var(--accent) / ${alpha})`; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/list/flipping-cards.tsx` around lines 31 - 33, Replace the arbitrary
HSL hue math in getFlippingCardsAccent with the theme accent token so the
component uses the shared accent styling; specifically, change the function
getFlippingCardsAccent(index: number) to return the theme value like
"hsl(var(--accent))" (or "hsl(var(--accent) / <alpha>)" if you need opacity)
instead of computing `(index * 47) % 360`.
Source: Coding guidelines
| ```bash | ||
| npm install motion | ||
| ``` | ||
| This uses [Flip Card](/docs/card/flip-card) for the hover flip and [Marquee](/docs/container/marquee) for the back-face text. Install both by following their installation steps. |
There was a problem hiding this comment.
Remove Marquee from required install dependencies.
The current animata/list/flipping-cards.tsx implementation does not depend on Marquee, so this instruction is now misleading.
Suggested wording
-This uses [Flip Card](/docs/card/flip-card) for the hover flip and [Marquee](/docs/container/marquee) for the back-face text. Install both by following their installation steps.
+This uses [Flip Card](/docs/card/flip-card) for hover flip mechanics. Install it by following its installation steps.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| This uses [Flip Card](/docs/card/flip-card) for the hover flip and [Marquee](/docs/container/marquee) for the back-face text. Install both by following their installation steps. | |
| This uses [Flip Card](/docs/card/flip-card) for hover flip mechanics. Install it by following its installation steps. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@content/docs/list/flipping-cards.mdx` at line 21, The docs note incorrectly
lists Marquee as a required install for the flipping-cards example; update
content/docs/list/flipping-cards.mdx to remove the sentence that instructs
installing Marquee and instead mention only the required Flip Card, and confirm
the example file animata/list/flipping-cards.tsx (which does not import or use
Marquee) needs no code changes—just update the text to say "This uses [Flip
Card](/docs/card/flip-card) for the hover flip" and remove the Marquee install
reference.
Opt-in Images and Task primitives, external ready/progress control, and tree-shakeable modules. Registry bundler follows co-located imports; photographer demo uses the default Progress UI. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (1)
animata/preloader/split-reveal/index.tsx (1)
3-3: ⚡ Quick winUse a co-located stylesheet for this TSX entrypoint.
index.tsximports../split-reveal.css; this breaks the co-location rule foranimata/**/*.{tsx,css}. Please move/rename to a co-located file (for example./index.css) and import it locally.As per coding guidelines,
animata/**/*.{tsx,css}: “Create co-located<name>.cssfiles for keyframes, pseudo-elements, and selectors that Tailwind cannot express, and import them from the corresponding TSX file.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@animata/preloader/split-reveal/index.tsx` at line 3, The index.tsx file imports a non-co-located stylesheet at ../split-reveal.css, which violates the co-location rule for animata components. Move the split-reveal.css file to the same directory as index.tsx and rename it to index.css, then update the import statement in index.tsx to reference the co-located file with a relative path like ./index.css instead of ../split-reveal.css.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/preloader/split-reveal/execute-task.ts`:
- Around line 15-27: The abort handling in the generator execution loop has two
issues: first, iterator.next() is called at the start of each loop iteration
before checking signal.aborted, allowing one extra generator step to execute
even when aborted; second, when returning due to abort (when signal.aborted is
true), the code returns without calling iterator.return(), which skips generator
cleanup such as finally blocks. To fix this, move the abort check
(signal.aborted) to occur before calling iterator.next() in the while loop
condition or at the loop start, and when returning due to abort, call
iterator.return() first to ensure all cleanup code in the generator executes
properly.
In `@animata/preloader/split-reveal/overlay.tsx`:
- Around line 23-35: The overlay component spreads the consumer-provided props
after defining the required style, which allows a consumer-provided style prop
to override the critical overlay styles (zIndex, --split-reveal-duration,
--split-reveal-progress-fade). Move the style prop definition to come after the
{...props} spread so that the required internal styles take precedence and
cannot be overridden by consumer props, ensuring the overlay behavior is not
broken.
In `@animata/preloader/split-reveal/progress-count.tsx`:
- Around line 20-24: The inline styles in the progress-count component use
hex-suffix opacity notation (${foregroundColor}73 and ${foregroundColor}33)
which only works with hex color strings and breaks with hsl(), rgb(), or CSS
variable values. Replace these color assignments with a format that works
universally across all color types, such as using the rgba() function with a
calculated alpha value or applying opacity through a separate CSS property that
works regardless of the foregroundColor format.
In `@animata/preloader/split-reveal/root.tsx`:
- Around line 21-22: The backgroundColor and foregroundColor default parameters
in the SplitReveal component are hard-coded to light theme values (`#fff` and
`#000`), which breaks the component's appearance in dark mode. Replace these
hard-coded color defaults with theme-responsive tokens that automatically adapt
to the current theme context, ensuring the component works correctly for both
light and dark themes as required by the coding guidelines.
- Around line 121-124: The useEffect hook that manages task bootstrap is
including `controlledReady` and `controlledProgress` in its dependency list,
which causes it to re-run and abort in-flight executeTask calls whenever these
props change. Remove `controlledReady` and `controlledProgress` from the
dependency array of the useEffect that contains the task bootstrap logic. The
effect should initialize the task once at mount, and changing the `ready` flag
should only unblock the reveal without restarting the actual task work defined
in the SplitRevealTask.
- Around line 237-248: The Promise.all() chain for executing tasks only calls
the completion logic in the .then() handler, which means if any task rejects,
tasksDone never gets set to true, phase remains "loading", and the page stays
frozen in a deadlock state. Add error handling to the Promise chain by attaching
a .catch() or .finally() block that ensures the same completion logic (setting
tasksDone = true and calling maybeReveal(currentRun)) executes regardless of
whether the tasks succeed or fail. Make sure the abort signal check (currentRun
!== runId || abortController?.signal.aborted) is applied in both the success and
failure paths to prevent race conditions.
In `@animata/preloader/split-reveal/task.tsx`:
- Around line 25-36: The useEffect dependency array in the task registration is
incomplete. The effect creates a task definition using runRef.current and
generatorRef.current, but the dependency array only includes id and
registerTask. When the run or generator props change, their ref values update
but the effect does not re-run, causing the registered task to have stale
generator and run values. Add runRef and generatorRef (or their current values
if they are stable) to the dependency array so the task gets re-registered
whenever these values change.
In `@animata/preloader/split-reveal/use-prefers-reduced-motion.ts`:
- Around line 5-13: The subscribeReducedMotion function uses addEventListener
and removeEventListener on the MediaQueryList object, but these methods are not
supported in older browsers. Add a feature check to detect whether
addEventListener exists on the MediaQueryList object returned by
window.matchMedia. If it does not exist, fall back to using the deprecated
addListener method for adding the listener, and removeListener for removing it
in the cleanup function. This will ensure compatibility with older browser
versions while maintaining modern browser behavior.
In `@scripts/build-registry.js`:
- Around line 216-218: Relative paths with `../../` sequences can normalize
outside the project root and still be read and bundled into the registry JSON,
leaking unintended local files. After normalizing the path using
path.posix.normalize in the path resolution logic around line 216, add a
validation check to ensure the fully resolved absolute path (when joined with
ROOT) stays within the project root directory before returning it as a valid
base. The same constraint should be enforced at the bundling site around lines
256-259 to prevent any escaped paths from being included in the generated
registry output.
- Around line 267-268: The regex pattern in the `re` variable at lines 267-268
does not match TypeScript type re-exports (`export type { ... } from`). Update
the regex to include `type\s+` as an optional pattern in the export alternatives
so that both `export { ... } from` and `export type { ... } from` syntax are
matched and properly captured during bundling/classification.
---
Nitpick comments:
In `@animata/preloader/split-reveal/index.tsx`:
- Line 3: The index.tsx file imports a non-co-located stylesheet at
../split-reveal.css, which violates the co-location rule for animata components.
Move the split-reveal.css file to the same directory as index.tsx and rename it
to index.css, then update the import statement in index.tsx to reference the
co-located file with a relative path like ./index.css instead of
../split-reveal.css.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fbfaae16-71a4-4d95-88ef-4390cc4fb72d
⛔ Files ignored due to path filters (1)
app/demo/generated/demo-sources.tsis excluded by!**/generated/**
📒 Files selected for processing (24)
animata/preloader/split-reveal.stories.tsxanimata/preloader/split-reveal.tsxanimata/preloader/split-reveal/context.tsxanimata/preloader/split-reveal/execute-task.tsanimata/preloader/split-reveal/images.tsxanimata/preloader/split-reveal/index.tsxanimata/preloader/split-reveal/overlay.tsxanimata/preloader/split-reveal/preload-images.tsanimata/preloader/split-reveal/progress-count.tsxanimata/preloader/split-reveal/progress-slot.tsxanimata/preloader/split-reveal/progress-track.tsxanimata/preloader/split-reveal/progress.tsxanimata/preloader/split-reveal/root.tsxanimata/preloader/split-reveal/shutter.tsxanimata/preloader/split-reveal/task.tsxanimata/preloader/split-reveal/types.tsanimata/preloader/split-reveal/use-prefers-reduced-motion.tsanimata/preloader/split-reveal/use-scroll-lock.tsapp/demo/library/hero/photographer-portfolio-notes.tsxapp/demo/library/hero/photographer-portfolio.tsxcontent/docs/changelog/2026-06.mdxcontent/docs/preloader/index.mdxcontent/docs/preloader/split-reveal.mdxscripts/build-registry.js
✅ Files skipped from review due to trivial changes (5)
- animata/preloader/split-reveal/progress-slot.tsx
- animata/preloader/split-reveal/progress-track.tsx
- animata/preloader/split-reveal/types.ts
- app/demo/library/hero/photographer-portfolio-notes.tsx
- content/docs/changelog/2026-06.mdx
Comment on lines
+15
to
+27
| if (task.generator) { | ||
| const iterator = task.generator(ctx); | ||
| let result = await iterator.next(); | ||
|
|
||
| while (!result.done) { | ||
| if (signal.aborted) { | ||
| return; | ||
| } | ||
| if (result.value) { | ||
| report(result.value); | ||
| } | ||
| result = await iterator.next(); | ||
| } |
There was a problem hiding this comment.
Abort handling pulls one extra generator step and skips iterator cleanup.
At Line 17, iterator.next() runs before abort is checked, so aborted tasks can still execute work once. At Line 21, returning without iterator.return() can bypass generator cleanup (finally blocks).
Suggested fix
if (task.generator) {
+ if (signal.aborted) {
+ return;
+ }
const iterator = task.generator(ctx);
- let result = await iterator.next();
+ let result = await iterator.next();
while (!result.done) {
if (signal.aborted) {
+ await iterator.return?.();
return;
}
if (result.value) {
report(result.value);
}
result = await iterator.next();
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (task.generator) { | |
| const iterator = task.generator(ctx); | |
| let result = await iterator.next(); | |
| while (!result.done) { | |
| if (signal.aborted) { | |
| return; | |
| } | |
| if (result.value) { | |
| report(result.value); | |
| } | |
| result = await iterator.next(); | |
| } | |
| if (task.generator) { | |
| if (signal.aborted) { | |
| return; | |
| } | |
| const iterator = task.generator(ctx); | |
| let result = await iterator.next(); | |
| while (!result.done) { | |
| if (signal.aborted) { | |
| await iterator.return?.(); | |
| return; | |
| } | |
| if (result.value) { | |
| report(result.value); | |
| } | |
| result = await iterator.next(); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/execute-task.ts` around lines 15 - 27, The
abort handling in the generator execution loop has two issues: first,
iterator.next() is called at the start of each loop iteration before checking
signal.aborted, allowing one extra generator step to execute even when aborted;
second, when returning due to abort (when signal.aborted is true), the code
returns without calling iterator.return(), which skips generator cleanup such as
finally blocks. To fix this, move the abort check (signal.aborted) to occur
before calling iterator.next() in the while loop condition or at the loop start,
and when returning due to abort, call iterator.return() first to ensure all
cleanup code in the generator executes properly.
Comment on lines
+23
to
+35
| style={ | ||
| { | ||
| zIndex, | ||
| "--split-reveal-duration": `${revealDuration}s`, | ||
| "--split-reveal-progress-fade": `${progressFadeMs}ms`, | ||
| } as CSSProperties | ||
| } | ||
| data-phase={phase} | ||
| aria-busy={phase === "loading"} | ||
| aria-live="polite" | ||
| data-split-reveal-overlay="" | ||
| {...props} | ||
| > |
There was a problem hiding this comment.
Preserve internal overlay styles when forwarding style props.
...props is spread after style, so a consumer-provided style can replace required values (zIndex, --split-reveal-*) and break the overlay behavior.
Proposed fix
-export function SplitRevealOverlay({ className, children, ...props }: ComponentProps<"div">) {
+export function SplitRevealOverlay({
+ className,
+ children,
+ style,
+ ...props
+}: ComponentProps<"div">) {
@@
style={
{
+ ...style,
zIndex,
"--split-reveal-duration": `${revealDuration}s`,
"--split-reveal-progress-fade": `${progressFadeMs}ms`,
} as CSSProperties
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| style={ | |
| { | |
| zIndex, | |
| "--split-reveal-duration": `${revealDuration}s`, | |
| "--split-reveal-progress-fade": `${progressFadeMs}ms`, | |
| } as CSSProperties | |
| } | |
| data-phase={phase} | |
| aria-busy={phase === "loading"} | |
| aria-live="polite" | |
| data-split-reveal-overlay="" | |
| {...props} | |
| > | |
| export function SplitRevealOverlay({ | |
| className, | |
| children, | |
| style, | |
| ...props | |
| }: ComponentProps<"div">) { | |
| // ... other code ... | |
| return ( | |
| <div | |
| className={cn("relative", className)} | |
| ref={overlayRef} | |
| style={ | |
| { | |
| ...style, | |
| zIndex, | |
| "--split-reveal-duration": `${revealDuration}s`, | |
| "--split-reveal-progress-fade": `${progressFadeMs}ms`, | |
| } as CSSProperties | |
| } | |
| data-phase={phase} | |
| aria-busy={phase === "loading"} | |
| aria-live="polite" | |
| data-split-reveal-overlay="" | |
| {...props} | |
| > | |
| {children} | |
| </div> | |
| ); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/overlay.tsx` around lines 23 - 35, The overlay
component spreads the consumer-provided props after defining the required style,
which allows a consumer-provided style prop to override the critical overlay
styles (zIndex, --split-reveal-duration, --split-reveal-progress-fade). Move the
style prop definition to come after the {...props} spread so that the required
internal styles take precedence and cannot be overridden by consumer props,
ensuring the overlay behavior is not broken.
Comment on lines
+20
to
+24
| style={{ color: `${foregroundColor}73` }} | ||
| > | ||
| {String(loaded).padStart(2, "0")} | ||
| <span style={{ color: `${foregroundColor}33` }}> / </span> | ||
| {String(total).padStart(2, "0")} |
There was a problem hiding this comment.
Avoid hex-suffix opacity on arbitrary color strings.
${foregroundColor}73 / ${foregroundColor}33 only works for hex colors. For hsl(...)/rgb(...)/CSS vars, this produces invalid color values.
Proposed fix
- <p
+ <p
className={cn(
"mt-3 text-center text-[11px] font-medium tabular-nums tracking-[0.12em]",
className,
)}
- style={{ color: `${foregroundColor}73` }}
>
- {String(loaded).padStart(2, "0")}
- <span style={{ color: `${foregroundColor}33` }}> / </span>
- {String(total).padStart(2, "0")}
+ <span style={{ color: foregroundColor, opacity: 0.45 }}>
+ {String(loaded).padStart(2, "0")}
+ </span>
+ <span style={{ color: foregroundColor, opacity: 0.2 }}> / </span>
+ <span style={{ color: foregroundColor, opacity: 0.45 }}>
+ {String(total).padStart(2, "0")}
+ </span>
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| style={{ color: `${foregroundColor}73` }} | |
| > | |
| {String(loaded).padStart(2, "0")} | |
| <span style={{ color: `${foregroundColor}33` }}> / </span> | |
| {String(total).padStart(2, "0")} | |
| <p | |
| className={cn( | |
| "mt-3 text-center text-[11px] font-medium tabular-nums tracking-[0.12em]", | |
| className, | |
| )} | |
| > | |
| <span style={{ color: foregroundColor, opacity: 0.45 }}> | |
| {String(loaded).padStart(2, "0")} | |
| </span> | |
| <span style={{ color: foregroundColor, opacity: 0.2 }}> / </span> | |
| <span style={{ color: foregroundColor, opacity: 0.45 }}> | |
| {String(total).padStart(2, "0")} | |
| </span> | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/progress-count.tsx` around lines 20 - 24, The
inline styles in the progress-count component use hex-suffix opacity notation
(${foregroundColor}73 and ${foregroundColor}33) which only works with hex color
strings and breaks with hsl(), rgb(), or CSS variable values. Replace these
color assignments with a format that works universally across all color types,
such as using the rgba() function with a calculated alpha value or applying
opacity through a separate CSS property that works regardless of the
foregroundColor format.
Comment on lines
+21
to
+22
| backgroundColor = "#fff", | ||
| foregroundColor = "#000", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Use theme-aware defaults for the overlay colors.
These defaults hard-code the light theme, so dark-mode pages get a white overlay and black foreground unless every caller overrides them. Default to the existing theme tokens instead of #fff / #000.
As per coding guidelines, animata/**/*.tsx: “All new components must be theme-responsive with support for both light and dark themes.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/root.tsx` around lines 21 - 22, The
backgroundColor and foregroundColor default parameters in the SplitReveal
component are hard-coded to light theme values (`#fff` and `#000`), which breaks the
component's appearance in dark mode. Replace these hard-coded color defaults
with theme-responsive tokens that automatically adapt to the current theme
context, ensuring the component works correctly for both light and dark themes
as required by the coding guidelines.
Source: Coding guidelines
Comment on lines
+121
to
+124
| useEffect(() => { | ||
| if (phaseRef.current === "done") { | ||
| return; | ||
| } |
There was a problem hiding this comment.
Don't restart task execution when ready or controlled progress changes.
This effect owns the task bootstrap, so including controlledReady and controlledProgress in its dependency list aborts in-flight executeTask(...) runs and starts them over on every prop change. With registered tasks, flipping ready from false to true should only unblock reveal; it should not relaunch the preload work defined by SplitRevealTask in animata/preloader/split-reveal/task.tsx:17-39.
Also applies to: 260-268
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/root.tsx` around lines 121 - 124, The
useEffect hook that manages task bootstrap is including `controlledReady` and
`controlledProgress` in its dependency list, which causes it to re-run and abort
in-flight executeTask calls whenever these props change. Remove
`controlledReady` and `controlledProgress` from the dependency array of the
useEffect that contains the task bootstrap logic. The effect should initialize
the task once at mount, and changing the `ready` flag should only unblock the
reveal without restarting the actual task work defined in the SplitRevealTask.
Comment on lines
+237
to
+248
| Promise.all( | ||
| tasks.map((task) => | ||
| executeTask(task, report, abortController?.signal ?? new AbortSignal()), | ||
| ), | ||
| ).then(() => { | ||
| if (currentRun !== runId || abortController?.signal.aborted) { | ||
| return; | ||
| } | ||
|
|
||
| tasksDone = true; | ||
| maybeReveal(currentRun); | ||
| }); |
There was a problem hiding this comment.
Handle task failures so the preloader can't deadlock.
If any registered task rejects, this chain never marks tasksDone, phase stays "loading", and useScrollLock() keeps the page frozen. Add a rejection path here so the component completes deterministically even when preload work fails.
Suggested fix
- Promise.all(
+ Promise.allSettled(
tasks.map((task) =>
- executeTask(task, report, abortController?.signal ?? new AbortSignal()),
+ executeTask(task, report, abortController.signal),
),
- ).then(() => {
- if (currentRun !== runId || abortController?.signal.aborted) {
+ ).then((results) => {
+ if (currentRun !== runId || abortController.signal.aborted) {
return;
}
+ const failed = results.some((result) => result.status === "rejected");
+ if (failed) {
+ // TODO: surface the failure via logging or an error callback.
+ }
+
tasksDone = true;
maybeReveal(currentRun);
});🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/root.tsx` around lines 237 - 248, The
Promise.all() chain for executing tasks only calls the completion logic in the
.then() handler, which means if any task rejects, tasksDone never gets set to
true, phase remains "loading", and the page stays frozen in a deadlock state.
Add error handling to the Promise chain by attaching a .catch() or .finally()
block that ensures the same completion logic (setting tasksDone = true and
calling maybeReveal(currentRun)) executes regardless of whether the tasks
succeed or fail. Make sure the abort signal check (currentRun !== runId ||
abortController?.signal.aborted) is applied in both the success and failure
paths to prevent race conditions.
Comment on lines
+25
to
+36
| useEffect(() => { | ||
| const task: SplitRevealTaskDefinition = { | ||
| run: runRef.current ? (ctx) => runRef.current?.(ctx) ?? Promise.resolve() : undefined, | ||
| generator: generatorRef.current, | ||
| }; | ||
|
|
||
| if (!task.run && !task.generator) { | ||
| return; | ||
| } | ||
|
|
||
| return registerTask(id, task); | ||
| }, [id, registerTask]); |
There was a problem hiding this comment.
Task registration can drift from latest generator/run props.
Because the effect only depends on id and registerTask, updates to run/generator do not re-register the task definition; generator is especially stale since it is captured directly at registration time.
Suggested fix
export function SplitRevealTask({ run, generator }: SplitRevealTaskProps) {
const id = useId();
const { registerTask } = useSplitRevealInternal();
- const runRef = useRef(run);
- const generatorRef = useRef(generator);
- runRef.current = run;
- generatorRef.current = generator;
useEffect(() => {
const task: SplitRevealTaskDefinition = {
- run: runRef.current ? (ctx) => runRef.current?.(ctx) ?? Promise.resolve() : undefined,
- generator: generatorRef.current,
+ run,
+ generator,
};
if (!task.run && !task.generator) {
return;
}
return registerTask(id, task);
- }, [id, registerTask]);
+ }, [id, registerTask, run, generator]);
return null;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| useEffect(() => { | |
| const task: SplitRevealTaskDefinition = { | |
| run: runRef.current ? (ctx) => runRef.current?.(ctx) ?? Promise.resolve() : undefined, | |
| generator: generatorRef.current, | |
| }; | |
| if (!task.run && !task.generator) { | |
| return; | |
| } | |
| return registerTask(id, task); | |
| }, [id, registerTask]); | |
| export function SplitRevealTask({ run, generator }: SplitRevealTaskProps) { | |
| const id = useId(); | |
| const { registerTask } = useSplitRevealInternal(); | |
| useEffect(() => { | |
| const task: SplitRevealTaskDefinition = { | |
| run, | |
| generator, | |
| }; | |
| if (!task.run && !task.generator) { | |
| return; | |
| } | |
| return registerTask(id, task); | |
| }, [id, registerTask, run, generator]); | |
| return null; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/task.tsx` around lines 25 - 36, The useEffect
dependency array in the task registration is incomplete. The effect creates a
task definition using runRef.current and generatorRef.current, but the
dependency array only includes id and registerTask. When the run or generator
props change, their ref values update but the effect does not re-run, causing
the registered task to have stale generator and run values. Add runRef and
generatorRef (or their current values if they are stable) to the dependency
array so the task gets re-registered whenever these values change.
Comment on lines
+5
to
+13
| function subscribeReducedMotion(callback: () => void) { | ||
| const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); | ||
| mq.addEventListener("change", callback); | ||
| return () => mq.removeEventListener("change", callback); | ||
| } | ||
|
|
||
| function getReducedMotionSnapshot() { | ||
| return window.matchMedia("(prefers-reduced-motion: reduce)").matches; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What is the current browser support for MediaQueryList.addEventListener("change") compared with addListener/removeListener, and what compatibility fallback is recommended for matchMedia subscriptions?
💡 Result:
As of June 2026, the modern and recommended approach for observing media query changes is to use MediaQueryList.addEventListener('change', callback) [1][2]. This method utilizes the standard EventTarget interface, which MediaQueryList now implements in all modern browsers [3][4]. The older methods, addListener() and removeListener(), are deprecated [1][5]. They were originally provided as an alias to addEventListener() for backward compatibility before MediaQueryList inherited from EventTarget [1][6]. While they remain available in many browsers for legacy support, they should be avoided in new development [1][4]. Recommended Compatibility Fallback To ensure your application remains compatible with older environments (such as older versions of Safari that did not support addEventListener on MediaQueryList objects), you should perform a feature check before subscribing to media query changes [2][7][4]. You can implement a robust subscription pattern as follows: const mediaQuery = window.matchMedia('(min-width: 768px)'); const handler = (event) => { // Handle the change console.log('Matches:', event.matches); }; // Compatibility check if (mediaQuery.addEventListener) { mediaQuery.addEventListener('change', handler); } else { // Legacy fallback mediaQuery.addListener(handler); } When cleaning up or removing the subscription, apply the same logic: if (mediaQuery.removeEventListener) { mediaQuery.removeEventListener('change', handler); } else { mediaQuery.removeListener(handler); } This pattern safely defaults to the modern standard while providing a reliable fallback for legacy browser environments [4][8].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
- 2: https://stackoverflow.com/questions/57371174/replacement-for-deprecated-mediaquerylist-addlistener-method
- 3: MediaQueryList does not inherit from EventTarget on Safari and Safaria on iOS mdn/sprints#858
- 4: https://www.designcise.com/web/tutorial/how-to-fix-the-javascript-typeerror-matchmedia-addeventlistener-is-not-a-function
- 5: https://docs.w3cub.com/dom/mediaquerylist/addlistener
- 6: https://github.com/mdn/content/blob/main/files/en-us/web/api/mediaquerylist/addlistener/index.md
- 7: https://stackoverflow.com/questions/62693995/addeventlistener-is-not-a-function-for-matchmedia-in-safari-browser
- 8: https://react.wiki/hooks/custom-use-media-query/
Provide addEventListener fallback for older browser compatibility.
MediaQueryList.addEventListener support varies across legacy browsers (e.g., older Safari). Add a feature check to fall back to the deprecated addListener method for wider compatibility.
Suggested patch
function subscribeReducedMotion(callback: () => void) {
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
- mq.addEventListener("change", callback);
- return () => mq.removeEventListener("change", callback);
+ if ("addEventListener" in mq) {
+ mq.addEventListener("change", callback);
+ return () => mq.removeEventListener("change", callback);
+ }
+ mq.addListener(callback);
+ return () => mq.removeListener(callback);
}
function getReducedMotionSnapshot() {
- return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+ return "addEventListener" in mq ? mq.matches : false;
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@animata/preloader/split-reveal/use-prefers-reduced-motion.ts` around lines 5
- 13, The subscribeReducedMotion function uses addEventListener and
removeEventListener on the MediaQueryList object, but these methods are not
supported in older browsers. Add a feature check to detect whether
addEventListener exists on the MediaQueryList object returned by
window.matchMedia. If it does not exist, fall back to using the deprecated
addListener method for adding the listener, and removeListener for removing it
in the cleanup function. This will ensure compatibility with older browser
versions while maintaining modern browser behavior.
Comment on lines
+216
to
+218
| const base = path.posix.normalize(path.posix.join(dir, spec)); | ||
| if (path.extname(base)) { | ||
| return readIfExists(path.join(ROOT, base)) ? base : null; |
There was a problem hiding this comment.
Constrain resolved relative paths to stay under project root.
At Line 216 and Line 218, ./../../... imports can normalize outside the repository and still be read, then bundled at Line 256-259. This can leak unintended local files into generated registry JSON.
Suggested fix
function resolveRelativeImport(dir, spec) {
const base = path.posix.normalize(path.posix.join(dir, spec));
+ const absBase = path.resolve(ROOT, base);
+ const relToRoot = path.relative(ROOT, absBase);
+ if (relToRoot.startsWith("..") || path.isAbsolute(relToRoot)) {
+ return null;
+ }
if (path.extname(base)) {
- return readIfExists(path.join(ROOT, base)) ? base : null;
+ return readIfExists(absBase) ? base : null;
}
for (const ext of [".tsx", ".ts"]) {
const candidate = `${base}${ext}`;
- if (readIfExists(path.join(ROOT, candidate))) {
+ if (readIfExists(path.join(ROOT, candidate))) {
return candidate;
}
}Also applies to: 256-259
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@scripts/build-registry.js` around lines 216 - 218, Relative paths with
`../../` sequences can normalize outside the project root and still be read and
bundled into the registry JSON, leaking unintended local files. After
normalizing the path using path.posix.normalize in the path resolution logic
around line 216, add a validation check to ensure the fully resolved absolute
path (when joined with ROOT) stays within the project root directory before
returning it as a valid base. The same constraint should be enforced at the
bundling site around lines 256-259 to prevent any escaped paths from being
included in the generated registry output.
Comment on lines
+267
to
+268
| const re = | ||
| /(?:import\s+(?:[^'"]*?\s+from\s+)?|export\s+(?:\*|\{[^}]*\})\s+from\s+)["']([^"']+)["']/g; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether the repo uses TS `export type ... from` syntax that current regex won't match.
# Expected: if matches exist, parser should be extended.
set -euo pipefail
echo "1) Find candidate source lines:"
rg -nP --type=ts --type=tsx '\bexport\s+type\s*\{[^}]*\}\s+from\s+["'\''][^"'\'']+["'\'']' animata scripts content || true
echo
echo "2) Show current parseImports regex:"
rg -n 'const re =|export\\s+\\(?:\\*|\\{\\[\\^\\}\\]\\*\\}\\)' scripts/build-registry.js -n -A3 -B2 || trueRepository: codse/animata
Length of output: 342
🏁 Script executed:
# First, examine the actual regex at lines 267-268
sed -n '265,270p' scripts/build-registry.jsRepository: codse/animata
Length of output: 285
🏁 Script executed:
# Search for 'export type { ... } from' patterns in TypeScript files (simpler pattern)
rg -n 'export\s+type\s+\{[^}]*\}\s+from' --type tsRepository: codse/animata
Length of output: 39
🏁 Script executed:
# Also check without whitespace restrictions to see if pattern exists at all
rg -n 'export.*type.*\{.*\}.*from' --type ts | head -20Repository: codse/animata
Length of output: 39
🏁 Script executed:
# Search more broadly across all file types for export type patterns
rg 'export\s+type\s+\{' --multiline | head -20Repository: codse/animata
Length of output: 112
🏁 Script executed:
# Also check if export type exists at all in the repo (any variant)
rg 'export\s+type' | wc -lRepository: codse/animata
Length of output: 60
🏁 Script executed:
# Show a few examples if export type exists (to understand usage)
rg 'export\s+type' | head -5Repository: codse/animata
Length of output: 318
🏁 Script executed:
# Search specifically for 'export type { ... } from' re-export pattern
rg 'export\s+type\s+\{[^}]*\}\s+from' --multilineRepository: codse/animata
Length of output: 849
🏁 Script executed:
# Show the split-reveal example that was found
rg -A2 'export type \{' animata/preloader/split-reveal/index.tsxRepository: codse/animata
Length of output: 116
🏁 Script executed:
# Check if the current regex would catch export type { ... } from patterns
# Test with a simple Node script
node << 'EOF'
const re = /(?:import\s+(?:[^'"]*?\s+from\s+)?|export\s+(?:\*|\{[^}]*\})\s+from\s+)["']([^"']+)["']/g;
// Test cases
const testCases = [
'export { Foo } from "./types"',
'export type { Foo } from "./types"',
'export * from "./module"',
'export type * from "./module"',
'import { Foo } from "./types"',
'import type { Foo } from "./types"',
];
testCases.forEach(testCase => {
const match = re.test(testCase);
re.lastIndex = 0; // Reset regex
console.log(`"${testCase}" → ${match ? 'MATCH' : 'NO MATCH'}`);
});
EOFRepository: codse/animata
Length of output: 308
Include export type { ... } from in import parsing.
The regex at line 268 misses TypeScript type re-exports (export type { Foo } from "./types"). This pattern exists in the codebase (e.g., animata/preloader/split-reveal/index.tsx) and will be silently skipped during bundling/classification. While import type is already handled, the corresponding export type variants are not.
Update the regex to include type\s+ in the export alternatives to match both export { ... } from and export type { ... } from syntax.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@scripts/build-registry.js` around lines 267 - 268, The regex pattern in the
`re` variable at lines 267-268 does not match TypeScript type re-exports
(`export type { ... } from`). Update the regex to include `type\s+` as an
optional pattern in the export alternatives so that both `export { ... } from`
and `export type { ... } from` syntax are matched and properly captured during
bundling/classification.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace fixed image/title props with FlipCard.Front and FlipCard.Back. Consumers own face markup. Flip uses transform-only transitions with reduced-motion guards.
Summary by CodeRabbit
New Features
ready/progresscontrol).Documentation
Storybook