lutra 0.0.33 → 0.1.4

package/dist/layout/LayoutHeader.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">import {} from "svelte";
-let {
-  left,
-  center,
-  right,
-  sticky,
-  skipToContentText = "Skip to content"
-} = $props();
-</script>
-
-<header class="LayoutHeader" class:sticky>
-    <a href="#skip" class="Skip">{skipToContentText}</a>
-    <ul>
-        {#if left}
-            <li class="left">
-                {@render left()}
-            </li>
-        {/if}
-        {#if center}
-            <li class="center">
-                {@render center()}
-            </li>
-        {/if}
-        {#if right}
-            <li class="right">
-                {@render right()}
-            </li>
-        {/if}
-    </ul>
-</header>
-
-<style>
-    .LayoutHeader {
-        position: relative;
-        z-index: 1;
-        padding: 0.5rem 1rem;
-        background: color-mix(in srgb, var(--bg-app) 50%, transparent 50%);
-        backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(16px);
-        display: flex;
-        place-items: center;
-    }
-    .LayoutHeader.sticky {
-        position: sticky;
-        top: 0;
-    }
-    .Skip {
-        position: absolute;
-        top: -40px;
-        left: 0;
-        padding: 0.5rem;
-        background: var(--bg-app);
-        font-size: 1rem;
-        z-index: 1000;
-    }
-    .Skip:focus {
-        top: 0;
-    }
-    .right :global(a) {
-        color: var(--text);
-    }
-    .right :global(a:hover) {
-        color: var(--text-link);
-    }
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: grid;
-        grid-template-areas: "left center right";
-        grid-template-columns: 1fr auto 1fr;
-        align-items: center;
-        max-width: var(--max-width, 100%);
-    }
-    li {
-        padding: 0;
-        margin: 0;
-        flex-basis: 0;
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        gap: 1rem;
-    }
-    li.left { grid-area: left; }
-    li.center { grid-area: center; }
-    li.right { grid-area: right; }
-    ul > :not(:first-child):not(:last-child) {
-        grid-column: center;
-    }
-    ul > :first-child:last-child {
-        grid-column: 1 / -1;
-    }
-    li.right {
-        display: flex;
-        justify-content: flex-end;
-    }
-</style>

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

@@ -1,34 +0,0 @@
-import { type Snippet } from "svelte";
-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 LayoutHeader: $$__sveltets_2_IsomorphicComponent<{
-    left?: Snippet;
-    /**
-     * The center of the header (usually a menu), search bar, etc.
-     */
-    center?: Snippet;
-    /**
-     * The right side of the header (usually user info, settings, etc.)
-     */
-    right?: Snippet;
-    /**
-     * The text to display for the skip to content link
-     */
-    skipToContentText?: string;
-    /**
-     * Whether the header should be sticky
-     */
-    sticky?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type LayoutHeader = InstanceType<typeof LayoutHeader>;
-export default LayoutHeader;

package/dist/layout/LayoutSideMenu.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">import MenuItem from "../nav/MenuItem.svelte";
-let {
-  items,
-  children,
-  navContainer
-} = $props();
-</script>
-
-{#snippet content()}
-<nav>
-    <ul>
-        {#each items as item, index}
-            <MenuItem {index} {item} />
-        {/each}
-    </ul>
-</nav>
-{/snippet}
-
-<main>
-    <aside>
-        {#if navContainer}
-            {@render navContainer(content)}
-        {:else}
-            {@render content()}
-        {/if}
-    </aside>
-    {@render children()}
-</main>
-
-<style>
-    main {
-        display: grid;
-        grid-template-columns: clamp(10rem, 20%, 20rem) 1fr;
-        min-height: 100%;
-    }
-    nav {
-        --menu-item-margin: 0;
-    }
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        position: sticky;
-        top: -1rem;
-        border-left: 1px solid var(--border);
-    }
-    @media(max-width: 800px) {
-        main {
-            grid-template-columns: 1fr;
-        }
-        nav {
-            padding: 0 1rem;
-        }
-    }
-</style>

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

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-import type { MenuItem as Item } from "../nav/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 LayoutSideMenu: $$__sveltets_2_IsomorphicComponent<{
-    items: Item[];
-    children: Snippet;
-    navContainer?: Snippet<[content: Snippet]>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type LayoutSideMenu = InstanceType<typeof LayoutSideMenu>;
-export default LayoutSideMenu;

package/dist/layout/LayoutTypes.d.ts

@@ -1,15 +0,0 @@
-/**
- * Layout container types.
- * `ui` is for UI components. It will not add margins.
- * `page` is for page content. It will add automatic margins to typography and other page content.
- */
-export type LayoutContainerType = 'ui' | 'page';
-export declare const BREAKPOINTS: {
-    s: number;
-    m: number;
-    l: number;
-};
-export declare const BREAKPOINT_SIZES: number[];
-export declare const SMALLEST_BREAKPOINT: number;
-export declare const LARGEST_BREAKPOINT: number;
-export declare const MIN_WIDTH = 280;

package/dist/layout/LayoutTypes.js

@@ -1,9 +0,0 @@
-export const BREAKPOINTS = {
-    s: 320,
-    m: 672,
-    l: 1312,
-};
-export const BREAKPOINT_SIZES = Object.values(BREAKPOINTS);
-export const SMALLEST_BREAKPOINT = BREAKPOINT_SIZES[0];
-export const LARGEST_BREAKPOINT = BREAKPOINT_SIZES[BREAKPOINT_SIZES.length - 1];
-export const MIN_WIDTH = 280;

package/dist/layout/Overlay.svelte

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

@@ -1,25 +0,0 @@
-import { type Snippet } from "svelte";
-import { type OverlayPosition, type TransitionOpts } from "./overlays.svelte.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 Overlay: $$__sveltets_2_IsomorphicComponent<{
-    id?: string;
-    children: Snippet;
-    anchor?: HTMLElement;
-    layer?: string;
-    position?: OverlayPosition;
-    transition?: TransitionOpts;
-    z?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Overlay = InstanceType<typeof Overlay>;
-export default Overlay;

package/dist/layout/OverlayLayer.svelte

@@ -1,140 +0,0 @@
-<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)}
-                <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

@@ -1,19 +0,0 @@
-import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.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 OverlayLayer: $$__sveltets_2_IsomorphicComponent<{
-    position?: OverlayPosition;
-    items: OverlayItem[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type OverlayLayer = InstanceType<typeof OverlayLayer>;
-export default OverlayLayer;

package/dist/layout/PageContent.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">import { setContext } from "svelte";
-let {
-  children,
-  pad = false,
-  middle = false,
-  center = false,
-  style
-} = $props();
-let padStyle = $derived.by(() => {
-  if (typeof pad === "boolean") {
-    return `--padBlockStart: ${pad ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
-  } else if (typeof pad === "string") {
-    return `--padBlockStart: ${pad}; --padBlockEnd: ${pad}; --padInlineStart: ${pad}; --padInlineEnd: ${pad};`;
-  } else if (Array.isArray(pad) && pad.length > 1 && typeof pad[0] === "string") {
-    switch (pad.length) {
-      case 2:
-        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[0]}; --padInlineStart: ${pad[1]}; --padInlineEnd: ${pad[1]};`;
-      case 3:
-        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[1]}; --padInlineStart: ${pad[2]}; --padInlineEnd: ${pad[2]};`;
-      case 4:
-        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[1]}; --padInlineStart: ${pad[2]}; --padInlineEnd: ${pad[3]};`;
-    }
-  } else if (Array.isArray(pad) && pad.length > 1) {
-    switch (pad.length) {
-      case 2:
-        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[1] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[1] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
-      case 3:
-        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
-      case 4:
-        return `--padBlockStart: ${pad[0] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--page-padding, var(--padding-block, var(--pad-xl)))" : "0"}; --padInlineStart: ${pad[2] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"}; --padInlineEnd: ${pad[3] ? "var(--page-padding, var(--padding-inline, var(--pad-xl)))" : "0"};`;
-    }
-  }
-  return "";
-});
-</script>
-
-<article
-    class="Page"
-    class:middle
-    class:center
-    style="{padStyle} {style}"
->
-    <div class="PaddingContainer">
-        <div class="PageContent">
-            {@render children()}
-        </div>
-    </div>
-</article>
-
-<style>
-    .Page {
-        inline-size: 100%;
-        display: grid;
-        grid-template-columns: 1fr;
-        container-type: inline-size;
-        container-name: page;
-        position: relative;
-    }
-    .PageContent {
-        container-type: inline-size;
-        max-inline-size: var(--max-inline-size, 1560px);
-        flex-grow: 1;
-        --isPage: 1;
-    }
-    .Page.center {
-        justify-content: center;
-    }
-    .Page.middle {
-        block-size: 100%;
-        align-items: center;
-    }
-    .Page .PaddingContainer {
-        padding-block-start: var(--padBlockStart);
-        padding-block-end: var(--padBlockEnd);
-        padding-inline-start: var(--padInlineStart);
-        padding-inline-end: var(--padInlineEnd);
-        display: flex;
-    }
-    .Page.center .PaddingContainer {
-        justify-content: center;
-    }
-</style>

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

@@ -1,25 +0,0 @@
-import { type Snippet } from "svelte";
-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 PageContent: $$__sveltets_2_IsomorphicComponent<{
-    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?: boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | string | [string, string] | [string, string, string] | [string, string, string, string];
-    /** Center the content in the block direction. */
-    middle?: boolean;
-    /** Center the content in the inline direction. */
-    center?: boolean;
-    style?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PageContent = InstanceType<typeof PageContent>;
-export default PageContent;