@warkypublic/svelix 0.1.17 → 0.1.18

package/dist/components/ContentEditor/ContentEditor.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { ContentEditorProps } from "./types.js";
+  import { getEditorType } from "./utils.js";
+  import MonacoEditor from "./subcomponents/MonacoEditor.svelte";
+  import ImageViewer from "./subcomponents/ImageViewer.svelte";
+  import AudioPlayer from "./subcomponents/AudioPlayer.svelte";
+  import VideoPlayer from "./subcomponents/VideoPlayer.svelte";
+  import TextEditor from "./subcomponents/TextEditor.svelte";
+  import MarkdownViewer from "./subcomponents/MarkdownViewer.svelte";
+  import PdfViewer from "./subcomponents/PdfViewer.svelte";
+  import EmailViewer from "./subcomponents/EmailViewer.svelte";
+  import ZipViewer from "./subcomponents/ZipViewer.svelte";
+  import CollaboraEditor from "./subcomponents/CollaboraEditor.svelte";
+  import UnknownFile from "./subcomponents/UnknownFile.svelte";
+
+  let {
+    value,
+    filename,
+    contentType,
+    mode = "value",
+    readonly = false,
+    onChange,
+    onSave,
+    onUpload,
+    wopiUrl,
+    discoverUrl,
+    wopiToken,
+    userid,
+    username,
+    viewtype,
+  }: ContentEditorProps = $props();
+
+  const editorType = $derived(getEditorType({ filename, contentType }));
+
+  $effect(() => {
+    if (mode === "filepointer") {
+      console.warn(
+        '[ContentEditor] mode="filepointer" is not yet implemented; falling back to value mode.',
+      );
+    }
+  });
+</script>
+
+<div
+  style="display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 200px; overflow: hidden;"
+>
+  {#if editorType === "monaco"}
+    <MonacoEditor
+      {value}
+      {filename}
+      {readonly}
+      {onChange}
+      {onSave}
+      height="100%"
+    />
+  {:else if editorType === "image"}
+    <ImageViewer {value} {filename} />
+  {:else if editorType === "audio"}
+    <AudioPlayer {value} {filename} />
+  {:else if editorType === "video"}
+    <VideoPlayer {value} {filename} />
+  {:else if editorType === "text"}
+    <TextEditor {value} {filename} {readonly} {onChange} />
+  {:else if editorType === "markdown"}
+    <MarkdownViewer {value} {filename} {readonly} {onChange} {onUpload} />
+  {:else if editorType === "pdf"}
+    <PdfViewer {value} {filename} />
+  {:else if editorType === "email"}
+    <EmailViewer {value} {filename} />
+  {:else if editorType === "zip"}
+    <ZipViewer {value} {filename} />
+  {:else if editorType === "collabora"}
+    {#if wopiUrl && discoverUrl}
+      <CollaboraEditor
+        {value}
+        {filename}
+        {readonly}
+        {onChange}
+        {onSave}
+        {wopiUrl}
+        {discoverUrl}
+        {wopiToken}
+        {userid}
+        {username}
+        {viewtype}
+      />
+    {:else}
+      <UnknownFile
+        {value}
+        {filename}
+        {contentType}
+        note="wopiUrl and discoverUrl are required for office documents."
+      />
+    {/if}
+  {:else}
+    <UnknownFile {value} {filename} {contentType} />
+  {/if}
+</div>

package/dist/components/ContentEditor/ContentEditor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContentEditorProps } from "./types.js";
+declare const ContentEditor: import("svelte").Component<ContentEditorProps, {}, "">;
+type ContentEditor = ReturnType<typeof ContentEditor>;
+export default ContentEditor;

package/dist/components/ContentEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContentEditor } from './ContentEditor.svelte';
+export * from './types.js';

package/dist/components/ContentEditor/index.js

@@ -0,0 +1,2 @@
+export { default as ContentEditor } from './ContentEditor.svelte';
+export * from './types.js';

package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { AudioPlayerProps } from '../types.js';
+  let { value, filename }: AudioPlayerProps = $props();
+
+  let src = $state('');
+  let srcType = $state<string | undefined>(undefined);
+  let err = $state<string | null>(null);
+
+  $effect(() => {
+    if (!value) { src = ''; srcType = undefined; return; }
+    err = null;
+    const url = URL.createObjectURL(value);
+    src = url;
+    srcType = value.type || undefined;
+    return () => URL.revokeObjectURL(url);
+  });
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-center gap-4 p-6">
+  {#if err}
+    <div class="flex items-center gap-2 rounded-container-token bg-error-500/10 px-4 py-3 text-sm text-error-700-300">
+      <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+      </svg>
+      {err}
+    </div>
+  {/if}
+
+  {#if filename}
+    <p class="text-sm font-medium text-surface-700-300 opacity-70">{filename}</p>
+  {/if}
+
+  {#if src}
+    <!-- svelte-ignore a11y_media_has_caption -->
+    <audio
+      controls
+      autoplay
+      crossorigin="anonymous"
+      onerror={() => { err = 'Playback error — the format may not be supported by this browser.'; }}
+      class="w-full max-w-xl"
+    >
+      <source {src} type={srcType} />
+    </audio>
+  {/if}
+</div>

package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AudioPlayerProps } from '../types.js';
+declare const AudioPlayer: import("svelte").Component<AudioPlayerProps, {}, "">;
+type AudioPlayer = ReturnType<typeof AudioPlayer>;
+export default AudioPlayer;

package/dist/components/ContentEditor/subcomponents/CollaboraEditor.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte';
+  import type { CollaboraEditorProps } from '../types.js';
+  import { getMimeFromExt, getExtFromFilename } from '../utils.js';
+
+  let {
+    value,
+    filename,
+    readonly = false,
+    wopiUrl,
+    discoverUrl,
+    wopiToken = '',
+    userid = 0,
+    username = 'user',
+    viewtype = 'tabbed',
+    headers,
+    onChange,
+    onSave,
+  }: CollaboraEditorProps = $props();
+
+  let frameEl = $state<HTMLIFrameElement | undefined>(undefined);
+  let ready = $state(false);
+  let loading = $state(false);
+  let errmsg = $state('');
+
+  // Stable IDs for this editor instance — untrack prevents Svelte from treating
+  // these as reactive dependencies (they are intentional one-time reads).
+  const editorId = `collabora_${crypto.randomUUID().slice(0, 8)}`;
+  const fileId = `${untrack(() => userid)}_${crypto.randomUUID()}`;
+
+  // Mutable buffer — not reactive; mirrors React's useRef<Blob>
+  let buffer: Blob | undefined = untrack(() => value);
+  let saveRequestComplete = true;
+
+  const contentType = $derived(getMimeFromExt(filename ? getExtFromFilename(filename) : ''));
+
+  // ── WOPI helpers ────────────────────────────────────────────────────────────
+
+  async function uploadToWopi(blob: Blob): Promise<void> {
+    const params = new URLSearchParams();
+    params.append('access_token', wopiToken);
+    if (filename !== undefined) {
+      params.append('filename', filename);
+      params.append('contenttype', getMimeFromExt(getExtFromFilename(filename)));
+    }
+    if (userid !== undefined) params.append('userid', String(userid));
+    if (username !== undefined) params.append('username', username);
+
+    let url = wopiUrl;
+    if (url.endsWith('/')) url = url.substring(0, url.length - 1);
+    const fullurl = `${url.trimEnd()}/files/${fileId}/contents?${params.toString()}`;
+    const res = await fetch(fullurl, { headers, method: 'POST', body: blob });
+    if (!res.ok) throw new Error(`WOPI upload failed: ${res.status}`);
+  }
+
+  async function downloadFromWopi(): Promise<Blob | undefined> {
+    const params = new URLSearchParams();
+    params.append('access_token', wopiToken);
+    if (userid !== undefined) params.append('userid', String(userid));
+
+    let url = wopiUrl;
+    if (url.endsWith('/')) url = url.substring(0, url.length - 1);
+    const fullurl = `${url.trimEnd()}/files/${fileId}/contents?${params.toString()}`;
+    const res = await fetch(fullurl, { headers, method: 'GET' });
+    if (res.ok) return res.blob();
+    return undefined;
+  }
+
+  // ── Discovery ────────────────────────────────────────────────────────────────
+
+  async function findEditorUrl(mimeType: string): Promise<string> {
+    const res = await fetch(discoverUrl);
+    if (!res.ok) throw new Error(`Discovery request failed: ${res.status}`);
+    const xml = await res.text();
+    const doc = new DOMParser().parseFromString(xml, 'text/xml');
+    const action = doc.querySelector(`app[name="${mimeType}"] action`);
+    const urlsrc = action?.getAttribute('urlsrc');
+    if (!urlsrc) throw new Error(`No Collabora editor found for MIME type: ${mimeType}`);
+    const params = new URLSearchParams({ WOPISrc: `${wopiUrl.replace(/\/$/, '')}/files/${fileId}` });
+    return `${urlsrc}${params}`;
+  }
+
+  // ── Load ─────────────────────────────────────────────────────────────────────
+
+  async function loadEditor(): Promise<void> {
+    if (!filename || !buffer) return;
+    errmsg = '';
+    loading = true;
+    ready = false;
+    try {
+      await uploadToWopi(buffer);
+      const url = await findEditorUrl(contentType);
+      // Navigate iframe to Collabora — Collabora will fetch the file from WOPI
+      if (frameEl) frameEl.src = url;
+    } catch (e) {
+      errmsg = String(e);
+      loading = false;
+    }
+  }
+
+  // ── Save flow ─────────────────────────────────────────────────────────────────
+
+  function sendSaveAction(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (!frameEl?.contentWindow) { reject(new Error('No iframe')); return; }
+      saveRequestComplete = false;
+      frameEl.contentWindow.postMessage(JSON.stringify({
+        MessageId: 'Action_Save',
+        SendTime: Date.now(),
+        Values: { Notify: true, DontSaveIfUnmodified: false, DontTerminateEdit: false },
+      }), '*');
+      let cnt = 0;
+      const itv = setInterval(() => {
+        cnt++;
+        if (saveRequestComplete) { clearInterval(itv); resolve(); }
+        if (cnt > 60) { clearInterval(itv); reject(new Error('Save timeout after 30s')); }
+      }, 500);
+    });
+  }
+
+  function handleSaveResponse(): void {
+    setTimeout(async () => {
+      try {
+        const blob = await downloadFromWopi();
+        if (blob) {
+          buffer = blob;
+          onChange?.(blob);
+        }
+      } catch (e) {
+        errmsg = `Could not retrieve saved file: ${e}`;
+      } finally {
+        saveRequestComplete = true;
+        onSave?.(buffer ?? new Blob([]));
+      }
+    }, 100);
+  }
+
+  // ── PostMessage handler ───────────────────────────────────────────────────────
+
+  function handlePostMessage(e: MessageEvent): void {
+    try {
+      const msg =
+        typeof e.data === 'string' ? JSON.parse(e.data) :
+        typeof e.data === 'object' ? e.data : null;
+      if (!msg?.MessageId || !frameEl?.contentWindow) return;
+
+      const msgId: string = msg.MessageId;
+      const msgData = msg.Values;
+
+      if (msgId === 'App_LoadingStatus' && msgData?.Status === 'Frame_Ready') {
+        frameEl.contentWindow.postMessage(
+          JSON.stringify({ MessageId: 'Host_PostmessageReady', SendTime: Date.now() }),
+          '*'
+        );
+        ready = true;
+        loading = false;
+        return;
+      }
+      if (msgId === 'UI_Save') { sendSaveAction(); return; }
+      if (msgId === 'Doc_ModifiedStatus' && msgData?.Modified) { handleSaveResponse(); return; }
+      if (msgId === 'Action_Save_Resp' && msgData?.success) { handleSaveResponse(); }
+    } catch {
+      // ignore malformed messages from other origins
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('message', handlePostMessage);
+    return () => window.removeEventListener('message', handlePostMessage);
+  });
+
+  // ── Reactive reload ───────────────────────────────────────────────────────────
+
+  $effect(() => {
+    // Track value, filename and WOPI config as dependencies.
+    // Update buffer when value prop changes, then reload.
+    const v = value;
+    const f = filename;
+    void wopiUrl;
+    void discoverUrl;
+
+    if (v !== undefined) buffer = v;
+    if (f && buffer) void loadEditor();
+  });
+</script>
+
+<div class="relative flex h-full w-full flex-col overflow-hidden">
+  <!-- Error state -->
+  {#if errmsg}
+    <div class="flex items-start gap-3 bg-error-500/10 px-4 py-3 text-sm text-error-700-300">
+      <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+      </svg>
+      <span>{errmsg}</span>
+    </div>
+  {/if}
+
+  <!-- Loading overlay -->
+  {#if loading && !errmsg}
+    <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-50-950/80 backdrop-blur-sm">
+      <div class="flex flex-col items-center gap-3">
+        <svg class="size-8 animate-spin text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+        </svg>
+        <span class="text-sm text-surface-700-300">Loading editor…</span>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Collabora iframe — src is set imperatively via loadEditor() -->
+  <iframe
+    bind:this={frameEl}
+    id="{editorId}-viewer"
+    name="{editorId}-viewer"
+    title="Collabora Online Editor"
+    class="h-full w-full flex-1 border-0"
+    style:visibility={ready && !loading ? 'visible' : 'hidden'}
+    style:min-height="300px"
+  ></iframe>
+</div>

package/dist/components/ContentEditor/subcomponents/CollaboraEditor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollaboraEditorProps } from '../types.js';
+declare const CollaboraEditor: import("svelte").Component<CollaboraEditorProps, {}, "">;
+type CollaboraEditor = ReturnType<typeof CollaboraEditor>;
+export default CollaboraEditor;

package/dist/components/ContentEditor/subcomponents/EmailViewer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { ImageViewerProps } from '../types.js';
+  let { value, filename }: ImageViewerProps = $props();
+</script>
+
+<div class="card p-4 text-surface-700-300">
+  <p class="font-semibold">EmailViewer</p>
+  <p class="text-sm opacity-60">Not yet implemented. filename: {filename}</p>
+</div>

package/dist/components/ContentEditor/subcomponents/EmailViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageViewerProps } from '../types.js';
+declare const EmailViewer: import("svelte").Component<ImageViewerProps, {}, "">;
+type EmailViewer = ReturnType<typeof EmailViewer>;
+export default EmailViewer;

package/dist/components/ContentEditor/subcomponents/ImageViewer.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { ImageViewerProps } from '../types.js';
+  let { value, filename }: ImageViewerProps = $props();
+
+  let src = $state('');
+  let err = $state(false);
+
+  $effect(() => {
+    if (!value) { src = ''; return; }
+    err = false;
+    const url = URL.createObjectURL(value);
+    src = url;
+    return () => URL.revokeObjectURL(url);
+  });
+</script>
+
+<div class="relative flex h-full w-full items-center justify-center overflow-hidden bg-surface-50-950">
+  {#if err}
+    <div class="flex flex-col items-center gap-2 text-error-500">
+      <svg xmlns="http://www.w3.org/2000/svg" class="size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+      </svg>
+      <span class="text-sm">Failed to load image</span>
+    </div>
+  {:else if src}
+    <img
+      {src}
+      alt={filename ?? 'image'}
+      class="max-h-full max-w-full object-contain"
+      onerror={() => { err = true; }}
+    />
+  {/if}
+</div>

package/dist/components/ContentEditor/subcomponents/ImageViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageViewerProps } from '../types.js';
+declare const ImageViewer: import("svelte").Component<ImageViewerProps, {}, "">;
+type ImageViewer = ReturnType<typeof ImageViewer>;
+export default ImageViewer;

package/dist/components/ContentEditor/subcomponents/MarkdownViewer.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Carta, Markdown, MarkdownEditor } from 'carta-md';
+  import { code } from '@cartamd/plugin-code';
+  import { anchor } from '@cartamd/plugin-anchor';
+  import { attachment } from '@cartamd/plugin-attachment';
+  import { emoji } from '@cartamd/plugin-emoji';
+  import { math } from '@cartamd/plugin-math';
+  import { sanitize } from 'isomorphic-dompurify';
+  import 'carta-md/default.css';
+  import '@cartamd/plugin-code/default.css';
+  import '@cartamd/plugin-anchor/default.css';
+  import '@cartamd/plugin-emoji/default.css';
+  import '@cartamd/plugin-attachment/default.css';
+  import 'katex/dist/katex.min.css';
+  import 'github-markdown-css/github-markdown.css';
+  import { blobToString } from '../utils.js';
+  import type { MarkdownViewerProps } from '../types.js';
+
+  let { value, readonly = false, onChange, onUpload }: MarkdownViewerProps = $props();
+
+  let carta = $state<Carta | undefined>(undefined);
+
+  onMount(() => {
+    carta = new Carta({
+      sanitizer: sanitize,
+      extensions: [
+        code(),
+        anchor(),
+        emoji(),
+        math(),
+        ...(onUpload ? [attachment({ upload: onUpload })] : []),
+      ],
+    });
+  });
+
+  let text = $state('');
+  let lastBlobText = $state('');
+
+  $effect(() => {
+    blobToString(value).then((v) => {
+      lastBlobText = v;
+      if (text !== v) text = v;
+    });
+  });
+
+  $effect(() => {
+    if (!readonly && text !== lastBlobText) {
+      onChange?.(new Blob([text]));
+    }
+  });
+</script>
+
+<div class="md-host" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
+  {#if carta}
+    {#if readonly}
+      {#key text}
+        <Markdown {carta} value={text} />
+      {/key}
+    {:else}
+      <MarkdownEditor {carta} bind:value={text} mode="auto" />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  :global(.carta-font-code) {
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    letter-spacing: normal;
+  }
+
+  :global(.md-host .carta-editor) {
+    flex: 1 1 auto;
+  }
+
+  :global(.md-host .carta-viewer) {
+    padding: 1rem;
+  }
+
+  /* Shiki dual-theme: explicitly apply light variables (required for preview rendering) */
+  :global(.shiki),
+  :global(.shiki span) {
+    color: var(--shiki-light);
+    background-color: var(--shiki-light-bg);
+    font-style: var(--shiki-light-font-style);
+    font-weight: var(--shiki-light-font-weight);
+    text-decoration: var(--shiki-light-text-decoration);
+  }
+
+  /* Shiki dual-theme: dark colors only when .dark class is present */
+  :global(.dark .shiki),
+  :global(.dark .shiki span) {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  /* carta-md dark mode: remap dark variable aliases when .dark is active */
+  :global(.dark .carta-theme__default) {
+    --border-color: var(--border-color-dark);
+    --selection-color: var(--selection-color-dark);
+    --focus-outline: var(--focus-outline-dark);
+    --hover-color: var(--hover-color-dark);
+    --caret-color: var(--caret-color-dark);
+    --text-color: var(--text-color-dark);
+  }
+
+  /* github-markdown-css dark mode: override CSS vars when .dark class is active.
+     github-markdown.css uses @media (prefers-color-scheme) which ignores the .dark class. */
+  :global(.dark .markdown-body) {
+    color-scheme: dark;
+    --fgColor-default: #f0f6fc;
+    --fgColor-muted: #9198a1;
+    --fgColor-accent: #4493f8;
+    --fgColor-attention: #d29922;
+    --fgColor-danger: #f85149;
+    --fgColor-done: #ab7df8;
+    --fgColor-success: #3fb950;
+    --bgColor-default: #0d1117;
+    --bgColor-muted: #151b23;
+    --bgColor-attention-muted: #bb800926;
+    --bgColor-neutral-muted: #656c7633;
+    --borderColor-default: #3d444d;
+    --borderColor-muted: #3d444db3;
+    --borderColor-neutral-muted: var(--borderColor-muted);
+    --borderColor-accent-emphasis: #1f6feb;
+    --borderColor-attention-emphasis: #9e6a03;
+    --borderColor-danger-emphasis: #da3633;
+    --borderColor-done-emphasis: #8957e5;
+    --borderColor-success-emphasis: #238636;
+    --focus-outlineColor: var(--borderColor-accent-emphasis);
+    --color-prettylights-syntax-comment: #9198a1;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-storage-modifier-import: #f0f6fc;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #f0f6fc;
+    --color-prettylights-syntax-markup-bold: #f0f6fc;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #f0f6fc;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #9198a1;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  }
+
+  /* github-markdown-css light mode: force light vars when OS may be dark but app is light */
+  :global(html:not(.dark) .markdown-body) {
+    color-scheme: light;
+    --fgColor-default: #1f2328;
+    --fgColor-muted: #59636e;
+    --fgColor-accent: #0969da;
+    --fgColor-attention: #9a6700;
+    --fgColor-danger: #d1242f;
+    --fgColor-done: #8250df;
+    --fgColor-success: #1a7f37;
+    --bgColor-default: #ffffff;
+    --bgColor-muted: #f6f8fa;
+    --bgColor-attention-muted: #fff8c5;
+    --bgColor-neutral-muted: #818b981f;
+    --borderColor-default: #d1d9e0;
+    --borderColor-muted: #d1d9e0b3;
+    --borderColor-neutral-muted: var(--borderColor-muted);
+    --borderColor-accent-emphasis: #0969da;
+    --borderColor-attention-emphasis: #9a6700;
+    --borderColor-danger-emphasis: #cf222e;
+    --borderColor-done-emphasis: #8250df;
+    --borderColor-success-emphasis: #1a7f37;
+    --focus-outlineColor: var(--borderColor-accent-emphasis);
+    --color-prettylights-syntax-comment: #59636e;
+    --color-prettylights-syntax-constant: #0550ae;
+    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+    --color-prettylights-syntax-entity: #6639ba;
+    --color-prettylights-syntax-entity-tag: #0550ae;
+    --color-prettylights-syntax-keyword: #cf222e;
+    --color-prettylights-syntax-string: #0a3069;
+    --color-prettylights-syntax-string-regexp: #116329;
+    --color-prettylights-syntax-variable: #953800;
+    --color-prettylights-syntax-storage-modifier-import: #1f2328;
+    --color-prettylights-syntax-markup-heading: #0550ae;
+    --color-prettylights-syntax-markup-italic: #1f2328;
+    --color-prettylights-syntax-markup-bold: #1f2328;
+    --color-prettylights-syntax-markup-list: #3b2300;
+    --color-prettylights-syntax-markup-deleted-text: #82071e;
+    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+    --color-prettylights-syntax-markup-inserted-text: #116329;
+    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+    --color-prettylights-syntax-markup-changed-text: #953800;
+    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+    --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
+    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+    --color-prettylights-syntax-meta-diff-range: #8250df;
+    --color-prettylights-syntax-brackethighlighter-angle: #59636e;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+    --color-prettylights-syntax-carriage-return-bg: #cf222e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  }
+</style>