AppShell

<script lang="ts">
	import AppShell from '@tcpsystems/ui/foundation/AppShell';
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
	import PageHeader from '@tcpsystems/ui/foundation/PageHeader';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Status from '@tcpsystems/ui/foundation/Status';
</script>

<AppShell>
	{#snippet top()}
		<Topbar>
			{#snippet brand()}<Brand product="console" />{/snippet}
			{#snippet end()}<ThemeSwitch />{/snippet}
		</Topbar>
	{/snippet}
	<PageHeader title="Deployments" lead="Latest production deploys across tcp.systems services." />
	<Stack gap="md">
		<Status tone="ok">search-gateway 2.4 rolled out to all regions</Status>
		<Status tone="warn">iptv-catalogue 0.9 canary at 10%</Status>
		<Status tone="neutral">radar 1.2 queued behind review</Status>
	</Stack>
</AppShell>

<script lang="ts">
	import AppShell from '@tcpsystems/ui/foundation/AppShell';
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
	import SideNav from '@tcpsystems/ui/foundation/SideNav';
	import PageHeader from '@tcpsystems/ui/foundation/PageHeader';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<AppShell layout="console">
	{#snippet top()}
		<Topbar hasRail>
			{#snippet brand()}<Brand product="studio" />{/snippet}
			{#snippet end()}<ThemeSwitch />{/snippet}
		</Topbar>
	{/snippet}
	{#snippet rail()}
		<SideNav label="Sections" items={[
			{ label: 'Projects', href: 'https://docs.tcp.systems/projects', current: true },
			{ label: 'Deployments', href: 'https://docs.tcp.systems/deployments' },
			{ label: 'Agents', href: 'https://docs.tcp.systems/agents' },
			{ label: 'Billing', href: 'https://docs.tcp.systems/billing' }
		]} />
	{/snippet}
	<PageHeader title="Projects" lead="Agents and the services they run." />
	<Stack gap="md">
		<Text mono>acumen · 4 replicas · production</Text>
		<Text mono>search-gateway · 2 replicas · production</Text>
		<Text mono>chat · 1 replica · staging</Text>
	</Stack>
</AppShell>

<script lang="ts">
	import AppShell from '@tcpsystems/ui/foundation/AppShell';
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
	import SideNav from '@tcpsystems/ui/foundation/SideNav';
	import Toc from '@tcpsystems/ui/foundation/Toc';
	import PageHeader from '@tcpsystems/ui/foundation/PageHeader';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<AppShell layout="docs">
	{#snippet top()}
		<Topbar>
			{#snippet brand()}<Brand product="docs" />{/snippet}
			{#snippet end()}<ThemeSwitch />{/snippet}
		</Topbar>
	{/snippet}
	{#snippet rail()}
		<SideNav label="Sections" items={[
			{ label: 'Getting started', items: [
				{ label: 'Install', href: 'https://docs.tcp.systems/install', current: true },
				{ label: 'First component', href: 'https://docs.tcp.systems/first-component' }
			] },
			{ label: 'Foundation', href: 'https://docs.tcp.systems/foundation' },
			{ label: 'Tokens', href: 'https://docs.tcp.systems/tokens' }
		]} />
	{/snippet}
	<Stack gap="md">
		<PageHeader title="Install" lead="Add @tcpsystems/ui to your SvelteKit app." />
		<Text>Install the package, import a component by its path, and it ships its own styles from the token layer.</Text>
		<Text mono>pnpm add @tcpsystems/ui</Text>
	</Stack>
	{#snippet aside()}
		<Toc items={[
			{ label: 'Install', href: 'https://docs.tcp.systems/install', current: true },
			{ label: 'First component', href: 'https://docs.tcp.systems/first-component' },
			{ label: 'Foundation', href: 'https://docs.tcp.systems/foundation' },
			{ label: 'Tokens', href: 'https://docs.tcp.systems/tokens' }
		]} />
	{/snippet}
</AppShell>