lutra 0.0.20 → 0.1.0

package/dist/display/ContextTip.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        tip: string | Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ContextTipProps = typeof __propDef.props;
-export type ContextTipEvents = typeof __propDef.events;
-export type ContextTipSlots = typeof __propDef.slots;
-export default class ContextTip extends SvelteComponent<ContextTipProps, ContextTipEvents, ContextTipSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        tip: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-    }>);
-}
-export {};

package/dist/display/Details.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">let {
-  summary,
-  contained,
-  rounded,
-  open,
-  children
-} = $props();
-</script>
-
-<details class:contained class:rounded bind:open>
-    <summary>
-        {#if typeof summary === 'string'}
-            <span>{summary}</span>
-        {:else}
-            {@render summary()}
-        {/if}
-    </summary>
-    <section>
-        {@render children()}
-    </section>
-</details>
-
-<style>
-    summary {
-        font-weight: 600;
-        font-size: var(--font-size, 1em);
-        cursor: pointer;
-        padding-block-end: 0.5rem;
-    }
-    details.rounded {
-        border-radius: var(--border-radius);
-    }
-    details.contained {
-        border: var(--border);
-        overflow: hidden;
-    }
-    details.contained[open] summary {
-        border-block-end: var(--border);
-    }
-    details.contained summary {
-        padding: var(--padding, 0.5em 1em);
-        background-color: var(--summary-bg, var(--bg-subtle));
-    }
-    details.contained section {
-        font-size: var(--font-size, 1em);
-        padding: var(--padding, 0.5em 1em);
-        background-color: var(--content-bg, transparent);
-    }
-</style>

package/dist/display/Details.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        summary: string | Snippet;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        open?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DetailsProps = typeof __propDef.props;
-export type DetailsEvents = typeof __propDef.events;
-export type DetailsSlots = typeof __propDef.slots;
-export default class Details extends SvelteComponent<DetailsProps, DetailsEvents, DetailsSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        summary: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        open?: 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/display/Hero.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">import { setContext } from "svelte";
-let {
-  children,
-  pad = true,
-  center = false,
-  fullWidth = false,
-  contained = false
-} = $props();
-</script>
-
-<section class="Hero" class:pad class:fullWidth class:center class:contained>
-    <main>
-        {@render children()}
-    </main>
-</section>
-
-<style>
-    .Hero {
-        background: var(--bg, var(--bg-subtle));
-        container-type: inline-size;
-        text-wrap: balance;
-    }
-    .Hero.contained main {
-        max-inline-size: var(--max-inline-size, 1560px);
-    }
-    /** Header areas where h1 is followed by h2 */
-    .Hero :global(h1:has(+ h2)) {
-        margin-block-end: 1rem;
-    }
-    .Hero :global(h1 + h2) {
-        color: var(--text-subtle);
-        margin-block-start: 0rem;
-    }
-    .Hero {
-        block-size: 100%;
-        margin-inline: 0;
-    }
-    .Hero.fullWidth {
-        inline-size: 100cqi;
-        margin-inline: calc(50% - 50cqi);
-        min-inline-size: 100%;
-    }
-    .Hero.center main {
-        margin-inline: auto;
-    }
-    .Hero.pad {
-        padding-block: var(--padding, var(--padding-block, 4rem));
-        padding-inline: var(--padding, var(--padding-inline, 4rem));
-    }
-</style>

package/dist/display/Hero.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-        pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
-        center?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        contained?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HeroProps = typeof __propDef.props;
-export type HeroEvents = typeof __propDef.events;
-export type HeroSlots = typeof __propDef.slots;
-export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
-    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;
-        center?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        contained?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/display/Icon.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">import { isComponent, isSnippet } from "../utils/isSnippet.js";
-let {
-  icon,
-  alt
-} = $props();
-</script>
-
-<span class="Icon" aria-label="icon">
-    {#if typeof icon === "string"}
-        <img src={icon} alt={alt ? alt : 'Icon'} width="100%" height="100%" />
-    {:else if isComponent(icon)}
-        <svelte:component this={icon} />
-    {:else if isSnippet(icon)}
-        {@render icon()}
-    {/if}
-</span>
-
-<style>
-    .Icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1em;
-        line-height: inherit;
-        width: max(
-            var(--icon-width,
-                var(--icon-height, 1rem)
-            ), 16px);
-        height: max(var(--icon-height, auto), 16px);
-        overflow: clip;
-        vertical-align: var(--vertical-align, text-bottom);
-        cursor: var(--cursor, default);
-    }
-    img,
-    .Icon :global(svg) {
-        width: 100%;
-        height: auto;
-        display: block;
-    }
-</style>

package/dist/display/Icon.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType, Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        icon: string | Snippet | ComponentType;
-        alt?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        icon: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType;
-        alt?: string | undefined;
-    }>);
-}
-export {};

package/dist/display/IconButton.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">import Icon from "./Icon.svelte";
-import { fly } from "svelte/transition";
-import { popBezier, popBezierInverse } from "../utils/transitions.js";
-let {
-  icon,
-  disabled,
-  children,
-  onclick
-} = $props();
-</script>
-
-{#snippet inside()}
-    <span class="IconMask">
-        {#key icon}
-            <span class="IconContent" in:fly={{ duration: 250, y: -32, easing: popBezier }} out:fly={{ duration: 250, y: 32, easing: popBezierInverse }}>
-                <Icon {icon} --cursor="pointer" />
-                {#if children}
-                    {@render children()}
-                {/if}
-            </span>
-        {/key}
-    </span>
-{/snippet}
-
-{#if onclick}
-    <button type="button" {disabled} class="IconButton" {onclick}>
-        {@render inside()}
-    </button>
-{:else}
-    <span class="IconButton">
-        {@render inside()}
-    </span>
-{/if}
-
-<style>
-    .IconButton {
-        display: inline-flex;
-        align-items: stretch;
-        color: inherit;
-        opacity: 1;
-        background-color: var(--field-bg);
-        transition: background-color 0.04s;
-        border-radius: var(--field-radius);
-    }
-    .IconButton:hover {
-        background-color: var(--menu-bg-hover);
-    }
-    .IconButton:active {
-        scale: 1;
-    }
-    button.IconButton {
-        border: none;
-        background: none;
-        cursor: pointer;
-        color: var(--text);
-    }
-    .IconMask {
-        height: 100%;
-        padding-inline: var(--padding, 0.75em);
-        padding-block: var(--padding, 0.75em);
-        display: inline-grid;
-        gap: 0.5rem;
-        grid-template: "icon";
-        align-items: center;
-        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0));
-        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0));
-    }
-    .IconContent {
-        grid-area: icon;
-        display: inline-flex;
-    }
-    @media(max-width: 960px) {
-        .IconMask {
-            padding-inline: calc(var(--padding, 0.75em) * 0.75);
-            padding-block: calc(var(--padding, 0.75em) * 0.75);
-        }
-    }
-    @media(max-width: 320px) {
-        .IconMask {
-            padding-inline: calc(var(--padding, 0.75em) * 0.6);
-            padding-block: calc(var(--padding, 0.75em) * 0.6);
-        }
-    }
-</style>

package/dist/display/IconButton.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-declare const __propDef: {
-    props: {
-        icon: string | ComponentType;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconButtonProps = typeof __propDef.props;
-export type IconButtonEvents = typeof __propDef.events;
-export type IconButtonSlots = typeof __propDef.slots;
-export default class IconButton extends SvelteComponent<IconButtonProps, IconButtonEvents, IconButtonSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        icon: string | ComponentType;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        disabled?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/display/Image.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">import { decode } from "blurhash";
-import { fade } from "svelte/transition";
-let {
-  hash,
-  width,
-  height,
-  aspectRatio,
-  fit,
-  src,
-  srcset,
-  alt,
-  style,
-  class: className
-} = $props();
-let canvas = $state(null);
-let el = $state(null);
-let elWidth = $state(32);
-let elHeight = $state(32);
-if (!src && srcset) {
-  const [src1] = srcset.split(", ");
-  src = src1.split(" ")[0];
-}
-if (!style) {
-  style = `aspect-ratio: ${aspectRatio};`;
-} else {
-  style += ` aspect-ratio: ${aspectRatio};`;
-}
-let decoded = $state(false);
-let loaded = $state(false);
-const onload = () => {
-  loaded = true;
-};
-$effect(() => {
-  if (hash) {
-    setTimeout(() => {
-      const pixels = decode(hash, elWidth, elHeight);
-      const ctx = canvas.getContext("2d");
-      const imageData = ctx.createImageData(elWidth, elHeight);
-      imageData.data.set(pixels);
-      ctx.putImageData(imageData, 0, 0);
-      decoded = true;
-    }, 0);
-  }
-});
-</script>
-
-<div class="BlurHashImage" class:loaded>
-    <img
-        bind:this={el}
-        bind:clientWidth={elWidth}
-        bind:clientHeight={elHeight}
-        onload={onload}
-        src={src}
-        srcset={srcset}
-        alt={alt}
-        width={width}
-        height={height}
-        style={style}
-        class="{className} {fit}"
-    />
-    {#if !loaded && hash}
-        <canvas class:decoded out:fade={{ duration: 100 }} width={elWidth} height={elHeight} bind:this={canvas}></canvas>
-    {/if}
-</div>
-
-<style>
-    .BlurHashImage {
-        position: relative;
-        display: grid;
-        grid-template-areas: "img";
-    }
-    canvas {
-        z-index: 2;
-        opacity: 0;
-        width: 100%;
-        grid-area: img;
-        transition: opacity 200ms;
-    }
-    canvas.decoded {
-        opacity: 1;
-    }
-    img {
-        z-index: 1;
-        grid-area: img;
-        display: inline-block;
-        vertical-align: middle;
-    }
-    img.cover { object-fit: cover; }
-    img.contain { object-fit: contain; }
-    img.scale-down { object-fit: scale-down; }
-</style>

package/dist/display/Image.svelte.d.ts

@@ -1,37 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        hash?: string | undefined;
-        aspectRatio?: string | undefined;
-        fit?: "cover" | "contain" | "scale-down" | undefined;
-        src?: string | undefined;
-        srcset?: string | undefined;
-        alt?: string | undefined;
-        width?: string | number | undefined;
-        height?: string | number | undefined;
-        style?: string | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ImageProps = typeof __propDef.props;
-export type ImageEvents = typeof __propDef.events;
-export type ImageSlots = typeof __propDef.slots;
-export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        hash?: string | undefined;
-        aspectRatio?: string | undefined;
-        fit?: "cover" | "contain" | "scale-down" | undefined;
-        src?: string | undefined;
-        srcset?: string | undefined;
-        alt?: string | undefined;
-        width?: string | number | undefined;
-        height?: string | number | undefined;
-        style?: string | undefined;
-        class?: string | undefined;
-    }>);
-}
-export {};