lutra 0.0.20 → 0.1.0

package/dist/css/2-base.css

@@ -0,0 +1,209 @@
+/**
+ * Base DOM setup
+ */
+:root {
+    --space-xxxs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio));
+    --space-xxs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio));
+    --space-xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio));
+    --space-s: calc(var(--space-base) / var(--space-ratio));
+    --space-m: var(--space-base);
+    --space-l: calc(var(--space-base) * var(--space-ratio));
+    --space-xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio));
+    --space-xxl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio));
+    --space-xxxl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio));
+}
+
+body {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overscroll-behavior: none;
+    overscroll-behavior-x: none;
+    font-family: var(--font-family);
+    padding: 0;
+    margin: 0;
+    min-width: 280px;
+    width: 100%;
+    min-height: 0;
+}
+
+body * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    color-scheme: light dark;
+}
+
+input, textarea, select, button {
+    touch-action: manipulation;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input, textarea, select {
+    border-radius: var(--field-radius);
+    border-style: var(--field-border-style);
+    border-width: var(--field-border-size);
+    border-color: var(--field-border-color);
+    color: var(--field-text-color);
+    background-color: var(--field-bg-color);
+    padding: var(--field-padding);
+}
+
+.button,
+::file-selector-button {
+    cursor: pointer;
+    border-radius: var(--button-radius);
+    padding: var(--button-padding);
+    color: var(--button-text-color);
+    background-color: var(--button-bg-color);
+    border-width: var(--button-border-size);
+    border-style: var(--button-border-style);
+    border-color: var(--button-border-color);
+}
+
+.button:hover,
+::file-selector-button:hover {
+    color: var(--button-hover-text-color);
+    background-color: var(--button-hover-bg-color);
+    border-color: var(--button-hover-border-color);
+}
+
+.button:active,
+::file-selector-button:active {
+    color: var(--button-active-text-color);
+    background-color: var(--button-active-bg-color);
+    border-color: var(--button-active-border-color);
+}
+
+.button.secondary {
+    color: var(--button-secondary-text-color);
+    background-color: var(--button-secondary-bg-color);
+    border-color: var(--button-secondary-border-color);
+}
+
+.button.secondary:hover {
+    color: var(--button-secondary-hover-text-color);
+    background-color: var(--button-secondary-hover-bg-color);
+    border-color: var(--button-secondary-hover-bg-color);
+}
+
+.button.secondary:active {
+    color: var(--button-secondary-active-text-color);
+    background-color: var(--button-secondary-active-bg-color);
+    border-color: var(--button-secondary-active-bg-color);
+}
+
+.button.warning {
+    color: var(--button-warning-text-color);
+    background-color: var(--button-warning-bg-color);
+    border-color: var(--button-warning-border-color);
+}
+
+.button.warning:hover {
+    color: var(--button-warning-hover-text-color);
+    background-color: var(--button-warning-hover-bg-color);
+    border-color: var(--button-warning-hover-border-color);
+}
+
+.button.warning:active {
+    color: var(--button-warning-active-text-color);
+    background-color: var(--button-warning-active-bg-color);
+    border-color: var(--button-warning-active-border-color);
+}
+
+.button.danger {
+    color: var(--button-danger-text-color);
+    background-color: var(--button-danger-bg-color);
+    border-color: var(--button-danger-border-color);
+}
+
+.button.danger:hover {
+    color: var(--button-danger-hover-text-color);
+    background-color: var(--button-danger-hover-bg-color);
+    border-color: var(--button-danger-hover-border-color);
+}
+
+.button.danger:active {
+    color: var(--button-danger-active-text-color);
+    background-color: var(--button-danger-active-bg-color);
+    border-color: var(--button-danger-active-border-color);
+}
+
+.button.tertiary {
+    color: var(--button-tertiary-text-color);
+    background-color: var(--button-tertiary-bg-color);
+    border-color: var(--button-tertiary-border-color);
+}
+
+.button.tertiary:hover {
+    color: var(--button-tertiary-hover-text-color);
+    background-color: var(--button-tertiary-hover-bg-color);
+    border-color: var(--button-tertiary-hover-border-color);
+}
+
+.button.tertiary:active {
+    color: var(--button-tertiary-active-text-color);
+    background-color: var(--button-tertiary-active-bg-color);
+    border-color: var(--button-tertiary-active-border-color);
+}
+
+input::placeholder, textarea::placeholder, select::placeholder {
+    color: var(--field-placeholder-color);
+}
+
+*:focus-visible {
+    transition: outline 0.1s;
+    outline: var(--focus-size) solid var(--focus-color);
+    outline-offset: 0;
+    -webkit-outline-offset: 0;
+    transform: translateZ(0);
+}
+
+a {
+    color: var(--text-color-link);
+    text-decoration: var(--text-link-decoration);
+}
+
+a:hover {
+    color: var(--text-color-link-hover);
+    text-decoration: var(--text-link-decoration-hover);
+}
+
+a:active {
+    color: var(--text-color-link-active);
+}
+
+a:visited {
+    color: var(--text-color-link-visited);
+}
+
+pre, code {
+    font-family: var(--font-family-mono);
+}
+
+pre {
+    background-color: var(--code-bg-color);
+    color: var(--code-text-color);
+    border: var(--code-border-size) solid var(--code-border-color);
+    padding: var(--space-m);
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+}
+
+code {
+    background-color: var(--code-bg-color);
+    color: var(--code-text-color);
+    padding: var(--space-xxxs) var(--space-xxs);
+    border-radius: var(--border-radius);
+}
+
+pre code {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+}

package/dist/css/3-typo.css

@@ -0,0 +1,65 @@
+/**
+ * Base typography setup
+ */
+
+small {
+    font-size: calc(var(--font-size-base) / var(--font-size-ratio));
+}
+
+p, li, input, textarea, select, button {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
+}
+
+p, li, h6, h5, h4, h3, h2, h1, li, input, textarea, select, button {
+    line-height: var(--line-height);
+}
+
+p, li {
+    color: var(--text-color);
+}
+
+input, textarea, select, button {
+    font-family: var(--font-family);
+    color: var(--field-text-color);
+    background-color: var(--field-bg-color);
+    border-color: var(--field-border-color);
+}
+
+small {
+    color: var(--text-color-subtle);
+}
+
+h6, h5, h4, h3, h2, h1 {
+    color: var(--text-color-heading);
+}
+
+h6 {
+    font-size: calc(var(--font-size-base) * var(--font-size-ratio));
+    font-weight: var(--font-weight-medium);
+}
+
+h5 {
+    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 2));
+    font-weight: var(--font-weight-semibold);
+}
+
+h4 {
+    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 3));
+    font-weight: var(--font-weight-semibold);
+}
+
+h3 {
+    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 4));
+    font-weight: var(--font-weight-bold);
+}
+
+h2 {
+    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 5));
+    font-weight: var(--font-weight-bold);
+}
+
+h1 {
+    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 6));
+    font-weight: var(--font-weight-bold);
+}

package/dist/css/4-layout.css

@@ -0,0 +1,5 @@
+@scope (.PageContent) to (.UIContent) {
+    p {
+        margin-bottom: calc(var(--margin-base) * var(--margin-multiplier));
+    }
+}

package/dist/css/5-media.css

@@ -0,0 +1,21 @@
+@media(prefers-reduced-motion: reduce) {
+    * {
+        transition-duration: 0s !important;
+    }
+}
+
+/*
+@media(max-width: 1280px) {
+    :root {
+        --font-size-base: 14px;
+        --space-ratio: 1.2;
+    }
+}
+
+@media(max-width: 640px) {
+    :root {
+        --font-size-base: 12px;
+        --space-ratio: 1.1;
+    }
+}
+*/

package/dist/css/lutra.css

@@ -0,0 +1,6 @@
+@import "./0-layers.css";
+@import "./1-props.css";
+@import "./2-base.css" layer(l-base);
+@import "./3-typo.css" layer(l-typo);
+@import "./4-layout.css" layer(l-layout);
+@import "./5-media.css" layer(l-media);

package/dist/index.d.ts

@@ -1 +1,5 @@
-export {};
+export { default as AspectRatio } from './components/AspectRatio.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Layout } from './components/Layout.svelte';
+export { default as Theme } from './components/Theme.svelte';
+export { default as PageContent } from './components/PageContent.svelte';

package/dist/index.js

@@ -1,2 +1,5 @@
-"use strict";
-// Reexport your entry components here
+export { default as AspectRatio } from './components/AspectRatio.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Layout } from './components/Layout.svelte';
+export { default as Theme } from './components/Theme.svelte';
+export { default as PageContent } from './components/PageContent.svelte';

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+export interface LutraConfig {
+    /**
+     * The default theme to use.
+     */
+    theme?: 'light' | 'dark' | 'auto' | 'inherit';
+    /**
+     * Theme color for the theme-color meta tag. Only used in the root theme.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+     */
+    themeColor: {
+        light?: string;
+        dark?: string;
+    };
+    /**
+     * Whether to show a background color or image on the components.
+     */
+    background?: boolean;
+    /**
+     * Whether to use a contained layout (with borders and rounded corners).
+     */
+    contained?: boolean;
+}
+/**
+ * Default Lutra config.
+ */
+export declare const defaultConfig: LutraConfig;
+export declare const setConfig: (config: Partial<LutraConfig>) => void;
+export declare enum LutraContext {
+    Theme = "lutra.theme",
+    Config = "lutra.config",
+    SecChPrefersColorScheme = "sec-ch-prefers-color-scheme"
+}
+export type LutraTheme = 'light' | 'dark' | 'invert' | undefined;
+export type LutraContextTypeMap = {
+    [LutraContext.Theme]: LutraTheme;
+    [LutraContext.Config]: LutraConfig;
+    [LutraContext.SecChPrefersColorScheme]: 'light' | 'dark' | undefined;
+};
+export declare function getContextItem<K extends keyof LutraContextTypeMap>(key: K): LutraContextTypeMap[K] | undefined;

package/dist/types.js

@@ -0,0 +1,25 @@
+import { getContext } from "svelte";
+/**
+ * Default Lutra config.
+ */
+export const defaultConfig = {
+    theme: undefined,
+    themeColor: {
+        light: '#fff',
+        dark: '#000',
+    },
+    background: true,
+    contained: true,
+};
+export const setConfig = (config) => {
+    Object.assign(config, config);
+};
+export var LutraContext;
+(function (LutraContext) {
+    LutraContext["Theme"] = "lutra.theme";
+    LutraContext["Config"] = "lutra.config";
+    LutraContext["SecChPrefersColorScheme"] = "sec-ch-prefers-color-scheme";
+})(LutraContext || (LutraContext = {}));
+export function getContextItem(key) {
+    return getContext(key);
+}

package/package.json

@@ -1,95 +1,49 @@
 {
 	"name": "lutra",
-	"version": "0.0.20",
+	"version": "0.1.0",
 	"scripts": {
-		"dev": "vite dev --host 0.0.0.0",
-		"props": "node read_props.js",
-		"local": "node local",
+		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "npm run props && svelte-kit sync && svelte-package && publint",
+		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./data": {
-			"types": "./dist/data/index.d.ts",
-			"svelte": "./dist/data/index.js"
-		},
-		"./display": {
-			"types": "./dist/display/index.d.ts",
-			"svelte": "./dist/display/index.js"
-		},
-		"./form": {
-			"types": "./dist/form/index.d.ts",
-			"svelte": "./dist/form/index.js",
-			"import": "./dist/form/index.js"
-		},
-		"./icons": {
-			"types": "./dist/icons/index.d.ts",
-			"svelte": "./dist/icons/index.js"
-		},
-		"./layout": {
-			"types": "./dist/layout/index.d.ts",
-			"svelte": "./dist/layout/index.js"
-		},
-		"./nav": {
-			"types": "./dist/nav/index.d.ts",
-			"svelte": "./dist/nav/index.js"
-		},
-		"./typo": {
-			"types": "./dist/typo/index.d.ts",
-			"svelte": "./dist/typo/index.js"
-		},
-		"./utils/*": "./dist/utils/*"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.5.0",
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.43.1",
-		"@rollup/browser": "^4.17.2",
-		"@sveltejs/adapter-auto": "^3.2.0",
-		"@sveltejs/package": "^2.3.1",
-		"@sveltejs/vite-plugin-svelte": "^3.1.0",
-		"@types/glob": "8.1.0",
-		"glob": "^10.3.12",
-		"highlight.js": "^11.9.0",
-		"mdsvex": "^0.11.0",
-		"monaco-editor": "^0.48.0",
-		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.3",
-		"publint": "^0.2.7",
-		"svelte": "next",
-		"svelte-check": "^3.7.0",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"vite": "5.2.10",
-		"vitest": "1.5.3"
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
+		"@sveltejs/package": "^2.3.11",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@types/node": "^22.15.24",
+		"publint": "^0.3.12",
+		"svelte": "^5.33.9",
+		"svelte-check": "^4.2.1",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
 	"dependencies": {
-		"@auth70/bodyguard": "^1.6.2",
-		"@auth70/zodex-esm": "^0.7.3",
-		"blurhash": "^2.0.5",
-		"esm-env": "^1.0.0",
-		"zod": "^3.23.5"
+		"esm-env": "^1.2.2",
+		"marked": "^15.0.12"
 	}
 }

package/dist/data/Stat.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">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

@@ -1,39 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-import { type StatusColorOrString } from "../utils/color.js";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        value?: string | number | Date | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        color?: StatusColorOrString | undefined;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        title?: string | undefined;
-        value?: string | number | Date | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        color?: StatusColorOrString | undefined;
-        formatter?: Intl.NumberFormat | Intl.DateTimeFormat | ((value: string | number | Date | undefined) => string) | undefined;
-    }>);
-}
-export {};

package/dist/data/index.d.ts

@@ -1 +0,0 @@
-export { default as Stat } from './Stat.svelte';

package/dist/data/index.js

@@ -1 +0,0 @@
-export { default as Stat } from './Stat.svelte';