@intechstudio/grid-uikit 1.20260922.1223 → 1.20260923.1330

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/index.d.ts

@@ -26,3 +26,5 @@ 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";

package/dist/index.js

@@ -26,3 +26,5 @@ 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";

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.1330",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"