RYUKAMI × SCORCH

import Button from '@/components/Button.astro';

<Button variant="crimson" size="md">Carmesí Scorch</Button>
<Button variant="cyan" size="md">Cian Eléctrico</Button>
<Button variant="gold" size="md">Oro Dragón</Button>
<Button variant="dark" size="md">Modo Hacker</Button>
<Button variant="outline" size="md">Contorno Paper</Button>

import Badge from '@/components/Badge.astro';

<Badge variant="crimson">● SYSTEM_ALERT</Badge>
<Badge variant="cyan">◆ REA_ENGINEERING</Badge>
<Badge variant="gold">★ VELGRYND_CORE</Badge>
<Badge variant="dark">TS TYPESCRIPT 7</Badge>
<Badge variant="outline">POSTGRESQL 17</Badge>

import Card from '@/components/Card.astro';
import Button from '@/components/Button.astro';

<Card title="0xSERVER // NODE_2" status="ONLINE">
  <div class="space-y-3">
    <h4 class="font-extrabold text-base uppercase">Botkeep Cloud Container</h4>
    <p class="text-xs leading-relaxed opacity-80">
      Contenedor asignado con 2 GB de RAM, PostgreSQL 17 y Redis 7.2.
    </p>
    <Button variant="cyan" size="sm">INSPECCIONAR NODO</Button>
  </div>
</Card>

import ProgressBar from '@/components/ProgressBar.astro';

<ProgressBar label="Núcleo Térmico Velgrynd" value={92} variant="crimson" status="CRITICAL" />
<ProgressBar label="Memoria RAM Asignada" value={68} variant="cyan" status="1.36 GB / 2 GB" />
<ProgressBar label="Sincronización de Paquetes" value={100} variant="emerald" status="NOMINAL" />

import Avatar from '@/components/Avatar.astro';
import Skeleton from '@/components/Skeleton.astro';
import Kbd from '@/components/Kbd.astro';

<Avatar name="0xAlex // Architect" role="CORE LEAD" initials="0X" status="ONLINE" variant="crimson" />
<Skeleton lines={2} label="FETCHING_DRAGON_TELEMETRY" variant="cyan" />
<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

import Input from '@/components/Input.astro';

<Input
  label="Comando CLI"
  prefix="$"
  placeholder="ryukami-ui add button"
  hint="Ejecuta en tu terminal de confianza"
/>
<Input
  label="Host de Base de Datos"
  prefix="tcp://"
  placeholder="db.internal.botkeep.xyz"
  value="127.0.0.1:5432"
/>

import Select from '@/components/Select.astro';
import Slider from '@/components/Slider.astro';

<Select
  label="Motor de Compilación"
  prefix="ENGINE //"
  options={[
    { value: 'astro-7', label: 'Astro 7.4.0 (Vite 8 + Rolldown)' },
    { value: 'next-16', label: 'Next.js 16 App Router (Turbopack)' },
  ]}
/>

<Slider
  label="Potencia de Sombreado ASCII"
  min={0}
  max={100}
  value={75}
  unit="%"
  variant="crimson"
/>

import Checkbox from '@/components/Checkbox.astro';
import Switch from '@/components/Switch.astro';

<Checkbox
  label="Autenticación Cuántica"
  description="Requiere llave SSH ed25519 física"
  checked
/>
<Switch
  label="Vigilancia RF Activa"
  variant="crimson"
  checked
/>

import Textarea from '@/components/Textarea.astro';
import RadioGroup from '@/components/RadioGroup.astro';

<Textarea label="Payload de Configuración" value="{\n  \"node\": \"scorch-02\"\n}" />
<RadioGroup
  label="Modo de Encriptación"
  name="cipher-mode"
  value="ed25519"
  options={[
    { value: 'ed25519', label: 'Ed25519 Quantum Key', badge: 'DEFAULT' },
    { value: 'rsa4096', label: 'RSA-4096 Legacy' },
  ]}
/>

import Tabs from '@/components/Tabs.astro';

<Tabs
  title="0xDEPLOY // TARGETS"
  tabs={[
    { id: 'astro', label: 'ASTRO 7.4', badge: 'DEFAULT', content: 'Compilación estática en 820ms con 0 KiB JS.', code: 'ryukami-ui init && ryukami-ui add --all' },
    { id: 'docker', label: 'DOCKER ALPINE', badge: 'PROD', content: 'Contenedor ligero en Botkeep Cloud.', code: 'docker compose up -d --build' },
  ]}
/>

import Accordion from '@/components/Accordion.astro';

<Accordion
  name="scorch-faq"
  items={[
    { title: '¿Por qué cero border-radius (0px)?', badge: 'DESIGN RULE #1', content: 'El Neo-Brutalismo puro elimina las curvas suaves para emular la precisión mecánica de terminales CRT y consolas industriales.', open: true },
    { title: '¿Cómo funciona la síntesis de sonido Web Audio?', badge: 'ZERO ASSETS', content: 'Los clics mecánicos se generan matemáticamente en tiempo real con osciladores triangulares y filtros pasa-banda sin descargar archivos MP3.' },
  ]}
/>

import Breadcrumb from '@/components/Breadcrumb.astro';
import Pagination from '@/components/Pagination.astro';

<Breadcrumb
  items={[
    { label: 'ryukami-labs', href: '#hero' },
    { label: 'scorch-v4.1', href: '#components' },
    { label: '0xkernel.astro', active: true },
  ]}
/>
<Pagination currentPage={2} totalPages={8} />

import Alert from '@/components/Alert.astro';

<Alert variant="crimson" title="SOBRECALENTAMIENTO DE NÚCLEO">
  Frecuencia de CPU al 98%. Temperatura en 89°C. Se activan ventiladores secundarios.
</Alert>

<Alert variant="cyan" title="SISTEMA ACTUALIZADO">
  Núcleo actualizado exitosamente a Astro 7.4.0 y Tailwind CSS 4.3.3.
</Alert>

import Modal from '@/components/Modal.astro';
import Popover from '@/components/Popover.astro';
import Button from '@/components/Button.astro';

<Button variant="crimson" onclick="window.showToast('ALERT_CRITICAL', 'Pulso térmico detectado.', 'crimson')">
  Disparar Toast Carmesí
</Button>

<Popover id="node-popover" triggerLabel="🔍 INSPECCIONAR NODO (POPOVER)" title="0xNODE // TELEMETRY">
  <p>Popover nativo HTML5 Top-Layer sin JS externo.</p>
</Popover>

<Modal id="demo-modal" title="0xKERNEL // SYSTEM_DIAGNOSTIC" status="ROOT_ACCESS">
  <p>Diagnóstico cuántico completado sin anomalías.</p>
</Modal>