From bd76f9f7cfd343f5d7471151876a386f16eeee0a Mon Sep 17 00:00:00 2001 From: 7TIN Date: Fri, 4 Sep 2026 14:06:20 +0530 Subject: [PATCH] fix: fix preview of ui/blocks in docs and add blocks in registry --- components/docs/component-card.tsx | 57 ++++++++---- lib/customizer-config.ts | 13 ++- registry/__index__.tsx | 88 ++++++++++++++++++ registry/__manifest__.ts | 90 +++++++++++++++++++ registry/remocn-ui/ai-prompt-flow/config.ts | 12 +++ registry/remocn-ui/chat-flow/config.ts | 12 +++ registry/remocn-ui/checkout-flow/config.ts | 12 +++ .../remocn-ui/imessage-chat-flow/config.ts | 12 +++ .../onboarding-stepper-flow/config.ts | 12 +++ .../remocn-ui/settings-toggle-flow/config.ts | 12 +++ registry/remocn-ui/signup-flow/config.ts | 12 +++ .../remocn-ui/telegram-chat-flow/config.ts | 15 ++++ 12 files changed, 328 insertions(+), 19 deletions(-) create mode 100644 registry/remocn-ui/ai-prompt-flow/config.ts create mode 100644 registry/remocn-ui/chat-flow/config.ts create mode 100644 registry/remocn-ui/checkout-flow/config.ts create mode 100644 registry/remocn-ui/imessage-chat-flow/config.ts create mode 100644 registry/remocn-ui/onboarding-stepper-flow/config.ts create mode 100644 registry/remocn-ui/settings-toggle-flow/config.ts create mode 100644 registry/remocn-ui/signup-flow/config.ts create mode 100644 registry/remocn-ui/telegram-chat-flow/config.ts diff --git a/components/docs/component-card.tsx b/components/docs/component-card.tsx index bb0abe08..1dc57407 100644 --- a/components/docs/component-card.tsx +++ b/components/docs/component-card.tsx @@ -2,11 +2,12 @@ import { Player, type PlayerRef } from "@remotion/player"; import Link from "next/link"; -import { useRef } from "react"; +import { useMemo, useRef } from "react"; import { useAutoplay } from "@/app/(home)/components/use-autoplay"; import { cn } from "@/lib/utils"; import registry from "@/registry/__index__"; import { previewManifest } from "@/registry/__manifest__"; +import { Backdrop } from "@/registry/remocn/backdrop"; import type { CardItem } from "./component-card-grid"; function slugFromHref(href?: string) { @@ -26,29 +27,49 @@ function CardPreview({ item }: { item: CardItem }) { const { containerRef } = useAutoplay(playerRef); - if (!entry || !preview) { + // Mirror PreviewStage's Backdrop wrap so card thumbnails with a + // previewBackdrop (e.g. blocks) match their detail-page background. + // Lazy to keep cards code-split: only the visible card's scene loads. + const lazyComponent = useMemo(() => { + if (!entry) return null; + const fill = preview?.previewBackdrop; + if (!fill) return entry.load; + return () => + entry.load().then(({ default: Inner }) => ({ + // biome-ignore lint/suspicious/noExplicitAny: dynamically-loaded scene, props shape varies + default: function CardStage(props: Record) { + return ( + + + + ); + }, + })); + }, [entry, preview]); + + if (entry && preview && lazyComponent) { return ( -
- +
+
); } return ( -
- +
+
); } diff --git a/lib/customizer-config.ts b/lib/customizer-config.ts index 7dc36fb3..4fcab5bc 100644 --- a/lib/customizer-config.ts +++ b/lib/customizer-config.ts @@ -109,7 +109,18 @@ export const SHARED_CONTROLS: InteractivitySchema = { }; /** Components that opt out of the shared `speed` control entirely. */ -const NO_SHARED_SPEED = new Set(["backdrop", "stage"]); +const NO_SHARED_SPEED = new Set([ + "backdrop", + "stage", + "signup-flow", + "ai-prompt-flow", + "chat-flow", + "telegram-chat-flow", + "imessage-chat-flow", + "checkout-flow", + "onboarding-stepper-flow", + "settings-toggle-flow", +]); /** * Components whose animation rides a shared progress driver that must reach its diff --git a/registry/__index__.tsx b/registry/__index__.tsx index 45a716e1..0e0419f5 100644 --- a/registry/__index__.tsx +++ b/registry/__index__.tsx @@ -2803,6 +2803,94 @@ const registry: Record = { loadConfig: () => import("@/registry/remocn/reel/config").then((m) => m.reelConfig), }, + "signup-flow": { + load: () => + import("@/components/docs/examples/signup-flow-example").then((m) => ({ + default: m.SignupFlowExampleScene, + })), + loadConfig: () => + import("@/registry/remocn-ui/signup-flow/config").then( + (m) => m.signupFlowConfig, + ), + }, + "ai-prompt-flow": { + load: () => + import("@/components/docs/examples/ai-prompt-flow-example").then((m) => ({ + default: m.AiPromptFlowExampleScene, + })), + loadConfig: () => + import("@/registry/remocn-ui/ai-prompt-flow/config").then( + (m) => m.aiPromptFlowConfig, + ), + }, + "chat-flow": { + load: () => + import("@/components/docs/examples/chat-flow-example").then((m) => ({ + default: m.ChatFlowExampleScene, + })), + loadConfig: () => + import("@/registry/remocn-ui/chat-flow/config").then( + (m) => m.chatFlowConfig, + ), + }, + "telegram-chat-flow": { + load: () => + import("@/components/docs/examples/telegram-chat-flow-example").then( + (m) => ({ + default: m.TelegramChatFlowExampleScene, + }), + ), + loadConfig: () => + import("@/registry/remocn-ui/telegram-chat-flow/config").then( + (m) => m.telegramChatFlowConfig, + ), + }, + "imessage-chat-flow": { + load: () => + import("@/components/docs/examples/imessage-chat-flow-example").then( + (m) => ({ + default: m.ImessageChatFlowExampleScene, + }), + ), + loadConfig: () => + import("@/registry/remocn-ui/imessage-chat-flow/config").then( + (m) => m.imessageChatFlowConfig, + ), + }, + "checkout-flow": { + load: () => + import("@/components/docs/examples/checkout-flow-example").then((m) => ({ + default: m.CheckoutFlowExampleScene, + })), + loadConfig: () => + import("@/registry/remocn-ui/checkout-flow/config").then( + (m) => m.checkoutFlowConfig, + ), + }, + "onboarding-stepper-flow": { + load: () => + import("@/components/docs/examples/onboarding-stepper-flow-example").then( + (m) => ({ + default: m.OnboardingStepperFlowExampleScene, + }), + ), + loadConfig: () => + import("@/registry/remocn-ui/onboarding-stepper-flow/config").then( + (m) => m.onboardingStepperFlowConfig, + ), + }, + "settings-toggle-flow": { + load: () => + import("@/components/docs/examples/settings-toggle-flow-example").then( + (m) => ({ + default: m.SettingsToggleFlowExampleScene, + }), + ), + loadConfig: () => + import("@/registry/remocn-ui/settings-toggle-flow/config").then( + (m) => m.settingsToggleFlowConfig, + ), + }, }; const configCache = new Map>(); diff --git a/registry/__manifest__.ts b/registry/__manifest__.ts index e5af075d..b5d6ef03 100644 --- a/registry/__manifest__.ts +++ b/registry/__manifest__.ts @@ -35,6 +35,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "ai-prompt-flow": { + durationInFrames: 230, + fps: 30, + compositionWidth: 1280, + compositionHeight: 720, + previewBackdrop: { + type: "color", + value: "oklch(1 0 0)", + }, + defaults: {}, + }, "alert-dialog": { durationInFrames: 120, fps: 30, @@ -300,6 +311,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "chat-flow": { + durationInFrames: 360, + fps: 30, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { + type: "color", + value: "oklch(1 0 0)", + }, + defaults: {}, + }, "chat-gpt": { durationInFrames: 150, fps: 30, @@ -370,6 +392,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "checkout-flow": { + durationInFrames: 320, + fps: 30, + compositionWidth: 1280, + compositionHeight: 720, + previewBackdrop: { + type: "color", + value: "oklch(0.97 0 0)", + }, + defaults: {}, + }, "chromatic-wave": { durationInFrames: 100, fps: 30, @@ -2479,6 +2512,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "imessage-chat-flow": { + durationInFrames: 360, + fps: 30, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { + type: "color", + value: "#ffffff", + }, + defaults: {}, + }, "infinite-bento-pan": { durationInFrames: 300, fps: 30, @@ -2828,6 +2872,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "onboarding-stepper-flow": { + durationInFrames: 175, + fps: 30, + compositionWidth: 1280, + compositionHeight: 720, + previewBackdrop: { + type: "color", + value: "oklch(1 0 0)", + }, + defaults: {}, + }, opencode: { durationInFrames: 150, fps: 30, @@ -3248,6 +3303,8 @@ export const previewManifest: Record = { phrase: "gone before you look", fontSize: 68, fontWeight: "400", + color: "#ffffff", + backgroundColor: "#000000", verticalStretch: 7, chromaticSpread: 1, restDuration: 12, @@ -3342,6 +3399,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "settings-toggle-flow": { + durationInFrames: 320, + fps: 30, + compositionWidth: 1280, + compositionHeight: 720, + previewBackdrop: { + type: "color", + value: "oklch(0.97 0 0)", + }, + defaults: {}, + }, "shader-caustics": { durationInFrames: 150, fps: 30, @@ -3768,6 +3836,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "signup-flow": { + durationInFrames: 380, + fps: 30, + compositionWidth: 1280, + compositionHeight: 720, + previewBackdrop: { + type: "color", + value: "oklch(0.97 0 0)", + }, + defaults: {}, + }, "simulated-cursor": { durationInFrames: 150, fps: 30, @@ -4105,6 +4184,17 @@ export const previewManifest: Record = { speed: 1, }, }, + "telegram-chat-flow": { + durationInFrames: 360, + fps: 30, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { + type: "gradient", + value: "linear-gradient(180deg, #cfe0ec 0%, #a7c6e0 100%)", + }, + defaults: {}, + }, "terminal-cursor-zoom": { durationInFrames: 90, fps: 30, diff --git a/registry/remocn-ui/ai-prompt-flow/config.ts b/registry/remocn-ui/ai-prompt-flow/config.ts new file mode 100644 index 00000000..2423eeaa --- /dev/null +++ b/registry/remocn-ui/ai-prompt-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config"; + +export const aiPromptFlowConfig: ComponentConfig = { + componentName: "AiPromptFlow", + importPath: "@/components/remocn/ai-prompt-flow", + controls: {}, + durationInFrames: 230, + fps: FPS, + compositionWidth: W, + compositionHeight: H, + previewBackdrop: { type: "color", value: "oklch(1 0 0)" }, +}; diff --git a/registry/remocn-ui/chat-flow/config.ts b/registry/remocn-ui/chat-flow/config.ts new file mode 100644 index 00000000..7f5f5f9a --- /dev/null +++ b/registry/remocn-ui/chat-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS } from "@/lib/customizer-config"; + +export const chatFlowConfig: ComponentConfig = { + componentName: "ChatFlow", + importPath: "@/components/remocn/chat-flow", + controls: {}, + durationInFrames: 360, + fps: FPS, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { type: "color", value: "oklch(1 0 0)" }, +}; diff --git a/registry/remocn-ui/checkout-flow/config.ts b/registry/remocn-ui/checkout-flow/config.ts new file mode 100644 index 00000000..098e341f --- /dev/null +++ b/registry/remocn-ui/checkout-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config"; + +export const checkoutFlowConfig: ComponentConfig = { + componentName: "CheckoutFlow", + importPath: "@/components/remocn/checkout-flow", + controls: {}, + durationInFrames: 320, + fps: FPS, + compositionWidth: W, + compositionHeight: H, + previewBackdrop: { type: "color", value: "oklch(0.97 0 0)" }, +}; diff --git a/registry/remocn-ui/imessage-chat-flow/config.ts b/registry/remocn-ui/imessage-chat-flow/config.ts new file mode 100644 index 00000000..dad3515e --- /dev/null +++ b/registry/remocn-ui/imessage-chat-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS } from "@/lib/customizer-config"; + +export const imessageChatFlowConfig: ComponentConfig = { + componentName: "ImessageChatFlow", + importPath: "@/components/remocn/imessage-chat-flow", + controls: {}, + durationInFrames: 360, + fps: FPS, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { type: "color", value: "#ffffff" }, +}; diff --git a/registry/remocn-ui/onboarding-stepper-flow/config.ts b/registry/remocn-ui/onboarding-stepper-flow/config.ts new file mode 100644 index 00000000..4b8558ac --- /dev/null +++ b/registry/remocn-ui/onboarding-stepper-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config"; + +export const onboardingStepperFlowConfig: ComponentConfig = { + componentName: "OnboardingStepperFlow", + importPath: "@/components/remocn/onboarding-stepper-flow", + controls: {}, + durationInFrames: 175, + fps: FPS, + compositionWidth: W, + compositionHeight: H, + previewBackdrop: { type: "color", value: "oklch(1 0 0)" }, +}; diff --git a/registry/remocn-ui/settings-toggle-flow/config.ts b/registry/remocn-ui/settings-toggle-flow/config.ts new file mode 100644 index 00000000..26132733 --- /dev/null +++ b/registry/remocn-ui/settings-toggle-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config"; + +export const settingsToggleFlowConfig: ComponentConfig = { + componentName: "SettingsToggleFlow", + importPath: "@/components/remocn/settings-toggle-flow", + controls: {}, + durationInFrames: 320, + fps: FPS, + compositionWidth: W, + compositionHeight: H, + previewBackdrop: { type: "color", value: "oklch(0.97 0 0)" }, +}; diff --git a/registry/remocn-ui/signup-flow/config.ts b/registry/remocn-ui/signup-flow/config.ts new file mode 100644 index 00000000..0d3f75fd --- /dev/null +++ b/registry/remocn-ui/signup-flow/config.ts @@ -0,0 +1,12 @@ +import { type ComponentConfig, FPS, H, W } from "@/lib/customizer-config"; + +export const signupFlowConfig: ComponentConfig = { + componentName: "SignupFlow", + importPath: "@/components/remocn/signup-flow", + controls: {}, + durationInFrames: 380, + fps: FPS, + compositionWidth: W, + compositionHeight: H, + previewBackdrop: { type: "color", value: "oklch(0.97 0 0)" }, +}; diff --git a/registry/remocn-ui/telegram-chat-flow/config.ts b/registry/remocn-ui/telegram-chat-flow/config.ts new file mode 100644 index 00000000..c4d728f6 --- /dev/null +++ b/registry/remocn-ui/telegram-chat-flow/config.ts @@ -0,0 +1,15 @@ +import { type ComponentConfig, FPS } from "@/lib/customizer-config"; + +export const telegramChatFlowConfig: ComponentConfig = { + componentName: "TelegramChatFlow", + importPath: "@/components/remocn/telegram-chat-flow", + controls: {}, + durationInFrames: 360, + fps: FPS, + compositionWidth: 432, + compositionHeight: 768, + previewBackdrop: { + type: "gradient", + value: "linear-gradient(180deg, #cfe0ec 0%, #a7c6e0 100%)", + }, +};