@benev/tact 0.4.0-0 → 0.4.0-2

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;

package/x/lib/ui/views/theme.css.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+import { cssReset } from "@e280/sly";
+export default css `
+@layer theme, view;
+@layer theme {
+
+${cssReset}
+
+:host {
+	--prime: var(--tact-prime, #fb0);
+
+	--text: var(--tact-text, #fffc);
+	--bg: var(--tact-bg, oklch(from var(--prime) calc(l * 0.3) calc(c * 0.1) h));
+	--droppy: var(--tact-droppy, oklch(from var(--prime) l c calc(h + 100)));
+	--recording: var(--tact-recording, oklch(from var(--prime) l c calc(h + 100)));
+
+	--round: var(--tact-round, 0.5em);
+	--pad: var(--tact-pad, 0.5em);
+	--nib: var(--tact-nib, 0.2em);
+	--space: var(--tact-space, 1em);
+	--box-shadow: var(--tact-box-shadow, 0.1em 0.2em 1em #0006);
+	--text-shadow: var(--tact-text-shadow, 0.02em 0.04em 0.1em #000a);
+}
+
+[theme-card] {
+	--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));
+
+	border-radius: var(--round);
+	background: var(--slate);
+	border: 1px solid var(--shimmer);
+	box-shadow:
+		inset 0 0 3em color-mix(in oklch, transparent, var(--shimmer) 30%),
+		var(--box-shadow);
+
+	&[theme-card="dull"] {
+		--tint: #8888;
+	}
+}
+
+[theme-button] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font: inherit;
+	color: inherit;
+
+	cursor: pointer;
+	user-select: none;
+
+	opacity: 0.8;
+	gap: 0.5em;
+	padding: 0.5em;
+
+	&:is(:hover, :focus-visible) { opacity: 1; }
+	&:active { opacity: 0.8; }
+
+	svg {
+		width: 1.2em;
+		height: 1.2em;
+	}
+
+	&[theme-button~="naked"] {
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: currentColor;
+	}
+
+	&[theme-button~="angry"] {
+		&:is(:hover, :focus-visible) { color: red; }
+	}
+}
+
+[theme-select] {
+	--base: var(--tint, var(--prime));
+	font: inherit;
+	color: inherit;
+	background: var(--bg);
+	border: 1px solid var(--base);
+	border-radius: var(--round);
+	padding: var(--nib) var(--pad);
+	box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 40%);
+
+	&:is(:hover, :focus-visible) {
+		filter: brightness(110%);
+		box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 60%);
+	}
+
+	&:active {
+		filter: brightness(90%);
+		box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 40%);
+	}
+}
+
+[theme-input] {
+	--base: var(--tint, var(--prime));
+	--chill: oklch(from var(--base) l c h / 50%);
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: 1px solid var(--chill);
+	border-radius: var(--round);
+	padding: 0 var(--nib);
+	box-shadow: inset 0 0 1em oklch(from var(--chill) l c h / 20%);
+}
+
+}`;
+//# sourceMappingURL=theme.css.js.map

package/x/lib/ui/views/theme.css.js.map

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

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

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

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

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: block;
+}
+
+output {
+	opacity: 0.5;
+	display: block;
+
+	font-size: 1em;
+	height: 8em;
+
+	overflow: hidden;
+	overflow-wrap: anywhere;
+
+	font-family: monospace;
+	color: var(--prime);
+	text-overflow: ellipsis;
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

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

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

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

@@ -0,0 +1,2 @@
+import { Visualizer } from "./visualizer.js";
+export declare const VisualizerView: import("@e280/sly").ShadowView<[visualizer: Visualizer]>, makeVisualizerElement: (visualizer: Visualizer) => new () => HTMLElement;

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

@@ -0,0 +1,12 @@
+import { html } from "lit";
+import { shadowDuplex, useCss } from "@e280/sly";
+import styleCss from "./style.css.js";
+import themeCss from "../theme.css.js";
+export const [VisualizerView, makeVisualizerElement] = shadowDuplex((visualizer) => {
+    useCss(themeCss, styleCss);
+    return html `
+		<slot></slot>
+		<output class=viz>${visualizer.$hex()}</output>
+	`;
+});
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/visualizer/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,YAAY,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AAGtC,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,qBAAqB,CAAC,GAAG,YAAY,CAAC,CAAC,UAAsB,EAAE,EAAE;IAC9F,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,OAAO,IAAI,CAAA;;sBAEU,UAAU,CAAC,IAAI,EAAE;EACrC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/lib/ui/views/visualizer/visualizer.d.ts

@@ -0,0 +1,5 @@
+export declare class Visualizer {
+    $hex: import("@e280/strata").Signal<string>;
+    clear: import("@e280/stz").DebounceReturn<() => void>;
+    update(data: ArrayBuffer): void;
+}

package/x/lib/ui/views/visualizer/visualizer.js

@@ -0,0 +1,13 @@
+import { signal } from "@e280/strata";
+import { debounce, hex } from "@e280/stz";
+export class Visualizer {
+    $hex = signal("");
+    clear = debounce(250, () => {
+        this.$hex.set("");
+    });
+    update(data) {
+        this.$hex(hex(new Uint8Array(data)));
+        this.clear();
+    }
+}
+//# sourceMappingURL=visualizer.js.map

package/x/lib/ui/views/visualizer/visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualizer.js","sourceRoot":"","sources":["../../../../../s/lib/ui/views/visualizer/visualizer.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,QAAQ,EAAE,GAAG,EAAC,MAAM,WAAW,CAAA;AAEvC,MAAM,OAAO,UAAU;IACtB,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IAEjB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;QAC1B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;IAClB,CAAC,CAAC,CAAA;IAEF,MAAM,CAAC,IAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,KAAK,EAAE,CAAA;IACb,CAAC;CACD"}

package/x/lib/utils/ellipsis.d.ts

@@ -0,0 +1 @@
+export declare function ellipsis(s: string, max: number): string;

package/x/lib/utils/ellipsis.js

@@ -0,0 +1,6 @@
+export function ellipsis(s, max) {
+    return s.length > max
+        ? s.slice(0, max) + "..."
+        : s;
+}
+//# sourceMappingURL=ellipsis.js.map