@autumnsgrove/groveengine 0.6.4 → 0.7.0

package/dist/ui/styles/grove.css

@@ -712,4 +712,140 @@
     outline: none;
     box-shadow: inset 0 0 0 2px var(--grove-500);
   }
+
+  /* ─────────────────────────────────────────────────────────────
+     GLASSMORPHISM UTILITIES
+
+     Apply these classes to any element for glass effects.
+     Combine with Tailwind backdrop-blur-* for blur intensity.
+
+     Usage:
+       <div class="glass">...</div>
+       <div class="glass-accent backdrop-blur-md">...</div>
+     ───────────────────────────────────────────────────────────── */
+
+  /* Base glass - light translucent background */
+  .glass {
+    background-color: rgb(255 255 255 / 0.7);
+    border: 1px solid rgb(255 255 255 / 0.3);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass) {
+    background-color: rgb(30 41 59 / 0.6);
+    border-color: rgb(71 85 105 / 0.3);
+  }
+
+  /* Glass surface - higher opacity for headers/navbars */
+  .glass-surface {
+    background-color: rgb(255 255 255 / 0.95);
+    border: 1px solid rgb(255 255 255 / 0.3);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-surface) {
+    background-color: rgb(30 41 59 / 0.95);
+    border-color: rgb(71 85 105 / 0.3);
+  }
+
+  /* Glass overlay - dark backdrop for modals */
+  .glass-overlay {
+    background-color: rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-overlay) {
+    background-color: rgb(0 0 0 / 0.6);
+  }
+
+  /* Glass accent - tinted with grove green (accent color) */
+  .glass-accent {
+    background-color: color-mix(in srgb, var(--grove-500) 20%, transparent);
+    border: 1px solid color-mix(in srgb, var(--grove-500) 30%, transparent);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-accent) {
+    background-color: color-mix(in srgb, var(--grove-500) 15%, transparent);
+    border-color: color-mix(in srgb, var(--grove-500) 20%, transparent);
+  }
+
+  /* Glass muted - subtle, barely visible */
+  .glass-muted {
+    background-color: rgb(255 255 255 / 0.4);
+    border: 1px solid rgb(255 255 255 / 0.2);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-muted) {
+    background-color: rgb(15 23 42 / 0.3);
+    border-color: rgb(51 65 85 / 0.2);
+  }
+
+  /* Glass tint - light background for text readability */
+  .glass-tint {
+    background-color: rgb(255 255 255 / 0.6);
+    border: 1px solid rgb(255 255 255 / 0.2);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-tint) {
+    background-color: rgb(15 23 42 / 0.5);
+    border-color: rgb(51 65 85 / 0.3);
+  }
+
+  /* Glass dark - dark translucent background */
+  .glass-dark {
+    background-color: rgb(15 23 42 / 0.7);
+    border: 1px solid rgb(51 65 85 / 0.3);
+    backdrop-filter: blur(4px);
+    color: white;
+  }
+
+  :is(.dark .glass-dark) {
+    background-color: rgb(2 6 23 / 0.8);
+    border-color: rgb(51 65 85 / 0.3);
+  }
+
+  /* Glass frosted - stronger effect, more opaque */
+  .glass-frosted {
+    background-color: rgb(255 255 255 / 0.85);
+    border: 1px solid rgb(255 255 255 / 0.4);
+    backdrop-filter: blur(12px);
+  }
+
+  :is(.dark .glass-frosted) {
+    background-color: rgb(30 41 59 / 0.8);
+    border-color: rgb(71 85 105 / 0.4);
+  }
+
+  /* No border variants */
+  .glass-borderless {
+    border: none;
+  }
+
+  /* Hover states for interactive glass elements */
+  .glass-hover:hover {
+    background-color: rgb(255 255 255 / 0.85);
+    border-color: rgb(255 255 255 / 0.5);
+  }
+
+  :is(.dark .glass-hover:hover) {
+    background-color: rgb(30 41 59 / 0.75);
+    border-color: rgb(71 85 105 / 0.4);
+  }
+
+  /* Reduced motion: disable blur effects for performance/accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .glass,
+    .glass-surface,
+    .glass-overlay,
+    .glass-accent,
+    .glass-muted,
+    .glass-tint,
+    .glass-dark,
+    .glass-frosted {
+      backdrop-filter: none;
+    }
+  }
 }

package/dist/ui/tokens/fonts.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Grove Design System - Font Tokens
+ *
+ * Complete font catalog with metadata, CDN URLs, and helper utilities.
+ * All fonts are served from cdn.grove.place for optimal performance.
+ */
+/** CDN base URL for all font assets */
+export declare const FONT_CDN_BASE = "https://cdn.grove.place/fonts";
+/** Font category for organizing fonts */
+export type FontCategory = "default" | "accessibility" | "sans-serif" | "serif" | "monospace" | "display";
+/** Font format for @font-face src declarations */
+export type FontFormat = "truetype" | "opentype";
+/** Complete font definition with metadata */
+export interface FontDefinition {
+    /** Unique identifier used in database and fontMap */
+    id: string;
+    /** Display name shown to users */
+    name: string;
+    /** Font file name on CDN */
+    file: string;
+    /** Font format (truetype or opentype) */
+    format: FontFormat;
+    /** CSS font-family name (may include spaces) */
+    fontFamily: string;
+    /** Category for organizing fonts */
+    category: FontCategory;
+    /** Brief description of the font's purpose/style */
+    description: string;
+    /** CSS fallback stack */
+    fallback: string[];
+}
+/**
+ * Complete catalog of available fonts
+ * These fonts are served from cdn.grove.place
+ */
+export declare const fonts: readonly FontDefinition[];
+/** All valid font IDs */
+export type FontId = (typeof fonts)[number]["id"];
+/** Map of font IDs to their definitions */
+export declare const fontById: Record<FontId, FontDefinition>;
+/** Get fonts by category */
+export declare function getFontsByCategory(category: FontCategory): FontDefinition[];
+/** Get CDN URL for a font */
+export declare function getFontUrl(fontIdOrFile: string): string;
+/** Get complete CSS font-family value with fallbacks */
+export declare function getFontStack(fontId: FontId): string;
+/**
+ * Generate @font-face CSS for a single font
+ * @param fontId - Font ID to generate CSS for
+ * @returns CSS @font-face declaration string
+ */
+export declare function generateFontFace(fontId: FontId): string;
+/**
+ * Generate @font-face CSS for multiple fonts
+ * @param fontIds - Array of font IDs (defaults to all fonts)
+ * @returns CSS string with all @font-face declarations
+ */
+export declare function generateAllFontFaces(fontIds?: FontId[]): string;
+/**
+ * Font map matching the format used in +layout.svelte
+ * Maps font IDs to their complete CSS font-family values
+ */
+export declare const fontMap: Record<FontId, string>;
+/** Default font ID */
+export declare const DEFAULT_FONT: FontId;
+/** Total number of available fonts */
+export declare const FONT_COUNT: number;
+/** Font categories with human-readable labels */
+export declare const fontCategoryLabels: Record<FontCategory, string>;

package/dist/ui/tokens/fonts.js

@@ -0,0 +1,341 @@
+/**
+ * Grove Design System - Font Tokens
+ *
+ * Complete font catalog with metadata, CDN URLs, and helper utilities.
+ * All fonts are served from cdn.grove.place for optimal performance.
+ */
+/** CDN base URL for all font assets */
+export const FONT_CDN_BASE = "https://cdn.grove.place/fonts";
+/**
+ * Complete catalog of available fonts
+ * These fonts are served from cdn.grove.place
+ */
+export const fonts = [
+    // Default
+    {
+        id: "lexend",
+        name: "Lexend",
+        file: "Lexend-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Lexend",
+        category: "default",
+        description: "Modern, highly readable sans-serif. Grove default.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Accessibility fonts
+    {
+        id: "atkinson",
+        name: "Atkinson Hyperlegible",
+        file: "AtkinsonHyperlegible-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Atkinson Hyperlegible",
+        category: "accessibility",
+        description: "Designed for low vision readers. Maximum character distinction.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "opendyslexic",
+        name: "OpenDyslexic",
+        file: "OpenDyslexic-Regular.otf",
+        format: "opentype",
+        fontFamily: "OpenDyslexic",
+        category: "accessibility",
+        description: "Weighted bottoms reduce letter confusion for dyslexic readers.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "luciole",
+        name: "Luciole",
+        file: "Luciole-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Luciole",
+        category: "accessibility",
+        description: "French accessibility font designed for visually impaired readers.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Modern sans-serif fonts
+    {
+        id: "nunito",
+        name: "Nunito",
+        file: "Nunito-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Nunito",
+        category: "sans-serif",
+        description: "Friendly rounded sans-serif. Warm and approachable.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "quicksand",
+        name: "Quicksand",
+        file: "Quicksand-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Quicksand",
+        category: "sans-serif",
+        description: "Geometric sans with rounded terminals. Light and modern.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "manrope",
+        name: "Manrope",
+        file: "Manrope-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Manrope",
+        category: "sans-serif",
+        description: "Professional geometric sans. Clean and contemporary.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "instrument-sans",
+        name: "Instrument Sans",
+        file: "InstrumentSans-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Instrument Sans",
+        category: "sans-serif",
+        description: "Low contrast sans with humanist touches. Elegant simplicity.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "plus-jakarta-sans",
+        name: "Plus Jakarta Sans",
+        file: "PlusJakartaSans-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Plus Jakarta Sans",
+        category: "sans-serif",
+        description: "Contemporary geometric sans. Balanced and versatile.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Serif fonts
+    {
+        id: "cormorant",
+        name: "Cormorant",
+        file: "Cormorant-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Cormorant",
+        category: "serif",
+        description: "Elegant display serif inspired by Garamond. Refined and classic.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "bodoni-moda",
+        name: "Bodoni Moda",
+        file: "BodoniModa-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Bodoni Moda",
+        category: "serif",
+        description: "High contrast modern serif. Bold and sophisticated.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "lora",
+        name: "Lora",
+        file: "Lora-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Lora",
+        category: "serif",
+        description: "Well-balanced contemporary serif. Excellent for body text.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "eb-garamond",
+        name: "EB Garamond",
+        file: "EBGaramond-Regular.ttf",
+        format: "truetype",
+        fontFamily: "EB Garamond",
+        category: "serif",
+        description: "Revival of classic Garamond. Timeless book typography.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "merriweather",
+        name: "Merriweather",
+        file: "Merriweather-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Merriweather",
+        category: "serif",
+        description: "Designed for screen reading. Excellent legibility.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "fraunces",
+        name: "Fraunces",
+        file: "Fraunces-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Fraunces",
+        category: "serif",
+        description: 'Soft serif with "wonky" optical axes. Warm personality.',
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    // Monospace fonts
+    {
+        id: "ibm-plex-mono",
+        name: "IBM Plex Mono",
+        file: "IBMPlexMono-Regular.ttf",
+        format: "truetype",
+        fontFamily: "IBM Plex Mono",
+        category: "monospace",
+        description: "Corporate monospace with human warmth. Great for code.",
+        fallback: ["Courier New", "Consolas", "monospace"],
+    },
+    {
+        id: "cozette",
+        name: "Cozette",
+        file: "CozetteVector.ttf",
+        format: "truetype",
+        fontFamily: "Cozette",
+        category: "monospace",
+        description: "Bitmap-style vector font. Retro terminal aesthetic.",
+        fallback: ["Courier New", "Consolas", "monospace"],
+    },
+    // Display/special fonts
+    {
+        id: "alagard",
+        name: "Alagard",
+        file: "alagard.ttf",
+        format: "truetype",
+        fontFamily: "Alagard",
+        category: "display",
+        description: "Pixel art medieval display font. Fantasy and gaming.",
+        fallback: ["fantasy", "cursive"],
+    },
+    {
+        id: "calistoga",
+        name: "Calistoga",
+        file: "Calistoga-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Calistoga",
+        category: "display",
+        description: "Casual brush serif. Friendly headlines.",
+        fallback: ["Georgia", "serif"],
+    },
+    {
+        id: "caveat",
+        name: "Caveat",
+        file: "Caveat-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Caveat",
+        category: "display",
+        description: "Handwritten script. Personal and informal.",
+        fallback: ["cursive", "sans-serif"],
+    },
+];
+/** Map of font IDs to their definitions */
+export const fontById = Object.fromEntries(fonts.map((font) => [font.id, font]));
+/** Get fonts by category */
+export function getFontsByCategory(category) {
+    return fonts.filter((font) => font.category === category);
+}
+/** Get CDN URL for a font */
+export function getFontUrl(fontIdOrFile) {
+    // If it's a font ID, look up the file
+    const font = fonts.find((f) => f.id === fontIdOrFile);
+    const file = font ? font.file : fontIdOrFile;
+    return `${FONT_CDN_BASE}/${file}`;
+}
+/** Get complete CSS font-family value with fallbacks */
+export function getFontStack(fontId) {
+    const font = fontById[fontId];
+    if (!font)
+        return fontById.lexend.fallback.join(", ");
+    const primary = font.fontFamily.includes(" ")
+        ? `'${font.fontFamily}'`
+        : font.fontFamily;
+    return [primary, ...font.fallback].join(", ");
+}
+/**
+ * Generate @font-face CSS for a single font
+ * @param fontId - Font ID to generate CSS for
+ * @returns CSS @font-face declaration string
+ */
+export function generateFontFace(fontId) {
+    const font = fontById[fontId];
+    if (!font)
+        return "";
+    return `@font-face {
+  font-family: '${font.fontFamily}';
+  src: url('${getFontUrl(font.file)}') format('${font.format}');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}`;
+}
+/**
+ * Generate @font-face CSS for multiple fonts
+ * @param fontIds - Array of font IDs (defaults to all fonts)
+ * @returns CSS string with all @font-face declarations
+ */
+export function generateAllFontFaces(fontIds) {
+    const ids = fontIds ?? fonts.map((f) => f.id);
+    return ids.map(generateFontFace).filter(Boolean).join("\n\n");
+}
+/**
+ * Font map matching the format used in +layout.svelte
+ * Maps font IDs to their complete CSS font-family values
+ */
+export const fontMap = Object.fromEntries(fonts.map((font) => [font.id, getFontStack(font.id)]));
+/** Default font ID */
+export const DEFAULT_FONT = "lexend";
+/** Total number of available fonts */
+export const FONT_COUNT = fonts.length;
+/** Font categories with human-readable labels */
+export const fontCategoryLabels = {
+    default: "Default",
+    accessibility: "Accessibility",
+    "sans-serif": "Sans-Serif",
+    serif: "Serif",
+    monospace: "Monospace",
+    display: "Display & Special",
+};

package/dist/ui/tokens/index.d.ts

@@ -1,6 +1,7 @@
-export * from './colors.js';
-export * from './typography.js';
-export * from './spacing.js';
-export * from './effects.js';
-export * from './animation.js';
+export * from "./colors.js";
+export * from "./typography.js";
+export * from "./spacing.js";
+export * from "./effects.js";
+export * from "./animation.js";
+export * from "./fonts.js";
 export declare const TOKENS_VERSION = "0.2.0";

package/dist/ui/tokens/index.js

@@ -11,9 +11,10 @@
 // - Bark Brown: Text and dark accents (#3d2914)
 // - Cream: Background and light surfaces (#fefdfb)
 // Design token exports
-export * from './colors.js';
-export * from './typography.js';
-export * from './spacing.js';
-export * from './effects.js';
-export * from './animation.js';
-export const TOKENS_VERSION = '0.2.0';
+export * from "./colors.js";
+export * from "./typography.js";
+export * from "./spacing.js";
+export * from "./effects.js";
+export * from "./animation.js";
+export * from "./fonts.js";
+export const TOKENS_VERSION = "0.2.0";

package/dist/utils/gutter.d.ts

@@ -5,6 +5,8 @@
  * and anchor resolution. Used by ContentWithGutter component and related
  * functionality across the site.
  */
+import type { GutterItem as MarkdownGutterItem } from "./markdown.js";
+export type GutterItem = MarkdownGutterItem;
 /** Anchor types supported by the gutter system */
 export type AnchorType = "none" | "paragraph" | "tag" | "header";
 /** Parsed anchor result */
@@ -18,14 +20,6 @@ export interface Header {
     text: string;
     level?: number;
 }
-/** Gutter item with anchor */
-export interface GutterItem {
-    anchor?: string;
-    type?: string;
-    content?: string;
-    src?: string;
-    [key: string]: unknown;
-}
 /**
  * Parse anchor string to determine anchor type and value
  * @param anchor - The anchor string from manifest

package/dist/utils/markdown.d.ts

@@ -54,6 +54,7 @@ export interface GutterItem extends GutterItemBase {
     content?: string;
     src?: string;
     images?: GalleryImage[];
+    [key: string]: unknown;
 }
 /** Gutter manifest structure */
 export interface GutterManifest {