matterviz 0.4.0 → 0.4.2

package/dist/layout/SettingsSection.svelte

@@ -14,11 +14,13 @@
     title: string
     current_values: Record<string, unknown>
     children: Snippet<
-      [{
-        current_values: Record<string, unknown>
-        has_changes: boolean
-        reference_values: Record<string, unknown>
-      }]
+      [
+        {
+          current_values: Record<string, unknown>
+          has_changes: boolean
+          reference_values: Record<string, unknown>
+        },
+      ]
     >
     on_reset?: () => void
   } = $props()
@@ -30,23 +32,22 @@
     if (obj instanceof RegExp) return new RegExp(obj)
     if (Array.isArray(obj)) {
       return obj.map((item) =>
-        typeof item === `object` && item !== null ? deep_copy(item) : item
+        typeof item === `object` && item !== null ? deep_copy(item) : item,
       )
     }
 
     const copy: Record<string, unknown> = {}
     for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
-      copy[key] = typeof value === `object` && value !== null
-        ? deep_copy(value)
-        : value
+      copy[key] = typeof value === `object` && value !== null ? deep_copy(value) : value
     }
     return copy
   }
 
   // Capture initial values once at mount - must NOT be $derived or it tracks changes
-  const reference_values = untrack(() =>
-    deep_copy(current_values) as Record<string, unknown>
-  )
+  const reference_values = untrack(() => deep_copy(current_values) as Record<string, unknown>)
+
+  // unique per-instance id so aria-labelledby stays valid with multiple sections on a page
+  const title_id = `settings-section-title-${crypto.randomUUID()}`
 
   // Check if any values have changed from reference values
   let has_changes = $derived.by(() => {
@@ -61,9 +62,12 @@
             const curr_val = current_value[idx]
             // Handle nested objects/arrays in arrays
             if (
-              typeof val === `object` && val !== null &&
-              typeof curr_val === `object` && curr_val !== null
-            ) return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
+              typeof val === `object` &&
+              val !== null &&
+              typeof curr_val === `object` &&
+              curr_val !== null
+            )
+              return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
             return val !== curr_val
           })
         ) {
@@ -91,7 +95,7 @@
   }
 </script>
 
-<h4 id="settings-section-title">
+<h4 id={title_id}>
   {title}
 
   {#if has_changes}
@@ -106,7 +110,7 @@
     </button>
   {/if}
 </h4>
-<section {...rest} aria-labelledby="settings-section-title">
+<section {...rest} aria-labelledby={title_id}>
   {@render children?.({ current_values, has_changes, reference_values })}
 </section>
 

package/dist/layout/SubpageGrid.svelte

@@ -52,7 +52,9 @@
     border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
     text-decoration: none;
     color: inherit;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
     &:hover {
       border-color: color-mix(in srgb, currentColor 35%, transparent);
       box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);

package/dist/layout/ViewerChrome.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { FullscreenToggleProp } from './fullscreen'
+  import type { ShowControlsState } from '../controls'
+  // Shared control-buttons row (filename chip + fullscreen toggle + snippet buttons/panes) for BrillouinZone/FermiSurface/Structure viewers; themed via neutral --viewer-* CSS vars
+  // NOTE Trajectory.svelte intentionally keeps its own controls: its bar is a full playback strip (nav/step/FPS/info+export panes/view-mode) rather than this floating top-right cluster. It already shares FullscreenButton + sync_fullscreen.
+  import type { Snippet } from 'svelte'
+  import { createAttachmentKey } from 'svelte/attachments'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import FullscreenButton from './FullscreenButton.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    controls_config,
+    filename = undefined,
+    fullscreen = false,
+    fullscreen_toggle = true,
+    fullscreen_btn_style = undefined,
+    wrapper = undefined,
+    before = undefined,
+    children = undefined,
+    ...rest
+  }: HTMLAttributes<HTMLElement> & {
+    controls_config: ShowControlsState
+    filename?: string
+    fullscreen?: boolean
+    fullscreen_toggle?: FullscreenToggleProp
+    fullscreen_btn_style?: string
+    wrapper?: HTMLDivElement
+    style?: string // extra styles/CSS vars for the section (user config style wins)
+    before?: Snippet // rendered before filename/fullscreen (e.g. reset-camera button)
+    children?: Snippet // rendered after the fullscreen toggle (panes, controls, ...)
+  } = $props()
+
+  // Styled tooltip (reads the button's title attr), forwarded as a spreadable attachment
+  const tooltip_attachment = { [createAttachmentKey()]: tooltip() }
+</script>
+
+<section
+  {...rest}
+  class={[`control-buttons`, controls_config.class, rest.class]}
+  style={[rest.style, controls_config.style].filter(Boolean).join(`; `)}
+>
+  {#if controls_config.mode !== `never`}
+    {@render before?.()}
+
+    {#if filename && controls_config.visible(`filename`)}
+      <span class="filename">{filename}</span>
+    {/if}
+
+    {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
+      <FullscreenButton
+        {fullscreen}
+        toggle={fullscreen_toggle}
+        {wrapper}
+        class="fullscreen-toggle"
+        style={fullscreen_btn_style}
+        {...tooltip_attachment}
+      />
+    {/if}
+
+    {@render children?.()}
+  {/if}
+</section>
+
+<style>
+  section.control-buttons {
+    position: absolute;
+    display: flex;
+    top: var(--viewer-buttons-top, var(--ctrl-btn-top, 1ex));
+    right: var(--viewer-buttons-right, var(--ctrl-btn-right, 1ex));
+    gap: var(--viewer-buttons-gap, clamp(6pt, 1cqmin, 9pt));
+    z-index: var(--viewer-buttons-z-index, var(--z-index-overlay-controls, 100000000));
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    align-items: var(--viewer-buttons-align, center);
+  }
+  /* Mode: always - controls always visible */
+  section.control-buttons.always-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Mode: hover - controls visible while the parent viewer is hovered/focused */
+  :global(.structure:hover) > section.control-buttons.hover-visible,
+  :global(.structure:focus-within) > section.control-buttons.hover-visible,
+  :global(.brillouin-zone:hover) > section.control-buttons.hover-visible,
+  :global(.brillouin-zone:focus-within) > section.control-buttons.hover-visible,
+  :global(.fermi-surface:hover) > section.control-buttons.hover-visible,
+  :global(.fermi-surface:focus-within) > section.control-buttons.hover-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Mode: never - stays hidden (default state, no additional CSS needed) */
+  section.control-buttons > :global(button) {
+    background-color: transparent;
+    display: flex;
+    padding: var(--viewer-buttons-btn-padding, 4px);
+    border-radius: var(--border-radius, 3pt);
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
+  }
+  section.control-buttons :global(button:hover) {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+  .filename {
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.1));
+    padding: 3pt 6pt;
+    border-radius: 3pt;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/layout/ViewerChrome.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { FullscreenToggleProp } from './fullscreen';
+import type { ShowControlsState } from '../controls';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    controls_config: ShowControlsState;
+    filename?: string;
+    fullscreen?: boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
+    fullscreen_btn_style?: string;
+    wrapper?: HTMLDivElement;
+    style?: string;
+    before?: Snippet;
+    children?: Snippet;
+};
+declare const ViewerChrome: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewerChrome = ReturnType<typeof ViewerChrome>;
+export default ViewerChrome;

package/dist/layout/fullscreen.d.ts

@@ -1,3 +1,7 @@
+import type { Snippet } from 'svelte';
+export type FullscreenToggleProp = Snippet<[{
+    fullscreen: boolean;
+}]> | boolean;
 export type InfoItem = Readonly<{
     label: string;
     value: string | number;

package/dist/layout/fullscreen.js

@@ -4,14 +4,12 @@ export async function toggle_fullscreen(wrapper) {
     if (!wrapper || !wrapper.isConnected)
         return;
     try {
-        if (!document.fullscreenElement) {
-            await wrapper.requestFullscreen();
-        }
-        else if (document.fullscreenElement === wrapper) {
+        if (document.fullscreenElement === wrapper) {
             await document.exitFullscreen();
         }
         else {
-            await document.exitFullscreen();
+            if (document.fullscreenElement)
+                await document.exitFullscreen();
             await wrapper.requestFullscreen();
         }
     }

package/dist/layout/fullscreen.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function sync_fullscreen(opts: {
+    get_wrapper: () => HTMLDivElement | undefined;
+    get_fullscreen: () => boolean;
+    set_fullscreen: (fullscreen: boolean) => void;
+    bg_css_var: string;
+    on_request_error?: (err: Error) => void;
+    on_change?: (fullscreen: boolean) => void;
+}): void;

package/dist/layout/fullscreen.svelte.js

@@ -0,0 +1,36 @@
+import { set_fullscreen_bg } from './fullscreen';
+// Two-way sync between a bindable `fullscreen` flag, the browser fullscreen state of a wrapper, and the fullscreen background CSS var. Creates $effects (call during component init). Shared by BrillouinZone/FermiSurface/Structure/Trajectory viewers.
+export function sync_fullscreen(opts) {
+    // Flag -> browser: enter/exit fullscreen when the bound flag changes
+    $effect(() => {
+        if (typeof window === `undefined`)
+            return;
+        const wrapper = opts.get_wrapper();
+        const fullscreen = opts.get_fullscreen();
+        const fs_el = document.fullscreenElement;
+        if (fullscreen && fs_el !== wrapper && wrapper) {
+            wrapper.requestFullscreen().catch((err) => {
+                console.error(err);
+                opts.on_request_error?.(err);
+            });
+        }
+        else if (!fullscreen && fs_el === wrapper) {
+            document.exitFullscreen().catch(console.error);
+        }
+        set_fullscreen_bg(wrapper, fullscreen, opts.bg_css_var);
+    });
+    // Browser -> flag: track fullscreenchange events (covers Esc key, programmatic exit, ...)
+    $effect(() => {
+        if (typeof document === `undefined`)
+            return () => { };
+        const handler = () => {
+            // tie state to this component's own wrapper so another element entering fullscreen
+            // doesn't flip every viewer's flag (would also trigger a requestFullscreen cascade)
+            const is_fullscreen = document.fullscreenElement === opts.get_wrapper();
+            opts.set_fullscreen(is_fullscreen);
+            opts.on_change?.(is_fullscreen);
+        };
+        document.addEventListener(`fullscreenchange`, handler);
+        return () => document.removeEventListener(`fullscreenchange`, handler);
+    });
+}

package/dist/layout/index.d.ts

@@ -1,10 +1,14 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
+export { default as NumberRangeInput } from './NumberRangeInput.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';
 export type InfoTagVariant = `default` | `success` | `warning` | `error` | `info`;
 export type InfoTagSize = `sm` | `md` | `lg`;

package/dist/layout/index.js

@@ -1,8 +1,12 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
+export { default as NumberRangeInput } from './NumberRangeInput.svelte';
 export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';

package/dist/layout/json-tree/JsonNode.svelte

@@ -191,9 +191,7 @@
       if (expandable && !is_collapsed) {
         toggle_collapse()
       }
-    } else if (
-      (event.key === `c` || event.key === `C`) && (event.ctrlKey || event.metaKey)
-    ) {
+    } else if ((event.key === `c` || event.key === `C`) && (event.ctrlKey || event.metaKey)) {
       // When nodes are selected, let the tree-level handler do bulk copy
       if (ctx?.selected_paths.size) return
       event.preventDefault()
@@ -299,10 +297,7 @@
           {#if expandable && is_collapsed}
             ▸
           {:else}
-            <Icon
-              icon="Copy"
-              style="width: 10px; height: 10px; vertical-align: baseline"
-            />
+            <Icon icon="Copy" style="width: 10px; height: 10px; vertical-align: baseline" />
           {/if}
         </span>
       </button>
@@ -371,9 +366,9 @@
               {/if}
             </span>
             <span class="colon">:</span>
-            <span style="color: var(--jt-preview); font-style: italic">{
-              format_preview(ghost.value)
-            }</span>
+            <span style="color: var(--jt-preview); font-style: italic"
+              >{format_preview(ghost.value)}</span
+            >
           </span>
         </div>
       {/each}
@@ -497,7 +492,9 @@
       color: var(--jt-number, light-dark(#098658, #b5cea8));
     }
   }
-  .colon, .comma, .bracket {
+  .colon,
+  .comma,
+  .bracket {
     color: var(--jt-punctuation, light-dark(#000, #d4d4d4));
   }
   .colon {

package/dist/layout/json-tree/JsonTree.svelte

@@ -7,12 +7,7 @@
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteSet } from 'svelte/reactivity'
   import JsonNode from './JsonNode.svelte'
-  import type {
-    CopyEventPosition,
-    DiffEntry,
-    JsonTreeContext,
-    JsonTreeProps,
-  } from './types'
+  import type { CopyEventPosition, DiffEntry, JsonTreeContext, JsonTreeProps } from './types'
   import { JSON_TREE_CONTEXT_KEY } from './types'
   import {
     build_ghost_map,
@@ -50,15 +45,14 @@
     editable = false,
     onchange,
     ...rest
-  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> =
-    $props()
+  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> = $props()
 
   // Internal state
   let search_query = $state(``)
   let search_input_value = $state(``)
   let focused_path = $state<string | null>(null)
   // Use Set for O(1) lookup/add/delete instead of O(n) array operations
-  let registered_paths_set = $state(new Set<string>())
+  const registered_paths_set = new SvelteSet<string>()
   let registered_paths_list = $state<string[]>([]) // ordered list for keyboard nav
   let copy_feedback_path = $state<string | null>(null)
   let copy_feedback_error = $state(false)
@@ -72,16 +66,14 @@
   // Reference to the search input for focus management
   let search_input_element: HTMLInputElement | undefined = $state()
   // Context menu state (null when closed)
-  let context_menu_state = $state<
-    {
-      x: number
-      y: number
-      path: string
-      value: unknown
-      expandable: boolean
-      is_collapsed: boolean
-    } | null
-  >(null)
+  let context_menu_state = $state<{
+    x: number
+    y: number
+    path: string
+    value: unknown
+    expandable: boolean
+    is_collapsed: boolean
+  } | null>(null)
   // Pinned paths for quick reference
   let pinned_paths = $state(new SvelteSet<string>())
   // Selection state for bulk operations
@@ -94,14 +86,16 @@
   $effect.pre(() => {
     if (!value_changed(value)) return
     focused_path = null
-    registered_paths_set = new Set()
+    registered_paths_set.clear()
     registered_paths_list = []
     copy_feedback_path = null
     copy_feedback_error = false
     context_menu_state = null
     force_expanded = new SvelteSet()
     const valid_paths = new SvelteSet(collect_all_paths(value, root_label ?? ``))
-    collapsed_paths = new SvelteSet([...collapsed_paths].filter((path) => valid_paths.has(path)))
+    collapsed_paths = new SvelteSet(
+      [...collapsed_paths].filter((path) => valid_paths.has(path)),
+    )
     pinned_paths = new SvelteSet()
     selected_paths = new SvelteSet()
     last_selected_path = null
@@ -211,8 +205,8 @@
   // Navigate to previous match
   function go_to_prev_match(): void {
     if (sorted_matches.length === 0) return
-    current_match_index = (current_match_index - 1 + sorted_matches.length) %
-      sorted_matches.length
+    current_match_index =
+      (current_match_index - 1 + sorted_matches.length) % sorted_matches.length
     scroll_to_current_match()
   }
 
@@ -250,14 +244,16 @@
   // Get all descendant paths of a given path (including the path itself)
   function get_descendants(target_path: string): string[] {
     const all_paths = collect_all_paths(value, root_path)
-    const descendants = target_path === `` ? all_paths : all_paths.filter(
-      (entry) =>
-        entry === target_path || entry.startsWith(`${target_path}.`) ||
-        entry.startsWith(`${target_path}[`),
-    )
-    return descendants.includes(target_path)
-      ? descendants
-      : [target_path, ...descendants]
+    const descendants =
+      target_path === ``
+        ? all_paths
+        : all_paths.filter(
+            (entry) =>
+              entry === target_path ||
+              entry.startsWith(`${target_path}.`) ||
+              entry.startsWith(`${target_path}[`),
+          )
+    return descendants.includes(target_path) ? descendants : [target_path, ...descendants]
   }
 
   function expand_all(): void {
@@ -277,9 +273,8 @@
 
     for (const path of all_paths) {
       const segments = parse_path(path)
-      const depth = root_label && segments[0] === root_label
-        ? segments.length - 1
-        : segments.length
+      const depth =
+        root_label && segments[0] === root_label ? segments.length - 1 : segments.length
       ;(depth >= level ? new_collapsed : new_expanded).add(path)
     }
 
@@ -303,7 +298,8 @@
       await navigator.clipboard.writeText(text)
       copy_feedback_error = false
       oncopy?.(path, text)
-    } catch { // Clipboard API failed - still show feedback but as error
+    } catch {
+      // Clipboard API failed - still show feedback but as error
       copy_feedback_error = true
     }
     copy_feedback_path = path // Show feedback regardless of success/failure
@@ -421,9 +417,7 @@
       const start_idx = registered_paths_list.indexOf(last_selected_path)
       const end_idx = registered_paths_list.indexOf(select_path)
       if (start_idx !== -1 && end_idx !== -1) {
-        const [from, to] = start_idx < end_idx
-          ? [start_idx, end_idx]
-          : [end_idx, start_idx]
+        const [from, to] = start_idx < end_idx ? [start_idx, end_idx] : [end_idx, start_idx]
         for (let idx = from; idx <= to; idx++) {
           selected_paths.add(registered_paths_list[idx])
         }
@@ -661,9 +655,7 @@
           >
             <Icon icon="ArrowDown" style="width: 12px; height: 12px" />
           </button>
-          <span class="match-count">{current_match_index + 1} of {
-              sorted_matches.length
-            }</span>
+          <span class="match-count">{current_match_index + 1} of {sorted_matches.length}</span>
         </div>
       {/if}
       <div class="controls">
@@ -691,12 +683,7 @@
         <button type="button" onclick={expand_all} title="Expand all" {@attach tooltip()}>
           <Icon icon="Expand" style="width: 14px; height: 14px" />
         </button>
-        <button
-          type="button"
-          onclick={collapse_all}
-          title="Collapse all"
-          {@attach tooltip()}
-        >
+        <button type="button" onclick={collapse_all} title="Collapse all" {@attach tooltip()}>
           <Icon icon="Collapse" style="width: 14px; height: 14px" />
         </button>
         <button
@@ -780,18 +767,16 @@
             type="button"
             class="pinned-path"
             onclick={() =>
-            copy_to_clipboard(
-              pinned_path,
-              serialize_for_copy(get_value_at_path(pinned_path)),
-            )}
+              copy_to_clipboard(
+                pinned_path,
+                serialize_for_copy(get_value_at_path(pinned_path)),
+              )}
             title="Click to copy value"
             {@attach tooltip()}
           >
             {pinned_path}
           </button>
-          <span class="pinned-value">{
-            format_preview(get_value_at_path(pinned_path))
-          }</span>
+          <span class="pinned-value">{format_preview(get_value_at_path(pinned_path))}</span>
           <button
             type="button"
             class="unpin-btn"
@@ -821,8 +806,8 @@
       class="copy-feedback"
       class:error={copy_feedback_error}
       style={copy_feedback_pos
-      ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
-      : `right: 8px; top: 8px`}
+        ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
+        : `right: 8px; top: 8px`}
     >
       {copy_feedback_error ? `Copy failed` : `Copied!`}
     </div>
@@ -850,9 +835,7 @@
         <button
           type="button"
           onclick={() =>
-          ctx_menu_action((st) =>
-            copy_to_clipboard(st.path, serialize_for_copy(st.value))
-          )}
+            ctx_menu_action((st) => copy_to_clipboard(st.path, serialize_for_copy(st.value)))}
         >
           <Icon icon="Copy" style="width: 12px; height: 12px" /> Copy value
         </button>
@@ -871,11 +854,11 @@
           <button
             type="button"
             onclick={() =>
-            ctx_menu_action((st) =>
-              st.is_collapsed
-                ? toggle_collapse_recursive(st.path, false)
-                : collapse_children_only(st.path)
-            )}
+              ctx_menu_action((st) =>
+                st.is_collapsed
+                  ? toggle_collapse_recursive(st.path, false)
+                  : collapse_children_only(st.path),
+              )}
           >
             {context_menu_state.is_collapsed ? `Expand` : `Collapse`} all children
           </button>
@@ -883,10 +866,7 @@
         <li class="separator"></li>
       {/if}
       <li>
-        <button
-          type="button"
-          onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}
-        >
+        <button type="button" onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}>
           {pinned_paths.has(context_menu_state.path) ? `Unpin` : `Pin`} this path
         </button>
       </li>
@@ -1006,7 +986,9 @@
     font-weight: 500;
     color: inherit;
     opacity: 0.6;
-    transition: opacity 0.15s, background 0.15s;
+    transition:
+      opacity 0.15s,
+      background 0.15s;
   }
   .controls button:hover {
     opacity: 1;
@@ -1144,18 +1126,12 @@
     font: inherit;
   }
   .context-menu button:hover {
-    background: var(
-      --jt-ctx-hover,
-      light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-hover, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1)));
   }
   .context-menu .separator {
     height: 1px;
     margin: 4px 8px;
-    background: var(
-      --jt-ctx-border,
-      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-border, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
   }
   .pinned-panel :where(button) {
     background: none;