lutra 0.0.1

package/dist/Display/Code.svelte

@@ -0,0 +1,195 @@
+<script>import Copy from "../Icons/Copy.svelte";
+import Done from "../Icons/Done.svelte";
+import IconButton from "./IconButton.svelte";
+import Tooltip from "./Tooltip.svelte";
+let {
+  code = $bindable(""),
+  highlight,
+  copyable,
+  contained,
+  rounded,
+  lineNumbers,
+  readonly
+} = $props();
+const numberOfLines = $derived(code.split("\n").length);
+let title = $state("Copy");
+let open = $state(false);
+let btnIcon = $state(Copy);
+let el = $state(null);
+let scrollTop = $state(0);
+let scrollLeft = $state(0);
+function copy() {
+  if (!el)
+    return;
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(code);
+  } else {
+    el.focus();
+    el.select();
+    document.execCommand("copy");
+  }
+  btnIcon = Done;
+  title = "Copied!";
+  open = true;
+  setTimeout(() => {
+    btnIcon = Copy;
+    title = "Copy";
+    open = false;
+  }, 1500);
+}
+function onscroll(e) {
+  scrollTop = e.target.scrollTop;
+  scrollLeft = e.target.scrollLeft;
+}
+let codeLines = $derived.by(() => {
+  return (highlight ? highlight(code) : code).split("\n") || [];
+});
+</script>
+
+<div class="Code" class:lineNumbers class:singleLine={numberOfLines === 1} class:rounded class:copyable class:contained class:hasOverlay={highlight}>
+    {#if numberOfLines === 1}
+        <input class="CodeInput" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" {readonly} bind:this={el} bind:value={code} title={copyable ? code : undefined} {onscroll} />
+    {:else}
+        <textarea class="CodeInput" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" {readonly} bind:this={el} bind:value={code} {onscroll}></textarea>
+    {/if}
+    <div class="Overlay" tabindex="-1" aria-hidden="true" style="top: {-scrollTop}px; left: {-scrollLeft}px;">
+        {#each codeLines as line, index}
+            <div class="Line">
+                {#if lineNumbers}
+                    <div class="Number">
+                        <span>{index + 1}</span>
+                    </div>
+                {/if}
+                <div class="Content">
+                    {@html line}
+                </div>
+            </div>
+        {/each}
+    </div>
+    {#if copyable}
+        <Tooltip tip={title} {open}>
+            <IconButton icon={btnIcon} onclick={copy} disabled={open} />
+        </Tooltip>
+    {/if}
+</div>
+
+<style>
+    .Code {
+        display: grid;
+        align-items: start;
+        grid-template-areas: "content";
+    }
+    .Code.lineNumbers {
+        grid-template-columns: auto 1fr;
+        grid-template-areas: "lines content";
+        margin-inline-start: -2rem;
+        width: calc(100% + 2rem);
+    }
+    .CodeInput,
+    .Overlay {
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size, 1em);
+        line-height: 1.5;
+        margin: 0;
+        border: 0;
+        grid-area: content;
+        background: var(--field-bg);
+    }
+    textarea {
+        width: 100%;
+        height: 100%;
+        white-space: pre-wrap;
+        word-break: normal;
+        overflow-wrap: anywhere;
+        direction: ltr;
+        writing-mode: lr;
+        resize: none;
+        z-index: -1;
+    }
+    .Code.lineNumbers textarea {
+        padding-inline-start: 2rem;
+        width: calc(100% - 2rem);
+    }
+    .Code.hasOverlay .CodeInput {
+        color: transparent;
+        caret-color: var(--text);
+    }
+    .Code.rounded,
+    .Code.rounded .CodeInput {
+        border-radius: var(--border-radius);
+    }
+    .Code.singleLine.copyable .CodeInput {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    /**
+     * Contained
+     */
+
+    .Code.contained {
+        border: var(--border);
+    }
+    .Code.contained .CodeInput,
+    .Code.contained .Overlay {
+        height: auto;
+        min-height: auto;
+        padding: var(--padding, 0.5rem 1rem);
+    }
+    .Code.contained:focus-within {
+        outline: var(--focus-outline);
+    }
+    .Code.contained:focus-within .CodeInput {
+        outline: none;
+    }
+    .Code.contained:focus-within:has(:focus:not(.CodeInput)) {
+        outline: none;
+    }
+
+    /**
+     * Single line
+     */
+
+    .Code.singleLine {
+        align-items: center;
+        overflow-inline: clip;
+    }
+    .Code.singleLine.copyable {
+        grid-template-columns: 1fr auto;
+        grid-template-areas: "content button";
+    }
+    .Code.singleLine.copyable .CodeInput,
+    .Code.singleLine.copyable .Overlay {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: var(--padding, 0.35rem 0.75rem);
+    }
+    .Code.singleLine .CodeInput,
+    .Code.singleLine .Overlay {
+        resize: none;
+        line-height: 1;
+    }
+
+    .LineNumbers {
+        grid-area: lines;
+        display: grid;
+        padding-right: 0.5rem;
+        width: 2rem;
+        font-size: var(--font-size, 1em);
+        line-height: 1.5;
+        text-align: end;
+        justify-content: end;
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size, 1em);
+        color: var(--text-subtle);
+        opacity: 0.75;
+    }
+    .Line {
+        display: grid;
+        grid-template-columns: 2rem 1fr;
+    }
+    .Line .Number {
+        text-align: end;
+        padding-inline-end: 0.5rem;
+    }
+</style>

package/dist/Display/Code.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The code to display. */
+        code: string;
+        /** A function to highlight parts of the code. */
+        highlight?: ((code: string) => string) | undefined;
+        /** Whether the code is copyable. */
+        copyable?: boolean | undefined;
+        /** Whether to contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Whether to round the corners of the element. */
+        rounded?: boolean | undefined;
+        /** Whether to show line numbers. */
+        lineNumbers?: boolean | undefined;
+        /** Whether the code is readonly. */
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/dist/Display/ContextTip.svelte

@@ -0,0 +1,23 @@
+<script>import Tooltip from "./Tooltip.svelte";
+import Help from "../Icons/Help.svelte";
+import Icon from "./Icon.svelte";
+let {
+  tip
+} = $props();
+</script>
+
+<Tooltip {tip}>
+    <button onclick={(e) => e.preventDefault()}>
+        <Icon icon={Help} />
+    </button>
+</Tooltip>
+
+<style>
+    button {
+        border-radius: 50%;
+    }
+    button:focus,
+    button:active {
+        outline-offset: -3px;
+    }
+</style>

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

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

package/dist/Display/Details.svelte

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The summary of the element. Can be a string or a snippet. */
+        summary: string | Snippet;
+        /** Contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean | undefined;
+        /** Whether the details are open. */
+        open?: boolean | undefined;
+        /** The content of the element. */
+        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> {
+}
+export {};

package/dist/Display/Hero.svelte

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+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. */
+        center?: boolean | undefined;
+        /** Make the hero full width to the container (nearest element with `container-type: inline-size;`) */
+        fullWidth?: boolean | undefined;
+        /** Contain the hero to the container (nearest element with `container-type: inline-size;`) */
+        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> {
+}
+export {};

package/dist/Display/Icon.svelte

@@ -0,0 +1,35 @@
+<script>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;
+        width: var(--icon-width, var(--font-size, 1em));
+        height: var(--icon-height, var(--font-size, 1em));
+        overflow: clip;
+        vertical-align: var(--vertical-align, baseline);
+        cursor: var(--cursor, default);
+    }
+    .Icon :global(svg) {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+    }
+</style>

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

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

package/dist/Display/IconButton.svelte

@@ -0,0 +1,85 @@
+<script>import Icon from "./Icon.svelte";
+import { fade, fly, slide } from "svelte/transition";
+import { popBezier, popBezierInverse } from "../utils/transitions.js";
+import { cubicIn, cubicOut } from "svelte/easing";
+let {
+  icon,
+  hang,
+  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} />
+                {#if children}
+                    {@render children()}
+                {/if}
+            </span>
+        {/key}
+    </span>
+{/snippet}
+
+{#if onclick}
+    <button {disabled} class="IconButton" class:hang {onclick}>
+        {@render inside()}
+    </button>
+{:else}
+    <span class="IconButton" class:hang>
+        {@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.1s;
+    }
+    .IconButton:active {
+        scale: 1;
+    }
+    .IconButton.hang {
+        margin-inline-start: calc(-1 * var(--padding, 0.75rem));
+    }
+    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: 640px) {
+        .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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The icon to display. */
+        icon: string | ComponentType;
+        /** Whether the button should hang to the inline start to line up with other elements. The amount of hanging is the same as the padding. */
+        hang?: boolean | undefined;
+        /** The children to display. */
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** The onclick event. */
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        /** Whether the button is disabled. */
+        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> {
+}
+export {};