@warkypublic/svelix 0.1.26 → 0.1.28

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

@@ -37,6 +37,10 @@
     value = $bindable<any>(undefined),
   }: BoxerProps = $props();
 
+  const instanceId = `boxer-${Math.random().toString(36).slice(2, 10)}`;
+  const inputId = `${instanceId}-input`;
+  const listboxId = `${instanceId}-listbox`;
+
   // Derive effective dataSource and onAPICall from adapter when not explicitly provided
   const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
   const onAPICall =
@@ -88,6 +92,7 @@
   let popupTop = $state(0);
   let popupLeft = $state(0);
   let popupWidth = $state(0);
+  let activeOptionIndex = $state<number | null>(null);
   let backdropZ = $state(1090);
   let dropdownZ = $state(1100);
   let pointerInteractingWithDropdown = $state(false);
@@ -209,6 +214,8 @@
     const option = $store.boxerData?.[index];
     if (!option) return;
 
+    activeOptionIndex = index;
+
     if (multiSelect) {
       const currentValues = Array.isArray(value) ? value : [];
       const isSelected = currentValues.includes(option.value);
@@ -227,6 +234,7 @@
       store.setSearch("");
       store.setInput(option.label);
       store.setOpened(false);
+      activeOptionIndex = null;
     }
   }
 
@@ -238,6 +246,7 @@
       onChange?.(value);
       store.setSearch("");
       store.setInput("");
+      activeOptionIndex = null;
       targetRef?.focus();
     }
     if (openOnClear) {
@@ -247,6 +256,7 @@
 
   function focusDropdownItem(index: number) {
     const clamped = Math.max(0, Math.min(index, $store.boxerData.length - 1));
+    activeOptionIndex = clamped;
     requestAnimationFrame(() => {
       const el = parentEl?.querySelector<HTMLDivElement>(
         `[data-index="${clamped}"]`,
@@ -277,17 +287,20 @@
           );
           if (selectedIndex >= 0) {
             store.setOpened(false);
+            activeOptionIndex = null;
           } else {
             onOptionSubmit(0);
           }
         } else {
           store.setOpened(false);
+          activeOptionIndex = null;
         }
         break;
       case "Escape":
         if ($store.opened) {
           e.preventDefault();
           store.setOpened(false);
+          activeOptionIndex = null;
         }
         break;
     }
@@ -302,6 +315,7 @@
       case "ArrowUp":
         e.preventDefault();
         if (index === 0) {
+          activeOptionIndex = null;
           targetRef?.focus();
         } else {
           focusDropdownItem(index - 1);
@@ -316,6 +330,7 @@
       case "Escape":
         e.preventDefault();
         store.setOpened(false);
+        activeOptionIndex = null;
         targetRef?.focus();
         break;
     }
@@ -326,7 +341,8 @@
     const rect = anchorEl.getBoundingClientRect();
     const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
     const horizontalPadding = 8;
-    const nextWidth = Math.max(220, rect.width);
+    const maxWidth = Math.max(160, viewportWidth - horizontalPadding * 2);
+    const nextWidth = Math.min(Math.max(220, rect.width), maxWidth);
     const maxLeft = viewportWidth - nextWidth - horizontalPadding;
 
     popupTop = rect.bottom + 4;
@@ -368,6 +384,7 @@
   }
   export function close() {
     store.setOpened(false);
+    activeOptionIndex = null;
   }
   export function focus() {
     targetRef?.focus();
@@ -377,6 +394,7 @@
   }
   export function open() {
     store.setOpened(true);
+    activeOptionIndex = null;
   }
   export function setValue(val: unknown) {
     value = val;
@@ -427,8 +445,8 @@
   });
 
   $effect(() => {
-    anchorEl;
-    storeOpened;
+    void anchorEl;
+    void storeOpened;
     syncInsideDialogFlag();
   });
 
@@ -462,6 +480,7 @@
     const relatedTarget = e.relatedTarget as Node | null;
     const insideDropdown = !!(relatedTarget && dropdownEl?.contains(relatedTarget));
     if (!currentTarget.contains(relatedTarget) && !insideDropdown) {
+      activeOptionIndex = null;
       if (!value && !multiSelect) {
         store.setSearch("");
         store.setInput("");
@@ -472,9 +491,13 @@
 >
   <BoxerTarget
     bind:this={targetRef}
+    activeDescendant={activeOptionIndex !== null ? `${instanceId}-option-${activeOptionIndex}` : undefined}
     {clearable}
+    controlsId={listboxId}
     {disabled}
     {error}
+    expanded={$store.opened}
+    {inputId}
     {label}
     {leftSection}
     {placeholder}
@@ -486,6 +509,7 @@
     onsearch={(v) => {
       store.setSearch(v);
       store.setInput(v);
+      activeOptionIndex = null;
       store.setOpened(true);
     }}
   />
@@ -493,10 +517,9 @@
   <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"
+          data-testid="boxer-backdrop"
           onpointerdown={onBackdropPointerDown}
           style:z-index={backdropZ}
         ></div>
@@ -507,6 +530,8 @@
         class={`${effectiveDisablePortal
           ? "absolute left-0 right-0 top-full mt-1"
           : "fixed"} card bg-surface-50-950 shadow-lg border border-surface-300-700 overflow-hidden`}
+        data-testid="boxer-dropdown"
+        id={listboxId}
         role="listbox"
         aria-label={label ?? "Options"}
         onpointerdown={markDropdownPointerInteraction}
@@ -541,6 +566,7 @@
                     class:bg-primary-100={isSelected}
                     class:dark:bg-primary-900={isSelected}
                     data-index={vRow.index}
+                    id={`${instanceId}-option-${vRow.index}`}
                     role="option"
                     aria-selected={isSelected}
                     tabindex="-1"
@@ -563,7 +589,14 @@
             </div>
           </div>
         {:else}
-          <div class="px-3 py-2 text-sm text-surface-500">Nothing found</div>
+          <div
+            aria-live="polite"
+            class="px-3 py-2 text-sm text-surface-500"
+            data-testid="boxer-empty"
+            role="status"
+          >
+            no data
+          </div>
         {/if}
       </div>
     {/if}

package/dist/components/Boxer/BoxerTarget.svelte

@@ -2,9 +2,13 @@
   import type { Snippet } from "svelte";
 
   export interface Props {
+    activeDescendant?: string;
+    controlsId?: string;
     clearable?: boolean;
     disabled?: boolean;
     error?: string;
+    expanded?: boolean;
+    inputId?: string;
     isFetching?: boolean;
     label?: string;
     leftSection?: Snippet;
@@ -17,9 +21,13 @@
   }
 
   let {
+    activeDescendant,
+    controlsId,
     clearable = true,
     disabled,
     error,
+    expanded = false,
+    inputId = 'boxer-input',
     isFetching,
     label,
     leftSection,
@@ -40,7 +48,7 @@
 
 <div class="flex flex-col gap-1">
   {#if label}
-    <label class="label text-sm font-medium" for="boxer-input">{label}</label>
+    <label class="label text-sm font-medium" for={inputId}>{label}</label>
   {/if}
   <div class="flex items-center relative">
     {#if leftSection}
@@ -49,9 +57,17 @@
       </div>
     {/if}
     <input
-      id="boxer-input"
+      id={inputId}
       bind:this={inputEl}
       bind:value={search}
+      aria-activedescendant={activeDescendant}
+      aria-autocomplete="list"
+      aria-controls={controlsId}
+      aria-describedby={error ? `${inputId}-error` : undefined}
+      aria-expanded={expanded}
+      aria-haspopup="listbox"
+      aria-invalid={!!error}
+      role="combobox"
       class="input pr-8"
       class:input-error={!!error}
       class:pl-8={!!leftSection}
@@ -82,6 +98,6 @@
     </div>
   </div>
   {#if error}
-    <p class="text-error-500 text-xs">{error}</p>
+    <p class="text-error-500 text-xs" id={`${inputId}-error`}>{error}</p>
   {/if}
 </div>

package/dist/components/Boxer/BoxerTarget.svelte.d.ts

@@ -1,8 +1,12 @@
 import type { Snippet } from "svelte";
 export interface Props {
+    activeDescendant?: string;
+    controlsId?: string;
     clearable?: boolean;
     disabled?: boolean;
     error?: string;
+    expanded?: boolean;
+    inputId?: string;
     isFetching?: boolean;
     label?: string;
     leftSection?: Snippet;

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}