Mind map

<script lang="ts">
	import MindMap from '#lib/ui/MindMap.svelte';
	import type { MindNode } from '#lib/ui/mindmap.js';
	import {
		BookOpen01Icon,
		MedicineBottle01Icon,
		SunCloud01Icon,
		CalculatorIcon
	} from '@hugeicons/core-free-icons';

	let root: MindNode = $state({
		id: 'wisdom',
		label: 'The House of Wisdom',
		note: 'Baghdad, 9th century',
		children: [
			{
				id: 'translation',
				label: 'Translation',
				icon: BookOpen01Icon,
				children: [
					{
						id: 'greek',
						label: 'Greek',
						children: [
							{ id: 'aristotle', label: 'Aristotle' },
							{ id: 'galen', label: 'Galen' }
						]
					},
					{ id: 'persian', label: 'Persian' },
					{ id: 'sanskrit', label: 'Sanskrit', note: 'Siddhanta tables' }
				]
			},
			{
				id: 'astronomy',
				label: 'Astronomy',
				icon: SunCloud01Icon,
				collapsed: true,
				children: [
					{ id: 'observatory', label: 'Shammasiyya observatory' },
					{ id: 'zij', label: 'Star tables (zij)' },
					{ id: 'earth', label: 'Measuring the Earth' }
				]
			},
			{
				id: 'medicine',
				label: 'Medicine',
				icon: MedicineBottle01Icon,
				children: [
					{ id: 'hunayn', label: 'Hunayn ibn Ishaq', note: 'Ten treatises on the eye' },
					{ id: 'hospitals', label: 'Hospitals (bimaristan)' }
				]
			},
			{
				id: 'mathematics',
				label: 'Mathematics',
				icon: CalculatorIcon,
				children: [
					{
						id: 'algebra',
						label: 'Al-Khwarizmi’s algebra',
						children: [
							{ id: 'jabr', label: 'Completion (al-jabr)' },
							{ id: 'muqabala', label: 'Balancing' }
						]
					},
					{ id: 'numerals', label: 'Hindu numerals' }
				]
			}
		]
	});
</script>

<div class="frame">
	<MindMap bind:root label="The House of Wisdom" />
</div>

<style>
	.frame {
		inline-size: 100%;
		block-size: 30rem;
	}
</style>

<script lang="ts">
	import MindMap from '#lib/ui/MindMap.svelte';
	import { toOutline, type MindNode } from '#lib/ui/mindmap.js';
	import CopyButton from '#lib/ui/CopyButton.svelte';

	let root: MindNode = $state({
		id: 'room',
		label: 'Plan the library’s new reading room',
		children: [
			{
				id: 'space',
				label: 'Space',
				children: [
					{ id: 'light', label: 'North light for copyists' },
					{ id: 'quiet', label: 'Quiet corner' }
				]
			},
			{
				id: 'collection',
				label: 'Collection',
				children: [
					{ id: 'optics', label: 'Book of Optics' },
					{ id: 'canon', label: 'Canon of Medicine' }
				]
			},
			{ id: 'people', label: 'People', children: [{ id: 'keeper', label: 'A keeper of books' }] },
			{ id: 'budget', label: 'Budget' }
		]
	});
</script>

<div class="stack">
	<div class="frame">
		<MindMap bind:root label="Plan for the reading room" editable />
	</div>
	<CopyButton value={() => toOutline(root)} size="sm">Copy as outline</CopyButton>
</div>

<style>
	.stack {
		inline-size: 100%;
		display: grid;
		justify-items: start;
		gap: 0.75rem;
	}
	.frame {
		justify-self: stretch;
		block-size: 30rem;
	}
</style>

<script lang="ts">
	import MindMap from '#lib/ui/MindMap.svelte';
	import type { MindNode } from '#lib/ui/mindmap.js';

	let root: MindNode = $state({
		id: 'optics',
		label: 'Book of Optics',
		note: 'Ibn al-Haytham',
		children: [
			{
				id: 'b1',
				label: 'Book I: How we see',
				children: [
					{ id: 'b1-rays', label: 'Light enters the eye' },
					{ id: 'b1-eye', label: 'Parts of the eye' }
				]
			},
			{
				id: 'b2',
				label: 'Book II: What we see',
				children: [{ id: 'b2-form', label: 'Recognizing form' }]
			},
			{ id: 'b3', label: 'Book III: Errors of sight' },
			{
				id: 'b4',
				label: 'Books IV–VII: Reflection and refraction',
				children: [
					{ id: 'mirrors', label: 'Mirrors' },
					{ id: 'alhazen', label: 'Alhazen’s problem' },
					{ id: 'refraction', label: 'Refraction' }
				]
			}
		]
	});
</script>

<div class="frame">
	<MindMap bind:root label="Outline of the Book of Optics" sides="right" />
</div>

<style>
	.frame {
		inline-size: 100%;
		block-size: 28rem;
	}
</style>