@benev/tact 0.1.0-3 → 0.1.0-4

package/x/demo/main.css

@@ -5,8 +5,9 @@
 	:root {
 		color-scheme: dark;
 		--link: cyan;
+		--prime: #ccc;
 		--bg: #181818;
-		--prime: #aaa;
+		--bg2: #111111;
 	}
 }
 
@@ -46,12 +47,39 @@
 	body { min-height: 100%; }
 
 	html, body {
-		font-size: 21px;
+		font-family: sans-serif;
+		font-size: 12px;
 		color: var(--prime);
 		background: var(--bg);
 	}
 }
 
 @layer page {
+	body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		gap: 1em;
+		padding: 2em;
+
+		> * {
+			width: 100%;
+			max-width: 42em;
+		}
+
+		> header {
+			padding: 0 2em;
+			h1 small { font-size: 0.6em; font-weight: normal; }
+			* + * { margin-top: 0.5em; }
+		}
+
+		> section {
+			padding: 0 2em;
+			ul {
+				padding-left: 1em;
+			}
+		}
+	}
 }
 

package/x/demo/ui/tact-demo/component.d.ts

@@ -0,0 +1,4 @@
+declare const TactDemo_base: import("@e280/sly").ComponentClass<typeof import("@e280/sly").BaseElement, []>;
+export declare class TactDemo extends TactDemo_base {
+}
+export {};

package/x/demo/ui/tact-demo/component.js

@@ -0,0 +1,12 @@
+import { cssReset, view } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { Game } from "../../game/game.js";
+import { loader } from "../utils/loader.js";
+import { Theater } from "../theater/view.js";
+export class TactDemo extends view.component(use => {
+    use.css(cssReset, styleCss);
+    const opGame = use.op.load(async () => Game.load());
+    return loader(opGame, game => Theater(game));
+}) {
+}
+//# sourceMappingURL=component.js.map

package/x/demo/ui/tact-demo/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/demo/ui/tact-demo/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACxC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAA;AAE1C,MAAM,OAAO,QAAS,SAAQ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;IAClD,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC3B,MAAM,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;IAClD,OAAO,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAA;AAC7C,CAAC,CAAC;CAAG"}

package/x/demo/ui/tact-demo/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/x/demo/ui/tact-demo/style.css.js

@@ -0,0 +1,3 @@
+import { css } from "lit";
+export default css ``;
+//# sourceMappingURL=style.css.js.map

package/x/demo/ui/tact-demo/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/ui/tact-demo/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA,EAAE,CAAA"}

package/x/demo/ui/theater/styles.css.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+export const styles = css `
+
+:host {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	gap: 1em;
+}
+
+.surface {
+	position: relative;
+	width: 100%;
+	height: auto;
+	aspect-ratio: 2 / 1;
+	overflow: hidden;
+
+	background: #000;
+	border: 0.5em solid #fff4;
+	border-radius: 2em;
+
+	canvas {
+		display: block;
+		position: absolute;
+		inset: 0;
+
+		width: 100%;
+		height: 100%;
+
+		image-rendering: pixelated;
+		outline: 1px solid red;
+	}
+
+	[deck="overlay"] {
+		position: absolute;
+		top: 10%;
+		left: 0;
+		right: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+.dlist {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5em;
+}
+
+`;
+//# sourceMappingURL=styles.css.js.map

package/x/demo/ui/theater/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sourceRoot":"","sources":["../../../../s/demo/ui/theater/styles.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAA"}

package/x/demo/ui/theater/view.d.ts

@@ -0,0 +1,2 @@
+import { Game } from "../../game/game.js";
+export declare const Theater: import("@e280/sly").View<[game: Game]>;

package/x/demo/ui/theater/view.js

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import { cssReset, view } from "@e280/sly";
+import { repeat } from "lit/directives/repeat.js";
+import { styles } from "./styles.css.js";
+import { VirtualDeviceView } from "./virtual/view.js";
+import { VirtualDevice } from "../../game/parts/virtual-device.js";
+export const Theater = view(use => (game) => {
+    use.css(cssReset, styles);
+    use.mount(() => game.loop(60));
+    use.mount(() => game.deck.hub.on(use.render));
+    const addVirtual = () => game.plug(new VirtualDevice(game.deck.hub));
+    const revealOverlay = () => game.deck.overlayVisibility.bump();
+    const virtualDevices = game.deck.hub.ports
+        .flatMap(port => port.devices.array())
+        .filter(device => device instanceof VirtualDevice)
+        .map(device => ({ device, skin: game.deck.deviceSkins.get(device) }))
+        .sort((a, b) => a.skin.label < b.skin.label ? -1 : 1);
+    return html `
+		<div class=surface>
+			${game.renderer.canvas}
+			${game.deck.views.DeckOverlay()}
+		</div>
+
+		<div class=dlist>
+			${repeat(virtualDevices, d => d.skin.label, ({ device, skin }) => {
+        return VirtualDeviceView
+            .props(game.deck.hub, device, skin)
+            .attr("style", `--color: ${skin.color};`)
+            .render();
+    })}
+
+			<button @click="${addVirtual}">
+				✨
+			</button>
+
+			<button @click="${revealOverlay}">
+				👁️
+			</button>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/demo/ui/theater/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/ui/theater/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAA;AAE/C,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAA;AAEtC,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAC,aAAa,EAAC,MAAM,oCAAoC,CAAA;AAEhE,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IACjD,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IACzB,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;IAC9B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAE7C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACpE,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;IAE9D,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK;SACxC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACrC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,YAAY,aAAa,CAAC;SACjD,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC;SAClE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtD,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,QAAQ,CAAC,MAAM;KACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;;;;KAI7B,MAAM,CACP,cAAc,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EACjB,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,EAAE,EAAE;QAClB,OAAO,iBAAiB;aACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC;aAClC,IAAI,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,CAAC;aACxC,MAAM,EAAE,CAAA;IACX,CAAC,CACD;;qBAEiB,UAAU;;;;qBAIV,aAAa;;;;EAIhC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/demo/ui/theater/virtual/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/x/demo/ui/theater/virtual/style.css.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+export default css `
+
+:host {
+	--color: #aaa;
+}
+
+.box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	gap: 0.2em;
+	padding: 0.2em;
+	padding-right: 0.5em;
+
+	border-radius: 2em;
+	background: color-mix(in srgb, #fff4, var(--color));
+}
+
+[view="nub-stick"] {
+	width: 2em;
+}
+
+.label {
+	font-size: 1.2em;
+	font-weight: bold;
+
+	padding: 0 0.5em;
+	text-align: center;
+
+	color: white;
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+}
+
+button {
+	font-size: 0.8em;
+	padding: 0.2em;
+}
+
+`;
+//# sourceMappingURL=style.css.js.map

package/x/demo/ui/theater/virtual/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../../s/demo/ui/theater/virtual/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCjB,CAAA"}

package/x/demo/ui/theater/virtual/view.d.ts

@@ -0,0 +1,4 @@
+import { Hub } from "../../../../core/hub/hub.js";
+import { VirtualDevice } from "../../../game/parts/virtual-device.js";
+import { DeviceSkin } from "../../../../deck/parts/device-skins/device-skin.js";
+export declare const VirtualDeviceView: import("@e280/sly").View<[hub: Hub<any, any>, device: VirtualDevice, _deviceSkin: DeviceSkin]>;

package/x/demo/ui/theater/virtual/view.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+import { cssReset, view } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { NubStick } from "../../../../nubs/stick/component.js";
+export const VirtualDeviceView = view(use => (hub, device, _deviceSkin) => {
+    use.styles(cssReset, styleCss);
+    use.attrs.string.device = "virtual";
+    const unplug = () => hub.unplug(device);
+    return html `
+		<div class=box>
+			${NubStick.view(device)}
+
+			<button @click="${device.shimmyPrevious}">👈</button>
+			<button @click="${unplug}">💀</button>
+			<button @click="${device.shimmyNext}">👉</button>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/demo/ui/theater/virtual/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../s/demo/ui/theater/virtual/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACxC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,qCAAqC,CAAA;AAI5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAC3C,GAAa,EACb,MAAqB,EACrB,WAAuB,EACtB,EAAE;IAEJ,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC9B,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,CAAA;IAEnC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAEvC,OAAO,IAAI,CAAA;;KAEP,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;qBAEL,MAAM,CAAC,cAAc;qBACrB,MAAM;qBACN,MAAM,CAAC,UAAU;;EAEpC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/demo/ui/utils/loader.d.ts

@@ -0,0 +1 @@
+export declare const loader: import("@e280/sly").Loader;

package/x/demo/ui/utils/loader.js

@@ -0,0 +1,3 @@
+import { makeLoader } from "@e280/sly";
+export const loader = makeLoader();
+//# sourceMappingURL=loader.js.map

package/x/demo/ui/utils/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../../s/demo/ui/utils/loader.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AAEpC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,EAAE,CAAA"}

package/x/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./core/index.js";
+export * from "./deck/index.js";
+export * from "./nubs/index.js";
+export * as nubs from "./nubs/index.js";
 export * from "./utils/gamepads.js";
-export * from "./utils/split-axis.js";

package/x/index.html

@@ -12,8 +12,9 @@
 :root {
 	color-scheme: dark;
 	--link: cyan;
+	--prime: #ccc;
 	--bg: #181818;
-	--prime: #aaa;
+	--bg2: #111111;
 }
 }
 
@@ -53,17 +54,44 @@ html { height: 100%; }
 body { min-height: 100%; }
 
 html, body {
-	font-size: 21px;
+	font-family: sans-serif;
+	font-size: 12px;
 	color: var(--prime);
 	background: var(--bg);
 }
 }
 
 @layer page {
+body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	gap: 1em;
+	padding: 2em;
+
+	> * {
+		width: 100%;
+		max-width: 42em;
+	}
+
+	> header {
+		padding: 0 2em;
+		h1 small { font-size: 0.6em; font-weight: normal; }
+		* + * { margin-top: 0.5em; }
+	}
+
+	> section {
+		padding: 0 2em;
+		ul {
+			padding-left: 1em;
+		}
+	}
+}
 }
 
 </style>
-					<script type=module src="demo/main.bundle.min.js?v=170ac717cfdc"></script>
+					<script type=module src="demo/main.bundle.min.js?v=585090ee8ae9"></script>
 					<link rel="icon" href="assets/b.png?v=32b1d0126431"/>
 
 		<meta name="theme-color" content="#f2ea8e">
@@ -75,23 +103,34 @@ html, body {
 
 
 
-	<meta data-version="0.1.0-3" />
-
 				</head>
 				<body>
 
 	<header>
 		<h1>
 			<strong>@benev/tact</strong>
-			<span>v0.1.0-3</span>
+			<small>v0.1.0-4</small>
 		</h1>
 		<div class=deets>
-			<a href="https://github.com/benevolent-games/tact">github</a>
-			<a href="https://benevolent.games/">benevolent.games</a>
+			<p><em>"from keypress to couch co-op"</em></p>
+			<p>
+				tact is a user input toolkit for the web. it's good at customizable keybindings, and multiple gamepad support.
+				see <a href="https://github.com/benevolent-games/tact">github</a>,
+				see <a href="https://benevolent.games/">benevolent.games</a>.
+			</p>
 		</div>
 	</header>
 
 	<tact-demo></tact-demo>
 
+	<section>
+		<h3>controls</h3>
+		<ul>
+			<li><strong>keyboard</strong> wasd, left-bracket, right-bracket, backslash.</li>
+			<li><strong>gamepad</strong> thumbsticks, hold beta/gamma and press bumpers or dpad left/right.</li>
+			<li><strong>virtual</strong> use your mouse to press the little buttons.</li>
+		</ul>
+	</section>
+
 				</body>
 			</html>

package/x/index.html.js

@@ -9,9 +9,6 @@ export default ssg.page(import.meta.url, async (orb) => ({
     css: "demo/main.css",
     dark: true,
     favicon,
-    head: html `
-		<meta data-version="${orb.packageVersion()}" />
-	`,
     socialCard: {
         title,
         description,
@@ -23,15 +20,28 @@ export default ssg.page(import.meta.url, async (orb) => ({
 		<header>
 			<h1>
 				<strong>@benev/tact</strong>
-				<span>v${orb.packageVersion()}</span>
+				<small>v${orb.packageVersion()}</small>
 			</h1>
 			<div class=deets>
-				<a href="https://github.com/benevolent-games/tact">github</a>
-				<a href="https://benevolent.games/">benevolent.games</a>
+				<p><em>"from keypress to couch co-op"</em></p>
+				<p>
+					tact is a user input toolkit for the web. it's good at customizable keybindings, and multiple gamepad support.
+					see <a href="https://github.com/benevolent-games/tact">github</a>,
+					see <a href="https://benevolent.games/">benevolent.games</a>.
+				</p>
 			</div>
 		</header>
 
 		<tact-demo></tact-demo>
+
+		<section>
+			<h3>controls</h3>
+			<ul>
+				<li><strong>keyboard</strong> wasd, left-bracket, right-bracket, backslash.</li>
+				<li><strong>gamepad</strong> thumbsticks, hold beta/gamma and press bumpers or dpad left/right.</li>
+				<li><strong>virtual</strong> use your mouse to press the little buttons.</li>
+			</ul>
+		</section>
 	`,
 }));
 //# sourceMappingURL=index.html.js.map

package/x/index.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,aAAa,CAAA;AAC3B,MAAM,MAAM,GAAG,uBAAuB,CAAA;AACtC,MAAM,OAAO,GAAG,eAAe,CAAA;AAC/B,MAAM,WAAW,GAAG,+CAA+C,CAAA;AAEnE,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,IAAI,EAAE,IAAI;IACV,OAAO;IACP,IAAI,EAAE,IAAI,CAAA;wBACa,GAAG,CAAC,cAAc,EAAE;EAC1C;IAED,UAAU,EAAE;QACX,KAAK;QACL,WAAW;QACX,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,WAAW,MAAM,GAAG,OAAO,EAAE;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;;;aAIE,GAAG,CAAC,cAAc,EAAE;;;;;;;;;EAS/B;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,aAAa,CAAA;AAC3B,MAAM,MAAM,GAAG,uBAAuB,CAAA;AACtC,MAAM,OAAO,GAAG,eAAe,CAAA;AAC/B,MAAM,WAAW,GAAG,+CAA+C,CAAA;AAEnE,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,IAAI,EAAE,IAAI;IACV,OAAO;IAEP,UAAU,EAAE;QACX,KAAK;QACL,WAAW;QACX,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,WAAW,MAAM,GAAG,OAAO,EAAE;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;;;cAIG,GAAG,CAAC,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBhC;CACD,CAAC,CAAC,CAAA"}

package/x/index.js

@@ -1,4 +1,6 @@
 export * from "./core/index.js";
+export * from "./deck/index.js";
+export * from "./nubs/index.js";
+export * as nubs from "./nubs/index.js";
 export * from "./utils/gamepads.js";
-export * from "./utils/split-axis.js";
 //# sourceMappingURL=index.js.map

package/x/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAE/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAA;AAEvC,cAAc,qBAAqB,CAAA"}

package/x/nubs/components.d.ts

@@ -0,0 +1,9 @@
+import { NubLookpad } from "./lookpad/component.js";
+import { NubStick } from "./stick/component.js";
+import { NubVpad } from "./vpad/component.js";
+export declare const nubs: () => {
+    NubLookpad: typeof NubLookpad;
+    NubStick: typeof NubStick;
+    NubVpad: typeof NubVpad;
+};
+export declare const registerNubs: () => void;

package/x/nubs/components.js

@@ -0,0 +1,11 @@
+import { dom } from "@e280/sly";
+import { NubLookpad } from "./lookpad/component.js";
+import { NubStick } from "./stick/component.js";
+import { NubVpad } from "./vpad/component.js";
+export const nubs = () => ({
+    NubLookpad,
+    NubStick,
+    NubVpad,
+});
+export const registerNubs = () => dom.register(nubs());
+//# sourceMappingURL=components.js.map

package/x/nubs/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../s/nubs/components.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAE3C,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CAAC;IAC1B,UAAU;IACV,QAAQ;IACR,OAAO;CACP,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA"}

package/x/nubs/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./lookpad/component.js";
+export * from "./stick/component.js";
+export * from "./vpad/component.js";
+export * from "./components.js";

package/x/nubs/index.js

@@ -0,0 +1,5 @@
+export * from "./lookpad/component.js";
+export * from "./stick/component.js";
+export * from "./vpad/component.js";
+export * from "./components.js";
+//# sourceMappingURL=index.js.map

package/x/nubs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/nubs/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA"}

package/x/nubs/lookpad/component.d.ts

@@ -0,0 +1,4 @@
+declare const NubLookpad_base: import("@e280/sly").ComponentClass<import("@e280/stz").Constructor<import("@e280/sly").BaseElement>, []>;
+export declare class NubLookpad extends NubLookpad_base {
+}
+export {};

package/x/nubs/lookpad/component.js

@@ -0,0 +1,36 @@
+import { dom, view } from "@e280/sly";
+import { styles } from "./styles.js";
+const NubLookpadView = view(use => () => {
+    use.name("nub-lookpad");
+    use.styles(styles);
+    const $captured = use.signal(undefined);
+    use.mount(() => dom.events(use.element, {
+        pointerdown: (event) => {
+            event.preventDefault();
+            if ($captured.value)
+                use.element.releasePointerCapture($captured.value);
+            use.element.setPointerCapture(event.pointerId);
+            $captured.value = event.pointerId;
+            // onPointerDrag(event)
+        },
+        pointermove: [{ passive: false }, (event) => {
+                event.preventDefault();
+                if (event.pointerId === $captured.value) {
+                    // onPointerDrag(event)
+                }
+            }],
+        pointerup: (event) => {
+            event.preventDefault();
+            if (event.pointerId === $captured.value) {
+                use.element.releasePointerCapture($captured.value);
+                $captured.value = undefined;
+                // onPointerDrag(event)
+            }
+        },
+    }));
+});
+export class NubLookpad extends (NubLookpadView
+    .component()
+    .props(() => [])) {
+}
+//# sourceMappingURL=component.js.map

package/x/nubs/lookpad/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/nubs/lookpad/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAElC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IACvC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IACvB,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAElB,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAqB,SAAS,CAAC,CAAA;IAE3D,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE;QACvC,WAAW,EAAE,CAAC,KAAmB,EAAE,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,SAAS,CAAC,KAAK;gBAClB,GAAG,CAAC,OAAO,CAAC,qBAAqB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;YAEnD,GAAG,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;YAC9C,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;YACjC,uBAAuB;QACxB,CAAC;QAED,WAAW,EAAE,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,EAAE,CAAC,KAAmB,EAAE,EAAE;gBACvD,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;oBACzC,uBAAuB;gBACxB,CAAC;YACF,CAAC,CAAC;QAEF,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;gBACzC,GAAG,CAAC,OAAO,CAAC,qBAAqB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;gBAClD,SAAS,CAAC,KAAK,GAAG,SAAS,CAAA;gBAC3B,uBAAuB;YACxB,CAAC;QACF,CAAC;KACD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,MAAM,OAAO,UAAW,SAAQ,CAC/B,cAAc;KACZ,SAAS,EAAE;KACX,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CACjB;CAAG"}