lutra 0.0.33 → 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,102 +1,49 @@
 {
 	"name": "lutra",
-	"version": "0.0.33",
+	"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": "svelte-kit sync && svelte-package && publint && npm run props",
+		"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"
-		},
-		"./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"
-		},
-		"./form/types": {
-			"types": "./dist/form/types.d.ts",
-			"import": "./dist/form/types.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": {
-			"types": "./dist/utils/index.d.ts",
-			"svelte": "./dist/utils/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.46.1",
-		"@rollup/browser": "^4.21.2",
-		"@sveltejs/adapter-auto": "^3.2.4",
-		"@sveltejs/package": "^2.3.4",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@types/glob": "8.1.0",
-		"@types/ws": "^8.5.12",
-		"glob": "^11.0.0",
-		"highlight.js": "^11.10.0",
-		"mdsvex": "^0.12.3",
-		"monaco-editor": "^0.51.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.10",
-		"svelte": "5.0.0-next.243",
-		"svelte-check": "^4.0.0",
-		"tslib": "^2.7.0",
-		"typescript": "^5.5.4",
-		"vite": "5.4.3",
-		"vitest": "2.0.5"
+		"@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",
-		"browser-image-compression": "^2.0.2",
-		"esm-env": "^1.0.0",
-		"ws": "^8.18.0",
-		"zod": "^3.23.8"
+		"esm-env": "^1.2.2",
+		"marked": "^15.0.12"
 	}
 }

package/dist/display/Avatar.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
-let {
-  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

@@ -1,19 +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 Avatar: $$__sveltets_2_IsomorphicComponent<{
-    src?: string;
-    name?: string;
-    shape?: "circle" | "square" | "rounded";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Avatar = InstanceType<typeof Avatar>;
-export default Avatar;