matterviz 0.1.6 → 0.1.8

package/dist/{DraggablePanel.svelte → DraggablePane.svelte}

@@ -1,31 +1,30 @@
 <script lang="ts">import { Icon } from './';
 import { draggable, tooltip } from 'svelte-multiselect/attachments';
-let { show = $bindable(false), show_panel = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, panel_props = {}, onclose = () => { }, on_drag_start = () => { }, custom_toggle = undefined, toggle_panel_btn, panel_div, has_been_dragged = $bindable(false), currently_dragging = $bindable(false), } = $props();
+let { show = $bindable(false), show_pane = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, pane_props = {}, onclose = () => { }, on_drag_start = () => { }, custom_toggle = undefined, toggle_pane_btn = $bindable(undefined), pane_div = $bindable(undefined), has_been_dragged = $bindable(false), currently_dragging = $bindable(false), } = $props();
 let initial_position = $state({ left: `50px`, top: `50px` });
 let show_control_buttons = $state(false);
 // Keyboard shortcuts
 function on_keydown(event) {
     if (event.key === `Escape`) {
         event.preventDefault();
-        close_panel();
+        close_pane();
     }
 }
-// Panel actions
-function toggle_panel() {
+function toggle_pane() {
     show = !show;
     if (!show)
         onclose();
 }
-function close_panel() {
+function close_pane() {
     show = false;
     onclose();
 }
 function reset_position() {
-    if (toggle_panel_btn) {
+    if (toggle_pane_btn) {
         const pos = calculate_position();
         initial_position = pos;
-        if (panel_div) {
-            Object.assign(panel_div.style, {
+        if (pane_div) {
+            Object.assign(pane_div.style, {
                 left: pos.left,
                 top: pos.top,
                 right: `auto`,
@@ -47,24 +46,24 @@ function handle_drag_start() {
 }
 // Position calculation
 function calculate_position() {
-    if (!toggle_panel_btn)
+    if (!toggle_pane_btn)
         return { left: `50px`, top: `50px` };
-    const toggle_rect = toggle_panel_btn.getBoundingClientRect();
-    const panel_width = panel_div?.getBoundingClientRect().width || 450;
-    const positioned_ancestor = toggle_panel_btn.offsetParent;
+    const toggle_rect = toggle_pane_btn.getBoundingClientRect();
+    const pane_width = pane_div?.getBoundingClientRect().width || 450;
+    const positioned_ancestor = toggle_pane_btn.offsetParent;
     const ancestor_rect = positioned_ancestor?.getBoundingClientRect();
     if (!ancestor_rect) {
         // Fallback to document positioning
         const scroll_x = window.scrollX || document.documentElement.scrollLeft;
         const scroll_y = window.scrollY || document.documentElement.scrollTop;
         return {
-            left: `${toggle_rect.right - panel_width + (offset.x ?? 5) + scroll_x}px`,
+            left: `${toggle_rect.right - pane_width + (offset.x ?? 5) + scroll_x}px`,
             top: `${toggle_rect.bottom + (offset.y ?? 5) + scroll_y}px`,
         };
     }
     // Position relative to positioned ancestor
     return {
-        left: `${toggle_rect.right - ancestor_rect.left - panel_width + (offset.x ?? 5)}px`,
+        left: `${toggle_rect.right - ancestor_rect.left - pane_width + (offset.x ?? 5)}px`,
         top: `${toggle_rect.bottom - ancestor_rect.top + (offset.y ?? 5)}px`,
     };
 }
@@ -73,20 +72,18 @@ function handle_click_outside(event) {
     if (!show)
         return;
     const target = event.target;
-    const is_toggle_button = toggle_panel_btn &&
-        (target === toggle_panel_btn || toggle_panel_btn.contains(target));
-    const is_inside_panel = panel_div &&
-        (target === panel_div || panel_div.contains(target));
-    if (!is_toggle_button && !is_inside_panel && !has_been_dragged &&
-        !currently_dragging) {
-        close_panel();
-    }
+    const is_toggle_button = toggle_pane_btn &&
+        (target === toggle_pane_btn || toggle_pane_btn.contains(target));
+    const is_inside_pane = pane_div &&
+        (target === pane_div || pane_div.contains(target));
+    if (!is_toggle_button && !is_inside_pane && !currently_dragging)
+        close_pane();
 }
 // Button click handler
-function handle_button_click(event, action) {
+const handle_button_click = (action) => (event) => {
     event.stopPropagation();
     action();
-}
+};
 // Debounced resize handler for better performance
 let resize_timeout = $state(undefined);
 function handle_resize() {
@@ -97,26 +94,27 @@ function handle_resize() {
     const current_timeout = setTimeout(() => {
         if (resize_timeout !== current_timeout)
             return;
-        if (show && toggle_panel_btn && !has_been_dragged && panel_div) {
+        if (show && toggle_pane_btn && !has_been_dragged && pane_div) {
             const pos = calculate_position();
             initial_position = pos;
-            panel_div.style.left = pos.left;
-            panel_div.style.top = pos.top;
+            pane_div.style.left = pos.left;
+            pane_div.style.top = pos.top;
         }
     }, 50); // Debounce resize events
     resize_timeout = current_timeout;
 }
-// Position panel when shown
+// Position pane when shown
 $effect(() => {
-    if (show && toggle_panel_btn && !has_been_dragged) {
+    if (show && toggle_pane_btn && !has_been_dragged) {
         const pos = calculate_position();
         initial_position = pos;
-        if (panel_div) {
-            Object.assign(panel_div.style, {
+        if (pane_div) {
+            Object.assign(pane_div.style, {
                 left: pos.left,
                 top: pos.top,
                 right: `auto`,
                 bottom: `auto`,
+                width: ``,
             });
         }
     }
@@ -126,15 +124,15 @@ $effect(() => {
 <svelte:window onkeydown={on_keydown} onresize={handle_resize} />
 <svelte:document onclick={handle_click_outside} />
 
-{#if show_panel}
+{#if show_pane}
   <button
-    bind:this={toggle_panel_btn}
-    onclick={(event) => handle_button_click(event, custom_toggle || toggle_panel)}
+    type="button"
+    bind:this={toggle_pane_btn}
+    onclick={handle_button_click(custom_toggle || toggle_pane)}
     aria-expanded={show}
-    aria-controls="draggable-panel"
     {...toggle_props}
-    class="panel-toggle {toggle_props.class ?? ``}"
-    {@attach tooltip({ content: toggle_props.title ?? (show ? `Close panel` : `Open panel`) })}
+    class="pane-toggle {toggle_props.class ?? ``}"
+    {@attach tooltip({ content: toggle_props.title ?? (show ? `Close pane` : `Open pane`) })}
   >
     <Icon icon={show ? open_icon : closed_icon} style={icon_style} />
   </button>
@@ -145,43 +143,43 @@ $effect(() => {
       on_drag_start: handle_drag_start,
       on_drag_end: () => (currently_dragging = false),
     })}
-    bind:this={panel_div}
+    bind:this={pane_div}
     role="dialog"
-    aria-label="Draggable panel"
+    aria-label="Draggable pane"
     aria-modal="false"
     style:max-width={max_width}
     style:top={initial_position.top}
     style:left={initial_position.left}
     style:display={show ? `grid` : `none`}
-    {...panel_props}
-    class="draggable-panel {show ? `panel-open` : ``} {panel_props.class ?? ``}"
+    {...pane_props}
+    class="draggable-pane {show ? `pane-open` : ``} {pane_props.class ?? ``}"
   >
-    <div class="panel-header">
-      <div class="control-buttons">
-        {#if show_control_buttons}
-          <button
-            class="reset-button"
-            onclick={(event) => handle_button_click(event, reset_position)}
-            title="Reset panel position"
-            aria-label="Reset panel position"
-          >
-            <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
-          </button>
-          <button
-            class="close-button"
-            onclick={(event) => handle_button_click(event, close_panel)}
-            title="Close panel"
-            aria-label="Close panel"
-          >
-            <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
-          </button>
-        {/if}
-        <Icon
-          icon="DragIndicator"
-          class="drag-handle"
-          style="width: 1.25em; height: 1.25em"
-        />
-      </div>
+    <div class="control-buttons">
+      {#if show_control_buttons}
+        <button
+          type="button"
+          class="reset-button"
+          onclick={handle_button_click(reset_position)}
+          title="Reset pane position"
+          aria-label="Reset pane position"
+        >
+          <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
+        </button>
+        <button
+          type="button"
+          class="close-button"
+          onclick={handle_button_click(close_pane)}
+          title="Close pane"
+          aria-label="Close pane"
+        >
+          <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
+        </button>
+      {/if}
+      <Icon
+        icon="DragIndicator"
+        class="drag-handle"
+        style="width: 1.25em; height: 1.25em"
+      />
     </div>
 
     {@render children()}
@@ -189,27 +187,27 @@ $effect(() => {
 {/if}
 
 <style>
-  button.panel-toggle {
+  button.pane-toggle {
     box-sizing: border-box;
     display: flex;
     place-items: center;
-    padding: var(--panel-toggle-padding, 2pt);
-    border-radius: var(--panel-toggle-border-radius, 3pt);
+    padding: var(--pane-toggle-padding, 2pt);
+    border-radius: var(--pane-toggle-border-radius, 3pt);
     background-color: transparent;
     transition: background-color 0.2s;
-    font-size: clamp(1em, 2cqw, 1.6em);
+    font-size: var(--pane-toggle-font-size, clamp(1.1em, calc(1cqw + 1cqh), 1.4em));
   }
-  button.panel-toggle:hover {
+  button.pane-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
-  .draggable-panel {
-    position: absolute; /* Use absolute so panel scrolls with page content */
-    background: var(--panel-bg);
-    border: var(--panel-border, 1px solid rgba(255, 255, 255, 0.15));
+  div.draggable-pane {
+    position: absolute; /* Use absolute so pane scrolls with page content */
+    background: var(--pane-bg, var(--page-bg, light-dark(white, black)));
+    border: var(--pane-border, 1px solid rgba(255, 255, 255, 0.15));
     border-radius: 6px;
-    padding: var(--panel-padding, 1ex);
+    padding: var(--pane-padding, 1ex);
     box-sizing: border-box;
-    z-index: 10;
+    z-index: var(--pane-z-index, 10);
     display: grid;
     gap: 4pt;
     text-align: left;
@@ -219,53 +217,52 @@ $effect(() => {
     max-width: 90cqw;
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: calc(100vh - 3em);
+    max-height: min(90vh, 800px);
     pointer-events: auto;
   }
-  :global(body.fullscreen) .draggable-panel {
+  :global(body.fullscreen) .draggable-pane {
     position: fixed !important; /* In fullscreen, we want viewport-relative positioning */
     top: 3.3em !important;
     right: 1em !important;
     left: auto !important;
   }
-  /* Panel content styling */
-  .draggable-panel :global(h4) {
+  /* Pane content styling */
+  .draggable-pane :global(h4) {
     margin: 2pt 0;
     font-size: 0.95em;
   }
-  .draggable-panel :global(hr) {
+  .draggable-pane :global(hr) {
     border: none;
-    background: var(--panel-hr-bg, rgba(255, 255, 255, 0.1));
+    background: var(--pane-hr-bg, rgba(255, 255, 255, 0.1));
     margin: 4pt 0;
     height: 1px;
   }
-  .draggable-panel :global(label) {
+  .draggable-pane :global(label) {
     display: flex;
     align-items: center;
     gap: 2pt;
   }
-  .draggable-panel :global(input[type='text']) {
+  .draggable-pane :global(input[type='text']) {
     flex: 1;
     padding: 4px 6px;
+    margin: var(--pane-input-margin, 0 0 0 5pt);
   }
-  .draggable-panel :global(input[type='text'].invalid) {
+  .draggable-pane :global(input[type='text'].invalid) {
     border-color: var(--error-color, #ff6b6b);
     background: rgba(255, 107, 107, 0.1);
   }
-  .draggable-panel :global(input[type='text'].invalid):focus {
+  .draggable-pane :global(input[type='text'].invalid):focus {
     outline-color: var(--error-color, #ff6b6b);
     box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
   }
-  .draggable-panel :global(input[type='range']) {
+  .draggable-pane :global(input[type='range']) {
     margin-left: 4pt;
     width: 100px;
     flex-shrink: 0;
-  }
-  .draggable-panel :global(input[type='range']) {
     flex: 1;
     min-width: 60px;
   }
-  .draggable-panel :global(input[type='number']) {
+  .draggable-pane :global(input[type='number']) {
     box-sizing: border-box;
     text-align: center;
     border-radius: 3pt;
@@ -273,58 +270,59 @@ $effect(() => {
     margin: 0 3pt 0 6pt;
     flex-shrink: 0;
   }
-  .draggable-panel :global(input::-webkit-inner-spin-button) {
+  .draggable-pane :global(input::-webkit-inner-spin-button) {
     display: none;
   }
-  .draggable-panel :global(button) {
+  .draggable-pane :global(button) {
     width: max-content;
-    background-color: var(--panel-btn-bg, rgba(255, 255, 255, 0.1));
+    background-color: var(--pane-btn-bg, rgba(255, 255, 255, 0.1));
   }
-  .draggable-panel :global(button:hover) {
-    background-color: var(--panel-btn-hover-bg, rgba(255, 255, 255, 0.2));
+  .draggable-pane :global(button:hover) {
+    background-color: var(--pane-btn-bg-hover, rgba(255, 255, 255, 0.2));
   }
-  .draggable-panel :global(select) {
+  .draggable-pane :global(select) {
     margin: 0 0 0 5pt;
     flex: 1;
     border-radius: 3px;
     padding: 2px 4px;
     font-size: 0.8em;
   }
-  .draggable-panel :global(input[type='color']) {
+  .draggable-pane :global(input[type='color']) {
     width: 40px;
     height: 16px;
     margin: 0 0 0 5pt;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-sizing: border-box;
   }
-  .draggable-panel :global(.panel-row) {
+  .draggable-pane :global(.pane-row) {
     display: flex;
     gap: 8pt;
     align-items: center;
   }
-  .draggable-panel :global(.panel-row label.slider-control) {
+  .draggable-pane :global(.pane-grid) {
+    display: grid;
+    gap: 8pt;
+    align-items: center;
+  }
+  .draggable-pane :global(label:has(input[type='range'])) {
     flex: 1;
   }
-  /* Panel header styling */
-  .draggable-panel .panel-header {
+  .draggable-pane .control-buttons {
     display: flex;
-    justify-content: flex-end;
+    justify-content: end;
     align-items: center;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    height: 1.3em;
-    z-index: 10;
-    pointer-events: none; /* Allow events to pass through to children */
-  }
-  .draggable-panel .control-buttons {
-    display: flex;
+    position: sticky;
+    top: 0;
+    right: 0;
+    height: 0;
+    /* Cancel the 12 pt top/bottom padding without relying on width-based percentages */
     gap: 5px;
-    align-items: center;
-    pointer-events: auto; /* Re-enable pointer events for buttons */
+    padding: 12pt 3pt;
+    margin-bottom: calc(-2 * 12pt);
+    box-sizing: border-box;
+    justify-self: end;
   }
-  .draggable-panel :global(.drag-handle) {
+  .draggable-pane :global(.drag-handle) {
     width: 1.3em;
     height: 1.3em;
     cursor: grab;
@@ -335,17 +333,16 @@ $effect(() => {
     background-color: color-mix(in srgb, currentColor 10%, transparent);
     pointer-events: auto; /* Re-enable pointer events for drag handle */
   }
-  .draggable-panel :global(.drag-handle:hover) {
+  .draggable-pane :global(.drag-handle:hover) {
     opacity: 0.8;
     background-color: color-mix(in srgb, currentColor 20%, transparent);
   }
   /* Ensure drag handle cursor changes properly */
-  .draggable-panel :global(.drag-handle:active) {
+  .draggable-pane :global(.drag-handle:active) {
     cursor: grabbing;
   }
   /* Reset and close button styling */
-  .draggable-panel .reset-button,
-  .draggable-panel .close-button {
+  .draggable-pane :where(.reset-button, .close-button) {
     background: none;
     border: none;
     padding: 2px;
@@ -360,7 +357,7 @@ $effect(() => {
     opacity: 0.6;
     background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
-  .draggable-panel :where(.reset-button:hover, .close-button:hover) {
+  .draggable-pane :where(.reset-button:hover, .close-button:hover) {
     opacity: 0.8;
     background-color: color-mix(in srgb, currentColor 20%, transparent);
   }

package/dist/{DraggablePanel.svelte.d.ts → DraggablePane.svelte.d.ts}

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props {
     show?: boolean;
-    show_panel?: boolean;
+    show_pane?: boolean;
     children: Snippet<[]>;
     toggle_props?: HTMLAttributes<HTMLButtonElement>;
     open_icon?: IconName;
@@ -14,15 +14,15 @@ interface Props {
         y?: number;
     };
     max_width?: string;
-    panel_props?: HTMLAttributes<HTMLDivElement>;
+    pane_props?: HTMLAttributes<HTMLDivElement>;
     onclose?: () => void;
     on_drag_start?: () => void;
     custom_toggle?: () => void;
-    toggle_panel_btn?: HTMLButtonElement;
-    panel_div?: HTMLDivElement;
+    toggle_pane_btn?: HTMLButtonElement;
+    pane_div?: HTMLDivElement;
     has_been_dragged?: boolean;
     currently_dragging?: boolean;
 }
-declare const DraggablePanel: import("svelte").Component<Props, {}, "show" | "has_been_dragged" | "currently_dragging">;
-type DraggablePanel = ReturnType<typeof DraggablePanel>;
-export default DraggablePanel;
+declare const DraggablePane: import("svelte").Component<Props, {}, "show" | "toggle_pane_btn" | "pane_div" | "has_been_dragged" | "currently_dragging">;
+type DraggablePane = ReturnType<typeof DraggablePane>;
+export default DraggablePane;