[V0_FILE]typescriptreact:file="components/yin-yang-symbol.tsx" isMerged="true" "use client" interface YinYangSymbolProps { rotation: number mirror: boolean size?: number } export function YinYangSymbol({ rotation, mirror, size = 200 }: YinYangSymbolProps) { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { ReligionMapper } from "@/components/religion-mapper" import { PoliticalMapper } from "@/components/political-mapper" import { OppositionsList } from "@/components/oppositions-list" import { BottownessExplainer } from "@/components/bottownness-explainer" export default function PhilosophyMapper() { return (

☯ PHILOSOPHICAL CARTOGRAPHY ☯

Yin-Yang Philosophy Mapper

An interactive exploration of introspiritual and{" "} extrospiritual views, mapping religions, political systems, and philosophical oppositions through the lens of Yin-Yang duality and the chaos model's{" "} bot-townness.

🕉️

Religious Frameworks: Matter & Mind

⚡

Bot-townness: Integrating Top-Down & Bottom-Up

⚖️

Political-Economic Systems

∞

Fundamental Oppositions

) } [V0_FILE]typescriptreact:file="components/oppositions-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" interface Opposition { yang: string yin: string description: string category: string icon: string } const oppositions: Opposition[] = [ { yang: "Yang", yin: "Yin", description: "Active/masculine vs. receptive/feminine; outward vs. inward energy", category: "Fundamental", icon: "☯️", }, { yang: "Spiritual", yin: "Material", description: "Transcendent realm vs. physical manifestation; heaven vs. earth", category: "Ontological", icon: "🌌", }, { yang: "Mind", yin: "Matter", description: "Consciousness and thought vs. physical substance and form", category: "Ontological", icon: "🧠", }, { yang: "God", yin: "Society", description: "Divine authority vs. human collective; transcendent vs. immanent order", category: "Social", icon: "⛪", }, { yang: "Extrospiritual", yin: "Introspiritual", description: "Outward religious expression vs. inward contemplation; external vs. internal path", category: "Religious", icon: "🕉️", }, { yang: "Top-Down", yin: "Bottom-Up", description: "Imposed structure vs. emergent order; authority vs. self-organization", category: "Systemic", icon: "⚡", }, { yang: "Constitutional Law", yin: "Capitalist Frame", description: "Imposed legal structure vs. self-referential market system with neutralized self-gain", category: "Political-Economic", icon: "⚖️", }, { yang: "Fundamental", yin: "Absolute", description: "Meaningful rules and applications vs. base laws and axioms (e.g., what you do with 2+2=4 vs. 2+2=4 itself)", category: "Epistemological", icon: "∞", }, { yang: "Communism", yin: "Capitalism", description: "Centralized planning vs. decentralized markets; collective authority vs. individual agency", category: "Economic", icon: "💱", }, { yang: "Goodness", yin: "Gaadness", description: "Flat universal ethics vs. particular calculated strategies; moral absolutism vs. contextual pragmatism", category: "Ethical", icon: "⚗️", }, ] export function OppositionsList() { const categories = Array.from(new Set(oppositions.map((o) => o.category))) return (

{categories.map((category) => { const categoryIcon = oppositions.find((o) => o.category === category)?.icon || "•" return (

{categoryIcon}

{category} Oppositions

{oppositions .filter((o) => o.category === category) .map((opposition, idx) => (

{/* Opposition pair on its own line */}

☀️ {opposition.yang} ⟷ 🌙 {opposition.yin}

{/* Description on its own line with proper spacing */}

{opposition.description}

))}

) })}

) } [V0_FILE]typescriptreact:file="components/political-mapper.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" type PoliticalSystem = "Left-Wing Capitalism" | "Right-Wing Capitalism" | "Left-Wing Communism" | "Right-Wing Communism" interface SystemData { name: PoliticalSystem yangness: "Yang" | "Yin" wing: "Left" | "Right" economic: "Capitalism" | "Communism" description: string characteristics: string[] icon: string } const systems: SystemData[] = [ { name: "Left-Wing Capitalism", yangness: "Yin", wing: "Left", economic: "Capitalism", description: "Yin capitalism with progressive social values", icon: "🌱", characteristics: [ "Self-referential market systems (Yin)", "Social welfare and redistribution (Left)", "Individual freedom within collective care", "Bottom-up economic emergence with top-down social safety nets", ], }, { name: "Right-Wing Capitalism", yangness: "Yin", wing: "Right", economic: "Capitalism", description: "Yin capitalism with traditional hierarchies", icon: "💼", characteristics: [ "Free market self-organization (Yin)", "Traditional values and hierarchies (Right)", "Minimal state intervention in economy", "Bottom-up wealth creation, top-down social order", ], }, { name: "Left-Wing Communism", yangness: "Yang", wing: "Left", economic: "Communism", description: "Yang communism with egalitarian ideals", icon: "⚒️", characteristics: [ "Centralized planning (Yang)", "Equality and collective ownership (Left)", "Democratic participation in planning", "Top-down economic structure with bottom-up social equality", ], }, { name: "Right-Wing Communism", yangness: "Yang", wing: "Right", economic: "Communism", description: "Yang communism with calculated particular strategies", icon: "⚡", characteristics: [ "Centralized authority (Yang)", "Hierarchical implementation (Right)", 'Calculated strategies over "flat ethics"', "Goodness vs. Gaadness: particular basis not universal moralism", "Top-down planning with pragmatic execution", ], }, ] export function PoliticalMapper() { const [selected, setSelected] = useState("Left-Wing Capitalism") const currentSystem = systems.find((s) => s.name === selected)! return (

{/* Left: System Grid */}

{systems.map((system) => ( ))}

📋 Key Characteristics:

▸ {char}

{/* Right: Legend & Theory */}

💰

Capitalism (Yin)

Self-referential systems, neutralized self-gain, bottom-up emergence, market self-organization

⚒️

Communism (Yang)

Centralized planning, top-down structure, collective authority, imposed order

⚡

Right-Wing Communism Theory

Left-wing strategies can be calculated on a particular basis, not on "flat ethics." This transcends simple goodness vs. badness, using pragmatic calculation rather than universal moral absolutes.

) } [V0_FILE]typescriptreact:file="components/bottownness-explainer.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { ArrowDown, ArrowUp, Layers } from "lucide-react" export function BottownessExplainer() { return (

⚡

⚡ Bot-townness Defined

Bot-townness is the integration of top-down (extrospiritual) and bottom-up (introspiritual) qualities, inspired by L.B.S. Raccoon's chaos model. It represents the middle-out approach where complex systems emerge from the interplay of hierarchical structure and emergent behavior.

🌅 Top-Down (Extrospiritual)

External authority, imposed structure, divine revelation, social order, constitutional law, meaningful rules

🌱 Bottom-Up (Introspiritual)

Internal emergence, self-organization, personal realization, natural flow, capitalist self-referential systems, absolute base laws

∞

∞ Integration: Middle-Out Approach

⬆️ Bottom-Up Elements in Top-Down:

▸ Constitutional law emerges from social contracts (bottom-up)
▸ Religious doctrine evolves through lived experience
▸ Hierarchies adapt based on practical feedback
▸ Meaningful rules derive from absolute mathematical truths

⬇️ Top-Down Elements in Bottom-Up:

▸ Self-organizing systems follow universal laws (2+2=4)
▸ Personal meditation guided by traditional frameworks
▸ Market capitalism requires legal infrastructure
▸ Emergent behavior constrained by physical constants

" The chaos model notes that phases apply to all levels—from whole projects to individual lines of code. Bot-townness recognizes that we cannot separate high-level architecture from low-level implementation; they co-create each other. "

) } [V0_FILE]typescriptreact:file="components/religion-mapper.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { YinYangSymbol } from "@/components/yin-yang-symbol" type Religion = "Christianity" | "Confucianism" | "Taoism" | "Buddhism" interface ReligionData { name: Religion dimension: "Mind" | "Matter" view: "Extrospiritual" | "Introspiritual" yangness: "Yang" | "Yin" description: string icon: string } const religions: ReligionData[] = [ { name: "Christianity", dimension: "Mind", view: "Extrospiritual", yangness: "Yang", description: "Mind of Yang - External divine revelation, transcendent God, outward faith expression", icon: "✝️", }, { name: "Confucianism", dimension: "Matter", view: "Extrospiritual", yangness: "Yang", description: "Matter of Yang - Social order, external rituals, hierarchical structures", icon: "☯️", }, { name: "Taoism", dimension: "Matter", view: "Introspiritual", yangness: "Yin", description: "Matter of Yin - Natural flow, internal harmony, receptive awareness", icon: "☮️", }, { name: "Buddhism", dimension: "Mind", view: "Introspiritual", yangness: "Yin", description: "Mind of Yin - Internal meditation, self-realization, inward contemplation", icon: "🕉️", }, ] export function ReligionMapper() { const [selectedReligion, setSelectedReligion] = useState("Christianity") const [dimensionSelection, setDimensionSelection] = useState<"Mind" | "Matter">("Mind") const [viewSelection, setViewSelection] = useState<"Extrospiritual" | "Introspiritual">("Extrospiritual") useEffect(() => { const matchingReligion = religions.find((r) => r.dimension === dimensionSelection && r.view === viewSelection) if (matchingReligion && matchingReligion.name !== selectedReligion) { setSelectedReligion(matchingReligion.name) } }, [dimensionSelection, viewSelection, selectedReligion]) const currentReligion = religions.find((r) => r.name === selectedReligion)! const isYang = dimensionSelection === "Mind" const isExtro = viewSelection === "Extrospiritual" const rotation = isExtro ? 0 : 180 const shouldMirror = dimensionSelection === "Matter" return (

{/* Left: Controls */}

🌍 Select Religion

{religions.map((religion) => ( ))}

🧠 Dimension (Top Selection)

👁️ View (Bottom Selection)

{currentReligion.description}

{/* Right: Yin-Yang Visualization */}

{currentReligion.icon}

{currentReligion.name}

{dimensionSelection} ({isYang ? "Yang" : "Yin"}) {viewSelection}

⚡ The symbol rotates 180° when switching between Intro/Extro views, and mirrors when switching between Mind/Matter dimensions.

) }