lutra 0.0.20 → 0.1.0

package/dist/layout/Layout.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">import "../style.css";
-import Theme from "./Theme.svelte";
-import OverlayContainer from "./OverlayContainer.svelte";
-let {
-  theme,
-  children
-} = $props();
-</script>
-
-<!-- This is an SVG filter that makes text black or white based on the luminance of the background. -->
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0" style="position:absolute; height:0; width:0; display: contents;">
-    <defs>
-        <filter id="bwFilter" color-interpolation-filters="sRGB">
-            <!-- Convert to grayscale based on luminance -->
-            <feColorMatrix type="matrix"
-                values="0.2126 0.7152 0.0722 0 0
-                        0.2126 0.7152 0.0722 0 0
-                        0.2126 0.7152 0.0722 0 0
-                        0 0 0 1 0"/>
-            <!-- Expand edges slightly to clean up any fringing -->
-            <feMorphology operator="dilate" radius="2"/>
-            <!-- Apply the threshold to determine if the color should be black or white -->
-            <feComponentTransfer>
-                <feFuncR type="linear" slope="-255" intercept="128"/>
-                <feFuncG type="linear" slope="-255" intercept="128"/>
-                <feFuncB type="linear" slope="-255" intercept="128"/>
-            </feComponentTransfer>
-            <!-- Composite step to clean up the result -->
-            <feComposite operator="in" in2="SourceGraphic"/>
-        </filter>
-    </defs>
-</svg>
-
-<div class="Layout">
-    <Theme theme={theme}>
-        {@render children()}
-        <OverlayContainer />
-    </Theme>
-</div>
-
-<style>
-    .Layout {
-        display: contents;
-    }
-</style>

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

@@ -1,25 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-import "../style.css";
-declare const __propDef: {
-    props: {
-        theme?: 'light' | 'dark' | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayoutProps = typeof __propDef.props;
-export type LayoutEvents = typeof __propDef.events;
-export type LayoutSlots = typeof __propDef.slots;
-export default class Layout extends SvelteComponent<LayoutProps, LayoutEvents, LayoutSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        theme?: "light" | "dark" | 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/LayoutFooter.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">let {
-  copyright
-} = $props();
-</script>
-
-<footer>
-    <p>&copy; {new Date().getFullYear()} {copyright}. All rights reserved.</p>
-</footer>
-
-<style>
-    footer {
-        padding: var(--padding, 4rem 4rem);
-        font-size: 0.85em;
-        color: var(--text-subtle);
-    }
-    @media (max-width: 640px) {
-        footer {
-            padding: calc(var(--padding, 4rem) / 2);
-        }
-    }
-</style>

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

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        copyright?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayoutFooterProps = typeof __propDef.props;
-export type LayoutFooterEvents = typeof __propDef.events;
-export type LayoutFooterSlots = typeof __propDef.slots;
-export default class LayoutFooter extends SvelteComponent<LayoutFooterProps, LayoutFooterEvents, LayoutFooterSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        copyright?: string | undefined;
-    }>);
-}
-export {};

package/dist/layout/LayoutGrid.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">import { setContext } from "svelte";
-let {
-  children,
-  header,
-  footer,
-  border,
-  sticky
-} = $props();
-</script>
-
-<div class="LayoutGrid" class:footer class:header class:border>
-    {#if header}
-        {@render header()}
-    {/if}
-    <main>
-        {@render children()}
-    </main>
-    {#if footer}
-        {@render footer()}
-    {/if}
-</div>
-
-<style>
-    .LayoutGrid {
-        display: grid;
-        container-type: inline-size;
-        -webkit-overflow-scrolling: touch;
-        min-block-size: var(--min-block-size, 100%);
-        background-color: var(--bg-app);
-    }
-    .LayoutGrid.footer.header {
-        grid-template-rows: auto 1fr auto;
-    }
-    .LayoutGrid.header {
-        grid-template-rows: auto 1fr;
-    }
-    .LayoutGrid.footer {
-        grid-template-rows: 1fr auto;
-    }
-    header.sticky {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-    }
-    .LayoutGrid.border header {
-        border-block-end: var(--header-border, var(--border-subtle));
-    }
-    .LayoutGrid.border footer {
-        border-block-start: var(--footer-border, var(--border-subtle));
-    }
-</style>

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

@@ -1,38 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        header?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        border?: boolean | undefined;
-        sticky?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayoutGridProps = typeof __propDef.props;
-export type LayoutGridEvents = typeof __propDef.events;
-export type LayoutGridSlots = typeof __propDef.slots;
-export default class LayoutGrid extends SvelteComponent<LayoutGridProps, LayoutGridEvents, LayoutGridSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        header?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        border?: boolean | undefined;
-        sticky?: boolean | 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/LayoutHeader.svelte

@@ -1,94 +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);
-    }
-    .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;
-    }
-    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,39 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        left?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        center?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        right?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        skipToContentText?: string | undefined;
-        sticky?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayoutHeaderProps = typeof __propDef.props;
-export type LayoutHeaderEvents = typeof __propDef.events;
-export type LayoutHeaderSlots = typeof __propDef.slots;
-export default class LayoutHeader extends SvelteComponent<LayoutHeaderProps, LayoutHeaderEvents, LayoutHeaderSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        left?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        center?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        right?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        skipToContentText?: string | undefined;
-        sticky?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/layout/LayoutSideMenu.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">import MenuItem from "../nav/MenuItem.svelte";
-let {
-  items,
-  children
-} = $props();
-</script>
-
-<main>
-    <aside>
-        <nav>
-            <ul>
-                {#each items as item, index}
-                    <MenuItem {index} {item} />
-                {/each}
-            </ul>
-        </nav>
-    </aside>
-    {@render children()}
-</main>
-
-<style>
-    main {
-        display: grid;
-        grid-template-columns: clamp(10rem, 20%, 20rem) 1fr;
-    }
-    nav {
-        padding: 4rem 0 4rem 2rem;
-        --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: 1280px) {
-        nav {
-            padding: 2rem 0 2rem 1rem;
-        }
-        ul {
-            padding: 0;
-        }
-    }
-    @media(max-width: 800px) {
-        main {
-            grid-template-columns: 1fr;
-        }
-        nav {
-            padding: 0 1rem;
-        }
-    }
-</style>

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

@@ -1,25 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-import type { MenuItem as Item } from "../nav/MenuTypes.js";
-declare const __propDef: {
-    props: {
-        items: Item[];
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayoutSideMenuProps = typeof __propDef.props;
-export type LayoutSideMenuEvents = typeof __propDef.events;
-export type LayoutSideMenuSlots = typeof __propDef.slots;
-export default class LayoutSideMenu extends SvelteComponent<LayoutSideMenuProps, LayoutSideMenuEvents, LayoutSideMenuSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        items: Item[];
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

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

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

@@ -1,16 +0,0 @@
-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 {};