lutra 0.0.33 → 0.1.0

package/dist/layout/index.d.ts

@@ -1,11 +0,0 @@
-export { default as Layout } from './Layout.svelte';
-export { default as LayoutFooter } from './LayoutFooter.svelte';
-export { default as LayoutGrid } from './LayoutGrid.svelte';
-export { default as LayoutHeader } from './LayoutHeader.svelte';
-export { default as LayoutSideMenu } from './LayoutSideMenu.svelte';
-export { default as Overlay } from './Overlay.svelte';
-export { default as OverlayContainer } from './OverlayContainer.svelte';
-export { default as OverlayLayer } from './OverlayLayer.svelte';
-export { default as PageContent } from './PageContent.svelte';
-export { default as UIContent } from './UIContent.svelte';
-export { default as Theme } from './Theme.svelte';

package/dist/layout/index.js

@@ -1,11 +0,0 @@
-export { default as Layout } from './Layout.svelte';
-export { default as LayoutFooter } from './LayoutFooter.svelte';
-export { default as LayoutGrid } from './LayoutGrid.svelte';
-export { default as LayoutHeader } from './LayoutHeader.svelte';
-export { default as LayoutSideMenu } from './LayoutSideMenu.svelte';
-export { default as Overlay } from './Overlay.svelte';
-export { default as OverlayContainer } from './OverlayContainer.svelte';
-export { default as OverlayLayer } from './OverlayLayer.svelte';
-export { default as PageContent } from './PageContent.svelte';
-export { default as UIContent } from './UIContent.svelte';
-export { default as Theme } from './Theme.svelte';

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

@@ -1,34 +0,0 @@
-import type { Component, 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 | Component;
-    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

@@ -1,44 +0,0 @@
-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

@@ -1,82 +0,0 @@
-<script lang="ts">let {
-  items,
-  separator = "/",
-  contained,
-  fullWidth,
-  center
-} = $props();
-</script>
-
-<nav class:center class:contained class:fullWidth aria-label="Breadcrumb">
-    <ol>
-        {#each items as item, index}
-            <li aria-current={index === items.length - 1 ? "page" : undefined}>
-                {#if item.href && index < items.length - 1}
-                    <a href={item.href}>{item.label}</a>
-                {:else}
-                    <span>{item.label}</span>
-                {/if}
-            </li>
-            {#if index !== items.length - 1}
-                <li aria-hidden="true" class="separator">
-                    {#if typeof separator === "string"}
-                        <span>{separator}</span>
-                    {/if}
-                </li>
-            {/if}
-        {/each}
-    </ol>
-</nav>
-
-<style>
-    nav {
-        padding: 0;
-        block-size: auto;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        font-size: var(--font-size, 1em);
-    }
-
-    nav ol {
-        display: flex;
-        align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        gap: 0.5rem;
-        border-radius: var(--border-radius);
-    }
-
-    nav ol li {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        padding: 0;
-    }
-
-    .separator span {
-        font-size: 1rem;
-        line-height: 1rem;
-        color: var(--text-subtle);
-    }
-
-    nav.contained ol {
-        padding: 0 1rem;
-        border: var(--border);
-    }
-
-    nav.contained ol li a {
-        padding: var(--padding, 0.5rem 0);
-    }
-
-    nav.center {
-        justify-content: center;
-    }
-
-    nav.fullWidth ol {
-        block-size: 100%;
-    }
-
-</style>

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

@@ -1,28 +0,0 @@
-import type { Component, Snippet } from "svelte";
-import type { BreadcrumbItem } from "./MenuTypes.js";
-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;
-    z_$$bindings?: Bindings;
-}
-declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
-    /** The items to display in the breadcrumb. */
-    items: BreadcrumbItem[];
-    /** The separator to use between breadcrumb items. */
-    separator?: string | Snippet | Component;
-    /** Contain the element in a box. */
-    contained?: boolean;
-    /** Make the element full width. */
-    fullWidth?: boolean;
-    /** Center the items in the element. */
-    center?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Breadcrumb = InstanceType<typeof Breadcrumb>;
-export default Breadcrumb;

package/dist/nav/Menu.svelte

@@ -1,170 +0,0 @@
-<script lang="ts">import MenuItem from "./MenuItem.svelte";
-import { createId } from "../utils/id.js";
-import UiContent from "../layout/UIContent.svelte";
-import { arrowNavigation, getNextFocusableElement, matchOnType } from "../utils/keyboard.svelte.js";
-import { findContainingBlock, getPossiblyContainedPosition } from "../utils/dom.js";
-import Overlay from "../layout/Overlay.svelte";
-let {
-  open = $bindable(false),
-  items,
-  trigger
-} = $props();
-let _open = $state(open);
-let triggerEl = $state(null);
-let contentEl = $state(null);
-let menuEl = $state(null);
-let currentIndex = $state(-1);
-let keyboardHasFocus = $state(false);
-const id = createId();
-$effect(() => {
-  if (_open) {
-    window.addEventListener("click", clickoutside);
-    window.addEventListener("keydown", onkeydown);
-  } else {
-    window.removeEventListener("click", clickoutside);
-    window.removeEventListener("keydown", onkeydown);
-  }
-});
-function toggle() {
-  _open = !_open;
-}
-let scrollable = $derived.by(() => {
-  if (!contentEl) return false;
-  return contentEl.scrollHeight > contentEl.clientHeight;
-});
-function onclick(e) {
-  e.preventDefault();
-  _open = !_open;
-}
-function clickoutside(e) {
-  if (!_open) return;
-  if (contentEl && !contentEl.contains(e.target) && !triggerEl?.contains(e.target)) {
-    _open = false;
-  }
-}
-function onkeydown(e) {
-  if (!_open) return;
-  const active = document.activeElement;
-  switch (e.key) {
-    case "Escape":
-      e.preventDefault();
-      _open = false;
-      break;
-    case "Tab":
-      e.preventDefault();
-      e.stopPropagation();
-      _open = false;
-      setTimeout(() => {
-        const nextEl = getNextFocusableElement(menuEl, triggerEl, e.shiftKey ? "previous" : "next");
-        console.log("nextEl", nextEl);
-        if (nextEl) {
-          nextEl.focus();
-          if (nextEl.tagName === "BUTTON" || nextEl.tagName === "A" && nextEl.parentElement?.classList.contains("Trigger")) {
-            nextEl.click();
-          }
-        }
-      }, 0);
-      break;
-    case "ArrowDown":
-      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":
-      e.preventDefault();
-      active.click();
-      break;
-    default:
-      matchOnType(contentEl, e);
-  }
-}
-function mouseover(e, item, index) {
-  if (item.type === "item") {
-    currentIndex = index;
-  }
-}
-</script>
-
-
-<UiContent>
-    <div class="Menu" bind:this={menuEl}>
-        <div
-            class="Trigger"
-            bind:this={triggerEl}
-        >
-            {#if typeof trigger === "string"}
-                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
-                    {trigger}
-                </button>
-            {:else}
-                {@render trigger({ toggle: toggle, isOpen: _open })}
-            {/if}
-        </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>
-
-<style>
-    .Menu {
-        position: relative;
-    }
-
-    .Trigger {
-        position: relative;
-        display: inline-flex;
-    }
-
-    .MenuContent {
-        max-height: calc(50vh - 2rem);
-        margin: 0;
-        z-index: 1000;
-        margin: 0;
-        border: var(--menu-border);
-        border-radius: var(--border-radius);
-        box-shadow: 0 0.5rem 1rem var(--shadow);
-        background-color: var(--menu-bg);
-        width: var(--width, 25ch);
-        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;
-    }
-
-    ul {
-        margin: 0;
-        list-style: none;
-        padding: 0;
-    }
-</style>

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

@@ -1,27 +0,0 @@
-import type { Snippet } from "svelte";
-import type { MenuItem as Item } from "./MenuTypes.js";
-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;
-    z_$$bindings?: Bindings;
-}
-declare const Menu: $$__sveltets_2_IsomorphicComponent<{
-    /** Whether the menu is open */
-    open?: boolean;
-    /** The items to display in the menu */
-    items: Item[];
-    /** The trigger for the menu */
-    trigger: string | Snippet<[{
-        toggle: () => void;
-        isOpen: boolean;
-    }]>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "open">;
-type Menu = InstanceType<typeof Menu>;
-export default Menu;

package/dist/nav/MenuItem.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-import { isStatusColor } from "../utils/color.js";
-import { isComponent, isSnippet } from "../utils/isSnippet.js";
-let {
-  item,
-  index,
-  onmouseover,
-  keyboardHasFocus,
-  shape = "rounded"
-} = $props();
-let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false);
-let el = $state(null);
-function mouseover(e) {
-  if (onmouseover && item.type === "item") {
-    el?.focus();
-  }
-}
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<li
-    onmouseover={mouseover}
-    data-index={index}
-    class:keyboardHasFocus
-    class:divider={item.type === 'divider'}
-    class:header={item.type === 'header'}
-    class={shape}
-    data-type="{item.type}"
-    style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}"
->
-    {#if item.type === 'divider'}
-        <hr />
-    {:else if item.type === 'header'}
-        <div class="Header">
-            <StringOrSnippet content={item.content} />
-        </div>
-    {:else if item.type === 'item'}
-        {#if item.href}
-            <a href="{item.href}" class="Item" bind:this={el}>
-                <span class="Content">
-                    <StringOrSnippet content={item.content} />
-                </span>
-                {#if item.shortcut}
-                    <span class="Shortcut">{item.shortcut}</span>
-                {/if}
-            </a>
-        {:else if item.onclick}
-            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item" bind:this={el}>
-                <span class="Content">
-                    <StringOrSnippet content={item.content} />
-                </span>
-                {#if item.shortcut}
-                    <span class="Shortcut">{item.shortcut}</span>
-                {/if}
-            </button>
-        {:else if isSnippet(item.content)}
-            <div class="Item Custom">
-                {@render item.content()}
-            </div>
-        {:else if isComponent(item.content)}
-            <div class="Item Custom">
-                <item.content />
-            </div>
-        {/if}
-    {/if}
-</li>
-
-<style>
-    li {
-        margin: 0;
-        list-style: none;
-        padding: 0;
-        user-select: none;
-    }
-
-    li .Item,
-    li .Header {
-        font-size: var(--font-size, 0.9em);
-        text-align: left;
-        padding-block: 0.5rem;
-        padding-inline: 1rem;
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        color: inherit;
-        text-decoration: none;
-        color: var(--color);
-        --inset-block: 0.5rem;
-        --inset-inline: 1rem;
-    }
-
-    li.rounded .Item,
-    li.rounded .Header {
-        border-radius: var(--border-radius);
-    }
-
-    li .Header {
-        font-weight: 600;
-    }
-
-    li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
-    li .Item:not(.Custom):focus-visible {
-        background-color: var(--bg-hover);
-        cursor: pointer;
-        outline: none;
-    }
-
-    li .Item span.Shortcut {
-        font-size: max(0.75em, 9px);
-        text-align: right;
-        color: var(--text-subtle);
-    }
-
-    li .Item:not(.Custom):active {
-        scale: 1;
-    }
-
-    li.divider {
-        padding-block: 0.5rem;
-    }
-
-    hr {
-        display: block;
-        border: none;
-        margin: 0;
-        border-top: 1px solid var(--border-color);
-    }
-
-    li:first-child[data-type="item"] {
-        margin-block-start: var(--menu-item-margin, 0.5rem);
-    }
-
-    li:first-child[data-type="header"]:has(+ li[data-type="item"]) {
-        margin-block-end: 0.125rem;
-    }
-
-    li:nth-last-child(2)[data-type="item"]:has(+ li[data-type="header"]:last-child) {
-        margin-block-end: 0.5rem;
-    }
-
-    @media (pointer: none) {
-        li .Item span.Shortcut {
-            display: none;
-        }        
-    }
-</style>

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

@@ -1,22 +0,0 @@
-import type { MenuItem as Item } from "./MenuTypes.js";
-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;
-    z_$$bindings?: Bindings;
-}
-declare const MenuItem: $$__sveltets_2_IsomorphicComponent<{
-    item: Item;
-    index: number;
-    onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
-    keyboardHasFocus?: boolean;
-    shape?: "rounded" | "square" | "pill";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type MenuItem = InstanceType<typeof MenuItem>;
-export default MenuItem;

package/dist/nav/MenuTypes.d.ts

@@ -1,58 +0,0 @@
-import type { StatusColorOrString } from "../utils/color.js";
-import type { Component, Snippet } from "svelte";
-export type MenuItem = {
-    /** Type of menu item to render. */
-    type: 'divider';
-} | {
-    /** Type of menu item to render. */
-    type: 'header';
-    /** Text label of the item to display to the user. */
-    content: string | Snippet;
-    /** Color to use for the item. */
-    color?: StatusColorOrString;
-} | {
-    /** Type of menu item to render. */
-    type: 'item';
-    /** Content of the item to display to the user. */
-    content: string | Snippet;
-    /** Keyboard shortcut to display next to the item. */
-    shortcut?: string;
-    /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
-    icon?: string | Component;
-    /** Path or URL to use for the menu item. */
-    href?: string;
-    /** Click event handler. */
-    onclick?: (event: MouseEvent, item: MenuItem) => void;
-    /** If true, disables the item. */
-    disabled?: boolean;
-    /** Color to use for the item. */
-    color?: StatusColorOrString;
-    /** Menu item children. Pass an array of menu items to create a nested menu. */
-    children?: MenuItem[];
-};
-export type TabItem = {
-    /** Text label of the item to display to the user. */
-    label: string;
-    /** Path or URL to use for the item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active items. */
-    href?: string;
-    /** Click event handler. */
-    onclick?: (event: MouseEvent, item: TabItem, index: number) => void;
-    /** If true, overrides the currently selected item. */
-    active?: boolean;
-};
-export type TabbedContentItem = {
-    /** Text label of the item to display to the user. */
-    label: string;
-    /** URL hash to use for the item. */
-    hash?: string;
-    /** Content to display when the item is selected. */
-    content: Snippet;
-};
-export type BreadcrumbItem = {
-    /** Text label of the item to display to the user. */
-    label: string;
-    /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
-    icon?: string | Component;
-    /** Path or URL to use for the breadcrumb item. */
-    href?: string;
-};

package/dist/nav/MenuTypes.js

@@ -1 +0,0 @@
-export {};