@noxlovette/material 0.1.0

package/dist/utils/theme.svelte.d.ts

@@ -0,0 +1,24 @@
+export type ColorScheme = 'light' | 'dark' | 'system';
+export type ContrastMode = 'standard' | 'medium' | 'high';
+export type ThemeVariant = 'tonal-spot' | 'fidelity' | 'content' | 'vibrant' | 'fruit-salad' | 'rainbow';
+export interface ThemeConfig {
+    sourceColor: string;
+    scheme: ColorScheme;
+    contrast: ContrastMode;
+    variant: ThemeVariant;
+}
+export declare const DEFAULT_CONFIG: ThemeConfig;
+/**
+ * Global reactive theme state.
+ * Changes to this state will automatically update the theme if the <Theme /> component is mounted.
+ */
+export declare const themeState: ThemeConfig;
+export declare function isDarkScheme(scheme: ColorScheme): boolean;
+/**
+ * Generates the CSS variables for a given theme configuration.
+ */
+export declare function generateThemeCSS(config: ThemeConfig, isDark?: boolean): string;
+/**
+ * Extracts the dominant color from an image file.
+ */
+export declare function extractColorFromImage(imageFile: File): Promise<string | null>;

package/dist/utils/theme.svelte.js

@@ -0,0 +1,156 @@
+import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, QuantizerCelebi, SchemeContent, SchemeFidelity, SchemeFruitSalad, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, Score } from '@ktibow/material-color-utilities-nightly';
+export const DEFAULT_CONFIG = {
+    sourceColor: '#6750A4',
+    scheme: 'system',
+    contrast: 'standard',
+    variant: 'tonal-spot'
+};
+const SCHEME_VARIANTS = {
+    'tonal-spot': SchemeTonalSpot,
+    fidelity: SchemeFidelity,
+    content: SchemeContent,
+    vibrant: SchemeVibrant,
+    'fruit-salad': SchemeFruitSalad,
+    rainbow: SchemeRainbow
+};
+// --- State ---
+/**
+ * Global reactive theme state.
+ * Changes to this state will automatically update the theme if the <Theme /> component is mounted.
+ */
+export const themeState = $state({ ...DEFAULT_CONFIG });
+// --- Utilities ---
+export function isDarkScheme(scheme) {
+    if (typeof window === 'undefined')
+        return scheme === 'dark';
+    if (scheme === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return scheme === 'dark';
+}
+function getContrastLevel(contrast) {
+    switch (contrast) {
+        case 'medium':
+            return 0.5;
+        case 'high':
+            return 1.0;
+        default:
+            return 0.0;
+    }
+}
+/**
+ * Generates the CSS variables for a given theme configuration.
+ */
+export function generateThemeCSS(config, isDark) {
+    const hct = Hct.fromInt(argbFromHex(config.sourceColor));
+    const dark = isDark ?? isDarkScheme(config.scheme);
+    const contrastLevel = getContrastLevel(config.contrast);
+    const SchemeClass = SCHEME_VARIANTS[config.variant] || SchemeTonalSpot;
+    const dynamicScheme = new SchemeClass(hct, dark, contrastLevel);
+    const colors = {
+        primary: MaterialDynamicColors.primary,
+        'surface-tint': MaterialDynamicColors.surfaceTint,
+        'on-primary': MaterialDynamicColors.onPrimary,
+        'primary-container': MaterialDynamicColors.primaryContainer,
+        'on-primary-container': MaterialDynamicColors.onPrimaryContainer,
+        secondary: MaterialDynamicColors.secondary,
+        'on-secondary': MaterialDynamicColors.onSecondary,
+        'secondary-container': MaterialDynamicColors.secondaryContainer,
+        'on-secondary-container': MaterialDynamicColors.onSecondaryContainer,
+        tertiary: MaterialDynamicColors.tertiary,
+        'on-tertiary': MaterialDynamicColors.onTertiary,
+        'tertiary-container': MaterialDynamicColors.tertiaryContainer,
+        'on-tertiary-container': MaterialDynamicColors.onTertiaryContainer,
+        error: MaterialDynamicColors.error,
+        'on-error': MaterialDynamicColors.onError,
+        'error-container': MaterialDynamicColors.errorContainer,
+        'on-error-container': MaterialDynamicColors.onErrorContainer,
+        background: MaterialDynamicColors.background,
+        'on-background': MaterialDynamicColors.onBackground,
+        surface: MaterialDynamicColors.surface,
+        'on-surface': MaterialDynamicColors.onSurface,
+        'surface-variant': MaterialDynamicColors.surfaceVariant,
+        'on-surface-variant': MaterialDynamicColors.onSurfaceVariant,
+        outline: MaterialDynamicColors.outline,
+        'outline-variant': MaterialDynamicColors.outlineVariant,
+        shadow: MaterialDynamicColors.shadow,
+        scrim: MaterialDynamicColors.scrim,
+        'inverse-surface': MaterialDynamicColors.inverseSurface,
+        'inverse-on-surface': MaterialDynamicColors.inverseOnSurface,
+        'inverse-primary': MaterialDynamicColors.inversePrimary,
+        'primary-fixed': MaterialDynamicColors.primaryFixed,
+        'primary-fixed-dim': MaterialDynamicColors.primaryFixedDim,
+        'on-primary-fixed': MaterialDynamicColors.onPrimaryFixed,
+        'on-primary-fixed-variant': MaterialDynamicColors.onPrimaryFixedVariant,
+        'secondary-fixed': MaterialDynamicColors.secondaryFixed,
+        'secondary-fixed-dim': MaterialDynamicColors.secondaryFixedDim,
+        'on-secondary-fixed': MaterialDynamicColors.onSecondaryFixed,
+        'on-secondary-fixed-variant': MaterialDynamicColors.onSecondaryFixedVariant,
+        'tertiary-fixed': MaterialDynamicColors.tertiaryFixed,
+        'tertiary-fixed-dim': MaterialDynamicColors.tertiaryFixedDim,
+        'on-tertiary-fixed': MaterialDynamicColors.onTertiaryFixed,
+        'on-tertiary-fixed-variant': MaterialDynamicColors.onTertiaryFixedVariant,
+        'surface-dim': MaterialDynamicColors.surfaceDim,
+        'surface-bright': MaterialDynamicColors.surfaceBright,
+        'surface-container-lowest': MaterialDynamicColors.surfaceContainerLowest,
+        'surface-container-low': MaterialDynamicColors.surfaceContainerLow,
+        'surface-container': MaterialDynamicColors.surfaceContainer,
+        'surface-container-high': MaterialDynamicColors.surfaceContainerHigh,
+        'surface-container-highest': MaterialDynamicColors.surfaceContainerHighest
+    };
+    let css = `:root { /* Dynamic M3 Theme */\n`;
+    for (const [key, dynamicColor] of Object.entries(colors)) {
+        const argb = dynamicColor.getArgb(dynamicScheme);
+        const r = (argb >> 16) & 255;
+        const g = (argb >> 8) & 255;
+        const b = argb & 255;
+        css += `  --color-md-sys-color-${key}: rgb(${r} ${g} ${b});\n`;
+    }
+    css += `}\n`;
+    return css;
+}
+/**
+ * Extracts the dominant color from an image file.
+ */
+export async function extractColorFromImage(imageFile) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        const url = URL.createObjectURL(imageFile);
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                resolve(null);
+                return;
+            }
+            const MAX_DIMENSION = 128;
+            let { width, height } = img;
+            if (width > height) {
+                if (width > MAX_DIMENSION) {
+                    height *= MAX_DIMENSION / width;
+                    width = MAX_DIMENSION;
+                }
+            }
+            else if (height > MAX_DIMENSION) {
+                width *= MAX_DIMENSION / height;
+                height = MAX_DIMENSION;
+            }
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            const { data } = ctx.getImageData(0, 0, width, height);
+            const pixelsArray = [];
+            for (let i = 0; i < data.length; i += 4) {
+                if (data[i + 3] < 255)
+                    continue;
+                pixelsArray.push((data[i + 3] << 24) | (data[i] << 16) | (data[i + 1] << 8) | data[i + 2]);
+            }
+            const result = QuantizerCelebi.quantize(pixelsArray, 128);
+            const ranked = Score.score(result);
+            resolve(ranked.length > 0 ? hexFromArgb(ranked[0]) : null);
+            URL.revokeObjectURL(url);
+        };
+        img.onerror = () => resolve(null);
+        img.src = url;
+    });
+}

package/dist/utils/tutorial.d.ts

@@ -0,0 +1,9 @@
+type TutorialKeyParams = {
+    pathname: string;
+    params: {
+        id?: string;
+    };
+};
+export declare const resolveTutorialRole: (role: string | undefined) => "all" | "teacher" | "student";
+export declare const resolveTutorialKey: ({ pathname, params }: TutorialKeyParams) => "dashboard" | "flashcards" | "lessons" | "tasks" | "students" | "calendar" | "lesson-edit" | "lesson-detail" | "task-edit" | "task-detail" | "flashcard-edit" | "flashcard-detail" | "student-detail" | "calendar-new" | "calendar-day" | null;
+export {};

package/dist/utils/tutorial.js

@@ -0,0 +1,46 @@
+export const resolveTutorialRole = (role) => {
+    if (role === 't')
+        return 'teacher';
+    if (role === 's')
+        return 'student';
+    return 'all';
+};
+export const resolveTutorialKey = ({ pathname, params }) => {
+    const segments = pathname.split('/').filter(Boolean);
+    const section = segments[1];
+    const { id } = params;
+    if (!section)
+        return null;
+    const isEdit = segments.includes('edit');
+    const isNew = segments.includes('new');
+    switch (section) {
+        case 'dashboard':
+            return 'dashboard';
+        case 'lessons':
+            if (isEdit)
+                return 'lesson-edit';
+            if (id)
+                return 'lesson-detail';
+            return 'lessons';
+        case 'tasks':
+            if (isEdit)
+                return 'task-edit';
+            if (id)
+                return 'task-detail';
+            return 'tasks';
+        case 'flashcards':
+            if (isEdit)
+                return 'flashcard-edit';
+            if (id)
+                return 'flashcard-detail';
+            return 'flashcards';
+        case 'students':
+            return segments.length >= 3 ? 'student-detail' : 'students';
+        case 'calendar':
+            if (isNew)
+                return 'calendar-new';
+            return segments.length >= 5 ? 'calendar-day' : 'calendar';
+        default:
+            return null;
+    }
+};

package/dist/utils/types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLLabelAttributes } from 'svelte/elements';
+export declare const xs = "xs";
+export declare const sm = "sm";
+export declare const md = "md";
+export declare const lg = "lg";
+export declare const xl = "xl";
+export type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export type AnchorButtonAttributes = ({
+    href: string;
+} & HTMLAnchorAttributes) | ({
+    href?: undefined;
+} & HTMLButtonAttributes);
+export type LabelAttrs = HTMLLabelAttributes & Required<Pick<HTMLLabelAttributes, 'for'>>;
+export type AnchorAttrs = HTMLAnchorAttributes & Required<Pick<HTMLAnchorAttributes, 'href'>>;
+export type NotButton<T> = Omit<T, 'onclick'>;
+export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, 'onclick'>>;
+export type DivAttrs = NotButton<HTMLAttributes<HTMLDivElement>>;
+export type { ComputePositionConfig, Middleware, MiddlewareState, Placement, Strategy } from '@floating-ui/dom';

package/dist/utils/types.js

@@ -0,0 +1,5 @@
+export const xs = 'xs';
+export const sm = 'sm';
+export const md = 'md';
+export const lg = 'lg';
+export const xl = 'xl';

package/dist/utils/ui.d.ts

@@ -0,0 +1,6 @@
+export declare function formatFileSize(bytes: number): string;
+export declare function getFileExtension(filename: string): string;
+export declare function shuffleArray<T>(array: T[]): T[];
+export declare function formatPercentage(value: number): number;
+export declare function getBadgeConfig(dueDate?: string | null, nowInput?: number | Date): 'red' | 'yellow' | 'blue';
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/dist/utils/ui.js

@@ -0,0 +1,56 @@
+// File Renders
+export function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+// File Renders
+export function getFileExtension(filename) {
+    return filename.split('.').pop()?.toUpperCase() || '';
+}
+// Test and Learn Modes
+export function shuffleArray(array) {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+    }
+    return newArray;
+}
+export function formatPercentage(value) {
+    return Math.min(100, Math.max(0, Math.round(value)));
+}
+/*
+Used in Badge renders
+*/
+export function getBadgeConfig(dueDate, nowInput = Date.now()) {
+    if (!dueDate)
+        return 'blue';
+    const now = nowInput instanceof Date ? nowInput : new Date(nowInput);
+    const due = new Date(dueDate);
+    const nowMs = now.getTime();
+    const dueMs = due.getTime();
+    if (Number.isNaN(nowMs) || Number.isNaN(dueMs))
+        return 'blue';
+    const diffDays = Math.ceil((dueMs - nowMs) / (1000 * 60 * 60 * 24));
+    if (diffDays < 1)
+        return 'red';
+    if (diffDays <= 3)
+        return 'yellow';
+    return 'blue';
+}
+export async function copyToClipboard(text) {
+    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+        return false;
+    }
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@noxlovette/material",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/noxlovette/material.git"
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "prepublishOnly": "bun run build",
+    "check": "svelte-kit sync && svelte-check",
+    "test": "vitest run",
+    "format": "prettier --write .",
+    "dev": "vite dev"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./styles": "./dist/index.css",
+    "./theme/*": "./dist/styles/theme/*.css"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.58.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "svelte": "^5.45.6",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.2.2",
+    "@internationalized/date": "^3.12.1"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.59.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^25.6.2",
+    "eslint": "^10.3.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.17.1",
+    "globals": "^17.6.0",
+    "lefthook": "^2.1.6",
+    "prettier": "^3.8.3",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "publint": "^0.3.20",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.8",
+    "sveltekit-superforms": "^2.30.1",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vitest": "^4.1.5",
+    "zod": "^4.4.3"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "@internationalized/date": "^3.12.1",
+    "@ktibow/material-color-utilities-nightly": "^0.4.1772748028000",
+    "bits-ui": "^2.18.1",
+    "clsx": "^2.1.1",
+    "mode-watcher": "^1.1.0",
+    "nanoid": "^5.1.11",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2"
+  }
+}