@intechstudio/grid-uikit 1.20260922.1223 → 1.20260923.1530

package/dist/GridPane.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Pane } from "svelte-splitpanes";
+
+  export let size: number | null = null;
+  export let minSize = 0;
+  export let maxSize = 100;
+  export let snapSize = 0;
+  let clazz = "";
+  export { clazz as class };
+</script>
+
+<Pane bind:size {minSize} {maxSize} {snapSize} class={clazz}>
+  <slot />
+</Pane>

package/dist/GridPane.svelte.d.ts

@@ -0,0 +1,33 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const GridPane: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    size?: number | null;
+    minSize?: number;
+    maxSize?: number;
+    snapSize?: number;
+    class?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type GridPane = InstanceType<typeof GridPane>;
+export default GridPane;

package/dist/GridSplitpanes.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Splitpanes } from "svelte-splitpanes";
+  import "./grid-splitpanes-theme.css";
+
+  export let horizontal = false;
+  export let pushOtherPanes = true;
+  export let dblClickSplitter = true;
+  export let firstSplitter = false;
+  export let rtl: boolean | "auto" = "auto";
+  export let id: string | undefined = undefined;
+  export let style: string | null = null;
+  let clazz = "";
+  export { clazz as class };
+</script>
+
+<Splitpanes
+  {id}
+  {horizontal}
+  {pushOtherPanes}
+  {dblClickSplitter}
+  {firstSplitter}
+  {rtl}
+  {style}
+  theme="grid-uikit-theme"
+  class={clazz}
+  on:pane-click
+  on:splitter-click
+  on:pane-maximize
+  on:ready
+  on:resize
+  on:resized
+  on:pane-add
+  on:pane-remove
+>
+  <slot />
+</Splitpanes>

package/dist/GridSplitpanes.svelte.d.ts

@@ -0,0 +1,52 @@
+import "./grid-splitpanes-theme.css";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const GridSplitpanes: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    horizontal?: boolean;
+    pushOtherPanes?: boolean;
+    dblClickSplitter?: boolean;
+    firstSplitter?: boolean;
+    rtl?: boolean | "auto";
+    id?: string | undefined;
+    style?: string | null;
+    class?: string;
+}, {
+    default: {};
+}>, {
+    'pane-click': CustomEvent<import("svelte-splitpanes").IPane>;
+    'splitter-click': CustomEvent<import("svelte-splitpanes").IPane>;
+    'pane-maximize': CustomEvent<import("svelte-splitpanes").IPane>;
+    ready: CustomEvent<void>;
+    resize: CustomEvent<import("svelte-splitpanes").IPaneSizingEvent[]>;
+    resized: CustomEvent<import("svelte-splitpanes").IPaneSizingEvent[]>;
+    'pane-add': CustomEvent<{
+        index: number;
+        panes: import("svelte-splitpanes").IPaneSizingEvent[];
+    }>;
+    'pane-remove': CustomEvent<{
+        removed: import("svelte-splitpanes").IPane;
+        panes: import("svelte-splitpanes").IPaneSizingEvent[];
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type GridSplitpanes = InstanceType<typeof GridSplitpanes>;
+export default GridSplitpanes;

package/dist/LogMessage.svelte

@@ -53,7 +53,9 @@
     display: flex;
     align-items: center;
     width: 30rem;
-    border: solid 1px var(--border);
+    padding: 0;
+    margin: 0;
+    border: none;
     background: none;
     cursor: pointer;
   }
@@ -66,7 +68,7 @@
     justify-content: center;
     width: 2.5rem;
     height: 2rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background: var(--background-muted);
     border: 1px solid var(--background-soft);
     font-size: 0.875rem;
@@ -79,21 +81,18 @@
     width: 100%;
     padding: 0.5rem;
     margin: 0.25rem 0;
-    border-radius: 0.375rem;
-    background: var(--background);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    transition:
-      opacity 0.1s ease,
-      background-color 0.1s ease;
+    border: solid 1px var(--border);
+    border-radius: var(--radius-medium);
+    background: var(--popover-background);
   }
 
   .notification-card:hover {
-    opacity: 0.75;
+    background: var(--popover-selection);
   }
 
   .notification-icon {
     padding: 0.5rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-medium);
     background: var(--background-muted);
   }
 

package/dist/LogStream.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { fly } from "svelte/transition";
+  import LogMessage from "./LogMessage.svelte";
+  import { logStreamStore as defaultLogStreamStore } from "./logStream";
+  import type { LogStream } from "./logStream";
+
+  const dispatch = createEventDispatcher();
+
+  export let store: LogStream = defaultLogStreamStore;
+  export let bottom: string = "5rem";
+
+  function handleClick(index: number) {
+    store.dismissLog({ index });
+  }
+
+  function handleMouseEnter() {
+    store.enableTimeout(false);
+  }
+
+  function handleMouseLeave() {
+    store.enableTimeout(true);
+  }
+
+  function handleCreation() {
+    dispatch("content-change", { count: $store.length });
+  }
+
+  function handleDestroy() {
+    store.enableTimeout(true);
+    dispatch("content-change", { count: $store.length });
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="log-stream" style="bottom: {bottom};">
+  {#each $store as log, i (log)}
+    <div
+      class="log-stream-item"
+      on:mouseenter={handleMouseEnter}
+      on:mouseleave={handleMouseLeave}
+      in:fly|global={{ x: -10, delay: 100 + 400 * i, duration: 500 }}
+      out:fly|global={{ x: 10, delay: 400 * i, duration: 500 }}
+    >
+      <LogMessage
+        count={log.count}
+        type={log.data.type}
+        text={log.data.message}
+        on:destroy={handleDestroy}
+        on:creation={handleCreation}
+        on:click={() => handleClick(i)}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .log-stream {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+  }
+
+  .log-stream-item {
+    pointer-events: auto;
+  }
+</style>

package/dist/LogStream.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LogStream } from "./logStream";
+declare const LogStream: any;
+type LogStream = InstanceType<typeof LogStream>;
+export default LogStream;

package/dist/MoltenTooltip.svelte

@@ -191,7 +191,7 @@
   $effect(() => {
     if (tooltipElement) {
       previousFocusedElement = document.activeElement as HTMLElement | null;
-      tooltipElement.focus();
+      tooltipElement.focus({ preventScroll: true });
       const handleFocusOut = (e: FocusEvent) => {
         const relatedTarget = e.relatedTarget as Node | null;
         if (relatedTarget && tooltipElement?.contains(relatedTarget)) {
@@ -267,7 +267,7 @@
     showbuttons = false;
     if (restoreFocus && previousFocusedElement) {
       isRestoringFocus = true;
-      previousFocusedElement.focus();
+      previousFocusedElement.focus({ preventScroll: true });
       previousFocusedElement = null;
       requestAnimationFrame(() => {
         isRestoringFocus = false;

package/dist/grid-splitpanes-theme.css

@@ -0,0 +1,46 @@
+.splitpanes.grid-uikit-theme .splitpanes__pane {
+  position: relative;
+  overflow: visible;
+  background-color: transparent;
+}
+
+.splitpanes.grid-uikit-theme .splitpanes__splitter {
+  position: relative;
+  background-color: transparent;
+  min-width: 0;
+  min-height: 0;
+}
+
+.splitpanes.grid-uikit-theme .splitpanes__splitter:before {
+  content: "";
+  position: absolute;
+  background-color: transparent;
+  z-index: 1;
+}
+
+.splitpanes.grid-uikit-theme
+  .splitpanes__splitter.splitpanes__splitter__active {
+  z-index: 2;
+}
+
+.grid-uikit-theme.splitpanes--vertical > .splitpanes__splitter {
+  width: 0;
+}
+.grid-uikit-theme.splitpanes--vertical > .splitpanes__splitter:before {
+  top: 0;
+  left: -3px;
+  right: -3px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.grid-uikit-theme.splitpanes--horizontal > .splitpanes__splitter {
+  height: 0;
+}
+.grid-uikit-theme.splitpanes--horizontal > .splitpanes__splitter:before {
+  left: 0;
+  top: -3px;
+  bottom: -3px;
+  width: 100%;
+  cursor: row-resize;
+}

package/dist/index.d.ts

@@ -26,3 +26,7 @@ export { Color } from "./color";
 export { default as ColorLayerSelector, type LayerClickDetail, } from "./ColorLayerSelector.svelte";
 export { default as LogMessage } from "./LogMessage.svelte";
 export { LogMessageType } from "./LogMessageType";
+export { default as LogStream } from "./LogStream.svelte";
+export { createLogStream, logStreamStore, type LogStreamMessage, type LogStreamOptions, } from "./logStream";
+export { default as GridSplitpanes } from "./GridSplitpanes.svelte";
+export { default as GridPane } from "./GridPane.svelte";

package/dist/index.js

@@ -26,3 +26,7 @@ export { Color } from "./color";
 export { default as ColorLayerSelector, } from "./ColorLayerSelector.svelte";
 export { default as LogMessage } from "./LogMessage.svelte";
 export { LogMessageType } from "./LogMessageType";
+export { default as LogStream } from "./LogStream.svelte";
+export { createLogStream, logStreamStore, } from "./logStream";
+export { default as GridSplitpanes } from "./GridSplitpanes.svelte";
+export { default as GridPane } from "./GridPane.svelte";

package/dist/logStream.d.ts

@@ -0,0 +1,35 @@
+import type { LogMessageType } from "./LogMessageType";
+export type LogStreamMessage = {
+    type: LogMessageType;
+    message: string;
+};
+type LogStreamEntry = {
+    data: LogStreamMessage;
+    count: number;
+};
+export type LogStreamOptions = {
+    /** Max number of entries kept on screen at once; oldest is dropped first. */
+    maxVisible?: number;
+    /** How long an entry stays before auto-clearing, in ms. */
+    autoDismissMs?: number;
+};
+export declare function createLogStream(options?: LogStreamOptions): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<LogStreamEntry[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    push: (entry: LogStreamMessage) => void;
+    dismissLog: ({ index }: {
+        index: number;
+    }) => void;
+    enableTimeout: (value: boolean) => void;
+    reset: () => void;
+};
+export type LogStream = ReturnType<typeof createLogStream>;
+export declare const logStreamStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<LogStreamEntry[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    push: (entry: LogStreamMessage) => void;
+    dismissLog: ({ index }: {
+        index: number;
+    }) => void;
+    enableTimeout: (value: boolean) => void;
+    reset: () => void;
+};
+export {};

package/dist/logStream.js

@@ -0,0 +1,52 @@
+import { writable } from "svelte/store";
+export function createLogStream(options = {}) {
+    const { maxVisible = 3, autoDismissMs = 5000 } = options;
+    const store = writable([]);
+    let isTimeoutEnabled = true;
+    let clearHandle;
+    function clearLogs(force = false) {
+        if (isTimeoutEnabled || force) {
+            store.set([]);
+        }
+        else {
+            clearHandle = setTimeout(() => clearLogs(), 500);
+        }
+    }
+    function push(entry) {
+        clearTimeout(clearHandle);
+        store.update((entries) => {
+            const last = entries.at(-1);
+            if (last && last.data.message === entry.message) {
+                last.count++;
+                return entries;
+            }
+            const next = [...entries, { data: entry, count: 1 }];
+            if (next.length > maxVisible) {
+                next.shift();
+            }
+            return next;
+        });
+        clearHandle = setTimeout(() => clearLogs(), autoDismissMs);
+    }
+    function dismissLog({ index }) {
+        store.update((entries) => {
+            entries.splice(index, 1);
+            return entries;
+        });
+    }
+    function enableTimeout(value) {
+        isTimeoutEnabled = value;
+    }
+    function reset() {
+        clearTimeout(clearHandle);
+        clearLogs(true);
+    }
+    return {
+        subscribe: store.subscribe,
+        push,
+        dismissLog,
+        enableTimeout,
+        reset,
+    };
+}
+export const logStreamStore = createLogStream();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260922.1223",
+  "version": "1.20260923.1530",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"
@@ -32,6 +32,7 @@
   "dependencies": {
     "@melt-ui/svelte": "^0.86.6",
     "svelte-easy-popover": "^1.0.0",
+    "svelte-splitpanes": "^8.0.12",
     "color-convert": "^2.0.1"
   },
   "devDependencies": {