lutra 0.0.33 → 0.1.0

package/dist/display/Badge.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">import { isStatusColor } from "../utils/color.js";
-let {
-  count,
-  max = 99,
-  color = "alert",
-  glow = true,
-  outline = true,
-  children
-} = $props();
-let el = $state(null);
-let isSet = $derived(isStatusColor(color));
-let charCount = $derived.by(() => {
-  if (count === void 0) return 0;
-  if (max && count > max) return max.toString().length + 1;
-  return count.toString().length;
-});
-</script>
-
-<div class="BadgeContainer">
-    <div class="BadgeContent">
-        {#if children}
-            {@render children()}
-        {/if}
-    </div>
-    <span class="Badge" class:outline class:glow class:empty={count === undefined} bind:this={el} style="--charCount: {charCount}ch; --bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
-        {#if count && max}
-            <em>
-                {count > max ? `${max}+` : count}
-            </em>
-        {/if}
-    </span>
-</div>
-
-
-<style>
-    .BadgeContainer {
-        position: relative;
-        display: inline-grid;
-        grid-template-columns: fit-content;
-        grid-template-areas: "content";
-        text-rendering: geometricPrecision;
-    }
-    .BadgeContent {
-        grid-area: content;
-    }
-    .Badge {
-        --internalSize: max(calc(var(--size, 0.75rem)), 14px);
-        display: grid;
-        place-items: center;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: calc(1px + var(--top, 0%));
-        right: var(--right, 0%);
-        transform: translate(0.55rem, -50%);
-        background-color: var(--bgColor);
-        padding: 3px 5px 2px 5px;
-        border-radius: 9999px;
-        --h: max(calc(var(--internalSize) * 0.9), 9px);
-        font-size: var(--h);
-        line-height: var(--h);
-        z-index: 100;
-        font-weight: 600;
-        grid-area: content;
-    }
-    .Badge.outline {
-        outline: min(calc(var(--size, 0.75rem) * 0.25), 2px) solid var(--outline-color, var(--bg-app));
-    }
-    .Badge.empty {
-        width: max(0.5rem, 8px);
-        height: max(0.5rem, 8px);
-        min-width: auto;
-        aspect-ratio: 1/1;
-        transform: translate(50%, -50%);
-        padding: 0;
-    }
-    .Badge.glow {
-        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--bgColor) 30%, transparent 70%));
-    }
-    em {
-        opacity: 0.99;
-        font-style: normal;
-        color: var(--bgColor);
-        filter: invert(1) grayscale(1) brightness(1.3) contrast(9000%);
-        mix-blend-mode: luminosity;
-        left: 50%;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
-    }
-</style>

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

@@ -1,30 +0,0 @@
-import type { Snippet } from "svelte";
-import type { StatusColorOrString } from "../utils/color.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 Badge: $$__sveltets_2_IsomorphicComponent<{
-    /** Count to display in the badge. */
-    count?: number;
-    /** The maximum count to display. */
-    max?: number;
-    /** The color of the tag. */
-    color?: StatusColorOrString;
-    /** Whether to add a glow to the badge. */
-    glow?: boolean;
-    /** Whether to add an outline to the badge. */
-    outline?: boolean;
-    /** The content to display inside the badge. */
-    children?: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Badge = InstanceType<typeof Badge>;
-export default Badge;

package/dist/display/Callout.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">import Icon from "./Icon.svelte";
-import Alert from "../icons/IconAlert.svelte";
-import Info from "../icons/IconInfo.svelte";
-import Success from "../icons/IconSuccess.svelte";
-import Warning from "../icons/IconWarning.svelte";
-import Error from "../icons/IconError.svelte";
-import Tooltip from "./Tooltip.svelte";
-let {
-  icon,
-  type,
-  contained,
-  rounded,
-  dismissable,
-  children
-} = $props();
-if (!icon) {
-  switch (type) {
-    case "alert":
-      icon = Alert;
-      break;
-    case "info":
-      icon = Info;
-      break;
-    case "ok":
-      icon = Success;
-      break;
-    case "warn":
-      icon = Warning;
-      break;
-    case "task":
-      icon = Error;
-      break;
-    default:
-      icon = void 0;
-      break;
-  }
-}
-</script>
-
-<div class="Callout {type}" class:hasIcon={!!icon} class:contained class:rounded class:dismissable style="--margin-scale: 0.5;">
-    {#if icon}
-        <Icon {icon} --icon-width="1.5rem" --icon-height="1.5rem" />
-    {/if}
-    <div class="CalloutText">
-        {@render children()}
-    </div>
-    {#if dismissable}
-        <div class="Dismiss">
-            <Tooltip tip="Dismiss">
-                <button type="button" class="CalloutDismiss" aria-label="Dismiss callout">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 1L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M1 15L15 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </button>
-            </Tooltip>
-        </div>
-    {/if}
-</div>
-
-<style>
-    .Callout {
-        background: var(--bg, var(--bg-subtle));
-        padding: var(--padding, 1rem);
-        display: grid;
-        gap: var(--gap, 1rem);
-        align-items: var(--align-items, start);
-        --text-heading: hsla(240, 10%, 98%);
-        --text: hsla(240, 10%, 95%);
-        --text-subtle: hsla(240, 10%, 90%);
-        color: var(--text-heading);
-    }
-    .Callout.contained {
-        border: var(--border);
-    }
-    .Callout.rounded {
-        border-radius: var(--border-radius);
-    }
-    .Callout.hasIcon {
-        grid-template-columns: auto 1fr;
-    }
-    .Callout.dismissable {
-        grid-template-columns: 1fr auto;
-    }
-    .Callout.dismissable.hasIcon {
-        grid-template-columns: auto 1fr auto;
-    }
-    .CalloutText {
-        font-size: var(--font-size, 1em);
-        line-height: 1.5;
-    }
-    .Callout.info {
-        --bg: var(--status-info);
-    }
-    .Callout.ok {
-        --bg: var(--status-ok);
-    }
-    .Dismiss {
-        margin: -0.75rem;
-    }
-    .CalloutDismiss {
-        background: transparent;
-        border: none;
-        padding: 0.75rem;
-        cursor: pointer;
-    }
-    .CalloutText {
-    }
-</style>

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

@@ -1,28 +0,0 @@
-import type { Component, 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 Callout: $$__sveltets_2_IsomorphicComponent<{
-    /** The icon to display. If not specified, it will default to the type. */
-    icon?: string | Component;
-    /** The type of callout. If not specified and no icon is provided, no icon will be displayed. */
-    type?: "alert" | "info" | "ok" | "warn" | "task";
-    /** Whether to contain the element in a box. */
-    contained?: boolean;
-    /** Whether to round the corners of the element. */
-    rounded?: boolean;
-    /** Whether the callout is dismissable. */
-    dismissable?: boolean;
-    children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Callout = InstanceType<typeof Callout>;
-export default Callout;

package/dist/display/Close.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">let {
-  onclick,
-  position
-} = $props();
-</script>
-
-<button class="Close {position}" {onclick}>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-    </svg>
-</button>
-
-<style>
-    .Close {
-        cursor: pointer;
-        padding: var(--close-padding, 0.5rem);
-        border-radius: 50%;
-        color: var(--text);
-        cursor: pointer;
-        pointer-events: auto;
-    }
-
-    svg {
-        width: max(1.5rem, 16px);
-        height: max(1.5rem, 16px);
-    }
-
-    .Close:hover {
-        color: var(--text-subtle);
-    }
-
-    .Close.top {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 100;
-    }
-
-    .Close.bottom {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-    }
-
-    .Close.left {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: auto;
-    }
-
-    .Close.right {
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-</style>

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

@@ -1,18 +0,0 @@
-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 Close: $$__sveltets_2_IsomorphicComponent<{
-    onclick?: (e: MouseEvent) => void;
-    position?: "top left" | "top right" | "bottom left" | "bottom right";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Close = InstanceType<typeof Close>;
-export default Close;

package/dist/display/Code.svelte

@@ -1,190 +0,0 @@
-<script lang="ts">import Copy from "../icons/IconCopy.svelte";
-import Done from "../icons/IconDone.svelte";
-import IconButton from "./IconButton.svelte";
-import Tooltip from "./Tooltip.svelte";
-let {
-  code = $bindable(""),
-  highlight,
-  copyable,
-  contained,
-  rounded,
-  singleLine,
-  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) {
-  console.log("scrolling");
-  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 class:rounded class:copyable class:contained class:hasOverlay={highlight}>
-    {#if singleLine}
-        <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}
-    {#if highlight}
-        <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}
-    {#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-columns: 1fr;
-        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);
-        scrollbar-width: thin;
-    }
-    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;
-        scrollbar-width: thin;
-    }
-    .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;
-    }
-
-    .Line {
-        display: grid;
-    }
-    .Code.lineNumbers .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

@@ -1,32 +0,0 @@
-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 Code: $$__sveltets_2_IsomorphicComponent<{
-    /** The code to display. */
-    code: string;
-    /** A function to highlight parts of the code. */
-    highlight?: (code: string) => string;
-    /** Whether the code is copyable. */
-    copyable?: boolean;
-    /** Whether to contain the element in a box. */
-    contained?: boolean;
-    /** Whether to round the corners of the element. */
-    rounded?: boolean;
-    /** Whether the code is a single line. */
-    singleLine?: boolean;
-    /** Whether to show line numbers. */
-    lineNumbers?: boolean;
-    /** Whether the code is readonly. */
-    readonly?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "code">;
-type Code = InstanceType<typeof Code>;
-export default Code;

package/dist/display/ContextTip.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">import Tooltip from "./Tooltip.svelte";
-import Help from "../icons/IconHelp.svelte";
-import Icon from "./Icon.svelte";
-let {
-  tip
-} = $props();
-</script>
-
-<Tooltip {tip}>
-    <a href="#contexttip" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
-        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" --vertical-align="baseline" />
-    </a>
-</Tooltip>
-
-<style>
-    a {
-        border-radius: 50%;
-        color: var(--text);
-        height: 16px;
-        width: 16px;
-        display: inline-block;
-    }
-</style>

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

@@ -1,18 +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 ContextTip: $$__sveltets_2_IsomorphicComponent<{
-    tip: string | Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ContextTip = InstanceType<typeof ContextTip>;
-export default ContextTip;

package/dist/display/DataList.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  items
-} = $props();
-</script>
-
-<div class="data-list">
-    {#each items as { label, value }, i}
-        <div class="data-list-item">
-            <div class="data-list-item-label">{label}</div>
-            <div class="data-list-item-value">
-                <StringOrSnippet content={value} />
-            </div>
-        </div>
-    {/each}
-</div>

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

@@ -1,21 +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 DataList: $$__sveltets_2_IsomorphicComponent<{
-    items: {
-        label: string;
-        value: string | Snippet;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type DataList = InstanceType<typeof DataList>;
-export default DataList;

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>