@warkypublic/svelix 0.1.26 → 0.1.27

package/dist/components/BetterMenu/MenuRenderer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { getContext } from 'svelte';
 	import type { BetterMenuInstanceItem, BetterMenuStoreState } from './types';
 	import type { BetterMenuStore } from './store';
@@ -54,9 +55,9 @@
 
 {#snippet menuItem(item: BetterMenuInstanceItem, onClose: () => void)}
 	{#if item.renderer}
-		<div class="px-3 py-2">
-			{@render (item.renderer as any)({ ...item, onClose })}
-		</div>
+			<div class="px-3 py-2">
+				{@render (item.renderer as unknown as Snippet<[Record<string, unknown>]>)({ ...item, onClose })}
+			</div>
 	{:else if item.isDivider}
 		<hr class="border-slate-200 dark:border-slate-700 my-1" />
 	{:else if item.onClick || item.onClickAsync}
@@ -100,10 +101,10 @@
 				style:width={menuState.width ? `${menuState.width}px` : undefined}
 				style:z-index={menuZ}
 			>
-				{#if menu.renderer}
-					<div class="py-2">
-						{@render (menu.renderer as any)({ id: menu.id, onClose: () => hideMenu(menu.id) })}
-					</div>
+					{#if menu.renderer}
+						<div class="py-2">
+							{@render (menu.renderer as unknown as Snippet<[Record<string, unknown>]>)({ id: menu.id, onClose: () => hideMenu(menu.id) })}
+						</div>
 				{:else}
 					{#each menu.items ?? [] as item, itemIndex (`${menu.id}_item_${item.id ?? itemIndex}`)}
 						{@render menuItem(item, () => hideMenu(menu.id))}

package/dist/components/Boxer/Boxer.svelte

@@ -427,8 +427,8 @@
   });
 
   $effect(() => {
-    anchorEl;
-    storeOpened;
+    void anchorEl;
+    void storeOpened;
     syncInsideDialogFlag();
   });
 
@@ -493,8 +493,6 @@
   <Portal disabled={effectiveDisablePortal}>
     {#if $store.opened}
       {#if !effectiveDisablePortal}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="fixed inset-0"
           onpointerdown={onBackdropPointerDown}

package/dist/components/ContentEditor/ContentEditor.svelte

@@ -19,6 +19,9 @@
     filename,
     contentType,
     mode = "value",
+    hideHeader = false,
+    theme,
+    colorScheme = "auto",
     readonly = false,
     onChange,
     onSave,
@@ -36,6 +39,7 @@
   }: ContentEditorProps = $props();
 
   const editorType = $derived(getEditorType({ filename, contentType }));
+  const forcedColorScheme = $derived(colorScheme === "auto" ? undefined : colorScheme);
 
   $effect(() => {
     if (mode === "filepointer") {
@@ -47,6 +51,8 @@
 </script>
 
 <div
+  data-theme={theme}
+  style:color-scheme={forcedColorScheme}
   style="display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 200px; overflow: hidden;"
 >
   {#if editorType === "monaco"}
@@ -67,7 +73,7 @@
   {:else if editorType === "video"}
     <VideoPlayer {value} {filename} />
   {:else if editorType === "text"}
-    <TextEditor {value} {filename} {readonly} {onChange} bind:insertText bind:insertHtml />
+    <TextEditor {value} {filename} {hideHeader} {readonly} {onChange} bind:insertText bind:insertHtml />
   {:else if editorType === "markdown"}
     <MarkdownViewer {value} {filename} {readonly} {onChange} {onUpload} bind:insertText bind:insertHtml />
   {:else if editorType === "pdf"}

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

@@ -31,7 +31,6 @@
   {/if}
 
   {#if src}
-    <!-- svelte-ignore a11y_media_has_caption -->
     <audio
       controls
       autoplay

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

@@ -13,7 +13,7 @@
     adminKey = "",
     userid = 0,
     username = "user",
-    viewtype = "tabbed",
+    viewtype: _viewtype = "tabbed",
     headers,
     onChange,
     onSave,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ImageViewerProps } from '../types.js';
-  let { value, filename }: ImageViewerProps = $props();
+  let { value: _value, filename }: ImageViewerProps = $props();
 </script>
 
 <div class="card p-4 text-surface-700-300">

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

@@ -14,12 +14,14 @@
   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 { blobToString, watchSkeletonDarkMode } from '../utils.js';
   import type { MarkdownViewerProps } from '../types.js';
 
   let { value, readonly = false, onChange, onUpload, insertText = $bindable(), insertHtml = $bindable() }: MarkdownViewerProps = $props();
 
   let carta = $state<Carta | undefined>(undefined);
+  let hostEl = $state<HTMLDivElement | undefined>(undefined);
+  let isDark = $state(false);
 
   onMount(() => {
     carta = new Carta({
@@ -34,6 +36,13 @@
     });
   });
 
+  onMount(() => {
+    const stopWatchingTheme = watchSkeletonDarkMode(hostEl, (nextIsDark) => {
+      isDark = nextIsDark;
+    });
+    return () => stopWatchingTheme();
+  });
+
   let text = $state('');
   let lastBlobText = $state('');
 
@@ -56,8 +65,18 @@
       insertHtml = undefined;
       return;
     }
+    type EditorViewLike = {
+      state: { selection: { main: { from: number; to: number } } };
+      dispatch: (payload: {
+        changes: { from: number; to: number; insert: string };
+        selection: { anchor: number };
+      }) => void;
+      focus: () => void;
+    };
+    type CartaEditorLike = Carta & { editor?: { editorView?: EditorViewLike } };
+
     function insertAtCursor(content: string): void {
-      const view = carta!.editor?.editorView;
+      const view = (carta as CartaEditorLike).editor?.editorView;
       if (!view) return;
       const { from, to } = view.state.selection.main;
       view.dispatch({
@@ -71,7 +90,13 @@
   });
 </script>
 
-<div class="md-host" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
+<div
+  bind:this={hostEl}
+  class="md-host"
+  class:theme-dark={isDark}
+  class:theme-light={!isDark}
+  style="display: flex; flex-direction: column; width: 100%; height: 100%;"
+>
   {#if carta}
     {#if readonly}
       {#key text}
@@ -110,8 +135,8 @@
   }
 
   /* Shiki dual-theme: dark colors only when .dark class is present */
-  :global(.dark .shiki),
-  :global(.dark .shiki span) {
+  :global(.md-host.theme-dark .shiki),
+  :global(.md-host.theme-dark .shiki span) {
     color: var(--shiki-dark) !important;
     background-color: var(--shiki-dark-bg) !important;
     font-style: var(--shiki-dark-font-style) !important;
@@ -120,7 +145,7 @@
   }
 
   /* carta-md dark mode: remap dark variable aliases when .dark is active */
-  :global(.dark .carta-theme__default) {
+  :global(.md-host.theme-dark .carta-theme__default) {
     --border-color: var(--border-color-dark);
     --selection-color: var(--selection-color-dark);
     --focus-outline: var(--focus-outline-dark);
@@ -131,7 +156,7 @@
 
   /* 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) {
+  :global(.md-host.theme-dark .markdown-body) {
     color-scheme: dark;
     --fgColor-default: #f0f6fc;
     --fgColor-muted: #9198a1;
@@ -186,7 +211,7 @@
   }
 
   /* github-markdown-css light mode: force light vars when OS may be dark but app is light */
-  :global(html:not(.dark) .markdown-body) {
+  :global(.md-host.theme-light .markdown-body) {
     color-scheme: light;
     --fgColor-default: #1f2328;
     --fgColor-muted: #59636e;

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

@@ -1,7 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import * as monaco from 'monaco-editor';
-  import { getLangFromExt, getExtFromFilename, blobToString } from '../utils.js';
+  import {
+    getLangFromExt,
+    getExtFromFilename,
+    blobToString,
+    watchSkeletonDarkMode,
+  } from '../utils.js';
   import type { MonacoEditorProps } from '../types.js';
 
   let {
@@ -26,23 +31,9 @@
   );
 
   onMount(() => {
-    // Dark mode detection — priority: inline color-scheme style > .dark class > OS media query
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const html = document.documentElement;
-
-    function updateDark() {
-      const explicit = html.style.colorScheme;
-      if (explicit === 'dark' || explicit === 'light') {
-        isDark = explicit === 'dark';
-      } else {
-        isDark = html.classList.contains('dark') || mq.matches;
-      }
-    }
-
-    updateDark();
-    mq.addEventListener('change', updateDark);
-    const observer = new MutationObserver(updateDark);
-    observer.observe(html, { attributeFilter: ['class', 'style'] });
+    const stopWatchingTheme = watchSkeletonDarkMode(container, (nextIsDark) => {
+      isDark = nextIsDark;
+    });
 
     editor = monaco.editor.create(container!, {
       value: '',
@@ -73,8 +64,7 @@
     insertHtml = (html: string) => doInsertText(html.replace(/<[^>]+>/g, ''));
 
     return () => {
-      mq.removeEventListener('change', updateDark);
-      observer.disconnect();
+      stopWatchingTheme();
       insertText = undefined;
       insertHtml = undefined;
       editor?.dispose();

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

@@ -2,6 +2,7 @@
   import { onMount, untrack, tick } from "svelte";
   import type { Office365EditorProps } from "../types.js";
   import { getExtFromFilename } from "../utils.js";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
 
   let {
     value,
@@ -71,7 +72,8 @@
   // ── WOPI helpers ─────────────────────────────────────────────────────────────
 
   async function fileExistsInWopi(token: string): Promise<boolean> {
-    const params = new URLSearchParams({ access_token: token });
+    const params = new SvelteURLSearchParams();
+    params.append("access_token", token);
     const base = wopiUrl.replace(/\/$/, "");
     const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
       headers,
@@ -81,7 +83,8 @@
   }
 
   async function uploadToWopi(blob: Blob, token: string): Promise<void> {
-    const params = new URLSearchParams({ access_token: token });
+    const params = new SvelteURLSearchParams();
+    params.append("access_token", token);
     if (filename !== undefined) params.append("filename", filename);
     const base = wopiUrl.replace(/\/$/, "");
     const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
@@ -93,7 +96,8 @@
   }
 
   async function downloadFromWopi(): Promise<Blob | undefined> {
-    const params = new URLSearchParams({ access_token: signedToken });
+    const params = new SvelteURLSearchParams();
+    params.append("access_token", signedToken);
     const base = wopiUrl.replace(/\/$/, "");
     const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
       headers,

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

@@ -36,14 +36,13 @@
     >
       <div class="flex h-full w-full flex-col items-center justify-center gap-3 p-6 text-center text-surface-700-300">
         <p class="text-sm opacity-70">This browser could not display the PDF inline.</p>
-        <a
-          href={src}
-          target="_blank"
-          rel="noopener noreferrer"
+        <button
+          type="button"
           class="btn variant-outline"
+          onclick={() => window.open(src, '_blank', 'noopener,noreferrer')}
         >
           Open PDF in new tab
-        </a>
+        </button>
       </div>
     </object>
   {:else}