@swifttui/web 0.0.6

package/src/WebHostTerminalStyle.test.ts

@@ -0,0 +1,123 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+import {
+  decodeWebHostTerminalRenderStyleBase64,
+  encodeWebHostTerminalRenderStyleBase64,
+  normalizeWebHostTerminalStyle,
+  resolveWebHostTerminalRenderStyle,
+  webTUITerminalBackgroundColor,
+} from "./WebHostTerminalStyle.ts";
+
+test("terminal style normalization fills default palette and theme", () => {
+  const style = normalizeWebHostTerminalStyle({
+    fontSize: 16,
+    cursorBlink: true,
+  });
+
+  expect(style.fontSize).toBe(16);
+  expect(style.cursorBlink).toBe(true);
+  expect(style.fontFamily.length).toBeGreaterThan(0);
+  expect(style.theme.background).toBe("#1e222a");
+  expect(style.palette.background).toBe("#1e222a");
+});
+
+test("terminal style resolves host-owned theme payloads", () => {
+  const style = {
+    palette: {
+      foreground: "#101010",
+      background: "#fafafa",
+      cursor: "#101010",
+      selectionBackground: "#d0e4ff",
+      selectionForeground: "#101010",
+    },
+    theme: {
+      foreground: "#111111",
+      background: "#fafafa",
+      tint: "#0f62fe",
+      separator: "#d0d0d0",
+      selection: "#d0e4ff",
+      placeholder: "#707070",
+      link: "#0f62fe",
+      fill: "#f4f4f4",
+      windowBackground: "#ffffff",
+      success: "#198038",
+      warning: "#b46e00",
+      danger: "#da1e28",
+      info: "#0f62fe",
+      muted: "#525252",
+    },
+  };
+
+  const resolved = resolveWebHostTerminalRenderStyle(style);
+  expect(resolved.appearance.foregroundColor).toBe("#111111");
+  expect(resolved.appearance.backgroundColor).toBe("#fafafa");
+  expect(resolved.theme?.warning).toBe("#b46e00");
+  expect(encodeWebHostTerminalRenderStyleBase64(style)).toBeDefined();
+  expect(
+    decodeWebHostTerminalRenderStyleBase64(
+      encodeWebHostTerminalRenderStyleBase64(style)
+    )?.appearance.backgroundColor
+  ).toBe("#fafafa");
+});
+
+test("terminal style maps to surface palette and translucent background", () => {
+  const style = {
+    backgroundOpacity: 0.5,
+    palette: {
+      foreground: "#ededed",
+      background: "#202020",
+      cursor: "#ffffff",
+      selectionBackground: "#264f78",
+      selectionForeground: "#ffffff",
+    },
+    theme: {
+      foreground: "#ededed",
+      background: "#202020",
+      tint: "#56b6c2",
+      separator: "#4c566a",
+      selection: "#2e3440",
+      placeholder: "#8c92ac",
+      link: "#5ba3ff",
+      fill: "#2b303b",
+      windowBackground: "#15181e",
+      success: "#61c67b",
+      warning: "#ebb33c",
+      danger: "#e05757",
+      info: "#56b6c2",
+      muted: "#8c92ac",
+    },
+  };
+
+  expect(normalizeWebHostTerminalStyle(style).palette.foreground).toBe("#ededed");
+  expect(normalizeWebHostTerminalStyle(style).palette.background).toBe("#202020");
+  expect(webTUITerminalBackgroundColor(style)).toBe("rgba(32, 32, 32, 0.5)");
+  expect(resolveWebHostTerminalRenderStyle(style).appearance.palette["0"]).toBe("#20242c");
+});
+
+test("shared default transport fixtures stay in sync with WebHost encoding", () => {
+  const fixture = transportFixture("terminal-render-style-default");
+
+  expect(JSON.stringify(resolveWebHostTerminalRenderStyle({}))).toBe(fixture.json);
+  expect(encodeWebHostTerminalRenderStyleBase64({})).toBe(fixture.base64);
+  expect(
+    JSON.stringify(decodeWebHostTerminalRenderStyleBase64(fixture.base64))
+  ).toBe(fixture.json);
+});
+
+function transportFixture(
+  basename: string
+): { json: string; base64: string } {
+  const json = readTransportFixture(`${basename}.json`);
+  const base64 = readTransportFixture(`${basename}.base64.txt`);
+  return { json, base64 };
+}
+
+function readTransportFixture(
+  name: string
+): string {
+  return readFileSync(
+    new URL(`../../../Fixtures/Transport/${name}`, import.meta.url),
+    "utf8"
+  ).trim();
+}

package/src/WebHostTerminalStyle.ts

@@ -0,0 +1,471 @@
+export type WebHostTerminalCursorStyle = "block" | "bar" | "underline";
+
+export interface WebHostANSIColors {
+  black?: string;
+  red?: string;
+  green?: string;
+  yellow?: string;
+  blue?: string;
+  magenta?: string;
+  cyan?: string;
+  white?: string;
+  brightBlack?: string;
+  brightRed?: string;
+  brightGreen?: string;
+  brightYellow?: string;
+  brightBlue?: string;
+  brightMagenta?: string;
+  brightCyan?: string;
+  brightWhite?: string;
+}
+
+export interface WebHostTerminalPalette {
+  foreground?: string;
+  background?: string;
+  cursor?: string;
+  selectionBackground?: string;
+  selectionForeground?: string;
+  ansi?: WebHostANSIColors;
+}
+
+export interface WebHostTerminalTheme {
+  foreground?: string;
+  background?: string;
+  tint?: string;
+  separator?: string;
+  selection?: string;
+  placeholder?: string;
+  link?: string;
+  fill?: string;
+  windowBackground?: string;
+  success?: string;
+  warning?: string;
+  danger?: string;
+  info?: string;
+  muted?: string;
+}
+
+export interface WebHostTerminalStyle {
+  fontSize?: number;
+  fontFamily?: string;
+  cursorStyle?: WebHostTerminalCursorStyle;
+  cursorBlink?: boolean;
+  backgroundOpacity?: number;
+  palette?: WebHostTerminalPalette;
+  theme?: WebHostTerminalTheme;
+}
+
+export interface ResolvedWebHostTerminalPalette {
+  foreground: string;
+  background: string;
+  cursor: string;
+  selectionBackground: string;
+  selectionForeground: string;
+  ansi: Required<WebHostANSIColors>;
+}
+
+export interface ResolvedWebHostTerminalStyle {
+  fontSize: number;
+  fontFamily: string;
+  cursorStyle: WebHostTerminalCursorStyle;
+  cursorBlink: boolean;
+  backgroundOpacity: number;
+  palette: ResolvedWebHostTerminalPalette;
+  theme: Required<WebHostTerminalTheme>;
+}
+
+export interface WebHostTerminalRenderStyle {
+  appearance: WebHostTerminalAppearance;
+  theme?: WebHostTerminalTheme;
+}
+
+export interface WebHostTerminalAppearance {
+  foregroundColor: string;
+  backgroundColor: string;
+  tintColor: string;
+  palette: Record<string, string>;
+  colorSchemeContrast: "standard" | "increased";
+  source: "activeQuery" | "environmentHeuristics" | "fallback" | "override";
+}
+
+const defaultFontFamily =
+  '"SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", monospace';
+
+const defaultANSI: Required<WebHostANSIColors> = {
+  black: "#20242c",
+  red: "#e05757",
+  green: "#61c67b",
+  yellow: "#ebb33c",
+  blue: "#5ba3ff",
+  magenta: "#b46eff",
+  cyan: "#56b6c2",
+  white: "#eceff4",
+  brightBlack: "#8c92ac",
+  brightRed: "#ff7b72",
+  brightGreen: "#7ee787",
+  brightYellow: "#f2cc60",
+  brightBlue: "#79c0ff",
+  brightMagenta: "#d2a8ff",
+  brightCyan: "#7de2d1",
+  brightWhite: "#ffffff",
+};
+
+const defaultPalette: ResolvedWebHostTerminalPalette = {
+  foreground: "#eceff4",
+  background: "#1e222a",
+  cursor: "#56b6c2",
+  selectionBackground: "#2e3440",
+  selectionForeground: "#eceff4",
+  ansi: defaultANSI,
+};
+
+const defaultTheme: Required<WebHostTerminalTheme> = {
+  foreground: "#eceff4",
+  background: "#1e222a",
+  tint: "#56b6c2",
+  separator: "#4c566a",
+  selection: "#2e3440",
+  placeholder: "#8c92ac",
+  link: "#5ba3ff",
+  fill: "#2b303b",
+  windowBackground: "#15181e",
+  success: "#61c67b",
+  warning: "#ebb33c",
+  danger: "#e05757",
+  info: "#56b6c2",
+  muted: "#8c92ac",
+};
+
+export function normalizeWebHostTerminalStyle(
+  style: WebHostTerminalStyle = {}
+): ResolvedWebHostTerminalStyle {
+  const palette = normalizePalette(style.palette, defaultPalette);
+  const theme = normalizeTheme(style.theme, palette, defaultTheme);
+  return {
+    fontSize: normalizeFontSize(style.fontSize ?? 14),
+    fontFamily: style.fontFamily ?? defaultFontFamily,
+    cursorStyle: style.cursorStyle ?? "block",
+    cursorBlink: style.cursorBlink ?? false,
+    backgroundOpacity: normalizeOpacity(style.backgroundOpacity ?? 1),
+    palette,
+    theme,
+  };
+}
+
+export function mergeWebHostTerminalStyle(
+  base: WebHostTerminalStyle,
+  patch: WebHostTerminalStyle
+): ResolvedWebHostTerminalStyle {
+  const resolvedBase = normalizeWebHostTerminalStyle(base);
+  return normalizeWebHostTerminalStyle({
+    ...resolvedBase,
+    ...patch,
+    palette: mergePalette(resolvedBase.palette, patch.palette),
+    theme: patch.theme ? { ...resolvedBase.theme, ...patch.theme } : resolvedBase.theme,
+  });
+}
+
+export function resolveWebHostTerminalRenderStyle(
+  style: WebHostTerminalStyle
+): WebHostTerminalRenderStyle {
+  const normalized = normalizeWebHostTerminalStyle(style);
+  return {
+    appearance: {
+      foregroundColor: normalized.theme.foreground,
+      backgroundColor: normalized.theme.background,
+      tintColor: normalized.theme.tint,
+      palette: paletteToIndexedMap(normalized.palette.ansi),
+      colorSchemeContrast: contrastRatio(normalized.theme.foreground, normalized.theme.background) >= 7
+        ? "increased"
+        : "standard",
+      source: "override",
+    },
+    theme: { ...normalized.theme },
+  };
+}
+
+export function encodeWebHostTerminalRenderStyleBase64(
+  style: WebHostTerminalStyle
+): string {
+  return encodeBase64(JSON.stringify(resolveWebHostTerminalRenderStyle(style)));
+}
+
+export function decodeWebHostTerminalRenderStyleBase64(
+  encoded: string
+): WebHostTerminalRenderStyle | undefined {
+  const json = decodeBase64(encoded);
+  if (!json) {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(json) as WebHostTerminalRenderStyle;
+  } catch {
+    return undefined;
+  }
+}
+
+export function webTUITerminalBackgroundColor(
+  style: WebHostTerminalStyle
+): string {
+  const normalized = normalizeWebHostTerminalStyle(style);
+  return hexToRgba(normalized.theme.background, normalized.backgroundOpacity);
+}
+
+export function applyWebHostTerminalStyle(
+  element: HTMLElement,
+  style: WebHostTerminalStyle
+): void {
+  const normalized = normalizeWebHostTerminalStyle(style);
+  element.style.fontFamily = normalized.fontFamily;
+  element.style.fontSize = `${normalized.fontSize}px`;
+  element.style.background = hexToRgba(normalized.theme.background, normalized.backgroundOpacity);
+  element.style.color = normalized.theme.foreground;
+}
+
+function normalizePalette(
+  input: WebHostTerminalPalette | undefined,
+  defaults: ResolvedWebHostTerminalPalette
+): ResolvedWebHostTerminalPalette {
+  return {
+    foreground: normalizeHexColor(input?.foreground ?? defaults.foreground),
+    background: normalizeHexColor(input?.background ?? defaults.background),
+    cursor: normalizeHexColor(input?.cursor ?? defaults.cursor),
+    selectionBackground: normalizeHexColor(
+      input?.selectionBackground ?? defaults.selectionBackground
+    ),
+    selectionForeground: normalizeHexColor(
+      input?.selectionForeground ?? defaults.selectionForeground
+    ),
+    ansi: normalizeANSI(input?.ansi, defaults.ansi),
+  };
+}
+
+function mergePalette(
+  base: ResolvedWebHostTerminalPalette,
+  patch: WebHostTerminalPalette | undefined
+): WebHostTerminalPalette {
+  if (!patch) {
+    return base;
+  }
+
+  return {
+    ...base,
+    ...patch,
+    ansi: patch.ansi ? { ...base.ansi, ...patch.ansi } : base.ansi,
+  };
+}
+
+function normalizeANSI(
+  input: WebHostANSIColors | undefined,
+  defaults: Required<WebHostANSIColors>
+): Required<WebHostANSIColors> {
+  return {
+    black: normalizeHexColor(input?.black ?? defaults.black),
+    red: normalizeHexColor(input?.red ?? defaults.red),
+    green: normalizeHexColor(input?.green ?? defaults.green),
+    yellow: normalizeHexColor(input?.yellow ?? defaults.yellow),
+    blue: normalizeHexColor(input?.blue ?? defaults.blue),
+    magenta: normalizeHexColor(input?.magenta ?? defaults.magenta),
+    cyan: normalizeHexColor(input?.cyan ?? defaults.cyan),
+    white: normalizeHexColor(input?.white ?? defaults.white),
+    brightBlack: normalizeHexColor(input?.brightBlack ?? defaults.brightBlack),
+    brightRed: normalizeHexColor(input?.brightRed ?? defaults.brightRed),
+    brightGreen: normalizeHexColor(input?.brightGreen ?? defaults.brightGreen),
+    brightYellow: normalizeHexColor(input?.brightYellow ?? defaults.brightYellow),
+    brightBlue: normalizeHexColor(input?.brightBlue ?? defaults.brightBlue),
+    brightMagenta: normalizeHexColor(input?.brightMagenta ?? defaults.brightMagenta),
+    brightCyan: normalizeHexColor(input?.brightCyan ?? defaults.brightCyan),
+    brightWhite: normalizeHexColor(input?.brightWhite ?? defaults.brightWhite),
+  };
+}
+
+function normalizeTheme(
+  input: WebHostTerminalTheme | undefined,
+  palette: ResolvedWebHostTerminalPalette,
+  defaults: Required<WebHostTerminalTheme>
+): Required<WebHostTerminalTheme> {
+  const derived = themeFromPalette(palette, defaults);
+  return {
+    foreground: normalizeHexColor(input?.foreground ?? derived.foreground),
+    background: normalizeHexColor(input?.background ?? derived.background),
+    tint: normalizeHexColor(input?.tint ?? derived.tint),
+    separator: normalizeHexColor(input?.separator ?? derived.separator),
+    selection: normalizeHexColor(input?.selection ?? derived.selection),
+    placeholder: normalizeHexColor(input?.placeholder ?? derived.placeholder),
+    link: normalizeHexColor(input?.link ?? derived.link),
+    fill: normalizeHexColor(input?.fill ?? derived.fill),
+    windowBackground: normalizeHexColor(input?.windowBackground ?? derived.windowBackground),
+    success: normalizeHexColor(input?.success ?? derived.success),
+    warning: normalizeHexColor(input?.warning ?? derived.warning),
+    danger: normalizeHexColor(input?.danger ?? derived.danger),
+    info: normalizeHexColor(input?.info ?? derived.info),
+    muted: normalizeHexColor(input?.muted ?? derived.muted),
+  };
+}
+
+function themeFromPalette(
+  palette: ResolvedWebHostTerminalPalette,
+  defaults: Required<WebHostTerminalTheme>
+): Required<WebHostTerminalTheme> {
+  return {
+    foreground: palette.foreground,
+    background: palette.background,
+    tint: palette.cursor,
+    separator: palette.ansi.brightBlack,
+    selection: palette.selectionBackground,
+    placeholder: palette.ansi.brightBlack,
+    link: palette.ansi.blue,
+    fill: defaults.fill,
+    windowBackground: palette.background,
+    success: palette.ansi.green,
+    warning: palette.ansi.yellow,
+    danger: palette.ansi.red,
+    info: palette.ansi.cyan,
+    muted: palette.ansi.brightBlack,
+  };
+}
+
+function paletteToIndexedMap(
+  ansi: Required<WebHostANSIColors>
+): Record<string, string> {
+  return {
+    0: ansi.black,
+    1: ansi.red,
+    2: ansi.green,
+    3: ansi.yellow,
+    4: ansi.blue,
+    5: ansi.magenta,
+    6: ansi.cyan,
+    7: ansi.white,
+    8: ansi.brightBlack,
+    9: ansi.brightRed,
+    10: ansi.brightGreen,
+    11: ansi.brightYellow,
+    12: ansi.brightBlue,
+    13: ansi.brightMagenta,
+    14: ansi.brightCyan,
+    15: ansi.brightWhite,
+  };
+}
+
+function normalizeFontSize(fontSize: number): number {
+  return Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 14;
+}
+
+function normalizeOpacity(opacity: number): number {
+  if (!Number.isFinite(opacity)) {
+    return 1;
+  }
+
+  return Math.min(1, Math.max(0, opacity));
+}
+
+function normalizeHexColor(value: string): string {
+  const trimmed = value.trim();
+  const normalized = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  if (!/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(normalized)) {
+    throw new Error(`Invalid hex color: ${value}`);
+  }
+
+  return normalized.toLowerCase();
+}
+
+function hexToRgba(
+  color: string,
+  opacity: number
+): string {
+  const normalized = normalizeHexColor(color);
+  const alpha = normalizeOpacity(opacity);
+  const channels = parseHexColor(normalized);
+  if (!channels) {
+    return normalized;
+  }
+
+  const finalAlpha = Math.round(channels.alpha * alpha * 1000) / 1000;
+  return `rgba(${channels.red}, ${channels.green}, ${channels.blue}, ${finalAlpha})`;
+}
+
+function parseHexColor(
+  color: string
+): {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+} | undefined {
+  const hex = color.startsWith("#") ? color.slice(1) : color;
+  const normalized = hex.length === 3 || hex.length === 4
+    ? hex.split("").map((ch) => ch + ch).join("")
+    : hex;
+
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return undefined;
+  }
+
+  const red = Number.parseInt(normalized.slice(0, 2), 16);
+  const green = Number.parseInt(normalized.slice(2, 4), 16);
+  const blue = Number.parseInt(normalized.slice(4, 6), 16);
+  const alpha = normalized.length === 8
+    ? Number.parseInt(normalized.slice(6, 8), 16) / 255
+    : 1;
+  return { red, green, blue, alpha };
+}
+
+function contrastRatio(
+  foreground: string,
+  background: string
+): number {
+  const fg = relativeLuminance(foreground);
+  const bg = relativeLuminance(background);
+  const lighter = Math.max(fg, bg);
+  const darker = Math.min(fg, bg);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function relativeLuminance(color: string): number {
+  const channels = parseHexColor(normalizeHexColor(color));
+  if (!channels) {
+    return 0;
+  }
+
+  const toLinear = (channel: number) => {
+    const value = channel / 255;
+    return value <= 0.03928
+      ? value / 12.92
+      : ((value + 0.055) / 1.055) ** 2.4;
+  };
+
+  return 0.2126 * toLinear(channels.red) + 0.7152 * toLinear(channels.green)
+    + 0.0722 * toLinear(channels.blue);
+}
+
+function encodeBase64(value: string): string {
+  if (typeof btoa === "function") {
+    const bytes = new TextEncoder().encode(value);
+    let binary = "";
+    for (const byte of bytes) {
+      binary += String.fromCharCode(byte);
+    }
+    return btoa(binary);
+  }
+
+  return Buffer.from(value, "utf8").toString("base64");
+}
+
+function decodeBase64(value: string): string | undefined {
+  try {
+    if (typeof atob === "function") {
+      const binary = atob(value);
+      const bytes = new Uint8Array(binary.length);
+      for (let index = 0; index < binary.length; index += 1) {
+        bytes[index] = binary.charCodeAt(index);
+      }
+      return new TextDecoder().decode(bytes);
+    }
+
+    return Buffer.from(value, "base64").toString("utf8");
+  } catch {
+    return undefined;
+  }
+}

package/src/WebHostTestFixtures.ts

@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+
+export function transportFixture(
+  basename: string
+): string {
+  return readFileSync(
+    new URL(`../../../Fixtures/Transport/${basename}.txt`, import.meta.url),
+    "utf8"
+  ).replaceAll("\\u001E", "\u001E");
+}