MSX — MidStroke eXchange

@CONFIG( version -> "1.0.0" )
@QUICKFUNCS(
  ~shape<object>(type, x, y, w, h, color) {
    return {
      type = type
      x = x  y = y  width = w  height = h
      style = { fill = color, stroke = #ffffff, stroke_width = 1.5, opacity = 1.0 }
    }
  }
)
@DATA(
  scene = { width = 600, height = 400, background = #1a1a2e }
  elements::
    shape("rect",  20,  20, 160, 120, #e94560)
    shape("rect", 200,  20, 160, 120, #4a9eff)
    shape("rect", 400,  20, 160, 120, #22c55e)
    shape("rect",  20, 180, 160, 120, #f5a623)
    shape("rect", 200, 180, 160, 120, #a78bfa)
    shape("rect", 400, 180, 160, 120, #533483)
    { type = "circle", cx = 300, cy = 300, r = 60,
      style = { fill = #0f3460, stroke = #4a9eff, stroke_width = 3.0, opacity = 0.9 } }
    { type = "text", x = 300, y = 390, content = "MSX Basic Shapes",
      style = { fill = #ffffff, font_size = 14, text_anchor = "middle",
                stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 600, height = 400, background = #ffffff }
  defs::
    { type = "linear_gradient", id = "sunset",
      x1 = 0.0, y1 = 0.0, x2 = 1.0, y2 = 0.0,
      stops = [
        { offset = 0.0, color = #f7971e, opacity = 1.0 },
        { offset = 1.0, color = #ffd200, opacity = 1.0 }
      ] }
    { type = "linear_gradient", id = "ocean",
      x1 = 0.0, y1 = 0.0, x2 = 0.0, y2 = 1.0,
      stops = [
        { offset = 0.0, color = #2196f3, opacity = 1.0 },
        { offset = 1.0, color = #0d47a1, opacity = 1.0 }
      ] }
    { type = "radial_gradient", id = "glow",
      cx = 0.5, cy = 0.5, r = 0.5,
      stops = [
        { offset = 0.0, color = #4facfe, opacity = 1.0 },
        { offset = 1.0, color = #00f2fe, opacity = 0.0 }
      ] }
  elements::
    { type = "rect", x = 30, y = 30, width = 250, height = 80,
      style = { fill = "url(#sunset)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
    { type = "rect", x = 30, y = 130, width = 250, height = 80,
      style = { fill = "url(#ocean)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
    { type = "circle", cx = 460, cy = 200, r = 150,
      style = { fill = "url(#glow)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/image_audio_demo.msx
// Element::Image (both MediaSource variants) + a Def::Audio def.
//
// Left icon: MediaSource::Embedded (a base64 PNG literal, decoded by
// msx-parser, sniff-validated at parse time), anchor = "center" — the
// (x, y) below is the icon's CENTER, not its corner, so it's drawn
// straddling the small red dot rather than starting from it.
//
// Right icon: MediaSource::FileRef (examples/assets/msx_icon.png,
// resolved against this .msx file's own directory at render time — see
// msx-render-cpu's render_to_pixmap_with_base_dir / msx-render-gpu's
// render_with_shader_dir), default anchor ("top_left") — its (x, y) IS
// its corner, so the icon starts exactly at the red dot instead.
//
// Both icons are the same source image, so the anchor difference is the
// only variable — same reasoning as this project's other side-by-side
// comparison examples (see gradients.msx's three gradient types).
//
// The `audio` def below has no visual output anywhere (Def::Audio is a
// deliberate no-op in every renderer, same treatment as Element::Text) —
// it's declared here purely so the corpus has a real, round-tripping
// example of the def existing and parsing correctly, not to be "seen."
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 600, height = 400, background = #12141a }

  defs::
    // A tiny embedded WAV blip. Nothing plays it — see header comment —
    // this def exists only to prove Def::Audio round-trips end to end.
    { type = "audio", id = "blip",
      data = "UklGRiwAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQgAAACAoMDg/+DAoA==" }

  elements::
    // ── Panel backdrops (purely visual grouping, no functional role) ──
    { type = "rect", x = 40,  y = 60, width = 220, height = 220, rx = 12, ry = 12,
      style = { fill = #1c2028, stroke = #2a2f3a, stroke_width = 1.5, opacity = 1.0 } }
    { type = "rect", x = 340, y = 60, width = 220, height = 220, rx = 12, ry = 12,
      style = { fill = #1c2028, stroke = #2a2f3a, stroke_width = 1.5, opacity = 1.0 } }

    // ── Left: embedded PNG, anchor = "center" ──
    { type = "image", id = "icon-embedded",
      data = "iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA+0lEQVR42u2aUQ6DMAxDfYHdYCfeHaYdFbTPSVAKi90+bR98QRO7tImbVMvrvmw9t+djqmcPp/ZezESihbFJYAYSR/gOCYwk0YOti8AIEr24ugkkSZzBpLMDZgL//l5XB84A/oPAaBJXfavK0AjwmwTSJL71JZfhBPgmATeJKttKOXLZVNph9YQoOWuOv6nUunXtJyU2nzMYyB3+3OFYiRjuzCVKZVFXNldSCjikiNJirFoMaoSirFSyfwL4JYTexOgwik5kaCmBFnNoOY0+0KCPlOhDPbqsgi5soUuL6OIuuryObnCgW0z4Jt9PtFnRjW70VQP0ZQ/KdZsVjXa2LBm9fMUAAAAASUVORK5CYII=",
      x = 150, y = 170, width = 120, height = 120, anchor = "center" }
    { type = "circle", cx = 150, cy = 170, r = 4,
      style = { fill = #ff4d4d, stroke = "none", stroke_width = 0, opacity = 1.0 } }
    { type = "text", x = 150, y = 100, content = "embedded · anchor: center",
      style = { fill = #d8dee9, font_size = 13, text_anchor = "middle",
                stroke = "none", stroke_width = 0, opacity = 1.0 } }

    // ── Right: FileRef PNG, default anchor ("top_left") ──
    { type = "image", id = "icon-fileref",
      source_ref = "assets/msx_icon.png",
      x = 390, y = 110, width = 120, height = 120 }
    { type = "circle", cx = 390, cy = 110, r = 4,
      style = { fill = #ff4d4d, stroke = "none", stroke_width = 0, opacity = 1.0 } }
    { type = "text", x = 390, y = 100, content = "file ref · anchor: top_left (default)",
      style = { fill = #d8dee9, font_size = 13, text_anchor = "middle",
                stroke = "none", stroke_width = 0, opacity = 1.0 } }

    // ── Caption ──
    { type = "text", x = 300, y = 370, content = "Element::Image — embedded + file ref · Def::Audio also declared (silent)",
      style = { fill = #8b92a3, font_size = 12, text_anchor = "middle",
                stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/layer_shader_fill.msx
// Tests this session's actual fix: shader fills on a vector shape, an
// SDF node, AND a GaussianSplat all resolving for real when the shape
// lives INSIDE a Layer, not just at the top level. Before this fix,
// render_layer built its own empty Defs and called the plain,
// shader-blind tessellate_elements — a shader ref (or a gradient ref)
// on anything inside a Layer silently painted flat. See layer.rs's
// module doc for the details.
//
// One shared shader def (checker_1, shaders/checkerboard.wgsl) is
// reused for all three rows on purpose — same reasoning as
// sdf_shader_fill.msx/splat_shader_fill.msx: hard edges make a masking
// or routing bug impossible to miss, and reusing one def across three
// very differently-shaped fills (a rect's straight edges, a smooth_union
// blob's curved silhouette, a Gaussian falloff) is a broader diagnostic
// than any one of them alone.
//
// Each row is a plain flat-color shape on the left and the same shape
// shader-filled on the right — if the Layer fix regressed, the right
// side of every row would go back to a flat block of checker_1's own
// fallback_color instead of the real checkerboard pattern.
//
// The whole thing sits inside one Layer at opacity 0.85 (not 1.0) on
// purpose: this is also an implicit regression check on the Layer's own
// isolated-buffer compositing (already working before this session) —
// if that broke while wiring the new shader context through, the whole
// canvas would look wrong (either full-strength, or not blended against
// the background at all), not just the shader routing specifically.
//
// Rendering status, same caveat as every shader-def example in this
// repo: only `msx rasterize-gpu`/`animate-gpu` (msx-render-gpu, built
// with --features gpu) execute this WGSL. `msx rasterize` (CPU) and
// `msx render` (SVG) both resolve every fill to checker_1's own
// fallback_color and paint it flat — unaffected by this session's fix,
// which is GPU-only (mask+color+composite is a GPU-renderer technique;
// CPU/SVG already handled Layer children's shapes correctly, gradients
// included, before this session).
//
// FIXED: the `elements = [...]` array below originally had no commas
// between its six child object literals. DixScript's own grammar doc
// (dixscript/.../data_section_parser.rs) is explicit that commas are
// optional only for the top-level `defs::`/`elements::` block sugar —
// a plain bracketed `[...]` array literal (this one, and `uniforms =
// [...]` a few lines up, which *did* have its commas right) requires
// them, hard error otherwise ("Expected ',' or ']' in array literal").
// That parse failure took both `msx compile` and `msx render` down for
// this file specifically, which is why it never appeared on the Pages
// report at all (not error-badged — `examples.json` only lists stems
// that produced an SVG; a parse failure produces neither compile nor
// render output, so the file was just silently absent from every build
// since it was added).
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 630, background = #14141c }
  defs::
    { type = "shader", id = "checker_1", source_ref = "shaders/checkerboard.wgsl",
      entry_point = "fs_main", fallback_color = #3a3a4a,
      uniforms = [ { name = "cells", type = "float", value = 14.0 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] },
                   { name = "color_a", type = "vec3", value = [0.9, 0.9, 0.95] },
                   { name = "color_b", type = "vec3", value = [0.16, 0.16, 0.22] } ] }
  elements::
    { type = "layer", blend_mode = "normal", opacity = 0.85,
      elements = [
        // Row 1 (y=100): ordinary vector rects.
        { type = "rect", x = 50, y = 65, width = 70, height = 70,
          style = { fill = #4a9eff, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "rect", x = 170, y = 65, width = 70, height = 70,
          style = { fill = "url(#checker_1)", stroke = "none", stroke_width = 0, opacity = 1.0 } },

        // Row 2 (y=310): SDF smooth_union blobs — same tree shape as
        // sdf_shader_fill.msx, just relocated into this file's grid and
        // wrapped in a Layer this time.
        { type = "sdf", fill = #4a9eff,
          transform = { type = "translate", x = 85, y = 310 },
          tree = { type = "smooth_union", k = 0.35,
            children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                         { type = "circle", cx =  22, cy = -10, r = 30 } ] } },
        { type = "sdf", fill = "url(#checker_1)", stroke = #ffffff, stroke_width = 3,
          transform = { type = "translate", x = 205, y = 310 },
          tree = { type = "smooth_union", k = 0.35,
            children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                         { type = "circle", cx =  22, cy = -10, r = 30 } ] } },

        // Row 3 (y=520): Gaussian splats.
        { type = "splat", x = 85, y = 520, sigma_x = 45, sigma_y = 45,
          color = #4a9eff, opacity = 1.0 },
        { type = "splat", x = 205, y = 520, sigma_x = 45, sigma_y = 45,
          fill = "url(#checker_1)", color = #4a9eff, opacity = 1.0 }
      ] }
)

// examples/layer_swap_front.msx
// Demonstrates alternating which of two overlapping Layers reads as
// "in front" over time.
//
// IMPORTANT caveat, up front: this is NOT a document-order / z-index
// swap. `AnimatedProperty` (core/msx-ast/src/animation.rs) only has six
// channels — translate_x/y, scale_x/y, rotate, opacity, the same set
// Lottie/AE/Rive expose — and `resolve_at_time` (core/msx-anim/src/
// resolver.rs) only ever mutates a *matched* element's existing fields
// in place; it never touches `scene.elements`'s array order or the tree
// structure. Two Layers' relative paint order is fixed by document order
// for a scene's entire lifetime, same as any other pair of elements —
// `layer_front`, defined second below, always paints after (i.e. on top
// of) `layer_back` wherever they overlap, at every frame.
//
// What's actually animated: `layer_front`'s own `opacity` — a real,
// independently animatable `Layer` channel (see resolver.rs's
// `Element::Layer(e) => e.opacity *= delta.opacity`, exactly the same
// mechanism `layer_shader_fill.msx`'s static `opacity = 0.85` goes
// through, just driven by a keyframe track here instead of a constant).
// At opacity 1.0 it fully covers `layer_back` in their overlap region —
// reads as "in front". At opacity 0.0 it's invisible there, so
// `layer_back` (held at a constant opacity 1.0 throughout) shows through
// instead — reads as "in front" the other way. `loop_mode = "ping_pong"`
// turns one forward keyframe sweep into a continuous back-and-forth swap
// without needing a second, mirrored set of keyframes — same trick
// orbit_pulse.msx already uses for its own looping motion.
//
// Each "layer" is a deliberate two-element composition (a primary shape
// plus a small accent of a different element type), not a single shape —
// the point is a whole composed layer swapping front/back together, not
// just one shape's opacity. The two accents (a circle on layer_back, a
// rect on layer_front) sit in different corners specifically so which
// layer owns which accent stays legible even mid-fade.
//
// No shader defs anywhere in this file, unlike layer_shader_fill.msx —
// this exercises plain msx-anim + Layer compositing only. Unlike every
// shader-def example in this repo, that means `msx animate` (CPU, GIF)
// shows the real, full effect here too, not just `animate-gpu` — a
// useful contrast if layer_shader_fill.msx's GPU-only caveat is ever
// confusing: this file is the same Layer-animation machinery with that
// one variable removed.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 320, height = 320, background = #14141c }
  duration = 1.6
  loop_mode = "ping_pong"
  elements::
    { type = "layer", id = "layer_back", opacity = 1.0,
      elements = [
        { type = "rect", x = 60, y = 60, width = 200, height = 200,
          style = { fill = #4a9eff, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "circle", cx = 80, cy = 80, r = 18,
          style = { fill = #e2e8f0, stroke = "none", stroke_width = 0, opacity = 1.0 } }
      ] }
    { type = "layer", id = "layer_front", opacity = 1.0,
      elements = [
        { type = "circle", cx = 210, cy = 210, r = 110,
          style = { fill = #f5a623, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "rect", x = 250, y = 40, width = 30, height = 30,
          style = { fill = #e2e8f0, stroke = "none", stroke_width = 0, opacity = 1.0 } }
      ] }
  animations::
    { target_id = "layer_front", property = "opacity",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 1.6, value = 0.0, easing = "ease_in_out" } ] }
)

// examples/layer_z_index_swap.msx
// Companion / contrast to layer_swap_front.msx: THIS file is the real
// document-order-independent swap that file explicitly says it is NOT.
//
// layer_swap_front.msx's own header spells out exactly why it couldn't do
// this before this session: `AnimatedProperty` only had six channels
// (translate_x/y, scale_x/y, rotate, opacity) and two Layers' relative
// paint order was fixed by document order for a scene's entire lifetime.
// `AnimatedProperty::ZIndex` (core/msx-ast/src/animation.rs) removes that
// limitation — `Layer.z_index` is now a real, independently animatable
// channel, and unlike every other channel it's a plain OVERRIDE, not a
// composed multiply/add (see resolver.rs: `Element::Layer(e) => if let
// Some(z) = delta.z_index { e.z_index = z }` — a sort key has to stay
// distinguishable from "untouched," so it can't compose the way opacity
// or translate do).
//
// Both Layers below sit at a CONSTANT opacity = 1.0 for the entire
// animation — no fading anywhere in this file. `box_a` and `box_b` are
// both fully opaque, always. What changes is purely which one paints on
// top: `box_a`'s z_index sweeps 0.0 -> 1.0, `box_b`'s sweeps the exact
// complementary 1.0 -> 0.0, over the same `duration` with the same
// (symmetric) easing curve. Since the two tracks are complementary and
// the easing curve is point-symmetric about its own midpoint, the two
// values are EXACTLY equal at t = duration / 2 — at every other instant,
// whichever box's z_index is currently higher wins and paints on top,
// completely and abruptly, since z_index is a discrete sort key with no
// blending involved. That's the "hard-cut paint-order swap": unlike
// layer_swap_front.msx's continuous cross-fade, there is no intermediate
// state here where both boxes are partially visible in their overlap —
// it's always one fully covering the other, until the instant they trade
// places. (At that literal single instant the two z_index values tie;
// `layer_reordered`'s own tie-break falls back to plain document order —
// see layer.rs's `equal_z_index_keeps_original_document_order` test — so
// for exactly one infinitesimal frame `box_b`, declared second below,
// would win a tie. Not perceptible at any real frame rate; noted for
// completeness, not because it's visible.)
//
// Geometry, colors, and canvas size are DELIBERATELY identical to
// layer_swap_front.msx's `layer_back`/`layer_front` (same rect, same
// circle, same accent shapes, same positions) — a real z_index swap next
// to a fake opacity one, everything else held constant, is the clearest
// possible side-by-side demonstration of what the new channel actually
// buys over the old workaround. Each box keeps layer_swap_front.msx's
// own two-element-per-layer composition (a primary shape plus a small
// accent of a different element type) for the same reason that file
// gives: the point is a whole composed Layer swapping paint order
// together, not just one shape's stacking position, and `layer_reordered`
// moving a Layer moves everything inside it as one unit.
//
// Like layer_swap_front.msx and unlike layer_shader_fill.msx, there are
// no shader defs here — plain msx-anim + Layer compositing only — so
// `msx animate` (CPU, GIF) shows the real, full effect, not just
// `animate-gpu`. `loop_mode = "ping_pong"` turns one forward keyframe
// sweep into a continuous back-and-forth swap, same trick every other
// looping example in this repo already uses.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 320, height = 320, background = #14141c }
  duration = 1.6
  loop_mode = "ping_pong"
  elements::
    { type = "layer", id = "box_a", opacity = 1.0,
      elements = [
        { type = "rect", x = 60, y = 60, width = 200, height = 200,
          style = { fill = #4a9eff, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "circle", cx = 80, cy = 80, r = 18,
          style = { fill = #e2e8f0, stroke = "none", stroke_width = 0, opacity = 1.0 } }
      ] }
    { type = "layer", id = "box_b", opacity = 1.0,
      elements = [
        { type = "circle", cx = 210, cy = 210, r = 110,
          style = { fill = #f5a623, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "rect", x = 250, y = 40, width = 30, height = 30,
          style = { fill = #e2e8f0, stroke = "none", stroke_width = 0, opacity = 1.0 } }
      ] }
  animations::
    { target_id = "box_a", property = "z_index",
      keyframes = [ { time = 0.0, value = 0.0 },
                    { time = 1.6, value = 1.0, easing = "linear" } ] }
    { target_id = "box_b", property = "z_index",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 1.6, value = 0.0, easing = "linear" } ] }
)

// Generated by mid-qr — https://github.com/MidManStudio/mid_qr_code_lib
// Do not edit by hand; re-run the generator to update.

@CONFIG(
  version  -> "1.0.0"
  features -> "data"
)

@DATA(
  scene = { width = 400.000, height = 400.000, background = "none" }

  elements::
    { type = "rect", x = 0.000, y = 0.000, width = 400.000, height = 400.000, style = { fill = #ffffff } }
    { type = "path", d = "M117.073 39.024H126.829V48.780H117.073Z M195.122 39.024H204.878V48.780H195.122Z M214.634 39.024H224.390V48.780H214.634Z M224.390 39.024H234.146V48.780H224.390Z M234.146 39.024H243.902V48.780H234.146Z M263.415 39.024H273.171V48.780H263.415Z M117.073 48.780H126.829V58.537H117.073Z M126.829 48.780H136.585V58.537H126.829Z M146.341 48.780H156.098V58.537H146.341Z M156.098 48.780H165.854V58.537H156.098Z M175.610 48.780H185.366V58.537H175.610Z M204.878 48.780H214.634V58.537H204.878Z M253.659 48.780H263.415V58.537H253.659Z M263.415 48.780H273.171V58.537H263.415Z M273.171 48.780H282.927V58.537H273.171Z M126.829 58.537H136.585V68.293H126.829Z M165.854 58.537H175.610V68.293H165.854Z M175.610 58.537H185.366V68.293H175.610Z M214.634 58.537H224.390V68.293H214.634Z M224.390 58.537H234.146V68.293H224.390Z M253.659 58.537H263.415V68.293H253.659Z M273.171 58.537H282.927V68.293H273.171Z M117.073 68.293H126.829V78.049H117.073Z M136.585 68.293H146.341V78.049H136.585Z M156.098 68.293H165.854V78.049H156.098Z M185.366 68.293H195.122V78.049H185.366Z M214.634 68.293H224.390V78.049H214.634Z M224.390 68.293H234.146V78.049H224.390Z M253.659 68.293H263.415V78.049H253.659Z M273.171 68.293H282.927V78.049H273.171Z M156.098 78.049H165.854V87.805H156.098Z M165.854 78.049H175.610V87.805H165.854Z M195.122 78.049H204.878V87.805H195.122Z M204.878 78.049H214.634V87.805H204.878Z M214.634 78.049H224.390V87.805H214.634Z M273.171 78.049H282.927V87.805H273.171Z M126.829 87.805H136.585V97.561H126.829Z M136.585 87.805H146.341V97.561H136.585Z M165.854 87.805H175.610V97.561H165.854Z M185.366 87.805H195.122V97.561H185.366Z M195.122 87.805H204.878V97.561H195.122Z M214.634 87.805H224.390V97.561H214.634Z M243.902 87.805H253.659V97.561H243.902Z M253.659 87.805H263.415V97.561H253.659Z M273.171 87.805H282.927V97.561H273.171Z M117.073 97.561H126.829V107.317H117.073Z M136.585 97.561H146.341V107.317H136.585Z M156.098 97.561H165.854V107.317H156.098Z M175.610 97.561H185.366V107.317H175.610Z M195.122 97.561H204.878V107.317H195.122Z M214.634 97.561H224.390V107.317H214.634Z M234.146 97.561H243.902V107.317H234.146Z M253.659 97.561H263.415V107.317H253.659Z M273.171 97.561H282.927V107.317H273.171Z M117.073 107.317H126.829V117.073H117.073Z M126.829 107.317H136.585V117.073H126.829Z M156.098 107.317H165.854V117.073H156.098Z M185.366 107.317H195.122V117.073H185.366Z M195.122 107.317H204.878V117.073H195.122Z M204.878 107.317H214.634V117.073H204.878Z M224.390 107.317H234.146V117.073H224.390Z M273.171 107.317H282.927V117.073H273.171Z M39.024 117.073H48.780V126.829H39.024Z M58.537 117.073H68.293V126.829H58.537Z M68.293 117.073H78.049V126.829H68.293Z M87.805 117.073H97.561V126.829H87.805Z M97.561 117.073H107.317V126.829H97.561Z M107.317 117.073H117.073V126.829H107.317Z M175.610 117.073H185.366V126.829H175.610Z M185.366 117.073H195.122V126.829H185.366Z M195.122 117.073H204.878V126.829H195.122Z M214.634 117.073H224.390V126.829H214.634Z M243.902 117.073H253.659V126.829H243.902Z M253.659 117.073H263.415V126.829H253.659Z M263.415 117.073H273.171V126.829H263.415Z M273.171 117.073H282.927V126.829H273.171Z M292.683 117.073H302.439V126.829H292.683Z M321.951 117.073H331.707V126.829H321.951Z M341.463 117.073H351.220V126.829H341.463Z M351.220 117.073H360.976V126.829H351.220Z M48.780 126.829H58.537V136.585H48.780Z M87.805 126.829H97.561V136.585H87.805Z M126.829 126.829H136.585V136.585H126.829Z M165.854 126.829H175.610V136.585H165.854Z M195.122 126.829H204.878V136.585H195.122Z M204.878 126.829H214.634V136.585H204.878Z M214.634 126.829H224.390V136.585H214.634Z M224.390 126.829H234.146V136.585H224.390Z M234.146 126.829H243.902V136.585H234.146Z M263.415 126.829H273.171V136.585H263.415Z M292.683 126.829H302.439V136.585H292.683Z M302.439 126.829H312.195V136.585H302.439Z M321.951 126.829H331.707V136.585H321.951Z M331.707 126.829H341.463V136.585H331.707Z M351.220 126.829H360.976V136.585H351.220Z M39.024 136.585H48.780V146.341H39.024Z M48.780 136.585H58.537V146.341H48.780Z M68.293 136.585H78.049V146.341H68.293Z M78.049 136.585H87.805V146.341H78.049Z M97.561 136.585H107.317V146.341H97.561Z M107.317 136.585H117.073V146.341H107.317Z M126.829 136.585H136.585V146.341H126.829Z M156.098 136.585H165.854V146.341H156.098Z M165.854 136.585H175.610V146.341H165.854Z M195.122 136.585H204.878V146.341H195.122Z M214.634 136.585H224.390V146.341H214.634Z M263.415 136.585H273.171V146.341H263.415Z M282.927 136.585H292.683V146.341H282.927Z M302.439 136.585H312.195V146.341H302.439Z M312.195 136.585H321.951V146.341H312.195Z M321.951 136.585H331.707V146.341H321.951Z M341.463 136.585H351.220V146.341H341.463Z M351.220 136.585H360.976V146.341H351.220Z M48.780 146.341H58.537V156.098H48.780Z M68.293 146.341H78.049V156.098H68.293Z M78.049 146.341H87.805V156.098H78.049Z M107.317 146.341H117.073V156.098H107.317Z M117.073 146.341H126.829V156.098H117.073Z M136.585 146.341H146.341V156.098H136.585Z M146.341 146.341H156.098V156.098H146.341Z M204.878 146.341H214.634V156.098H204.878Z M224.390 146.341H234.146V156.098H224.390Z M234.146 146.341H243.902V156.098H234.146Z M292.683 146.341H302.439V156.098H292.683Z M302.439 146.341H312.195V156.098H302.439Z M321.951 146.341H331.707V156.098H321.951Z M68.293 156.098H78.049V165.854H68.293Z M97.561 156.098H107.317V165.854H97.561Z M107.317 156.098H117.073V165.854H107.317Z M117.073 156.098H126.829V165.854H117.073Z M136.585 156.098H146.341V165.854H136.585Z M175.610 156.098H185.366V165.854H175.610Z M185.366 156.098H195.122V165.854H185.366Z M195.122 156.098H204.878V165.854H195.122Z M224.390 156.098H234.146V165.854H224.390Z M234.146 156.098H243.902V165.854H234.146Z M253.659 156.098H263.415V165.854H253.659Z M263.415 156.098H273.171V165.854H263.415Z M282.927 156.098H292.683V165.854H282.927Z M321.951 156.098H331.707V165.854H321.951Z M341.463 156.098H351.220V165.854H341.463Z M351.220 156.098H360.976V165.854H351.220Z M48.780 165.854H58.537V175.610H48.780Z M58.537 165.854H68.293V175.610H58.537Z M68.293 165.854H78.049V175.610H68.293Z M87.805 165.854H97.561V175.610H87.805Z M107.317 165.854H117.073V175.610H107.317Z M117.073 165.854H126.829V175.610H117.073Z M165.854 165.854H175.610V175.610H165.854Z M175.610 165.854H185.366V175.610H175.610Z M234.146 165.854H243.902V175.610H234.146Z M243.902 165.854H253.659V175.610H243.902Z M263.415 165.854H273.171V175.610H263.415Z M273.171 165.854H282.927V175.610H273.171Z M302.439 165.854H312.195V175.610H302.439Z M321.951 165.854H331.707V175.610H321.951Z M331.707 165.854H341.463V175.610H331.707Z M341.463 165.854H351.220V175.610H341.463Z M39.024 175.610H48.780V185.366H39.024Z M58.537 175.610H68.293V185.366H58.537Z M78.049 175.610H87.805V185.366H78.049Z M97.561 175.610H107.317V185.366H97.561Z M117.073 175.610H126.829V185.366H117.073Z M136.585 175.610H146.341V185.366H136.585Z M146.341 175.610H156.098V185.366H146.341Z M156.098 175.610H165.854V185.366H156.098Z M214.634 175.610H224.390V185.366H214.634Z M224.390 175.610H234.146V185.366H224.390Z M234.146 175.610H243.902V185.366H234.146Z M243.902 175.610H253.659V185.366H243.902Z M273.171 175.610H282.927V185.366H273.171Z M292.683 175.610H302.439V185.366H292.683Z M321.951 175.610H331.707V185.366H321.951Z M39.024 185.366H48.780V195.122H39.024Z M68.293 185.366H78.049V195.122H68.293Z M78.049 185.366H87.805V195.122H78.049Z M87.805 185.366H97.561V195.122H87.805Z M107.317 185.366H117.073V195.122H107.317Z M126.829 185.366H136.585V195.122H126.829Z M185.366 185.366H195.122V195.122H185.366Z M243.902 185.366H253.659V195.122H243.902Z M282.927 185.366H292.683V195.122H282.927Z M292.683 185.366H302.439V195.122H292.683Z M302.439 185.366H312.195V195.122H302.439Z M321.951 185.366H331.707V195.122H321.951Z M331.707 185.366H341.463V195.122H331.707Z M58.537 195.122H68.293V204.878H58.537Z M68.293 195.122H78.049V204.878H68.293Z M78.049 195.122H87.805V204.878H78.049Z M87.805 195.122H97.561V204.878H87.805Z M97.561 195.122H107.317V204.878H97.561Z M117.073 195.122H126.829V204.878H117.073Z M126.829 195.122H136.585V204.878H126.829Z M165.854 195.122H175.610V204.878H165.854Z M195.122 195.122H204.878V204.878H195.122Z M214.634 195.122H224.390V204.878H214.634Z M234.146 195.122H243.902V204.878H234.146Z M243.902 195.122H253.659V204.878H243.902Z M253.659 195.122H263.415V204.878H253.659Z M263.415 195.122H273.171V204.878H263.415Z M282.927 195.122H292.683V204.878H282.927Z M292.683 195.122H302.439V204.878H292.683Z M312.195 195.122H321.951V204.878H312.195Z M321.951 195.122H331.707V204.878H321.951Z M331.707 195.122H341.463V204.878H331.707Z M58.537 204.878H68.293V214.634H58.537Z M78.049 204.878H87.805V214.634H78.049Z M87.805 204.878H97.561V214.634H87.805Z M136.585 204.878H146.341V214.634H136.585Z M156.098 204.878H165.854V214.634H156.098Z M165.854 204.878H175.610V214.634H165.854Z M175.610 204.878H185.366V214.634H175.610Z M185.366 204.878H195.122V214.634H185.366Z M224.390 204.878H234.146V214.634H224.390Z M234.146 204.878H243.902V214.634H234.146Z M253.659 204.878H263.415V214.634H253.659Z M263.415 204.878H273.171V214.634H263.415Z M273.171 204.878H282.927V214.634H273.171Z M282.927 204.878H292.683V214.634H282.927Z M292.683 204.878H302.439V214.634H292.683Z M312.195 204.878H321.951V214.634H312.195Z M321.951 204.878H331.707V214.634H321.951Z M341.463 204.878H351.220V214.634H341.463Z M351.220 204.878H360.976V214.634H351.220Z M39.024 214.634H48.780V224.390H39.024Z M48.780 214.634H58.537V224.390H48.780Z M68.293 214.634H78.049V224.390H68.293Z M78.049 214.634H87.805V224.390H78.049Z M87.805 214.634H97.561V224.390H87.805Z M97.561 214.634H107.317V224.390H97.561Z M117.073 214.634H126.829V224.390H117.073Z M156.098 214.634H165.854V224.390H156.098Z M185.366 214.634H195.122V224.390H185.366Z M214.634 214.634H224.390V224.390H214.634Z M234.146 214.634H243.902V224.390H234.146Z M273.171 214.634H282.927V224.390H273.171Z M302.439 214.634H312.195V224.390H302.439Z M312.195 214.634H321.951V224.390H312.195Z M331.707 214.634H341.463V224.390H331.707Z M341.463 214.634H351.220V224.390H341.463Z M48.780 224.390H58.537V234.146H48.780Z M68.293 224.390H78.049V234.146H68.293Z M87.805 224.390H97.561V234.146H87.805Z M117.073 224.390H126.829V234.146H117.073Z M126.829 224.390H136.585V234.146H126.829Z M146.341 224.390H156.098V234.146H146.341Z M156.098 224.390H165.854V234.146H156.098Z M175.610 224.390H185.366V234.146H175.610Z M195.122 224.390H204.878V234.146H195.122Z M204.878 224.390H214.634V234.146H204.878Z M214.634 224.390H224.390V234.146H214.634Z M224.390 224.390H234.146V234.146H224.390Z M263.415 224.390H273.171V234.146H263.415Z M273.171 224.390H282.927V234.146H273.171Z M282.927 224.390H292.683V234.146H282.927Z M312.195 224.390H321.951V234.146H312.195Z M341.463 224.390H351.220V234.146H341.463Z M58.537 234.146H68.293V243.902H58.537Z M78.049 234.146H87.805V243.902H78.049Z M97.561 234.146H107.317V243.902H97.561Z M107.317 234.146H117.073V243.902H107.317Z M117.073 234.146H126.829V243.902H117.073Z M136.585 234.146H146.341V243.902H136.585Z M156.098 234.146H165.854V243.902H156.098Z M195.122 234.146H204.878V243.902H195.122Z M253.659 234.146H263.415V243.902H253.659Z M302.439 234.146H312.195V243.902H302.439Z M321.951 234.146H331.707V243.902H321.951Z M331.707 234.146H341.463V243.902H331.707Z M351.220 234.146H360.976V243.902H351.220Z M39.024 243.902H48.780V253.659H39.024Z M78.049 243.902H87.805V253.659H78.049Z M87.805 243.902H97.561V253.659H87.805Z M117.073 243.902H126.829V253.659H117.073Z M126.829 243.902H136.585V253.659H126.829Z M136.585 243.902H146.341V253.659H136.585Z M146.341 243.902H156.098V253.659H146.341Z M156.098 243.902H165.854V253.659H156.098Z M175.610 243.902H185.366V253.659H175.610Z M185.366 243.902H195.122V253.659H185.366Z M195.122 243.902H204.878V253.659H195.122Z M234.146 243.902H243.902V253.659H234.146Z M243.902 243.902H253.659V253.659H243.902Z M263.415 243.902H273.171V253.659H263.415Z M292.683 243.902H302.439V253.659H292.683Z M321.951 243.902H331.707V253.659H321.951Z M331.707 243.902H341.463V253.659H331.707Z M351.220 243.902H360.976V253.659H351.220Z M87.805 253.659H97.561V263.415H87.805Z M97.561 253.659H107.317V263.415H97.561Z M107.317 253.659H117.073V263.415H107.317Z M117.073 253.659H126.829V263.415H117.073Z M136.585 253.659H146.341V263.415H136.585Z M156.098 253.659H165.854V263.415H156.098Z M185.366 253.659H195.122V263.415H185.366Z M204.878 253.659H214.634V263.415H204.878Z M224.390 253.659H234.146V263.415H224.390Z M234.146 253.659H243.902V263.415H234.146Z M243.902 253.659H253.659V263.415H243.902Z M263.415 253.659H273.171V263.415H263.415Z M282.927 253.659H292.683V263.415H282.927Z M292.683 253.659H302.439V263.415H292.683Z M302.439 253.659H312.195V263.415H302.439Z M321.951 253.659H331.707V263.415H321.951Z M341.463 253.659H351.220V263.415H341.463Z M351.220 253.659H360.976V263.415H351.220Z M48.780 263.415H58.537V273.171H48.780Z M58.537 263.415H68.293V273.171H58.537Z M68.293 263.415H78.049V273.171H68.293Z M78.049 263.415H87.805V273.171H78.049Z M87.805 263.415H97.561V273.171H87.805Z M107.317 263.415H117.073V273.171H107.317Z M117.073 263.415H126.829V273.171H117.073Z M126.829 263.415H136.585V273.171H126.829Z M136.585 263.415H146.341V273.171H136.585Z M146.341 263.415H156.098V273.171H146.341Z M156.098 263.415H165.854V273.171H156.098Z M165.854 263.415H175.610V273.171H165.854Z M185.366 263.415H195.122V273.171H185.366Z M214.634 263.415H224.390V273.171H214.634Z M234.146 263.415H243.902V273.171H234.146Z M273.171 263.415H282.927V273.171H273.171Z M292.683 263.415H302.439V273.171H292.683Z M312.195 263.415H321.951V273.171H312.195Z M321.951 263.415H331.707V273.171H321.951Z M351.220 263.415H360.976V273.171H351.220Z M39.024 273.171H48.780V282.927H39.024Z M68.293 273.171H78.049V282.927H68.293Z M78.049 273.171H87.805V282.927H78.049Z M97.561 273.171H107.317V282.927H97.561Z M117.073 273.171H126.829V282.927H117.073Z M136.585 273.171H146.341V282.927H136.585Z M146.341 273.171H156.098V282.927H146.341Z M156.098 273.171H165.854V282.927H156.098Z M165.854 273.171H175.610V282.927H165.854Z M175.610 273.171H185.366V282.927H175.610Z M195.122 273.171H204.878V282.927H195.122Z M204.878 273.171H214.634V282.927H204.878Z M224.390 273.171H234.146V282.927H224.390Z M253.659 273.171H263.415V282.927H253.659Z M273.171 273.171H282.927V282.927H273.171Z M282.927 273.171H292.683V282.927H282.927Z M292.683 273.171H302.439V282.927H292.683Z M302.439 273.171H312.195V282.927H302.439Z M312.195 273.171H321.951V282.927H312.195Z M321.951 273.171H331.707V282.927H321.951Z M331.707 273.171H341.463V282.927H331.707Z M341.463 273.171H351.220V282.927H341.463Z M351.220 273.171H360.976V282.927H351.220Z M117.073 282.927H126.829V292.683H117.073Z M126.829 282.927H136.585V292.683H126.829Z M136.585 282.927H146.341V292.683H136.585Z M156.098 282.927H165.854V292.683H156.098Z M175.610 282.927H185.366V292.683H175.610Z M185.366 282.927H195.122V292.683H185.366Z M195.122 282.927H204.878V292.683H195.122Z M224.390 282.927H234.146V292.683H224.390Z M234.146 282.927H243.902V292.683H234.146Z M243.902 282.927H253.659V292.683H243.902Z M273.171 282.927H282.927V292.683H273.171Z M312.195 282.927H321.951V292.683H312.195Z M321.951 282.927H331.707V292.683H321.951Z M117.073 292.683H126.829V302.439H117.073Z M146.341 292.683H156.098V302.439H146.341Z M156.098 292.683H165.854V302.439H156.098Z M165.854 292.683H175.610V302.439H165.854Z M175.610 292.683H185.366V302.439H175.610Z M204.878 292.683H214.634V302.439H204.878Z M214.634 292.683H224.390V302.439H214.634Z M224.390 292.683H234.146V302.439H224.390Z M234.146 292.683H243.902V302.439H234.146Z M243.902 292.683H253.659V302.439H243.902Z M263.415 292.683H273.171V302.439H263.415Z M273.171 292.683H282.927V302.439H273.171Z M292.683 292.683H302.439V302.439H292.683Z M312.195 292.683H321.951V302.439H312.195Z M341.463 292.683H351.220V302.439H341.463Z M117.073 302.439H126.829V312.195H117.073Z M126.829 302.439H136.585V312.195H126.829Z M146.341 302.439H156.098V312.195H146.341Z M156.098 302.439H165.854V312.195H156.098Z M204.878 302.439H214.634V312.195H204.878Z M214.634 302.439H224.390V312.195H214.634Z M234.146 302.439H243.902V312.195H234.146Z M263.415 302.439H273.171V312.195H263.415Z M273.171 302.439H282.927V312.195H273.171Z M312.195 302.439H321.951V312.195H312.195Z M321.951 302.439H331.707V312.195H321.951Z M331.707 302.439H341.463V312.195H331.707Z M341.463 302.439H351.220V312.195H341.463Z M351.220 302.439H360.976V312.195H351.220Z M136.585 312.195H146.341V321.951H136.585Z M146.341 312.195H156.098V321.951H146.341Z M156.098 312.195H165.854V321.951H156.098Z M165.854 312.195H175.610V321.951H165.854Z M195.122 312.195H204.878V321.951H195.122Z M204.878 312.195H214.634V321.951H204.878Z M214.634 312.195H224.390V321.951H214.634Z M224.390 312.195H234.146V321.951H224.390Z M253.659 312.195H263.415V321.951H253.659Z M263.415 312.195H273.171V321.951H263.415Z M273.171 312.195H282.927V321.951H273.171Z M282.927 312.195H292.683V321.951H282.927Z M292.683 312.195H302.439V321.951H292.683Z M302.439 312.195H312.195V321.951H302.439Z M312.195 312.195H321.951V321.951H312.195Z M331.707 312.195H341.463V321.951H331.707Z M341.463 312.195H351.220V321.951H341.463Z M117.073 321.951H126.829V331.707H117.073Z M126.829 321.951H136.585V331.707H126.829Z M195.122 321.951H204.878V331.707H195.122Z M204.878 321.951H214.634V331.707H204.878Z M224.390 321.951H234.146V331.707H224.390Z M243.902 321.951H253.659V331.707H243.902Z M253.659 321.951H263.415V331.707H253.659Z M263.415 321.951H273.171V331.707H263.415Z M302.439 321.951H312.195V331.707H302.439Z M321.951 321.951H331.707V331.707H321.951Z M331.707 321.951H341.463V331.707H331.707Z M341.463 321.951H351.220V331.707H341.463Z M351.220 321.951H360.976V331.707H351.220Z M117.073 331.707H126.829V341.463H117.073Z M126.829 331.707H136.585V341.463H126.829Z M136.585 331.707H146.341V341.463H136.585Z M156.098 331.707H165.854V341.463H156.098Z M165.854 331.707H175.610V341.463H165.854Z M185.366 331.707H195.122V341.463H185.366Z M195.122 331.707H204.878V341.463H195.122Z M204.878 331.707H214.634V341.463H204.878Z M234.146 331.707H243.902V341.463H234.146Z M253.659 331.707H263.415V341.463H253.659Z M292.683 331.707H302.439V341.463H292.683Z M302.439 331.707H312.195V341.463H302.439Z M321.951 331.707H331.707V341.463H321.951Z M126.829 341.463H136.585V351.220H126.829Z M136.585 341.463H146.341V351.220H136.585Z M204.878 341.463H214.634V351.220H204.878Z M234.146 341.463H243.902V351.220H234.146Z M253.659 341.463H263.415V351.220H253.659Z M263.415 341.463H273.171V351.220H263.415Z M273.171 341.463H282.927V351.220H273.171Z M282.927 341.463H292.683V351.220H282.927Z M302.439 341.463H312.195V351.220H302.439Z M312.195 341.463H321.951V351.220H312.195Z M351.220 341.463H360.976V351.220H351.220Z M117.073 351.220H126.829V360.976H117.073Z M126.829 351.220H136.585V360.976H126.829Z M146.341 351.220H156.098V360.976H146.341Z M214.634 351.220H224.390V360.976H214.634Z M224.390 351.220H234.146V360.976H224.390Z M243.902 351.220H253.659V360.976H243.902Z M263.415 351.220H273.171V360.976H263.415Z M292.683 351.220H302.439V360.976H292.683Z M312.195 351.220H321.951V360.976H312.195Z M321.951 351.220H331.707V360.976H321.951Z M331.707 351.220H341.463V360.976H331.707Z", style = { fill = "#000000" } }
    { type = "path", d = "M39.024 39.024H107.317V107.317H39.024ZM48.780 48.780H97.561V97.561H48.780Z", style = { fill = #000000, fill_rule = "evenodd" } }
    { type = "rect", x = 58.537, y = 58.537, width = 29.268, height = 29.268, style = { fill = #000000 } }
    { type = "path", d = "M292.683 39.024H360.976V107.317H292.683ZM302.439 48.780H351.220V97.561H302.439Z", style = { fill = #000000, fill_rule = "evenodd" } }
    { type = "rect", x = 312.195, y = 58.537, width = 29.268, height = 29.268, style = { fill = #000000 } }
    { type = "path", d = "M39.024 292.683H107.317V360.976H39.024ZM48.780 302.439H97.561V351.220H48.780Z", style = { fill = #000000, fill_rule = "evenodd" } }
    { type = "rect", x = 58.537, y = 312.195, width = 29.268, height = 29.268, style = { fill = #000000 } }
)

@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 400, height = 240, background = #0a0f1e }
  duration = 1.2
  loop_mode = "ping_pong"
  elements::
    { type = "rect", id = "wobble_box", x = 40, y = 40, width = 50, height = 50,
      style = { fill = #f5a623, stroke = "none", stroke_width = 0, opacity = 1.0 } }
    { type = "circle", id = "orbit_dot", cx = 200, cy = 170, r = 26,
      style = { fill = #4a9eff, stroke = #e2e8f0, stroke_width = 2.0, opacity = 1.0 } }
  animations::
    { target_id = "wobble_box", property = "rotate",
      keyframes = [ { time = 0.0, value = 0.0 },
                    { time = 1.2, value = 30.0, easing = "ease_in_out" } ] }
    { target_id = "orbit_dot", property = "translate_x",
      keyframes = [ { time = 0.0, value = -140.0 },
                    { time = 1.2, value = 140.0, easing = "ease_in_out" } ] }
    { target_id = "orbit_dot", property = "scale_x",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.6, value = 1.4, easing = "ease_out" },
                    { time = 1.2, value = 1.0, easing = "ease_in" } ] }
    { target_id = "orbit_dot", property = "scale_y",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.6, value = 1.4, easing = "ease_out" },
                    { time = 1.2, value = 1.0, easing = "ease_in" } ] }
    { target_id = "orbit_dot", property = "opacity",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 1.2, value = 0.55, easing = "ease_in_out" } ] }
)

@CONFIG( version -> "1.0.0" )
@QUICKFUNCS(
  ~badge<object>(x, y, label, color) {
    return {
      type = "group"
      elements = [
        { type = "rect", x = x, y = y, width = 100, height = 32, rx = 16,
          style = { fill = color, stroke = "none", stroke_width = 0, opacity = 1.0 } },
        { type = "text", x = x + 50, y = y + 21, content = label,
          style = { fill = #ffffff, font_size = 13, text_anchor = "middle",
                    font_weight = "bold", stroke = "none", stroke_width = 0, opacity = 1.0 } }
      ]
    }
  }
  ~dot<object>(cx, cy, r, color) {
    return {
      type = "circle"
      cx = cx  cy = cy  r = r
      style = { fill = color, stroke = #1a1a2e, stroke_width = 2.0, opacity = 0.9 }
    }
  }
)
@DATA(
  scene = { width = 700, height = 420, background = #f4f5f7 }
  elements::
    badge(20,  20, "primary", #007bff)
    badge(140, 20, "success", #28a745)
    badge(260, 20, "warning", #ffc107)
    badge(380, 20, "danger",  #dc3545)
    badge(500, 20, "dark",    #343a40)
    dot(80,  200, 55, #e94560)
    dot(210, 200, 45, #533483)
    dot(330, 200, 60, #0f3460)
    dot(460, 200, 40, #4a9eff)
    dot(580, 200, 50, #22c55e)
    { type = "text", x = 350, y = 390, content = "MSX Parametric Components",
      style = { fill = #333333, font_size = 16, text_anchor = "middle",
                stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 500, height = 500, background = #0d1117 }
  elements::
    { type = "path", d = "M 250 50 L 450 430 L 50 430 Z",
      style = { fill = #3498db, stroke = #2980b9, stroke_width = 3.0, opacity = 0.85 } }
    { type = "path",
      d = "M 250 120 C 340 60 440 140 420 240 C 400 340 300 420 210 390 C 120 360 80 260 100 180 C 120 100 160 180 250 120 Z",
      style = { fill = "none", stroke = #e74c3c, stroke_width = 4.0, opacity = 1.0 } }
    { type = "path", d = "M 80 350 A 130 130 0 0 1 420 350",
      style = { fill = "none", stroke = #f5a623, stroke_width = 5.0, opacity = 1.0 } }
    { type = "circle", cx = 250, cy = 250, r = 8,
      style = { fill = #ffffff, stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/sdf_logo.msx
// MSX logotype concept — the letters "M", "S", "X" built from SDF
// primitives and boolean operations, with splat glow as lighting.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 600, height = 300, background = #06060f }
  elements::

    // ── Background glow ───────────────────────────────────────────────
    { type = "splat", x = 300, y = 150, sigma_x = 220, sigma_y = 100,
      color = #1a0040, opacity = 0.85 }
    { type = "splat", x = 110, y = 150, sigma_x = 80,  sigma_y = 60,
      color = #4a9eff, opacity = 0.25 }
    { type = "splat", x = 300, y = 150, sigma_x = 70,  sigma_y = 55,
      color = #a78bfa, opacity = 0.25 }
    { type = "splat", x = 490, y = 150, sigma_x = 80,  sigma_y = 60,
      color = #e94560, opacity = 0.25 }

    // ── "M" ───────────────────────────────────────────────────────────
    { type = "sdf", fill = #4a9eff,
      transform = { type = "translate", x = 110, y = 150 },
      tree = { type = "smooth_subtract", k = 0.1,
        a = { type = "smooth_union", k = 0.2,
          children = [
            { type = "box", x = -45, y = -70, width = 28, height = 140, corner_radius = 8 },
            { type = "box", x =  17, y = -70, width = 28, height = 140, corner_radius = 8 },
            { type = "box", x = -20, y = -70, width = 40, height = 36,  corner_radius = 6 }
          ] },
        b = { type = "box", x = -12, y = -30, width = 24, height = 60, corner_radius = 4 } } }
    { type = "splat", x = 110, y = 150, sigma_x = 38, sigma_y = 30,
      color = #7ec8ff, opacity = 0.45 }

    // ── "S" ───────────────────────────────────────────────────────────
    { type = "sdf", fill = #a78bfa,
      transform = { type = "translate", x = 300, y = 150 },
      tree = { type = "smooth_union", k = 0.18,
        children = [
          { type = "smooth_subtract", k = 0.12,
            a = { type = "circle", cx = 12, cy = -34, r = 36 },
            b = { type = "circle", cx = 12, cy = -34, r = 22 } },
          { type = "smooth_subtract", k = 0.12,
            a = { type = "circle", cx = -12, cy = 34, r = 36 },
            b = { type = "circle", cx = -12, cy = 34, r = 22 } },
          { type = "box", x = -8, y = -12, width = 16, height = 24, corner_radius = 4 }
        ] } }
    { type = "splat", x = 300, y = 150, sigma_x = 38, sigma_y = 30,
      color = #c4b5fd, opacity = 0.45 }

    // ── "X" ───────────────────────────────────────────────────────────
    { type = "sdf", fill = #e94560,
      transform = { type = "translate", x = 490, y = 150 },
      tree = { type = "smooth_union", k = 0.15,
        children = [
          { type = "line", x1 = -42, y1 = -66, x2 = 42, y2 = 66, thickness = 22 },
          { type = "line", x1 =  42, y1 = -66, x2 = -42, y2 = 66, thickness = 22 }
        ] } }
    { type = "splat", x = 490, y = 150, sigma_x = 38, sigma_y = 30,
      color = #ff8fa3, opacity = 0.45 }

    // ── Core highlights ───────────────────────────────────────────────
    { type = "splat", x = 110, y = 135, sigma_x = 12, sigma_y = 10,
      color = #ffffff, opacity = 0.6 }
    { type = "splat", x = 300, y = 130, sigma_x = 12, sigma_y = 10,
      color = #ffffff, opacity = 0.6 }
    { type = "splat", x = 490, y = 148, sigma_x = 12, sigma_y = 10,
      color = #ffffff, opacity = 0.6 }
)

// examples/sdf_shader_fill.msx
// Tests SdfNode's real shader-fill path (sdf_shader.rs's mask+color+
// composite technique) — the actual point of this session's earlier GPU
// work: a shader masked to the node's TRUE antialiased silhouette, not
// its rectangular bounding box.
//
// Reuses shaders/checkerboard.wgsl on purpose, same reasoning as
// splat_shader_fill.msx: it's the sharpest possible diagnostic for
// masking correctness. A smooth_union "blob" (not a plain circle, not
// anything remotely rectangular) filled with a hard-edged checkerboard
// makes any masking bug immediately obvious — squares bleeding into the
// blob's concave notch or past its rounded silhouette would be
// impossible to miss, where a soft shader like plasma might hide the
// same bug.
//
// The stroke on the shader-filled blob tests SdfPipeline::draw_stroke_only
// specifically — shader routing only ever handles the FILL (see
// sdf_shader.rs's own "known gaps"), so the stroke has to still show up,
// drawn separately, flat-colored, on top of the real WGSL fill
// underneath it.
//
// Rendering status, same caveat as every shader-def example in this repo:
// only `msx rasterize-gpu`/`animate-gpu` (msx-render-gpu, built with
// --features gpu) execute this WGSL and apply the real antialiased mask.
// `msx rasterize` (CPU) and `msx render` (SVG) both resolve the fill to
// checkerboard's own `fallback_color` and paint it flat within the SDF
// shape's own (CPU/SVG-rendered) silhouette — which, unlike the GPU
// bounding-box-then-mask technique, was already correct for arbitrary SDF
// shapes on those two renderers before this session even started; only
// GPU needed the new masking work.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #14141c }
  defs::
    { type = "shader", id = "checker_1", source_ref = "shaders/checkerboard.wgsl",
      entry_point = "fs_main", fallback_color = #3a3a4a,
      uniforms = [ { name = "cells", type = "float", value = 14.0 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] },
                   { name = "color_a", type = "vec3", value = [0.9, 0.9, 0.95] },
                   { name = "color_b", type = "vec3", value = [0.16, 0.16, 0.22] } ] }
  elements::
    // Plain flat-color blob on the left — same tree shape as the
    // shader-filled one on the right, for a direct before/after
    // comparison of the exact same silhouette.
    { type = "sdf", fill = #4a9eff,
      transform = { type = "translate", x = 85, y = 100 },
      tree = { type = "smooth_union", k = 0.35,
        children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                     { type = "circle", cx =  22, cy = -10, r = 30 } ] } }

    // Shader-filled blob, WITH a stroke — exercises both the mask+color+
    // composite fill path and draw_stroke_only in the same node.
    { type = "sdf", fill = "url(#checker_1)", stroke = #ffffff, stroke_width = 3,
      transform = { type = "translate", x = 205, y = 100 },
      tree = { type = "smooth_union", k = 0.35,
        children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                     { type = "circle", cx =  22, cy = -10, r = 30 } ] } }
)

// examples/sdf_shapes.msx
// SDF primitives and boolean operations.
// What makes these special vs SVG shapes: k > 0 on smooth_union/subtract
// means the boundary between shapes blends like wet clay being pushed
// together — no hard seam, no aliasing, mathematically exact at any
// resolution. The k value controls how far the blend extends: 0.0 is
// identical to a hard boolean, 0.5 is aggressive clay-blending.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 600, height = 400, background = #0d0d1a }
  elements::

    // Row 1 — primitives
    // Circle
    { type = "sdf", fill = #4a9eff,
      transform = { type = "translate", x = 75, y = 100 },
      tree = { type = "circle", cx = 0, cy = 0, r = 55 } }

    // Box with round corners
    { type = "sdf", fill = #22c55e,
      transform = { type = "translate", x = 225, y = 100 },
      tree = { type = "box", x = -55, y = -45, width = 110, height = 90, corner_radius = 18 } }

    // Ring
    { type = "sdf", fill = #f5a623,
      transform = { type = "translate", x = 375, y = 100 },
      tree = { type = "ring", cx = 0, cy = 0, r = 48, thickness = 16 } }

    // Arc
    { type = "sdf", fill = #a78bfa,
      transform = { type = "translate", x = 525, y = 100 },
      tree = { type = "arc", cx = 0, cy = 0, r = 48,
               angle_start = -2.094, angle_end = 2.094, thickness = 14 } }

    // Row 2 — boolean operations
    // Hard union (k=0): two circles touching, sharp join
    { type = "sdf", fill = #e94560,
      transform = { type = "translate", x = 75, y = 280 },
      tree = { type = "union",
        children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                     { type = "circle", cx =  22, cy = 0, r = 38 } ] } }

    // Smooth union (k=0.3): same two circles, blended like clay
    { type = "sdf", fill = #ff6b6b,
      transform = { type = "translate", x = 225, y = 280 },
      tree = { type = "smooth_union", k = 0.3,
        children = [ { type = "circle", cx = -22, cy = 0, r = 38 },
                     { type = "circle", cx =  22, cy = 0, r = 38 } ] } }

    // Smooth subtract (k=0.25): circle with a soft notch carved out
    { type = "sdf", fill = #ffd166,
      transform = { type = "translate", x = 375, y = 280 },
      tree = { type = "smooth_subtract", k = 0.25,
        a = { type = "circle", cx = 0, cy = 0, r = 52 },
        b = { type = "circle", cx = 22, cy = -18, r = 36 } } }

    // Smooth intersect + offset: inflated intersect ring
    { type = "sdf", fill = #06d6a0,
      transform = { type = "translate", x = 525, y = 280 },
      tree = { type = "offset", amount = 8,
        child = { type = "smooth_intersect", k = 0.15,
          a = { type = "circle", cx = -16, cy = 0, r = 52 },
          b = { type = "circle", cx =  16, cy = 0, r = 52 } } } }
)

// examples/sdf_splat_mixed.msx
// Hard vector shapes + SDF booleans + Gaussian splat atmosphere.
// This is the actual MSX value proposition: all three mark types
// compositing together in one scene. The splats provide the soft glow
// that makes the hard shapes read as lit from within — something you
// can't approximate cleanly in SVG because SVG filters operate per-element
// and can't reach across element boundaries the way alpha accumulation does.
@CONFIG( version -> "1.0.0" )
@QUICKFUNCS(
  ~glow<object>(x, y, color, radius, strength) {
    return { type = "splat", x = x, y = y,
             sigma_x = radius, sigma_y = radius,
             color = color, opacity = strength }
  }
)
@DATA(
  scene = { width = 600, height = 400, background = #080810 }
  elements::

    // ── Background atmosphere (splats, drawn first = furthest back) ──
    glow(300, 200, #1a0533, 180, 0.8)
    glow(180, 160, #0f1a40, 120, 0.6)
    glow(420, 240, #001a20, 110, 0.6)

    // ── Hard vector shapes ────────────────────────────────────────────
    { type = "rect", x = 40, y = 140, width = 140, height = 120, rx = 8,
      style = { fill = #0f3460, stroke = #4a9eff, stroke_width = 1.5, opacity = 0.9 } }

    { type = "circle", cx = 300, cy = 200, r = 70,
      style = { fill = #1a0533, stroke = #a78bfa, stroke_width = 2.0, opacity = 0.85 } }

    { type = "rect", x = 420, y = 140, width = 140, height = 120, rx = 8,
      style = { fill = #001a20, stroke = #22c55e, stroke_width = 1.5, opacity = 0.9 } }

    // ── SDF shapes (mid layer) ────────────────────────────────────────
    { type = "sdf", fill = #e94560,
      transform = { type = "translate", x = 300, y = 200 },
      tree = { type = "smooth_union", k = 0.35,
        children = [ { type = "circle", cx = -24, cy =  0, r = 32 },
                     { type = "circle", cx =  24, cy =  0, r = 32 },
                     { type = "circle", cx =   0, cy = -28, r = 26 } ] } }

    { type = "sdf", fill = #4a9eff,
      transform = { type = "translate", x = 110, y = 200 },
      tree = { type = "ring", cx = 0, cy = 0, r = 36, thickness = 12 } }

    { type = "sdf", fill = #22c55e,
      transform = { type = "translate", x = 490, y = 200 },
      tree = { type = "arc", cx = 0, cy = 0, r = 36,
               angle_start = -1.8, angle_end = 1.8, thickness = 10 } }

    // ── Tight highlight splats on top of the SDF shapes (bloom effect) ──
    glow(300, 200, #ff6b8a, 28, 0.6)
    glow(300, 200, #ffffff, 10, 0.5)
    glow(110, 200, #7ec8ff, 22, 0.55)
    glow(110, 200, #ffffff,  8, 0.4)
    glow(490, 200, #6effa0, 22, 0.55)
    glow(490, 200, #ffffff,  8, 0.4)

    // ── Ground reflection streak (anisotropic splat) ──────────────────
    { type = "splat", x = 300, y = 395, sigma_x = 220, sigma_y = 12,
      color = #e94560, opacity = 0.2 }
)

// examples/sdf_splat_orbit.msx
// Animated companion to sdf_splat_mixed.msx — same "hard SDF shape + soft
// splat glow" language, but now the splat bloom breathes in sync with the
// SDF blob's pulse, and a second splat drifts past behind both.
//
// z-order matters here: splats paint as soft glow, SDF paints with a hard
// edge. Elements later in `elements::` paint on top of earlier ones, so
// the glow splats are listed FIRST (a halo sitting behind the shape) and
// the SDF blob LAST (a crisp shape on top of that halo) — get this
// backwards and the glow just paints over the SDF, and the whole thing
// reads as one undifferentiated pulsing light instead of three legible,
// separately-animated pieces.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 500, height = 300, background = #080810 }
  duration = 1.4
  loop_mode = "ping_pong"
  elements::

    // Slow drifting atmosphere, furthest back and off to the side so its
    // own motion is legible on its own, not stacked under everything else.
    { type = "splat", id = "glow_drift", x = 120, y = 60,
      sigma_x = 70, sigma_y = 40, color = #16224f, opacity = 0.5 }

    // Soft halo behind the blob — smaller than the SDF shape itself and
    // dim, so it reads as a glow AROUND the shape rather than covering it.
    { type = "splat", id = "glow_bloom", x = 250, y = 170,
      sigma_x = 16, sigma_y = 16, color = #ff6b8a, opacity = 0.35 }
    { type = "splat", id = "glow_bloom_hot", x = 250, y = 170,
      sigma_x = 8, sigma_y = 8, color = #ffffff, opacity = 0.3 }

    // The SDF blob on top — two smooth-merged circles, breathing + turning
    // a full 45° so the rotation is unmistakable against the static halo.
    // Cyan is deliberate: nothing else in this scene uses that hue, so the
    // shape reads as clearly distinct from the pink/white glow behind it
    // even after GIF's 256-color palette quantization/dithering — a
    // same-family color (the original crimson) risked blending into the
    // glow's gradient once compressed, even with correct z-order/opacity.
    { type = "sdf", id = "core_blob", fill = #2dd4ff,
      transform = { type = "translate", x = 250, y = 170 },
      tree = { type = "smooth_union", k = 0.35,
        children = [ { type = "circle", cx = -20, cy = 0, r = 34 },
                     { type = "circle", cx =  20, cy = 0, r = 34 } ] } }

  animations::
    // Atmosphere drifts on its own slower rhythm, well clear of the blob.
    { target_id = "glow_drift", property = "translate_x",
      keyframes = [ { time = 0.0, value = -80.0 },
                    { time = 1.4, value = 80.0, easing = "ease_in_out" } ] }

    // Blob breathes (scale) and turns a full 45°, unmissable against the
    // halo sitting still behind it.
    { target_id = "core_blob", property = "scale_x",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 1.3, easing = "ease_out" } ] }
    { target_id = "core_blob", property = "scale_y",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 1.3, easing = "ease_out" } ] }
    { target_id = "core_blob", property = "rotate",
      keyframes = [ { time = 0.0, value = 0.0 },
                    { time = 1.4, value = 45.0, easing = "ease_in_out" } ] }

    // Halo grows and brightens in lockstep with the blob's scale peak,
    // but stays dim enough that the SDF's hard edge never disappears.
    { target_id = "glow_bloom", property = "scale_x",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 2.2, easing = "ease_out" } ] }
    { target_id = "glow_bloom", property = "scale_y",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 2.2, easing = "ease_out" } ] }
    { target_id = "glow_bloom", property = "opacity",
      keyframes = [ { time = 0.0, value = 0.35 },
                    { time = 0.7, value = 0.55, easing = "ease_out" } ] }
    { target_id = "glow_bloom_hot", property = "scale_x",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 2.4, easing = "ease_out" } ] }
    { target_id = "glow_bloom_hot", property = "scale_y",
      keyframes = [ { time = 0.0, value = 1.0 },
                    { time = 0.7, value = 2.4, easing = "ease_out" } ] }
)

// examples/shader_checkerboard.msx
// Second real shader-def example alongside shader_placeholder.msx —
// exercises msx-render-gpu's real WGSL-execution path (shader.rs) with
// the simplest possible test pattern instead of an organic effect, so a
// wrong render is immediately obvious rather than merely "looks a bit
// off" (see shaders/checkerboard.wgsl's header for the full rationale).
//
// Rendering status, same caveat as every shader-def example in this repo:
// only `msx rasterize-gpu` (msx-render-gpu, built with --features gpu)
// actually executes this WGSL. `msx rasterize` (CPU) and `msx render`
// (SVG) both fall back to flat `fallback_color` — see Def::Shader's doc
// comment in core/msx-ast/src/gradient.rs.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #14141c }
  defs::
    { type = "shader", id = "checker_1", source_ref = "shaders/checkerboard.wgsl",
      entry_point = "fs_main", fallback_color = #3a3a4a,
      uniforms = [ { name = "cells", type = "float", value = 10.0 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] },
                   { name = "color_a", type = "vec3", value = [0.9, 0.9, 0.95] },
                   { name = "color_b", type = "vec3", value = [0.16, 0.16, 0.22] } ] }
  elements::
    { type = "rect", x = 20, y = 20, width = 260, height = 160, rx = 8,
      style = { fill = "url(#checker_1)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/shader_orb.msx
// Third real shader-def example, alongside shader_placeholder.msx
// (plasma) and shader_checkerboard.msx (diagnostic grid) — this one is
// the "something cool" of the set: a raymarched, softly-lit, rim-glowing
// orb floating against a gradient void. It's also the heaviest WGSL of
// the three by a wide margin (a real sphere-tracing loop, not a single
// analytic expression per pixel) and the first to exercise two
// consecutive vec3 uniforms back to back — see shaders/orb_raymarch.wgsl's
// header for exactly why that's a genuinely new case, not just a new
// picture.
//
// Rendering status, same caveat as every shader-def example in this repo:
// only `msx rasterize-gpu` (msx-render-gpu, built with --features gpu)
// actually executes this WGSL. `msx rasterize` (CPU) and `msx render`
// (SVG) both fall back to flat `fallback_color` — see Def::Shader's doc
// comment in core/msx-ast/src/gradient.rs.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #05050a }
  defs::
    { type = "shader", id = "orb_1", source_ref = "shaders/orb_raymarch.wgsl",
      entry_point = "fs_main", fallback_color = #7c5cff,
      uniforms = [ { name = "resolution", type = "vec2", value = [300.0, 200.0] },
                   { name = "base_color", type = "vec3", value = [0.35, 0.25, 0.95] },
                   { name = "rim_color", type = "vec3", value = [0.4, 0.85, 1.0] },
                   { name = "speed", type = "float", value = 1.0 } ] }
  elements::
    { type = "rect", x = 0, y = 0, width = 300, height = 200,
      style = { fill = "url(#orb_1)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/shader_placeholder.msx
// Demonstrates a shader def referenced from a shape's fill, exactly like a
// gradient (`Paint::Ref("url(#id)")`). `source_ref` is a path to a real
// .wgsl file elsewhere in the repo, resolved/validated by `msx-cli compile`
// — this .msx file never embeds shader source itself (see the
// FUTURE(raw-section) note on ShaderDef in core/msx-ast/src/gradient.rs
// for why, and what changes if DixScript ever grows a raw text section).
//
// No renderer executes WGSL yet, so every render path today paints this
// rect with `fallback_color` — CPU/GPU raster paint it flat, and SVG
// export renders it as `none` (documented gap, see Def::to_svg). That's
// expected until msx-render-gpu grows a real WGSL-executing path.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #14141c }
  defs::
    { type = "shader", id = "plasma_1", source_ref = "shaders/plasma.wgsl",
      entry_point = "fs_main", fallback_color = #6b46ff,
      uniforms = [ { name = "speed", type = "float", value = 1.5 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] } ] }
  elements::
    { type = "rect", x = 40, y = 40, width = 220, height = 120, rx = 12,
      style = { fill = "url(#plasma_1)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/shader_placeholder.msx
// Demonstrates a shader def referenced from a shape's fill, exactly like a
// gradient (`Paint::Ref("url(#id)")`). `source_ref` is a path to a real
// .wgsl file elsewhere in the repo, resolved/validated by `msx-cli compile`
// — this .msx file never embeds shader source itself (see the
// FUTURE(raw-section) note on ShaderDef in core/msx-ast/src/gradient.rs
// for why, and what changes if DixScript ever grows a raw text section).
//
// No renderer executes WGSL yet, so every render path today paints this
// rect with `fallback_color` — CPU/GPU raster paint it flat, and SVG
// export renders it as `none` (documented gap, see Def::to_svg). That's
// expected until msx-render-gpu grows a real WGSL-executing path.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #14141c }
  defs::
    { type = "shader", id = "plasma_1", source_ref = "shaders/plasma.wgsl",
      entry_point = "fs_main", fallback_color = #6b46ff,
      uniforms = [ { name = "speed", type = "float", value = 1.5 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] } ] }
  elements::
    { type = "rect", x = 40, y = 40, width = 220, height = 120, rx = 12,
      style = { fill = "url(#plasma_1)", stroke = "none", stroke_width = 0, opacity = 1.0 } }
)

// examples/splat_atmosphere.msx
// Gaussian splats — additive soft glowing ellipses.
// Each splat is: opacity * exp(-(dx²/2σx² + dy²/2σy²))
// They accumulate alpha over each other (painter's algorithm, back to
// front). The result is painterly in a way hard vector shapes aren't —
// smooth light bloom, atmospheric haze, soft shadows. This is what makes
// MSX different from SVG: the two types of mark co-exist and compose.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 600, height = 400, background = #020408 }
  elements::

    // Background atmosphere — large, dim, overlapping color fields
    { type = "splat", x = 180, y = 200, sigma_x = 140, sigma_y = 110,
      color = #1a0533, opacity = 0.9 }
    { type = "splat", x = 420, y = 200, sigma_x = 140, sigma_y = 110,
      color = #001a33, opacity = 0.9 }
    { type = "splat", x = 300, y = 220, sigma_x = 160, sigma_y = 100,
      color = #0d0d2b, opacity = 0.8 }

    // Mid-range color clouds
    { type = "splat", x = 120, y = 160, sigma_x = 90, sigma_y = 70,
      color = #533483, opacity = 0.7 }
    { type = "splat", x = 480, y = 170, sigma_x = 85, sigma_y = 65,
      color = #0f3460, opacity = 0.7 }
    { type = "splat", x = 300, y = 340, sigma_x = 110, sigma_y = 50,
      color = #1a0533, opacity = 0.6 }

    // Accent glows — tighter, brighter, directional
    { type = "splat", x = 150, y = 180, sigma_x = 55, sigma_y = 40,
      color = #a78bfa, opacity = 0.75 }
    { type = "splat", x = 460, y = 190, sigma_x = 50, sigma_y = 38,
      color = #4a9eff, opacity = 0.8 }
    { type = "splat", x = 290, y = 150, sigma_x = 45, sigma_y = 35,
      color = #e94560, opacity = 0.55 }
    { type = "splat", x = 310, y = 260, sigma_x = 40, sigma_y = 30,
      color = #22c55e, opacity = 0.5 }

    // Hot core highlights — small sigma = tight, bright center point
    { type = "splat", x = 152, y = 182, sigma_x = 18, sigma_y = 14,
      color = #ffffff, opacity = 0.85 }
    { type = "splat", x = 458, y = 192, sigma_x = 16, sigma_y = 13,
      color = #e8f4ff, opacity = 0.9 }
    { type = "splat", x = 300, y = 155, sigma_x = 14, sigma_y = 11,
      color = #ffe8ec, opacity = 0.7 }

    // Anisotropic streaks — sigma_x >> sigma_y = elongated horizontally
    { type = "splat", x = 300, y = 380, sigma_x = 200, sigma_y = 18,
      color = #4a9eff, opacity = 0.3 }
    { type = "splat", x = 300, y = 370, sigma_x = 120, sigma_y = 10,
      color = #a78bfa, opacity = 0.25 }
)

// examples/splat_gradient_fill.msx
// Tests GaussianSplat::fill with a gradient reference — the AST/parser/
// binary/CPU/SVG/GPU work from this session's splat pass.
//
// Important honesty check baked into this example: a gradient `fill` on
// a splat does NOT get a real per-pixel gradient anywhere, on any
// renderer — CPU, SVG, and GPU all resolve it down to ONE flat
// representative color (the gradient's stop average) and use that as the
// splat's peak color, same as a shader's `fallback_color` substitutes for
// real WGSL on non-GPU renderers. This is different from a vector shape's
// gradient fill, which DOES render as a real gradient everywhere (SVG
// natively, CPU/GPU via their own gradient-shader support). Splats never
// got that support — only flat colors — so a gradient reference here is
// genuinely just a convenient way to say "use this def's average color"
// rather than "render this gradient."
//
// The two splats below are side by side specifically so the difference
// between "plain `color`" and "`fill` pointing at a gradient" is visible
// at a glance: same gradient, but the left splat ignores it (no `fill`
// set) and the right one uses it.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #14141c }
  defs::
    { type = "linear_gradient", id = "warm_glow", x1 = 0.0, y1 = 0.0, x2 = 1.0, y2 = 0.0,
      stops = [ { offset = 0.0, color = #ff7a00, opacity = 1.0 },
                { offset = 1.0, color = #7a1fa2, opacity = 1.0 } ] }
  elements::
    { type = "splat", x = 100, y = 100, sigma_x = 40, sigma_y = 40,
      color = #2ecc71, opacity = 0.9 }
    { type = "splat", x = 200, y = 100, sigma_x = 40, sigma_y = 40,
      fill = "url(#warm_glow)", color = #2ecc71, opacity = 0.9 }
)

// examples/splat_shader_fill.msx
// Tests GaussianSplat::fill with a Def::Shader reference — the actual
// point of this session's GPU work: real WGSL execution masked to the
// splat's own Gaussian falloff (SplatPipeline::draw_mask +
// ShaderFillPipeline::draw + MaskedShaderComposite, see splat_shader.rs),
// not the shader painted flat across a bounding box.
//
// Reuses shaders/plasma.wgsl (already in the repo, see
// shader_placeholder.msx) rather than introducing new WGSL — the point of
// this file is exercising the splat-specific masking path, not testing a
// new shader.
//
// Rendering status, same caveat as every shader-def example in this repo:
// only `msx rasterize-gpu`/`animate-gpu` (msx-render-gpu, built with
// --features gpu) execute this WGSL and apply the real Gaussian mask.
// `msx rasterize` (CPU) and `msx render` (SVG) both resolve the fill to
// plasma's own `fallback_color` and paint it flat within the splat's
// (approximated, CPU/SVG-only) falloff shape.
//
// The plain flat-color splat on the left is there so the masking is
// obvious at a glance on the GPU render: if the mask were broken (e.g.
// painting the shader across the full bounding square instead of the
// true falloff), the right splat would show hard corners the left one
// doesn't have.
@CONFIG( version -> "1.0.0" )
@DATA(
  scene = { width = 300, height = 200, background = #05050a }
  defs::
    { type = "shader", id = "plasma_1", source_ref = "shaders/plasma.wgsl",
      entry_point = "fs_main", fallback_color = #6a3de8,
      uniforms = [ { name = "speed", type = "float", value = 1.5 },
                   { name = "resolution", type = "vec2", value = [300.0, 200.0] } ] }
  elements::
    { type = "splat", x = 100, y = 100, sigma_x = 45, sigma_y = 45,
      color = #6a3de8, opacity = 1.0 }
    { type = "splat", x = 200, y = 100, sigma_x = 45, sigma_y = 45,
      fill = "url(#plasma_1)", color = #6a3de8, opacity = 1.0 }
)