SnowLuma v2.4.2 source snapshot

packages/webui/src/appearance/registry.ts

@@ -0,0 +1,29 @@
+import type { WebuiPresentation, WebuiTarget } from '@snowluma/common/webui-target';
+import type { UiAppearance } from '@/types';
+
+export interface TargetAppearance {
+    css: string;
+    licenseUrl?: string;
+    resolve: (saved: UiAppearance, presentation: WebuiPresentation) => UiAppearance;
+}
+
+export function resolveAppearance(
+    saved: UiAppearance,
+    presentation: WebuiPresentation | null,
+    target: TargetAppearance | null,
+): UiAppearance {
+    if (!presentation) {
+        return saved;
+    }
+
+    if (!target) {
+        throw new Error('Target appearance must be prepared before mounting ThemeProvider');
+    }
+
+    return target.resolve(saved, presentation);
+}
+
+// Exhaustive: adding a shared target requires a frontend implementation here.
+export const targetLoaders = {
+    maibot: () => import('./targets/maibot').then((module) => module.maibotAppearance),
+} satisfies Record<WebuiTarget, () => Promise<TargetAppearance>>;

packages/webui/src/appearance/runtime.ts

@@ -0,0 +1,104 @@
+import {
+    parseWebuiPresentation,
+    WEBUI_PRESENTATION_EVENT,
+    WEBUI_TARGET_BOOTSTRAP_ID,
+    type WebuiPresentation,
+} from '@snowluma/common/webui-target';
+import { createPresentationStore, type PresentationStore } from './store';
+import { targetLoaders, type TargetAppearance } from './registry';
+
+declare global {
+    interface Window {
+        /** The embedding host sets this before dispatching WEBUI_PRESENTATION_EVENT. */
+        __SNOWLUMA_HOST_APPEARANCE__?: unknown;
+    }
+}
+
+const bootstrap =
+    typeof document === 'undefined' ? null : document.getElementById(WEBUI_TARGET_BOOTSTRAP_ID);
+const initial = bootstrap
+    ? parseWebuiPresentation(JSON.parse(bootstrap.textContent || 'null'))
+    : null;
+export const presentationStore = createPresentationStore(initial?.target ?? null);
+let targetAppearance: TargetAppearance | null = null;
+
+function acceptHostValue(store: PresentationStore, value: unknown): void {
+    try {
+        store.receive(value);
+    } catch (error) {
+        // Reject only the bad update; keep the last valid presentation and expose the failure.
+        console.error('[SnowLuma appearance] Rejected host update', error);
+    }
+}
+
+export function subscribeHostAppearance(host: Window, store: PresentationStore): () => void {
+    if (store.target === null) {
+        return () => {};
+    }
+
+    const receive = (event: Event) =>
+        acceptHostValue(store, (event as CustomEvent<unknown>).detail);
+    host.addEventListener(WEBUI_PRESENTATION_EVENT, receive);
+
+    // Covers messages sent before React subscribed, including while the lazy CSS was loading.
+    if (host.__SNOWLUMA_HOST_APPEARANCE__ !== undefined) {
+        acceptHostValue(store, host.__SNOWLUMA_HOST_APPEARANCE__);
+    }
+
+    return () => host.removeEventListener(WEBUI_PRESENTATION_EVENT, receive);
+}
+
+export function applyPresentationAttributes(presentation: WebuiPresentation | null): void {
+    const root = document.documentElement;
+
+    if (presentation) {
+        root.dataset.webuiTarget = presentation.target;
+        root.dataset.webuiStyle = presentation.style;
+    } else {
+        delete root.dataset.webuiTarget;
+        delete root.dataset.webuiStyle;
+    }
+}
+
+export function getTargetAppearance(): TargetAppearance | null {
+    return targetAppearance;
+}
+
+/** Called before mounting React; standalone deployments do not load any target assets. */
+export async function prepareTargetAppearance(): Promise<void> {
+    const target = presentationStore.target;
+
+    if (target === null) {
+        return;
+    }
+
+    targetAppearance = await targetLoaders[target]();
+    const style = document.createElement('style');
+    style.id = 'snowluma-target-styles';
+    style.textContent = targetAppearance.css;
+    document.head.appendChild(style);
+
+    if (targetAppearance.licenseUrl) {
+        const license = document.createElement('link');
+        license.rel = 'license';
+        license.href = targetAppearance.licenseUrl;
+        document.head.appendChild(license);
+    }
+
+    if (window.__SNOWLUMA_HOST_APPEARANCE__ !== undefined) {
+        acceptHostValue(presentationStore, window.__SNOWLUMA_HOST_APPEARANCE__);
+    }
+
+    const presentation = presentationStore.getSnapshot();
+    applyPresentationAttributes(presentation);
+
+    if (presentation) {
+        const dark =
+            presentation.mode === 'system'
+                ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                : presentation.mode === 'dark';
+        document.documentElement.classList.toggle('dark', dark);
+        document.documentElement.classList.toggle('light', !dark);
+        document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
+    }
+}

packages/webui/src/appearance/store.ts

@@ -0,0 +1,51 @@
+import {
+    defaultWebuiPresentation,
+    parseWebuiPresentation,
+    type WebuiPresentation,
+    type WebuiTarget,
+} from '@snowluma/common/webui-target';
+
+/** Synchronous snapshots avoid stale async style loads winning a rapid host theme change. */
+export function createPresentationStore(target: WebuiTarget | null) {
+    let snapshot: WebuiPresentation | null = target ? defaultWebuiPresentation(target) : null;
+    const listeners = new Set<() => void>();
+
+    return {
+        target,
+        getSnapshot: () => snapshot,
+        subscribe(listener: () => void) {
+            if (target) {
+                listeners.add(listener);
+            }
+
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        receive(value: unknown) {
+            // Host code cannot opt a standalone deployment into a target.
+            if (target === null) {
+                return;
+            }
+
+            const update = parseWebuiPresentation(value);
+
+            if (update.target !== null && update.target !== target) {
+                throw new Error(
+                    `Host appearance target does not match deployment target ${target}`,
+                );
+            }
+
+            const next = update.target === null ? null : update;
+
+            if (JSON.stringify(next) === JSON.stringify(snapshot)) {
+                return;
+            }
+
+            snapshot = next;
+            listeners.forEach((listener) => listener());
+        },
+    };
+}
+
+export type PresentationStore = ReturnType<typeof createPresentationStore>;

packages/webui/src/appearance/targets/assets/Jersey20-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Soft Type Project Authors (https://github.com/scfried/soft-type-jersey)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

packages/webui/src/appearance/targets/maibot.css

@@ -0,0 +1,233 @@
+/* MaiBot millennium: plastic case, recessed screen, raised keys.
+   Only loaded for this target; every rule remains scoped so release is reversible. */
+@font-face {
+  font-family: "SnowLuma Jersey 20";
+  src: url("./assets/Jersey20-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 118%;
+  unicode-range: U+0000-024F;
+}
+
+html[data-webui-target="maibot"] {
+  --mil-shell: #ddd4bf;
+  --mil-panel: #ebe4d2;
+  --mil-hi: #f6f1e3;
+  --mil-lo: #bdb39c;
+  --mil-drop: #9c927b;
+  --mil-line: #5a544a;
+  --mil-ink: #4a443a;
+  --mil-print: #5f5849;
+  --mil-screen: #fbf9f0;
+  --mil-screen-ink: #3a3833;
+  --mil-key: #f3eee1;
+  --mil-key-side: #c2b8a1;
+  --mil-key-hi: #fffaf0;
+  --mil-key-hover: #fbf7ec;
+  --mil-on: #8fd6a0;
+  --mil-on-ink: #2f3a2b;
+  --mil-on-side: #5fa873;
+  --mil-accent-text: #236b43;
+
+  --background: var(--mil-shell);
+  --foreground: var(--mil-ink);
+  --card: var(--mil-panel);
+  --card-foreground: var(--mil-ink);
+  --popover: var(--mil-panel);
+  --popover-foreground: var(--mil-ink);
+  --primary: var(--mil-accent-text);
+  --primary-foreground: var(--mil-screen);
+  --secondary: var(--mil-key);
+  --secondary-foreground: var(--mil-ink);
+  --muted: var(--mil-shell);
+  --muted-foreground: var(--mil-print);
+  --accent: var(--mil-on);
+  --accent-foreground: var(--mil-on-ink);
+  --destructive: #b53724;
+  --destructive-foreground: #fffaf0;
+  --success: #2a7d50;
+  --warning: #8f4f18;
+  --log-info: #315b7c;
+  --log-success: #2a7d50;
+  --log-warn: #8f4f18;
+  --log-error: #b53724;
+  --border: var(--mil-lo);
+  --input: var(--mil-screen);
+  --ring: var(--mil-accent-text);
+  --sidebar: var(--mil-panel);
+  --sidebar-foreground: var(--mil-ink);
+  --sidebar-primary: var(--mil-accent-text);
+  --sidebar-primary-foreground: var(--mil-screen);
+  --sidebar-accent: var(--mil-on);
+  --sidebar-accent-foreground: var(--mil-on-ink);
+  --sidebar-border: var(--mil-lo);
+  --sidebar-ring: var(--mil-accent-text);
+  --shadow-card: inset 1px 1px var(--mil-hi), inset -1px -1px var(--mil-lo), 0 3px 0 var(--mil-drop);
+  --mil-key-shadow: inset 1px 1px var(--mil-key-hi), inset -1px -1px var(--mil-key-side), 0 2px 0 var(--mil-key-side);
+  --mil-screen-shadow: inset 1px 1px 2px var(--mil-lo), inset -1px -1px var(--mil-hi);
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+}
+
+html[data-webui-target="maibot"].dark {
+  --mil-shell: #2f2c28;
+  --mil-panel: #3a3631;
+  --mil-hi: #4a453f;
+  --mil-lo: #2a2723;
+  --mil-drop: #1d1b18;
+  --mil-line: #171513;
+  --mil-ink: #ebe4d2;
+  --mil-print: #b5ad9a;
+  --mil-screen: #1e221e;
+  --mil-screen-ink: #e8e2cf;
+  --mil-key: #4d4841;
+  --mil-key-side: #2e2b27;
+  --mil-key-hi: #60594f;
+  --mil-key-hover: #595249;
+  --mil-accent-text: #8fd6a0;
+  --primary-foreground: #2f3a2b;
+  --sidebar-primary-foreground: #2f3a2b;
+  --border: #746c5d;
+  --sidebar-border: #746c5d;
+  --destructive: #f08a77;
+  --destructive-foreground: #352019;
+  --success: #8fd6a0;
+  --warning: #e5b278;
+  --log-info: #99bdd8;
+  --log-success: #8fd6a0;
+  --log-warn: #e5b278;
+  --log-error: #f08a77;
+}
+
+/* Preserve accessibility preferences above both target palettes. */
+html[data-webui-target="maibot"][data-contrast="high"] {
+  --border: var(--mil-ink);
+  --sidebar-border: var(--mil-ink);
+  --muted-foreground: var(--mil-ink);
+}
+
+html[data-webui-target="maibot"] :is(.ui-card, [data-ui-surface="panel"], [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"]) {
+  border: 1px solid var(--mil-line);
+  border-radius: 0;
+  background: var(--mil-panel);
+  color: var(--mil-ink);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: none;
+}
+
+html[data-webui-target="maibot"] [data-ui-surface="chrome"] {
+  background: var(--mil-panel);
+  box-shadow: inset 1px 1px var(--mil-hi), inset -1px -1px var(--mil-lo);
+}
+
+html[data-webui-target="maibot"] [data-ui-surface="canvas"] {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* The desktop rail clips a fixed-width inner sidebar. Its separator must
+   belong to the animated outer edge, not the clipped inner panel. */
+html[data-webui-target="maibot"] [data-ui-surface="sidebar"] {
+  border-inline-end: 1px solid var(--sidebar-border);
+}
+
+html[data-webui-target="maibot"] :is([data-ui-control], pre, table) {
+  border-radius: 0;
+  background: var(--mil-screen);
+  color: var(--mil-screen-ink);
+  box-shadow: var(--mil-screen-shadow);
+  caret-color: var(--mil-accent-text);
+}
+
+html[data-webui-target="maibot"] :is([data-ui-control], input, textarea):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+html[data-webui-target="maibot"] :is(.ui-button, [role="tab"], .ui-nav-item) {
+  border: 1px solid var(--mil-line);
+  border-radius: 0;
+  background: var(--mil-key);
+  color: var(--mil-ink);
+  box-shadow: var(--mil-key-shadow);
+}
+
+html[data-webui-target="maibot"] :is(.ui-button, [role="tab"], .ui-nav-item):hover:not(:disabled) {
+  background: var(--mil-key-hover);
+}
+
+/* Keep the whole keycap inside the collapsed rail instead of cropping the
+   expanded key's right edge. Text stays mounted and retains its nowrap rules. */
+html[data-webui-target="maibot"] nav[data-collapsed="true"] .ui-nav-item {
+  width: 3rem;
+}
+
+html[data-webui-target="maibot"] :is(.ui-button[data-variant="default"], [role="tab"][aria-selected="true"], .ui-nav-item[aria-current="page"]) {
+  background: var(--mil-on);
+  color: var(--mil-on-ink);
+  box-shadow: inset 1px 1px #c1ebcb, inset -1px -1px var(--mil-on-side), 0 2px 0 var(--mil-on-side);
+}
+
+html[data-webui-target="maibot"] .ui-button[data-variant="destructive"] {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+html[data-webui-target="maibot"] .ui-button[data-variant="default"]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mil-on) 85%, var(--mil-key-hi));
+}
+
+html[data-webui-target="maibot"] .ui-button[data-variant="destructive"]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--destructive) 90%, var(--mil-ink));
+}
+
+html[data-webui-target="maibot"] .ui-button:is([data-variant="ghost"], [data-variant="link"]) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+html[data-webui-target="maibot"] :is(.ui-button, [role="tab"], .ui-nav-item):active:not(:disabled) {
+  box-shadow: var(--mil-screen-shadow);
+  scale: 1;
+}
+
+html[data-webui-target="maibot"] .ui-nav-item[aria-current="page"] :is(svg, span) {
+  color: var(--mil-on-ink);
+}
+
+html[data-webui-target="maibot"] .ui-nav-highlight {
+  display: none;
+}
+
+html[data-webui-target="maibot"] .ui-segmented {
+  border-radius: 0;
+  background: var(--mil-screen);
+  box-shadow: var(--mil-screen-shadow);
+}
+
+html[data-webui-target="maibot"] .ui-segmented-thumb {
+  border-radius: 0;
+  background: var(--mil-on);
+  box-shadow: var(--mil-key-shadow);
+}
+
+html[data-webui-target="maibot"] .ui-segmented-thumb span {
+  color: var(--mil-on-ink);
+}
+
+html[data-webui-target="maibot"] [data-ui-decoration] {
+  display: none;
+}
+
+html[data-webui-target="maibot"] ::selection {
+  background: var(--mil-on);
+  color: var(--mil-on-ink);
+}
+
+html[data-webui-target="maibot"] * {
+  scrollbar-color: var(--mil-print) var(--mil-shell);
+}

packages/webui/src/appearance/targets/maibot.ts

@@ -0,0 +1,27 @@
+import type { TargetAppearance } from '../registry';
+import css from './maibot.css?inline';
+import licenseUrl from './assets/Jersey20-OFL.txt?url';
+
+export const maibotAppearance: TargetAppearance = {
+    css,
+    licenseUrl,
+    resolve: (saved, presentation) => ({
+        ...saved,
+        mode: presentation.mode,
+        palette: 'default',
+        accentMode: 'preset',
+        accentScope: 'global',
+        darkIntensity: 'soft',
+        sidebarStyle: 'follow',
+        background: { ...saved.background, type: 'none' },
+        fontSans: 'custom',
+        fontSansCustom:
+            '"SnowLuma Jersey 20", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif',
+        fontMono: 'default',
+        fontMonoCustom: '',
+        radius: 0,
+        customCss: '',
+        cssVars: {},
+        customPointerSystem: false,
+    }),
+};