@celestia-island/hikari 0.4.4

package/src/runtime/useToast.ts

@@ -0,0 +1,140 @@
+import { reactive } from "vue";
+
+import { scheduleCronAfter, type CronHandle } from "./cronBus";
+
+export type ToastType = "error" | "success" | "warning" | "info" | "loading";
+
+export const TOAST_DURATION: Record<ToastType, number> = {
+  error: 30_000,
+  warning: 30_000,
+  success: 3_000,
+  info: 3_000,
+  loading: 0,
+};
+
+export function isTransient(type: ToastType): boolean {
+  return type === "success" || type === "info";
+}
+
+export function defaultCopyable(type: ToastType): boolean {
+  return type === "error" || type === "warning";
+}
+
+export interface ToastMessage {
+  id: number;
+  text: string;
+}
+
+export interface ToastItem {
+  id: number;
+  type: ToastType;
+  messages: ToastMessage[];
+  duration?: number;
+  copyable?: boolean;
+}
+
+const state = reactive<{ toasts: ToastItem[] }>({ toasts: [] });
+
+let nextSlotId = 0;
+let nextMsgId = 0;
+
+const timers = new Map<number, CronHandle>();
+
+function clearTimer(slotId: number) {
+  const t = timers.get(slotId);
+  if (t !== undefined) {
+    t.disconnect();
+    timers.delete(slotId);
+  }
+}
+
+function removeSlot(slotId: number) {
+  const idx = state.toasts.findIndex((t) => t.id === slotId);
+  if (idx !== -1) state.toasts.splice(idx, 1);
+  clearTimer(slotId);
+}
+
+function scheduleAutoDismiss(slot: ToastItem) {
+  const duration = slot.duration ?? 0;
+  if (duration <= 0) return;
+  clearTimer(slot.id);
+  timers.set(
+    slot.id,
+    scheduleCronAfter(() => removeSlot(slot.id), duration),
+  );
+}
+
+function findSlot(type: ToastType): ToastItem | undefined {
+  return state.toasts.find((t) => t.type === type);
+}
+
+function push(
+  type: ToastType,
+  text: string,
+  options: { duration?: number; copyable?: boolean } = {},
+): number {
+  let slot = findSlot(type);
+  if (!slot) {
+    slot = {
+      id: ++nextSlotId,
+      type,
+      messages: [],
+      duration: options.duration ?? TOAST_DURATION[type],
+      copyable: options.copyable ?? defaultCopyable(type),
+    };
+    state.toasts.push(slot);
+  } else if (options.copyable === true && !slot.copyable) {
+    slot.copyable = true;
+  }
+  const msgId = ++nextMsgId;
+  slot.messages.push({ id: msgId, text });
+  scheduleAutoDismiss(slot);
+  return msgId;
+}
+
+export function useToast() {
+  function show(
+    message: string,
+    options: Partial<Omit<ToastItem, "id" | "messages">> = {},
+  ) {
+    const type = options.type || "info";
+    return push(type, message, {
+      duration: options.duration,
+      copyable: options.copyable,
+    });
+  }
+
+  function error(message: string, copyable = true) {
+    return push("error", message, { copyable });
+  }
+  function success(message: string) {
+    return push("success", message);
+  }
+  function warning(message: string) {
+    return push("warning", message);
+  }
+  function info(message: string) {
+    return push("info", message);
+  }
+  function loading(message: string, maxDuration = 0) {
+    const opts: { duration?: number } = {};
+    if (maxDuration > 0) opts.duration = maxDuration;
+    return push("loading", message, opts);
+  }
+
+  function remove(id: number) {
+    const slotById = state.toasts.find((t) => t.id === id);
+    if (slotById) {
+      removeSlot(slotById.id);
+      return;
+    }
+    for (const slot of state.toasts) {
+      if (slot.messages.some((m) => m.id === id)) {
+        removeSlot(slot.id);
+        return;
+      }
+    }
+  }
+
+  return { toasts: state.toasts, show, error, success, warning, info, loading, remove };
+}

package/src/styles/index.scss

@@ -0,0 +1,10 @@
+// Re-export shared hikari theme and component styles.
+// NOTE: The `../../../theme/...` and `../../../components/...` imports below
+// resolve relative to the monorepo root and work locally. When published to
+// npm, consumers who need the full hikari SCSS stack should import this file
+// from a monorepo checkout or bring their own SCSS load-path resolution.
+@use "../../../theme/styles/variables.scss";
+@use "../../../theme/styles/mixins.scss";
+@use "../../../theme/styles/foundation.scss";
+@use "../../../theme/styles/themes.scss";
+@use "../../../components/src/styles/index.scss";

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export { initTheme, useTheme } from "./useTheme";
+export { themePresets, tokensToCSSVars, getThemeTokens, loadCustomThemes, saveCustomThemes, addCustomTheme, removeCustomTheme } from "./presets";
+export type { ThemeTokenRGB, ThemeSchemeTokens, ThemePreset, CustomThemePreset, ThemeId, ThemeMode } from "./presets";
+export { getTimePeriod, getGeolocation, solarAltitude, DEFAULT_GEO_LOCATION } from "./useSolarTime";
+export type { TimePeriod } from "./useSolarTime";

package/src/theme/presets.ts

@@ -0,0 +1,307 @@
+export interface ThemeTokenRGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface ThemeSchemeTokens {
+  primary: ThemeTokenRGB;
+  secondary: ThemeTokenRGB;
+  accent: ThemeTokenRGB;
+  text: ThemeTokenRGB;
+  muted: ThemeTokenRGB;
+  border: ThemeTokenRGB;
+  focusedBorder: ThemeTokenRGB;
+  background: ThemeTokenRGB;
+  surface: ThemeTokenRGB;
+  selectedBackground: ThemeTokenRGB;
+  selectedText: ThemeTokenRGB;
+  statusBarBackground: ThemeTokenRGB;
+  success: ThemeTokenRGB;
+  error: ThemeTokenRGB;
+  warning: ThemeTokenRGB;
+  info: ThemeTokenRGB;
+}
+
+export interface ThemePreset {
+  id: string;
+  name: string;
+  dark: ThemeSchemeTokens;
+  light: ThemeSchemeTokens;
+}
+
+export type ThemeId = string;
+export type ThemeMode = "system" | "light" | "dark";
+
+export interface CustomThemePreset {
+  id: string;
+  name: string;
+  dark: ThemeSchemeTokens;
+  light: ThemeSchemeTokens;
+}
+
+const CUSTOM_STORAGE_KEY = "hikari-custom-themes";
+
+export function loadCustomThemes(): CustomThemePreset[] {
+  try {
+    const raw = localStorage.getItem(CUSTOM_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveCustomThemes(list: CustomThemePreset[]) {
+  localStorage.setItem(CUSTOM_STORAGE_KEY, JSON.stringify(list));
+}
+
+export function addCustomTheme(theme: CustomThemePreset) {
+  const list = loadCustomThemes();
+  const idx = list.findIndex((t) => t.id === theme.id);
+  if (idx >= 0) {
+    list[idx] = theme;
+  } else {
+    list.push(theme);
+  }
+  saveCustomThemes(list);
+}
+
+export function removeCustomTheme(id: string) {
+  const list = loadCustomThemes().filter((t) => t.id !== id);
+  saveCustomThemes(list);
+}
+
+const rgb = (r: number, g: number, b: number): ThemeTokenRGB => ({ r, g, b });
+
+export const themePresets: Record<ThemeId, ThemePreset> = {
+  synthwave84: {
+    id: "synthwave84",
+    name: "Synthwave '84",
+    dark: {
+      primary: rgb(255, 107, 157),
+      secondary: rgb(199, 146, 234),
+      accent: rgb(253, 235, 139),
+      text: rgb(228, 228, 231),
+      muted: rgb(180, 180, 180),
+      border: rgb(255, 255, 255),
+      focusedBorder: rgb(255, 107, 157),
+      background: rgb(14, 14, 30),
+      surface: rgb(24, 24, 42),
+      selectedBackground: rgb(70, 70, 85),
+      selectedText: rgb(240, 240, 240),
+      statusBarBackground: rgb(24, 24, 42),
+      success: rgb(114, 241, 184),
+      error: rgb(255, 107, 107),
+      warning: rgb(253, 235, 139),
+      info: rgb(110, 231, 239),
+    },
+    light: {
+      primary: rgb(214, 51, 132),
+      secondary: rgb(156, 106, 222),
+      accent: rgb(230, 167, 0),
+      text: rgb(30, 30, 30),
+      muted: rgb(80, 80, 80),
+      border: rgb(0, 0, 0),
+      focusedBorder: rgb(214, 51, 132),
+      background: rgb(245, 245, 240),
+      surface: rgb(255, 255, 255),
+      selectedBackground: rgb(200, 200, 205),
+      selectedText: rgb(40, 40, 45),
+      statusBarBackground: rgb(230, 230, 225),
+      success: rgb(16, 185, 129),
+      error: rgb(239, 68, 68),
+      warning: rgb(245, 158, 11),
+      info: rgb(6, 182, 212),
+    },
+  },
+  nord: {
+    id: "nord",
+    name: "Nord",
+    dark: {
+      primary: rgb(136, 192, 208),
+      secondary: rgb(143, 188, 187),
+      accent: rgb(94, 129, 172),
+      text: rgb(236, 239, 244),
+      muted: rgb(180, 180, 180),
+      border: rgb(255, 255, 255),
+      focusedBorder: rgb(136, 192, 208),
+      background: rgb(22, 27, 38),
+      surface: rgb(34, 40, 54),
+      selectedBackground: rgb(70, 70, 85),
+      selectedText: rgb(240, 240, 240),
+      statusBarBackground: rgb(34, 40, 54),
+      success: rgb(163, 190, 140),
+      error: rgb(191, 97, 106),
+      warning: rgb(208, 135, 112),
+      info: rgb(136, 192, 208),
+    },
+    light: {
+      primary: rgb(94, 129, 172),
+      secondary: rgb(136, 192, 208),
+      accent: rgb(143, 188, 187),
+      text: rgb(30, 30, 30),
+      muted: rgb(80, 80, 80),
+      border: rgb(0, 0, 0),
+      focusedBorder: rgb(94, 129, 172),
+      background: rgb(236, 239, 244),
+      surface: rgb(229, 233, 240),
+      selectedBackground: rgb(200, 200, 205),
+      selectedText: rgb(40, 40, 45),
+      statusBarBackground: rgb(220, 224, 232),
+      success: rgb(163, 190, 140),
+      error: rgb(191, 97, 106),
+      warning: rgb(208, 135, 112),
+      info: rgb(136, 192, 208),
+    },
+  },
+  gruvbox: {
+    id: "gruvbox",
+    name: "Gruvbox",
+    dark: {
+      primary: rgb(251, 189, 84),
+      secondary: rgb(177, 161, 134),
+      accent: rgb(214, 160, 115),
+      text: rgb(235, 219, 178),
+      muted: rgb(180, 180, 180),
+      border: rgb(255, 255, 255),
+      focusedBorder: rgb(251, 189, 84),
+      background: rgb(20, 20, 20),
+      surface: rgb(34, 32, 30),
+      selectedBackground: rgb(70, 70, 85),
+      selectedText: rgb(240, 240, 240),
+      statusBarBackground: rgb(34, 32, 30),
+      success: rgb(169, 195, 85),
+      error: rgb(251, 118, 118),
+      warning: rgb(251, 189, 84),
+      info: rgb(131, 191, 152),
+    },
+    light: {
+      primary: rgb(204, 128, 49),
+      secondary: rgb(168, 135, 81),
+      accent: rgb(186, 128, 82),
+      text: rgb(30, 30, 30),
+      muted: rgb(80, 80, 80),
+      border: rgb(0, 0, 0),
+      focusedBorder: rgb(204, 128, 49),
+      background: rgb(251, 241, 199),
+      surface: rgb(242, 229, 188),
+      selectedBackground: rgb(200, 200, 205),
+      selectedText: rgb(40, 40, 45),
+      statusBarBackground: rgb(235, 225, 185),
+      success: rgb(121, 153, 50),
+      error: rgb(204, 69, 57),
+      warning: rgb(204, 128, 49),
+      info: rgb(70, 120, 104),
+    },
+  },
+  tokyonight: {
+    id: "tokyonight",
+    name: "Tokyo Night",
+    dark: {
+      primary: rgb(122, 162, 247),
+      secondary: rgb(125, 207, 255),
+      accent: rgb(247, 118, 142),
+      text: rgb(192, 202, 245),
+      muted: rgb(180, 180, 180),
+      border: rgb(255, 255, 255),
+      focusedBorder: rgb(122, 162, 247),
+      background: rgb(14, 15, 24),
+      surface: rgb(22, 24, 36),
+      selectedBackground: rgb(70, 70, 85),
+      selectedText: rgb(240, 240, 240),
+      statusBarBackground: rgb(22, 24, 36),
+      success: rgb(158, 206, 106),
+      error: rgb(247, 118, 142),
+      warning: rgb(255, 183, 87),
+      info: rgb(125, 207, 255),
+    },
+    light: {
+      primary: rgb(52, 96, 189),
+      secondary: rgb(56, 157, 192),
+      accent: rgb(225, 72, 96),
+      text: rgb(30, 30, 30),
+      muted: rgb(80, 80, 80),
+      border: rgb(0, 0, 0),
+      focusedBorder: rgb(52, 96, 189),
+      background: rgb(231, 233, 241),
+      surface: rgb(221, 223, 231),
+      selectedBackground: rgb(200, 200, 205),
+      selectedText: rgb(40, 40, 45),
+      statusBarBackground: rgb(215, 217, 227),
+      success: rgb(86, 159, 86),
+      error: rgb(225, 72, 96),
+      warning: rgb(206, 145, 60),
+      info: rgb(56, 157, 192),
+    },
+  },
+};
+
+export type ThemeTokens = ThemeSchemeTokens;
+
+export function getThemeTokens(
+  name: string,
+  mode: string,
+): ThemeSchemeTokens | null {
+  const preset = themePresets[name as keyof typeof themePresets];
+  if (preset) return mode === "dark" ? preset.dark : preset.light;
+  return null;
+}
+
+function contrastColor({ r, g, b }: ThemeTokenRGB): ThemeTokenRGB {
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance > 0.55 ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 };
+}
+
+function mixToken(a: ThemeTokenRGB, b: ThemeTokenRGB, t: number): ThemeTokenRGB {
+  return {
+    r: Math.round(a.r + (b.r - a.r) * t),
+    g: Math.round(a.g + (b.g - a.g) * t),
+    b: Math.round(a.b + (b.b - a.b) * t),
+  };
+}
+
+export function tokensToCSSVars(
+  tokens: ThemeSchemeTokens,
+): Record<string, string> {
+  const onPrimary = contrastColor(tokens.primary);
+  const textSecondary = mixToken(tokens.text, tokens.muted, 0.25);
+  return {
+    "--color-primary": `${tokens.primary.r} ${tokens.primary.g} ${tokens.primary.b}`,
+    "--color-on-primary": `${onPrimary.r} ${onPrimary.g} ${onPrimary.b}`,
+    "--color-on-solid": "255 255 255",
+    "--color-secondary": `${tokens.secondary.r} ${tokens.secondary.g} ${tokens.secondary.b}`,
+    "--color-accent": `${tokens.accent.r} ${tokens.accent.g} ${tokens.accent.b}`,
+    "--color-text": `${tokens.text.r} ${tokens.text.g} ${tokens.text.b}`,
+    "--color-text-secondary": `${textSecondary.r} ${textSecondary.g} ${textSecondary.b}`,
+    "--color-muted": `${tokens.muted.r} ${tokens.muted.g} ${tokens.muted.b}`,
+    "--color-border": `${tokens.border.r} ${tokens.border.g} ${tokens.border.b}`,
+    "--color-focused-border": `${tokens.focusedBorder.r} ${tokens.focusedBorder.g} ${tokens.focusedBorder.b}`,
+    "--color-background": `${tokens.background.r} ${tokens.background.g} ${tokens.background.b}`,
+    "--color-surface": `${tokens.surface.r} ${tokens.surface.g} ${tokens.surface.b}`,
+    "--color-selected-bg": `${tokens.selectedBackground.r} ${tokens.selectedBackground.g} ${tokens.selectedBackground.b}`,
+    "--color-selected-text": `${tokens.selectedText.r} ${tokens.selectedText.g} ${tokens.selectedText.b}`,
+    "--color-status-bar-bg": `${tokens.statusBarBackground.r} ${tokens.statusBarBackground.g} ${tokens.statusBarBackground.b}`,
+    "--color-success": `${tokens.success.r} ${tokens.success.g} ${tokens.success.b}`,
+    "--color-error": `${tokens.error.r} ${tokens.error.g} ${tokens.error.b}`,
+    "--color-warning": `${tokens.warning.r} ${tokens.warning.g} ${tokens.warning.b}`,
+    "--color-info": `${tokens.info.r} ${tokens.info.g} ${tokens.info.b}`,
+    "--hi-color-primary": "rgb(var(--color-primary))",
+    "--hi-color-secondary": "rgb(var(--color-secondary))",
+    "--hi-color-surface": "rgb(var(--color-surface))",
+    "--hi-color-background": "rgb(var(--color-background))",
+    "--hi-color-border": "rgb(var(--color-border))",
+    "--hi-color-text-primary": "rgb(var(--color-text))",
+    "--hi-color-text-secondary": "rgb(var(--color-text-secondary))",
+    "--hi-color-muted": "rgb(var(--color-muted))",
+    "--hi-color-on-primary": "rgb(var(--color-on-primary))",
+    "--hi-color-text-on-primary": "rgb(var(--color-on-primary))",
+    "--hi-color-success": "rgb(var(--color-success))",
+    "--hi-color-error": "rgb(var(--color-error))",
+    "--hi-color-warning": "rgb(var(--color-warning))",
+    "--hi-color-info": "rgb(var(--color-info))",
+    "--hi-color-bg-subtle": "rgb(var(--color-surface) / 0.5)",
+    "--hi-color-bg-elevated": "rgb(var(--color-surface))",
+    "--hi-color-bg-canvas": "rgb(var(--color-background))",
+    "--hi-secondary-bg": "rgb(var(--color-surface) / 0.5)",
+  };
+}

package/src/theme/theme.scss

@@ -0,0 +1,17 @@
+// Essential theme CSS variables for hikari-vue components
+// Color/radius/space/text tokens are NOT defined here —
+// they come from the consumer's theme bridge.
+// Component SCSS has fallback values in every var() call.
+
+:root {
+  --hi-z-above: 1;
+  --hi-z-tooltip: 10000;
+}
+
+[data-mode="dark"] body {
+  color-scheme: dark;
+}
+
+[data-mode="light"] body {
+  color-scheme: light;
+}

package/src/theme/useBackgroundLuminance.ts

@@ -0,0 +1,145 @@
+import { onceFrame, onFrame, type AnimationHandle } from "../runtime/animationBus";
+
+const CVAR = "--float-text-color";
+const CVAR_BADGE = "--float-badge-color";
+
+let handle: AnimationHandle | null = null;
+let cachedText: string | null = null;
+let cachedPrimary: string | null = null;
+let pendingPBO: { buffer: WebGLBuffer; gl: WebGL2RenderingContext } | null = null;
+
+function luminance(r: number, g: number, b: number): number {
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+
+function applyLuminance(lum: number) {
+  const el = document.documentElement;
+  if (lum < 0.45) {
+    el.style.setProperty(CVAR, "255, 255, 255");
+    el.style.setProperty(CVAR_BADGE, "255, 255, 255");
+  } else {
+    if (cachedText === null || cachedPrimary === null) {
+      const cs = getComputedStyle(el);
+      cachedText = cs.getPropertyValue("--color-text").trim();
+      cachedPrimary = cs.getPropertyValue("--color-primary").trim();
+    }
+    el.style.setProperty(CVAR, cachedText);
+    el.style.setProperty(CVAR_BADGE, cachedPrimary);
+  }
+}
+
+function sampleShader(): boolean {
+  const canvas = document.getElementById("s-wallpaper-canvas") as HTMLCanvasElement | null;
+  if (!canvas) return false;
+  const gl = canvas.getContext("webgl2");
+  if (!gl) return false;
+
+  let applied = false;
+
+  if (pendingPBO && pendingPBO.gl === gl) {
+    try {
+      const data = new Uint8Array(4);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pendingPBO.buffer);
+      gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data, 0, 4);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+      gl.deleteBuffer(pendingPBO.buffer);
+      applyLuminance(luminance(data[0], data[1], data[2]));
+      applied = true;
+    } catch {
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+      gl.deleteBuffer(pendingPBO.buffer);
+    }
+  }
+  pendingPBO = null;
+
+  const pbo = gl.createBuffer();
+  if (pbo) {
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo);
+    gl.bufferData(gl.PIXEL_PACK_BUFFER, 4, gl.STREAM_READ);
+    const cx = Math.floor(canvas.width / 2);
+    const cy = Math.floor(canvas.height / 2);
+    gl.readPixels(cx, cy, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, 0);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    pendingPBO = { buffer: pbo, gl };
+  }
+
+  return applied;
+}
+
+function sampleMedia(el: HTMLImageElement | HTMLVideoElement): boolean {
+  try {
+    let w: number, h: number;
+    if (el instanceof HTMLImageElement) {
+      w = el.naturalWidth || 1;
+      h = el.naturalHeight || 1;
+    } else {
+      w = el.videoWidth || 1;
+      h = el.videoHeight || 1;
+    }
+    w = Math.min(w, 64);
+    h = Math.min(h, 64);
+    const c = document.createElement("canvas");
+    c.width = 1;
+    c.height = 1;
+    const ctx = c.getContext("2d");
+    if (!ctx) return false;
+    ctx.drawImage(el, w / 2, h / 2, 1, 1, 0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    applyLuminance(luminance(r, g, b));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function sampleFromBodyBg(): boolean {
+  const raw = getComputedStyle(document.body).backgroundColor;
+  const m = raw.match(/\d+/g);
+  if (!m || m.length < 3) return false;
+  applyLuminance(luminance(+m[0], +m[1], +m[2]));
+  return true;
+}
+
+function sampleFrame() {
+  if (sampleShader()) return;
+  const video = document.getElementById("s-wallpaper-video") as HTMLVideoElement | null;
+  if (video && video.readyState >= 2 && sampleMedia(video)) return;
+  const bgImg = getComputedStyle(document.body).backgroundImage;
+  if (bgImg && bgImg !== "none") {
+    const urlMatch = bgImg.match(/url\(["']?(.*?)["']?\)/);
+    if (urlMatch) {
+      const img = document.createElement("img");
+      img.crossOrigin = "anonymous";
+      img.src = urlMatch[1];
+      img.onload = () => { sampleMedia(img); };
+      return;
+    }
+  }
+  sampleFromBodyBg();
+}
+
+export function startLuminanceSampler() {
+  stopLuminanceSampler();
+  sampleFrame();
+  handle = onFrame(() => sampleFrame(), "idle");
+}
+
+export function stopLuminanceSampler() {
+  if (handle) {
+    handle.disconnect();
+    handle = null;
+  }
+  if (pendingPBO) {
+    try { pendingPBO.gl.deleteBuffer(pendingPBO.buffer); } catch {}
+    pendingPBO = null;
+  }
+}
+
+export function sampleLuminanceNow() {
+  onceFrame(() => sampleFrame());
+}
+
+export function invalidateLuminanceCache() {
+  cachedText = null;
+  cachedPrimary = null;
+}