62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T56f2,'use client' import * as React from 'react' import { Check, Copy, Flag, History, MoreHorizontal, Plus, Search, ShieldAlert, Sliders, SlidersHorizontal, Trash2, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Input } from '@/components/ui/input' import { Progress } from '@/components/ui/progress' import { Switch } from '@/components/ui/switch' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface EnvironmentState { production: boolean staging: boolean development: boolean } export interface FeatureFlag { id: string name: string key: string description: string tags: string[] enabled: boolean rollout: number targetingRules: string environments: EnvironmentState evaluationCount?: string lastUpdated?: string } export const defaultFlags: FeatureFlag[] = [ { id: 'ff-1', name: 'New Checkout Experience', key: 'new-checkout-v2', description: 'Modern multi-step checkout flow with one-click payment options.', tags: ['Frontend', 'Beta', 'Core'], enabled: true, rollout: 50, targetingRules: "plan === 'enterprise' && country === 'US'", environments: { production: true, staging: true, development: false, }, evaluationCount: '1.8M/day', lastUpdated: '10 min ago', }, { id: 'ff-2', name: 'Dark Mode V2 Beta', key: 'dark-mode-beta', description: 'High-contrast OKLCH dark palette with custom system theme sync.', tags: ['Frontend', 'Beta'], enabled: true, rollout: 100, targetingRules: 'beta_tester === true', environments: { production: true, staging: true, development: true, }, evaluationCount: '920K/day', lastUpdated: '2 hours ago', }, { id: 'ff-3', name: 'AI Auto Complete', key: 'ai-auto-complete', description: 'LLM-assisted syntax suggestion and context-aware auto-completion.', tags: ['AI', 'Core', 'Beta'], enabled: true, rollout: 25, targetingRules: "org_tier IN ['growth', 'enterprise']", environments: { production: true, staging: true, development: false, }, evaluationCount: '640K/day', lastUpdated: '1 day ago', }, { id: 'ff-4', name: 'GraphQL API v2 Gateway', key: 'graphql-api-v2', description: 'High-throughput GraphQL federation engine replacing legacy REST proxy.', tags: ['Backend', 'Core'], enabled: false, rollout: 0, targetingRules: 'internal_team === true', environments: { production: false, staging: true, development: true, }, evaluationCount: '480K/day', lastUpdated: '3 days ago', }, { id: 'ff-5', name: 'Crypto Payments Pilot', key: 'crypto-payments', description: 'USDC and Ethereum settlement rail for international enterprise invoices.', tags: ['Core', 'Beta'], enabled: false, rollout: 10, targetingRules: "country IN ['US', 'DE', 'SG'] && plan === 'enterprise'", environments: { production: false, staging: true, development: false, }, evaluationCount: '120K/day', lastUpdated: '5 days ago', }, ] export interface FeatureFlagsManagerProps { initialFlags?: FeatureFlag[] className?: string } export function FeatureFlagsManager({ initialFlags, className }: FeatureFlagsManagerProps) { const [flags, setFlags] = React.useState(initialFlags ?? defaultFlags) const [searchQuery, setSearchQuery] = React.useState('') const [selectedStatus, setSelectedStatus] = React.useState<'all' | 'enabled' | 'disabled'>('all') const [copiedKey, setCopiedKey] = React.useState(null) const toggleFlag = (id: string) => { setFlags((prev) => prev.map((flag) => (flag.id === id ? { ...flag, enabled: !flag.enabled } : flag))) } const deleteFlag = (id: string) => { setFlags((prev) => prev.filter((flag) => flag.id !== id)) } const copyFlagKey = (key: string) => { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(key) setCopiedKey(key) setTimeout(() => { setCopiedKey((curr) => (curr === key ? null : curr)) }, 2000) } } const filteredFlags = React.useMemo(() => { const query = searchQuery.trim().toLowerCase() return flags.filter((flag) => { if (selectedStatus === 'enabled' && !flag.enabled) return false if (selectedStatus === 'disabled' && flag.enabled) return false if (!query) return true const matchName = flag.name.toLowerCase().includes(query) const matchKey = flag.key.toLowerCase().includes(query) const matchDesc = flag.description.toLowerCase().includes(query) const matchTag = flag.tags.some((t) => t.toLowerCase().includes(query)) return matchName || matchKey || matchDesc || matchTag }) }, [flags, searchQuery, selectedStatus]) return (

{/* Header Section */}

Feature Flags

Safely deploy features with percentage rollouts, user targeting, and kill switches.

{/* Summary Metric Cards */}

Total Flags

5 in current scope

Active Rollouts

Gradual traffic ramps

Kill-Switches Armed

Instant emergency trip

Evaluation Volume

4.2M/day

99.99% cache hit · 1.2ms p99

{/* Filter & Search Toolbar */}

Showing {filteredFlags.length} of {flags.length} flags

{/* Feature Flags Table */}

Flag Status Rollout Targeting Rules Environments Actions {filteredFlags.map((flag) => ( {/* Flag Name, Key, Description & Tags */}

{flag.name}


                          {flag.key}

{flag.description}

{flag.tags.map((tag) => ( {tag} ))}

{/* Master Status Switch */}

toggleFlag(flag.id)} /> {flag.enabled ? 'Enabled' : 'Disabled'}

{/* Rollout % Visual Progress Bar */}

{flag.enabled ? `${flag.rollout}%` : '0%'} {flag.enabled ? (flag.rollout === 100 ? 'All users' : 'Ramp') : 'Inactive'}

{/* Targeting Rules Summary */}


                        Target:
                        {flag.targetingRules}

{/* Environment Badges */}

Prod Stg Dev

{/* Actions Dropdown */} copyFlagKey(flag.key)}> deleteFlag(flag.id)} > ))} {/* Empty State */} {filteredFlags.length === 0 && (

No feature flags found

No flags match your search or filter criteria. Try adjusting your query.

)}

) } export default FeatureFlagsManager 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/dropdown-menu.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/switch.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/feature-flags-manager/FeatureFlagsManager.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/FeatureFlagsManager.tsx"}],"className":"h-[70svh] min-h-80"}]]}]