@cimplify/sdk 0.108.0 → 0.110.2

package/dist/chunk-PPF2BYFL.mjs

@@ -0,0 +1,2191 @@
+import { tokens, UiTheme, mergeThemes, varDefault, UiVar, UiSlot } from './chunk-WLMINRC4.mjs';
+import { DIRECTION, JUSTIFY, ALIGN, TEXT_ALIGN, VERTICAL, SHAPE, AXES, TEXT_WRAP_STYLE, UiProp, UiUnit, UI_MAX_EXCLUSIONS, UiFlag, UiEventKind, UiStyleError, parseColor, StyleCache, writeStyle, UiNumberFormat, UiVectorData, UiExclusionShape, UiTransition, UiEasing, UiRole, UiTrait, UiAction, PatchWriter, UiTextOption, UiKind, UiAnchor, readEvent, eventStride, GRADIENT_KIND } from './chunk-RFVRPYR2.mjs';
+import { suggest, didYouMean } from './chunk-F6XRYEM3.mjs';
+import { TextLayout, defaultLayoutStyle, breakDictionaries } from './chunk-GYLP6UG4.mjs';
+import { fontTable } from './chunk-XJA2NGTI.mjs';
+
+// src/interactives/game-ui/styling/keys.ts
+var ValueType = {
+  length: 0,
+  float: 1,
+  int: 2,
+  color: 3,
+  enumeration: 4,
+  bool: 5,
+  edges: 6,
+  pair: 7,
+  colors: 8,
+  quad: 9,
+  shadow: 10,
+  gradient: 11
+}, GRADIENT_STOPS = 4, SHADOW_WORDS = 5, GRADIENT_WORDS = 1 + (4) * 2 + 4, GRADIENT_FIRST_FLOAT = 1 + (4), VALUE_WORDS = [1, 1, 1, 1, 1, 1, 4, 2, 4, 4, (5), GRADIENT_WORDS];
+function isFloatWord(type, word) {
+  switch (type) {
+    case ValueType.length:
+    case ValueType.float:
+    case ValueType.edges:
+    case ValueType.pair:
+    case ValueType.quad:
+      return true;
+    case ValueType.shadow:
+      return word > 0;
+    case ValueType.gradient:
+      return word >= GRADIENT_FIRST_FLOAT;
+    default:
+      return false;
+  }
+}
+function isColorWord(type, word) {
+  return type === ValueType.color || type === ValueType.colors ? true : type === ValueType.shadow ? word === 0 : type === ValueType.gradient ? word > 0 && word < GRADIENT_FIRST_FLOAT : false;
+}
+var Tier = { shorthandOfShorthands: 1e3, shorthandOfLonghands: 2e3, plain: 3e3, longhand: 4e3 }, DISPLAY = { flex: 0, none: 1 }, POSITION = { relative: 0, absolute: 1 }, POINTER = { auto: 0, none: 1 }, T = ValueType, S1 = Tier.shorthandOfShorthands, S2 = Tier.shorthandOfLonghands, P = Tier.plain, L = Tier.longhand, SPECS = [
+  { name: "width", type: T.length, tier: P },
+  { name: "height", type: T.length, tier: P },
+  { name: "minWidth", type: T.length, tier: P },
+  { name: "minHeight", type: T.length, tier: P },
+  { name: "maxWidth", type: T.length, tier: P },
+  { name: "maxHeight", type: T.length, tier: P },
+  { name: "basis", type: T.length, tier: P },
+  { name: "inset", type: T.length, tier: S1 },
+  { name: "insetInline", type: T.length, tier: S2 },
+  { name: "insetBlock", type: T.length, tier: S2 },
+  { name: "top", type: T.length, tier: L },
+  { name: "right", type: T.length, tier: L },
+  { name: "bottom", type: T.length, tier: L },
+  { name: "left", type: T.length, tier: L },
+  { name: "padding", type: T.edges, tier: S1 },
+  { name: "paddingInline", type: T.float, tier: S2 },
+  { name: "paddingBlock", type: T.float, tier: S2 },
+  { name: "paddingTop", type: T.float, tier: L },
+  { name: "paddingRight", type: T.float, tier: L },
+  { name: "paddingBottom", type: T.float, tier: L },
+  { name: "paddingLeft", type: T.float, tier: L },
+  { name: "margin", type: T.edges, tier: S1 },
+  { name: "marginInline", type: T.float, tier: S2 },
+  { name: "marginBlock", type: T.float, tier: S2 },
+  { name: "marginTop", type: T.float, tier: L },
+  { name: "marginRight", type: T.float, tier: L },
+  { name: "marginBottom", type: T.float, tier: L },
+  { name: "marginLeft", type: T.float, tier: L },
+  { name: "borderWidth", type: T.edges, tier: S1 },
+  { name: "borderInlineWidth", type: T.float, tier: S2 },
+  { name: "borderBlockWidth", type: T.float, tier: S2 },
+  { name: "borderTopWidth", type: T.float, tier: L },
+  { name: "borderRightWidth", type: T.float, tier: L },
+  { name: "borderBottomWidth", type: T.float, tier: L },
+  { name: "borderLeftWidth", type: T.float, tier: L },
+  { name: "gap", type: T.pair, tier: S2 },
+  { name: "columnGap", type: T.float, tier: L },
+  { name: "rowGap", type: T.float, tier: L },
+  { name: "grow", type: T.float, tier: P },
+  { name: "shrink", type: T.float, tier: P },
+  { name: "aspect", type: T.float, tier: P },
+  { name: "direction", type: T.enumeration, tier: P, table: DIRECTION },
+  { name: "justify", type: T.enumeration, tier: P, table: JUSTIFY },
+  { name: "alignItems", type: T.enumeration, tier: P, table: ALIGN },
+  { name: "alignSelf", type: T.enumeration, tier: P, table: ALIGN },
+  { name: "alignContent", type: T.enumeration, tier: P, table: ALIGN },
+  { name: "position", type: T.enumeration, tier: P, table: POSITION },
+  { name: "wrap", type: T.bool, tier: P },
+  { name: "display", type: T.enumeration, tier: P, table: DISPLAY },
+  { name: "fill", type: T.color, tier: P },
+  { name: "borderColor", type: T.colors, tier: S1 },
+  { name: "borderInlineColor", type: T.color, tier: S2 },
+  { name: "borderBlockColor", type: T.color, tier: S2 },
+  { name: "borderTopColor", type: T.color, tier: L },
+  { name: "borderRightColor", type: T.color, tier: L },
+  { name: "borderBottomColor", type: T.color, tier: L },
+  { name: "borderLeftColor", type: T.color, tier: L },
+  { name: "radius", type: T.edges, tier: S2 },
+  { name: "radiusTopLeft", type: T.float, tier: L },
+  { name: "radiusTopRight", type: T.float, tier: L },
+  { name: "radiusBottomRight", type: T.float, tier: L },
+  { name: "radiusBottomLeft", type: T.float, tier: L },
+  { name: "opacity", type: T.float, tier: P },
+  { name: "translate", type: T.pair, tier: S2 },
+  { name: "translateX", type: T.float, tier: L },
+  { name: "translateY", type: T.float, tier: L },
+  { name: "scale", type: T.pair, tier: S2 },
+  { name: "scaleX", type: T.float, tier: L },
+  { name: "scaleY", type: T.float, tier: L },
+  { name: "rotate", type: T.float, tier: P },
+  { name: "origin", type: T.pair, tier: P },
+  { name: "zIndex", type: T.int, tier: P },
+  { name: "hidden", type: T.bool, tier: P },
+  { name: "clip", type: T.bool, tier: P },
+  { name: "pointerEvents", type: T.enumeration, tier: P, table: POINTER },
+  { name: "layer", type: T.bool, tier: P },
+  { name: "shadow", type: T.shadow, tier: P },
+  { name: "gradient", type: T.gradient, tier: P },
+  { name: "fontFamily", type: T.int, tier: P },
+  { name: "fontWeight", type: T.int, tier: P },
+  { name: "fontSize", type: T.float, tier: P },
+  { name: "lineHeight", type: T.float, tier: P },
+  { name: "letterSpacing", type: T.float, tier: P },
+  { name: "textAlign", type: T.enumeration, tier: P, table: TEXT_ALIGN },
+  { name: "textColor", type: T.color, tier: P },
+  { name: "textWrap", type: T.bool, tier: P },
+  { name: "verticalAlign", type: T.enumeration, tier: P, table: VERTICAL },
+  { name: "placeholderColor", type: T.color, tier: P },
+  { name: "tint", type: T.color, tier: P },
+  { name: "uv", type: T.quad, tier: P },
+  { name: "nineSlice", type: T.edges, tier: P },
+  { name: "nineSliceUv", type: T.edges, tier: P },
+  { name: "shape", type: T.enumeration, tier: P, table: SHAPE },
+  { name: "stroke", type: T.color, tier: P },
+  { name: "strokeWidth", type: T.float, tier: P },
+  { name: "scrollAxes", type: T.enumeration, tier: P, table: AXES },
+  { name: "textWrapStyle", type: T.enumeration, tier: P, table: TEXT_WRAP_STYLE }
+], KEY_COUNT = SPECS.length, KEY_NAMES = SPECS.map((s) => s.name), KEY_TYPES = Uint8Array.from(SPECS, (s) => s.type), KEY_TIERS = Uint16Array.from(SPECS, (s) => s.tier), KEY_TABLES = SPECS.map((s) => s.table ?? null), ALIASES = {
+  borderRadius: "radius",
+  borderTopLeftRadius: "radiusTopLeft",
+  borderTopRightRadius: "radiusTopRight",
+  borderBottomRightRadius: "radiusBottomRight",
+  borderBottomLeftRadius: "radiusBottomLeft",
+  paddingHorizontal: "paddingInline",
+  paddingVertical: "paddingBlock",
+  marginHorizontal: "marginInline",
+  marginVertical: "marginBlock",
+  flexGrow: "grow",
+  flexShrink: "shrink",
+  flexBasis: "basis",
+  flexDirection: "direction",
+  justifyContent: "justify",
+  backgroundColor: "fill",
+  color: "textColor",
+  aspectRatio: "aspect"
+}, KEY_IDS = /* @__PURE__ */ new Map();
+SPECS.forEach((s, i) => KEY_IDS.set(s.name, i));
+for (let [alias, target] of Object.entries(ALIASES)) KEY_IDS.set(alias, KEY_IDS.get(target));
+function keyId(name) {
+  return KEY_IDS.get(name) ?? -1;
+}
+var STYLE_PROPERTY_NAMES = [...KEY_IDS.keys()], Condition = {
+  pressed: 1,
+  focus: 2,
+  disabled: 4,
+  landscape: 8,
+  portrait: 16,
+  safe: 32,
+  sm: 64,
+  lg: 128
+}, STATE_CONDITIONS = Condition.pressed | Condition.focus | Condition.disabled, CONTEXT_CONDITIONS = Condition.landscape | Condition.portrait | Condition.safe | Condition.sm | Condition.lg, CONDITION_KEYS = {
+  ":pressed": Condition.pressed,
+  ":active": Condition.pressed,
+  ":focus": Condition.focus,
+  ":disabled": Condition.disabled,
+  "@landscape": Condition.landscape,
+  "@portrait": Condition.portrait,
+  "@safe": Condition.safe,
+  "@sm": Condition.sm,
+  "@lg": Condition.lg
+}, PSEUDO_ACTIVE = 170, PSEUDO_FOCUS = 150, PSEUDO_DISABLED = 92, AT_MEDIA = 200, CONDITION_BITS = 8, CONDITION_PRIORITY = [(170), (150), (92), (200), (200), (200), (200), (200)];
+function conditionPriority(mask) {
+  let total = 0;
+  for (let bit = 0; bit < (8); bit++) mask & 1 << bit && (total += CONDITION_PRIORITY[bit]);
+  return total;
+}
+var WireEmit = { length: 0, float: 1, word: 2, floats: 3, words: 4, shadow: 5, gradient: 6, flag: 7 }, BLACK = 0, WHITE = 4294967295, PLACEHOLDER = 4294967168, DEFAULT_WEIGHT = 400, DEFAULT_FONT = 16, CENTER = 0.5;
+function length(prop, chain) {
+  return { prop, emit: WireEmit.length, components: [chain], defaults: [0, UiUnit.auto] };
+}
+function single(prop, emit, key, fallback) {
+  return { prop, emit, components: [[[key, 0]]], defaults: [fallback] };
+}
+function sides(prop, all, inline, block, top, right, bottom, left) {
+  return {
+    prop,
+    emit: WireEmit.floats,
+    components: [
+      [[all, 0], [block, 0], [top, 0]],
+      [[all, 1], [inline, 0], [right, 0]],
+      [[all, 2], [block, 0], [bottom, 0]],
+      [[all, 3], [inline, 0], [left, 0]]
+    ],
+    defaults: [0, 0, 0, 0]
+  };
+}
+function pair(prop, all, first, second, fallback) {
+  return {
+    prop,
+    emit: WireEmit.floats,
+    components: [first === null ? [[all, 0]] : [[all, 0], [first, 0]], second === null ? [[all, 1]] : [[all, 1], [second, 0]]],
+    defaults: [fallback, fallback]
+  };
+}
+function whole(prop, emit, key, defaults2) {
+  return { prop, emit, components: defaults2.map((_, i) => [[key, i]]), defaults: defaults2 };
+}
+var WIRE_SPECS = [
+  length(UiProp.width, [["width", 0]]),
+  length(UiProp.height, [["height", 0]]),
+  length(UiProp.min_width, [["minWidth", 0]]),
+  length(UiProp.min_height, [["minHeight", 0]]),
+  length(UiProp.max_width, [["maxWidth", 0]]),
+  length(UiProp.max_height, [["maxHeight", 0]]),
+  length(UiProp.basis, [["basis", 0]]),
+  length(UiProp.inset_top, [["inset", 0], ["insetBlock", 0], ["top", 0]]),
+  length(UiProp.inset_right, [["inset", 0], ["insetInline", 0], ["right", 0]]),
+  length(UiProp.inset_bottom, [["inset", 0], ["insetBlock", 0], ["bottom", 0]]),
+  length(UiProp.inset_left, [["inset", 0], ["insetInline", 0], ["left", 0]]),
+  sides(UiProp.padding, "padding", "paddingInline", "paddingBlock", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"),
+  sides(UiProp.margin, "margin", "marginInline", "marginBlock", "marginTop", "marginRight", "marginBottom", "marginLeft"),
+  sides(UiProp.border_width, "borderWidth", "borderInlineWidth", "borderBlockWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"),
+  pair(UiProp.gap, "gap", "columnGap", "rowGap", 0),
+  single(UiProp.grow, WireEmit.float, "grow", 0),
+  single(UiProp.shrink, WireEmit.float, "shrink", 1),
+  single(UiProp.aspect, WireEmit.float, "aspect", 0),
+  single(UiProp.direction, WireEmit.word, "direction", DIRECTION.column),
+  single(UiProp.justify, WireEmit.word, "justify", JUSTIFY.start),
+  single(UiProp.align_items, WireEmit.word, "alignItems", ALIGN.stretch),
+  single(UiProp.align_self, WireEmit.word, "alignSelf", ALIGN.auto),
+  single(UiProp.align_content, WireEmit.word, "alignContent", ALIGN.stretch),
+  single(UiProp.position, WireEmit.word, "position", POSITION.relative),
+  single(UiProp.wrap, WireEmit.word, "wrap", 0),
+  single(UiProp.display_none, WireEmit.word, "display", DISPLAY.flex),
+  single(UiProp.fill, WireEmit.word, "fill", (0)),
+  {
+    prop: UiProp.border_color,
+    emit: WireEmit.words,
+    components: [
+      [["borderColor", 0], ["borderBlockColor", 0], ["borderTopColor", 0]],
+      [["borderColor", 1], ["borderInlineColor", 0], ["borderRightColor", 0]],
+      [["borderColor", 2], ["borderBlockColor", 0], ["borderBottomColor", 0]],
+      [["borderColor", 3], ["borderInlineColor", 0], ["borderLeftColor", 0]]
+    ],
+    defaults: [(0), (0), (0), (0)]
+  },
+  {
+    prop: UiProp.radii,
+    emit: WireEmit.floats,
+    components: [
+      [["radius", 0], ["radiusTopLeft", 0]],
+      [["radius", 1], ["radiusTopRight", 0]],
+      [["radius", 2], ["radiusBottomRight", 0]],
+      [["radius", 3], ["radiusBottomLeft", 0]]
+    ],
+    defaults: [0, 0, 0, 0]
+  },
+  single(UiProp.opacity, WireEmit.float, "opacity", 1),
+  pair(UiProp.translate, "translate", "translateX", "translateY", 0),
+  pair(UiProp.scale, "scale", "scaleX", "scaleY", 1),
+  single(UiProp.rotate, WireEmit.float, "rotate", 0),
+  pair(UiProp.origin, "origin", null, null, (0.5)),
+  single(UiProp.z_index, WireEmit.word, "zIndex", 0),
+  single(UiProp.hidden, WireEmit.word, "hidden", 0),
+  single(UiProp.clip, WireEmit.word, "clip", 0),
+  single(UiProp.pointer_events_none, WireEmit.word, "pointerEvents", POINTER.auto),
+  single(UiProp.flags, WireEmit.flag, "layer", 0),
+  whole(UiProp.shadow, WireEmit.shadow, "shadow", [0, 0, 0, 0, 0]),
+  whole(UiProp.gradient, WireEmit.gradient, "gradient", new Array(GRADIENT_WORDS).fill(0)),
+  single(UiProp.font_family, WireEmit.word, "fontFamily", 0),
+  single(UiProp.font_weight, WireEmit.word, "fontWeight", (400)),
+  single(UiProp.font_size, WireEmit.float, "fontSize", (16)),
+  single(UiProp.line_height, WireEmit.float, "lineHeight", 0),
+  single(UiProp.letter_spacing, WireEmit.float, "letterSpacing", 0),
+  single(UiProp.text_align, WireEmit.word, "textAlign", TEXT_ALIGN.start),
+  single(UiProp.text_color, WireEmit.word, "textColor", (4294967295)),
+  single(UiProp.text_wrap, WireEmit.word, "textWrap", 0),
+  single(UiProp.vertical_align, WireEmit.word, "verticalAlign", VERTICAL.top),
+  single(UiProp.placeholder_color, WireEmit.word, "placeholderColor", (4294967168)),
+  single(UiProp.image_tint, WireEmit.word, "tint", (4294967295)),
+  whole(UiProp.image_uv, WireEmit.floats, "uv", [0, 0, 1, 1]),
+  whole(UiProp.nine_slice, WireEmit.floats, "nineSlice", [0, 0, 0, 0]),
+  whole(UiProp.nine_slice_uv, WireEmit.floats, "nineSliceUv", [0, 0, 0, 0]),
+  single(UiProp.shape_kind, WireEmit.word, "shape", SHAPE.rect),
+  single(UiProp.stroke_color, WireEmit.word, "stroke", (0)),
+  single(UiProp.stroke_width, WireEmit.float, "strokeWidth", 0),
+  single(UiProp.scroll_axes, WireEmit.word, "scrollAxes", AXES.none),
+  single(UiProp.text_wrap_style, WireEmit.word, "textWrapStyle", TEXT_WRAP_STYLE.greedy)
+], WIRE_COUNT = WIRE_SPECS.length, WIRE_PROPS = Uint8Array.from(WIRE_SPECS, (w) => w.prop), WIRE_EMITS = Uint8Array.from(WIRE_SPECS, (w) => w.emit), WIRE_COMPONENT_START = new Uint16Array(WIRE_COUNT), WIRE_COMPONENT_COUNT = new Uint8Array(WIRE_COUNT), WIRE_DEFAULT_UNIT = new Uint8Array(WIRE_COUNT), components = [], defaults = [], chainStart = [], chainCount = [], chainKeys = [], chainWords = [], keyWires = Array.from({ length: KEY_COUNT }, () => []);
+WIRE_SPECS.forEach((wire, w) => {
+  WIRE_COMPONENT_START[w] = components.length, WIRE_COMPONENT_COUNT[w] = wire.components.length, WIRE_DEFAULT_UNIT[w] = wire.emit === WireEmit.length ? wire.defaults[1] : 0, wire.components.forEach((chain, c) => {
+    components.push(components.length), defaults.push(wire.defaults[c]), chainStart.push(chainKeys.length), chainCount.push(chain.length);
+    for (let [name, word] of chain) {
+      let id = keyId(name);
+      if (id < 0) throw new Error(`wire chain names unknown key ${name}`);
+      chainKeys.push(id), chainWords.push(word), keyWires[id].indexOf(w) < 0 && keyWires[id].push(w);
+    }
+  });
+});
+var descendants = Array.from({ length: KEY_COUNT }, () => /* @__PURE__ */ new Set());
+for (let wire of WIRE_SPECS)
+  for (let chain of wire.components)
+    for (let i = 0; i < chain.length; i++)
+      for (let j = i + 1; j < chain.length; j++) descendants[keyId(chain[i][0])].add(keyId(chain[j][0]));
+var KEY_DESCENDANTS = descendants.map((set) => [...set].sort((a, b) => a - b)), COMPONENT_DEFAULTS = Float64Array.from(defaults), COMPONENT_CHAIN_START = Uint16Array.from(chainStart), COMPONENT_CHAIN_COUNT = Uint8Array.from(chainCount), CHAIN_KEYS = Uint8Array.from(chainKeys), CHAIN_WORDS = Uint8Array.from(chainWords), KEY_WIRES = keyWires.map((list) => Uint8Array.from(list)), MAX_COMPONENTS = GRADIENT_WORDS;
+
+// src/interactives/game-ui/styling/compile.ts
+var STYLE_BLOCK_MAGIC = 827937875, STYLE_BLOCK_VERSION = 1, STYLE_BLOCK_HEADER_WORDS = 2, VariantKind = { literal: 0, null: 1, referenced: 2 }, SLOT_REFERENCE = 2147483648, BYTE = 255, COUNT_SHIFT = 8, PAYLOAD_SHIFT = 8, KIND_SHIFT = 16, UNIT_SHIFT = 20, NIBBLE = 15, VERSION_SHIFT = 16, COUNT_MASK = 65535, PERCENT = "%", AUTO = "auto", DEFAULT = "default", UiStyleCompileError = class extends UiStyleError {
+  constructor(message, kind, subject, suggestion) {
+    super(message);
+    this.kind = kind;
+    this.subject = subject;
+    this.suggestion = suggestion;
+    this.name = "UiStyleCompileError";
+  }
+};
+function propertyError(name) {
+  let hit = suggest(name, STYLE_PROPERTY_NAMES);
+  return new UiStyleCompileError(`unknown style property "${name}"${hit === null ? "" : `; did you mean "${hit}"?`}`, "property", name, hit);
+}
+function valueError(key, detail) {
+  return new UiStyleCompileError(`${key}: ${detail}`, "value", key, null);
+}
+var f32 = new Float32Array(1), u32 = new Uint32Array(f32.buffer);
+function floatBits(value) {
+  return f32[0] = value, u32[0];
+}
+function bitsFloat(word) {
+  return u32[0] = word, f32[0];
+}
+function isReference(value) {
+  return value instanceof UiVar || value instanceof UiSlot;
+}
+function referenceWord(value) {
+  return value instanceof UiSlot ? ((2147483648) | value.index) >>> 0 : value.id;
+}
+function isPlainObject(value) {
+  if (typeof value != "object" || value === null || Array.isArray(value) || isReference(value)) return false;
+  let proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function isConditional(value) {
+  if (!isPlainObject(value)) return false;
+  for (let key of Object.keys(value)) if (key === DEFAULT || key.startsWith(":") || key.startsWith("@")) return true;
+  return false;
+}
+function flatten(key, value, mask, out) {
+  if (!isConditional(value)) {
+    out.delete(mask), out.set(mask, value);
+    return;
+  }
+  for (let [name, nested] of Object.entries(value)) {
+    if (name === DEFAULT) {
+      flatten(key, nested, mask, out);
+      continue;
+    }
+    let bit = CONDITION_KEYS[name];
+    if (bit === void 0) {
+      let hit = suggest(name, Object.keys(CONDITION_KEYS));
+      throw new UiStyleCompileError(`${key}: unknown condition "${name}"${hit === null ? "" : `; did you mean "${hit}"?`}`, "condition", name, hit);
+    }
+    flatten(key, nested, mask | bit, out);
+  }
+}
+var Encoder = class {
+  constructor(key) {
+    this.key = key;
+    this.words = [];
+    this.refs = 0;
+    this.unit = 0;
+  }
+  reference(value) {
+    this.refs |= 1 << this.words.length, this.words.push(referenceWord(value));
+  }
+  float(value) {
+    if (isReference(value)) return this.reference(value);
+    if (typeof value != "number" || !Number.isFinite(value)) throw valueError(this.key, `${String(value)} must be a finite number`);
+    this.words.push(floatBits(value));
+  }
+  color(value) {
+    if (isReference(value)) return this.reference(value);
+    if (typeof value != "number" && typeof value != "string") throw valueError(this.key, `${String(value)} must be a colour`);
+    try {
+      this.words.push(parseColor(value));
+    } catch (error) {
+      throw valueError(this.key, error.message);
+    }
+  }
+  length(value) {
+    if (isReference(value))
+      return this.unit = value instanceof UiSlot && value.percent ? UiUnit.percent : UiUnit.points, this.reference(value);
+    if (typeof value == "number" && Number.isFinite(value)) {
+      this.unit = UiUnit.points, this.words.push(floatBits(value));
+      return;
+    }
+    if (value === AUTO) {
+      this.unit = UiUnit.auto, this.words.push(0);
+      return;
+    }
+    if (typeof value == "string" && value.endsWith(PERCENT)) {
+      let amount = Number(value.slice(0, -PERCENT.length));
+      if (Number.isFinite(amount)) {
+        this.unit = UiUnit.percent, this.words.push(floatBits(amount));
+        return;
+      }
+    }
+    throw valueError(this.key, `length ${String(value)} must be a number, a percentage or auto`);
+  }
+  enumeration(value, table) {
+    if (isReference(value)) return this.reference(value);
+    let code = typeof value == "string" ? table[value] : void 0;
+    if (code === void 0) throw valueError(this.key, `${String(value)} is not one of ${Object.keys(table).join(", ")}${didYouMean(String(value), Object.keys(table))}`);
+    this.words.push(code);
+  }
+  bool(value) {
+    if (isReference(value)) return this.reference(value);
+    if (typeof value != "boolean") throw valueError(this.key, `${String(value)} must be true or false`);
+    this.words.push(value ? 1 : 0);
+  }
+  int(value) {
+    if (isReference(value)) return this.reference(value);
+    if (typeof value != "number" || !Number.isInteger(value)) throw valueError(this.key, `${String(value)} must be an integer`);
+    this.words.push((value | 0) >>> 0);
+  }
+  repeat(value, count, write, what) {
+    if (Array.isArray(value)) {
+      if (value.length !== count) throw valueError(this.key, `${what} takes one value or ${count} values`);
+      for (let item of value) write(item);
+      return;
+    }
+    for (let i = 0; i < count; i++) write(value);
+  }
+  shadow(value) {
+    if (!isPlainObject(value)) throw valueError(this.key, "a shadow is { color, x, y, blur, spread }");
+    let known = ["color", "x", "y", "blur", "spread"];
+    for (let name of Object.keys(value)) if (known.indexOf(name) < 0) throw valueError(this.key, `shadow has no ${name}${didYouMean(name, known)}`);
+    this.color(value.color), this.float(value.x ?? 0), this.float(value.y ?? 0), this.float(value.blur ?? 0), this.float(value.spread ?? 0);
+  }
+  gradient(value) {
+    if (!isPlainObject(value)) throw valueError(this.key, "a gradient is { kind, stops, from, to }");
+    let known = ["kind", "stops", "from", "to"];
+    for (let name of Object.keys(value)) if (known.indexOf(name) < 0) throw valueError(this.key, `gradient has no ${name}${didYouMean(name, known)}`);
+    let stops = value.stops;
+    if (!Array.isArray(stops) || stops.length === 0 || stops.length > (4)) throw valueError(this.key, `a gradient needs between 1 and ${(4)} stops`);
+    this.enumeration(value.kind ?? "linear", GRADIENT_KIND);
+    let pick = (i) => {
+      let stop = stops[Math.min(i, stops.length - 1)];
+      if (!Array.isArray(stop) || stop.length !== 2) throw valueError(this.key, "each gradient stop is [colour, offset]");
+      return stop;
+    };
+    for (let i = 0; i < (4); i++) this.color(pick(i)[0]);
+    for (let i = 0; i < (4); i++) this.float(pick(i)[1]);
+    let from = value.from ?? [0, 0], to = value.to ?? [0, 1];
+    if (!Array.isArray(from) || from.length !== 2 || !Array.isArray(to) || to.length !== 2) throw valueError(this.key, "gradient from and to are [x, y] points");
+    this.float(from[0]), this.float(from[1]), this.float(to[0]), this.float(to[1]);
+  }
+};
+function encodeLeaf(key, type, table, value) {
+  let e = new Encoder(key), whole2 = isReference(value);
+  if (whole2 && (type === ValueType.shadow || type === ValueType.gradient)) throw valueError(key, "a variable can fill a colour or a number inside a shadow or gradient, not the whole value");
+  switch (type) {
+    case ValueType.length:
+      e.length(value);
+      break;
+    case ValueType.float:
+      e.float(value);
+      break;
+    case ValueType.int:
+      e.int(value);
+      break;
+    case ValueType.color:
+      e.color(value);
+      break;
+    case ValueType.enumeration:
+      e.enumeration(value, table);
+      break;
+    case ValueType.bool:
+      e.bool(value);
+      break;
+    case ValueType.edges:
+      e.repeat(value, 4, (v) => e.float(v), "an edge value");
+      break;
+    case ValueType.pair:
+      e.repeat(value, 2, (v) => e.float(v), "a pair");
+      break;
+    case ValueType.colors:
+      e.repeat(value, 4, (v) => e.color(v), "a border colour");
+      break;
+    case ValueType.quad:
+      if (!Array.isArray(value) && !whole2) throw valueError(key, "takes four numbers");
+      e.repeat(value, 4, (v) => e.float(v), "a quad");
+      break;
+    case ValueType.shadow:
+      e.shadow(value);
+      break;
+    case ValueType.gradient:
+      e.gradient(value);
+      break;
+  }
+  if (e.words.length !== VALUE_WORDS[type]) throw valueError(key, "encoded to the wrong width");
+  return e;
+}
+function compileStyle(definition) {
+  if (!isPlainObject(definition)) throw new UiStyleCompileError("a style is an object of style properties", "value", "style", null);
+  let byKey = /* @__PURE__ */ new Map();
+  for (let [name, value] of Object.entries(definition)) {
+    if (value === void 0) continue;
+    let id = keyId(name);
+    if (id < 0) throw propertyError(name);
+    let variants = /* @__PURE__ */ new Map();
+    flatten(name, value, 0, variants), byKey.delete(id), byKey.set(id, variants);
+    for (let child of KEY_DESCENDANTS[id])
+      byKey.delete(child), byKey.set(child, /* @__PURE__ */ new Map([[0, null]]));
+  }
+  let ids = [...byKey.keys()].sort((a, b) => a - b), out = [(827937875), ids.length | (1) << (16)];
+  for (let id of ids) {
+    let variants = byKey.get(id), masks = [...variants.keys()].sort((a, b) => a - b);
+    out.push(id | masks.length << (8));
+    let type = KEY_TYPES[id];
+    for (let mask of masks) {
+      let leaf = variants.get(mask);
+      if (leaf === null) {
+        out.push(mask | VariantKind.null << (16));
+        continue;
+      }
+      let encoded = encodeLeaf(KEY_NAMES[id], type, KEY_TABLES[id], leaf), kind = encoded.refs === 0 ? VariantKind.literal : VariantKind.referenced;
+      out.push((mask | encoded.words.length << (8) | kind << (16) | encoded.unit << (20)) >>> 0), kind === VariantKind.referenced && out.push(encoded.refs);
+      for (let word of encoded.words) out.push(word >>> 0);
+    }
+  }
+  return Uint32Array.from(out);
+}
+function readBlock(words) {
+  if (words.length < (2) || words[0] >>> 0 !== (827937875)) throw new UiStyleError("compiled style data is not a style block");
+  let version = words[1] >>> (16);
+  if (version !== (1)) throw new UiStyleError(`compiled style block version ${version} is not supported; rebuild with this SDK`);
+  let keys = words[1] & (65535), out = [], at = (2);
+  for (let k = 0; k < keys; k++) {
+    let head = words[at++], key = head & (255), count = head >>> (8) & (255);
+    for (let v = 0; v < count; v++) {
+      let word = words[at++], kind = word >>> (16) & (15), size2 = word >>> (8) & (255), refs = kind === VariantKind.referenced ? words[at++] : 0, payload = [];
+      for (let i = 0; i < size2; i++) payload.push(words[at++] >>> 0);
+      out.push({ key, mask: word & (255), kind, unit: word >>> (20) & (15), refs, payload });
+    }
+  }
+  if (at !== words.length) throw new UiStyleError("compiled style block has trailing words");
+  return out;
+}
+function payloadNumber(type, word, bits) {
+  return isFloatWord(type, word) ? bitsFloat(bits) : type === ValueType.int ? bits | 0 : bits >>> 0;
+}
+
+// src/interactives/game-ui/styling/tailwind.ts
+var SPACING_UNIT = 4, SPACING_STEPS = ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"], SPACING = new Set(SPACING_STEPS), FRACTIONS = ["1/2", "1/3", "2/3", "1/4", "2/4", "3/4", "1/5", "2/5", "3/5", "4/5", "1/6", "5/6"], PERCENT2 = 100, FULL = "100%", AUTO2 = "auto", PX = "px", RADIUS = { none: 0, sm: 2, "": 4, md: 6, lg: 8, xl: 12, "2xl": 16, "3xl": 24, full: 9999 }, BORDER_WIDTHS = { "": 1, 0: 0, 2: 2, 4: 4, 8: 8 }, OPACITY_STEP = 5, Z = ["0", "10", "20", "30", "40", "50", "auto"], SCALES = ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150"], ROTATIONS = ["0", "1", "2", "3", "6", "12", "45", "90", "180"], DEGREES = Math.PI / 180, FONT_SIZES = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36, "5xl": 48, "6xl": 60, "7xl": 72 }, FONT_WEIGHTS = { thin: 100, extralight: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800, black: 900 }, LEADING = { none: 1, tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625, loose: 2 }, SHADOW_INK = "#0000001a", SHADOWS = {
+  sm: { color: "#0000000d", x: 0, y: 1, blur: 2, spread: 0 },
+  "": { color: SHADOW_INK, x: 0, y: 1, blur: 3, spread: 0 },
+  md: { color: SHADOW_INK, x: 0, y: 4, blur: 6, spread: -1 },
+  lg: { color: SHADOW_INK, x: 0, y: 10, blur: 15, spread: -3 },
+  xl: { color: SHADOW_INK, x: 0, y: 20, blur: 25, spread: -5 },
+  "2xl": { color: "#00000040", x: 0, y: 25, blur: 50, spread: -12 },
+  none: null
+}, ORIGINS = {
+  center: [0.5, 0.5],
+  top: [0.5, 0],
+  "top-right": [1, 0],
+  right: [1, 0.5],
+  "bottom-right": [1, 1],
+  bottom: [0.5, 1],
+  "bottom-left": [0, 1],
+  left: [0, 0.5],
+  "top-left": [0, 0]
+}, GRADIENT_DIRECTIONS = {
+  t: [0.5, 1, 0.5, 0],
+  tr: [0, 1, 1, 0],
+  r: [0, 0.5, 1, 0.5],
+  br: [0, 0, 1, 1],
+  b: [0.5, 0, 0.5, 1],
+  bl: [1, 0, 0, 1],
+  l: [1, 0.5, 0, 0.5],
+  tl: [1, 1, 0, 0]
+}, RADIAL_GEOMETRY = [0.5, 0.5, 0.5, 0], VIA_OFFSET = 0.5, LITERAL_COLOURS = { white: "#ffffffff", black: "#000000ff", transparent: "#00000000" }, TRANSPARENT = LITERAL_COLOURS.transparent, VARIANTS = {
+  pressed: Condition.pressed,
+  active: Condition.pressed,
+  focus: Condition.focus,
+  disabled: Condition.disabled,
+  landscape: Condition.landscape,
+  portrait: Condition.portrait,
+  safe: Condition.safe,
+  sm: Condition.sm,
+  lg: Condition.lg
+}, CONDITION_NAMES = [":pressed", ":focus", ":disabled", "@landscape", "@portrait", "@safe", "@sm", "@lg"];
+function kebab(name) {
+  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+var TOKEN_COLOURS = /* @__PURE__ */ new Map();
+for (let [name, variable] of Object.entries(tokens)) TOKEN_COLOURS.set(kebab(name), variable);
+var COLOUR_NAMES = [...TOKEN_COLOURS.keys(), ...Object.keys(LITERAL_COLOURS)];
+function arbitrary(token) {
+  return token.length > 2 && token.startsWith("[") && token.endsWith("]") ? token.slice(1, -1) : null;
+}
+function arbitraryNumber(token) {
+  let raw = arbitrary(token);
+  if (raw === null) return null;
+  let body = raw.endsWith(PX) ? raw.slice(0, -PX.length) : raw, value = Number(body);
+  return body.length > 0 && Number.isFinite(value) ? value : null;
+}
+function spacing(token) {
+  return token === PX ? 1 : SPACING.has(token) ? Number(token) * (4) : arbitraryNumber(token);
+}
+function size(token) {
+  if (token === "full") return FULL;
+  if (token === AUTO2) return AUTO2;
+  let slash = token.indexOf("/");
+  if (slash > 0 && FRACTIONS.indexOf(token) >= 0) return `${Number(token.slice(0, slash)) / Number(token.slice(slash + 1)) * (100)}%`;
+  let raw = arbitrary(token);
+  return raw !== null && raw.endsWith("%") && Number.isFinite(Number(raw.slice(0, -1))) ? raw : spacing(token);
+}
+function colour(token) {
+  let variable = TOKEN_COLOURS.get(token);
+  if (variable !== void 0) return variable;
+  let literal = LITERAL_COLOURS[token];
+  if (literal !== void 0) return literal;
+  let raw = arbitrary(token);
+  return raw !== null && raw.startsWith("#") ? raw : null;
+}
+function percentScale(token) {
+  return SCALES.indexOf(token) >= 0 ? Number(token) / (100) : arbitraryNumber(token);
+}
+var sign = (negative, value) => negative ? -value : value, spacingValues = () => [PX, ...SPACING_STEPS], sizeValues = () => [...spacingValues(), ...FRACTIONS, "full", AUTO2];
+function keyword(prefix, apply) {
+  return {
+    prefix,
+    values: () => [""],
+    apply: (token, context) => token !== "" ? false : (apply(context), true)
+  };
+}
+function choice(prefix, table, apply) {
+  return {
+    prefix,
+    values: () => Object.keys(table),
+    apply: (token, context) => Object.prototype.hasOwnProperty.call(table, token) ? (apply(table[token], context), true) : false
+  };
+}
+function spaced(prefix, props3, negative) {
+  return {
+    prefix,
+    negative,
+    values: spacingValues,
+    apply: (token, context, minus) => {
+      let value = spacing(token);
+      if (value === null) return false;
+      for (let prop of props3) context.set(prop, sign(minus, value));
+      return true;
+    }
+  };
+}
+function sized(prefix, props3, negative) {
+  return {
+    prefix,
+    negative,
+    values: sizeValues,
+    apply: (token, context, minus) => {
+      let value = size(token);
+      if (value === null || minus && value === AUTO2) return false;
+      let signed = typeof value == "number" ? sign(minus, value) : minus ? `-${value}` : value;
+      for (let prop of props3) context.set(prop, signed);
+      return true;
+    }
+  };
+}
+function coloured(prefix, props3) {
+  return {
+    prefix,
+    values: () => COLOUR_NAMES,
+    apply: (token, context) => {
+      let value = colour(token);
+      if (value === null) return false;
+      for (let prop of props3) context.set(prop, value);
+      return true;
+    }
+  };
+}
+function widths(prefix, prop) {
+  return {
+    prefix,
+    values: () => Object.keys(BORDER_WIDTHS),
+    apply: (token, context) => {
+      let value = Object.prototype.hasOwnProperty.call(BORDER_WIDTHS, token) ? BORDER_WIDTHS[token] : arbitraryNumber(token);
+      return value === null ? false : (context.set(prop, value), true);
+    }
+  };
+}
+function radius(prefix, props3) {
+  return {
+    prefix,
+    values: () => Object.keys(RADIUS),
+    apply: (token, context) => {
+      let value = Object.prototype.hasOwnProperty.call(RADIUS, token) ? RADIUS[token] : arbitraryNumber(token);
+      if (value === null) return false;
+      for (let prop of props3) context.set(prop, value);
+      return true;
+    }
+  };
+}
+function scaled(prefix, props3) {
+  return {
+    prefix,
+    values: () => SCALES,
+    apply: (token, context) => {
+      let value = percentScale(token);
+      if (value === null) return false;
+      for (let prop of props3) context.set(prop, value);
+      return true;
+    }
+  };
+}
+var FAMILIES = [
+  keyword("flex", (c) => c.set("display", "flex")),
+  keyword("hidden", (c) => c.set("display", "none")),
+  keyword("invisible", (c) => c.set("hidden", true)),
+  keyword("visible", (c) => c.set("hidden", false)),
+  choice("flex", { row: "row", col: "column", "row-reverse": "row-reverse", "col-reverse": "column-reverse" }, (v, c) => c.set("direction", v)),
+  choice("flex", { wrap: true, nowrap: false }, (v, c) => c.set("wrap", v)),
+  choice("flex", { 1: [1, 1, "0%"], auto: [1, 1, AUTO2], initial: [0, 1, AUTO2], none: [0, 0, AUTO2] }, (v, c) => {
+    c.set("grow", v[0]), c.set("shrink", v[1]), c.set("basis", v[2]);
+  }),
+  keyword("grow", (c) => c.set("grow", 1)),
+  choice("grow", { 0: 0 }, (v, c) => c.set("grow", v)),
+  keyword("shrink", (c) => c.set("shrink", 1)),
+  choice("shrink", { 0: 0 }, (v, c) => c.set("shrink", v)),
+  sized("basis", ["basis"], false),
+  choice("justify", { start: "start", end: "end", center: "center", between: "space-between", around: "space-around", evenly: "space-evenly" }, (v, c) => c.set("justify", v)),
+  choice("items", { start: "start", end: "end", center: "center", stretch: "stretch" }, (v, c) => c.set("alignItems", v)),
+  choice("self", { auto: "auto", start: "start", end: "end", center: "center", stretch: "stretch" }, (v, c) => c.set("alignSelf", v)),
+  choice("content", { start: "start", end: "end", center: "center", stretch: "stretch" }, (v, c) => c.set("alignContent", v)),
+  keyword("absolute", (c) => c.set("position", "absolute")),
+  keyword("relative", (c) => c.set("position", "relative")),
+  choice("overflow", { hidden: true, visible: false, clip: true }, (v, c) => c.set("clip", v)),
+  choice("overflow", { scroll: "both", auto: "both" }, (v, c) => c.set("scrollAxes", v)),
+  choice("overflow-x", { scroll: "x", auto: "x" }, (v, c) => c.set("scrollAxes", v)),
+  choice("overflow-y", { scroll: "y", auto: "y" }, (v, c) => c.set("scrollAxes", v)),
+  choice("pointer-events", { none: "none", auto: "auto" }, (v, c) => c.set("pointerEvents", v)),
+  {
+    prefix: "aspect",
+    values: () => ["square", "video"],
+    apply: (token, c) => {
+      let value = token === "square" ? 1 : token === "video" ? 1.7777777777777777 : arbitraryNumber(token);
+      return value === null ? false : (c.set("aspect", value), true);
+    }
+  },
+  {
+    prefix: "z",
+    negative: true,
+    values: () => Z,
+    apply: (token, c, minus) => {
+      let value = token === AUTO2 ? 0 : Z.indexOf(token) >= 0 ? Number(token) : arbitraryNumber(token);
+      return value === null || !Number.isInteger(value) ? false : (c.set("zIndex", sign(minus, value)), true);
+    }
+  },
+  {
+    prefix: "opacity",
+    values: () => Array.from({ length: (100) / (5) + 1 }, (_, i) => String(i * (5))),
+    apply: (token, c) => {
+      let step2 = Number(token), value = token.length > 0 && Number.isInteger(step2) && step2 >= 0 && step2 <= (100) && step2 % (5) === 0 ? step2 / (100) : arbitraryNumber(token);
+      return value === null ? false : (c.set("opacity", value), true);
+    }
+  },
+  spaced("p", ["padding"], false),
+  spaced("px", ["paddingInline"], false),
+  spaced("py", ["paddingBlock"], false),
+  spaced("pt", ["paddingTop"], false),
+  spaced("pr", ["paddingRight"], false),
+  spaced("pb", ["paddingBottom"], false),
+  spaced("pl", ["paddingLeft"], false),
+  spaced("m", ["margin"], true),
+  spaced("mx", ["marginInline"], true),
+  spaced("my", ["marginBlock"], true),
+  spaced("mt", ["marginTop"], true),
+  spaced("mr", ["marginRight"], true),
+  spaced("mb", ["marginBottom"], true),
+  spaced("ml", ["marginLeft"], true),
+  spaced("gap", ["gap"], false),
+  spaced("gap-x", ["columnGap"], false),
+  spaced("gap-y", ["rowGap"], false),
+  sized("w", ["width"], false),
+  sized("h", ["height"], false),
+  sized("min-w", ["minWidth"], false),
+  sized("min-h", ["minHeight"], false),
+  sized("max-w", ["maxWidth"], false),
+  sized("max-h", ["maxHeight"], false),
+  sized("size", ["width", "height"], false),
+  sized("inset", ["inset"], true),
+  sized("inset-x", ["insetInline"], true),
+  sized("inset-y", ["insetBlock"], true),
+  sized("top", ["top"], true),
+  sized("right", ["right"], true),
+  sized("bottom", ["bottom"], true),
+  sized("left", ["left"], true),
+  radius("rounded", ["radius"]),
+  radius("rounded-t", ["radiusTopLeft", "radiusTopRight"]),
+  radius("rounded-r", ["radiusTopRight", "radiusBottomRight"]),
+  radius("rounded-b", ["radiusBottomRight", "radiusBottomLeft"]),
+  radius("rounded-l", ["radiusTopLeft", "radiusBottomLeft"]),
+  radius("rounded-tl", ["radiusTopLeft"]),
+  radius("rounded-tr", ["radiusTopRight"]),
+  radius("rounded-br", ["radiusBottomRight"]),
+  radius("rounded-bl", ["radiusBottomLeft"]),
+  widths("border", "borderWidth"),
+  widths("border-x", "borderInlineWidth"),
+  widths("border-y", "borderBlockWidth"),
+  widths("border-t", "borderTopWidth"),
+  widths("border-r", "borderRightWidth"),
+  widths("border-b", "borderBottomWidth"),
+  widths("border-l", "borderLeftWidth"),
+  coloured("border", ["borderColor"]),
+  coloured("border-x", ["borderInlineColor"]),
+  coloured("border-y", ["borderBlockColor"]),
+  coloured("border-t", ["borderTopColor"]),
+  coloured("border-r", ["borderRightColor"]),
+  coloured("border-b", ["borderBottomColor"]),
+  coloured("border-l", ["borderLeftColor"]),
+  coloured("bg", ["fill"]),
+  coloured("fill", ["fill"]),
+  coloured("tint", ["tint"]),
+  coloured("stroke", ["stroke"]),
+  choice("stroke", { 0: 0, 1: 1, 2: 2 }, (v, c) => c.set("strokeWidth", v)),
+  coloured("placeholder", ["placeholderColor"]),
+  coloured("text", ["textColor"]),
+  choice("text", FONT_SIZES, (v, c) => c.set("fontSize", v)),
+  {
+    prefix: "text",
+    values: () => [],
+    apply: (token, c) => {
+      let value = arbitraryNumber(token);
+      return value === null ? false : (c.set("fontSize", value), true);
+    }
+  },
+  choice("text", { left: "left", center: "center", right: "right", start: "start", end: "end" }, (v, c) => c.set("textAlign", v)),
+  choice("text", { wrap: true, nowrap: false }, (v, c) => c.set("textWrap", v)),
+  choice("text", { balance: "balance", pretty: "pretty" }, (v, c) => {
+    c.set("textWrap", true), c.set("textWrapStyle", v);
+  }),
+  choice("font", FONT_WEIGHTS, (v, c) => c.set("fontWeight", v)),
+  {
+    prefix: "leading",
+    values: () => Object.keys(LEADING),
+    apply: (token, c) => {
+      let value = Object.prototype.hasOwnProperty.call(LEADING, token) ? LEADING[token] : arbitraryNumber(token);
+      return value === null ? false : (c.set("lineHeight", value), true);
+    }
+  },
+  {
+    prefix: "tracking",
+    negative: true,
+    values: () => [],
+    apply: (token, c, minus) => {
+      let value = arbitraryNumber(token);
+      return value === null ? false : (c.set("letterSpacing", sign(minus, value)), true);
+    }
+  },
+  choice("align", { top: "top", middle: "center", bottom: "bottom" }, (v, c) => c.set("verticalAlign", v)),
+  scaled("scale", ["scale"]),
+  scaled("scale-x", ["scaleX"]),
+  scaled("scale-y", ["scaleY"]),
+  {
+    prefix: "rotate",
+    negative: true,
+    values: () => ROTATIONS,
+    apply: (token, c, minus) => {
+      let degrees = ROTATIONS.indexOf(token) >= 0 ? Number(token) : arbitraryNumber(token);
+      return degrees === null ? false : (c.set("rotate", sign(minus, degrees) * DEGREES), true);
+    }
+  },
+  spaced("translate-x", ["translateX"], true),
+  spaced("translate-y", ["translateY"], true),
+  choice("origin", ORIGINS, (v, c) => c.set("origin", v)),
+  choice("shadow", SHADOWS, (v, c) => c.set("shadow", v)),
+  choice("bg-gradient-to", GRADIENT_DIRECTIONS, (v, c) => {
+    c.gradient.kind = "linear", c.gradient.geometry = v;
+  }),
+  choice("bg-linear-to", GRADIENT_DIRECTIONS, (v, c) => {
+    c.gradient.kind = "linear", c.gradient.geometry = v;
+  }),
+  keyword("bg-radial", (c) => {
+    c.gradient.kind = "radial", c.gradient.geometry = RADIAL_GEOMETRY;
+  }),
+  {
+    prefix: "from",
+    values: () => COLOUR_NAMES,
+    apply: (token, c) => {
+      let value = colour(token);
+      return value === null ? false : (c.gradient.from = value, true);
+    }
+  },
+  {
+    prefix: "via",
+    values: () => COLOUR_NAMES,
+    apply: (token, c) => {
+      let value = colour(token);
+      return value === null ? false : (c.gradient.via = value, true);
+    }
+  },
+  {
+    prefix: "to",
+    values: () => COLOUR_NAMES,
+    apply: (token, c) => {
+      let value = colour(token);
+      return value === null ? false : (c.gradient.to = value, true);
+    }
+  }
+], ORDERED = [...FAMILIES].sort((a, b) => b.prefix.length - a.prefix.length), vocabulary = null;
+function tailwindVocabulary() {
+  if (vocabulary !== null) return vocabulary;
+  let out = /* @__PURE__ */ new Set();
+  for (let family of FAMILIES)
+    for (let value of family.values()) {
+      let name = value === "" ? family.prefix : `${family.prefix}-${value}`;
+      out.add(name), family.negative === true && value !== "" && value !== "0" && value !== AUTO2 && out.add(`-${name}`);
+    }
+  for (let variant of Object.keys(VARIANTS)) out.add(`${variant}:`);
+  return vocabulary = [...out], vocabulary;
+}
+function splitVariants(name) {
+  let parts = [], depth = 0, start = 0;
+  for (let i = 0; i < name.length; i++) {
+    let c = name[i];
+    c === "[" ? depth++ : c === "]" ? depth-- : c === ":" && depth === 0 && (parts.push(name.slice(start, i)), start = i + 1);
+  }
+  return parts.push(name.slice(start)), parts;
+}
+function applyUtility(body, context) {
+  let negative = body.startsWith("-"), bare = negative ? body.slice(1) : body;
+  for (let family of ORDERED) {
+    if (negative && family.negative !== true) continue;
+    let token = null;
+    if (bare === family.prefix ? token = "" : bare.startsWith(`${family.prefix}-`) && (token = bare.slice(family.prefix.length + 1)), token !== null && family.apply(token, context, negative))
+      return true;
+  }
+  return false;
+}
+function insert(target, bits, value) {
+  if (bits.length === 0) {
+    target.default = value;
+    return;
+  }
+  let name = CONDITION_NAMES[bits[0]], nested = target[name] ?? {};
+  target[name] = nested, insert(nested, bits.slice(1), value);
+}
+function maskBits(mask) {
+  let bits = [];
+  for (let bit = 0; bit < CONDITION_NAMES.length; bit++) mask & 1 << bit && bits.push(bit);
+  return bits;
+}
+function gradientValue(parts) {
+  let geometry = parts.geometry ?? GRADIENT_DIRECTIONS.b, from = parts.from ?? TRANSPARENT, to = parts.to ?? TRANSPARENT, stops = parts.via === void 0 ? [[from, 0], [to, 1]] : [[from, 0], [parts.via, (0.5)], [to, 1]];
+  return { kind: parts.kind ?? "linear", stops, from: [geometry[0], geometry[1]], to: [geometry[2], geometry[3]] };
+}
+function tailwindStyle(classes) {
+  let values = /* @__PURE__ */ new Map(), gradients = /* @__PURE__ */ new Map(), set = (mask) => (prop, value) => {
+    let byMask = values.get(prop);
+    byMask === void 0 && (byMask = /* @__PURE__ */ new Map(), values.set(prop, byMask)), byMask.delete(mask), byMask.set(mask, value);
+  };
+  for (let name of classes.split(/\s+/)) {
+    if (name.length === 0) continue;
+    let parts = splitVariants(name), body = parts[parts.length - 1], mask = 0;
+    for (let i = 0; i < parts.length - 1; i++) {
+      let bit = VARIANTS[parts[i]];
+      if (bit === void 0) {
+        let hit = suggest(parts[i], Object.keys(VARIANTS));
+        throw new UiStyleCompileError(`unknown variant "${parts[i]}:" in "${name}"${hit === null ? "" : `; did you mean "${hit}:"?`}`, "class", name, hit === null ? null : `${hit}:${body}`);
+      }
+      mask |= bit;
+    }
+    if (body.length === 0) throw new UiStyleCompileError(`class "${name}" has no utility after its variants`, "class", name, null);
+    let gradient = gradients.get(mask);
+    if (gradient === void 0 && (gradient = {}, gradients.set(mask, gradient)), !applyUtility(body, { set: set(mask), gradient })) {
+      let hit = suggest(body, tailwindVocabulary()), prefix = parts.slice(0, -1).map((p) => `${p}:`).join("");
+      throw new UiStyleCompileError(`unknown class "${name}"${hit === null ? "" : `; did you mean "${prefix}${hit}"?`}`, "class", name, hit === null ? null : `${prefix}${hit}`);
+    }
+  }
+  for (let [mask, parts] of gradients)
+    parts.kind === void 0 && parts.from === void 0 && parts.via === void 0 && parts.to === void 0 || set(mask)("gradient", gradientValue(parts));
+  let style = {}, ordered = [...values].sort((a, b) => KEY_TIERS[keyId(a[0])] - KEY_TIERS[keyId(b[0])]);
+  for (let [prop, byMask] of ordered) {
+    if (byMask.size === 1 && byMask.has(0)) {
+      style[prop] = byMask.get(0);
+      continue;
+    }
+    let nested = {};
+    for (let mask of [...byMask.keys()].sort((a, b) => a - b)) insert(nested, maskBits(mask), byMask.get(mask));
+    style[prop] = nested;
+  }
+  return style;
+}
+function compileClasses(classes) {
+  return compileStyle(tailwindStyle(classes));
+}
+
+// src/interactives/game-ui/styling/runtime.ts
+var NO_VARIANT = -1, REF_VAR = 1, REF_SLOT = 2, SLOT_INDEX = 65535, PERCENT3 = "%", SLOT_FLOAT = 0, SLOT_INT = 1, SLOT_WORD = 2, slotFloats = new Float32Array(1), slotWords = new Uint32Array(slotFloats.buffer), AUTO3 = "auto", CompiledStyle = class {
+  constructor(words) {
+    this.first = new Int16Array(KEY_COUNT).fill((-1));
+    this.count = new Uint8Array(KEY_COUNT);
+    this.variantKey = new Uint8Array(0);
+    this.mask = new Uint8Array(0);
+    this.priority = new Uint16Array(0);
+    this.empty = new Uint8Array(0);
+    this.unit = new Uint8Array(0);
+    this.start = new Uint16Array(0);
+    this.values = new Float64Array(0);
+    this.refKind = new Uint8Array(0);
+    this.refId = new Int32Array(0);
+    this.stateMask = 0;
+    this.contextMask = 0;
+    this.usesVars = false;
+    this.slots = 0;
+    this.version = 0;
+    this.slotPos = new Int32Array(0);
+    this.slotFloat = new Uint8Array(0);
+    this.slotRefPos = new Int32Array(0);
+    this.slotRefSlot = new Int32Array(0);
+    this.slotRefMode = new Uint8Array(0);
+    this.load(words);
+  }
+  slotBits(slot) {
+    let value = this.values[this.slotPos[slot]];
+    return this.slotFloat[slot] === 1 ? floatBits(value) : value >>> 0;
+  }
+  load(words) {
+    let variants = readBlock(words), n = variants.length, total = 0;
+    for (let v of variants) total += v.payload.length;
+    this.first.fill((-1)), this.count.fill(0), this.variantKey = new Uint8Array(n), this.mask = new Uint8Array(n), this.priority = new Uint16Array(n), this.empty = new Uint8Array(n), this.unit = new Uint8Array(n), this.start = new Uint16Array(n), this.values = new Float64Array(total), this.refKind = new Uint8Array(total), this.refId = new Int32Array(total), this.stateMask = 0, this.contextMask = 0, this.usesVars = false, this.slots = 0;
+    let at = 0;
+    variants.forEach((v, i) => {
+      this.first[v.key] === (-1) && (this.first[v.key] = i), this.count[v.key]++, this.variantKey[i] = v.key, this.mask[i] = v.mask, this.priority[i] = KEY_TIERS[v.key] + conditionPriority(v.mask), this.empty[i] = v.kind === VariantKind.null ? 1 : 0, this.unit[i] = v.unit, this.start[i] = at, this.stateMask |= v.mask & STATE_CONDITIONS, this.contextMask |= v.mask & CONTEXT_CONDITIONS;
+      let type = KEY_TYPES[v.key];
+      v.payload.forEach((bits, word) => {
+        let pos = at + word;
+        if (v.refs & 1 << word) {
+          bits & (2147483648) ? (this.refKind[pos] = (2), this.refId[pos] = bits & (65535), this.slots = Math.max(this.slots, (bits & (65535)) + 1)) : (this.refKind[pos] = (1), this.refId[pos] = bits, this.usesVars = true);
+          return;
+        }
+        this.values[pos] = payloadNumber(type, word, bits);
+      }), at += v.payload.length;
+    }), this.slotPos = new Int32Array(this.slots).fill(-1), this.slotFloat = new Uint8Array(this.slots);
+    for (let v = 0; v < n; v++) {
+      let begin = this.start[v], end = v + 1 < n ? this.start[v + 1] : total;
+      for (let pos = begin; pos < end; pos++) {
+        if (this.refKind[pos] !== (2) || this.slotPos[this.refId[pos]] >= 0) continue;
+        let type = KEY_TYPES[this.variantKey[v]];
+        this.slotPos[this.refId[pos]] = pos, this.slotFloat[this.refId[pos]] = isFloatWord(type, pos - begin) ? 1 : 0;
+      }
+    }
+    let refPos = [], refSlot = [], refMode = [];
+    for (let v = 0; v < n; v++) {
+      let begin = this.start[v], end = v + 1 < n ? this.start[v + 1] : total, type = KEY_TYPES[this.variantKey[v]];
+      for (let pos = begin; pos < end; pos++) {
+        if (this.refKind[pos] !== (2)) continue;
+        let word = pos - begin;
+        refPos.push(pos), refSlot.push(this.refId[pos]), refMode.push(isColorWord(type, word) ? (2) : isFloatWord(type, word) ? (0) : type === ValueType.int ? (1) : (2));
+      }
+    }
+    this.slotRefPos = Int32Array.from(refPos), this.slotRefSlot = Int32Array.from(refSlot), this.slotRefMode = Uint8Array.from(refMode), this.version++;
+  }
+  keySignature() {
+    let out = "";
+    for (let k = 0; k < KEY_COUNT; k++) this.first[k] !== (-1) && (out += `${k},`);
+    return out;
+  }
+  setSlotsFrom(source, offset = 0) {
+    let positions = this.slotRefPos, slots = this.slotRefSlot, modes = this.slotRefMode, values = this.values;
+    for (let i = 0; i < positions.length; i++) {
+      let mode = modes[i], value = source[offset + slots[i]];
+      values[positions[i]] = mode === (0) ? value : mode === (1) ? value | 0 : value >>> 0;
+    }
+    return this;
+  }
+  slotBitsTo(slot, out, at) {
+    let value = this.values[this.slotPos[slot]];
+    this.slotFloat[slot] === 1 ? (slotFloats[0] = value, out[at] = slotWords[0]) : out[at] = value >>> 0;
+  }
+  setSlot(slot, raw) {
+    let total = this.values.length;
+    for (let v = 0; v < this.variantKey.length; v++) {
+      let begin = this.start[v], end = v + 1 < this.variantKey.length ? this.start[v + 1] : total;
+      for (let pos = begin; pos < end; pos++) {
+        if (this.refKind[pos] !== (2) || this.refId[pos] !== slot) continue;
+        let key = this.variantKey[v];
+        convert(key, pos - begin, raw), this.values[pos] = converted[0], KEY_TYPES[key] === ValueType.length && typeof raw == "string" && this.unit[v] !== convertedUnit && (this.unit[v] = convertedUnit, this.version++);
+      }
+    }
+  }
+}, converted = new Float64Array(1), convertedUnit = UiUnit.points;
+function convert(key, word, raw) {
+  let type = KEY_TYPES[key];
+  if (convertedUnit = UiUnit.points, isColorWord(type, word)) {
+    converted[0] = typeof raw == "number" ? raw >>> 0 : parseColor(raw);
+    return;
+  }
+  if (typeof raw == "number") {
+    converted[0] = isFloatWord(type, word) ? raw : type === ValueType.int ? raw | 0 : raw >>> 0;
+    return;
+  }
+  if (typeof raw == "boolean") {
+    converted[0] = raw ? 1 : 0;
+    return;
+  }
+  if (type === ValueType.enumeration) {
+    let code = KEY_TABLES[key][raw];
+    if (code === void 0) throw new UiStyleError(`style variable value ${raw} is not valid here`);
+    converted[0] = code;
+    return;
+  }
+  if (type === ValueType.length && raw === AUTO3) {
+    convertedUnit = UiUnit.auto, converted[0] = 0;
+    return;
+  }
+  type === ValueType.length && raw.endsWith(PERCENT3) && (convertedUnit = UiUnit.percent);
+  let value = Number.parseFloat(raw);
+  converted[0] = isFloatWord(type, word) ? value : type === ValueType.int ? value | 0 : value >>> 0;
+}
+var UiProps = class _UiProps {
+  constructor(parts) {
+    this.owner = new Array(KEY_COUNT).fill(null);
+    this.wireSet = new Uint8Array(WIRE_COUNT);
+    this.encoded = null;
+    this.encodedVersion = -1;
+    let themes = [];
+    for (let part of parts) {
+      if (part instanceof UiTheme) {
+        themes.push(part);
+        continue;
+      }
+      if (part instanceof _UiProps) {
+        part.theme !== null && themes.push(part.theme);
+        for (let k = 0; k < KEY_COUNT; k++) part.owner[k] !== null && (this.owner[k] = part.owner[k]);
+        continue;
+      }
+      for (let k = 0; k < KEY_COUNT; k++) part.first[k] !== (-1) && (this.owner[k] = part);
+    }
+    let wires = /* @__PURE__ */ new Set(), state = 0, context = 0, vars = false;
+    for (let k = 0; k < KEY_COUNT; k++) {
+      let style = this.owner[k];
+      if (style === null) continue;
+      for (let w of KEY_WIRES[k]) wires.add(w);
+      let first = style.first[k];
+      for (let v = first; v < first + style.count[k]; v++)
+        state |= style.mask[v] & STATE_CONDITIONS, context |= style.mask[v] & CONTEXT_CONDITIONS;
+      vars || (vars = style.usesVars);
+    }
+    this.wires = Uint8Array.from([...wires].sort((a, b) => a - b));
+    for (let w of this.wires) this.wireSet[w] = 1;
+    let distinct = [];
+    for (let k = 0; k < KEY_COUNT; k++) {
+      let style = this.owner[k];
+      style !== null && distinct.indexOf(style) < 0 && distinct.push(style);
+    }
+    this.styles = distinct, this.dynamics = distinct.filter((style) => style.slots > 0), this.slotOffsets = new Int32Array(this.dynamics.length);
+    let slots = 0;
+    this.dynamics.forEach((style, i) => {
+      this.slotOffsets[i] = slots, slots += style.slots;
+    }), this.slotCount = slots, this.stateMask = state, this.contextMask = context, this.usesVars = vars, this.theme = themes.length === 0 ? null : themes.length === 1 ? themes[0] : mergeThemes(themes);
+  }
+  version() {
+    let total = 0;
+    for (let i = 0; i < this.styles.length; i++) total += this.styles[i].version;
+    return total;
+  }
+  slotOffset(style) {
+    for (let i = 0; i < this.dynamics.length; i++) if (this.dynamics[i] === style) return this.slotOffsets[i];
+    return 0;
+  }
+}, classCache = /* @__PURE__ */ new Map(), objectCache = /* @__PURE__ */ new WeakMap();
+function isWords(value) {
+  return value instanceof Uint32Array || Array.isArray(value) && typeof value[0] == "number";
+}
+function styleOf(arg) {
+  if (arg instanceof CompiledStyle || arg instanceof UiProps || arg instanceof UiTheme) return arg;
+  if (typeof arg == "string") {
+    let style2 = classCache.get(arg);
+    return style2 === void 0 && (style2 = new CompiledStyle(compileClasses(arg)), classCache.set(arg, style2)), style2;
+  }
+  let style = objectCache.get(arg);
+  return style === void 0 && (style = new CompiledStyle(isWords(arg) ? arg : compileStyle(arg)), objectCache.set(arg, style)), style;
+}
+var PropsNode = class {
+  constructor() {
+    this.next = null;
+    this.result = null;
+  }
+}, root = new PropsNode(), EMPTY_PROPS = new UiProps([]);
+root.result = EMPTY_PROPS;
+function isList(arg) {
+  return Array.isArray(arg) && !isWords(arg);
+}
+function step(node, arg) {
+  if (arg === false || arg === null || arg === void 0) return node;
+  if (isList(arg)) {
+    let at = node;
+    for (let i = 0; i < arg.length; i++) at = step(at, arg[i]);
+    return at;
+  }
+  let key = typeof arg == "string" || arg instanceof CompiledStyle || arg instanceof UiProps || arg instanceof UiTheme ? arg : styleOf(arg), next = node.next;
+  next === null && (next = /* @__PURE__ */ new Map(), node.next = next);
+  let child = next.get(key);
+  return child === void 0 && (child = new PropsNode(), next.set(key, child)), child;
+}
+function collect(arg, out) {
+  if (!(arg === false || arg === null || arg === void 0)) {
+    if (isList(arg)) {
+      for (let item of arg) collect(item, out);
+      return;
+    }
+    out.push(styleOf(arg));
+  }
+}
+function props(a, b, c, d, e, f2, g, h) {
+  let node = step(root, a);
+  if (node = step(node, b), node = step(node, c), node = step(node, d), node = step(node, e), node = step(node, f2), node = step(node, g), node = step(node, h), node.result !== null) return node.result;
+  let parts = [];
+  return collect([a, b, c, d, e, f2, g, h], parts), node.result = parts.length === 1 && parts[0] instanceof UiProps ? parts[0] : new UiProps(parts), node.result;
+}
+function contextual(name, error) {
+  throw error instanceof UiStyleCompileError ? new UiStyleCompileError(`styles.${name}: ${error.message}`, error.kind, error.subject, error.suggestion) : error;
+}
+function compiledDynamic(entry) {
+  let style = new CompiledStyle(entry[0]), fns = entry[1];
+  return (a, b, c, d) => {
+    for (let i = 0; i < fns.length; i++) style.setSlot(i, fns[i](a, b, c, d));
+    return style;
+  };
+}
+function fallbackDynamic(name, fn) {
+  let style = null, signature = "";
+  return (a, b, c, d) => {
+    let words;
+    try {
+      words = compileStyle(fn(a, b, c, d));
+    } catch (error) {
+      contextual(name, error);
+    }
+    if (style === null)
+      return style = new CompiledStyle(words), signature = style.keySignature(), style;
+    if (style.load(words), style.keySignature() !== signature) throw new UiStyleError(`styles.${name}: a dynamic style must return the same properties on every call`);
+    return style;
+  };
+}
+function styles(definition, compiled) {
+  let out = {}, names = /* @__PURE__ */ new Set([...Object.keys(definition), ...Object.keys(compiled ?? {})]);
+  for (let name of names) {
+    let entry = compiled?.[name], value = definition[name];
+    if (entry !== void 0 && !isWords(entry) && typeof entry[1] == "function") {
+      let style = new CompiledStyle(entry[0]);
+      out[name] = entry[1](style, new Float64Array(Math.max(1, style.slots)));
+      continue;
+    }
+    if (entry !== void 0 && !isWords(entry)) {
+      out[name] = compiledDynamic(entry);
+      continue;
+    }
+    if (entry !== void 0) {
+      out[name] = new CompiledStyle(entry);
+      continue;
+    }
+    if (typeof value == "function") {
+      out[name] = fallbackDynamic(name, value);
+      continue;
+    }
+    try {
+      out[name] = new CompiledStyle(compileStyle(value));
+    } catch (error) {
+      contextual(name, error);
+    }
+  }
+  return out;
+}
+var TokenKind = { color: 1, float: 2 };
+var varKinds = /* @__PURE__ */ new Map(), collectedIds = [], collectedKinds = [], encodingProps = null, literalVars = false, insets = null;
+function tokenKind(type, word) {
+  return isColorWord(type, word) ? TokenKind.color : type !== ValueType.length && isFloatWord(type, word) ? TokenKind.float : 0;
+}
+function claimToken(id, kind) {
+  if (kind === 0) return false;
+  let known = varKinds.get(id);
+  if (known === void 0) varKinds.set(id, kind);
+  else if (known !== kind) return false;
+  return collectedIds.indexOf(id) < 0 && (collectedIds.push(id), collectedKinds.push(kind)), true;
+}
+function tokenBits(kind, raw) {
+  return kind === TokenKind.color ? typeof raw == "number" ? raw >>> 0 : parseColor(raw) : floatBits(typeof raw == "number" ? raw : Number.parseFloat(raw));
+}
+var component = new Float64Array(MAX_COMPONENTS), floats2 = new Float64Array(2), floats4 = new Float64Array(4), words1 = new Float64Array(1), words4 = new Float64Array(4), NO_WORDS = new Float64Array(0), lengthUnit = 0, keepRefs = false, componentRefs = 0, componentSafe = 0;
+var SHADOW_FLOATS = 4, GRADIENT_HEAD = 5;
+function read(style, variant, word, target, slot) {
+  let pos = style.start[variant] + word;
+  lengthUnit = style.unit[variant];
+  let kind = style.refKind[pos];
+  if (kind === (2) && keepRefs && encodingProps !== null) {
+    component[slot] = ((2147483648) | encodingProps.slotOffset(style) + style.refId[pos]) >>> 0, componentRefs |= 1 << slot;
+    return;
+  }
+  if (kind !== (1)) {
+    component[slot] = style.values[pos];
+    return;
+  }
+  let id = style.refId[pos];
+  if (keepRefs) {
+    if (target.scopedVar(id) === void 0 && claimToken(id, tokenKind(KEY_TYPES[style.variantKey[variant]], word))) {
+      component[slot] = id, componentRefs |= 1 << slot;
+      return;
+    }
+    literalVars = true;
+  }
+  let raw = target.resolveVar(id) ?? varDefault(id);
+  if (raw === void 0) throw new UiStyleError(`style variable ${id} has no value; define it with defineVars`);
+  convert(style.variantKey[variant], word, raw), component[slot] = converted[0], lengthUnit = convertedUnit;
+}
+function safeEdge(prop, component2) {
+  return prop === UiProp.padding || prop === UiProp.margin ? component2 : prop >= UiProp.inset_top && prop <= UiProp.inset_left ? prop - UiProp.inset_top : -1;
+}
+function resolveWire(owner, wire, active, target) {
+  let first = WIRE_COMPONENT_START[wire], count = WIRE_COMPONENT_COUNT[wire], any = false;
+  componentRefs = 0, componentSafe = 0, lengthUnit = WIRE_DEFAULT_UNIT[wire];
+  let unit = lengthUnit;
+  for (let c = 0; c < count; c++) {
+    let index = first + c, chainStart2 = COMPONENT_CHAIN_START[index], chainEnd = chainStart2 + COMPONENT_CHAIN_COUNT[index], best = -1, bestStyle = null, bestVariant = (-1), bestWord = 0;
+    for (let link = chainStart2; link < chainEnd; link++) {
+      let key = CHAIN_KEYS[link], style = owner[key];
+      if (style === null) continue;
+      let begin = style.first[key], end = begin + style.count[key];
+      for (let v = begin; v < end; v++)
+        style.empty[v] === 1 || (style.mask[v] & ~active) !== 0 || style.priority[v] >= best && (best = style.priority[v], bestStyle = style, bestVariant = v, bestWord = CHAIN_WORDS[link]);
+    }
+    if (bestStyle === null) {
+      component[c] = COMPONENT_DEFAULTS[index];
+      continue;
+    }
+    if (any = true, read(bestStyle, bestVariant, bestWord, target, c), (bestStyle.mask[bestVariant] & Condition.safe) !== 0) {
+      let edge = safeEdge(WIRE_PROPS[wire], c);
+      edge >= 0 && (WIRE_EMITS[wire] !== WireEmit.length || lengthUnit === UiUnit.points) && (keepRefs ? componentSafe |= 1 << c : insets !== null);
+    }
+    unit = lengthUnit;
+  }
+  return lengthUnit = unit, any;
+}
+function fillFrom(values, offset, count) {
+  for (let i = 0; i < count; i++) values[i] = component[offset + i];
+  return values;
+}
+function resetWire(target, wire) {
+  let kind = WIRE_EMITS[wire];
+  if (kind === WireEmit.flag) return;
+  resolveWire(EMPTY_PROPS.owner, wire, 0, target);
+  let prop = WIRE_PROPS[wire], { writer, id } = target;
+  switch (target.cache.forget(prop), kind) {
+    case WireEmit.length:
+      writer.propFloatAt(id, prop, component, 0, lengthUnit);
+      return;
+    case WireEmit.float:
+      writer.propFloatAt(id, prop, component, 0);
+      return;
+    case WireEmit.word:
+      writer.propWordAt(id, prop, component, 0);
+      return;
+    case WireEmit.floats: {
+      let n = WIRE_COMPONENT_COUNT[wire];
+      writer.propFloats(id, prop, fillFrom(n === 2 ? floats2 : floats4, 0, n));
+      return;
+    }
+    case WireEmit.words:
+      writer.propWords(id, prop, fillFrom(words4, 0, 4));
+      return;
+    case WireEmit.shadow:
+      words1[0] = component[0], writer.propMixed(id, prop, words1, fillFrom(floats4, 1, (4)));
+      return;
+    case WireEmit.gradient:
+      writer.propWords(id, prop, NO_WORDS);
+      return;
+  }
+}
+var STYLE_RECORD_REFERENCED = 1 << 24, STYLE_RECORD_SAFE_EDGES = 1 << 25, RECORD_UNIT_SHIFT = 8, RECORD_WORDS_SHIFT = 16, MAX_STYLE_VARIANTS = 64, DETACHED = {
+  writer: null,
+  cache: null,
+  id: 0,
+  resolveVar: () => {
+  },
+  scopedVar: () => {
+  },
+  setLayer: () => {
+  }
+};
+function wireClosure(owner, wire) {
+  let closure = [0], first = WIRE_COMPONENT_START[wire];
+  for (let index = first; index < first + WIRE_COMPONENT_COUNT[wire]; index++) {
+    let chainStart2 = COMPONENT_CHAIN_START[index];
+    for (let link = chainStart2; link < chainStart2 + COMPONENT_CHAIN_COUNT[index]; link++) {
+      let key = CHAIN_KEYS[link], style = owner[key];
+      if (style !== null)
+        for (let v = style.first[key]; v < style.first[key] + style.count[key]; v++) {
+          let mask = style.mask[v];
+          if (style.empty[v] === 1 || mask === 0 || closure.indexOf(mask) >= 0) continue;
+          let known = closure.length;
+          for (let i = 0; i < known; i++) closure.indexOf(closure[i] | mask) < 0 && closure.push(closure[i] | mask);
+          if (closure.length > (64)) throw new UiStyleError(`a style property combines more than ${(64)} condition sets; split it across elements`);
+        }
+    }
+  }
+  return closure;
+}
+function isFloatComponent(emit, index) {
+  return emit === WireEmit.length || emit === WireEmit.float || emit === WireEmit.floats ? true : emit === WireEmit.shadow ? index > 0 : emit === WireEmit.gradient ? index >= (5) : false;
+}
+function encodeEntry(out, wire) {
+  let emit = WIRE_EMITS[wire], count = WIRE_COMPONENT_COUNT[wire], referenced = componentRefs !== 0, safe = componentSafe !== 0, unit = emit === WireEmit.length ? lengthUnit : 0;
+  out.push((WIRE_PROPS[wire] | unit << (8) | count << (16) | (referenced ? STYLE_RECORD_REFERENCED : 0) | (safe ? STYLE_RECORD_SAFE_EDGES : 0)) >>> 0), referenced && out.push(componentRefs >>> 0), safe && out.push(componentSafe >>> 0);
+  for (let i = 0; i < count; i++) {
+    let value = component[i];
+    out.push((componentRefs & 1 << i) !== 0 ? value >>> 0 : isFloatComponent(emit, i) ? floatBits(value) : value >>> 0);
+  }
+}
+function encode(props3, target) {
+  let records = [], wires = new Uint8Array(WIRE_COUNT);
+  keepRefs = true, encodingProps = props3, literalVars = false, collectedIds.length = 0, collectedKinds.length = 0;
+  try {
+    let list = Array.from(props3.wires).filter((wire) => WIRE_EMITS[wire] !== WireEmit.flag), closures = list.map((wire) => wireClosure(props3.owner, wire)), masks = [...new Set(closures.flat())].sort((a, b) => conditionPriority(a) - conditionPriority(b) || a - b);
+    for (let union of masks) {
+      let words = [];
+      for (let i = 0; i < list.length; i++) {
+        let wire = list[i];
+        closures[i].indexOf(union) < 0 || !resolveWire(props3.owner, wire, union, target) || (encodeEntry(words, wire), wires[wire] = 1);
+      }
+      union !== 0 && words.length === 0 || records.push({ mask: union, words: Uint32Array.from(words) });
+    }
+    return { records, wires, tokenIds: Uint32Array.from(collectedIds), tokenKinds: Uint8Array.from(collectedKinds), literal: literalVars };
+  } finally {
+    keepRefs = false, encodingProps = null, componentRefs = 0, componentSafe = 0;
+  }
+}
+function encodeStyleRecords(props3) {
+  return [...engineRecords(props3, DETACHED, false).records];
+}
+function engineRecords(props3, target, scoped) {
+  let version = props3.version(), cached = props3.encoded;
+  return (cached === null || props3.encodedVersion !== version) && (cached = encode(props3, DETACHED), props3.encoded = cached, props3.encodedVersion = version), scoped || cached.literal ? encode(props3, target) : cached;
+}
+
+// src/interactives/game-ui/styling/index.ts
+function styles2(definition, compiled) {
+  return styles(definition, compiled);
+}
+var props2 = props;
+
+// src/interactives/game-ui/measure.ts
+var MEASURE_CAPACITY = 2048, DEFAULT_FONT_SIZE = 16, WRAP_SLACK = 0.01, MEMO_LIMIT = 16384, f = Math.fround, TextMeasurer = class {
+  constructor() {
+    this.layout = new TextLayout((2048));
+    this.style = defaultLayoutStyle();
+    this.result = { lines: 0, rows: 0, width: 0, height: 0 };
+    this.memo = /* @__PURE__ */ new Map();
+    this.hits = 0;
+    this.misses = 0;
+    this.dictionaries = null;
+  }
+  measure(table, text, style, width, out) {
+    let size2 = style.fontSize ?? (16), lineHeight = style.lineHeight ?? 0, letterSpacing = style.letterSpacing ?? 0, wrap = style.textWrapStyle ?? "greedy", limit = width > 0 && Number.isFinite(width) ? width : Number.POSITIVE_INFINITY, dictionaries = breakDictionaries();
+    dictionaries !== this.dictionaries && (this.dictionaries = dictionaries, this.memo.clear());
+    let known = this.memo.get(text);
+    if (known !== void 0 && known.table === table && known.size === size2 && known.lineHeight === lineHeight && known.letterSpacing === letterSpacing && known.wrap === wrap && known.limit === limit)
+      return this.hits++, out.lines = known.lines, out.width = known.width, out.height = known.height, out;
+    this.misses++;
+    let shaped = f(Math.max(size2, 11920929e-14)), s = this.style;
+    s.size = shaped, s.lineHeight = f(lineHeight), s.letterSpacing = f(f(letterSpacing) / shaped), s.maxWidth = Number.isFinite(limit) ? f(f(limit) + f((0.01))) : 0, s.wrap = wrap;
+    let result = this.layout.measure(table, text, s, this.result);
+    return out.lines = result.lines, out.width = result.width, out.height = result.height, known !== void 0 ? (known.table = table, known.size = size2, known.lineHeight = lineHeight, known.letterSpacing = letterSpacing, known.wrap = wrap, known.limit = limit, known.lines = result.lines, known.width = result.width, known.height = result.height) : (this.memo.size >= (16384) && this.memo.clear(), this.memo.set(text, { table, size: size2, lineHeight, letterSpacing, wrap, limit, lines: result.lines, width: result.width, height: result.height })), out;
+  }
+  clear() {
+    this.memo.clear();
+  }
+};
+
+// src/interactives/game-ui/ui.ts
+var MIN_POLYGON_POINTS = 3, POLYGON_WORDS = 2, EXCLUSION_RECORDS = Array.from({ length: UI_MAX_EXCLUSIONS }, () => ({
+  shape: 0,
+  sibling: 0,
+  margin: 0,
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  points: null
+})), BREAKPOINT_SM = 640, BREAKPOINT_LG = 1024, LEGACY_KEYS = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "basis",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "padding",
+  "margin",
+  "borderWidth",
+  "gap",
+  "grow",
+  "shrink",
+  "aspect",
+  "direction",
+  "justify",
+  "alignItems",
+  "alignSelf",
+  "alignContent",
+  "position",
+  "wrap",
+  "display",
+  "fill",
+  "borderColor",
+  "radius",
+  "opacity",
+  "translate",
+  "scale",
+  "rotate",
+  "origin",
+  "zIndex",
+  "hidden",
+  "clip",
+  "pointerEvents",
+  "layer",
+  "shadow",
+  "gradient",
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign",
+  "textColor",
+  "textWrap",
+  "verticalAlign",
+  "placeholderColor",
+  "tint",
+  "uv",
+  "nineSlice",
+  "nineSliceUv",
+  "shape",
+  "stroke",
+  "strokeWidth",
+  "scrollAxes",
+  "textWrapStyle"
+]);
+function conditional(value) {
+  if (typeof value != "object" || value === null || Array.isArray(value)) return false;
+  for (let key in value) if (key === "default" || key.startsWith(":") || key.startsWith("@")) return true;
+  return false;
+}
+function isLegacyStyle(style) {
+  if (typeof style != "object" || style === null || Array.isArray(style) || ArrayBuffer.isView(style) || style instanceof CompiledStyle || style instanceof UiProps || style instanceof UiTheme) return false;
+  for (let key in style) {
+    if (!LEGACY_KEYS.has(key)) return false;
+    let value = style[key];
+    if (value instanceof UiVar || conditional(value)) return false;
+  }
+  return true;
+}
+function holds(encoded, mask) {
+  let records = encoded.records;
+  for (let i = 0; i < records.length; i++) if (records[i].mask === mask) return true;
+  return false;
+}
+var GameUiError = class extends Error {
+  constructor(message) {
+    super(message), this.name = "GameUiError";
+  }
+}, DEFAULT_MAX_NODES = 4096, DEFAULT_MAX_SLOTS = 4096, NO_SLOTS = -1, EMPTY_RECORD = new Uint32Array(0), SLOT_SCRATCH = new Uint32Array(1), ROOT_THEME = {}, DEFAULT_WEIGHT2 = 400, PIVOT_BOTTOM_CENTER = [0.5, 1], ZERO_PAIR = [0, 0], DEFAULT_MIN_SCALE = 0.25, DEFAULT_MAX_SCALE = 2, DEFAULT_OCCLUDED_OPACITY = 0.35, NO_SEPARATOR = 0, COMMA = 44, EVENT_FLAGS = {
+  press: UiFlag.press,
+  release: UiFlag.press,
+  tap: UiFlag.tap,
+  long_press: UiFlag.long_press,
+  drag_start: UiFlag.drag,
+  drag_move: UiFlag.drag,
+  drag_end: UiFlag.drag,
+  scroll: 0,
+  focus: 0,
+  action: UiFlag.tap,
+  passthrough: 0,
+  change: 0,
+  blur: 0,
+  vector: 0
+}, VECTOR_TRUE = 1, VECTOR_FALSE = 0, vectorNameEncoder = new TextEncoder(), vectorNames = /* @__PURE__ */ new Map();
+function vectorName(name) {
+  let bytes = vectorNames.get(name);
+  return bytes === void 0 && (bytes = vectorNameEncoder.encode(name), vectorNames.set(name, bytes)), bytes;
+}
+var decoder = new TextDecoder(), EVENT_NAMES = (() => {
+  let names = [];
+  for (let [name, code] of Object.entries(UiEventKind)) names[code] = name;
+  return names;
+})(), UiElement = class {
+  constructor(ui, id, kind) {
+    this.ui = ui;
+    this.id = id;
+    this.kind = kind;
+    this.cache = new StyleCache();
+    this.flags = 0;
+    this.listeners = null;
+    this.alive = true;
+    this.edited = "";
+    this.parentElement = null;
+    this.kids = [];
+    this.current = null;
+    this.sent = null;
+    this.sentVersion = -1;
+    this.forced = false;
+    this.focusable = false;
+    this.slotBase = (-1);
+    this.slotSize = 0;
+    this.slotFresh = false;
+    this.slotBits = null;
+    this.stateBits = 0;
+    this.scope = null;
+  }
+  get writer() {
+    return this.ui.writer;
+  }
+  get props() {
+    return this.current;
+  }
+  get state() {
+    return this.stateBits;
+  }
+  resolveVar(id) {
+    let cursor = this;
+    for (; cursor !== null; ) {
+      let scope = cursor.scope;
+      if (scope !== null) {
+        let value = scope.values.get(id);
+        if (value !== void 0) return value;
+      }
+      cursor = cursor.parentElement;
+    }
+    let root2 = this.ui.rootTheme;
+    if (root2 !== null) {
+      let value = root2.values.get(id);
+      if (value !== void 0) return value;
+    }
+    return varDefault(id);
+  }
+  scopedVar(id) {
+    let cursor = this;
+    for (; cursor !== null; ) {
+      let scope = cursor.scope;
+      if (scope !== null) {
+        let value = scope.values.get(id);
+        if (value !== void 0) return value;
+      }
+      cursor = cursor.parentElement;
+    }
+  }
+  scoped() {
+    let cursor = this;
+    for (; cursor !== null; ) {
+      if (cursor.scope !== null) return true;
+      cursor = cursor.parentElement;
+    }
+    return false;
+  }
+  get perElement() {
+    return this.sent !== null && (this.sent.literal || this.sent !== this.current?.encoded);
+  }
+  setLayer(on) {
+    this.setFlag(UiFlag.layer, on);
+  }
+  applyProps(next) {
+    let previous = this.scope, old = this.current;
+    if (this.current = next, this.scope = next.theme, (next.stateMask & Condition.pressed) !== 0 && this.setFlag(UiFlag.press, true), (next.stateMask & Condition.focus) !== 0 && !this.focusable && (this.focusable = true, this.ui.writer.propWord(this.id, UiProp.focusable, 1)), this.send(old, next), previous !== this.scope) for (let i = 0; i < this.kids.length; i++) this.kids[i].restyleVars();
+  }
+  send(old, next) {
+    let version = next.version();
+    if (next !== old || this.sent === null || this.forced || version !== this.sentVersion) {
+      let encoded = engineRecords(next, this, this.scoped());
+      next.slotCount > this.slotSize && this.allocateSlots(next.slotCount), this.ui.ensureTokens(encoded.tokenIds, encoded.tokenKinds);
+      let writer = this.ui.writer, previous = this.sent;
+      if (previous !== null && previous !== encoded) {
+        let records2 = previous.records;
+        for (let i = 0; i < records2.length; i++) {
+          let mask = records2[i].mask;
+          mask !== 0 && !holds(encoded, mask) && writer.style(this.id, mask, EMPTY_RECORD);
+        }
+      }
+      let records = encoded.records, base = this.slotBase < 0 ? 0 : this.slotBase;
+      for (let i = 0; i < records.length; i++) writer.style(this.id, records[i].mask, records[i].words, base);
+      if (previous !== null && previous !== encoded) {
+        let before = previous.wires, after = encoded.wires;
+        for (let wire = 0; wire < before.length; wire++) before[wire] === 1 && after[wire] === 0 && resetWire(this, wire);
+      }
+      this.sent = encoded, this.sentVersion = version, this.forced = false;
+    }
+    this.writeSlots(next);
+  }
+  allocateSlots(count) {
+    this.slotBase !== (-1) && this.ui.freeSlots(this.slotBase, this.slotSize), this.slotBase = this.ui.allocateSlots(count), this.slotSize = count, this.slotBits = new Uint32Array(count), this.slotFresh = true;
+  }
+  writeSlots(props3) {
+    let bits = this.slotBits;
+    if (bits === null || props3.slotCount === 0) return;
+    let dynamics = props3.dynamics;
+    for (let d = 0; d < dynamics.length; d++) {
+      let style = dynamics[d], offset = props3.slotOffsets[d];
+      for (let s = 0; s < style.slots; s++) {
+        style.slotBitsTo(s, SLOT_SCRATCH, 0);
+        let local = offset + s;
+        !this.slotFresh && bits[local] === SLOT_SCRATCH[0] || (bits[local] = SLOT_SCRATCH[0], this.ui.writer.slotAt(this.slotBase + local, SLOT_SCRATCH, 0));
+      }
+    }
+    this.slotFresh = false;
+  }
+  active() {
+    let bits = 0, cursor = this;
+    for (; cursor !== null; )
+      bits |= cursor.stateBits, cursor = cursor.parentElement;
+    return (bits & Condition.disabled) !== 0 && (bits &= ~(Condition.pressed | Condition.focus)), bits | this.ui.context;
+  }
+  restyle() {
+    this.current === null || !this.alive || (this.forced = true, this.send(this.current, this.current), this.ui.touched());
+  }
+  restyleVars() {
+    this.current !== null && this.current.usesVars && this.restyle();
+    for (let i = 0; i < this.kids.length; i++) this.kids[i].restyleVars();
+  }
+  setState(state, on) {
+    let bit = Condition[state], next = on ? this.stateBits | bit : this.stateBits & ~bit;
+    return next === this.stateBits ? this : (this.stateBits = next, state === "disabled" && this.alive && (this.ui.writer.propWord(this.id, UiProp.disabled, on ? 1 : 0), this.ui.touched()), this);
+  }
+  get parent() {
+    return this.parentElement;
+  }
+  get children() {
+    return this.kids;
+  }
+  contains(element) {
+    let cursor = element.parentElement;
+    for (; cursor !== null; ) {
+      if (cursor === this) return true;
+      cursor = cursor.parentElement;
+    }
+    return false;
+  }
+  detach() {
+    let parent = this.parentElement;
+    if (parent === null) return;
+    let at = parent.kids.indexOf(this);
+    at >= 0 && parent.kids.splice(at, 1), this.parentElement = null;
+  }
+  adopt(child, before) {
+    if (child === this || child.contains(this))
+      throw new GameUiError(`inserting ui element ${child.id} would create a cycle`);
+    child.parentElement !== null && child.detach();
+    let at = before === null ? -1 : this.kids.indexOf(before);
+    at < 0 ? this.kids.push(child) : this.kids.splice(at, 0, child), child.parentElement = this;
+  }
+  get destroyed() {
+    return !this.alive;
+  }
+  style(style) {
+    return this.ui.check(this), isLegacyStyle(style) ? (style.layer !== void 0 && this.setFlag(UiFlag.layer, style.layer), writeStyle(this.ui.writer, this.cache, this.id, style)) : this.applyProps(style instanceof UiProps ? style : props2(style)), this.ui.touched(), this;
+  }
+  append(child) {
+    return this.ui.check(this), this.ui.check(child), this.adopt(child, null), this.ui.writer.insert(child.id, this.id, 4294967295), this.ui.touched(), this;
+  }
+  insertBefore(child, before) {
+    if (this.ui.check(this), this.ui.check(child), before.parentElement !== this) throw new GameUiError(`ui element ${before.id} is not a child of ${this.id}`);
+    return this.adopt(child, before), this.ui.writer.insert(child.id, this.id, before.id), this.ui.touched(), this;
+  }
+  remove() {
+    return this.ui.check(this), this.detach(), this.ui.writer.remove(this.id), this.ui.touched(), this;
+  }
+  destroy() {
+    this.alive && (this.ui.release(this), this.alive = false);
+  }
+  get value() {
+    return this.edited;
+  }
+  accept(value) {
+    this.edited = value;
+  }
+  text(value) {
+    return this.ui.check(this), this.kind === "input" && (this.edited = value), this.ui.writer.text(this.id, value), this.ui.touched(), this;
+  }
+  textPrefix(value, length2) {
+    return this.ui.check(this), this.ui.writer.textPrefix(this.id, value, length2), this.ui.touched(), this;
+  }
+  textRef(id) {
+    return this.ui.check(this), this.ui.writer.textRef(this.id, id), this.ui.touched(), this;
+  }
+  number(value, options = {}) {
+    this.ui.check(this);
+    let separator = options.separator === void 0 ? (44) : options.separator.length === 0 ? (0) : options.separator.charCodeAt(0);
+    return this.ui.writer.number(this.id, value, UiNumberFormat[options.format ?? "integer"], options.decimals ?? 0, separator), this.ui.touched(), this;
+  }
+  placeholder(value) {
+    return this.ui.check(this), this.ui.writer.placeholder(this.id, value), this.ui.touched(), this;
+  }
+  image(asset, width, height) {
+    return this.ui.check(this), this.ui.writer.image(this.id, asset, width, height), this.ui.touched(), this;
+  }
+  path(points) {
+    return this.ui.check(this), this.ui.writer.path(this.id, points), this.ui.touched(), this;
+  }
+  vector(asset, artboard = 0) {
+    return this.requireVector(), this.ui.writer.vector(this.id, asset, artboard), this.ui.touched(), this;
+  }
+  play(kind, index) {
+    return this.requireVector(), this.ui.writer.vectorPlay(this.id, kind, index), this.ui.touched(), this;
+  }
+  seek(kind, index, seconds) {
+    return this.requireVector(), this.ui.writer.vectorSeek(this.id, kind, index, seconds), this.ui.touched(), this;
+  }
+  setInput(input, value) {
+    this.requireVector();
+    let numeric = typeof value == "boolean" ? value ? (1) : (0) : value;
+    return typeof input == "number" ? this.ui.writer.vectorInput(this.id, input, numeric) : this.ui.writer.vectorInputName(this.id, vectorName(input), numeric), this.ui.touched(), this;
+  }
+  setData(path, value) {
+    return this.requireVector(), typeof value == "boolean" ? this.ui.writer.vectorData(this.id, UiVectorData.bool, vectorName(path), value ? (1) : (0), 0) : this.ui.writer.vectorData(this.id, UiVectorData.number, vectorName(path), value, 0), this.ui.touched(), this;
+  }
+  setDataColor(path, argb) {
+    return this.requireVector(), this.ui.writer.vectorData(this.id, UiVectorData.color, vectorName(path), 0, argb >>> 0), this.ui.touched(), this;
+  }
+  fireData(path) {
+    return this.requireVector(), this.ui.writer.vectorData(this.id, UiVectorData.fire, vectorName(path), 0, 0), this.ui.touched(), this;
+  }
+  detachVector() {
+    return this.requireVector(), this.ui.writer.vectorDetach(this.id), this.ui.touched(), this;
+  }
+  requireVector() {
+    if (this.ui.check(this), this.kind !== "vector") throw new GameUiError(`ui ${this.kind} ${this.id} is not a vector element; create it with ui.vector`);
+  }
+  flowAround(exclusions) {
+    if (this.ui.check(this), this.kind === "image" || this.kind === "shape") throw new GameUiError(`ui ${this.kind} ${this.id} cannot flow around shapes; use text, input, box or scroll`);
+    let count = exclusions === null ? 0 : exclusions.length;
+    if (count > UI_MAX_EXCLUSIONS) throw new GameUiError(`ui element ${this.id} flows around at most ${UI_MAX_EXCLUSIONS} shapes`);
+    for (let i = 0; i < count; i++) this.exclusionRecord(exclusions[i], EXCLUSION_RECORDS[i]);
+    this.ui.writer.exclusions(this.id, EXCLUSION_RECORDS, count);
+    for (let i = 0; i < count; i++) EXCLUSION_RECORDS[i].points = null;
+    return this.ui.touched(), this;
+  }
+  exclusionRecord(exclusion, out) {
+    if (out.margin = exclusion.margin ?? 0, out.sibling = 4294967295, out.x = 0, out.y = 0, out.width = 0, out.height = 0, out.points = null, "rect" in exclusion)
+      out.shape = UiExclusionShape.rect, out.x = exclusion.rect[0], out.y = exclusion.rect[1], out.width = exclusion.rect[2], out.height = exclusion.rect[3];
+    else if ("circle" in exclusion) {
+      let [cx, cy, r] = exclusion.circle;
+      out.shape = UiExclusionShape.ellipse, out.x = cx - r, out.y = cy - r, out.width = r * 2, out.height = r * 2;
+    } else if ("polygon" in exclusion) {
+      if (exclusion.polygon.length < (3) * (2)) throw new GameUiError("an exclusion polygon needs at least three points");
+      out.shape = UiExclusionShape.polygon, out.points = exclusion.polygon, exclusion.element !== void 0 && (out.sibling = this.exclusionTarget(exclusion.element));
+    } else
+      out.shape = exclusion.shape === "circle" ? UiExclusionShape.ellipse : UiExclusionShape.rect, out.sibling = this.exclusionTarget(exclusion.element);
+  }
+  exclusionTarget(element) {
+    if (this.ui.check(element), element === this) throw new GameUiError(`ui element ${this.id} cannot flow around itself`);
+    return element.id;
+  }
+  transition(props3, options) {
+    this.ui.check(this);
+    let mask = 0;
+    for (let prop of props3) mask |= UiTransition[prop];
+    let easing = options.spring !== void 0 ? "spring" : options.bezier !== void 0 ? "bezier" : options.easing ?? "ease", params = options.spring !== void 0 ? [options.spring.damping, options.spring.cycles, 0, 0] : options.bezier ?? null;
+    return this.ui.writer.transition(this.id, mask, options.duration, UiEasing[easing], params), this.ui.touched(), this;
+  }
+  accessibility(options) {
+    this.ui.check(this);
+    let writer = this.ui.writer;
+    options.role !== void 0 && writer.propWord(this.id, UiProp.role, UiRole[options.role]), options.label !== void 0 && writer.label(this.id, options.label), options.value !== void 0 && writer.value(this.id, options.value);
+    let traits = (options.selected ? UiTrait.selected : 0) | (options.disabled ? UiTrait.disabled : 0) | (options.hidden ? UiTrait.hidden : 0) | (options.live ? UiTrait.live : 0) | (options.modal ? UiTrait.modal : 0);
+    if (writer.propWord(this.id, UiProp.traits, traits), this.setState("disabled", options.disabled === true), options.actions !== void 0) {
+      let actions = 0;
+      for (let action of options.actions) actions |= UiAction[action];
+      writer.propWord(this.id, UiProp.actions, actions);
+    }
+    return this.ui.touched(), this;
+  }
+  scrollTo(x, y) {
+    return this.ui.check(this), this.ui.writer.scrollTo(this.id, x, y), this.ui.touched(), this;
+  }
+  focus() {
+    return this.ui.check(this), this.ui.writer.focus(this.id), this.ui.touched(), this;
+  }
+  blur() {
+    return this.ui.check(this), this.ui.writer.blur(this.id), this.ui.touched(), this;
+  }
+  on(event, listener) {
+    this.ui.check(this), this.listeners === null && (this.listeners = /* @__PURE__ */ new Map());
+    let list = this.listeners.get(event);
+    return list === void 0 && (list = [], this.listeners.set(event, list)), list.push(listener), this.setFlag(EVENT_FLAGS[event], true), () => {
+      let at = list.indexOf(listener);
+      at >= 0 && list.splice(at, 1);
+    };
+  }
+  emit(name, event) {
+    name === "press" ? this.setState("pressed", true) : name === "release" ? this.setState("pressed", false) : name === "focus" ? this.setState("focus", true) : name === "blur" && this.setState("focus", false);
+    let list = this.listeners?.get(name);
+    if (list === void 0 || list.length === 0) return false;
+    for (let i = 0; i < list.length; i++) list[i](event, this);
+    return true;
+  }
+  setFlag(flag, on) {
+    if (flag === 0) return;
+    let next = on ? this.flags | flag : this.flags & ~flag;
+    next !== this.flags && (this.flags = next, this.ui.writer.propWord(this.id, UiProp.flags, next), this.ui.touched());
+  }
+  dispose() {
+    this.alive = false, this.listeners = null, this.current = null, this.sent = null, this.scope = null, this.slotBase !== (-1) && this.ui.freeSlots(this.slotBase, this.slotSize), this.slotBase = (-1), this.slotSize = 0, this.slotBits = null;
+  }
+}, GameUi = class {
+  constructor(sink, options = {}) {
+    this.sink = sink;
+    this.elements = [];
+    this.free = [];
+    this.next = 0;
+    this.strings = /* @__PURE__ */ new Map();
+    this.families = /* @__PURE__ */ new Map();
+    this.fontFamilies = [];
+    this.fontWeights = [];
+    this.fontIds = [];
+    this.measurer = new TextMeasurer();
+    this.passthrough = [];
+    this.event = { kind: 0, phase: 0, pointer: 0, node: 0, x: 0, y: 0, dx: 0, dy: 0, value: 0, time_ms: 0 };
+    this.scheduled = false;
+    this.contextBits = Condition.portrait | Condition.safe;
+    this.themeRoot = null;
+    this.tokenIds = [];
+    this.tokenKinds = [];
+    this.tokenSent = /* @__PURE__ */ new Set();
+    this.themeBits = /* @__PURE__ */ new WeakMap();
+    this.slotTop = 0;
+    this.freeSlotBlocks = /* @__PURE__ */ new Map();
+    this.flushTask = () => {
+      this.flush();
+    };
+    this.maxNodes = options.max_nodes ?? (4096), this.maxSlots = options.max_slots ?? (4096), this.autoFlush = options.auto_flush ?? true, this.writer = new PatchWriter(options.capacity, options.reserve ?? 0), options.dictionaries === true && this.textDictionaries(true);
+  }
+  get context() {
+    return this.contextBits;
+  }
+  get rootTheme() {
+    return this.themeRoot;
+  }
+  styles(definition, compiled) {
+    return styles2(definition, compiled);
+  }
+  props(a, b, c, d, e, f2, g, h) {
+    return props2(a, b, c, d, e, f2, g, h);
+  }
+  environment(environment) {
+    let width = environment.width;
+    this.contextBits = (width > environment.height ? Condition.landscape : Condition.portrait) | Condition.safe | (width >= (640) ? Condition.sm : 0) | (width >= (1024) ? Condition.lg : 0);
+  }
+  tokenValue(theme, id, kind) {
+    let key = theme ?? ROOT_THEME, caches = this.themeBits.get(key);
+    caches === void 0 && (caches = [/* @__PURE__ */ new Map(), /* @__PURE__ */ new Map(), /* @__PURE__ */ new Map()], this.themeBits.set(key, caches));
+    let cache = caches[kind], bits = cache.get(id);
+    if (bits === void 0) {
+      let raw = theme?.values.get(id) ?? varDefault(id);
+      if (raw === void 0) throw new GameUiError(`style variable ${id} has no value; define it with defineVars`);
+      bits = tokenBits(kind, raw), cache.set(id, bits);
+    }
+    return bits;
+  }
+  ensureTokens(ids, kinds) {
+    let missing = 0;
+    for (let i = 0; i < ids.length; i++) this.tokenSent.has(ids[i]) || missing++;
+    if (missing !== 0) {
+      this.writer.tokens(false, missing);
+      for (let i = 0; i < ids.length; i++) {
+        let id = ids[i];
+        this.tokenSent.has(id) || (this.tokenSent.add(id), this.tokenIds.push(id), this.tokenKinds.push(kinds[i]), this.writer.pair(id, this.tokenValue(this.themeRoot, id, kinds[i])));
+      }
+    }
+  }
+  theme(theme) {
+    if (theme === this.themeRoot) return;
+    this.themeRoot = theme;
+    let count = this.tokenIds.length;
+    if (count > 0) {
+      this.writer.tokens(true, count);
+      for (let i = 0; i < count; i++) this.writer.pair(this.tokenIds[i], this.tokenValue(theme, this.tokenIds[i], this.tokenKinds[i]));
+    }
+    for (let i = 0; i < this.elements.length; i++) {
+      let element = this.elements[i];
+      element !== void 0 && element.perElement && element.restyle();
+    }
+    this.touched();
+  }
+  allocateSlots(count) {
+    let free = this.freeSlotBlocks.get(count);
+    if (free !== void 0 && free.length > 0) return free.pop();
+    let base = this.slotTop;
+    if (base + count > this.maxSlots) throw new GameUiError(`a game ui holds at most ${this.maxSlots} dynamic style slots`);
+    return this.slotTop = base + count, base;
+  }
+  freeSlots(base, count) {
+    let free = this.freeSlotBlocks.get(count);
+    free === void 0 && (free = [], this.freeSlotBlocks.set(count, free)), free.push(base);
+  }
+  textDictionaries(on) {
+    this.writer.textOptions(on ? UiTextOption.dictionaries : 0), this.touched();
+  }
+  check(element) {
+    if (element.ui !== this) throw new GameUiError("this element belongs to another game ui");
+    if (element.destroyed) throw new GameUiError(`ui element ${element.id} was destroyed`);
+  }
+  touched() {
+    !this.autoFlush || this.scheduled || (this.scheduled = true, queueMicrotask(this.flushTask));
+  }
+  allocate(kind) {
+    let id = this.free.length > 0 ? this.free.pop() : this.next++;
+    if (id >= this.maxNodes) throw new GameUiError(`a game ui holds at most ${this.maxNodes} nodes`);
+    let element = new UiElement(this, id, kind);
+    return this.elements[id] = element, this.writer.create(id, UiKind[kind]), this.touched(), element;
+  }
+  release(element) {
+    this.check(element), this.writer.destroy(element.id), this.touched(), this.forget(element);
+  }
+  forget(element) {
+    element.detach();
+    let kids = element.children.slice();
+    for (let i = 0; i < kids.length; i++) this.forget(kids[i]);
+    this.elements[element.id] = void 0, this.free.push(element.id), element.dispose();
+  }
+  element(id) {
+    return this.elements[id];
+  }
+  box(style) {
+    let element = this.allocate("box");
+    return style !== void 0 && element.style(style), element;
+  }
+  text(content, style, options) {
+    let element = this.allocate("text");
+    return style !== void 0 && element.style(style), content.length > 0 && element.text(content), options?.flowAround !== void 0 && element.flowAround(options.flowAround), element;
+  }
+  fontFor(family, weight = (400)) {
+    let id = typeof family == "number" ? family : this.family(family), best = id, distance = Number.POSITIVE_INFINITY;
+    for (let i = 0; i < this.fontFamilies.length; i++) {
+      if (this.fontFamilies[i] !== id) continue;
+      let gap = Math.abs(this.fontWeights[i] - weight);
+      gap < distance && (distance = gap, best = this.fontIds[i]);
+    }
+    return best;
+  }
+  measureText(text, style = {}, width = 0, out) {
+    let font = this.fontFor(style.fontFamily ?? 0, style.fontWeight ?? (400)), table = fontTable(font);
+    if (table === void 0)
+      throw new GameUiError(`measureText needs the table of render font ${font}; load it with graphics.loadFont before measuring`);
+    return this.measurer.measure(table, text, style, width, out ?? { lines: 0, width: 0, height: 0 });
+  }
+  get measureStats() {
+    return { hits: this.measurer.hits, misses: this.measurer.misses };
+  }
+  image(asset, natural, style) {
+    let element = this.allocate("image");
+    return element.image(asset, natural[0], natural[1]), style !== void 0 && element.style(style), element;
+  }
+  loadVector(asset, bytes) {
+    this.writer.vectorLoad(asset, bytes), this.touched();
+  }
+  unloadVector(asset) {
+    this.writer.vectorUnload(asset), this.touched();
+  }
+  vector(asset, artboard = 0, style) {
+    let element = this.allocate("vector");
+    return element.vector(asset, artboard), style !== void 0 && element.style(style), element;
+  }
+  shape(style, path) {
+    let element = this.allocate("shape");
+    return style !== void 0 && element.style(style), path !== void 0 && element.path(path), element;
+  }
+  scroll(style) {
+    let element = this.allocate("scroll");
+    return style !== void 0 && element.style(style), element;
+  }
+  input(placeholder, style) {
+    let element = this.allocate("input");
+    return style !== void 0 && element.style(style), placeholder.length > 0 && element.placeholder(placeholder), element;
+  }
+  root(element, options = {}) {
+    this.check(element);
+    let offset = options.offset ?? ZERO_PAIR;
+    return this.writer.root(element.id, UiAnchor[options.anchor ?? "top_left"], options.safe_area ?? true, offset[0], offset[1], options.z ?? 0), this.touched(), element;
+  }
+  worldRoot(element, anchor) {
+    return this.check(element), this.writer.worldRoot(element.id, {
+      position: anchor.position,
+      pivot: anchor.pivot ?? PIVOT_BOTTOM_CENTER,
+      offset: anchor.offset ?? ZERO_PAIR,
+      reference_distance: anchor.reference_distance ?? 0,
+      min_scale: anchor.min_scale ?? (0.25),
+      max_scale: anchor.max_scale ?? (2),
+      hide_when_occluded: anchor.hide_when_occluded ?? false,
+      occluded_opacity: anchor.occluded_opacity ?? (0.35),
+      z: anchor.z ?? 0
+    }), this.touched(), element;
+  }
+  unroot(element) {
+    this.check(element), this.writer.unroot(element.id), this.touched();
+  }
+  move(element, x, y, z) {
+    this.check(element), this.writer.anchor(element.id, x, y, z), this.touched();
+  }
+  moveFrom(element, values, offset) {
+    this.check(element), this.writer.anchorFrom(element.id, values, offset), this.touched();
+  }
+  occlude(element, occluded) {
+    this.check(element), this.writer.occluded(element.id, occluded), this.touched();
+  }
+  intern(text) {
+    let known = this.strings.get(text);
+    if (known !== void 0) return known;
+    let id = this.strings.size;
+    return this.strings.set(text, id), this.writer.string(id, text), this.touched(), id;
+  }
+  family(name) {
+    let known = this.families.get(name);
+    if (known !== void 0) return known;
+    let id = this.families.size;
+    return this.families.set(name, id), id;
+  }
+  registerFont(family, font, weight = (400)) {
+    let id = this.family(family), at = -1;
+    for (let i = 0; i < this.fontFamilies.length; i++) this.fontFamilies[i] === id && this.fontWeights[i] === weight && (at = i);
+    return at < 0 ? (this.fontFamilies.push(id), this.fontWeights.push(weight), this.fontIds.push(font)) : this.fontIds[at] = font, this.writer.font(id, weight, font), this.touched(), id;
+  }
+  onPassthrough(listener) {
+    return this.passthrough.push(listener), () => {
+      let at = this.passthrough.indexOf(listener);
+      at >= 0 && this.passthrough.splice(at, 1);
+    };
+  }
+  flush() {
+    if (this.scheduled = false, this.writer.empty) return 0;
+    let length2 = this.writer.finish();
+    return this.sink.submit(this.writer.bytes, length2), this.writer.reset(), length2;
+  }
+  dispatch(bytes, offset = 0) {
+    let view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength), handled = 0, stride = 32;
+    for (let at = offset; at + 32 <= bytes.byteLength; at += stride) {
+      readEvent(view, at, this.event), stride = eventStride(this.event.kind, view, at), this.event.text = void 0;
+      let name = EVENT_NAMES[this.event.kind];
+      if (name == null) continue;
+      if (name === "change") {
+        let start = at + 32, end = Math.min(start + this.event.value, bytes.byteLength), text = decoder.decode(bytes.subarray(start, end));
+        this.event.text = text;
+        let target = this.elements[this.event.node];
+        if (target === void 0) continue;
+        target.accept(text), target.emit(name, this.event) && handled++;
+        continue;
+      }
+      if (name === "passthrough") {
+        for (let i = 0; i < this.passthrough.length; i++) this.passthrough[i](this.event);
+        handled++;
+        continue;
+      }
+      let element = this.elements[this.event.node];
+      element !== void 0 && element.emit(name, this.event) && handled++;
+    }
+    return handled;
+  }
+};
+function collectingSink() {
+  let buffers = [];
+  return {
+    buffers,
+    submit(bytes, length2) {
+      buffers.push(bytes.slice(0, length2));
+    }
+  };
+}
+
+export { BREAKPOINT_LG, BREAKPOINT_SM, CompiledStyle, Condition, GameUi, GameUiError, KEY_NAMES, SLOT_REFERENCE, STYLE_BLOCK_MAGIC, STYLE_BLOCK_VERSION, STYLE_PROPERTY_NAMES, STYLE_RECORD_REFERENCED, STYLE_RECORD_SAFE_EDGES, TextMeasurer, UiElement, UiProps, UiStyleCompileError, VariantKind, collectingSink, compileClasses, compileStyle, conditionPriority, encodeStyleRecords, props2 as props, readBlock, styles2 as styles, tailwindStyle, tailwindVocabulary };