Use widget asset skill for AI agents

npx -y summer-engine@latest skills install use-widget-asset --agent claude-code

isPack: true
packFiles: [{ url, name, type: "image/png" }, ...]
metadata.sliceBboxes: { "0": {x,y,w,h}, "1": ... }  // source-sheet coords
metadata.sliceMeta:   { "0": { category, widget?, pairWith?, parentSliceIndex? }, ... }

{
  kind: "slider" | "progress_bar" | "toggle" | "panel" | "button",
  frameMargins: [leftPct, topPct, rightPct, bottomPct],   // optional
  fillRect:    [xPct, yPct, wPct, hPct],                  // optional
  orientation: "horizontal" | "vertical",                 // optional
  pairCandidate: boolean                                  // optional
}

kind?
  ├─ "panel" or "button"
  │     └─ NinePatchRect, set patch_margin_* from frameMargins
  ├─ "slider"
  │     └─ HSlider/VSlider with two TextureRects underneath: track + fill
  ├─ "progress_bar"
  │     └─ TextureProgressBar with texture_under = 9-slice frame,
  │        texture_progress = cropped fill region
  └─ "toggle"
        └─ TextureRect that swaps texture between on/off via pairWith

extends NinePatchRect

@export var slice_url: String
@export var frame_margins: Array  # [L, T, R, B] in percentage
@export var slice_size: Vector2   # the slice's pixel dimensions

func _ready():
    texture = load(slice_url)
    var w = slice_size.x
    var h = slice_size.y
    patch_margin_left   = int(round(frame_margins[0] * w / 100.0))
    patch_margin_top    = int(round(frame_margins[1] * h / 100.0))
    patch_margin_right  = int(round(frame_margins[2] * w / 100.0))
    patch_margin_bottom = int(round(frame_margins[3] * h / 100.0))

extends TextureProgressBar

@export var slice_url: String          # The full bar (frame + fill at 100%)
@export var fill_rect: Array           # [x, y, w, h] in percentage
@export var orientation: String = "horizontal"

func _ready():
    var tex = load(slice_url)
    # The base / "under" texture is the same image — the bar masks it
    # to whatever value 0-100 we set.
    texture_under  = tex
    texture_progress = tex
    fill_mode = TextureProgressBar.FILL_LEFT_TO_RIGHT if orientation == "horizontal" else TextureProgressBar.FILL_TOP_TO_BOTTOM
    # The fill rect tells the bar which sub-region of the texture is the
    # bar fill (vs the frame). Texture_progress_offset + stretch_margin_*
    # form the inset.
    var sw = tex.get_width()
    var sh = tex.get_height()
    var fx = int(round(fill_rect[0] * sw / 100.0))
    var fy = int(round(fill_rect[1] * sh / 100.0))
    var fw = int(round(fill_rect[2] * sw / 100.0))
    var fh = int(round(fill_rect[3] * sh / 100.0))
    stretch_margin_left   = fx
    stretch_margin_top    = fy
    stretch_margin_right  = sw - (fx + fw)
    stretch_margin_bottom = sh - (fy + fh)

extends TextureRect

@export var on_url: String   # The slice with name ending in "_on"
@export var off_url: String  # The pair's URL (sliceMeta.pairWith)

var _state := false

func set_state(on: bool) -> void:
    _state = on
    texture = load(on_url if on else off_url)

func _ready():
    texture = load(off_url)

const zOrder      = slice.zOrder      ?? slice.layerIndex   ?? packFileIndex;
const isComposite = slice.isComposite ?? slice.isReference  ?? false;