flawed-avatar 0.2.1

package/src/renderer/settings-window/settings-controls.ts

@@ -0,0 +1,223 @@
+// Reusable form control factories for settings panel
+
+function debounce(fn: (v: number) => void, ms: number): (v: number) => void {
+	let timer: ReturnType<typeof setTimeout> | null = null;
+	return (v: number) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => fn(v), ms);
+	};
+}
+
+export interface SliderHandle {
+	el: HTMLElement;
+	setValue(v: number): void;
+}
+
+export function createSlider(opts: {
+	min: number;
+	max: number;
+	step: number;
+	value: number;
+	label?: string;
+	debounceMs?: number;
+	onChange: (v: number) => void;
+}): SliderHandle {
+	const el = document.createElement("div");
+	el.style.display = "flex";
+	el.style.alignItems = "center";
+	el.style.gap = "8px";
+	el.style.width = "100%";
+
+	const input = document.createElement("input");
+	input.type = "range";
+	input.className = "settings__range";
+	input.min = String(opts.min);
+	input.max = String(opts.max);
+	input.step = String(opts.step);
+	input.value = String(opts.value);
+	input.style.flex = "1";
+
+	const valueDisplay = document.createElement("span");
+	valueDisplay.className = "settings__value";
+	valueDisplay.style.minWidth = "36px";
+	valueDisplay.textContent = formatSliderValue(opts.value, opts.step);
+
+	const debouncedChange = opts.debounceMs
+		? debounce(opts.onChange, opts.debounceMs)
+		: opts.onChange;
+
+	input.addEventListener("input", () => {
+		const v = parseFloat(input.value);
+		valueDisplay.textContent = formatSliderValue(v, opts.step);
+		debouncedChange(v);
+	});
+
+	el.appendChild(input);
+	el.appendChild(valueDisplay);
+
+	return {
+		el,
+		setValue(v: number) {
+			input.value = String(v);
+			valueDisplay.textContent = formatSliderValue(v, opts.step);
+		},
+	};
+}
+
+function formatSliderValue(v: number, step: number): string {
+	const decimals = step < 1 ? Math.max(1, String(step).split(".")[1]?.length ?? 1) : 0;
+	return v.toFixed(decimals);
+}
+
+export interface ToggleHandle {
+	el: HTMLElement;
+	setValue(v: boolean): void;
+}
+
+export function createToggle(opts: {
+	initial: boolean;
+	onChange: (v: boolean) => void;
+}): ToggleHandle {
+	const el = document.createElement("div");
+	el.className = "settings__toggle";
+	if (opts.initial) el.classList.add("is-on");
+
+	let value = opts.initial;
+
+	el.addEventListener("click", () => {
+		value = !value;
+		el.classList.toggle("is-on", value);
+		opts.onChange(value);
+	});
+
+	return {
+		el,
+		setValue(v: boolean) {
+			value = v;
+			el.classList.toggle("is-on", v);
+		},
+	};
+}
+
+export interface SelectHandle {
+	el: HTMLSelectElement;
+	setValue(v: string): void;
+}
+
+export function createSelect(opts: {
+	options: { value: string; label: string }[];
+	selected: string;
+	onChange: (v: string) => void;
+}): SelectHandle {
+	const el = document.createElement("select");
+	el.className = "settings__select";
+
+	for (const opt of opts.options) {
+		const option = document.createElement("option");
+		option.value = opt.value;
+		option.textContent = opt.label;
+		if (opt.value === opts.selected) option.selected = true;
+		el.appendChild(option);
+	}
+
+	el.addEventListener("change", () => {
+		opts.onChange(el.value);
+	});
+
+	return {
+		el,
+		setValue(v: string) {
+			el.value = v;
+		},
+	};
+}
+
+export interface RadioGroupHandle {
+	el: HTMLElement;
+	setValue(v: string): void;
+}
+
+export function createRadioGroup(opts: {
+	options: { value: string; label: string }[];
+	selected: string;
+	onChange: (v: string) => void;
+}): RadioGroupHandle {
+	const el = document.createElement("div");
+	el.className = "settings__radio-group";
+	const buttons: Map<string, HTMLButtonElement> = new Map();
+
+	for (const opt of opts.options) {
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.className = "settings__radio";
+		btn.textContent = opt.label;
+		btn.dataset.value = opt.value;
+		if (opt.value === opts.selected) btn.classList.add("is-selected");
+		btn.addEventListener("click", () => {
+			for (const b of buttons.values()) b.classList.remove("is-selected");
+			btn.classList.add("is-selected");
+			opts.onChange(opt.value);
+		});
+		buttons.set(opt.value, btn);
+		el.appendChild(btn);
+	}
+
+	return {
+		el,
+		setValue(v: string) {
+			for (const [value, btn] of buttons) {
+				btn.classList.toggle("is-selected", value === v);
+			}
+		},
+	};
+}
+
+export function createRow(label: string, control: HTMLElement): HTMLElement {
+	const row = document.createElement("div");
+	row.className = "settings__row";
+
+	const labelEl = document.createElement("span");
+	labelEl.className = "settings__label";
+	labelEl.textContent = label;
+
+	row.appendChild(labelEl);
+	row.appendChild(control);
+	return row;
+}
+
+export function createStackedRow(label: string, control: HTMLElement): HTMLElement {
+	const row = document.createElement("div");
+	row.className = "settings__row settings__row--stacked";
+
+	const labelEl = document.createElement("span");
+	labelEl.className = "settings__label";
+	labelEl.textContent = label;
+
+	row.appendChild(labelEl);
+	row.appendChild(control);
+	return row;
+}
+
+export function createSection(title: string): HTMLElement {
+	const section = document.createElement("div");
+	section.className = "settings__section";
+
+	const titleEl = document.createElement("div");
+	titleEl.className = "settings__section-title";
+	titleEl.textContent = title;
+
+	section.appendChild(titleEl);
+	return section;
+}
+
+export function createButton(label: string, opts?: {
+	variant?: "primary" | "secondary" | "ghost";
+	onClick?: () => void;
+}): HTMLButtonElement {
+	const btn = document.createElement("button");
+	btn.type = "button";
+	btn.className = `btn btn--${opts?.variant ?? "secondary"}`;
+	btn.textContent = label;
+	if (opts?.onClick) btn.addEventListener("click", opts.onClick);
+	return btn;
+}

package/src/renderer/settings-window/settings-index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy"
+        content="default-src 'self' file: data: blob:; script-src 'self';
+                 style-src 'self' 'unsafe-inline'; img-src 'self' file: data: blob:;
+                 connect-src 'self' file: data: blob:" />
+  <title>OpenClaw Settings</title>
+  <link rel="stylesheet" href="./styles/settings.css" />
+</head>
+<body>
+  <div id="settings-root" class="settings"></div>
+  <script type="module" src="./settings-renderer.js"></script>
+</body>
+</html>

package/src/renderer/settings-window/settings-panel.ts

@@ -0,0 +1,346 @@
+import {
+	createSlider,
+	createToggle,
+	createSelect,
+	createRadioGroup,
+	createRow,
+	createStackedRow,
+	createSection,
+	createButton,
+} from "./settings-controls.js";
+
+const TABS = ["Avatar", "Camera", "Voice", "Lighting", "Advanced"] as const;
+
+export function createSettingsPanel(container: HTMLElement, bridge: SettingsBridge): void {
+	// Title bar
+	const titlebar = document.createElement("div");
+	titlebar.className = "settings__titlebar";
+
+	const titleText = document.createElement("span");
+	titleText.className = "settings__titlebar-text";
+	titleText.textContent = "Settings";
+
+	const closeBtn = document.createElement("button");
+	closeBtn.className = "settings__titlebar-close";
+	closeBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+		<path d="M1 1L11 11M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	</svg>`;
+	closeBtn.addEventListener("click", () => bridge.close());
+
+	titlebar.appendChild(titleText);
+	titlebar.appendChild(closeBtn);
+	container.appendChild(titlebar);
+
+	// Tab bar
+	const tabBar = document.createElement("div");
+	tabBar.className = "settings__tabs";
+
+	const panels: Map<string, HTMLElement> = new Map();
+	const tabButtons: Map<string, HTMLButtonElement> = new Map();
+
+	for (const tab of TABS) {
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.className = "settings__tab";
+		btn.textContent = tab;
+		if (tab === TABS[0]) btn.classList.add("is-active");
+
+		btn.addEventListener("click", () => {
+			for (const b of tabButtons.values()) b.classList.remove("is-active");
+			btn.classList.add("is-active");
+			for (const [name, panel] of panels) {
+				panel.hidden = name !== tab;
+			}
+		});
+
+		tabButtons.set(tab, btn);
+		tabBar.appendChild(btn);
+	}
+	container.appendChild(tabBar);
+
+	// Create panels
+	for (const tab of TABS) {
+		const panel = document.createElement("div");
+		panel.className = "settings__panel";
+		panel.hidden = tab !== TABS[0];
+		panels.set(tab, panel);
+		container.appendChild(panel);
+	}
+
+	// ── Avatar Tab ──
+	const avatarPanel = panels.get("Avatar")!;
+	const avatarSection = createSection("Model");
+
+	const modelPathEl = document.createElement("div");
+	modelPathEl.className = "settings__model-path";
+	modelPathEl.textContent = "No model selected";
+	avatarSection.appendChild(modelPathEl);
+
+	const changeModelBtn = createButton("Change Model\u2026", {
+		variant: "secondary",
+		onClick: async () => {
+			const path = await bridge.pickVrmFile();
+			if (path) {
+				modelPathEl.textContent = formatPath(path);
+				modelPathEl.title = path;
+			}
+		},
+	});
+	avatarSection.appendChild(changeModelBtn);
+
+	avatarPanel.appendChild(avatarSection);
+
+	const scaleSection = createSection("Scale");
+	const scaleSlider = createSlider({
+		min: 0.5, max: 2.0, step: 0.1, value: 1.0,
+		debounceMs: 50,
+		onChange: (v) => bridge.setScale(v),
+	});
+	scaleSection.appendChild(createRow("Avatar Scale", scaleSlider.el));
+	avatarPanel.appendChild(scaleSection);
+
+	// ── Camera Tab ──
+	const cameraPanel = panels.get("Camera")!;
+	const framingSection = createSection("Framing");
+	const framingRadio = createRadioGroup({
+		options: [
+			{ value: "0.6", label: "Head" },
+			{ value: "1.5", label: "Upper Body" },
+			{ value: "4.0", label: "Full Body" },
+		],
+		selected: "1.5",
+		onChange: (v) => bridge.setCameraZoom(parseFloat(v)),
+	});
+	framingSection.appendChild(framingRadio.el);
+	cameraPanel.appendChild(framingSection);
+
+	const zoomSection = createSection("Zoom");
+	const zoomSlider = createSlider({
+		min: 0.5, max: 6.0, step: 0.2, value: 3.0,
+		debounceMs: 50,
+		onChange: (v) => bridge.setCameraZoom(v),
+	});
+	zoomSection.appendChild(createRow("Camera Zoom", zoomSlider.el));
+	cameraPanel.appendChild(zoomSection);
+
+	// ── Voice Tab ──
+	const voicePanel = panels.get("Voice")!;
+	const ttsSection = createSection("Text-to-Speech");
+
+	const ttsToggle = createToggle({
+		initial: false,
+		onChange: (v) => bridge.setTtsEnabled(v),
+	});
+	ttsSection.appendChild(createRow("Enable TTS", ttsToggle.el));
+
+	const engineSelect = createSelect({
+		options: [
+			{ value: "web-speech", label: "Web Speech (System)" },
+			{ value: "kokoro", label: "Kokoro (Local AI)" },
+		],
+		selected: "web-speech",
+		onChange: (v) => bridge.setTtsEngine(v as "web-speech" | "kokoro"),
+	});
+	ttsSection.appendChild(createRow("Engine", engineSelect.el));
+
+	const voiceInput = document.createElement("input");
+	voiceInput.type = "text";
+	voiceInput.className = "settings__text-input";
+	voiceInput.placeholder = "Voice name (optional)";
+	let voiceDebounce: ReturnType<typeof setTimeout> | null = null;
+	voiceInput.addEventListener("input", () => {
+		if (voiceDebounce) clearTimeout(voiceDebounce);
+		voiceDebounce = setTimeout(() => bridge.setTtsVoice(voiceInput.value), 300);
+	});
+	ttsSection.appendChild(createStackedRow("Voice", voiceInput));
+
+	voicePanel.appendChild(ttsSection);
+
+	// ── Lighting Tab ──
+	const lightingPanel = panels.get("Lighting")!;
+	const profileSection = createSection("Profile");
+
+	const lightingRadio = createRadioGroup({
+		options: [
+			{ value: "studio", label: "Studio" },
+			{ value: "warm", label: "Warm" },
+			{ value: "cool", label: "Cool" },
+			{ value: "neutral", label: "Neutral" },
+			{ value: "custom", label: "Custom" },
+		],
+		selected: "studio",
+		onChange: (v) => {
+			bridge.setLightingProfile(v);
+			customControls.style.display = v === "custom" ? "block" : "none";
+		},
+	});
+	profileSection.appendChild(lightingRadio.el);
+	lightingPanel.appendChild(profileSection);
+
+	// Custom lighting controls (hidden by default)
+	const customControls = document.createElement("div");
+	customControls.style.display = "none";
+
+	const customSection = createSection("Custom Settings");
+	const intensitySlider = createSlider({
+		min: 0, max: 2, step: 0.1, value: 0.3,
+		debounceMs: 50,
+		onChange: () => sendCustomLighting(),
+	});
+	customSection.appendChild(createRow("Intensity", intensitySlider.el));
+
+	const ambientSlider = createSlider({
+		min: 0, max: 1, step: 0.05, value: 0.5,
+		debounceMs: 50,
+		onChange: () => sendCustomLighting(),
+	});
+	customSection.appendChild(createRow("Ambient", ambientSlider.el));
+
+	const colorInput = document.createElement("input");
+	colorInput.type = "color";
+	colorInput.className = "settings__color-input";
+	colorInput.value = "#ffffff";
+	colorInput.addEventListener("input", () => sendCustomLighting());
+	customSection.appendChild(createRow("Color", colorInput));
+
+	customControls.appendChild(customSection);
+	lightingPanel.appendChild(customControls);
+
+	function sendCustomLighting(): void {
+		bridge.setLightingCustom({
+			intensity: parseFloat((intensitySlider.el.querySelector("input") as HTMLInputElement).value),
+			color: colorInput.value,
+			ambient: parseFloat((ambientSlider.el.querySelector("input") as HTMLInputElement).value),
+		});
+	}
+
+	// ── Advanced Tab ──
+	const advancedPanel = panels.get("Advanced")!;
+
+	const opacitySection = createSection("Appearance");
+	const opacitySlider = createSlider({
+		min: 0.3, max: 1.0, step: 0.05, value: 1.0,
+		debounceMs: 50,
+		onChange: (v) => bridge.setOpacity(v),
+	});
+	opacitySection.appendChild(createRow("Opacity", opacitySlider.el));
+	advancedPanel.appendChild(opacitySection);
+
+	const timeoutSection = createSection("Chat");
+	const timeoutSelect = createSelect({
+		options: [
+			{ value: "5000", label: "5 seconds" },
+			{ value: "10000", label: "10 seconds" },
+			{ value: "30000", label: "30 seconds" },
+			{ value: "0", label: "Never" },
+		],
+		selected: "10000",
+		onChange: (v) => bridge.setIdleTimeout(parseInt(v, 10)),
+	});
+	timeoutSection.appendChild(createRow("Auto-hide", timeoutSelect.el));
+	advancedPanel.appendChild(timeoutSection);
+
+	const positionSection = createSection("Position");
+	const snapGrid = document.createElement("div");
+	snapGrid.style.display = "grid";
+	snapGrid.style.gridTemplateColumns = "1fr 1fr";
+	snapGrid.style.gap = "6px";
+
+	const corners = [
+		{ value: "topLeft", label: "Top Left" },
+		{ value: "topRight", label: "Top Right" },
+		{ value: "bottomLeft", label: "Bottom Left" },
+		{ value: "bottomRight", label: "Bottom Right" },
+	] as const;
+
+	for (const corner of corners) {
+		const btn = createButton(corner.label, {
+			variant: "secondary",
+			onClick: () => bridge.snapTo(corner.value),
+		});
+		snapGrid.appendChild(btn);
+	}
+	positionSection.appendChild(snapGrid);
+	advancedPanel.appendChild(positionSection);
+
+	// Clear chat
+	const chatActionsSection = createSection("Actions");
+	const clearChatBtn = createButton("Clear Chat History", {
+		variant: "secondary",
+		onClick: () => bridge.clearChat(),
+	});
+	chatActionsSection.appendChild(clearChatBtn);
+	advancedPanel.appendChild(chatActionsSection);
+
+	// ── Init: Populate controls from persisted settings ──
+	bridge.getSettings().then((settings) => {
+		// Avatar tab
+		if (settings.vrmModelPath) {
+			modelPathEl.textContent = formatPath(settings.vrmModelPath);
+			modelPathEl.title = settings.vrmModelPath;
+		}
+		scaleSlider.setValue(settings.scale);
+
+		// Camera tab
+		zoomSlider.setValue(settings.zoom);
+		// Match closest framing preset
+		const presets = [0.6, 1.5, 4.0];
+		const closest = presets.reduce((a, b) =>
+			Math.abs(b - settings.zoom) < Math.abs(a - settings.zoom) ? b : a,
+		);
+		framingRadio.setValue(String(closest));
+
+		// Voice tab
+		ttsToggle.setValue(settings.ttsEnabled);
+		engineSelect.setValue(settings.ttsEngine);
+		voiceInput.value = settings.ttsVoice || "";
+
+		// Lighting tab
+		lightingRadio.setValue(settings.lightingProfile);
+		customControls.style.display = settings.lightingProfile === "custom" ? "block" : "none";
+		if (settings.lightingCustom) {
+			intensitySlider.setValue(settings.lightingCustom.intensity);
+			ambientSlider.setValue(settings.lightingCustom.ambient);
+			colorInput.value = settings.lightingCustom.color;
+		}
+
+		// Advanced tab
+		opacitySlider.setValue(settings.opacity);
+		timeoutSelect.setValue(String(settings.idleTimeoutMs));
+	});
+
+	// ── Live sync: Update controls from external changes ──
+	bridge.onOpacityChanged((v) => opacitySlider.setValue(v));
+	bridge.onScaleChanged((v) => scaleSlider.setValue(v));
+	bridge.onCameraZoomChanged((v) => {
+		zoomSlider.setValue(v);
+		const presets = [0.6, 1.5, 4.0];
+		const closest = presets.reduce((a, b) =>
+			Math.abs(b - v) < Math.abs(a - v) ? b : a,
+		);
+		framingRadio.setValue(String(closest));
+	});
+	bridge.onTtsEnabledChanged((v) => ttsToggle.setValue(v));
+	bridge.onTtsEngineChanged((v) => engineSelect.setValue(v));
+	bridge.onTtsVoiceChanged((v) => { voiceInput.value = v; });
+	bridge.onIdleTimeoutChanged((ms) => timeoutSelect.setValue(String(ms)));
+	bridge.onLightingProfileChanged((v) => {
+		lightingRadio.setValue(v);
+		customControls.style.display = v === "custom" ? "block" : "none";
+	});
+	bridge.onLightingCustomChanged((v) => {
+		intensitySlider.setValue(v.intensity);
+		ambientSlider.setValue(v.ambient);
+		colorInput.value = v.color;
+	});
+	bridge.onVrmModelChanged((path) => {
+		modelPathEl.textContent = formatPath(path);
+		modelPathEl.title = path;
+	});
+}
+
+function formatPath(fullPath: string): string {
+	const parts = fullPath.replace(/\\/g, "/").split("/");
+	const filename = parts[parts.length - 1] || fullPath;
+	return filename;
+}

package/src/renderer/settings-window/settings-renderer.ts

@@ -0,0 +1,5 @@
+import { createSettingsPanel } from "./settings-panel.js";
+
+const bridge = window.settingsBridge;
+const root = document.getElementById("settings-root")!;
+createSettingsPanel(root, bridge);

package/src/renderer/styles/base.css

@@ -0,0 +1,106 @@
+/**
+ * Base styles - Reset and foundation
+ * Provides consistent cross-browser defaults
+ */
+
+/* Box-sizing reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margins */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Core document styles */
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-normal);
+  color: var(--text-primary);
+}
+
+/* Screen reader only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Remove default button styles */
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+/* Remove default input styles */
+input,
+textarea {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+}
+
+input:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}