@rpgjs/action-battle 5.0.0-beta.2 → 5.0.0-beta.4

package/dist/client/index5.js

@@ -1,292 +1,37 @@
-import { useProps, useDefineProps, signal, computed, effect, h, DOMContainer, DOMElement, loop, cond, DOMSprite } from "canvasengine";
-import { inject, RpgClientEngine } from "@rpgjs/client";
-import { actionBattleUiOptions, actionBattleTargetingState, stopTargeting, moveTargetingOffset, startTargeting } from "./index7.js";
-if (typeof document !== "undefined" && !document.getElementById("ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce")) {
-  const styleElement = document.createElement("style");
-  styleElement.id = "ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce";
-  styleElement.textContent = ".action-battle-actionbar-root {\n    pointer-events: none;\n  }\n\n  .action-battle-actionbar {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 12px;\n    pointer-events: auto;\n    display: flex;\n    justify-content: center;\n  }\n\n  .action-battle-actionbar-plate {\n    width: min(760px, 100%);\n    --rpg-ui-hotbar-size: clamp(38px, 8vw, 52px);\n  }\n\n  .action-battle-actionbar-track {\n    --rpg-ui-hotbar-slots: 10;\n  }";
-  document.head.appendChild(styleElement);
-}
-function component($$props) {
-  useProps($$props);
-  const defineProps = useDefineProps($$props);
-  var __assign = this && this.__assign || function() {
-    __assign = Object.assign || function(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  var engine = inject(RpgClientEngine);
-  var keyboardControls = engine.globalConfig.keyboardControls;
-  var _a = defineProps();
-  _a.data;
-  var onInteraction = _a.onInteraction, onBack = _a.onBack;
-  var currentPlayer = engine.getCurrentPlayer();
-  var ACTION_BAR_SIZE = 10;
-  var SLOT_LABELS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
-  var SLOT_CONFIG_KEYS = [
-    "hotbar1",
-    "hotbar2",
-    "hotbar3",
-    "hotbar4",
-    "hotbar5",
-    "hotbar6",
-    "hotbar7",
-    "hotbar8",
-    "hotbar9",
-    "hotbar0"
-  ];
-  var selectedSlotIndex = signal(-1);
-  var uiOptions = computed(function() {
-    return actionBattleUiOptions();
-  });
-  var showItems = computed(function() {
-    var _a2;
-    var mode = ((_a2 = uiOptions().actionBar) === null || _a2 === void 0 ? void 0 : _a2.mode) || "both";
-    return mode === "items" || mode === "both";
-  });
-  var showSkills = computed(function() {
-    var _a2;
-    var mode = ((_a2 = uiOptions().actionBar) === null || _a2 === void 0 ? void 0 : _a2.mode) || "both";
-    return mode === "skills" || mode === "both";
-  });
-  var isTargeting = computed(function() {
-    return actionBattleTargetingState().active;
-  });
-  var iconSheet = function(iconId) {
-    return {
-      definition: engine.getSpriteSheet(iconId),
-      playing: "default"
-    };
-  };
-  var actionBarSlots = computed(function() {
-    var entries = [];
-    if (showSkills()) {
-      currentPlayer.skills().forEach(function(skill, index) {
-        entries.push({
-          type: "skill",
-          skill,
-          item: null,
-          sourceIndex: index
-        });
-      });
-    }
-    if (showItems()) {
-      currentPlayer.items().forEach(function(item, index) {
-        entries.push({
-          type: "item",
-          skill: null,
-          item,
-          sourceIndex: index
-        });
-      });
-    }
-    var slots = entries.slice(0, ACTION_BAR_SIZE).map(function(entry, index) {
-      return __assign(__assign({}, entry), { label: SLOT_LABELS[index] });
-    });
-    while (slots.length < ACTION_BAR_SIZE) {
-      slots.push({
-        type: "empty",
-        skill: null,
-        item: null,
-        sourceIndex: -1,
-        label: SLOT_LABELS[slots.length]
-      });
-    }
-    return slots;
-  });
-  var hasSlotEntry = function(slot) {
-    return slot.type === "skill" || slot.type === "item";
-  };
-  var isSlotDisabled = function(slot) {
-    if (!hasSlotEntry(slot))
-      return true;
-    var entry = slot.type === "skill" ? slot.skill : slot.item;
-    return !entry || !entry.usable;
-  };
-  var getItemQuantity = function(item) {
-    if (!item)
-      return 0;
-    if (typeof item.quantity === "function")
-      return item.quantity();
-    return item.quantity || 0;
-  };
-  var selectItem = function(item) {
-    if (!item || !item.usable)
-      return;
-    if (onInteraction)
-      onInteraction("useItem", { id: item.id });
-  };
-  var selectSkill = function(skill) {
-    var _a2;
-    if (!skill || !skill.usable)
-      return;
-    var range = (_a2 = skill.range) !== null && _a2 !== void 0 ? _a2 : 0;
-    if (range > 0 || skill.aoeMask) {
-      startTargeting(skill);
-      return;
-    }
-    if (onInteraction)
-      onInteraction("useSkill", { id: skill.id });
-  };
-  var selectSlot = function(index) {
-    var slot = actionBarSlots()[index];
-    if (!slot || !hasSlotEntry(slot))
-      return;
-    if (slot.type === "skill") {
-      selectSkill(slot.skill);
-      return;
-    }
-    selectItem(slot.item);
-  };
-  var onSelectSlot = function(index) {
-    return function() {
-      selectedSlotIndex.set(index);
-      selectSlot(index);
-    };
-  };
-  var getPlayerTile = function() {
-    var _a2;
-    var player = engine.scene.getCurrentPlayer();
-    if (!player)
-      return null;
-    var hitbox = ((_a2 = player.hitbox) === null || _a2 === void 0 ? void 0 : _a2.call(player)) || { w: 32, h: 32 };
-    var tileWidth = hitbox.w || 32;
-    var tileHeight = hitbox.h || 32;
-    var x = Math.floor((player.x() + hitbox.w / 2) / tileWidth);
-    var y = Math.floor((player.y() + hitbox.h / 2) / tileHeight);
-    return { x, y };
-  };
-  var confirmTargeting = function() {
-    var state = actionBattleTargetingState();
-    if (!state.skill)
-      return;
-    var origin = getPlayerTile();
-    if (!origin)
-      return;
-    var target = {
-      x: origin.x + state.offset.x,
-      y: origin.y + state.offset.y
-    };
-    if (onInteraction) {
-      onInteraction("useSkill", {
-        id: state.skill.id,
-        target
-      });
-    }
-    stopTargeting();
-  };
-  var resolveKeyBind = function(key) {
-    if (!key)
-      return null;
-    if (typeof key === "string" && (keyboardControls === null || keyboardControls === void 0 ? void 0 : keyboardControls[key])) {
-      return keyboardControls[key];
-    }
-    return key;
-  };
-  var slotBind = function(index) {
-    return (keyboardControls === null || keyboardControls === void 0 ? void 0 : keyboardControls[SLOT_CONFIG_KEYS[index]]) || SLOT_LABELS[index];
-  };
-  var buildControls = function() {
-    var hotbarControls = {};
-    actionBarSlots().forEach(function(slot, index) {
-      var _a2;
-      if (!hasSlotEntry(slot))
-        return;
-      var bind = slotBind(index);
-      hotbarControls["slot-".concat(index)] = {
-        bind,
-        keyDown: function() {
-          if (isTargeting())
-            return;
-          selectedSlotIndex.set(index);
-          selectSlot(index);
-        }
-      };
-      if (slot.type === "skill") {
-        var skillBind = resolveKeyBind((_a2 = slot.skill) === null || _a2 === void 0 ? void 0 : _a2.key);
-        if (!skillBind || skillBind === bind)
-          return;
-        hotbarControls["skill-".concat(index)] = {
-          bind: skillBind,
-          keyDown: function() {
-            if (isTargeting())
-              return;
-            selectedSlotIndex.set(index);
-            selectSlot(index);
-          }
-        };
-      }
-    });
-    return __assign(__assign({ left: {
-      repeat: true,
-      bind: keyboardControls.left,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(-1, 0);
-        }
-      }
-    }, right: {
-      repeat: true,
-      bind: keyboardControls.right,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(1, 0);
-        }
-      }
-    }, up: {
-      repeat: true,
-      bind: keyboardControls.up,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(0, -1);
-        }
-      }
-    }, down: {
-      repeat: true,
-      bind: keyboardControls.down,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(0, 1);
-        }
-      }
-    }, action: {
-      bind: keyboardControls.action,
-      keyDown: function() {
-        if (isTargeting()) {
-          confirmTargeting();
-        }
-      }
-    }, escape: {
-      bind: keyboardControls.escape,
-      keyDown: function() {
-        if (isTargeting()) {
-          stopTargeting();
-          return;
-        }
-        if (onBack)
-          onBack();
-      }
-    } }, hotbarControls), { gamepad: {
-      enabled: true
-    } });
-  };
-  var controls = signal(buildControls());
-  effect(function() {
-    controls.set(buildControls());
-  });
-  let $this = h(DOMContainer, { width: "100%", height: "100%", attrs: { class: "action-battle-actionbar-root" }, controls }, h(DOMElement, { element: "div", attrs: { class: "action-battle-actionbar" } }, h(DOMElement, { element: "div", attrs: { class: "rpg-ui-hotbar action-battle-actionbar-plate" } }, h(DOMElement, { element: "div", attrs: { class: "rpg-ui-hotbar-track action-battle-actionbar-track" } }, loop(actionBarSlots, (slot, index) => h(DOMElement, { element: "div", attrs: { class: "rpg-ui-hotbar-slot action-battle-actionbar-slot", "data-selected": computed(() => selectedSlotIndex() === index ? "true" : "false"), "data-disabled": computed(() => isSlotDisabled(slot) ? "true" : "false"), "data-empty": computed(() => hasSlotEntry(slot) ? "false" : "true"), "data-type": slot.type, tabindex: computed(() => hasSlotEntry(slot) ? index : -1), click: hasSlotEntry(slot) ? onSelectSlot(index) : void 0 } }, [h(DOMElement, { element: "span", attrs: { class: "rpg-ui-hotbar-key action-battle-actionbar-key" }, textContent: slot.label }), cond(computed(() => slot.type === "skill" && slot.skill?.icon), () => h(DOMSprite, { sheet: computed(() => iconSheet(slot.skill.icon)), width: "60px", height: "60px", scale: 2, objectFit: "contain" }), [computed(() => slot.type === "item" && slot.item?.icon), () => h(DOMSprite, { sheet: computed(() => iconSheet(slot.item.icon)), width: "60px", height: "60px", scale: 2, objectFit: "contain" })], [computed(() => slot.type === "skill" && slot.skill), () => h(DOMElement, { element: "span", attrs: { class: "rpg-ui-hotbar-text action-battle-actionbar-text" }, textContent: slot.skill.name })], [computed(() => slot.type === "item" && slot.item), () => h(DOMElement, { element: "span", attrs: { class: "rpg-ui-hotbar-text action-battle-actionbar-text" }, textContent: slot.item.name })]), cond(computed(() => slot.type === "item" && slot.item), () => h(DOMElement, { element: "span", attrs: { class: "rpg-ui-hotbar-count action-battle-actionbar-count" }, textContent: "x" + getItemQuantity(slot.item) }))]))))));
-  return $this;
-}
-export {
-  component as default
+//#region src/targeting.ts
+var normalizeMaskRows = (mask) => {
+	if (!mask) return ["#"];
+	if (Array.isArray(mask)) return mask;
+	return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
 };
+var parseAoeMask = (mask) => {
+	const rows = normalizeMaskRows(mask);
+	const height = rows.length;
+	const width = rows.reduce((max, row) => Math.max(max, row.length), 0);
+	const centerX = Math.floor(width / 2);
+	const centerY = Math.floor(height / 2);
+	const cells = [];
+	rows.forEach((row, y) => {
+		for (let x = 0; x < row.length; x++) {
+			const char = row[x];
+			if (char && char !== "." && char !== " ") cells.push({
+				dx: x - centerX,
+				dy: y - centerY
+			});
+		}
+	});
+	if (cells.length === 0) cells.push({
+		dx: 0,
+		dy: 0
+	});
+	return {
+		width,
+		height,
+		centerX,
+		centerY,
+		cells
+	};
+};
+var manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+//#endregion
+export { manhattanDistance, parseAoeMask };

package/dist/client/index6.js

@@ -1,97 +1,101 @@
-import { useProps, useDefineProps, computed, h, Container, cond, Graphics } from "canvasengine";
-import { inject, RpgClientEngine } from "@rpgjs/client";
-import { actionBattleUiOptions, actionBattleTargetingState } from "./index7.js";
-import { parseAoeMask } from "./index10.js";
+import { actionBattleTargetingState, actionBattleUiOptions } from "./index3.js";
+import { parseAoeMask } from "./index5.js";
+import { RpgClientEngine, inject } from "@rpgjs/client";
+import { Container, Graphics, computed, cond, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/targeting-overlay.ce
 function component($$props) {
-  useProps($$props);
-  const defineProps = useDefineProps($$props);
-  var object = defineProps().object;
-  var engine = inject(RpgClientEngine);
-  var isCurrentPlayer = computed(function() {
-    if (!(object === null || object === void 0 ? void 0 : object.id))
-      return false;
-    var idValue = typeof object.id === "function" ? object.id() : object.id;
-    return idValue === engine.playerId;
-  });
-  var uiOptions = computed(function() {
-    return actionBattleUiOptions();
-  });
-  var targetingState = computed(function() {
-    return actionBattleTargetingState();
-  });
-  var shouldRender = computed(function() {
-    var _a;
-    if (!isCurrentPlayer())
-      return false;
-    if (!((_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.enabled))
-      return false;
-    return targetingState().active;
-  });
-  var getTileSize = function() {
-    var _a, _b;
-    var uiTile = (_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.tileSize;
-    if ((uiTile === null || uiTile === void 0 ? void 0 : uiTile.width) && (uiTile === null || uiTile === void 0 ? void 0 : uiTile.height))
-      return uiTile;
-    var hitbox = ((_b = object.hitbox) === null || _b === void 0 ? void 0 : _b.call(object)) || { w: 32, h: 32 };
-    return { width: hitbox.w || 32, height: hitbox.h || 32 };
-  };
-  var getOriginTile = function() {
-    var _a;
-    var hitbox = ((_a = object.hitbox) === null || _a === void 0 ? void 0 : _a.call(object)) || { w: 32, h: 32 };
-    var tileSize = getTileSize();
-    var x = Math.floor((object.x() + hitbox.w / 2) / tileSize.width);
-    var y = Math.floor((object.y() + hitbox.h / 2) / tileSize.height);
-    return { x, y };
-  };
-  var toColor = function(value, fallback) {
-    if (typeof value === "number")
-      return value;
-    return fallback;
-  };
-  var drawGrid = function(g) {
-    var _a, _b;
-    var state = targetingState();
-    if (!state.active)
-      return;
-    var tileSize = getTileSize();
-    var origin = getOriginTile();
-    var target = {
-      x: origin.x + state.offset.x,
-      y: origin.y + state.offset.y
-    };
-    var mask = parseAoeMask(state.aoeMask);
-    var colors = ((_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.colors) || {};
-    var areaColor = toColor(colors.area, 3120887);
-    var edgeColor = toColor(colors.edge, 1796760);
-    var cursorColor = toColor(colors.cursor, 16765286);
-    var showGrid = ((_b = uiOptions().targeting) === null || _b === void 0 ? void 0 : _b.showGrid) !== false;
-    var playerX = object.x();
-    var playerY = object.y();
-    g.clear();
-    mask.cells.forEach(function(cell) {
-      var tileX = target.x + cell.dx;
-      var tileY = target.y + cell.dy;
-      var worldX = tileX * tileSize.width;
-      var worldY = tileY * tileSize.height;
-      var relX = worldX - playerX;
-      var relY = worldY - playerY;
-      g.rect(relX, relY, tileSize.width, tileSize.height);
-      g.fill({ color: areaColor, alpha: 0.35 });
-      if (showGrid) {
-        g.rect(relX, relY, tileSize.width, tileSize.height);
-        g.stroke({ color: edgeColor, alpha: 0.9, width: 1 });
-      }
-    });
-    var cursorWorldX = target.x * tileSize.width;
-    var cursorWorldY = target.y * tileSize.height;
-    var cursorRelX = cursorWorldX - playerX;
-    var cursorRelY = cursorWorldY - playerY;
-    g.rect(cursorRelX, cursorRelY, tileSize.width, tileSize.height);
-    g.stroke({ color: cursorColor, alpha: 1, width: 2 });
-  };
-  let $this = h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
-  return $this;
+	useProps($$props);
+	const { object } = useDefineProps($$props)();
+	const engine = inject(RpgClientEngine);
+	const isCurrentPlayer = computed(() => {
+		if (!object?.id) return false;
+		return (typeof object.id === "function" ? object.id() : object.id) === engine.playerId;
+	});
+	const uiOptions = computed(() => actionBattleUiOptions());
+	const targetingState = computed(() => actionBattleTargetingState());
+	const shouldRender = computed(() => {
+		if (!isCurrentPlayer()) return false;
+		if (!uiOptions().targeting?.enabled) return false;
+		return targetingState().active;
+	});
+	const getTileSize = () => {
+		const uiTile = uiOptions().targeting?.tileSize;
+		if (uiTile?.width && uiTile?.height) return uiTile;
+		const hitbox = object.hitbox?.() || {
+			w: 32,
+			h: 32
+		};
+		return {
+			width: hitbox.w || 32,
+			height: hitbox.h || 32
+		};
+	};
+	const getOriginTile = () => {
+		const hitbox = object.hitbox?.() || {
+			w: 32,
+			h: 32
+		};
+		const tileSize = getTileSize();
+		return {
+			x: Math.floor((object.x() + hitbox.w / 2) / tileSize.width),
+			y: Math.floor((object.y() + hitbox.h / 2) / tileSize.height)
+		};
+	};
+	const toColor = (value, fallback) => {
+		if (typeof value === "number") return value;
+		return fallback;
+	};
+	const drawGrid = (g) => {
+		const state = targetingState();
+		if (!state.active) return;
+		const tileSize = getTileSize();
+		const origin = getOriginTile();
+		const target = {
+			x: origin.x + state.offset.x,
+			y: origin.y + state.offset.y
+		};
+		const mask = parseAoeMask(state.aoeMask);
+		const colors = uiOptions().targeting?.colors || {};
+		const areaColor = toColor(colors.area, 3120887);
+		const edgeColor = toColor(colors.edge, 1796760);
+		const cursorColor = toColor(colors.cursor, 16765286);
+		const showGrid = uiOptions().targeting?.showGrid !== false;
+		const playerX = object.x();
+		const playerY = object.y();
+		g.clear();
+		mask.cells.forEach((cell) => {
+			const tileX = target.x + cell.dx;
+			const tileY = target.y + cell.dy;
+			const worldX = tileX * tileSize.width;
+			const worldY = tileY * tileSize.height;
+			const relX = worldX - playerX;
+			const relY = worldY - playerY;
+			g.rect(relX, relY, tileSize.width, tileSize.height);
+			g.fill({
+				color: areaColor,
+				alpha: .35
+			});
+			if (showGrid) {
+				g.rect(relX, relY, tileSize.width, tileSize.height);
+				g.stroke({
+					color: edgeColor,
+					alpha: .9,
+					width: 1
+				});
+			}
+		});
+		const cursorWorldX = target.x * tileSize.width;
+		const cursorWorldY = target.y * tileSize.height;
+		const cursorRelX = cursorWorldX - playerX;
+		const cursorRelY = cursorWorldY - playerY;
+		g.rect(cursorRelX, cursorRelY, tileSize.width, tileSize.height);
+		g.stroke({
+			color: cursorColor,
+			alpha: 1,
+			width: 2
+		});
+	};
+	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
 }
-export {
-  component as default
-};
+//#endregion
+export { component as default };

package/dist/client/index7.js

@@ -1,61 +1,78 @@
-import { signal } from "canvasengine";
-import { normalizeActionBattleOptions, DEFAULT_ACTION_BATTLE_OPTIONS } from "./index8.js";
-const defaultTargetingState = {
-  active: false,
-  skill: null,
-  range: 0,
-  offset: { x: 0, y: 0 },
-  aoeMask: DEFAULT_ACTION_BATTLE_OPTIONS.skills?.defaultAoeMask || ["#"]
-};
-const actionBattleUiOptions = signal(
-  normalizeActionBattleOptions({}).ui || {}
-);
-const actionBattleSkillOptions = signal(
-  normalizeActionBattleOptions({}).skills || {}
-);
-const actionBattleTargetingState = signal({
-  ...defaultTargetingState
-});
-const setActionBattleOptions = (options = {}) => {
-  const normalized = normalizeActionBattleOptions(options);
-  actionBattleUiOptions.set(normalized.ui || {});
-  actionBattleSkillOptions.set(normalized.skills || {});
-};
-const startTargeting = (skill) => {
-  const skillsOptions = actionBattleSkillOptions();
-  const mask = skill.aoeMask || skillsOptions.defaultAoeMask || ["#"];
-  actionBattleTargetingState.set({
-    active: true,
-    skill,
-    range: skill.range ?? 0,
-    offset: { x: 0, y: 0 },
-    aoeMask: mask
-  });
-};
-const stopTargeting = () => {
-  actionBattleTargetingState.set({ ...defaultTargetingState });
-};
-const moveTargetingOffset = (dx, dy) => {
-  const state = actionBattleTargetingState();
-  if (!state.active) return;
-  const next = {
-    x: state.offset.x + dx,
-    y: state.offset.y + dy
-  };
-  if (Math.abs(next.x) + Math.abs(next.y) > state.range) {
-    return;
-  }
-  actionBattleTargetingState.set({
-    ...state,
-    offset: next
-  });
-};
-export {
-  actionBattleSkillOptions,
-  actionBattleTargetingState,
-  actionBattleUiOptions,
-  moveTargetingOffset,
-  setActionBattleOptions,
-  startTargeting,
-  stopTargeting
-};
+import { actionBattleAttackPreviewState } from "./index3.js";
+import { RpgClientEngine, inject } from "@rpgjs/client";
+import { Container, Graphics, computed, cond, h, signal, tick, useDefineProps, useProps } from "canvasengine";
+//#region src/components/attack-preview.ce
+function component($$props) {
+	useProps($$props);
+	const { object } = useDefineProps($$props)();
+	const engine = inject(RpgClientEngine);
+	const now = signal(Date.now());
+	tick(() => {
+		if (actionBattleAttackPreviewState().active) now.set(Date.now());
+	});
+	const isCurrentPlayer = computed(() => {
+		if (!object?.id) return false;
+		return (typeof object.id === "function" ? object.id() : object.id) === engine.playerId;
+	});
+	const preview = computed(() => actionBattleAttackPreviewState());
+	const progress = computed(() => {
+		const state = preview();
+		if (!state.active) return 1;
+		const elapsed = now() - state.startedAt;
+		return Math.max(0, Math.min(1, elapsed / state.durationMs));
+	});
+	const shouldRender = computed(() => {
+		const state = preview();
+		return isCurrentPlayer() && state.active && progress() < 1;
+	});
+	const getHitbox = () => object.hitbox?.() || {
+		w: 32,
+		h: 32
+	};
+	const drawRect = (g, x, y, width, height, color, alpha) => {
+		g.rect(x, y, width, height);
+		g.fill({
+			color,
+			alpha
+		});
+	};
+	const drawSlash = (g) => {
+		g.clear();
+		if (!shouldRender()) return;
+		const state = preview();
+		const p = progress();
+		const alpha = Math.sin(Math.PI * p);
+		if (alpha <= 0) return;
+		const hitbox = getHitbox();
+		const width = hitbox.w || 32;
+		const height = hitbox.h || 32;
+		const reach = 16 + 18 * p;
+		const thickness = 4 + 3 * (1 - p);
+		const color = state.color;
+		const accent = state.accentColor;
+		if (state.direction === "left") {
+			drawRect(g, -reach - 6, height * .24, reach, thickness, accent, alpha * .55);
+			drawRect(g, -reach - 10, height * .46, reach + 4, thickness + 2, color, alpha);
+			drawRect(g, -reach - 6, height * .7, reach, thickness, accent, alpha * .4);
+			return;
+		}
+		if (state.direction === "right") {
+			drawRect(g, width + 6, height * .24, reach, thickness, accent, alpha * .55);
+			drawRect(g, width + 6, height * .46, reach + 4, thickness + 2, color, alpha);
+			drawRect(g, width + 6, height * .7, reach, thickness, accent, alpha * .4);
+			return;
+		}
+		if (state.direction === "up") {
+			drawRect(g, width * .24, -reach - 6, thickness, reach, accent, alpha * .55);
+			drawRect(g, width * .46, -reach - 10, thickness + 2, reach + 4, color, alpha);
+			drawRect(g, width * .7, -reach - 6, thickness, reach, accent, alpha * .4);
+			return;
+		}
+		drawRect(g, width * .24, height + 6, thickness, reach, accent, alpha * .55);
+		drawRect(g, width * .46, height + 6, thickness + 2, reach + 4, color, alpha);
+		drawRect(g, width * .7, height + 6, thickness, reach, accent, alpha * .4);
+	};
+	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawSlash })));
+}
+//#endregion
+export { component as default };