Harden PreviewIframe Prop Typing to Eliminate Untyped Customization Payloads

[temma02]

Description

src/components/app/preview/PreviewIframe.tsx declares customization?: any in PreviewIframeProps (line 8), even though every caller — PreviewWorkspace.tsx passes a CustomizationConfig — already has a properly typed value available. Using any here means JSON.stringify(customization) inside the generatePreviewUrl effect (line 32) and any future consumer of the prop get zero compile-time safety; a caller could pass an unrelated object shape and TypeScript would not catch it, and IDE autocomplete/refactor tooling can't help maintainers working in this file.

Requirements and Context

• PreviewIframeProps.customization must be typed as CustomizationConfig | undefined instead of any, matching the type already used by PreviewWorkspaceProps.customization in the same directory.
• No behavior change is expected; this is a type-safety improvement only.
• pnpm typecheck must pass with the tightened type, confirming all current call sites already satisfy it.
• Add a type-level or unit test (e.g. a PreviewIframe.test.tsx render passing a full CustomizationConfig) if no test file currently exists for this component.

Suggested Execution

Branch: refactor/preview-iframe-prop-typing

Implement Changes

• In src/components/app/preview/PreviewIframe.tsx, import CustomizationConfig from @craft/types and change customization?: any to customization?: CustomizationConfig.
• Re-check the generatePreviewUrl effect's dependency array and JSON.stringify(customization) call for any implicit any-driven behavior that needs adjusting once the type is narrowed.
• If src/components/app/preview/PreviewIframe.tsx has no dedicated test file, add a minimal one rendering the component with a typed CustomizationConfig and asserting the generated src URL includes the serialized customization.
• Run pnpm typecheck to surface and fix any now-visible type errors at call sites.

Test and Commit

Run pnpm typecheck --filter=frontend and pnpm test --filter=frontend -- PreviewIframe to confirm the tightened prop type compiles cleanly and existing preview rendering still works.

Example Commit Message

refactor(frontend): replace any with CustomizationConfig in PreviewIframeProps

Co-authored-by: <your-name>

Guidelines

• Branch off main, keep PRs focused on one issue
• All new code must include unit or integration tests
• Ensure pnpm lint and pnpm typecheck pass before review
• Link this issue in your PR description
• Request review from at least one maintainer before merging

[Agencybuilds]

@Agencybuilds has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i would love the opportunity to work on this issue, i'm motivated . detail oriented , and ready to contribute a solid solution while helping the community grow.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Agencybuilds to this issue.

[Thoni76]

@Thoni76 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Good day maintainer
Please kindly assign me this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Thoni76 to this issue.

[Oluwasuyi-Oluwatimilehin-Daniel]

@Oluwasuyi-Oluwatimilehin-Daniel has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer, please assign me to this task. I would get started immediately.
ETA 3hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Oluwasuyi-Oluwatimilehin-Daniel to this issue.

[Mystery-CLI]

@Mystery-CLI has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mystery-CLI to this issue.

[drips-wave]

Congratulations, @Mystery-CLI! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Mystery-CLI: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊