DIL 1.0

HTML        → lenguaje de documentos web
CSS         → lenguaje de presentación
JavaScript  → lenguaje de comportamiento
DIL         → representación declarativa de
              INTERFAZ + COMPONENTES + LAYOUT + ESTADO + LÓGICA + PROTOTIPO

                         DIL
                          │
            ┌─────────────┴─────────────┐
            │                           │
         DESIGN                      BEHAVIOR
            │                           │
   ┌────────┼─────────┐        ┌────────┼─────────┐
   │        │         │        │        │         │
 Layout   Style   Components  State   Logic     Events
   │        │         │        │        │         │
 Flex     Tokens   Variants   Data   Conditions  Actions
 Grid     Themes   States     Bindings Validation Navigation
 Absolute Type     Slots      Mock    Expressions Animations

                         DIL Document
                              │
          ┌───────────────────┼───────────────────┐
          ▼                   ▼                   ▼
     DIL Editor          DIL Runtime         DIL Compiler
   (diagramador)      (preview/prototipo)   (React / HTML / …)

{ "type": "button", "text": "Save" }

{
  "type": "button",
  "text": "Save",
  "variant": "primary",
  "on": { "click": "save" }
}

{
  "type": "button",
  "text": "Save",
  "variant": "primary",
  "states": { "hover": { "opacity": 0.8 } },
  "transition": { "duration": 150 },
  "on": {
    "click": {
      "if": "form.valid",
      "then": [
        { "set": { "saving": true } },
        { "animate": "loading" },
        { "navigate": "dashboard" }
      ]
    }
  }
}

{
  "dil": "1.0",
  "meta":        { },
  "theme":       "default",
  "breakpoints": { },
  "tokens":      { },
  "themes":      { },
  "styles":      { },
  "assets":      { },
  "components":  { },
  "state":       { },
  "computed":    { },
  "data":        { },
  "actions":     { },
  "animations":  { },
  "pages":       [ ],
  "flows":       [ ],
  "start":       "home",
  "editor":      { }
}

DIL Document
├── Runtime representation   (todo excepto `editor`)
└── Editor metadata          (claves `editor`, en raíz y en nodos)

 ① Parse        JSON → árbol de valores (I-JSON)
 ② Normalize    atajos → forma canónica; asignar ids faltantes
 ③ Link         resolver referencias (componentes, páginas, estilos, assets, acciones, tokens)
 ④ Validate     estructura · semántica · tipos estáticos · lint (§25)
 ⑤ Instantiate  expandir instancias de componentes y repeat
 ⑥ Cascade      elegir el valor ganador por propiedad (§14)
 ⑦ Resolve      token → tema → expresión (§6)
 ⑧ Layout/Render

"icon"               → nodo "icon" del componente directo
"header/title"       → nodo "title" dentro de la instancia "header" (que está dentro del componente)
"$root"              → nodo raíz del componente

Valor crudo elegido por la cascada (§14)
        │
        ▼
 ┌────────────────┐   estático (por tema)
 │ ¿TokenRef?     │ ─► token activo del tema ─► (alias: seguir hasta valor final)
 └────────────────┘
        │ no
        ▼
 ┌────────────────┐   reactivo (state · props · data · viewport · form · …)
 │ ¿Mustache?     │ ─► evaluar expresión ─► valor
 └────────────────┘
        │ no
        ▼
     literal

{
  "tokens": {
    "color": {
      "brand": { "primary": "#4F46E5", "dark": "#3730A3" },
      "text": "#0F172A",
      "link": "$color.brand.primary"
    },
    "space":    { "sm": 8, "md": 16, "lg": 24 },
    "radius":   { "md": 8 },
    "font":     { "base": "Inter" },
    "duration": { "fast": 150 },
    "easing":   { "standard": [0.2, 0, 0, 1] },
    "shadow": {
      "card": { "x": 0, "y": 4, "blur": 16, "spread": 0, "color": "#0F172A1F" }
    },
    "text": {
      "title": { "fontFamily": "$font.base", "fontSize": 28, "fontWeight": 700, "lineHeight": "125%" }
    }
  }
}

{
  "theme": "default",
  "themes": {
    "dark": {
      "extends": "default",
      "tokens": {
        "color": { "text": "#F8FAFC", "surface": "#0B1120" }
      }
    }
  }
}

tokens de T  →  (si T.extends) tokens del tema padre …  →  tokens base ("default")

Page
 └─ body: frame
      ├─ text
      ├─ frame
      │    ├─ image
      │    └─ button
      └─ repeat ─ template: frame

{
  "type": "frame",
  "id": "card",
  "layout": "column",
  "gap": 12,
  "padding": 16,
  "fill": "$color.surface",
  "radius": "$radius.md",
  "children": [ { "type": "text", "text": "Título" } ]
}

{
  "styles": {
    "card": {
      "fill": "$color.surface",
      "radius": "$radius.md",
      "shadow": "$shadow.card",
      "padding": "$space.md"
    },
    "button.primary": {
      "fill": "$color.brand.primary",
      "color": "#FFFFFF",
      "states": { "hover": { "opacity": 0.9 } }
    }
  }
}

{
  "type": "repeat",
  "each": "data.projects",
  "as": "project",
  "index": "i",
  "key": "project.id",
  "sort": { "by": "project.name", "order": "asc" },
  "filter": "project.active",
  "limit": 20,
  "template": { "type": "text", "text": "{{ i + 1 }}. {{ project.name }}" },
  "empty": { "type": "text", "text": "Sin proyectos" }
}

┌───────────────── margin ─────────────────┐
│ ┌────────────── border-box ─────────────┐ │
│ │  border                               │ │
│ │ ┌───────────── padding ─────────────┐ │ │
│ │ │  ┌─────── content (hijos) ──────┐ │ │ │
│ │ │  │                               │ │ │ │
│ │ │  └───────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────┘ │ │
│ └────────────────────────────────────────┘ │
└────────────────────────────────────────────┘

{
  "fill": [
    { "type": "linear", "angle": 135,
      "stops": [ { "at": 0, "color": "#6366F1" }, { "at": 1, "color": "#8B5CF6" } ] }
  ]
}

{ "shadow": [ { "x": 0, "y": 4, "blur": 16, "spread": 0, "color": "#0F172A1F", "inset": false } ] }

{
  "type": "frame", "width": 280, "height": 160,
  "fill": { "type": "solid", "color": "hsl(0 0% 100% / 0.18)" },
  "backdropBlur": 16,
  "border": { "width": 1, "color": "#FFFFFF66" },
  "radius": 16
}

{ "type": "text", "text": "Hola, {{ name }}", "textStyle": "$text.title", "color": "$color.text" }

{
  "tokens": {
    "text": {
      "bodyCompact": {
        "fontFamily": "$font.base",
        "fontSize": 14,
        "fontWeight": 400,
        "lineHeight": "145%",
        "letterSpacing": 0.2
      }
    }
  },
  "pages": [
    {
      "id": "home",
      "body": {
        "type": "frame",
        "children": [
          { "id": "intro", "type": "text", "text": "Descripción", "textStyle": "$text.bodyCompact" }
        ]
      }
    }
  ]
}

{ "type": "input", "name": "email", "bind": "email", "placeholder": "tú@correo.com" }

{
  "validate": [
    { "rule": "required",  "message": "El correo es obligatorio" },
    { "rule": "email",     "message": "Formato de correo inválido" },
    { "rule": "minLength", "value": 6, "message": "Mínimo 6 caracteres" },
    { "rule": "pattern",   "value": "^[^\\s]+
quot;, "message": "Sin espacios" },
    { "rule": "expr",      "expr": "email != confirmEmail", "message": "No coincide" }
  ],
  "validateOn": "blur"
}

{
  "components": {
    "Button": {
      "name": "Button",
      "description": "Botón principal de la app",
      "props": {
        "label": { "type": "string", "default": "Button" },
        "icon":  { "type": "icon" }
      },
      "state": { },
      "events": { "press": { "description": "El usuario activó el botón" } },
      "variants": [
        { "axis": "kind", "default": "primary", "options": {
            "primary": {
              "$root": { "fill": "$color.brand.primary" },
              "label": { "color": "#FFFFFF" }
            },
            "outline": {
              "$root": { "fill": "transparent", "border": "1 solid $color.border" },
              "label": { "color": "$color.text" }
            }
        } },
        { "axis": "size", "default": "md", "options": {
            "sm": { "$root": { "padding": "6 12" },  "label": { "fontSize": 12 } },
            "md": { "$root": { "padding": "10 16" }, "label": { "fontSize": 14 } },
            "lg": { "$root": { "padding": "14 24" }, "label": { "fontSize": 16 } }
        } }
      ],
      "compoundVariants": [
        { "when": { "kind": "outline", "size": "sm" }, "apply": { "$root": { "borderPosition": "inside" } } }
      ],
      "root": {
        "type": "frame", "layout": "row", "justify": "center", "align": "center", "gap": 8,
        "radius": "$radius.md",
        "states": {
          "hover":    { "opacity": 0.9 },
          "pressed":  { "opacity": 0.8, "scaleX": 0.98, "scaleY": 0.98 },
          "disabled": { "opacity": 0.4 }
        },
        "transition": { "duration": 150, "easing": "ease-out" },
        "a11y": { "role": "button", "label": "{{ props.label }}" },
        "on": { "click": { "emit": "press" } },
        "children": [
          { "type": "text", "id": "label", "text": "{{ props.label }}" }
        ]
      }
    }
  }
}

{ "states": { "hover": { "fill": "$color.hover" }, "disabled": { "opacity": 0.4 } } }

hover < focus < focusVisible < selected < checked < pressed < invalid < loading < disabled

{
  "type": "instance",
  "id": "saveBtn",
  "component": "Button",
  "props": { "label": "Guardar" },
  "variants": { "kind": "{{ danger ? 'outline' : 'primary' }}", "size": "lg" },
  "overrides": { "label": { "fontWeight": 700 }, "$root": { "states": { "hover": { "opacity": 1 } } } },
  "slots": { },
  "width": "fill",
  "on": { "press": "save" }
}

{
  "components": {
    "Card": {
      "root": { "type": "frame", "layout": "column", "gap": 12, "padding": 16, "children": [
        { "type": "slot", "name": "header", "children": [ { "type": "text", "text": "Sin título" } ] },
        { "type": "slot", "name": "default" }
      ] }
    }
  }
}

{ "type": "instance", "component": "Card", "slots": {
    "header":  { "type": "text", "text": "Resumen", "textStyle": "$text.title" },
    "default": [ { "type": "text", "text": "Contenido…" } ]
} }

 prioridad ↑

 L6  Runtime volátil         animaciones y transiciones en curso (§20)
 L5  Override de instancia   instance.overrides[...] · propiedades de la instancia
 L4  Estado                  node.states (orden de §13.4) · within
 L3  Variante                variants[eje] en orden · compoundVariants
 L2  Responsive              node.responsive (breakpoints ascendentes)
 L1  Base del nodo           styles (en orden) → propiedades propias del nodo
 L0  Herencia                propiedades heredables del padre (§11.4)

Componente Button:  root.fill = $color.primary          (L1)
Variante kind=outline:  root.fill = transparent         (L3)
Estado hover:           root.fill = $color.hover        (L4)
Instancia overrides:    $root.fill = #FF0000            (L5)

Estado normal   → #FF0000     (L5 vence a L3 y L1)
Estado hover    → #FF0000     (L5 vence a L4)   ← usar overrides.$root.states.hover para cambiarlo

{ "breakpoints": { "compact": 0, "medium": 600, "expanded": 1024 } }

{
  "type": "frame",
  "layout": "grid",
  "columns": 1,
  "gap": 16,
  "responsive": {
    "medium":   { "columns": 2 },
    "expanded": { "columns": 3, "gap": 24 }
  }
}

{
  "state": {
    "count":  0,
    "email":  { "type": "string",  "default": "" },
    "mode":   { "type": "string",  "default": "list", "enum": ["list", "grid"] },
    "todos":  { "type": "array",   "default": "{{ data.todos }}" }
  },
  "computed": {
    "remaining": "count(filter(todos, 'done', false))"
  }
}

locales de repeat → props del componente (props.x) y estado del componente
→ estado/params de página → estado de documento → integradas

Path  := Name ( "." Name | "[" Integer "]" )*

{
  "data": {
    "projects": [
      { "id": 1, "name": "Alfa", "progress": 0.72, "active": true },
      { "id": 2, "name": "Beta", "progress": 0.35, "active": false }
    ],
    "currentUser": { "name": "Ana", "email": "ana@ejemplo.com" }
  }
}

expr           = ternary ;
ternary        = nullish , [ "?" , expr , ":" , expr ] ;
nullish        = or , { "??" , or } ;
or             = and , { "||" , and } ;
and            = equality , { "&&" , equality } ;
equality       = relational , { ( "==" | "!=" ) , relational } ;
relational     = additive , { ( "<" | "<=" | ">" | ">=" ) , additive } ;
additive       = multiplicative , { ( "+" | "-" ) , multiplicative } ;
multiplicative = unary , { ( "*" | "/" | "%" ) , unary } ;
unary          = ( "!" | "-" ) , unary | postfix ;
postfix        = primary , { "." , IDENT | "?." , IDENT | "[" , expr , "]" } ;
primary        = NUMBER | STRING | "true" | "false" | "null"
               | call | IDENT | TOKEN
               | "(" , expr , ")"
               | "[" , [ expr , { "," , expr } ] , "]"
               | "{" , [ pair , { "," , pair } ] , "}" ;
call           = IDENT , "(" , [ expr , { "," , expr } ] , ")" ;
pair           = ( IDENT | STRING ) , ":" , expr ;

IDENT   = [A-Za-z_][A-Za-z0-9_]* ;
TOKEN   = "
quot; , IDENT , { "." , IDENT } ;       (* referencia a token dentro de expresiones *)
NUMBER  = digits , [ "." , digits ] , [ ("e"|"E") , ["+"|"-"] , digits ] ;
STRING  = "'" , { char } , "'" | '"' , { char } , '"' ;   (* escapes: \\ \' \" \n \t \uXXXX *)

ActionSpec := String            -- referencia a actions[<id>]  (≡ { "call": id })
            | Action
            | ( String | Action )[]    -- secuencia, ejecución en orden

{ "set": { "count": "{{ count + 1 }}" } }

{ "on": { "click": { "set": { "count": "{{ count + 1 }}" } } } }

{
  "on": { "click": [
    { "validate": "form" },
    { "if": "form.valid",
      "then": [ { "set": { "saving": true } }, { "wait": 800 }, { "navigate": "dashboard" } ],
      "else": { "animate": "shake" } }
  ] }
}

{ "actions": {
    "addTodo": [
      { "if": "newTodo != ''", "then": [
        { "append": { "to": "todos", "value": { "id": "{{ count(todos) + 1 }}", "text": "{{ newTodo }}", "done": false } } },
        { "set": { "newTodo": "" } }
      ] }
    ]
} }

{
  "id": "login",
  "name": "Login",
  "kind": "screen",
  "frame": { "width": 390, "height": 844, "device": "iphone-15", "background": "$color.bg" },
  "params": { "from": { "type": "string", "default": "" } },
  "state": { },
  "computed": { },
  "on": { "load": { "set": { "email": "" } } },
  "body": { "type": "frame", "width": "fill", "height": "fill", "children": [ ] }
}

start → [home] ──navigate→ [home, detail] ──navigate(replace)→ [home, detail2] ──back→ [home]

{ "navigate": {
    "to": "detail",
    "params": { "id": "{{ project.id }}" },
    "replace": false,
    "transition": { "type": "push", "direction": "left", "duration": 250, "easing": "ease-out" }
} }

{
  "id": "confirmDelete",
  "kind": "overlay",
  "overlay": {
    "presentation": "modal",
    "backdrop": "#0F172A99",
    "dismissOnBackdrop": true,
    "dismissOnEscape": true
  },
  "body": { "type": "frame", "layout": "column", "gap": 12, "padding": 24,
            "fill": "$color.surface", "radius": 16, "children": [ ] }
}

{
  "flows": [
    { "id": "onboarding", "name": "Onboarding", "start": "welcome",
      "description": "Primer uso hasta el dashboard",
      "state": { "email": "demo@ejemplo.com" },
      "frame": { "device": "iphone-15" } }
  ]
}

{ "transition": { "properties": ["opacity", "fill", "scaleX", "scaleY"], "duration": 150, "delay": 0, "easing": "ease-out" } }

{
  "animations": {
    "shake": {
      "duration": 300,
      "easing": "ease-in-out",
      "iterations": 1,
      "direction": "normal",
      "fill": "none",
      "keyframes": [
        { "at": 0,    "set": { "translateX": 0 } },
        { "at": 0.25, "set": { "translateX": -8 } },
        { "at": 0.5,  "set": { "translateX": 8 } },
        { "at": 0.75, "set": { "translateX": -4 } },
        { "at": 1,    "set": { "translateX": 0 } }
      ]
    },
    "pulse": {
      "duration": 1200, "iterations": "infinite", "direction": "alternate",
      "keyframes": [ { "at": 0, "set": { "opacity": 1 } }, { "at": 1, "set": { "opacity": 0.5 } } ]
    }
  }
}

{
  "assets": {
    "logo":   { "kind": "svg",   "uri": "assets/logo.svg", "width": 120, "height": 32, "alt": "Acme" },
    "hero":   { "kind": "image", "uri": "https://cdn.ejemplo.com/hero.jpg", "mime": "image/jpeg", "width": 1600, "height": 900, "hash": "sha256-…" },
    "avatar": { "kind": "image", "uri": "data:image/png;base64,iVBOR…", "alt": "Avatar" },
    "inter-regular": { "kind": "font", "family": "Inter", "weight": 400, "style": "normal", "uri": "fonts/Inter-Regular.woff2" }
  }
}

 ┌────────────┐   ┌──────────────┐   ┌──────────────┐   ┌────────────┐
 │ Cargar doc │ → │ Inicializar  │ → │ Montar start │ → │  Bucle de  │
 │ (§3.3 ①-④) │   │ estado docs  │   │ page + load  │   │  eventos   │
 └────────────┘   └──────────────┘   └──────────────┘   └─────┬──────┘
                                                              │
        evento (usuario/timer/sistema) ──► acciones ──► estado ──► reevaluar ──► render

{
  "code": "DIL-E005",
  "severity": "error",
  "message": "Referencia no resuelta: la página 'dashbord' no existe.",
  "path": "/pages/0/body/children/2/on/click/0/navigate",
  "nodeId": "submitBtn",
  "hint": "¿Quisiste decir 'dashboard'?"
}

/* ============================ PRIMITIVOS ============================ */
export type Id = string;                       // /^[A-Za-z_][A-Za-z0-9_-]{0,63}$/
export type Name = string;                     // /^[A-Za-z_][A-Za-z0-9_]{0,63}$/
export type TokenRef = `${string}`;           // /^\$[A-Za-z_][\w-]*(\.[A-Za-z_][\w-]*)+$/
export type Mustache = `${string}{{${string}}}${string}`;
export type Expr = string;                     // sin llaves
export type Dynamic<T> = T | TokenRef | Mustache;

export type Length = number;                   // dp
export type Percentage = `${number}%`;
export type Fraction = number;                 // 0..1
export type Angle = number;                    // grados
export type Duration = number;                 // ms
export type Color = string;                    // hex | rgb() | hsl() | "transparent"
export type Size = Length | Percentage | 'auto' | 'fit' | 'fill';
export type Spacing = number | string | [number] | [number, number] | [number, number, number] | [number, number, number, number];
export type Anchor =
  | 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right'
  | 'bottom-left' | 'bottom' | 'bottom-right';
export type AssetRef = Id | Mustache;
export type Easing =
  | 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
  | [number, number, number, number]
  | { type: 'spring'; stiffness?: number; damping?: number; mass?: number };

/* ============================ DOCUMENTO ============================= */
export interface DilDocument {
  dil: '1.0';
  meta?: Meta;
  theme?: string;
  breakpoints?: Record<Id, number>;
  tokens?: Tokens;
  themes?: Record<Id, Theme>;
  styles?: Record<Id, StylePatch>;
  assets?: Record<Id, Asset>;
  components?: Record<Id, Component>;
  state?: Record<Name, StateDecl | string | number | boolean>;
  computed?: Record<Name, Expr>;
  data?: Record<Name, unknown>;
  actions?: Record<Id, ActionSpec>;
  animations?: Record<Id, Animation>;
  pages: Page[];                               // ≥ 1
  flows?: Flow[];
  start?: Id;
  editor?: EditorMeta;
  [ext: `x-${string}`]: unknown;
}

export interface Meta {
  name?: string; description?: string; author?: string;
  created?: string; modified?: string;          // ISO 8601
  license?: string; tags?: string[];
}

/* ============================== TOKENS ============================== */
export type TokenTree<T> = { [k: string]: T | TokenTree<T> };
export interface Tokens {
  color?: TokenTree<Color | TokenRef>;
  space?: TokenTree<Length | TokenRef>;
  size?: TokenTree<Length | TokenRef>;
  radius?: TokenTree<Length | TokenRef>;
  opacity?: TokenTree<Fraction | TokenRef>;
  duration?: TokenTree<Duration | TokenRef>;
  easing?: TokenTree<Easing | TokenRef>;
  font?: TokenTree<string | TokenRef>;
  text?: TokenTree<TextStyle | TokenRef>;
  shadow?: TokenTree<Shadow | Shadow[] | TokenRef>;
  gradient?: TokenTree<Gradient | TokenRef>;
}
export interface Theme { extends?: string; tokens: Partial<Tokens>; }

/* ============================= ESTILO ============================== */
export interface Stop { at: Fraction; color: Dynamic<Color>; }
export type Gradient =
  | { type: 'linear'; angle?: Angle; stops: Stop[]; opacity?: Fraction }
  | { type: 'radial'; center?: [Fraction, Fraction]; radius?: Fraction; stops: Stop[]; opacity?: Fraction }
  | { type: 'conic';  center?: [Fraction, Fraction]; from?: Angle; stops: Stop[]; opacity?: Fraction };
export type Paint =
  | Dynamic<Color>                                               // atajo solid
  | { type: 'solid'; color: Dynamic<Color>; opacity?: Fraction }
  | Gradient
  | { type: 'image'; src: AssetRef; fit?: 'cover' | 'contain' | 'fill' | 'tile'; opacity?: Fraction };

export interface Shadow {
  x?: number; y?: number; blur?: Length; spread?: number;
  color?: Dynamic<Color>; inset?: boolean;
}
export interface TextStyle {
  fontFamily?: Dynamic<string>; fontSize?: Dynamic<Length>;
  fontWeight?: Dynamic<number | 'normal' | 'bold'>; fontStyle?: 'normal' | 'italic';
  lineHeight?: Dynamic<Length | Percentage | 'auto'>; letterSpacing?: Dynamic<Length | Percentage>;
  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
  decoration?: 'none' | 'underline' | 'strike';
}

/* ======================= PROPIEDADES DE NODO ======================== */
export interface ItemProps {                   // como hijo de un contenedor
  position?: 'flow' | 'absolute';
  x?: Dynamic<number>; left?: Dynamic<number>;
  y?: Dynamic<number>; top?: Dynamic<number>;
  right?: Dynamic<number>; bottom?: Dynamic<number>;
  centerX?: Dynamic<number | true>; centerY?: Dynamic<number | true>;
  zIndex?: number;
  width?: Dynamic<Size>; height?: Dynamic<Size>;
  minWidth?: Dynamic<Length>; maxWidth?: Dynamic<Length>;
  minHeight?: Dynamic<Length>; maxHeight?: Dynamic<Length>;
  aspectRatio?: number;
  grow?: number;
  alignSelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
  col?: number; row?: number; colSpan?: number; rowSpan?: number;
  margin?: Dynamic<Spacing>;
  marginTop?: Dynamic<Length>; marginRight?: Dynamic<Length>;
  marginBottom?: Dynamic<Length>; marginLeft?: Dynamic<Length>;
}
export interface TransformProps {
  rotate?: Dynamic<Angle>; scale?: Dynamic<number>;
  scaleX?: Dynamic<number>; scaleY?: Dynamic<number>;
  translateX?: Dynamic<number>; translateY?: Dynamic<number>;
  origin?: Anchor;
}
export interface ContainerProps {              // frame
  layout?: 'none' | 'absolute' | 'flex' | 'row' | 'column' | 'grid';
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  wrap?: boolean;
  gap?: Dynamic<Spacing>; rowGap?: Dynamic<Length>; columnGap?: Dynamic<Length>;
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
  columns?: number | Track[]; rows?: number | Track[]; flow?: 'row' | 'column';
  padding?: Dynamic<Spacing>;
  paddingTop?: Dynamic<Length>; paddingRight?: Dynamic<Length>;
  paddingBottom?: Dynamic<Length>; paddingLeft?: Dynamic<Length>;
  clip?: boolean; scroll?: 'none' | 'x' | 'y' | 'both';
}
export type Track = number | Percentage | 'auto' | `${number}fr`
  | { min: Length; max: Length | `${number}fr` };
export interface VisualProps {
  fill?: Paint | Paint[];
  border?: number | string | { width?: Spacing; style?: 'solid' | 'dashed' | 'dotted'; color?: Dynamic<Color>; position?: 'inside' | 'center' | 'outside' };
  borderTopWidth?: Dynamic<Length>; borderRightWidth?: Dynamic<Length>;
  borderBottomWidth?: Dynamic<Length>; borderLeftWidth?: Dynamic<Length>;
  borderColor?: Dynamic<Color>; borderStyle?: 'solid' | 'dashed' | 'dotted';
  borderPosition?: 'inside' | 'center' | 'outside';
  radius?: Dynamic<Spacing>;
  radiusTopLeft?: Dynamic<Length>; radiusTopRight?: Dynamic<Length>;
  radiusBottomRight?: Dynamic<Length>; radiusBottomLeft?: Dynamic<Length>;
  shadow?: Dynamic<Shadow | Shadow[]>;
  blur?: Dynamic<Length>; backdropBlur?: Dynamic<Length>;
  blend?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'difference';
  pointerEvents?: 'auto' | 'none';
}
export interface TextProps extends TextStyle {
  textStyle?: TokenRef | Id;
  color?: Dynamic<Color>;
  textAlign?: 'start' | 'center' | 'end' | 'justify';
  verticalAlign?: 'top' | 'middle' | 'bottom';
  whiteSpace?: 'normal' | 'nowrap' | 'pre';
  maxLines?: number; truncate?: 'clip' | 'ellipsis';
  dir?: 'auto' | 'ltr' | 'rtl';
}
export type StateName =
  | 'hover' | 'focus' | 'focusVisible' | 'selected' | 'checked'
  | 'pressed' | 'invalid' | 'loading' | 'disabled';

/** Parche de propiedades: lo que puede aparecer en styles, variantes, estados, responsive y overrides. */
export type StylePatch = Partial<ItemProps & TransformProps & ContainerProps & VisualProps & TextProps> & {
  opacity?: Dynamic<Fraction>; visible?: Dynamic<boolean>;
  disabled?: Dynamic<boolean>; selected?: Dynamic<boolean>; loading?: Dynamic<boolean>;
  states?: Partial<Record<StateName, StatePatch>>;
  responsive?: Record<Id, StylePatch>;
  transition?: Transition;
  a11y?: A11y;
};
export type StatePatch = StylePatch & { within?: OverrideMap };
export type OverrideMap = Record<string /* "$root" | id | "a/b" */, StylePatch>;

export interface Transition {
  properties?: string[] | 'all';
  duration?: Dynamic<Duration>; delay?: Dynamic<Duration>; easing?: Dynamic<Easing>;
}

/* =============================== NODOS ============================== */
interface NodeBase extends ItemProps, TransformProps {
  id?: Id; name?: string;
  visible?: Dynamic<boolean>; opacity?: Dynamic<Fraction>;
  disabled?: Dynamic<boolean>; selected?: Dynamic<boolean>; loading?: Dynamic<boolean>;
  style?: Id | Id[];
  states?: Partial<Record<StateName, StatePatch>>;
  responsive?: Record<Id, StylePatch>;
  transition?: Transition;
  animation?: Id | { ref: Id; trigger?: 'load' | 'visible' | 'hover'; loop?: boolean };
  on?: Partial<Record<EventName, ActionSpec>>;
  a11y?: A11y;
  editor?: EditorMeta;
  [ext: `x-${string}`]: unknown;
}
export interface FrameNode extends NodeBase, ContainerProps, VisualProps, TextProps {
  type: 'frame'; children?: Node[];
}
export interface GroupNode extends NodeBase, ContainerProps, VisualProps, TextProps { type: 'group'; children?: Node[]; }
export interface TextNode extends NodeBase, VisualProps, TextProps {
  type: 'text'; text?: Dynamic<string>; runs?: Run[];
}
export interface Run {
  text: string; fontWeight?: number | 'normal' | 'bold'; fontStyle?: 'normal' | 'italic';
  color?: Dynamic<Color>; decoration?: 'none' | 'underline' | 'strike'; link?: ActionSpec;
}
export interface ImageNode extends NodeBase, VisualProps {
  type: 'image'; src: AssetRef; fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'; alt?: Dynamic<string>;
}
export interface IconNode extends NodeBase {
  type: 'icon'; name: AssetRef | string; size?: Dynamic<Length>; color?: Dynamic<Color>;
}
export interface ShapeNode extends NodeBase, VisualProps {
  type: 'shape'; kind: 'rect' | 'ellipse' | 'line' | 'polygon' | 'star' | 'path';
  d?: string; points?: [number, number][]; sides?: number; ratio?: Fraction;
  stroke?: Dynamic<Color>; strokeWidth?: Dynamic<Length>;
  strokeCap?: 'butt' | 'round' | 'square'; strokeJoin?: 'miter' | 'round' | 'bevel'; strokeDash?: Length[];
}

export type ValidationRule =
  | { rule: 'required'; message?: Dynamic<string> }
  | { rule: 'minLength' | 'maxLength' | 'min' | 'max'; value: number; message?: Dynamic<string> }
  | { rule: 'email'; message?: Dynamic<string> }
  | { rule: 'pattern'; value: string; message?: Dynamic<string> }
  | { rule: 'oneOf'; value: unknown[]; message?: Dynamic<string> }
  | { rule: 'expr'; expr: Expr; message?: Dynamic<string> };
interface ControlBase extends NodeBase, ContainerProps, VisualProps, TextProps {
  name?: string; bind?: string; variant?: string;
  validate?: ValidationRule[]; validateOn?: 'change' | 'blur' | 'submit';
}
export interface ButtonNode extends ControlBase {
  type: 'button'; text?: Dynamic<string>; icon?: AssetRef | string;
  iconPosition?: 'start' | 'end'; buttonType?: 'button' | 'submit';
}
export interface InputNode extends ControlBase {
  type: 'input'; inputType?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
  placeholder?: Dynamic<string>; maxLength?: number; readOnly?: Dynamic<boolean>; autofocus?: boolean;
}
export interface TextareaNode extends ControlBase {
  type: 'textarea'; placeholder?: Dynamic<string>; rows?: number; maxLength?: number; readOnly?: Dynamic<boolean>; autofocus?: boolean;
}
export interface CheckboxNode extends ControlBase { type: 'checkbox'; text?: Dynamic<string>; indeterminate?: Dynamic<boolean>; }
export interface RadioNode extends ControlBase { type: 'radio'; text?: Dynamic<string>; value: Dynamic<unknown>; groupName: Name; }
export interface SwitchNode extends ControlBase { type: 'switch'; text?: Dynamic<string>; }
export interface SelectNode extends ControlBase {
  type: 'select'; options: Option[] | Mustache; placeholder?: Dynamic<string>;
}
export interface Option { value: unknown; label: string; disabled?: boolean; }
export interface SliderNode extends ControlBase { type: 'slider'; min?: number; max?: number; step?: number; }

export interface InstanceNode extends NodeBase, StylePatch {
  type: 'instance'; component: Id;
  props?: Record<Name, Dynamic<unknown>>;
  variants?: Record<Name, Dynamic<string>>;
  overrides?: OverrideMap;
  slots?: Record<Id, Node | Node[]>;
  children?: Node[];                             // ≡ slots.default
}
export interface SlotNode extends NodeBase { type: 'slot'; name: Id; children?: Node[]; }
export interface RepeatNode extends NodeBase {
  type: 'repeat'; each: Expr; as?: Name; index?: Name; key?: Expr;
  filter?: Expr; sort?: { by: Expr; order?: 'asc' | 'desc' }; limit?: Expr;
  template: Node; empty?: Node;
}
export type Node =
  | FrameNode | GroupNode | TextNode | ImageNode | IconNode | ShapeNode
  | ButtonNode | InputNode | TextareaNode | CheckboxNode | RadioNode | SwitchNode | SelectNode | SliderNode
  | InstanceNode | SlotNode | RepeatNode;

/* ============================ COMPONENTES =========================== */
export type PropDecl = {
  type: 'string' | 'number' | 'boolean' | 'color' | 'enum' | 'icon' | 'image' | 'array' | 'object' | 'any' | 'action';
  default?: unknown; required?: boolean; options?: unknown[]; description?: string;
};
export interface VariantAxis { axis: Name; default: string; options: Record<string, OverrideMap>; }
export interface CompoundVariant { when: Record<Name, string>; apply: OverrideMap; }
export interface Component {
  name?: string; description?: string;
  props?: Record<Name, PropDecl>;
  state?: Record<Name, StateDecl | string | number | boolean>;
  computed?: Record<Name, Expr>;
  events?: Record<Id, { description?: string; payload?: PropDecl['type'] }>;
  variants?: VariantAxis[];
  compoundVariants?: CompoundVariant[];
  root: Node;
}

/* ============================== ESTADO ============================== */
export interface StateDecl {
  type: 'string' | 'number' | 'boolean' | 'object' | 'array';
  default?: Dynamic<unknown>; enum?: unknown[]; description?: string;
}

/* ============================ ACCIONES ============================== */
export type Path = string;
export type EventName =
  | 'click' | 'doubleClick' | 'longPress' | 'pointerEnter' | 'pointerLeave' | 'pointerDown' | 'pointerUp'
  | 'focus' | 'blur' | 'input' | 'change' | 'submit' | 'keyDown' | 'keyUp' | 'scroll'
  | 'visible' | 'load' | 'unload' | 'resize' | (string & {}); // + eventos de componente
export type PageTransition = {
  type: 'none' | 'fade' | 'slide' | 'push' | 'scale' | 'smart';
  direction?: 'left' | 'right' | 'up' | 'down'; duration?: Duration; easing?: Easing;
};
export type Action = { id?: Id } & (
  | { set: Record<Path, Dynamic<unknown>> }
  | { toggle: Path }
  | { append: { to: Path; value: Dynamic<unknown>; index?: number } }
  | { remove: { from: Path; index?: Dynamic<number> ; where?: Expr; as?: Name } }
  | { if: Expr; then: ActionSpec; else?: ActionSpec }
  | { parallel: Action[] }
  | { wait: Dynamic<Duration> }
  | { call: Id }
  | { navigate: Id | { to: Id; params?: Record<Name, Dynamic<unknown>>; transition?: PageTransition; replace?: boolean } }
  | { back: true | { transition?: PageTransition } }
  | { open: Id | { overlay: Id; anchor?: Id; params?: Record<Name, Dynamic<unknown>> } }
  | { close: true | Id }
  | { animate: Id | { ref: Id; target?: Id; await?: boolean } }
  | { setTheme: Dynamic<string> }
  | { focus: Id }
  | { scrollTo: Id | { target: Id; behavior?: 'auto' | 'smooth'; align?: 'start' | 'center' | 'end' } }
  | { validate: 'form' | Name[] }
  | { reset: 'form' | Path[] }
  | { emit: Id | { event: Id; payload?: Dynamic<unknown> } }
  | { run: Name }
  | { host: { name: Id; payload?: Dynamic<unknown> } }
);
export type ActionSpec = string | Action | Array<string | Action>;

/* ============================ ANIMACIÓN ============================= */
export interface Keyframe { at: Fraction; set: Record<string, unknown>; easing?: Easing; }
export interface Animation {
  duration: Duration; delay?: Duration; easing?: Easing;
  iterations?: number | 'infinite'; direction?: 'normal' | 'reverse' | 'alternate';
  fill?: 'none' | 'forwards'; keyframes: Keyframe[];
}

/* ============================== PÁGINAS ============================= */
export interface PageFrame { width?: number; height?: number; device?: string; background?: Paint; }
export interface OverlayConfig {
  presentation?: 'modal' | 'popover' | 'sheet' | 'drawer' | 'toast';
  backdrop?: Paint | false; dismissOnBackdrop?: boolean; dismissOnEscape?: boolean;
  placement?: Anchor; duration?: Duration;
}
export interface Page {
  id: Id; name?: string; kind?: 'screen' | 'overlay';
  frame?: PageFrame; params?: Record<Name, PropDecl>;
  state?: Record<Name, StateDecl | string | number | boolean>; computed?: Record<Name, Expr>;
  on?: Partial<Record<'load' | 'unload' | 'keyDown' | 'resize', ActionSpec>>;
  overlay?: OverlayConfig;
  body: FrameNode;
  editor?: EditorMeta;
}
export interface Flow {
  id: Id; name?: string; start: Id; description?: string;
  state?: Record<Name, unknown>; frame?: Partial<PageFrame>;
}

/* ============================== VARIOS ============================== */
export type Role =
  | 'button' | 'link' | 'textbox' | 'checkbox' | 'radio' | 'switch' | 'slider' | 'combobox'
  | 'heading' | 'image' | 'list' | 'listitem' | 'navigation' | 'main' | 'region' | 'form'
  | 'dialog' | 'alert' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'menu' | 'menuitem'
  | 'separator' | 'none';
export interface A11y {
  role?: Role; label?: Dynamic<string>; labelledBy?: Id; description?: Dynamic<string>;
  hidden?: Dynamic<boolean>; live?: 'off' | 'polite' | 'assertive'; focusable?: boolean;
  order?: number; level?: 1 | 2 | 3 | 4 | 5 | 6; expanded?: Dynamic<boolean>; keyShortcut?: string;
}
export interface Asset {
  kind: 'image' | 'svg' | 'font'; uri: string; mime?: string;
  width?: number; height?: number; alt?: string; hash?: string;
  family?: string; weight?: number; style?: 'normal' | 'italic';
}
export interface EditorMeta { [key: string]: unknown; }

/* ============================ DIAGNÓSTICOS ========================== */
export interface Diagnostic {
  code: `DIL-${'E' | 'W' | 'R'}${string}`;
  severity: 'error' | 'warning' | 'info';
  message: string; path?: string; nodeId?: string; hint?: string;
}

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://dil-lang.org/schema/1.0/dil.schema.json",
  "title": "DIL 1.0 Document",
  "type": "object",
  "required": ["dil", "pages"],
  "properties": {
    "dil":         { "const": "1.0" },
    "meta":        { "$ref": "#/$defs/Meta" },
    "theme":       { "type": "string" },
    "breakpoints": { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "type": "integer", "minimum": 0 } },
    "tokens":      { "$ref": "#/$defs/Tokens" },
    "themes":      { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/Theme" } },
    "styles":      { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/StylePatch" } },
    "assets":      { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/Asset" } },
    "components":  { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/Component" } },
    "state":       { "$ref": "#/$defs/StateMap" },
    "computed":    { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" },
                     "additionalProperties": { "type": "string" } },
    "data":        { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" } },
    "actions":     { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/ActionSpec" } },
    "animations":  { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                     "additionalProperties": { "$ref": "#/$defs/Animation" } },
    "pages":       { "type": "array", "minItems": 1, "items": { "$ref": "#/$defs/Page" } },
    "flows":       { "type": "array", "items": { "$ref": "#/$defs/Flow" } },
    "start":       { "$ref": "#/$defs/Id" },
    "editor":      { "type": "object" }
  },
  "patternProperties": { "^x-": {} },
  "unevaluatedProperties": false,

  "$defs": {
    "Id":   { "type": "string", "pattern": "^[A-Za-z_][A-Za-z0-9_-]{0,63}
quot; },
    "Name": { "type": "string", "pattern": "^[A-Za-z_][A-Za-z0-9_]{0,63}
quot; },

    "TokenRef":   { "type": "string", "pattern": "^\\$[A-Za-z_][A-Za-z0-9_-]*(\\.[A-Za-z_][A-Za-z0-9_-]*)+
quot; },
    "Mustache":   { "type": "string", "pattern": "\\{\\{[\\s\\S]+?\\}\\}" },
    "Percentage": { "type": "string", "pattern": "^-?\\d+(\\.\\d+)?%
quot; },

    "Color": {
      "type": "string",
      "pattern": "^(#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})|(rgb|rgba|hsl|hsla)\\([^)]*\\)|transparent)
quot;
    },

    "Length":   { "type": "number", "minimum": 0 },
    "Fraction": { "type": "number", "minimum": 0, "maximum": 1 },
    "Duration": { "type": "number", "minimum": 0 },
    "Angle":    { "type": "number" },

    "Dynamic": {
      "description": "Plantilla: T | TokenRef | Mustache. Las propiedades concretas combinan este $ref con su tipo base mediante anyOf.",
      "anyOf": [ { "$ref": "#/$defs/TokenRef" }, { "$ref": "#/$defs/Mustache" } ]
    },

    "DynamicLength":   { "anyOf": [ { "$ref": "#/$defs/Length" },   { "$ref": "#/$defs/Dynamic" } ] },
    "DynamicNumber":   { "anyOf": [ { "type": "number" },            { "$ref": "#/$defs/Dynamic" } ] },
    "DynamicBoolean":  { "anyOf": [ { "type": "boolean" },           { "$ref": "#/$defs/Dynamic" } ] },
    "DynamicString":   { "type": "string" },
    "DynamicColor":    { "anyOf": [ { "$ref": "#/$defs/Color" },     { "$ref": "#/$defs/Dynamic" } ] },
    "DynamicOpacity":  { "anyOf": [ { "$ref": "#/$defs/Fraction" },  { "$ref": "#/$defs/Dynamic" } ] },

    "Size": {
      "anyOf": [
        { "$ref": "#/$defs/Length" },
        { "$ref": "#/$defs/Percentage" },
        { "enum": ["auto", "fit", "fill"] },
        { "$ref": "#/$defs/Dynamic" }
      ]
    },

    "Spacing": {
      "anyOf": [
        { "type": "number", "minimum": 0 },
        { "type": "string", "pattern": "^\\s*\\d+(\\.\\d+)?(\\s+\\d+(\\.\\d+)?){0,3}\\s*
quot; },
        { "type": "array", "minItems": 1, "maxItems": 4, "items": { "type": "number", "minimum": 0 } },
        { "$ref": "#/$defs/Dynamic" }
      ]
    },

    "Easing": {
      "anyOf": [
        { "enum": ["linear", "ease", "ease-in", "ease-out", "ease-in-out"] },
        { "type": "array", "minItems": 4, "maxItems": 4, "items": { "type": "number" } },
        { "type": "object", "required": ["type"],
          "properties": {
            "type": { "const": "spring" },
            "stiffness": { "type": "number", "exclusiveMinimum": 0 },
            "damping":   { "type": "number", "exclusiveMinimum": 0 },
            "mass":      { "type": "number", "exclusiveMinimum": 0 }
          }, "additionalProperties": false },
        { "$ref": "#/$defs/TokenRef" }
      ]
    },

    "Anchor": { "enum": ["top-left","top","top-right","left","center","right","bottom-left","bottom","bottom-right"] },

    "Stop": {
      "type": "object", "required": ["at", "color"],
      "properties": { "at": { "$ref": "#/$defs/Fraction" }, "color": { "$ref": "#/$defs/DynamicColor" } },
      "additionalProperties": false
    },

    "Paint": {
      "anyOf": [
        { "$ref": "#/$defs/DynamicColor" },
        { "type": "object", "required": ["type", "color"],
          "properties": { "type": { "const": "solid" }, "color": { "$ref": "#/$defs/DynamicColor" }, "opacity": { "$ref": "#/$defs/Fraction" } },
          "additionalProperties": false },
        { "type": "object", "required": ["type", "stops"],
          "properties": { "type": { "enum": ["linear", "radial", "conic"] },
            "angle": { "$ref": "#/$defs/Angle" }, "from": { "$ref": "#/$defs/Angle" },
            "center": { "type": "array", "minItems": 2, "maxItems": 2, "items": { "$ref": "#/$defs/Fraction" } },
            "radius": { "$ref": "#/$defs/Fraction" }, "opacity": { "$ref": "#/$defs/Fraction" },
            "stops": { "type": "array", "minItems": 2, "items": { "$ref": "#/$defs/Stop" } } },
          "additionalProperties": false },
        { "type": "object", "required": ["type", "src"],
          "properties": { "type": { "const": "image" }, "src": { "type": "string" },
            "fit": { "enum": ["cover", "contain", "fill", "tile"] }, "opacity": { "$ref": "#/$defs/Fraction" } },
          "additionalProperties": false }
      ]
    },

    "Shadow": {
      "type": "object",
      "properties": {
        "x": { "type": "number" }, "y": { "type": "number" },
        "blur": { "$ref": "#/$defs/Length" }, "spread": { "type": "number" },
        "color": { "$ref": "#/$defs/DynamicColor" }, "inset": { "type": "boolean" }
      },
      "additionalProperties": false
    },

    "Transition": {
      "type": "object",
      "properties": {
        "properties": { "anyOf": [ { "const": "all" }, { "type": "array", "items": { "type": "string" } } ] },
        "duration": { "anyOf": [ { "$ref": "#/$defs/Duration" }, { "$ref": "#/$defs/Dynamic" } ] },
        "delay":    { "anyOf": [ { "$ref": "#/$defs/Duration" }, { "$ref": "#/$defs/Dynamic" } ] },
        "easing":   { "$ref": "#/$defs/Easing" }
      },
      "additionalProperties": false
    },

    "StateName": { "enum": ["hover","focus","focusVisible","selected","checked","pressed","invalid","loading","disabled"] },

    "StylePatch": {
      "type": "object",
      "description": "Parche de propiedades (visual, layout, texto, ítem, transformación). Lista completa: Apéndice A.",
      "properties": {
        "states":     { "type": "object", "propertyNames": { "$ref": "#/$defs/StateName" },
                        "additionalProperties": { "$ref": "#/$defs/StylePatch" } },
        "responsive": { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" },
                        "additionalProperties": { "$ref": "#/$defs/StylePatch" } },
        "transition": { "$ref": "#/$defs/Transition" }
      },
      "not": { "anyOf": [ { "required": ["id"] }, { "required": ["type"] }, { "required": ["children"] } ] }
    },

    "OverrideMap": { "type": "object", "additionalProperties": { "$ref": "#/$defs/StylePatch" } },

    "StateDecl": {
      "anyOf": [
        { "type": ["string", "number", "boolean"] },
        { "type": "object", "required": ["type"],
          "properties": {
            "type": { "enum": ["string", "number", "boolean", "object", "array"] },
            "default": {}, "enum": { "type": "array" }, "description": { "type": "string" } },
          "additionalProperties": false }
      ]
    },
    "StateMap": { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" },
                  "additionalProperties": { "$ref": "#/$defs/StateDecl" } },

    "Action": {
      "type": "object",
      "minProperties": 1,
      "oneOf": [
        { "required": ["set"] },       { "required": ["toggle"] },    { "required": ["append"] },
        { "required": ["remove"] },    { "required": ["if"] },        { "required": ["parallel"] },
        { "required": ["wait"] },      { "required": ["call"] },      { "required": ["navigate"] },
        { "required": ["back"] },      { "required": ["open"] },      { "required": ["close"] },
        { "required": ["animate"] },   { "required": ["setTheme"] },  { "required": ["focus"] },
        { "required": ["scrollTo"] },  { "required": ["validate"] },  { "required": ["reset"] },
        { "required": ["emit"] },      { "required": ["run"] },       { "required": ["host"] }
      ],
      "properties": {
        "id":   { "$ref": "#/$defs/Id" },
        "set":  { "type": "object", "minProperties": 1 },
        "toggle": { "type": "string" },
        "if":   { "type": "string" },
        "then": { "$ref": "#/$defs/ActionSpec" },
        "else": { "$ref": "#/$defs/ActionSpec" },
        "wait": { "anyOf": [ { "$ref": "#/$defs/Duration" }, { "$ref": "#/$defs/Dynamic" } ] },
        "call": { "$ref": "#/$defs/Id" },
        "navigate": { "anyOf": [ { "$ref": "#/$defs/Id" }, { "type": "object", "required": ["to"] } ] },
        "back": {}, "open": {}, "close": {}, "animate": {}, "append": {}, "remove": {},
        "parallel": { "type": "array", "items": { "$ref": "#/$defs/Action" } },
        "setTheme": {}, "focus": {}, "scrollTo": {}, "validate": {}, "reset": {},
        "emit": {}, "run": {}, "host": {}
      },
      "dependentRequired": { "then": ["if"], "else": ["if"] },
      "additionalProperties": false
    },
    "ActionSpec": {
      "anyOf": [
        { "$ref": "#/$defs/Id" },
        { "$ref": "#/$defs/Action" },
        { "type": "array", "items": { "anyOf": [ { "$ref": "#/$defs/Id" }, { "$ref": "#/$defs/Action" } ] } }
      ]
    },

    "NodeCommon": {
      "type": "object",
      "properties": {
        "id": { "$ref": "#/$defs/Id" },
        "name": { "type": "string" },
        "visible":  { "$ref": "#/$defs/DynamicBoolean" },
        "opacity":  { "$ref": "#/$defs/DynamicOpacity" },
        "backdropBlur": { "$ref": "#/$defs/DynamicLength" },
        "disabled": { "$ref": "#/$defs/DynamicBoolean" },
        "selected": { "$ref": "#/$defs/DynamicBoolean" },
        "loading":  { "$ref": "#/$defs/DynamicBoolean" },
        "style": { "anyOf": [ { "$ref": "#/$defs/Id" }, { "type": "array", "items": { "$ref": "#/$defs/Id" } } ] },
        "position": { "enum": ["flow", "absolute"] },
        "x": { "$ref": "#/$defs/DynamicNumber" },  "y": { "$ref": "#/$defs/DynamicNumber" },
        "left": { "$ref": "#/$defs/DynamicNumber" }, "top": { "$ref": "#/$defs/DynamicNumber" },
        "right": { "$ref": "#/$defs/DynamicNumber" }, "bottom": { "$ref": "#/$defs/DynamicNumber" },
        "width": { "$ref": "#/$defs/Size" }, "height": { "$ref": "#/$defs/Size" },
        "minWidth": { "$ref": "#/$defs/DynamicLength" }, "maxWidth": { "$ref": "#/$defs/DynamicLength" },
        "minHeight": { "$ref": "#/$defs/DynamicLength" }, "maxHeight": { "$ref": "#/$defs/DynamicLength" },
        "grow": { "type": "number", "minimum": 0 },
        "margin": { "$ref": "#/$defs/Spacing" },
        "states":     { "$ref": "#/$defs/StylePatch/properties/states" },
        "responsive": { "$ref": "#/$defs/StylePatch/properties/responsive" },
        "transition": { "$ref": "#/$defs/Transition" },
        "on":   { "type": "object", "additionalProperties": { "$ref": "#/$defs/ActionSpec" } },
        "a11y": { "type": "object" },
        "editor": { "type": "object" }
      },
      "patternProperties": { "^x-": {} }
    },

    "Node": {
      "type": "object",
      "required": ["type"],
      "properties": {
        "type": { "enum": ["frame","group","text","image","icon","shape","button","input","textarea",
                           "checkbox","radio","switch","select","slider","instance","slot","repeat"] }
      },
      "allOf": [
        { "$ref": "#/$defs/NodeCommon" },

        { "if":   { "properties": { "type": { "enum": ["frame", "group"] } } },
          "then": { "properties": {
              "layout": { "enum": ["none","absolute","flex","row","column","grid"] },
              "direction": { "enum": ["row","column","row-reverse","column-reverse"] },
              "wrap": { "type": "boolean" },
              "gap": { "$ref": "#/$defs/Spacing" },
              "justify": { "enum": ["start","center","end","between","around","evenly","stretch"] },
              "align":   { "enum": ["start","center","end","stretch","baseline"] },
              "padding": { "$ref": "#/$defs/Spacing" },
              "fill": { "anyOf": [ { "$ref": "#/$defs/Paint" }, { "type": "array", "items": { "$ref": "#/$defs/Paint" } } ] },
              "radius": { "$ref": "#/$defs/Spacing" },
              "shadow": { "anyOf": [ { "$ref": "#/$defs/Shadow" }, { "type": "array", "items": { "$ref": "#/$defs/Shadow" } }, { "$ref": "#/$defs/Dynamic" } ] },
              "clip": { "type": "boolean" },
              "scroll": { "enum": ["none","x","y","both"] },
              "children": { "type": "array", "items": { "$ref": "#/$defs/Node" } }
          } } },

        { "if":   { "properties": { "type": { "const": "text" } } },
          "then": { "properties": {
              "text": { "type": "string" },
              "runs": { "type": "array", "items": { "type": "object", "required": ["text"] } },
              "fontSize": { "$ref": "#/$defs/DynamicLength" },
              "fontWeight": { "anyOf": [ { "type": "integer", "minimum": 100, "maximum": 900 }, { "enum": ["normal","bold"] }, { "$ref": "#/$defs/Dynamic" } ] },
              "color": { "$ref": "#/$defs/DynamicColor" },
              "textAlign": { "enum": ["start","center","end","justify"] }
          },
          "not": { "required": ["text", "runs"] } } },

        { "if":   { "properties": { "type": { "const": "button" } } },
          "then": { "properties": {
              "text": { "type": "string" }, "variant": { "type": "string" },
              "buttonType": { "enum": ["button", "submit"] },
              "icon": { "type": "string" }, "iconPosition": { "enum": ["start", "end"] },
              "bind": { "type": "string" }
          } } },

        { "if":   { "properties": { "type": { "const": "input" } } },
          "then": { "properties": {
              "name": { "$ref": "#/$defs/Name" }, "bind": { "type": "string" },
              "inputType": { "enum": ["text","email","password","number","search","tel","url"] },
              "placeholder": { "type": "string" },
              "validate": { "type": "array", "items": { "type": "object", "required": ["rule"],
                  "properties": { "rule": { "enum": ["required","minLength","maxLength","min","max","email","pattern","oneOf","expr"] } } } },
              "validateOn": { "enum": ["change", "blur", "submit"] }
          } } },

        { "if":   { "properties": { "type": { "const": "instance" } } },
          "then": { "required": ["component"],
                    "properties": {
                      "component": { "$ref": "#/$defs/Id" },
                      "props": { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" } },
                      "variants": { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" } },
                      "overrides": { "$ref": "#/$defs/OverrideMap" },
                      "slots": { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" } }
                    } } },

        { "if":   { "properties": { "type": { "const": "repeat" } } },
          "then": { "required": ["each", "template"],
                    "properties": {
                      "each": { "type": "string" }, "as": { "$ref": "#/$defs/Name" }, "index": { "$ref": "#/$defs/Name" },
                      "key": { "type": "string" }, "filter": { "type": "string" }, "limit": { "type": "string" },
                      "template": { "$ref": "#/$defs/Node" }, "empty": { "$ref": "#/$defs/Node" }
                    } } },

        { "if":   { "properties": { "type": { "const": "slot" } } },
          "then": { "required": ["name"], "properties": { "name": { "$ref": "#/$defs/Id" } } } },

        { "if":   { "properties": { "type": { "const": "shape" } } },
          "then": { "required": ["kind"],
                    "properties": { "kind": { "enum": ["rect","ellipse","line","polygon","star","path"] } } } }
      ]
    },

    "Page": {
      "type": "object",
      "required": ["id", "body"],
      "properties": {
        "id": { "$ref": "#/$defs/Id" }, "name": { "type": "string" },
        "kind": { "enum": ["screen", "overlay"] },
        "frame": { "type": "object" },
        "params": { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" } },
        "state": { "$ref": "#/$defs/StateMap" },
        "computed": { "type": "object" },
        "on": { "type": "object", "propertyNames": { "enum": ["load","unload","keyDown","resize"] },
                "additionalProperties": { "$ref": "#/$defs/ActionSpec" } },
        "overlay": { "type": "object" },
        "body": { "allOf": [ { "$ref": "#/$defs/Node" }, { "properties": { "type": { "const": "frame" } } } ] },
        "editor": { "type": "object" }
      },
      "if": { "properties": { "kind": { "const": "overlay" } }, "required": ["kind"] },
      "then": { "required": ["overlay"] },
      "unevaluatedProperties": false
    },

    "Component": {
      "type": "object",
      "required": ["root"],
      "properties": {
        "name": { "type": "string" }, "description": { "type": "string" },
        "props": { "type": "object", "propertyNames": { "$ref": "#/$defs/Name" } },
        "state": { "$ref": "#/$defs/StateMap" },
        "computed": { "type": "object" },
        "events": { "type": "object", "propertyNames": { "$ref": "#/$defs/Id" } },
        "variants": { "type": "array", "items": {
          "type": "object", "required": ["axis", "default", "options"],
          "properties": { "axis": { "$ref": "#/$defs/Name" }, "default": { "type": "string" },
                          "options": { "type": "object", "additionalProperties": { "$ref": "#/$defs/OverrideMap" } } },
          "additionalProperties": false } },
        "compoundVariants": { "type": "array", "items": {
          "type": "object", "required": ["when", "apply"],
          "properties": { "when": { "type": "object" }, "apply": { "$ref": "#/$defs/OverrideMap" } } } },
        "root": { "$ref": "#/$defs/Node" }
      },
      "unevaluatedProperties": false
    },

    "Animation": {
      "type": "object", "required": ["duration", "keyframes"],
      "properties": {
        "duration": { "$ref": "#/$defs/Duration" }, "delay": { "$ref": "#/$defs/Duration" },
        "easing": { "$ref": "#/$defs/Easing" },
        "iterations": { "anyOf": [ { "type": "number", "exclusiveMinimum": 0 }, { "const": "infinite" } ] },
        "direction": { "enum": ["normal", "reverse", "alternate"] },
        "fill": { "enum": ["none", "forwards"] },
        "keyframes": { "type": "array", "minItems": 2, "items": {
          "type": "object", "required": ["at", "set"],
          "properties": { "at": { "$ref": "#/$defs/Fraction" }, "set": { "type": "object" }, "easing": { "$ref": "#/$defs/Easing" } },
          "additionalProperties": false } }
      },
      "additionalProperties": false
    },

    "Flow": {
      "type": "object", "required": ["id", "start"],
      "properties": { "id": { "$ref": "#/$defs/Id" }, "name": { "type": "string" }, "start": { "$ref": "#/$defs/Id" },
                      "description": { "type": "string" }, "state": { "type": "object" }, "frame": { "type": "object" } },
      "additionalProperties": false
    },

    "Asset": {
      "type": "object", "required": ["kind", "uri"],
      "properties": {
        "kind": { "enum": ["image", "svg", "font"] },
        "uri":  { "type": "string", "pattern": "^(?!(?:[a-zA-Z][a-zA-Z0-9+.-]*:))|^https:|^data:(image|font)/" },
        "mime": { "type": "string" }, "width": { "type": "integer" }, "height": { "type": "integer" },
        "alt": { "type": "string" }, "hash": { "type": "string", "pattern": "^sha256-" },
        "family": { "type": "string" }, "weight": { "type": "integer", "minimum": 100, "maximum": 900 },
        "style": { "enum": ["normal", "italic"] }
      },
      "additionalProperties": false
    },

    "Meta": {
      "type": "object",
      "properties": { "name": { "type": "string" }, "description": { "type": "string" }, "author": { "type": "string" },
                      "created": { "type": "string", "format": "date-time" }, "modified": { "type": "string", "format": "date-time" },
                      "license": { "type": "string" }, "tags": { "type": "array", "items": { "type": "string" } } },
      "additionalProperties": false
    },

    "Tokens": {
      "type": "object",
      "properties": {
        "color": { "type": "object" }, "space": { "type": "object" }, "size": { "type": "object" },
        "radius": { "type": "object" }, "opacity": { "type": "object" }, "duration": { "type": "object" },
        "easing": { "type": "object" }, "font": { "type": "object" }, "text": { "type": "object" },
        "shadow": { "type": "object" }, "gradient": { "type": "object" }
      },
      "additionalProperties": false
    },
    "Theme": {
      "type": "object", "required": ["tokens"],
      "properties": { "extends": { "type": "string" }, "tokens": { "$ref": "#/$defs/Tokens" } },
      "additionalProperties": false
    },

    "Asset_Placeholder_NoOp": { "description": "Reservado; sin efecto." }
  }
}

{
  "dil": "1.0",
  "pages": [
    { "id": "home", "body": { "type": "frame", "layout": "column", "gap": 16, "padding": 24,
        "children": [
          { "type": "text", "text": "Hello World" },
          { "type": "button", "text": "Continue" }
        ] } }
  ]
}

{
  "dil": "1.0",
  "meta": { "name": "Demo Login", "description": "Prototipo de ejemplo de DIL 1.0" },

  "theme": "default",
  "breakpoints": { "compact": 0, "medium": 600, "expanded": 1024 },

  "tokens": {
    "color": {
      "bg": "#F8FAFC", "surface": "#FFFFFF", "text": "#0F172A", "muted": "#64748B",
      "border": "#E2E8F0", "danger": "#DC2626",
      "brand": { "primary": "#4F46E5", "onPrimary": "#FFFFFF" }
    },
    "space":  { "sm": 8, "md": 16, "lg": 24, "xl": 32 },
    "radius": { "md": 10, "lg": 16 },
    "font":   { "base": "Inter, system-ui, sans-serif" },
    "shadow": { "card": { "x": 0, "y": 4, "blur": 16, "color": "#0F172A1F" } },
    "text": {
      "title": { "fontFamily": "$font.base", "fontSize": 28, "fontWeight": 700, "lineHeight": "125%" },
      "body":  { "fontFamily": "$font.base", "fontSize": 14, "lineHeight": "150%" }
    }
  },

  "themes": {
    "dark": {
      "extends": "default",
      "tokens": {
        "color": { "bg": "#0B1120", "surface": "#111827", "text": "#F8FAFC", "muted": "#94A3B8", "border": "#1F2937" }
      }
    }
  },

  "styles": {
    "card": { "fill": "$color.surface", "radius": "$radius.lg", "shadow": "$shadow.card", "padding": "$space.lg" },
    "input.default": {
      "fill": "$color.surface", "border": "1 solid $color.border", "radius": "$radius.md",
      "padding": "12 14", "color": "$color.text", "width": "fill",
      "states": { "focus": { "borderColor": "$color.brand.primary" }, "invalid": { "borderColor": "$color.danger" } }
    }
  },

  "state": {
    "email": "",
    "password": "",
    "loading": false,
    "dark": false
  },

  "data": {
    "projects": [
      { "id": 1, "name": "Alfa",  "progress": 0.72, "active": true  },
      { "id": 2, "name": "Beta",  "progress": 0.35, "active": true  },
      { "id": 3, "name": "Gamma", "progress": 1.00, "active": false }
    ]
  },

  "animations": {
    "shake": {
      "duration": 300,
      "keyframes": [
        { "at": 0,    "set": { "translateX": 0 } },
        { "at": 0.25, "set": { "translateX": -8 } },
        { "at": 0.75, "set": { "translateX": 8 } },
        { "at": 1,    "set": { "translateX": 0 } }
      ]
    }
  },

  "components": {
    "Button": {
      "props":  { "label": { "type": "string", "default": "Button" } },
      "events": { "press": { "description": "Activación del botón" } },
      "variants": [
        { "axis": "kind", "default": "primary", "options": {
            "primary": { "$root": { "fill": "$color.brand.primary" }, "label": { "color": "$color.brand.onPrimary" } },
            "outline": { "$root": { "fill": "transparent", "border": "1 solid $color.border" }, "label": { "color": "$color.text" } }
        } }
      ],
      "root": {
        "type": "frame", "layout": "row", "justify": "center", "align": "center",
        "padding": "12 20", "radius": "$radius.md",
        "states": { "hover": { "opacity": 0.92 }, "pressed": { "opacity": 0.8 }, "disabled": { "opacity": 0.5 }, "loading": { "opacity": 0.7 } },
        "transition": { "duration": 150 },
        "a11y": { "role": "button", "label": "{{ props.label }}" },
        "on": { "click": { "emit": "press" } },
        "children": [ { "type": "text", "id": "label", "text": "{{ props.label }}", "fontWeight": 600 } ]
      }
    }
  },

  "start": "login",

  "pages": [
    {
      "id": "login",
      "name": "Login",
      "frame": { "width": 390, "height": 844, "background": "$color.bg" },
      "body": {
        "type": "frame", "id": "loginBody", "width": "fill", "height": "fill",
        "layout": "column", "justify": "center", "align": "stretch", "gap": 16, "padding": "$space.lg",
        "color": "$color.text", "fontFamily": "$font.base",
        "children": [
          { "type": "text", "text": "Bienvenida", "textStyle": "$text.title" },

          { "type": "input", "id": "emailField", "name": "email", "bind": "email", "variant": "default",
            "inputType": "email", "placeholder": "tú@correo.com",
            "validate": [
              { "rule": "required", "message": "El correo es obligatorio" },
              { "rule": "email",    "message": "Formato inválido" }
            ] },
          { "type": "text", "text": "{{ form.email.error }}", "color": "$color.danger", "fontSize": 12,
            "visible": "{{ form.email.error != null }}" },

          { "type": "input", "id": "passField", "name": "password", "bind": "password", "variant": "default",
            "inputType": "password", "placeholder": "Contraseña",
            "validate": [ { "rule": "minLength", "value": 6, "message": "Mínimo 6 caracteres" } ] },
          { "type": "text", "text": "{{ form.password.error }}", "color": "$color.danger", "fontSize": 12,
            "visible": "{{ form.password.error != null }}" },

          { "type": "instance", "id": "submitBtn", "component": "Button",
            "props": { "label": "{{ loading ? 'Entrando…' : 'Entrar' }}" },
            "loading": "{{ loading }}",
            "on": { "press": [
              { "validate": "form" },
              { "if": "form.valid",
                "then": [
                  { "set": { "loading": true } },
                  { "wait": 700 },
                  { "set": { "loading": false } },
                  { "navigate": { "to": "dashboard", "transition": { "type": "push", "direction": "left", "duration": 250 } } }
                ],
                "else": { "animate": "shake" } }
            ] } }
        ]
      }
    },

    {
      "id": "dashboard",
      "name": "Dashboard",
      "frame": { "width": 390, "height": 844, "background": "$color.bg" },
      "body": {
        "type": "frame", "width": "fill", "height": "fill", "layout": "column", "gap": 16, "padding": "$space.lg",
        "color": "$color.text", "fontFamily": "$font.base", "scroll": "y",
        "children": [
          { "type": "frame", "layout": "row", "justify": "between", "align": "center", "width": "fill", "children": [
              { "type": "text", "text": "Hola, {{ email }}", "textStyle": "$text.title", "fontSize": 20 },
              { "type": "switch", "id": "themeSwitch", "bind": "dark", "text": "Oscuro",
                "a11y": { "label": "Cambiar tema" },
                "on": { "change": { "setTheme": "{{ dark ? 'dark' : 'default' }}" } } }
          ] },

          { "type": "frame", "layout": "grid", "columns": 1, "gap": 16, "width": "fill",
            "responsive": { "medium": { "columns": 2 }, "expanded": { "columns": 3 } },
            "children": [
              { "type": "repeat",
                "each": "data.projects", "as": "p", "key": "p.id",
                "filter": "p.active",
                "sort": { "by": "p.name" },
                "template": {
                  "type": "frame", "style": "card", "layout": "column", "gap": 8,
                  "children": [
                    { "type": "text", "text": "{{ p.name }}", "fontWeight": 600, "fontSize": 16 },
                    { "type": "text", "text": "Progreso: {{ formatPercent(p.progress) }}", "color": "$color.muted" },
                    { "type": "frame", "width": "fill", "height": 8, "radius": 4, "fill": "$color.border", "clip": true,
                      "children": [
                        { "type": "frame", "height": 8, "width": "{{ (p.progress * 100) + '%' }}", "fill": "$color.brand.primary" }
                      ] }
                  ]
                },
                "empty": { "type": "text", "text": "Sin proyectos activos", "color": "$color.muted" } }
            ] },

          { "type": "instance", "component": "Button", "props": { "label": "Cerrar sesión" },
            "variants": { "kind": "outline" },
            "on": { "press": [ { "set": { "password": "" } }, { "back": true } ] } }
        ]
      }
    }
  ]
}

{ "type": "frame", "height": 8, "width": "{{ toString(p.progress * 100) + '%' }}", "fill": "$color.brand.primary" }

{
  "type": "frame", "width": 320, "height": 200, "layout": "none", "fill": "#FFFFFF", "radius": 12, "clip": true,
  "children": [
    { "type": "image", "src": "hero", "x": 0, "y": 0, "right": 0, "height": 120, "fit": "cover", "alt": "Portada" },
    { "type": "text", "text": "Título", "x": 16, "y": 136, "fontSize": 18, "fontWeight": 700 },
    { "type": "button", "text": "Ver", "right": 16, "bottom": 16, "variant": "primary" }
  ]
}