tera-system-ui 0.1.69 → 0.1.71

package/dist/components/dialog/Dialog.d.ts

@@ -21,6 +21,8 @@ export type DialogProps = {
     padding?: 'none' | undefined;
     /** Whether clicking the backdrop closes the dialog. */
     closeOnClickOutside?: boolean;
+    /** Whether pressing the browser Back button closes the dialog. Default true. */
+    closeOnNavigateBack?: boolean;
     /** Whether to render a close (×) button in the header. */
     closeButton?: boolean;
     /**

package/dist/components/dialog/Dialog.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Dialog as DialogPrimitive } from 'bits-ui';
 import IconX from '../icons/IconX.svelte';
 import { cn } from '../../utils/index.js';
-let { children, open = $bindable(false), ref = $bindable(null), closeOnClickOutside = true, closeButton = true, size = 'sm', header, footer, class: className, position = 'center', padding, staticRender = false, preventScroll, onOpenChangeComplete, triggerRef, focusTriggerAfterClose = true, containerClass, headerClass, bodyClass, footerClass, ...props } = $props();
+import { closeOnBackNavigation } from '../../hooks';
+let { children, open = $bindable(false), ref = $bindable(null), closeOnClickOutside = true, closeOnNavigateBack = true, closeButton = true, size = 'sm', header, footer, class: className, position = 'center', padding, staticRender = false, preventScroll, onOpenChangeComplete, triggerRef, focusTriggerAfterClose = true, containerClass, headerClass, bodyClass, footerClass, ...props } = $props();
 const sizeClass = {
     xs: 'max-w-[min(24rem,calc(100vw-2rem))]',
     sm: 'max-w-[min(30rem,calc(100vw-2rem))]',
@@ -20,6 +21,11 @@ function handleCloseAutoFocus(e) {
         triggerRef.focus();
     }
 }
+closeOnBackNavigation({
+    enabled: () => closeOnNavigateBack,
+    isOpen: () => open,
+    close: () => { open = false; },
+});
 </script>
 
 <DialogPrimitive.Root bind:open onOpenChangeComplete={onOpenChangeComplete}>

package/dist/components/dialog/dialog.scss

@@ -1,184 +0,0 @@
-@reference "tailwindcss/theme";
-
-
-.dialog-box {
-    max-height: min(calc(100svh - 1rem), 55rem);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    background: var(--color-surface);
-    border-radius: var(--border-radius-container);
-    position: relative;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    main {
-        overflow: auto;
-    }
-}
-
-dialog, dialog:modal {
-    max-height: 100svh;
-    width: 100%;
-    height: fit-content;
-}
-
-dialog {
-    &[size="xs"] {
-        width: 24rem;
-        max-width: min(calc(100vw - 1rem), 24rem);
-    }
-
-    &[size="sm"] {
-        width: 30rem;
-        max-width: min(calc(100vw - 1rem), 30rem);
-    }
-
-    &[size="md"] {
-        width: 40rem;
-        max-width: min(calc(100vw - 1rem), 40rem);
-    }
-
-    &[size="lg"] {
-        width: 50rem;
-        max-width: min(calc(100vw - 1rem), 50rem);
-    }
-
-    &[size="full"] {
-        width: 100vw;
-        max-width: 100vw;
-        border-radius: 0;
-    }
-    &[size="auto"] {
-        width: fit-content;
-        max-width: 100vw;
-    }
-
-}
-
-dialog[open] {
-    display: inline-flex;
-}
-
-dialog {
-    --transition-duration: 0.25s;
-    --transition-easing: var(--ease-spring);
-    transform: translateY(0px);
-    margin: auto;
-    box-shadow: var(--shadow-lg);
-    border-radius: var(--border-radius-container);
-
-    &[data-position="top"] {
-        position: fixed;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        margin: 0;
-    }
-
-    &, &::backdrop {
-        transition: opacity var(--transition-duration) var(--transition-easing),
-        transform var(--transition-duration) var(--transition-easing),
-        display var(--transition-duration) allow-discrete,
-        overlay var(--transition-duration) allow-discrete,
-        box-shadow var(--transition-duration) var(--transition-easing);
-
-        opacity: 0;
-
-        will-change: transform, opacity, box-shadow;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-    }
-
-
-    &[open] {
-        animation: dialog-enter var(--transition-duration) var(--transition-easing);
-        opacity: 1;
-        box-shadow: var(--shadow-lg);
-        &::backdrop {
-            opacity: 1;
-        }
-
-        &[data-position="top"] {
-            animation: slide-in-top var(--transition-duration) var(--transition-easing);
-        }
-    }
-
-    &:not([open]) {
-        animation: dialog-exit var(--transition-duration) var(--ease-ui);
-        opacity: 0;
-        box-shadow: var(--shadow-sm);
-        &::backdrop {
-            opacity: 0;
-        }
-
-        &[data-position="top"] {
-            animation: slide-out-top var(--transition-duration) var(--ease-ui);
-        }
-    }
-
-}
-
-@keyframes dialog-enter {
-    from {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes dialog-exit {
-    from {
-        transform: scale(1);
-        opacity: 1;
-    }
-    to {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-}
-
-@keyframes slide-in-top {
-    from {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(-40px);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-    to {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
-    }
-}
-
-@keyframes slide-out-top {
-    from {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
-    }
-    to {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(-40px);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-}
-
-dialog::backdrop {
-    backdrop-filter: blur(0.2rem);
-    background: --alpha(var(--color-neutral-token-13) / 20%);
-    transition: opacity var(--transition-duration) ease-out;
-}

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -24,6 +24,9 @@ export declare const SCREEN_BREAK_POINTS: {
     lg: number;
     xl: number;
 };
+export declare function saveXlSideNavState(state: string | undefined): void;
+export declare function loadXlSideNavState(): string | undefined;
+export declare function restoreSideNavStateForXl(): void;
 export declare const mainLayout: () => HTMLElement | null;
 export declare const getSideNavState: () => string | undefined;
 export declare const setSideNavState: (state: any) => void;

package/dist/components/side-navigation/SideNavigation.js

@@ -11,6 +11,25 @@ export const SCREEN_BREAK_POINTS = {
     lg: 1024,
     xl: 1280,
 };
+const SIDE_NAV_XL_STATE_KEY = 'side-nav-xl-state';
+export function saveXlSideNavState(state) {
+    if (state === undefined) {
+        localStorage.removeItem(SIDE_NAV_XL_STATE_KEY);
+    }
+    else {
+        localStorage.setItem(SIDE_NAV_XL_STATE_KEY, state);
+    }
+}
+export function loadXlSideNavState() {
+    return localStorage.getItem(SIDE_NAV_XL_STATE_KEY) ?? undefined;
+}
+export function restoreSideNavStateForXl() {
+    const screenWidth = getScreenWidth();
+    if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
+        const saved = loadXlSideNavState();
+        setSideNavState(saved);
+    }
+}
 export const mainLayout = () => document?.getElementById('side-nav_main-layout');
 export const getSideNavState = () => {
     return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
@@ -38,6 +57,7 @@ export function toggleSideNavigation() {
     }
     else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState === undefined ? "compact" : undefined;
+        saveXlSideNavState(state);
     }
     setSideNavState(state);
 }

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { SCREEN_BREAK_POINTS, mainLayout, setSideNavState, toggleSideNavigation, getSideNavState } from "./SideNavigation";
+<script lang="ts">import { onMount } from "svelte";
+import { mainLayout, SCREEN_BREAK_POINTS, setSideNavState, restoreSideNavStateForXl, toggleSideNavigation } from "./SideNavigation";
 import { clickOutside } from "../../actions/clickOutside";
 import { Button } from "../button";
 import { IconCoinConvert, IconHamburger } from "../icons";
@@ -70,6 +71,9 @@ let selectedIndex = (() => {
         return (item.exactHref ?? item.href) === resolvedSideNavHref;
     });
 })();
+onMount(() => {
+    restoreSideNavStateForXl();
+});
 </script>
 
 <nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"

package/dist/hooks/closeOnBackNavigation.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Closes an overlay (Dialog, Drawer, …) when the browser Back button is pressed,
+ * without ever navigating the real page away.
+ *
+ * While the overlay is open a *dummy* history entry (same URL) is pushed. Pressing
+ * Back pops that entry and closes the overlay; any other close path (Esc, click-outside,
+ * close button, programmatic `open = false`) silently removes the dummy entry again.
+ *
+ * Must live in a `.svelte.ts` module so it can use `$effect`, and must be called from a
+ * component init scope.
+ */
+export declare function closeOnBackNavigation(opts: {
+    /** Whether the behavior is enabled. */
+    enabled: () => boolean;
+    /** Current open state of the overlay. */
+    isOpen: () => boolean;
+    /** Close the overlay (e.g. set `open = false`). */
+    close: () => void;
+}): void;

package/dist/hooks/closeOnBackNavigation.svelte.js

@@ -0,0 +1,40 @@
+/**
+ * Closes an overlay (Dialog, Drawer, …) when the browser Back button is pressed,
+ * without ever navigating the real page away.
+ *
+ * While the overlay is open a *dummy* history entry (same URL) is pushed. Pressing
+ * Back pops that entry and closes the overlay; any other close path (Esc, click-outside,
+ * close button, programmatic `open = false`) silently removes the dummy entry again.
+ *
+ * Must live in a `.svelte.ts` module so it can use `$effect`, and must be called from a
+ * component init scope.
+ */
+let counter = 0; // module scope, monotonic per page load
+export function closeOnBackNavigation(opts) {
+    const id = `tera-overlay-${++counter}`;
+    let poppedByBack = false; // non-reactive guard
+    function handlePopState() {
+        // Our entry was popped only if the current top state is no longer ours.
+        if (opts.isOpen() && history.state?.__teraOverlayId !== id) {
+            poppedByBack = true;
+            opts.close();
+        }
+    }
+    $effect(() => {
+        if (!opts.enabled() || !opts.isOpen())
+            return;
+        // Opened → push a dummy entry (same URL); preserve any existing state keys
+        // (e.g. SvelteKit's own routing state).
+        history.pushState({ ...history.state, __teraOverlayId: id }, '');
+        window.addEventListener('popstate', handlePopState);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+            if (poppedByBack) {
+                poppedByBack = false; // Back already removed the entry
+            }
+            else if (history.state?.__teraOverlayId === id) {
+                history.back(); // Esc / click-outside / × / programmatic → drop our entry
+            }
+        };
+    });
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { closeOnBackNavigation } from './closeOnBackNavigation.svelte';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { closeOnBackNavigation } from './closeOnBackNavigation.svelte';

package/dist/llms/colors.md

@@ -23,11 +23,11 @@ Always use semantic tokens in components — never primitive shades.
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  bg-surface            --color-surface            #FFFFFF   Page / app background
-  bg-surface-raised     --color-surface-raised     #FCFCFC   Cards, panels
-  bg-surface-sunken     --color-surface-sunken     #F5F5F5   Inputs (filled), disabled areas
-  bg-surface-hover      --color-surface-hover      #F0F0F0   Hover / pressed neutral bg
-  bg-surface-control    --color-surface-control    #FFFFFF   Interactive controls (button, input outlined, checkbox, select, slider)
+  bg-surface            --color-surface            #090909   Page / app background
+  bg-surface-raised     --color-surface-raised     #141414   Cards, panels
+  bg-surface-sunken     --color-surface-sunken     #202020   Inputs (filled), disabled areas
+  bg-surface-hover      --color-surface-hover      #303030   Hover / pressed neutral bg
+  bg-surface-control    --color-surface-control    #090909   Interactive controls (button, input outlined, checkbox, select, slider)
                                                              Light: same as page (white). Dark: elevated gray — sits above both page and dialogs.
                                                              Use this instead of bg-surface for any interactive control background.
 
@@ -35,17 +35,17 @@ Always use semantic tokens in components — never primitive shades.
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  border-border-default --color-border-default     #D9D9D9   Default border
-  border-border-strong  --color-border-strong      #BFBFBF   Focus ring, separator
+  border-border-default --color-border-default     #464646   Default border
+  border-border-strong  --color-border-strong      #5F5F5F   Focus ring, separator
 
 ## Semantic Tokens — Text
 
   Tailwind utility      CSS variable               Primitive     Role
   ─────────────────────────────────────────────────────────────────────────
-  text-text-primary     --color-text-primary       #000000   Body text, headings
-  text-text-secondary   --color-text-secondary     #595959   Supporting / label text
+  text-text-primary     --color-text-primary       #FFFFFF   Body text, headings
+  text-text-secondary   --color-text-secondary     #BFBFBF   Supporting / label text
   text-text-tertiary    --color-text-tertiary      #8C8C8C   Placeholders, hints
-  text-text-disabled    --color-text-disabled      #BFBFBF   Disabled labels
+  text-text-disabled    --color-text-disabled      #5F5F5F   Disabled labels
 
 ## Semantic Tokens — Interactive (primary action)
 
@@ -102,15 +102,15 @@ Always use semantic tokens in components — never primitive shades.
 
   ### Neutral scale (inverts in dark mode)
 
-  neutral-token-1  = #FFFFFF  (white — page background)
-  neutral-token-2  = #FCFCFC
-  neutral-token-3  = #F5F5F5  (input / disabled bg)
-  neutral-token-4  = #F0F0F0  (hover state bg)
-  neutral-token-5  = #D9D9D9  (default border)
-  neutral-token-6  = #BFBFBF  (focus border / disabled text)
+  neutral-token-1  = #090909  (white — page background)
+  neutral-token-2  = #141414
+  neutral-token-3  = #202020  (input / disabled bg)
+  neutral-token-4  = #303030  (hover state bg)
+  neutral-token-5  = #464646  (default border)
+  neutral-token-6  = #5F5F5F  (focus border / disabled text)
   neutral-token-7  = #8C8C8C  (placeholder / hint)
-  neutral-token-8  = #595959  (secondary text)
-  neutral-token-13 = #000000  (primary text)
+  neutral-token-8  = #BFBFBF  (secondary text)
+  neutral-token-13 = #FFFFFF  (primary text)
 
   ### Primary (brand blue — changes per theme)
 

package/dist/llms/dialog.md

@@ -24,6 +24,7 @@ Built on BitsUI Dialog primitive.
   position                  'top' | 'center'                        optional  Vertical alignment of the dialog on screen.
   padding                   'none'                                  optional  Set to 'none' to remove internal padding.
   closeOnClickOutside       boolean                                 optional  Whether clicking the backdrop closes the dialog.
+  closeOnNavigateBack       boolean                                 optional  Whether pressing the browser Back button closes the dialog. Default true.
   closeButton               boolean                                 optional  Whether to render a close (×) button in the header.
   staticRender              boolean                                 optional  When true the dialog DOM is kept alive after close — children preserve internal state between open/close cycles.
   preventScroll             boolean                                 optional  Prevent the page from scrolling while the dialog is open.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run customPrepublish && npm run generate-index && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",