lutra 0.0.1

package/README.md

@@ -0,0 +1,29 @@
+# AUI
+
+## Local development
+
+During local development, the REPL compiler requests library files from the local `dist` folder when they are imported. To serve these, run the `local.js` script.
+
+```bash
+pnpm local
+```
+
+### Rewriting props
+
+When you edit a component's description or props, you need to regenerate `componentProps.ts`.
+
+`read_props.js` reads all the library files and generates props to display in the docs from the AST. Running
+
+```bash
+pnpm props
+```
+
+will read the props and write `componentProps.ts`.
+
+Running:
+
+```bash
+pnpm package
+```
+
+will write the props and generate the library Svelte files.

package/dist/Data/Stat.svelte

@@ -0,0 +1,89 @@
+<script>import { getStatusColorVar, isStatusColor } from "../utils/color.js";
+import { isSnippet } from "../utils/isSnippet.js";
+let {
+  title,
+  value,
+  prefix,
+  suffix,
+  color,
+  formatter
+} = $props();
+let colorVar = $derived(getStatusColorVar(color, "var(--bg-app)"));
+let _value = $derived.by(() => {
+  if (typeof value === "number" && formatter?.constructor === Intl.NumberFormat) {
+    console.log("value is number and formatter is object");
+    return formatter.format(value);
+  } else if (value instanceof Date && formatter?.constructor === Intl.DateTimeFormat) {
+    console.log("value is date and formatter is object");
+    return formatter.format(value);
+  } else if (typeof value === "number") {
+    console.log("value is number");
+    return value.toLocaleString();
+  } else if (typeof value === "string") {
+    console.log("value is string");
+    return value;
+  } else if (value instanceof Date) {
+    console.log("value is date");
+    return value.toLocaleDateString();
+  }
+  if (typeof formatter === "function") {
+    console.log("formatter is function");
+    return formatter(value);
+  }
+  return value;
+});
+</script>
+
+<section class="Stat" style="--bgColor: {colorVar};">
+    {#if title}
+        <header>{title}</header>
+    {/if}
+    <main>
+        {#if prefix}
+            {#if typeof prefix === "string"}
+                <span class="Fix Prefix">{prefix}</span>
+            {:else if isSnippet(prefix)}
+                {@render prefix()}
+            {:else}
+                <svlte:component this={prefix} />
+            {/if}
+        {/if}
+        {_value}
+        {#if suffix}
+            {#if typeof suffix === "string"}
+                <span class="Fix Suffix">{suffix}</span>
+            {:else if isSnippet(suffix)}
+                {@render suffix()}
+            {:else}
+                <svlte:component this={suffix} />
+            {/if}
+        {/if}
+    </main>
+</section>
+
+<style>
+    .Stat {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 1rem;
+        margin-inline: -1rem;
+        margin-block: -1rem;
+        background-color: var(--bgColor);
+    }
+    header {
+        font-size: max(0.9em, 11px);
+        font-weight: 500;
+        opacity: 0.75;
+        color: var(--bgColor);
+        filter: url(#bwFilter);
+    }
+    main {
+        font-size: 1.5em;
+        opacity: 0.95;
+        font-weight: 700;
+        color: var(--bgColor);
+        filter: url(#bwFilter);
+    }
+</style>

package/dist/Data/Stat.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+import { type StatusColorOrString } from "../utils/color.js";
+declare const __propDef: {
+    props: {
+        /** The title of the stat. */
+        title?: string | undefined;
+        /** The value to display. */
+        value?: string | number | Date | undefined;
+        /** The prefix to display before the value. Can be a string, a URL, a Snippet, or a Svelte component. */
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        /** The suffix to display after the value. Can be a string, a URL, a Snippet, or a Svelte component. */
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        /** The color of the stat. */
+        color?: StatusColorOrString | undefined;
+        /** A function to format the value. Can be an [Intl.NumberFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat), an [Intl.DateTimeFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), or a function that takes in a value and returns a string. */
+        formatter?: Intl.NumberFormat | Intl.DateTimeFormat | ((value: number | string | Date | undefined) => string) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StatProps = typeof __propDef.props;
+export type StatEvents = typeof __propDef.events;
+export type StatSlots = typeof __propDef.slots;
+export default class Stat extends SvelteComponent<StatProps, StatEvents, StatSlots> {
+}
+export {};

package/dist/DataTable/DataTable.svelte

@@ -0,0 +1,36 @@
+<script>import UiContent from "../Layout/UIContent.svelte";
+import { setContext } from "svelte";
+let {
+  contained,
+  children
+} = $props();
+let columns = $state(0);
+setContext("DataTableColumns", {
+  addColumn: () => {
+    console.log("addColumn");
+    columns++;
+  }
+});
+</script>
+
+<UiContent>
+    <section class="DataTable" class:contained style="--dtc: {contained ? 1 : 0}; --dtcols: {columns};">
+        {@render children()}
+    </section>
+</UiContent>
+
+<style>
+    section {
+        container-type: inline-size;
+        display: grid;
+        grid-template-columns: repeat(calc(var(--dtcols) - 1), auto) 1fr;
+        border-radius: var(--border-radius);
+        width: 100%;
+        font-size: var(--font-size, 1em);
+    }
+    section.contained {
+        border: var(--border);
+        border-radius: var(--border-radius);
+        overflow: clip;
+    }
+</style>

package/dist/DataTable/DataTable.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The number of columns to display the data in. */
+        contained?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableProps = typeof __propDef.props;
+export type DataTableEvents = typeof __propDef.events;
+export type DataTableSlots = typeof __propDef.slots;
+export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
+}
+export {};

package/dist/DataTable/DataTableColumn.svelte

@@ -0,0 +1,20 @@
+<script>import { getContext } from "svelte";
+let {
+  children
+} = $props();
+const { header } = getContext("DataTableRow");
+if (header) {
+  getContext("DataTableColumns").addColumn();
+}
+</script>
+
+<div class="DataTableColumn">
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
+
+<style>
+    .DataTableColumn {
+    }
+</style>

package/dist/DataTable/DataTableColumn.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableColumnProps = typeof __propDef.props;
+export type DataTableColumnEvents = typeof __propDef.events;
+export type DataTableColumnSlots = typeof __propDef.slots;
+export default class DataTableColumn extends SvelteComponent<DataTableColumnProps, DataTableColumnEvents, DataTableColumnSlots> {
+}
+export {};

package/dist/DataTable/DataTableRow.svelte

@@ -0,0 +1,28 @@
+<script>import { setContext } from "svelte";
+let {
+  children,
+  header = false
+} = $props();
+setContext("DataTableRow", { header });
+</script>
+
+<svelte:element this={header ? "header" : "section"} class="DataTableRow" class:header>
+    {@render children()}
+</svelte:element>
+
+<style>
+    .DataTableRow {
+        display: grid;
+        grid-column: 1 / calc(var(--dtcols) + 1);
+        grid-template-columns: subgrid;
+        gap: 1.5em;
+        align-items: center;
+        padding: 0.75em calc(1.5em * var(--dtc));
+    }
+    .DataTableRow.header {
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+    }
+    section:not(:first-child) {
+        border-top: var(--border);
+    }
+</style>

package/dist/DataTable/DataTableRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        header?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableRowProps = typeof __propDef.props;
+export type DataTableRowEvents = typeof __propDef.events;
+export type DataTableRowSlots = typeof __propDef.slots;
+export default class DataTableRow extends SvelteComponent<DataTableRowProps, DataTableRowEvents, DataTableRowSlots> {
+}
+export {};

package/dist/Display/Avatar.svelte

@@ -0,0 +1,61 @@
+<script>import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
+const {
+  src,
+  name = "N/A",
+  shape = "circle"
+} = $props();
+const color = stringToColor(name);
+const luminance = hexRelativeLuminance(color);
+const textColor = luminance < 0.5 ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)";
+</script>
+
+<figure class="Avatar {shape}" style="--user-color: {color}; --text-color: {textColor};">
+    {#if src}
+        <img src={src} alt={name} />
+    {:else}
+        <div class="Placeholder">
+            <span>{name[0]}</span>
+        </div>
+    {/if}
+</figure>
+
+<style>
+    .Avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        block-size: var(--size, 3rem);
+        inline-size: var(--size, 3rem);
+        overflow: hidden;
+        background-color: var(--user-color);
+        mask-image: var(--mask-image, none);
+        mask-size: 100% 100%;
+        mask-repeat: no-repeat;
+        -webkit-mask-image: var(--mask-image, none);
+        -webkit-mask-size: 100% 100%;
+        -webkit-mask-repeat: no-repeat;
+    }
+    .Avatar.circle { border-radius: 50%; }
+    .Avatar.square { border-radius: 0; }
+    .Avatar.rounded { border-radius: var(--border-radius); }
+    .Avatar img {
+        block-size: 100%;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+    .Avatar .Placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 100%;
+        inline-size: 100%;
+        background-color: var(--user-color);
+    }
+    .Avatar .Placeholder span {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-color);
+        user-select: none;
+    }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        src?: string | undefined;
+        name?: string | undefined;
+        shape?: "circle" | "square" | "rounded" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/Display/Badge.svelte

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { StatusColorOrString } from "../utils/color.js";
+declare const __propDef: {
+    props: {
+        /** Count to display in the badge. */
+        count?: number | undefined;
+        /** The maximum count to display. */
+        max?: number | undefined;
+        /** The color of the tag. */
+        color?: StatusColorOrString | undefined;
+        /** Whether to add a glow to the badge. */
+        glow?: boolean | undefined;
+        /** Whether to add an outline to the badge. */
+        outline?: boolean | undefined;
+        /** The content to display inside the badge. */
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponent<BadgeProps, BadgeEvents, BadgeSlots> {
+}
+export {};

package/dist/Display/Callout.svelte

@@ -0,0 +1,105 @@
+<script>import Icon from "./Icon.svelte";
+import Alert from "../Icons/Alert.svelte";
+import Info from "../Icons/Info.svelte";
+import Success from "../Icons/Success.svelte";
+import Warning from "../Icons/Warning.svelte";
+import Error from "../Icons/Error.svelte";
+import PageContent from "../Layout/PageContent.svelte";
+import Tooltip from "./Tooltip.svelte";
+let {
+  icon,
+  type,
+  contained,
+  rounded,
+  dismissable
+} = $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>
+    {#if icon}
+        <Icon {icon} width="1.5rem" />
+    {/if}
+    <div class="CalloutText">
+        <PageContent>
+            <slot />
+        </PageContent>
+    </div>
+    {#if dismissable}
+        <div class="Dismiss">
+            <Tooltip tip="Dismiss">
+                <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);
+    }
+    .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;
+    }
+</style>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The icon to display. If not specified, it will default to the type. */
+        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        /** The type of callout. If not specified and no icon is provided, no icon will be displayed. */
+        type?: "ok" | "alert" | "warn" | "info" | "task" | undefined;
+        /** Whether to contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Whether to round the corners of the element. */
+        rounded?: boolean | undefined;
+        /** Whether the callout is dismissable. */
+        dismissable?: boolean | undefined;
+    } & {
+        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CalloutProps = typeof __propDef.props;
+export type CalloutEvents = typeof __propDef.events;
+export type CalloutSlots = typeof __propDef.slots;
+export default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
+}
+export {};