@benev/tact 0.3.0-5 → 0.4.0-1

package/x/lib/ui/views/customize/style.css.js

@@ -0,0 +1,143 @@
+import { css } from "lit";
+export default css `@layer view {
+
+.plate {
+	display: flex;
+	flex-direction: column;
+}
+
+.topbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	padding: var(--pad) var(--space);
+
+	[view="profile-select"] {
+		font-size: 1.2em;
+	}
+
+	.corner {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--pad);
+
+		small {
+			user-select: none;
+			opacity: 0.5;
+			font-style: italic;
+			border: 1px solid;
+			border-radius: var(--round);
+			padding: var(--nib) var(--pad);
+		}
+	}
+
+	.tools {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--pad);
+		flex: 1 1 auto;
+		justify-content: end;
+
+		input[type="text"] {
+			width: 12em;
+		}
+	}
+}
+
+.bindings, .group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--nib);
+}
+
+.bindings {
+	user-select: none;
+	cursor: default;
+	padding: var(--space);
+
+	summary {
+		color: var(--prime);
+		width: max-content;
+		font-weight: bold;
+		font-size: 1.2em;
+		&:is(:hover, :focus-visible) { filter: brightness(120%); }
+		&:active { filter: brightness(90%); }
+	}
+
+	.expression {
+		display: flex;
+		align-items: end;
+		margin-left: 0.5em;
+		border-bottom: 1px dashed oklch(from var(--prime) l c h / 30%);
+		flex-wrap: wrap;
+		gap: 0 var(--pad);
+		padding: var(--nib);
+
+		min-height: 3em;
+
+		&:last-of-type {
+			margin-bottom: calc(var(--space) * 2);
+		}
+
+		> strong {
+			font-weight: normal;
+		}
+
+		> div {
+			margin-left: auto;
+
+			input {
+				font: inherit;
+				color: inherit;
+				width: 8em;
+
+				&[type="number"] {
+					width: 5em;
+				}
+			}
+		}
+
+		div {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: stretch;
+			gap: var(--nib);
+		}
+
+		.bracket {
+			align-items: center;
+			gap: var(--nib);
+			padding: 2px var(--nib);
+			background: color-mix(in oklch, #aaa2, var(--slate) 80%);
+			box-shadow: 0.1em 0.2em 0.5em #0002;
+			border: 1px solid #fff4;
+			border-radius: 0.2em;
+
+			&.mod {
+				gap: var(--nib);
+			}
+		}
+	}
+
+	.children {
+		display: flex;
+		flex-direction: column;
+
+		margin-left: 0.3em;
+		padding-left: 0.5em;
+		border-left: 1px solid oklch(from var(--prime) l c h / 20%);
+	}
+
+	.expression .recorder {
+		display: flex;
+		gap: var(--pad);
+
+		&[data-recording] {
+			color: var(--recording);
+		}
+	}
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

package/x/lib/ui/views/customize/style.css.js.map

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

package/x/lib/ui/views/customize/subviews/expression.d.ts

@@ -0,0 +1,2 @@
+import { Expression } from "../../../../input/expression.js";
+export declare const ExpressionView: import("@e280/sly").View<[isReadonly: boolean, expression: Expression, update: (expression: Expression) => void]>;

package/x/lib/ui/views/customize/subviews/expression.js

@@ -0,0 +1,75 @@
+import { html } from "lit";
+import { lightView } from "@e280/sly";
+import { isArray, isHappy, isNumber, isString } from "@e280/stz";
+import xSmallSvg from "../../../icons/akar/x-small.svg.js";
+export const ExpressionView = lightView((isReadonly, expression, update) => {
+    if (!isHappy(expression))
+        return html `
+			<div class=null>unset</div>
+		`;
+    if (isNumber(expression))
+        return html `
+			<div class=number>
+				<input
+					type=number
+					step=any
+					theme-input
+					.value="${expression}"
+					?readonly="${isReadonly}"
+					@change="${(event) => {
+            const input = event.currentTarget;
+            const value = input.valueAsNumber;
+            if (Number.isFinite(value))
+                update(value);
+        }}"
+					/>
+			</div>
+		`;
+    if (isString(expression))
+        return html `
+			<input
+				type=text
+				theme-input
+				.value="${expression}"
+				?readonly="${isReadonly}"
+				@change="${(event) => {
+            const input = event.currentTarget;
+            const value = input.value;
+            update(value);
+        }}"/>
+		`;
+    if (isArray(expression))
+        return (expression[0] === "mod") ? html `
+			<div class="bracket mod">
+				${expression.slice(1).length === 0
+            ? "unmodified"
+            : expression.slice(1).join("+")}
+
+				${!isReadonly && expression.slice(1).length > 0
+            ? html `
+						<button
+							theme-button=naked
+							@click="${() => update([expression[0]])}">
+							${xSmallSvg}
+						</button>
+					`
+            : null}
+			</div>
+		` : html `
+			<div class=bracket>
+				${expression[0] === "*" ? null : html `
+					<strong>${expression[0]}</strong>
+				`}
+				${expression.slice(1).map((e, i) => {
+            return ExpressionView(isReadonly, e ?? null, fresh => {
+                const clone = structuredClone(expression);
+                clone[i + 1] = fresh;
+                update(clone);
+            });
+        })}
+			</div>
+		`;
+    else
+        throw new Error("unknown expression");
+});
+//# sourceMappingURL=expression.js.map

package/x/lib/ui/views/customize/subviews/expression.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expression.js","sourceRoot":"","sources":["../../../../../../s/lib/ui/views/customize/subviews/expression.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,SAAS,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAG9D,OAAO,SAAS,MAAM,oCAAoC,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,CACtC,UAAmB,EACnB,UAAsB,EACtB,MAAwC,EAC9B,EAAE;IAEb,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACvB,OAAO,IAAI,CAAA;;GAEV,CAAA;IAEF,IAAI,QAAQ,CAAC,UAAU,CAAC;QACvB,OAAO,IAAI,CAAA;;;;;;eAME,UAAU;kBACP,UAAU;gBACZ,CAAC,KAAY,EAAE,EAAE;YAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,aAAiC,CAAA;YACrD,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAA;YACjC,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;gBACzB,MAAM,CAAC,KAAK,CAAC,CAAA;QACf,CAAC;;;GAGH,CAAA;IAEF,IAAI,QAAQ,CAAC,UAAU,CAAC;QACvB,OAAO,IAAI,CAAA;;;;cAIC,UAAU;iBACP,UAAU;eACZ,CAAC,KAAY,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,aAAiC,CAAA;YACrD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YACzB,MAAM,CAAC,KAAK,CAAC,CAAA;QACd,CAAC;GACD,CAAA;IAEF,IAAI,OAAO,CAAC,UAAU,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;MAEnC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC;YACjC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;MAE9B,CAAC,UAAU,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC;YAC9C,CAAC,CAAC,IAAI,CAAA;;;iBAGM,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;SACrC,SAAS;;MAEZ;YACD,CAAC,CAAC,IAAI;;GAER,CAAC,CAAC,CAAC,IAAI,CAAA;;MAEJ,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;eAC1B,UAAU,CAAC,CAAC,CAAC;KACvB;MACC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAClC,OAAO,cAAc,CAAC,UAAU,EAAE,CAAC,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE;gBACpD,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAAQ,CAAA;gBAChD,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAA;gBACpB,MAAM,CAAC,KAAK,CAAC,CAAA;YACd,CAAC,CAAC,CAAA;QACH,CAAC,CAAC;;GAEH,CAAA;;QAGD,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAA;AACvC,CAAC,CAAC,CAAA"}

package/x/lib/ui/views/customize/subviews/recorder.d.ts

@@ -0,0 +1,3 @@
+import { Content } from "@e280/sly";
+import { Expression } from "../../../../input/expression.js";
+export declare const RecorderView: import("@e280/sly").View<[isReadonly: boolean, update: (e: Expression) => void, reset: () => void, content?: Content]>;

package/x/lib/ui/views/customize/subviews/recorder.js

@@ -0,0 +1,60 @@
+import { html } from "lit";
+import { disposer } from "@e280/stz";
+import { lightView, useSignal, useUnmount } from "@e280/sly";
+import keyCapSvg from "../../../icons/akar/key-cap.svg.js";
+import backspaceSvg from "../../../icons/akar/backspace.svg.js";
+import crossSvg from "../../../icons/akar/cross.svg.js";
+import { captureKeyChord } from "../parts/capture-key-chord.js";
+import { captureGamepadChord } from "../parts/capture-gamepad-chord.js";
+import { capturePointerChord } from "../parts/capture-pointer-chord.js";
+export const RecorderView = lightView((isReadonly, update, reset, content) => {
+    const $recording = useSignal(null);
+    const removeRecording = () => $recording(null);
+    const startRecording = () => {
+        const { dispose, schedule } = disposer();
+        schedule(removeRecording);
+        schedule(captureKeyChord(update, dispose));
+        schedule(captureGamepadChord(update, dispose));
+        schedule(capturePointerChord(update, dispose));
+        $recording(dispose);
+    };
+    const haltRecording = () => {
+        $recording()?.();
+        removeRecording();
+    };
+    function toggleRecording() {
+        if ($recording())
+            haltRecording();
+        else
+            startRecording();
+    }
+    function haltAndReset() {
+        haltRecording();
+        reset();
+    }
+    useUnmount(haltRecording);
+    return html `
+		<div class=recorder ?data-recording="${!!$recording()}">
+			${content}
+			${isReadonly ? null : html `
+				<button
+					class=record
+					theme-button=naked
+					title="record a keypress"
+					@click=${toggleRecording}>
+					${$recording()
+        ? crossSvg
+        : keyCapSvg}
+				</button>
+
+				<button
+					theme-button=naked
+					title="reset to default"
+					@click=${haltAndReset}>
+					${backspaceSvg}
+				</button>
+			`}
+		</div>
+	`;
+});
+//# sourceMappingURL=recorder.js.map

package/x/lib/ui/views/customize/subviews/recorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recorder.js","sourceRoot":"","sources":["../../../../../../s/lib/ui/views/customize/subviews/recorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAClC,OAAO,EAAU,SAAS,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,WAAW,CAAA;AAEnE,OAAO,SAAS,MAAM,oCAAoC,CAAA;AAC1D,OAAO,YAAY,MAAM,sCAAsC,CAAA;AAE/D,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAEvD,OAAO,EAAC,eAAe,EAAC,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAA;AAErE,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,CACpC,UAAmB,EACnB,MAA+B,EAC/B,KAAiB,EACjB,OAAgB,EACf,EAAE;IAEJ,MAAM,UAAU,GAAG,SAAS,CAAsB,IAAI,CAAC,CAAA;IAEvD,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAE9C,MAAM,cAAc,GAAG,GAAG,EAAE;QAC3B,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAC,GAAG,QAAQ,EAAE,CAAA;QACtC,QAAQ,CAAC,eAAe,CAAC,CAAA;QACzB,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;QAC1C,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;QAC9C,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;QAC9C,UAAU,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QAC1B,UAAU,EAAE,EAAE,EAAE,CAAA;QAChB,eAAe,EAAE,CAAA;IAClB,CAAC,CAAA;IAED,SAAS,eAAe;QACvB,IAAI,UAAU,EAAE;YAAE,aAAa,EAAE,CAAA;;YAC5B,cAAc,EAAE,CAAA;IACtB,CAAC;IAED,SAAS,YAAY;QACpB,aAAa,EAAE,CAAA;QACf,KAAK,EAAE,CAAA;IACR,CAAC;IAED,UAAU,CAAC,aAAa,CAAC,CAAA;IAEzB,OAAO,IAAI,CAAA;yCAC6B,CAAC,CAAC,UAAU,EAAE;KAClD,OAAO;KACP,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;cAKf,eAAe;OACtB,UAAU,EAAE;QACb,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,SAAS;;;;;;cAMH,YAAY;OACnB,YAAY;;IAEf;;EAEF,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/lib/ui/views/customize/view.d.ts

@@ -0,0 +1,6 @@
+import { Controls } from "../../deck/controls/controls.js";
+export declare const CustomizeView: import("@e280/sly").ShadowView<[options: {
+    controls: Controls;
+}]>, makeCustomizeElement: (options: {
+    controls: Controls;
+}) => new () => HTMLElement;

package/x/lib/ui/views/customize/view.js

@@ -0,0 +1,82 @@
+import { html } from "lit";
+import { given, when } from "@e280/stz";
+import { shadowDuplex, useCss, useSignal } from "@e280/sly";
+import styleCss from "./style.css.js";
+import themeCss from "../theme.css.js";
+import copySvg from "../../icons/akar/copy.svg.js";
+import trashCanSvg from "../../icons/akar/trash-can.svg.js";
+import { makeId } from "../../../utils/make-id.js";
+import { renderBindings } from "./parts/render-bindings.js";
+import { ProfileSelectView } from "../profile-select/view.js";
+export const [CustomizeView, makeCustomizeElement] = shadowDuplex((options) => {
+    useCss(themeCss, styleCss);
+    const { controls, controls: { profiles } } = options;
+    const $profileKey = useSignal(controls.fallbackProfileKey);
+    const profile = profiles.get($profileKey());
+    const isReadonly = profiles.isPreset($profileKey());
+    const baseline = profile.basedOn
+        ? profiles.get(profile.basedOn)
+        : profile;
+    const updateBindings = (bindings) => {
+        let key = $profileKey();
+        if (profiles.isPreset(key)) {
+            const basedOn = key;
+            const freshKey = makeId();
+            key = freshKey;
+            profiles.clone(freshKey, basedOn);
+        }
+        profiles.update(key, { bindings });
+        $profileKey(key);
+    };
+    const updateLabel = (profileKey, label) => profiles.update(profileKey, { label });
+    const clone = () => {
+        const key = makeId();
+        profiles.clone(key, $profileKey());
+        $profileKey.set(key);
+    };
+    const destroy = () => {
+        profiles.delete($profileKey());
+        $profileKey(controls.fallbackProfileKey);
+    };
+    return html `
+		<div class=plate theme-card>
+			<header class=topbar>
+				<div class=corner>
+					${ProfileSelectView(options, $profileKey(), $profileKey)}
+
+					<button title="copy this profile" theme-button=naked @click="${clone}">
+						${copySvg}
+					</button>
+
+					${isReadonly ? null : html `
+						<button title="delete this profile" theme-button=naked @click="${destroy}">
+							${trashCanSvg}
+						</button>
+					`}
+
+					${when(isReadonly, () => html `<small>readonly</small>`)}
+					${given(profile.basedOn, basedOn => html `<small>based on ${profiles.get(basedOn).label}</small>`)}
+				</div>
+
+				<div class=tools>
+					${isReadonly ? null : html `
+						<input
+							type=text
+							theme-input
+							.value="${profile.label}"
+							@change="${(event) => {
+        const input = event.currentTarget;
+        updateLabel($profileKey(), input.value);
+    }}"
+							/>
+					`}
+				</div>
+			</header>
+
+			<div class=bindings>
+				${renderBindings(false, profile.bindings, baseline.bindings, updateBindings)}
+			</div>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/lib/ui/views/customize/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/customize/view.ts"],"names":[],"mappings":"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"}

package/x/lib/ui/views/deck/style.css.d.ts

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

package/x/lib/ui/views/deck/style.css.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: block;
+	width: min(50em, 100%);
+
+	color: var(--text);
+	text-shadow: var(--text-shadow);
+}
+
+.deck {
+	padding: var(--pad);
+	--tint: oklch(from var(--prime) l c h / 50%);
+}
+
+[view="shiny-tabs"] {
+	--prime: inherit;
+
+	--tint: var(--prime);
+	--slate: color-mix(in oklch,
+		transparent,
+		color-mix(in oklch, var(--bg), var(--tint) 25%) 25%
+	);
+	--shimmer: color-mix(in oklch, transparent, var(--tint));
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	&::part(tabs) {
+		display: flex;
+		width: max-content;
+		justify-content: center;
+		padding: var(--nib);
+
+		background: var(--slate);
+		border: 1px solid var(--shimmer);
+		border-radius: var(--round);
+	}
+
+	&::part(panels) {
+		display: block;
+		width: 100%;
+		margin-top: var(--pad);
+	}
+
+	button {
+		border: none;
+		background: transparent;
+		border-radius: var(--round);
+		border: 2px solid transparent;
+		text-shadow: var(--text-shadow);
+
+		&[data-tabbed] {
+			text-decoration: none;
+			color: var(--prime);
+			border-color: var(--prime);
+			background: color-mix(in oklch, var(--bg), var(--prime) 30%);
+			box-shadow:
+				inset 0 0 1.5em oklch(from var(--shimmer) l c h / 50%),
+				0 0 2em oklch(from var(--shimmer) l c h / 50%);
+		}
+	}
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

package/x/lib/ui/views/deck/style.css.js.map

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

package/x/lib/ui/views/deck/types.d.ts

@@ -0,0 +1,14 @@
+import { loot } from "@e280/sly";
+import { Deck, PlayerId } from "../../deck/types.js";
+import { Controller } from "../../../input/controller.js";
+export declare const droppyNewPlayer: unique symbol;
+export type DraggyController = {
+    controller: Controller;
+};
+export type DroppyPort = {
+    playerId: PlayerId | null | typeof droppyNewPlayer;
+};
+export type Context = {
+    deck: Deck;
+    dnd: loot.DragAndDrops<DraggyController, DroppyPort>;
+};

package/x/lib/ui/views/deck/types.js

@@ -0,0 +1,2 @@
+export const droppyNewPlayer = Symbol("droppyNewPlayer");
+//# sourceMappingURL=types.js.map

package/x/lib/ui/views/deck/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/deck/types.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA"}

package/x/lib/ui/views/deck/view.d.ts

@@ -0,0 +1,2 @@
+import { Deck } from "../../deck/types.js";
+export declare const DeckView: import("@e280/sly").ShadowView<[deck: Deck]>, makeDeckElement: (deck: Deck) => new () => HTMLElement;

package/x/lib/ui/views/deck/view.js

@@ -0,0 +1,41 @@
+import { html } from "lit";
+import { ShinyTabs, TabsControl } from "@e280/shiny";
+import { shadowDuplex, useCss, useOnce } from "@e280/sly";
+import styleCss from "./style.css.js";
+import themeCss from "../theme.css.js";
+import gameControllerSvg from "../../icons/akar/game-controller.svg.js";
+import settingsHorizontalSvg from "../../icons/akar/settings-horizontal.svg.js";
+import { ControllersView } from "../controllers/view.js";
+import { CustomizeView } from "../customize/view.js";
+export const [DeckView, makeDeckElement] = shadowDuplex((deck) => {
+    useCss(themeCss, styleCss);
+    const attrs = { slot: "panel" };
+    const tabsControl = useOnce(() => new TabsControl());
+    // TODO remove this
+    useOnce(() => {
+        if (window.location.hash.includes("bindings"))
+            tabsControl.setIndex(1);
+    });
+    return html `
+		<div class=deck theme-card>
+			${ShinyTabs.with({
+        props: [{ control: tabsControl }],
+        children: html `
+					<button theme-button>
+						${gameControllerSvg}
+						<span>controllers</span>
+					</button>
+
+					<button theme-button>
+						${settingsHorizontalSvg}
+						<span>customize</span>
+					</button>
+
+					${ControllersView.with({ attrs, props: [deck] })}
+					${CustomizeView.with({ attrs, props: [deck] })}
+				`,
+    })}
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/lib/ui/views/deck/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/deck/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,aAAa,CAAA;AAClD,OAAO,EAAC,YAAY,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEvD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AACtC,OAAO,iBAAiB,MAAM,yCAAyC,CAAA;AACvE,OAAO,qBAAqB,MAAM,6CAA6C,CAAA;AAG/E,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAElD,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC,IAAU,EAAE,EAAE;IACtE,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,EAAC,IAAI,EAAE,OAAO,EAAC,CAAA;IAC7B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,CAAA;IAEpD,mBAAmB;IACnB,OAAO,CAAC,GAAG,EAAE;QACZ,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;YAC5C,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,IAAI,CAAC;QAChB,KAAK,EAAE,CAAC,EAAC,OAAO,EAAE,WAAW,EAAC,CAAC;QAC/B,QAAQ,EAAE,IAAI,CAAA;;QAEV,iBAAiB;;;;;QAKjB,qBAAqB;;;;OAItB,eAAe,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAC,CAAC;OAC5C,aAAa,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAC,CAAC;KAC5C;KACD,CAAC;;EAEH,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/lib/ui/views/profile-select/view.d.ts

@@ -0,0 +1,4 @@
+import { Controls } from "../../deck/controls/controls.js";
+export declare const ProfileSelectView: import("@e280/sly").View<[deck: {
+    controls: Controls;
+}, currentProfileKey: string, onChange: (key: string) => void]>;

package/x/lib/ui/views/profile-select/view.js

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { lightView } from "@e280/sly";
+export const ProfileSelectView = lightView((deck, currentProfileKey, onChange) => {
+    const { profiles } = deck.controls;
+    function handleChange(event) {
+        const select = event.currentTarget;
+        onChange(select.value);
+    }
+    return html `
+		<select
+			part=select
+			theme-select
+			.value="${currentProfileKey}"
+			@change="${handleChange}">
+
+			${profiles.presets.map(([key, profile]) => html `
+				<option
+					value="${key}"
+					?selected="${key === currentProfileKey}">
+					${profile.label}
+				</option>
+			`)}
+
+			${profiles.customs.map(([key, profile]) => html `
+				<option
+					value="${key}"
+					?selected="${key === currentProfileKey}">
+					${profile.label}
+				</option>
+			`)}
+		</select>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/lib/ui/views/profile-select/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/profile-select/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AAGnC,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,CACzC,IAA0B,EAC1B,iBAAyB,EACzB,QAA+B,EAC9B,EAAE;IAEJ,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,QAAQ,CAAA;IAEhC,SAAS,YAAY,CAAC,KAAY;QACjC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAkC,CAAA;QACvD,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC;IAED,OAAO,IAAI,CAAA;;;;aAIC,iBAAiB;cAChB,YAAY;;KAErB,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEpC,GAAG;kBACC,GAAG,KAAK,iBAAiB;OACpC,OAAO,CAAC,KAAK;;IAEhB,CAAC;;KAEA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEpC,GAAG;kBACC,GAAG,KAAK,iBAAiB;OACpC,OAAO,CAAC,KAAK;;IAEhB,CAAC;;EAEH,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/lib/ui/views/theme.css.d.ts

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