trama-ui 0.1.0

package/dist/lib/ui/icons.js

@@ -0,0 +1,314 @@
+import { Alien } from "pixelarticons/react/Alien";
+import { ArrowDown } from "pixelarticons/react/ArrowDown";
+import { ArrowLeft } from "pixelarticons/react/ArrowLeft";
+import { ArrowRight } from "pixelarticons/react/ArrowRight";
+import { ArrowUp } from "pixelarticons/react/ArrowUp";
+import { AtSign } from "pixelarticons/react/AtSign";
+import { AtSignSharp } from "pixelarticons/react/AtSignSharp";
+import { BatteryFull } from "pixelarticons/react/BatteryFull";
+import { BatteryFullSharp } from "pixelarticons/react/BatteryFullSharp";
+import { Bell } from "pixelarticons/react/Bell";
+import { BellSharp } from "pixelarticons/react/BellSharp";
+import { Bluesky } from "pixelarticons/react/Bluesky";
+import { Bomb } from "pixelarticons/react/Bomb";
+import { Bookmark } from "pixelarticons/react/Bookmark";
+import { BookmarkSharp } from "pixelarticons/react/BookmarkSharp";
+import { Bug } from "pixelarticons/react/Bug";
+import { BugSharp } from "pixelarticons/react/BugSharp";
+import { Calendar } from "pixelarticons/react/Calendar";
+import { CalendarSharp } from "pixelarticons/react/CalendarSharp";
+import { Camera } from "pixelarticons/react/Camera";
+import { CameraSharp } from "pixelarticons/react/CameraSharp";
+import { Castle } from "pixelarticons/react/Castle";
+import { CastleSharp } from "pixelarticons/react/CastleSharp";
+import { Check } from "pixelarticons/react/Check";
+import { Chess } from "pixelarticons/react/Chess";
+import { ChessSharp } from "pixelarticons/react/ChessSharp";
+import { ChevronDown } from "pixelarticons/react/ChevronDown";
+import { ChevronLeft } from "pixelarticons/react/ChevronLeft";
+import { ChevronRight } from "pixelarticons/react/ChevronRight";
+import { ChevronUp } from "pixelarticons/react/ChevronUp";
+import { CircleInfo } from "pixelarticons/react/CircleInfo";
+import { CircleQuestion } from "pixelarticons/react/CircleQuestion";
+import { Clock } from "pixelarticons/react/Clock";
+import { Close } from "pixelarticons/react/Close";
+import { Cloud } from "pixelarticons/react/Cloud";
+import { Code } from "pixelarticons/react/Code";
+import { Coffee } from "pixelarticons/react/Coffee";
+import { CoffeeSharp } from "pixelarticons/react/CoffeeSharp";
+import { Coins } from "pixelarticons/react/Coins";
+import { Compass } from "pixelarticons/react/Compass";
+import { Copy } from "pixelarticons/react/Copy";
+import { CopySharp } from "pixelarticons/react/CopySharp";
+import { Cpu } from "pixelarticons/react/Cpu";
+import { CpuSharp } from "pixelarticons/react/CpuSharp";
+import { Crown } from "pixelarticons/react/Crown";
+import { CrownSharp } from "pixelarticons/react/CrownSharp";
+import { Database } from "pixelarticons/react/Database";
+import { Discord } from "pixelarticons/react/Discord";
+import { Download } from "pixelarticons/react/Download";
+import { DownloadSharp } from "pixelarticons/react/DownloadSharp";
+import { ExternalLink } from "pixelarticons/react/ExternalLink";
+import { ExternalLinkSharp } from "pixelarticons/react/ExternalLinkSharp";
+import { Eye } from "pixelarticons/react/Eye";
+import { EyeOff } from "pixelarticons/react/EyeOff";
+import { Feather } from "pixelarticons/react/Feather";
+import { File } from "pixelarticons/react/File";
+import { FileSharp } from "pixelarticons/react/FileSharp";
+import { FileText } from "pixelarticons/react/FileText";
+import { FileTextSharp } from "pixelarticons/react/FileTextSharp";
+import { Filter } from "pixelarticons/react/Filter";
+import { Fire } from "pixelarticons/react/Fire";
+import { Flag } from "pixelarticons/react/Flag";
+import { Folder } from "pixelarticons/react/Folder";
+import { FolderSharp } from "pixelarticons/react/FolderSharp";
+import { Gamepad } from "pixelarticons/react/Gamepad";
+import { GamepadSharp } from "pixelarticons/react/GamepadSharp";
+import { Gift } from "pixelarticons/react/Gift";
+import { GiftSharp } from "pixelarticons/react/GiftSharp";
+import { GitBranch } from "pixelarticons/react/GitBranch";
+import { GitBranchSharp } from "pixelarticons/react/GitBranchSharp";
+import { Github } from "pixelarticons/react/Github";
+import { Globe } from "pixelarticons/react/Globe";
+import { Headphone } from "pixelarticons/react/Headphone";
+import { Heart } from "pixelarticons/react/Heart";
+import { Home } from "pixelarticons/react/Home";
+import { HomeSharp } from "pixelarticons/react/HomeSharp";
+import { Hourglass } from "pixelarticons/react/Hourglass";
+import { HourglassSharp } from "pixelarticons/react/HourglassSharp";
+import { Image } from "pixelarticons/react/Image";
+import { ImageSharp } from "pixelarticons/react/ImageSharp";
+import { Instagram } from "pixelarticons/react/Instagram";
+import { Joystick } from "pixelarticons/react/Joystick";
+import { JoystickSharp } from "pixelarticons/react/JoystickSharp";
+import { Key } from "pixelarticons/react/Key";
+import { Leaf } from "pixelarticons/react/Leaf";
+import { Lightbulb } from "pixelarticons/react/Lightbulb";
+import { Link } from "pixelarticons/react/Link";
+import { LinkSharp } from "pixelarticons/react/LinkSharp";
+import { Linkedin } from "pixelarticons/react/Linkedin";
+import { Lock } from "pixelarticons/react/Lock";
+import { LockSharp } from "pixelarticons/react/LockSharp";
+import { Login } from "pixelarticons/react/Login";
+import { LoginSharp } from "pixelarticons/react/LoginSharp";
+import { Logout } from "pixelarticons/react/Logout";
+import { LogoutSharp } from "pixelarticons/react/LogoutSharp";
+import { Mail } from "pixelarticons/react/Mail";
+import { MailSharp } from "pixelarticons/react/MailSharp";
+import { MapPin } from "pixelarticons/react/MapPin";
+import { Mastodon } from "pixelarticons/react/Mastodon";
+import { Menu } from "pixelarticons/react/Menu";
+import { Message } from "pixelarticons/react/Message";
+import { MessageSharp } from "pixelarticons/react/MessageSharp";
+import { Mic } from "pixelarticons/react/Mic";
+import { MicSharp } from "pixelarticons/react/MicSharp";
+import { Minus } from "pixelarticons/react/Minus";
+import { Moon } from "pixelarticons/react/Moon";
+import { MoreHorizontal } from "pixelarticons/react/MoreHorizontal";
+import { MoreHorizontalSharp } from "pixelarticons/react/MoreHorizontalSharp";
+import { MoreVertical } from "pixelarticons/react/MoreVertical";
+import { MoreVerticalSharp } from "pixelarticons/react/MoreVerticalSharp";
+import { Music } from "pixelarticons/react/Music";
+import { MusicSharp } from "pixelarticons/react/MusicSharp";
+import { Npm } from "pixelarticons/react/Npm";
+import { Pause } from "pixelarticons/react/Pause";
+import { Pencil } from "pixelarticons/react/Pencil";
+import { Phone } from "pixelarticons/react/Phone";
+import { PhoneSharp } from "pixelarticons/react/PhoneSharp";
+import { Play } from "pixelarticons/react/Play";
+import { Plus } from "pixelarticons/react/Plus";
+import { Potion } from "pixelarticons/react/Potion";
+import { PotionSharp } from "pixelarticons/react/PotionSharp";
+import { Power } from "pixelarticons/react/Power";
+import { React } from "pixelarticons/react/React";
+import { Reload } from "pixelarticons/react/Reload";
+import { ReloadSharp } from "pixelarticons/react/ReloadSharp";
+import { Robot } from "pixelarticons/react/Robot";
+import { RobotSharp } from "pixelarticons/react/RobotSharp";
+import { Save } from "pixelarticons/react/Save";
+import { SaveSharp } from "pixelarticons/react/SaveSharp";
+import { Search } from "pixelarticons/react/Search";
+import { Send } from "pixelarticons/react/Send";
+import { Server } from "pixelarticons/react/Server";
+import { ServerSharp } from "pixelarticons/react/ServerSharp";
+import { SettingsCog } from "pixelarticons/react/SettingsCog";
+import { Share } from "pixelarticons/react/Share";
+import { ShareSharp } from "pixelarticons/react/ShareSharp";
+import { Shield } from "pixelarticons/react/Shield";
+import { ShieldSharp } from "pixelarticons/react/ShieldSharp";
+import { ShoppingCart } from "pixelarticons/react/ShoppingCart";
+import { Skull } from "pixelarticons/react/Skull";
+import { SkullSharp } from "pixelarticons/react/SkullSharp";
+import { Snowflake } from "pixelarticons/react/Snowflake";
+import { Sparkles } from "pixelarticons/react/Sparkles";
+import { Star } from "pixelarticons/react/Star";
+import { Sun } from "pixelarticons/react/Sun";
+import { Sword } from "pixelarticons/react/Sword";
+import { Target } from "pixelarticons/react/Target";
+import { Terminal } from "pixelarticons/react/Terminal";
+import { TerminalSharp } from "pixelarticons/react/TerminalSharp";
+import { Trash } from "pixelarticons/react/Trash";
+import { TrashSharp } from "pixelarticons/react/TrashSharp";
+import { Tree } from "pixelarticons/react/Tree";
+import { Trophy } from "pixelarticons/react/Trophy";
+import { TrophySharp } from "pixelarticons/react/TrophySharp";
+import { Unlock } from "pixelarticons/react/Unlock";
+import { UnlockSharp } from "pixelarticons/react/UnlockSharp";
+import { Upload } from "pixelarticons/react/Upload";
+import { UploadSharp } from "pixelarticons/react/UploadSharp";
+import { User } from "pixelarticons/react/User";
+import { UserSharp } from "pixelarticons/react/UserSharp";
+import { Users } from "pixelarticons/react/Users";
+import { UsersSharp } from "pixelarticons/react/UsersSharp";
+import { Vercel } from "pixelarticons/react/Vercel";
+import { Video } from "pixelarticons/react/Video";
+import { VideoSharp } from "pixelarticons/react/VideoSharp";
+import { Volume } from "pixelarticons/react/Volume";
+import { Wand } from "pixelarticons/react/Wand";
+import { WarningDiamond } from "pixelarticons/react/WarningDiamond";
+import { Wifi } from "pixelarticons/react/Wifi";
+import { Youtube } from "pixelarticons/react/Youtube";
+import { Zap } from "pixelarticons/react/Zap";
+export const ICONS = {
+    // Acciones
+    plus: { base: Plus },
+    minus: { base: Minus },
+    close: { base: Close },
+    check: { base: Check },
+    pencil: { base: Pencil },
+    trash: { base: Trash, sharp: TrashSharp },
+    copy: { base: Copy, sharp: CopySharp },
+    save: { base: Save, sharp: SaveSharp },
+    download: { base: Download, sharp: DownloadSharp },
+    upload: { base: Upload, sharp: UploadSharp },
+    reload: { base: Reload, sharp: ReloadSharp },
+    search: { base: Search },
+    filter: { base: Filter },
+    link: { base: Link, sharp: LinkSharp },
+    share: { base: Share, sharp: ShareSharp },
+    send: { base: Send },
+    // Navegación
+    "arrow-left": { base: ArrowLeft },
+    "arrow-right": { base: ArrowRight },
+    "arrow-up": { base: ArrowUp },
+    "arrow-down": { base: ArrowDown },
+    "chevron-left": { base: ChevronLeft },
+    "chevron-right": { base: ChevronRight },
+    "chevron-up": { base: ChevronUp },
+    "chevron-down": { base: ChevronDown },
+    menu: { base: Menu },
+    home: { base: Home, sharp: HomeSharp },
+    "external-link": { base: ExternalLink, sharp: ExternalLinkSharp },
+    "more-horizontal": { base: MoreHorizontal, sharp: MoreHorizontalSharp },
+    "more-vertical": { base: MoreVertical, sharp: MoreVerticalSharp },
+    login: { base: Login, sharp: LoginSharp },
+    logout: { base: Logout, sharp: LogoutSharp },
+    // Estado
+    "circle-info": { base: CircleInfo },
+    "warning-diamond": { base: WarningDiamond },
+    "circle-question": { base: CircleQuestion },
+    bell: { base: Bell, sharp: BellSharp },
+    heart: { base: Heart },
+    star: { base: Star },
+    bookmark: { base: Bookmark, sharp: BookmarkSharp },
+    flag: { base: Flag },
+    lock: { base: Lock, sharp: LockSharp },
+    unlock: { base: Unlock, sharp: UnlockSharp },
+    eye: { base: Eye },
+    "eye-off": { base: EyeOff },
+    shield: { base: Shield, sharp: ShieldSharp },
+    // Personas
+    user: { base: User, sharp: UserSharp },
+    users: { base: Users, sharp: UsersSharp },
+    mail: { base: Mail, sharp: MailSharp },
+    message: { base: Message, sharp: MessageSharp },
+    phone: { base: Phone, sharp: PhoneSharp },
+    "at-sign": { base: AtSign, sharp: AtSignSharp },
+    // Tecnología
+    terminal: { base: Terminal, sharp: TerminalSharp },
+    code: { base: Code },
+    cpu: { base: Cpu, sharp: CpuSharp },
+    database: { base: Database },
+    server: { base: Server, sharp: ServerSharp },
+    cloud: { base: Cloud },
+    wifi: { base: Wifi },
+    "battery-full": { base: BatteryFull, sharp: BatteryFullSharp },
+    zap: { base: Zap },
+    power: { base: Power },
+    "settings-cog": { base: SettingsCog },
+    bug: { base: Bug, sharp: BugSharp },
+    "git-branch": { base: GitBranch, sharp: GitBranchSharp },
+    globe: { base: Globe },
+    // Marcas
+    github: { base: Github },
+    discord: { base: Discord },
+    linkedin: { base: Linkedin },
+    instagram: { base: Instagram },
+    youtube: { base: Youtube },
+    mastodon: { base: Mastodon },
+    bluesky: { base: Bluesky },
+    react: { base: React },
+    npm: { base: Npm },
+    vercel: { base: Vercel },
+    // Medios
+    file: { base: File, sharp: FileSharp },
+    "file-text": { base: FileText, sharp: FileTextSharp },
+    folder: { base: Folder, sharp: FolderSharp },
+    image: { base: Image, sharp: ImageSharp },
+    camera: { base: Camera, sharp: CameraSharp },
+    video: { base: Video, sharp: VideoSharp },
+    music: { base: Music, sharp: MusicSharp },
+    play: { base: Play },
+    pause: { base: Pause },
+    volume: { base: Volume },
+    mic: { base: Mic, sharp: MicSharp },
+    headphone: { base: Headphone },
+    // Juego
+    gamepad: { base: Gamepad, sharp: GamepadSharp },
+    joystick: { base: Joystick, sharp: JoystickSharp },
+    sword: { base: Sword },
+    skull: { base: Skull, sharp: SkullSharp },
+    bomb: { base: Bomb },
+    trophy: { base: Trophy, sharp: TrophySharp },
+    crown: { base: Crown, sharp: CrownSharp },
+    coins: { base: Coins },
+    potion: { base: Potion, sharp: PotionSharp },
+    robot: { base: Robot, sharp: RobotSharp },
+    alien: { base: Alien },
+    castle: { base: Castle, sharp: CastleSharp },
+    chess: { base: Chess, sharp: ChessSharp },
+    fire: { base: Fire },
+    sparkles: { base: Sparkles },
+    leaf: { base: Leaf },
+    tree: { base: Tree },
+    sun: { base: Sun },
+    moon: { base: Moon },
+    snowflake: { base: Snowflake },
+    // Objetos
+    calendar: { base: Calendar, sharp: CalendarSharp },
+    clock: { base: Clock },
+    "map-pin": { base: MapPin },
+    "shopping-cart": { base: ShoppingCart },
+    gift: { base: Gift, sharp: GiftSharp },
+    key: { base: Key },
+    lightbulb: { base: Lightbulb },
+    coffee: { base: Coffee, sharp: CoffeeSharp },
+    compass: { base: Compass },
+    target: { base: Target },
+    hourglass: { base: Hourglass, sharp: HourglassSharp },
+    feather: { base: Feather },
+    wand: { base: Wand },
+};
+/** Agrupación para el selector del catálogo y para documentar el set. */
+export const ICON_GROUPS = [
+    { label: "Acciones", names: ["plus", "minus", "close", "check", "pencil", "trash", "copy", "save", "download", "upload", "reload", "search", "filter", "link", "share", "send"] },
+    { label: "Navegación", names: ["arrow-left", "arrow-right", "arrow-up", "arrow-down", "chevron-left", "chevron-right", "chevron-up", "chevron-down", "menu", "home", "external-link", "more-horizontal", "more-vertical", "login", "logout"] },
+    { label: "Estado", names: ["circle-info", "warning-diamond", "circle-question", "bell", "heart", "star", "bookmark", "flag", "lock", "unlock", "eye", "eye-off", "shield"] },
+    { label: "Personas", names: ["user", "users", "mail", "message", "phone", "at-sign"] },
+    { label: "Tecnología", names: ["terminal", "code", "cpu", "database", "server", "cloud", "wifi", "battery-full", "zap", "power", "settings-cog", "bug", "git-branch", "globe"] },
+    { label: "Marcas", names: ["github", "discord", "linkedin", "instagram", "youtube", "mastodon", "bluesky", "react", "npm", "vercel"] },
+    { label: "Medios", names: ["file", "file-text", "folder", "image", "camera", "video", "music", "play", "pause", "volume", "mic", "headphone"] },
+    { label: "Juego", names: ["gamepad", "joystick", "sword", "skull", "bomb", "trophy", "crown", "coins", "potion", "robot", "alien", "castle", "chess", "fire", "sparkles", "leaf", "tree", "sun", "moon", "snowflake"] },
+    { label: "Objetos", names: ["calendar", "clock", "map-pin", "shopping-cart", "gift", "key", "lightbulb", "coffee", "compass", "target", "hourglass", "feather", "wand"] },
+];
+export const ICON_NAMES = Object.keys(ICONS);

package/dist/lib/ui/placeholder.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Imágenes de ejemplo para las galerías: escenas de mar en pixel art generadas como SVG, así el kit no depende de
+ * ninguna imagen ni de la red. En cualquier prop de imágenes, `gen:N` (N = 0, 1, 2…) pide la escena N; cualquier otra
+ * cosa se trata como una URL normal.
+ */
+/** Escena pixel art N (rejilla 40×30, 800×600). Determinista: la misma N da siempre la misma imagen. */
+export declare function pixelScene(n: number): string;
+/** Data URI de la escena N: se puede usar directamente en `<img src>`. */
+export declare const pixelSceneUri: (n: number) => string;
+/** `gen:N` → escena generada; cualquier otra cosa se devuelve tal cual (URL, ruta o data URI). */
+export declare function resolveImage(src: string): string;

package/dist/lib/ui/placeholder.js

@@ -0,0 +1,65 @@
+/**
+ * Imágenes de ejemplo para las galerías: escenas de mar en pixel art generadas como SVG, así el kit no depende de
+ * ninguna imagen ni de la red. En cualquier prop de imágenes, `gen:N` (N = 0, 1, 2…) pide la escena N; cualquier otra
+ * cosa se trata como una URL normal.
+ */
+const PALS = [
+    { sky: ["#2b1b4d", "#6a3a7a", "#c2587a", "#ff9a6b", "#ffc98a"], sun: "#ffe28c", far: "#3a2a66", mid: "#1f4d7a", near: "#0f2f55", foam: "#ffd9b8" },
+    { sky: ["#2f8fd8", "#5fb0e8", "#8fd0f4", "#bfe8ff"], sun: "#fff6c2", far: "#2a86a8", mid: "#1670a0", near: "#0e5583", foam: "#ffffff" },
+    { sky: ["#3a1c71", "#7a2a8a", "#d1467a", "#ff6a4d", "#ffa860"], sun: "#ffd27c", far: "#5a2a7a", mid: "#33306b", near: "#1a1a4a", foam: "#ffb59a" },
+    { sky: ["#050a25", "#0b1440", "#14295a", "#1d3f70"], sun: "#eaf0ff", far: "#0f2a55", mid: "#0a1f45", near: "#050f2a", foam: "#9fb8e8", stars: true },
+    { sky: ["#0f4c5c", "#1f7a80", "#3fb0a8", "#9fe0c8"], sun: "#fdf2b0", far: "#1b6a6a", mid: "#0f5560", near: "#083b46", foam: "#eafff5" },
+    { sky: ["#3b1f2b", "#8a3a3a", "#d1653f", "#ffa64d", "#ffd27c"], sun: "#fff0b0", far: "#5a2f3a", mid: "#2f2a4a", near: "#171733", foam: "#ffd9a0" },
+    { sky: ["#1a2b52", "#3a5a9a", "#7aa0d8", "#c8def5"], sun: "#ffffff", far: "#2f5a9a", mid: "#1f427a", near: "#12295a", foam: "#f2f8ff" },
+    { sky: ["#10102a", "#2a1a5a", "#5a2a8a", "#9a3aa0"], sun: "#ffe6ff", far: "#3a1f6a", mid: "#231452", near: "#0f0a2e", foam: "#d9a8ff", stars: true },
+];
+const W = 40;
+const H = 30;
+const C = 20;
+/** Escena pixel art N (rejilla 40×30, 800×600). Determinista: la misma N da siempre la misma imagen. */
+export function pixelScene(n) {
+    const seed = Math.abs(Math.floor(n));
+    const p = PALS[seed % PALS.length];
+    const kind = seed % 3; // 0 mar y sol · 1 montañas · 2 solo mar
+    const hz = 15 + (seed % 3);
+    const rnd = (i) => {
+        const x = Math.sin((seed + 1) * 127.1 + i * 311.7) * 43758.5453;
+        return x - Math.floor(x);
+    };
+    const rect = (x, y, w, h, fill) => `<rect x="${x * C}" y="${y * C}" width="${w * C}" height="${h * C}" fill="${fill}"/>`;
+    let s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W * C} ${H * C}" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid slice">`;
+    p.sky.forEach((c, b) => {
+        const y0 = Math.round((b * hz) / p.sky.length);
+        const y1 = Math.round(((b + 1) * hz) / p.sky.length);
+        s += rect(0, y0, W, y1 - y0, c);
+    });
+    if (p.stars)
+        for (let i = 0; i < 46; i++)
+            s += rect(Math.floor(rnd(i) * W), Math.floor(rnd(i + 99) * (hz - 2)), 1, 1, "#ffffff");
+    // sol o luna: un cuadrado con las esquinas comidas
+    const sx = 5 + Math.floor(rnd(1) * 28);
+    const sy = 2 + Math.floor(rnd(2) * 5);
+    s += rect(sx + 1, sy, 3, 5, p.sun) + rect(sx, sy + 1, 5, 3, p.sun);
+    if (kind === 1) {
+        for (let x = 0; x < W; x++) {
+            const h = 2 + Math.round(Math.abs(Math.sin(x * 0.33 + seed)) * 4 + Math.abs(Math.sin(x * 0.11 + seed * 2)) * 4);
+            s += rect(x, hz - h, 1, h + 1, p.far);
+        }
+    }
+    [p.far, p.mid, p.near].forEach((col, l) => {
+        for (let x = 0; x < W; x++) {
+            const y = hz + l * 4 + 1 + Math.round(Math.sin(x * 0.5 + seed + l * 2) * 1.2);
+            s += rect(x, y, 1, H - y, col);
+            if (l === 2 && Math.sin(x * 0.5 + seed + l * 2) > 0.7)
+                s += rect(x, y, 1, 1, p.foam);
+        }
+    });
+    return `${s}</svg>`;
+}
+/** Data URI de la escena N: se puede usar directamente en `<img src>`. */
+export const pixelSceneUri = (n) => `data:image/svg+xml;utf8,${encodeURIComponent(pixelScene(n))}`;
+/** `gen:N` → escena generada; cualquier otra cosa se devuelve tal cual (URL, ruta o data URI). */
+export function resolveImage(src) {
+    const m = /^gen:(\d+)$/.exec(src.trim());
+    return m ? pixelSceneUri(parseInt(m[1], 10)) : src.trim();
+}

package/dist/lib/ui/tokens.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties } from "react";
+/**
+ * Tokens de diseño que consumen todos los componentes de `components/ui/`.
+ * Un tema es solo un objeto de tokens: cambiarlo no toca ningún componente.
+ */
+export type TokenSet = {
+    bg: string;
+    fg: string;
+    mut: string;
+    acc: string;
+    acc2: string;
+    card: string;
+    ln: string;
+    /** radio en px */
+    r: number;
+    font: string;
+};
+/** Tema por defecto del kit: el mismo que fija `:root` en `components/ui/styles/kit.css`. */
+export declare const neutralTokens: TokenSet;
+/** Convierte tokens en variables CSS para el contenedor (`style={tokensToStyle(...)}`). */
+export declare function tokensToStyle(t: TokenSet): CSSProperties;
+/** Lee un token desde el DOM (para canvas): `token(el, "--acc")`. */
+export declare function token(el: Element, name: string, fallback?: string): string;
+/**
+ * Tipografías que ofrece el selector de tokens del catálogo (`/componentes`).
+ * Las que llevan `var(--font-*)` vienen de Google, autoalojadas por `next/font`
+ * en `lib/ui/fonts.ts` (sin petición externa en runtime); las "del sistema" son
+ * el *fallback* sin fuente web, para cuando no hace falta descargar nada. Una
+ * fuente local propia (de marca) se añade igual: `next/font/local` en
+ * `lib/ui/fonts.ts` + una entrada aquí con su `var(--font-...)`.
+ */
+export declare const FONT_PRESETS: {
+    id: string;
+    label: string;
+    stack: string;
+}[];
+export type TokenOverrides = Partial<{
+    bg: string;
+    fg: string;
+    mut: string;
+    acc: string;
+    acc2: string;
+    r: number;
+    font: string;
+}>;
+/** Aplica cambios manuales sobre un tema; card y ln se derivan de fg si este se modifica. */
+export declare function applyOverrides(base: TokenSet, o: TokenOverrides): TokenSet;
+/** Valor válido para `<input type="color">` (solo acepta #rrggbb). */
+export declare const toHex: (c: string, fallback?: string) => string;

package/dist/lib/ui/tokens.js

@@ -0,0 +1,129 @@
+/** Tema por defecto del kit: el mismo que fija `:root` en `components/ui/styles/kit.css`. */
+export const neutralTokens = {
+    bg: "#07080f",
+    fg: "#e8ecf4",
+    mut: "#9aa3b5",
+    acc: "#7cc4ff",
+    acc2: "#c084fc",
+    card: "rgba(255,255,255,0.06)",
+    ln: "rgba(255,255,255,0.16)",
+    r: 14,
+    font: 'var(--font-inter), ui-sans-serif, system-ui, "Segoe UI", sans-serif',
+};
+/** Convierte tokens en variables CSS para el contenedor (`style={tokensToStyle(...)}`). */
+export function tokensToStyle(t) {
+    return {
+        "--bg": t.bg,
+        "--fg": t.fg,
+        "--mut": t.mut,
+        "--acc": t.acc,
+        "--acc2": t.acc2,
+        "--card": t.card,
+        "--ln": t.ln,
+        "--r": `${t.r}px`,
+        fontFamily: t.font,
+        color: t.fg,
+    };
+}
+/** Lee un token desde el DOM (para canvas): `token(el, "--acc")`. */
+export function token(el, name, fallback = "#ffffff") {
+    return getComputedStyle(el).getPropertyValue(name).trim() || fallback;
+}
+/**
+ * Tipografías que ofrece el selector de tokens del catálogo (`/componentes`).
+ * Las que llevan `var(--font-*)` vienen de Google, autoalojadas por `next/font`
+ * en `lib/ui/fonts.ts` (sin petición externa en runtime); las "del sistema" son
+ * el *fallback* sin fuente web, para cuando no hace falta descargar nada. Una
+ * fuente local propia (de marca) se añade igual: `next/font/local` en
+ * `lib/ui/fonts.ts` + una entrada aquí con su `var(--font-...)`.
+ */
+export const FONT_PRESETS = [
+    { id: "sistema", label: "Sans del sistema", stack: 'ui-sans-serif, system-ui, "Segoe UI", sans-serif' },
+    { id: "inter", label: "Sans — Inter", stack: 'var(--font-inter), ui-sans-serif, system-ui, sans-serif' },
+    { id: "manrope", label: "Sans — Manrope", stack: 'var(--font-manrope), ui-sans-serif, system-ui, sans-serif' },
+    { id: "space-grotesk", label: "Display — Space Grotesk", stack: 'var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif' },
+    { id: "syne", label: "Display — Syne", stack: 'var(--font-syne), ui-sans-serif, system-ui, sans-serif' },
+    { id: "fraunces", label: "Serif — Fraunces", stack: 'var(--font-fraunces), Georgia, serif' },
+    { id: "instrument-serif", label: "Serif — Instrument Serif", stack: 'var(--font-instrument-serif), Georgia, serif' },
+    { id: "jetbrains-mono", label: "Mono — JetBrains Mono", stack: 'var(--font-jetbrains-mono), ui-monospace, Consolas, monospace' },
+    { id: "space-mono", label: "Mono — Space Mono", stack: 'var(--font-space-mono), ui-monospace, Consolas, monospace' },
+    { id: "mono-sistema", label: "Monoespaciada del sistema", stack: 'ui-monospace, "Cascadia Code", Consolas, monospace' },
+    // Pixel — las 46 familias de fonts.google.com/?categoryFilters=Appearance:/Theme/Pixel (lib/ui/fonts.ts).
+    { id: "press-start-2p", label: "Pixel — Press Start 2P", stack: 'var(--font-press-start-2p), monospace' },
+    { id: "vt323", label: "Pixel — VT323", stack: 'var(--font-vt323), monospace' },
+    { id: "geist-pixel", label: "Pixel — Geist Pixel", stack: 'var(--font-geist-pixel), monospace' },
+    { id: "jersey-25", label: "Pixel — Jersey 25", stack: 'var(--font-jersey-25), monospace' },
+    { id: "pixelify-sans", label: "Pixel — Pixelify Sans", stack: 'var(--font-pixelify-sans), monospace' },
+    { id: "dotgothic16", label: "Pixel — DotGothic16", stack: 'var(--font-dotgothic16), monospace' },
+    { id: "silkscreen", label: "Pixel — Silkscreen", stack: 'var(--font-silkscreen), monospace' },
+    { id: "bitcount-single", label: "Pixel — Bitcount Single", stack: 'var(--font-bitcount-single), monospace' },
+    { id: "jersey-10", label: "Pixel — Jersey 10", stack: 'var(--font-jersey-10), monospace' },
+    { id: "doto", label: "Pixel — Doto", stack: 'var(--font-doto), monospace' },
+    { id: "tiny5", label: "Pixel — Tiny5", stack: 'var(--font-tiny5), monospace' },
+    { id: "bitcount-prop-single", label: "Pixel — Bitcount Prop Single", stack: 'var(--font-bitcount-prop-single), monospace' },
+    { id: "handjet", label: "Pixel — Handjet", stack: 'var(--font-handjet), monospace' },
+    { id: "bitcount-grid-double", label: "Pixel — Bitcount Grid Double", stack: 'var(--font-bitcount-grid-double), monospace' },
+    { id: "jacquard-12", label: "Pixel — Jacquard 12", stack: 'var(--font-jacquard-12), monospace' },
+    { id: "jersey-20", label: "Pixel — Jersey 20", stack: 'var(--font-jersey-20), monospace' },
+    { id: "jersey-15", label: "Pixel — Jersey 15", stack: 'var(--font-jersey-15), monospace' },
+    { id: "jacquarda-bastarda-9", label: "Pixel — Jacquarda Bastarda 9", stack: 'var(--font-jacquarda-bastarda-9), monospace' },
+    { id: "micro-5", label: "Pixel — Micro 5", stack: 'var(--font-micro-5), monospace' },
+    { id: "bitcount-ink", label: "Pixel — Bitcount Ink", stack: 'var(--font-bitcount-ink), monospace' },
+    { id: "bitcount-prop-single-ink", label: "Pixel — Bitcount Prop Single Ink", stack: 'var(--font-bitcount-prop-single-ink), monospace' },
+    { id: "bitcount-grid-double-ink", label: "Pixel — Bitcount Grid Double Ink", stack: 'var(--font-bitcount-grid-double-ink), monospace' },
+    { id: "bitcount-prop-double-ink", label: "Pixel — Bitcount Prop Double Ink", stack: 'var(--font-bitcount-prop-double-ink), monospace' },
+    { id: "bitcount-grid-single-ink", label: "Pixel — Bitcount Grid Single Ink", stack: 'var(--font-bitcount-grid-single-ink), monospace' },
+    { id: "bitcount-single-ink", label: "Pixel — Bitcount Single Ink", stack: 'var(--font-bitcount-single-ink), monospace' },
+    { id: "jacquard-24", label: "Pixel — Jacquard 24", stack: 'var(--font-jacquard-24), monospace' },
+    { id: "bitcount-grid-single", label: "Pixel — Bitcount Grid Single", stack: 'var(--font-bitcount-grid-single), monospace' },
+    { id: "coral-pixels", label: "Pixel — Coral Pixels", stack: 'var(--font-coral-pixels), monospace' },
+    { id: "bytesized", label: "Pixel — Bytesized", stack: 'var(--font-bytesized), monospace' },
+    { id: "bitcount", label: "Pixel — Bitcount", stack: 'var(--font-bitcount), monospace' },
+    { id: "jacquard-12-charted", label: "Pixel — Jacquard 12 Charted", stack: 'var(--font-jacquard-12-charted), monospace' },
+    { id: "bitcount-prop-double", label: "Pixel — Bitcount Prop Double", stack: 'var(--font-bitcount-prop-double), monospace' },
+    { id: "jacquard-24-charted", label: "Pixel — Jacquard 24 Charted", stack: 'var(--font-jacquard-24-charted), monospace' },
+    { id: "jersey-15-charted", label: "Pixel — Jersey 15 Charted", stack: 'var(--font-jersey-15-charted), monospace' },
+    { id: "micro-5-charted", label: "Pixel — Micro 5 Charted", stack: 'var(--font-micro-5-charted), monospace' },
+    { id: "jersey-10-charted", label: "Pixel — Jersey 10 Charted", stack: 'var(--font-jersey-10-charted), monospace' },
+    { id: "jersey-25-charted", label: "Pixel — Jersey 25 Charted", stack: 'var(--font-jersey-25-charted), monospace' },
+    { id: "jacquarda-bastarda-9-charted", label: "Pixel — Jacquarda Bastarda 9 Charted", stack: 'var(--font-jacquarda-bastarda-9-charted), monospace' },
+    { id: "jersey-20-charted", label: "Pixel — Jersey 20 Charted", stack: 'var(--font-jersey-20-charted), monospace' },
+    { id: "sixtyfour", label: "Pixel — Sixtyfour", stack: 'var(--font-sixtyfour), monospace' },
+    { id: "sixtyfour-convergence", label: "Pixel — Sixtyfour Convergence", stack: 'var(--font-sixtyfour-convergence), monospace' },
+    { id: "workbench", label: "Pixel — Workbench", stack: 'var(--font-workbench), monospace' },
+    { id: "rubik-pixels", label: "Pixel — Rubik Pixels", stack: 'var(--font-rubik-pixels), monospace' },
+    { id: "rubik-iso", label: "Pixel — Rubik Iso", stack: 'var(--font-rubik-iso), monospace' },
+    { id: "mozilla-headline", label: "Pixel — Mozilla Headline", stack: 'var(--font-mozilla-headline), monospace' },
+    { id: "rubik-broken-fax", label: "Pixel — Rubik Broken Fax", stack: 'var(--font-rubik-broken-fax), monospace' },
+];
+const isHex = (c) => /^#[0-9a-f]{6}$/i.test(c);
+const rgba = (hex, a) => {
+    const n = parseInt(hex.slice(1), 16);
+    return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
+};
+/** Aplica cambios manuales sobre un tema; card y ln se derivan de fg si este se modifica. */
+export function applyOverrides(base, o) {
+    const t = { ...base };
+    if (o.bg)
+        t.bg = o.bg;
+    if (o.fg) {
+        t.fg = o.fg;
+        if (isHex(o.fg)) {
+            t.card = rgba(o.fg, 0.07);
+            t.ln = rgba(o.fg, 0.18);
+        }
+    }
+    if (o.mut)
+        t.mut = o.mut;
+    if (o.acc)
+        t.acc = o.acc;
+    if (o.acc2)
+        t.acc2 = o.acc2;
+    if (o.r !== undefined)
+        t.r = o.r;
+    if (o.font)
+        t.font = o.font;
+    return t;
+}
+/** Valor válido para `<input type="color">` (solo acepta #rrggbb). */
+export const toHex = (c, fallback = "#888888") => (isHex(c) ? c : fallback);

package/dist/lib/ui/useTokens.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from "react";
+declare const NAMES: readonly ["--bg", "--fg", "--mut", "--acc", "--acc2", "--card", "--ln", "--r"];
+export type TokenSnapshot = Record<(typeof NAMES)[number], string>;
+/**
+ * Devuelve los tokens de diseño vigentes en el elemento y se actualiza cuando cambian
+ * (p. ej. al elegir otro tema). Sirve a los componentes que pintan en canvas y no pueden
+ * apoyarse en `var(--x)` de CSS: úsalo como dependencia de sus efectos de dibujo.
+ */
+export declare function useTokens(ref: RefObject<Element | null>): TokenSnapshot | null;
+export {};

package/dist/lib/ui/useTokens.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useState } from "react";
+const NAMES = ["--bg", "--fg", "--mut", "--acc", "--acc2", "--card", "--ln", "--r"];
+const read = (el) => {
+    const cs = getComputedStyle(el);
+    return Object.fromEntries(NAMES.map((n) => [n, cs.getPropertyValue(n).trim()]));
+};
+/**
+ * Devuelve los tokens de diseño vigentes en el elemento y se actualiza cuando cambian
+ * (p. ej. al elegir otro tema). Sirve a los componentes que pintan en canvas y no pueden
+ * apoyarse en `var(--x)` de CSS: úsalo como dependencia de sus efectos de dibujo.
+ */
+export function useTokens(ref) {
+    const [tokens, setTokens] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const update = () => {
+            const next = read(el);
+            setTokens((prev) => (prev && NAMES.every((n) => prev[n] === next[n]) ? prev : next));
+        };
+        update();
+        // El tema se aplica con `style` en un ancestro: se observan los ancestros cercanos
+        const mo = new MutationObserver(update);
+        let a = el;
+        for (let i = 0; i < 8 && a; i++, a = a.parentElement)
+            mo.observe(a, { attributes: true, attributeFilter: ["style", "class"] });
+        return () => mo.disconnect();
+    }, [ref]);
+    return tokens;
+}