Horisontaali ja vertikaali suunta

import { createRoot } from ’react-dom/client’; // Clear the existing HTML content document.body.innerHTML = ’

’; // Render your React component instead const root = createRoot(document.getElementById(’app’)); root.render(

Hello, world

); import React, { useMemo, useState } from ”react”; import { Card, CardContent, CardHeader, CardTitle } from ”@/components/ui/card”; import { Button } from ”@/components/ui/button”; import { Input } from ”@/components/ui/input”; import { Textarea } from ”@/components/ui/textarea”; import { Tabs, TabsList, TabsTrigger, TabsContent } from ”@/components/ui/tabs”; import { Download, RefreshCcw, Compass } from ”lucide-react”; /** * α–Ω Isomorfinen Kartoitin (7-kehäinen) * ——————————————————— * • 8-sektorinen polar-viz + 7 rengasta (holarkia) * • Sama ”isomorfinen” ominaisuuslomake jokaiselle α–Ω-roolille * • Nopea käyttö: kirjoita aihe (esim. ”Ajatus”, ”Ajattelu”, ”Kognitiotiede”, ”Kybernetiikka”) → klikkaa sektoria → täytä kentät * • Export JSON (buuttausnauha-tyylinen rakenne) * • Ei ulkoisia palveluita; kaikki selaimessa */ // α–Ω sektorit GoodReason-järjestyksessä (suuntaus käyttäjän toivon mukaan): const ROLES = [ { key: ”phi”, symbol: ”φ”, name: ”Ratkaisut” }, { key: ”tau”, symbol: ”τ”, name: ”Integraatio” }, { key: ”omega”, symbol: ”Ω”, name: ”Holistinen” }, { key: ”dps”, symbol: ”ΔΨ”, name: ”Paradigma” }, { key: ”chi”, symbol: ”χ”, name: ”Ympäristö” }, { key: ”pi”, symbol: ”π”, name: ”Teoria” }, { key: ”alpha”, symbol: ”α”, name: ”Tarkoitus” }, { key: ”beta”, symbol: ”β”, name: ”Arkkitehtuuri” }, ] as const; // 7 kehää (holarkia) — nimet ovat paikkamerkkejä; käyttäjä voi tulkita tasot omassa kontekstissaan const RINGS = [”1”, ”2”, ”3”, ”4”, ”5”, ”6”, ”7”] as const; // Isomorfinen ominaisuussapluuna jokaiselle roolille const emptyIso = () => ({ definition: ””, // ytimekäs määritelmä parts: ””, // osat/elementit interactions: ””, // vuorovaikutukset feedback: ””, // palautekytkennät holarchy: ””, // holarkian taso(t), esim. kvantti→atomi→mieli→yhteiskunta evidence: ””, // todiste-/lähdetyypit interventions: ””, // vipupisteet, toimenpiteet }); // Alustetaan kaikki roolit samalla isomorfisella lomakkeella const baseModel = ROLES.reduce((acc, r) => { acc[r.key] = emptyIso(); return acc; }, {} as Record>); export default function AOIsomorphicMapper() { const [topic, setTopic] = useState(”Ajatus”); const [ringFocus, setRingFocus] = useState(null); // jos halutaan korostaa rengasta 1..7 const [selectedRole, setSelectedRole] = useState(”alpha”); const [model, setModel] = useState(baseModel); // Polar-visualisointi mitat const size = 520; const cx = size / 2; const cy = size / 2; const radius = 240; const ringGap = radius / RINGS.length; const sectors = useMemo(() => { const degPer = 360 / ROLES.length; return ROLES.map((r, i) => ({ …r, start: (i * degPer – 90) * (Math.PI / 180), end: ((i + 1) * degPer – 90) * (Math.PI / 180), mid: ((i + 0.5) * degPer – 90) * (Math.PI / 180), })); }, []); const ringRadii = useMemo(() => RINGS.map((_, i) => ringGap * (i + 1)), [ringGap]); const toXY = (angle: number, r: number) => [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r]; const onChangeField = (roleKey: string, field: keyof ReturnType, value: string) => { setModel((m) => ({ …m, [roleKey]: { …m[roleKey], [field]: value } })); }; const exportJson = () => { const payload = { topic, rings: […RINGS], roles: ROLES.map((r) => ({ symbol: r.symbol, key: r.key, name: r.name, …model[r.key] })), meta: { isomorphic: true, note: ”Sama ominaisuusrakenne jokaiselle α–Ω-roolille.”, generated: new Date().toISOString(), }, }; const blob = new Blob([JSON.stringify(payload, null, 2)], { type: ”application/json” }); const url = URL.createObjectURL(blob); const a = document.createElement(”a”); a.href = url; a.download = `AO_${topic.replace(/\s+/g, ”_”)}.json`; a.click(); URL.revokeObjectURL(url); }; const resetAll = () => setModel(baseModel); return (

α–Ω Isomorfinen kartoitin (7-kehäinen)

”Everything is a system” → Sama lomake jokaiselle roolille. Klikkaa sektoria, täytä kentät, vie JSONiksi.

setTopic(e.target.value)} placeholder=”Aihe (esim. Ajatus, Ajattelu, Kognitiotiede, Kybernetiikka)” />

{/* SVG polar-visualisointi */}

{ROLES.find((r) => r.key === selectedRole)?.symbol} {ROLES.find((r) => r.key === selectedRole)?.name} — isomorfinen ominaisuussapluuna Määritelmä Osat Vuorovaikutukset Palaute Holarkia Todisteet Vipupisteet {([”definition”, ”parts”, ”interactions”, ”feedback”, ”holarchy”, ”evidence”, ”interventions”] as const).map((field) => (

onChangeField(selectedRole, field, e.target.value)}
                />
              </TabsContent>
            ))}
          </Tabs>

<div className="flex items-center gap-2 mt-4">
            <Button onClick={exportJson}><Download className="w-4 h-4 mr-1"/>Export JSON</Button>
            <Button variant="secondary" onClick={() => setRingFocus(null)}>Poista rengaskorostus</Button>
          </div>

<div className="text-xs opacity-70 mt-3">
            Vihje: Aloita aiheilla <b>Ajatus</b>, <b>Ajattelu</b>, <b>Kognitiotiede</b>, <b>Kybernetiikka</b>. Jokaisella roolilla on samat kentät → isomorfia tukee rapid learning -ideaa.
          </div>
        </CardContent>
      </Card>

<Card className="border-0 shadow-md col-span-1 lg:col-span-2">
        <CardContent className="pt-6">
          <h3 className="text-lg font-semibold mb-2">Miksi tämä ei ole taulukko?</h3>
          <p className="text-sm opacity-80 mb-2">
            Tekstitaulukko piilottaa rakenteen. Polar-visualisointi näyttää kerralla 8 sektoria ja 7 kehää →
            <i>kaavio avautuu silmänräpäyksessä</i>. Sama lomake jokaiselle roolille (isomorfia) tekee oppimisesta nopeaa ja vertailtavaa.
          </p>
          <ul className="list-disc ml-6 text-sm opacity-80">
            <li>Holarkia näkyy rengasrenkaina (1–7)</li>
            <li>Roolit ovat kuin ilmansuunnat (α–Ω)</li>
            <li>JSON-export toimii buuttausnauhana jatkoprosessointiin</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}

</div>

</article>
			</main>
		</div>
	</div>

<aside class="widget-area">
		<section id="block-16" class="widget widget_block">
<figure class="wp-block-pullquote"><blockquote><p></p><cite><img decoding="async" draggable="false" role="img" class="emoji" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f449.svg" alt="👉"> GoodReason on tutkimuksellinen läpimurto  aiheena <strong>Innovoinnin tiede – luovuuden ja järjestyksen symbioosi</strong>. Se kuuluu <em>systeemitieteen </em>kategoriaan.</cite></blockquote></figure>
</section>	</aside>

<div class="powered-by">
				Moottorina ylpeästi <a href="https://fi.wordpress.org/">WordPress</a>.			</div>

</div>
	</footer>

</div>

</body>
</html>