lutra 0.0.18 → 0.0.20

package/dist/layout/Overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+import { addOverlay, removeOverlay } from "./overlays.svelte.js";
+import { createId } from "../utils/id.js";
+let {
+  id = createId(),
+  children,
+  position = "center",
+  anchor,
+  layer,
+  transition,
+  z
+} = $props();
+onMount(() => {
+  addOverlay({ id, z, layer, content: children, transition, position, anchor });
+});
+onDestroy(() => {
+  removeOverlay(id);
+});
+</script>
+

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

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+import { type OverlayPosition, type TransitionOpts } from "./overlays.svelte.js";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        children: Snippet;
+        anchor?: HTMLElement | undefined;
+        layer?: string | undefined;
+        position?: OverlayPosition | undefined;
+        transition?: TransitionOpts | undefined;
+        z?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OverlayProps = typeof __propDef.props;
+export type OverlayEvents = typeof __propDef.events;
+export type OverlaySlots = typeof __propDef.slots;
+export default class Overlay extends SvelteComponent<OverlayProps, OverlayEvents, OverlaySlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        id?: string | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        anchor?: HTMLElement | undefined;
+        layer?: string | undefined;
+        position?: OverlayPosition | undefined;
+        transition?: TransitionOpts | undefined;
+        z?: number | undefined;
+    }>);
+}
+export {};

package/dist/layout/OverlayContainer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { overlays } from "./overlays.svelte.js";
+import OverlayLayer from "./OverlayLayer.svelte";
+import { slidefade } from "../utils/transitions.js";
+</script>
+
+<div class="Overlay">
+    <OverlayLayer position="top left" items={overlays.topLeft} />
+    <OverlayLayer position="top right" items={overlays.topRight} />
+    <OverlayLayer position="top center" items={overlays.topCenter} />
+    <OverlayLayer position="bottom left" items={overlays.bottomLeft} />
+    <OverlayLayer position="bottom right" items={overlays.bottomRight} />
+    <OverlayLayer position="bottom center" items={overlays.bottomCenter} />
+    <OverlayLayer position="center" items={overlays.center} />
+    <OverlayLayer position="anchor" items={overlays.anchor} />
+</div>
+
+<style>
+    .Overlay {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1000;
+        pointer-events: none;
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OverlayContainerProps = typeof __propDef.props;
+export type OverlayContainerEvents = typeof __propDef.events;
+export type OverlayContainerSlots = typeof __propDef.slots;
+export default class OverlayContainer extends SvelteComponent<OverlayContainerProps, OverlayContainerEvents, OverlayContainerSlots> {
+}
+export {};

package/dist/layout/OverlayLayer.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">import {} from "./overlays.svelte.js";
+import { slidefade } from "../utils/transitions.js";
+import { BROWSER } from "esm-env";
+import { isComponent, isSnippet } from "../utils/isSnippet.js";
+import { untrack } from "svelte";
+let {
+  position,
+  items
+} = $props();
+const fudge = 8;
+let contentEls = $state({});
+let scrollX = $state(BROWSER ? window.scrollX : 0);
+let scrollY = $state(BROWSER ? window.scrollY : 0);
+let innerWidth = $state(BROWSER ? window.innerWidth : 0);
+let innerHeight = $state(BROWSER ? window.innerHeight : 0);
+let positions = $derived.by(() => {
+  innerWidth;
+  innerHeight;
+  scrollX;
+  scrollY;
+  contentEls;
+  return items.map((item) => {
+    const contentEl = contentEls[item.id];
+    if (!item.anchor || !contentEl)
+      return { left: 0, top: 0, index: 1 };
+    const triggerPos = item.anchor.getBoundingClientRect();
+    const height = contentEl.clientHeight;
+    const width = contentEl.clientWidth;
+    const isOffBottom = triggerPos.bottom + height > window.innerHeight - fudge;
+    const isOffRight = triggerPos.left + width > window.innerWidth - fudge;
+    let left = triggerPos.left;
+    let top = triggerPos.top + triggerPos.height + fudge;
+    if (isOffRight)
+      left = left - width + triggerPos.width;
+    if (isOffBottom)
+      top = top - height - triggerPos.height - fudge * 2;
+    return {
+      left,
+      top,
+      index: 1
+    };
+  });
+});
+let originCache = $state({});
+let origins = $derived.by(() => {
+  return items.map((item, index) => {
+    if (!item.anchor || item.position !== "anchor") {
+      return item.position || "center";
+    }
+    const triggerPos = item.anchor.getBoundingClientRect();
+    const contentEl = document.getElementById(item.id);
+    const contentRect = contentEl?.getBoundingClientRect();
+    const height = contentRect.height;
+    const width = contentRect.width;
+    const isOffBottom = triggerPos.bottom + height > innerHeight - fudge;
+    const isOffRight = triggerPos.left + width > innerWidth - fudge;
+    let text = "top left";
+    if (isOffRight)
+      text = text.replace("left", "right");
+    if (isOffBottom)
+      text = text.replace("top", "bottom");
+    return text;
+  });
+});
+$effect(() => {
+  origins;
+  origins.forEach((origin, index) => {
+    originCache[untrack(() => items[index].id)] = origin;
+  });
+});
+function introstart(item) {
+  document.getElementById(item.id).style.pointerEvents = "none";
+}
+function introend(item) {
+  document.getElementById(item.id).style.pointerEvents = "auto";
+}
+</script>
+
+<svelte:window bind:scrollX bind:scrollY bind:innerWidth bind:innerHeight />
+
+<div class="Layer {position}">
+    {#each items as item, index (item.id)}
+        <div
+            id={item.id}
+            bind:this={contentEls[item.id]}
+            class="LayerItem"
+            class:anchor={item.anchor ? true : false}
+            onintrostart={() => introstart(item)}
+            onintroend={() => introend(item)}
+            transition:slidefade|global={{ duration: 150, origin: originCache[item.id] || origins[index], noMargin: !!!item.anchor }}
+            style="--index: {index}; --z: {item.z}; --left: {positions[index].left}px; --top: {positions[index].top}px;"
+        >
+            {#if isComponent(item.content)}
+                <svelte:component this={item.content} {...item.props} />
+            {:else if isSnippet(item.content)}
+                {@render item.content()}
+            {/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .Layer {
+        pointer-events: auto;
+        position: absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.75rem;
+    }
+    .Layer.center {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+    }
+    .Layer.top {
+        top: calc(1rem + env(safe-area-inset-top));
+        bottom: unset;
+    }
+    .Layer.bottom {
+        top: unset;
+        bottom: calc(1rem + env(safe-area-inset-bottom));
+    }
+    .Layer.right {
+        left: unset;
+        right: calc(1rem + env(safe-area-inset-right));
+    }
+    .Layer.left {
+        left: calc(1rem + env(safe-area-inset-left));
+        right: unset;
+    }
+    .Layer.center:not(.top):not(.bottom):not(.anchor) {
+        top: 50%;
+        bottom: auto;
+        transform: translate(calc(-50% + env(safe-area-inset-left) + env(safe-area-inset-right)), calc(-50% + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+    }
+    .LayerItem {
+        position: relative;
+        z-index: calc(100 + var(--z, 1) - var(--index, 0));
+    }
+    .LayerItem.anchor {
+        position: absolute;
+        top: var(--top, 0);
+        left: var(--left, 0);
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.js";
+declare const __propDef: {
+    props: {
+        position?: OverlayPosition | undefined;
+        items: OverlayItem[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OverlayLayerProps = typeof __propDef.props;
+export type OverlayLayerEvents = typeof __propDef.events;
+export type OverlayLayerSlots = typeof __propDef.slots;
+export default class OverlayLayer extends SvelteComponent<OverlayLayerProps, OverlayLayerEvents, OverlayLayerSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        position?: OverlayPosition | undefined;
+        items: OverlayItem[];
+    }>);
+}
+export {};

package/dist/layout/PageContent.svelte

@@ -78,7 +78,7 @@ let style = $derived.by(() => {
         justify-content: center;
     }
 
-    @media (max-width: 960px) {
+    @media (max-width: 1280px) {
         .Page .PaddingContainer {
             padding-block-start: calc(var(--padBlockStart) / 2);
             padding-block-end: calc(var(--padBlockEnd) / 2);
@@ -86,4 +86,12 @@ let style = $derived.by(() => {
             padding-inline-end: calc(var(--padInlineEnd) / 2);
         }
     }
+    @media (max-width: 640px) {
+        .Page .PaddingContainer {
+            padding-block-start: calc(var(--padBlockStart) / 4);
+            padding-block-end: calc(var(--padBlockEnd) / 4);
+            padding-inline-start: calc(var(--padInlineStart) / 4);
+            padding-inline-end: calc(var(--padInlineEnd) / 4);
+        }
+    }
 </style>

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

@@ -3,11 +3,8 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         children: Snippet;
-        /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
         pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
-        /** Center the content in the block direction. */
         middle?: boolean | undefined;
-        /** Center the content in the inline direction. */
         center?: boolean | undefined;
     };
     events: {
@@ -19,5 +16,13 @@ export type PageContentProps = typeof __propDef.props;
 export type PageContentEvents = typeof __propDef.events;
 export type PageContentSlots = typeof __propDef.slots;
 export default class PageContent extends SvelteComponent<PageContentProps, PageContentEvents, PageContentSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
+        middle?: boolean | undefined;
+        center?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/layout/Theme.svelte

@@ -31,6 +31,12 @@ setContext("theme", theme);
     .Theme {
         display: contents;
     }
+    .Theme.light :global(:root) {
+        --scrollbar-color: var(--l-scrollbar-color);
+    }
+    .Theme.dark :global(:root) {
+        --scrollbar-color: var(--d-scrollbar-color);
+    }
     .Theme.light {
         --mix-target: var(--l-mix-target);
         /* bg */
@@ -122,6 +128,7 @@ setContext("theme", theme);
         --status-warn: var(--l-status-warn);
         --status-info: var(--l-status-info);
         --status-task: var(--l-status-task);
+        --scrollbar-color: var(--l-scrollbar-color);
     }
     .Theme.dark {
         --mix-target: var(--d-mix-target);
@@ -216,5 +223,6 @@ setContext("theme", theme);
         --status-warn: var(--d-status-warn);
         --status-info: var(--d-status-info);
         --status-task: var(--d-status-task);
+        --scrollbar-color: var(--d-scrollbar-color);
     }
 </style>

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

@@ -14,5 +14,11 @@ export type ThemeProps = typeof __propDef.props;
 export type ThemeEvents = typeof __propDef.events;
 export type ThemeSlots = typeof __propDef.slots;
 export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        theme?: "light" | "dark" | "invert" | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

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

@@ -13,5 +13,10 @@ export type UiContentProps = typeof __propDef.props;
 export type UiContentEvents = typeof __propDef.events;
 export type UiContentSlots = typeof __propDef.slots;
 export default class UiContent extends SvelteComponent<UiContentProps, UiContentEvents, UiContentSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

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

@@ -0,0 +1,34 @@
+import type { ComponentType, Snippet } from "svelte";
+export type OverlayPosition = "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" | "center" | "anchor";
+export type TransitionOpts = {
+    y?: number;
+    x?: number;
+    duration?: number;
+    origin?: string;
+    easing?: (t: number) => number;
+};
+export type OverlayItem = {
+    id: string;
+    z?: number;
+    content: string | Snippet | ComponentType;
+    props?: Record<string, any>;
+    layer?: string;
+    anchor?: HTMLElement;
+    transition?: TransitionOpts;
+    position?: OverlayPosition;
+    sticky?: boolean;
+    stack?: string;
+};
+declare let overlays: {
+    topRight: OverlayItem[];
+    topLeft: OverlayItem[];
+    topCenter: OverlayItem[];
+    bottomRight: OverlayItem[];
+    bottomLeft: OverlayItem[];
+    bottomCenter: OverlayItem[];
+    center: OverlayItem[];
+    anchor: OverlayItem[];
+};
+declare function addOverlay(opts: OverlayItem): void;
+declare function removeOverlay(id: string): void;
+export { overlays, addOverlay, removeOverlay };

package/dist/layout/overlays.svelte.js

@@ -0,0 +1,44 @@
+let overlays = $state({
+    topRight: [],
+    topLeft: [],
+    topCenter: [],
+    bottomRight: [],
+    bottomLeft: [],
+    bottomCenter: [],
+    center: [],
+    anchor: [],
+});
+function addOverlay(opts) {
+    switch (opts.position) {
+        case "top left":
+            overlays.topLeft.push(opts);
+            break;
+        case "top right":
+            overlays.topRight.push(opts);
+            break;
+        case "top center":
+            overlays.topCenter.push(opts);
+            break;
+        case "bottom left":
+            overlays.bottomLeft.push(opts);
+            break;
+        case "bottom right":
+            overlays.bottomRight.push(opts);
+            break;
+        case "bottom center":
+            overlays.bottomCenter.push(opts);
+            break;
+        case "center":
+            overlays.center.push(opts);
+            break;
+        default:
+            overlays.anchor.push(opts);
+            break;
+    }
+}
+function removeOverlay(id) {
+    for (const key in overlays) {
+        overlays[key] = overlays[key].filter((o) => o.id !== id);
+    }
+}
+export { overlays, addOverlay, removeOverlay };

package/dist/nav/Breadcrumb.svelte.d.ts

@@ -3,17 +3,12 @@ import type { ComponentType } from "svelte";
 import type { BreadcrumbItem } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** The items to display in the breadcrumb. */
         items: BreadcrumbItem[];
-        /** The separator to use between breadcrumb items. */
         separator?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | ComponentType | undefined;
-        /** Contain the element in a box. */
         contained?: boolean | undefined;
-        /** Make the element full width. */
         fullWidth?: boolean | undefined;
-        /** Center the items in the element. */
         center?: boolean | undefined;
     };
     events: {
@@ -25,5 +20,14 @@ export type BreadcrumbProps = typeof __propDef.props;
 export type BreadcrumbEvents = typeof __propDef.events;
 export type BreadcrumbSlots = typeof __propDef.slots;
 export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        items: BreadcrumbItem[];
+        separator?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        contained?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        center?: boolean | undefined;
+    }>);
 }
 export {};

package/dist/nav/Menu.svelte

@@ -1,10 +1,13 @@
-<script lang="ts">import MenuItem from "./MenuItem.svelte";
+<script lang="ts">import { BROWSER } from "esm-env";
+import MenuItem from "./MenuItem.svelte";
 import { isComponent } from "../utils/isSnippet.js";
 import { createId } from "../utils/id.js";
 import { slidefade } from "../utils/transitions.js";
 import UiContent from "../layout/UIContent.svelte";
 import { arrowNavigation, getNextFocusableElement, matchOnType } from "../utils/keyboard.svelte.js";
 import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
+import { findContainingBlock, getPossiblyContainedPosition } from "../utils/dom.js";
+import Overlay from "../layout/Overlay.svelte";
 let {
   open = $bindable(false),
   items,
@@ -14,10 +17,9 @@ let _open = $state(open);
 let triggerEl = $state(null);
 let contentEl = $state(null);
 let menuEl = $state(null);
-let menuHeight = $state(0);
-let menuWidth = $state(0);
+let currentIndex = $state(-1);
+let keyboardHasFocus = $state(false);
 const id = createId();
-const fudge = 16;
 $effect(() => {
   if (_open) {
     window.addEventListener("click", clickoutside);
@@ -30,40 +32,10 @@ $effect(() => {
 function toggle() {
   _open = !_open;
 }
-let origin = $derived.by(() => {
-  if (!triggerEl || !contentEl)
-    return "top-left";
-  const triggerPos = triggerEl.getBoundingClientRect();
-  const elPos = contentEl.getBoundingClientRect();
-  const isOffRight = triggerPos.left + elPos.width > window.innerWidth - fudge;
-  const isOffBottom = triggerPos.bottom + elPos.height > window.innerHeight - fudge;
-  let text = "top left";
-  if (isOffRight)
-    text = text.replace("left", "right");
-  if (isOffBottom)
-    text = text.replace("top", "bottom");
-  return text;
-});
-let posLeft = $derived.by(() => {
-  if (!triggerEl || !contentEl)
-    return 0;
-  const triggerPos = triggerEl.getBoundingClientRect();
-  const isOffRight = triggerPos.left + menuWidth > window.innerWidth - fudge;
-  if (isOffRight) {
-    return triggerPos.left + triggerPos.width - menuWidth;
-  }
-  return triggerPos.left;
-});
-let posTop = $derived.by(() => {
-  if (!triggerEl || !contentEl)
-    return 0;
-  const triggerPos = triggerEl.getBoundingClientRect();
-  const scrollY = window.scrollY;
-  const isOffBottom = triggerPos.bottom + menuHeight > window.innerHeight - fudge;
-  if (isOffBottom) {
-    return triggerPos.top - menuHeight - triggerPos.height + scrollY;
-  }
-  return triggerPos.top + scrollY;
+let scrollable = $derived.by(() => {
+  if (!contentEl)
+    return false;
+  return contentEl.scrollHeight > contentEl.clientHeight;
 });
 function onclick(e) {
   e.preventDefault();
@@ -104,11 +76,13 @@ function onkeydown(e) {
       e.preventDefault();
       arrowNavigation(contentEl, "down");
       matchOnType(contentEl, e);
+      keyboardHasFocus = true;
       break;
     case "ArrowUp":
       e.preventDefault();
       arrowNavigation(contentEl, "up");
       matchOnType(contentEl, e);
+      keyboardHasFocus = true;
       break;
     case "Enter":
     case "Space":
@@ -119,8 +93,14 @@ function onkeydown(e) {
       matchOnType(contentEl, e);
   }
 }
+function mouseover(e, item, index) {
+  if (item.type === "item") {
+    currentIndex = index;
+  }
+}
 </script>
 
+
 <UiContent>
     <div class="Menu" bind:this={menuEl}>
         <div
@@ -135,22 +115,21 @@ function onkeydown(e) {
                 {@render trigger({ toggle: toggle, isOpen: _open })}
             {/if}
         </div>
-        {#if _open}
-            <div {id}
-                class="MenuContent"
-                role="menu"
-                bind:clientWidth={menuWidth}
-                bind:clientHeight={menuHeight}
-                bind:this={contentEl}
-                style="--left: {posLeft}px; --top: {posTop}px;"
-                transition:slidefade={{ y: 5, origin: origin, duration: 100 }}
-            >
-                <ul>
-                    {#each items as item}
-                        <MenuItem item={item} />
-                    {/each}
-                </ul>
-            </div>
+        {#if _open && triggerEl}
+            <Overlay position="anchor" id="o-{id}" anchor={triggerEl} layer="menu">
+                <div {id}
+                    class="MenuContent"
+                    class:scrollable={scrollable}
+                    role="menu"
+                    bind:this={contentEl}
+                >
+                    <ul>
+                        {#each items as item, index}
+                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} item={item} {index} />
+                        {/each}
+                    </ul>
+                </div>
+            </Overlay>
         {/if}
     </div>
 </UiContent>
@@ -166,9 +145,7 @@ function onkeydown(e) {
     }
 
     .MenuContent {
-        position: fixed;
-        left: var(--left, 0);
-        top: var(--top, 0);
+        max-height: calc(50vh - 2rem);
         margin: 0;
         z-index: 1000;
         margin: 0;
@@ -177,17 +154,21 @@ function onkeydown(e) {
         box-shadow: 0 0.5rem 1rem var(--shadow);
         background-color: var(--menu-bg);
         width: var(--width, 25ch);
-        overflow: clip;
+        overflow-x: clip;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color);
+    }
+    
+    .MenuContent.scrollable {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
     .MenuContent:has(li:last-of-type[data-type="item"]) {
         padding-block-end: 0.5rem;
     }
 
-    nav[aria-expanded="true"] {
-        display: block;
-    }
-
     ul {
         margin: 0;
         list-style: none;