feat: gate sounds/stickers/effects UI behind feature flags

FEATURES in src/features.ts (all false) hides the assets-panel tabs and
views, the clip effects properties tab, and the timeline effects badge.
Existing project data still renders and stays editable (standalone effect
tab, sticker config, renderer nodes untouched).

5 files changed, 31 insertions, 9 deletions

diff --git a/apps/web/src/components/editor/panels/assets/index.tsx b/apps/web/src/components/editor/panels/assets/index.tsx
index bae73299..09d64eed 100644
--- a/apps/web/src/components/editor/panels/assets/index.tsx
+++ b/apps/web/src/components/editor/panels/assets/index.tsx
@@ -10,16 +10,17 @@ import { SoundsView } from "@/sounds/components/assets-view";
 import { StickersView } from "@/stickers/components/assets-view";
 import { TextView } from "@/text/components/assets-view";
 import { EffectsView } from "@/effects/components/assets-view";
+import { FEATURES } from "@/features";
 
 export function AssetsPanel() {
 	const { activeTab } = useAssetsPanelStore();
 
 	const viewMap: Record<Tab, React.ReactNode> = {
 		media: <MediaView />,
-		sounds: <SoundsView />,
+		sounds: FEATURES.sounds ? <SoundsView /> : null,
 		text: <TextView />,
-		stickers: <StickersView />,
-		effects: <EffectsView />,
+		stickers: FEATURES.stickers ? <StickersView /> : null,
+		effects: FEATURES.effects ? <EffectsView /> : null,
 		transitions: (
 			<div className="text-muted-foreground p-4">
 				Transitions view coming soon...
diff --git a/apps/web/src/components/editor/panels/assets/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx
index 3b084c0d..b468b5bb 100644
--- a/apps/web/src/components/editor/panels/assets/tabbar.tsx
+++ b/apps/web/src/components/editor/panels/assets/tabbar.tsx
@@ -13,6 +13,14 @@ import {
 	tabs,

 	useAssetsPanelStore,

 } from "@/components/editor/panels/assets/assets-panel-store";

+import { FEATURES } from "@/features";

+

+const VISIBLE_TAB_KEYS = TAB_KEYS.filter((tabKey) => {

+	if (tabKey === "sounds") return FEATURES.sounds;

+	if (tabKey === "stickers") return FEATURES.stickers;

+	if (tabKey === "effects") return FEATURES.effects;

+	return true;

+});

 

 export function TabBar() {

 	const { activeTab, setActiveTab } = useAssetsPanelStore();

@@ -51,7 +59,7 @@ export function TabBar() {
 				ref={scrollRef}

 				className="scrollbar-hidden relative flex size-full p-1 flex-col items-center justify-start gap-0.5 overflow-y-auto"

 			>

-				{TAB_KEYS.map((tabKey) => {

+				{VISIBLE_TAB_KEYS.map((tabKey) => {

 					const tab = tabs[tabKey];

 					return (

 						<Tooltip key={tabKey} delayDuration={10}>

diff --git a/apps/web/src/components/editor/panels/properties/registry.tsx b/apps/web/src/components/editor/panels/properties/registry.tsx
index 1eda6575..15f010f7 100644
--- a/apps/web/src/components/editor/panels/properties/registry.tsx
+++ b/apps/web/src/components/editor/panels/properties/registry.tsx
@@ -28,6 +28,7 @@ import { MasksTab } from "@/masks/components/masks-tab";
 import { SpeedTab } from "@/speed/components/speed-tab";
 import { GraphicTab } from "@/graphics/components/graphic-tab";
 import { OcShapesIcon } from "@/components/icons";
+import { FEATURES } from "@/features";
 
 const TRANSFORM_PARAM_KEYS = [
 	"transform.positionX",
@@ -251,7 +252,7 @@ function getVideoConfig({
 			buildSpeedTab({ element }),
 			buildBlendingTab({ element }),
 			buildMasksTab({ element }),
-			buildClipEffectsTab({ element }),
+			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
 	};
 }
@@ -267,7 +268,7 @@ function getImageConfig({
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
 			buildMasksTab({ element }),
-			buildClipEffectsTab({ element }),
+			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
 	};
 }
@@ -282,7 +283,7 @@ function getStickerConfig({
 		tabs: [
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
-			buildClipEffectsTab({ element }),
+			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
 	};
 }
@@ -299,7 +300,7 @@ function getGraphicConfig({
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
 			buildMasksTab({ element }),
-			buildClipEffectsTab({ element }),
+			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
 	};
 }
diff --git a/apps/web/src/features.ts b/apps/web/src/features.ts
new file mode 100644
index 00000000..10fdd434
--- /dev/null
+++ b/apps/web/src/features.ts
@@ -0,0 +1,11 @@
+/**
+ * Feature flags for upstream domains that are unfinished or buggy.
+ * Flags hide UI entry points ONLY — document data and rendering of existing
+ * projects must stay untouched, so old projects keep working. Deletion of
+ * the dead code comes later, once the flags have proven themselves.
+ */
+export const FEATURES = {
+	sounds: false,
+	stickers: false,
+	effects: false,
+} as const;
diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index 1b549a15..9dfeab8b 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext } from "react";
 import { useEditor } from "@/editor/use-editor";
+import { FEATURES } from "@/features";
 import { useAssetsPanelStore } from "@/components/editor/panels/assets/assets-panel-store";
 import { AudioWaveform, WAVEFORM_GAIN_SAMPLE_COUNT } from "./audio-waveform";
 import { AudioVolumeLine } from "./audio-volume-line";
@@ -1123,7 +1124,7 @@ function TiledMediaContent({
 			<MediaElementHeader
 				name={mediaAsset?.name}
 				leading={
-					hasElementEffects({ element }) ? (
+					FEATURES.effects && hasElementEffects({ element }) ? (
 						<EffectsButton element={element} track={track} />
 					) : null
 				}