svelora 2.2.0 → 3.0.1

package/dist/Fonts/fonts.js

@@ -0,0 +1,128 @@
+const defaultSansFallback = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+const defaultMonoFallback = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
+export const defaultFontFamilies = [
+    {
+        name: 'Inter',
+        variable: '--font-sans-family',
+        weights: [400, 500, 600, 700]
+    },
+    {
+        name: 'Inter',
+        variable: '--font-heading-family',
+        weights: [400, 500, 600, 700]
+    },
+    {
+        name: 'JetBrains Mono',
+        variable: '--font-mono-family',
+        weights: [400, 500, 700]
+    }
+];
+export const fontsDefaults = {
+    families: defaultFontFamilies,
+    display: 'swap',
+    preconnect: true
+};
+function isLocalFont(font) {
+    return font.provider === 'local';
+}
+function normalizeFontName(name) {
+    return name.trim().replace(/\s+/g, ' ');
+}
+function getFontWeights(weights) {
+    const normalized = (weights ?? [400]).filter((weight, index, source) => Number.isInteger(weight) &&
+        weight >= 100 &&
+        weight <= 900 &&
+        source.indexOf(weight) === index);
+    return normalized.length > 0 ? [...normalized].sort((a, b) => a - b) : [400];
+}
+function getFontStyles(styles) {
+    const normalized = (styles ?? ['normal']).filter((style, index, source) => (style === 'normal' || style === 'italic') && source.indexOf(style) === index);
+    if (normalized.length === 0)
+        return ['normal'];
+    if (normalized.includes('normal') && normalized.includes('italic')) {
+        return ['normal', 'italic'];
+    }
+    return normalized[0] === 'italic' ? ['italic'] : ['normal'];
+}
+function encodeFamilyName(name) {
+    return normalizeFontName(name).replaceAll(' ', '+');
+}
+function escapeFontName(name) {
+    return name.replaceAll('\\', '\\\\').replaceAll("'", "\\'");
+}
+function getDefaultFallback(variable) {
+    return variable?.includes('mono') ? defaultMonoFallback : defaultSansFallback;
+}
+function buildFamilyQuery(font) {
+    const name = encodeFamilyName(font.name);
+    const weights = getFontWeights(font.weights);
+    const styles = getFontStyles(font.styles);
+    if (styles.length === 1 && styles[0] === 'normal') {
+        return `${name}:wght@${weights.join(';')}`;
+    }
+    const pairs = styles.flatMap((style) => weights.map((weight) => `${style === 'italic' ? 1 : 0},${weight}`));
+    return `${name}:ital,wght@${pairs.join(';')}`;
+}
+export function buildGoogleFontsUrl(fonts, display = 'swap') {
+    const families = fonts
+        .filter((font) => !isLocalFont(font))
+        .map((font) => buildFamilyQuery(font))
+        .filter((family, index, source) => family.length > 0 && source.indexOf(family) === index);
+    if (families.length === 0)
+        return '';
+    const params = new URLSearchParams();
+    families.forEach((family) => {
+        params.append('family', family);
+    });
+    params.set('display', display);
+    return `https://fonts.googleapis.com/css2?${params.toString()}`;
+}
+export function buildFontFamily(font) {
+    const family = `'${escapeFontName(normalizeFontName(font.name))}'`;
+    return `${family}, ${font.fallback ?? getDefaultFallback(font.variable)}`;
+}
+function buildLocalFontSourceReference(source) {
+    const url = `url('${source.src.replaceAll("'", "\\'")}')`;
+    return source.format ? `${url} format('${source.format}')` : url;
+}
+export function buildLocalFontFaceCss(fonts, defaultDisplay = 'swap') {
+    const declarations = fonts.filter(isLocalFont).flatMap((font) => font.sources.map((source) => {
+        const lines = [
+            '@font-face {',
+            `    font-family: '${escapeFontName(normalizeFontName(font.name))}';`,
+            `    src: ${buildLocalFontSourceReference(source)};`,
+            `    font-display: ${font.display ?? defaultDisplay};`,
+            `    font-style: ${source.style ?? 'normal'};`,
+            `    font-weight: ${source.weight ?? 400};`
+        ];
+        if (source.unicodeRange) {
+            lines.push(`    unicode-range: ${source.unicodeRange};`);
+        }
+        lines.push('}');
+        return lines.join('\n');
+    }));
+    return declarations.join('\n\n');
+}
+export function buildFontVariablesCss(fonts) {
+    const declarations = fonts
+        .filter((font) => typeof font.variable === 'string' && font.variable.length > 2)
+        .map((font) => `    ${font.variable}: ${buildFontFamily(font)};`);
+    if (declarations.length === 0)
+        return '';
+    return `:root {\n${declarations.join('\n')}\n}`;
+}
+export function resolveFontsOptions(config) {
+    if (config === false)
+        return false;
+    if (config === true) {
+        return fontsDefaults;
+    }
+    if (config && typeof config === 'object') {
+        return {
+            families: config.families ?? fontsDefaults.families,
+            display: config.display ?? fontsDefaults.display,
+            preconnect: config.preconnect ?? fontsDefaults.preconnect
+        };
+    }
+    return fontsDefaults;
+}

package/dist/Fonts/fonts.types.d.ts

@@ -0,0 +1,40 @@
+export type GoogleFontStyle = 'normal' | 'italic';
+export type GoogleFontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+export type FontProvider = 'google' | 'local';
+export type GoogleFontDefinition = {
+    provider?: 'google';
+    name: string;
+    weights?: number[];
+    styles?: GoogleFontStyle[];
+    variable?: `--${string}`;
+    fallback?: string;
+};
+export type LocalFontSourceFormat = 'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
+export type LocalFontSource = {
+    src: string;
+    format?: LocalFontSourceFormat;
+    weight?: number | `${number} ${number}`;
+    style?: GoogleFontStyle;
+    unicodeRange?: string;
+};
+export type LocalFontDefinition = {
+    provider: 'local';
+    name: string;
+    sources: LocalFontSource[];
+    variable?: `--${string}`;
+    fallback?: string;
+    display?: GoogleFontDisplay;
+};
+export type FontDefinition = GoogleFontDefinition | LocalFontDefinition;
+export type FontsOptions = {
+    families?: FontDefinition[];
+    display?: GoogleFontDisplay;
+    preconnect?: boolean;
+};
+export type FontsConfig = boolean | FontsOptions;
+export type FontsProps = {
+    fonts?: FontDefinition[];
+    families?: FontDefinition[];
+    display?: GoogleFontDisplay;
+    preconnect?: boolean;
+};

package/dist/Fonts/fonts.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Fonts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Fonts } from './Fonts.svelte';
+export { buildFontFamily, buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, defaultFontFamilies, fontsDefaults, resolveFontsOptions } from './fonts.js';
+export type { FontDefinition, FontsConfig, FontsOptions, GoogleFontDefinition, GoogleFontDisplay, GoogleFontStyle, LocalFontDefinition, LocalFontSource, LocalFontSourceFormat, FontsProps, FontProvider } from './fonts.types.js';

package/dist/Fonts/index.js

@@ -0,0 +1,2 @@
+export { default as Fonts } from './Fonts.svelte';
+export { buildFontFamily, buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, defaultFontFamilies, fontsDefaults, resolveFontsOptions } from './fonts.js';

package/dist/config.d.ts

@@ -1,3 +1,4 @@
+import type { FontsConfig } from './Fonts/fonts.types.js';
 /**
  * Svelora Global Configuration
  *
@@ -6,6 +7,15 @@
  * import { defineConfig } from 'svelora'
  *
  * defineConfig({
+ *     fonts: {
+ *         families: [
+ *             {
+ *                 name: 'Inter',
+ *                 variable: '--font-sans-family',
+ *                 weights: [400, 500, 600, 700]
+ *             }
+ *         ]
+ *     },
  *     button: {
  *         defaultVariants: { variant: 'outline', color: 'secondary' },
  *         slots: { base: 'shadow-md', label: 'font-bold' }
@@ -48,8 +58,9 @@ type DeepPartial<T> = {
 };
 /** Generic component config shape */
 export type UIConfig = {
-    [key: string]: DeepPartial<Record<string, unknown>> | undefined;
+    [key: string]: DeepPartial<Record<string, unknown>> | FontsConfig | undefined;
     icons?: DeepPartial<typeof iconsDefaults>;
+    fonts?: FontsConfig;
 };
 /**
  * Define global configuration for Svelora components

package/dist/config.js

@@ -6,6 +6,15 @@
  * import { defineConfig } from 'svelora'
  *
  * defineConfig({
+ *     fonts: {
+ *         families: [
+ *             {
+ *                 name: 'Inter',
+ *                 variable: '--font-sans-family',
+ *                 weights: [400, 500, 600, 700]
+ *             }
+ *         ]
+ *     },
  *     button: {
  *         defaultVariants: { variant: 'outline', color: 'secondary' },
  *         slots: { base: 'shadow-md', label: 'font-bold' }

package/dist/docs/code-block.d.ts

@@ -0,0 +1,13 @@
+export type DocSectionSnippet = {
+    heading: string;
+    snippet: string;
+};
+export type DocSectionSnippetOverrides = Record<string, string>;
+export declare function normalizeCode(code: string): string;
+export declare function extractSectionSnippet(sectionSource: string): string;
+export declare function getSectionSnippets(source: string, routeOverrides?: DocSectionSnippetOverrides): DocSectionSnippet[];
+export declare function renderHighlightedCode(code: string, isDarkMode?: boolean): Promise<string>;
+export declare function slugToComponentName(slug: string): string;
+export declare function slugToHookName(slug: string): string;
+export declare function buildDefaultComponentExample(slug: string): string;
+export declare function buildDefaultHookExample(slug: string): string;

package/dist/docs/code-block.js

@@ -0,0 +1,214 @@
+import { codeToHtml } from 'shiki';
+export function normalizeCode(code) {
+    const lines = code.replaceAll('\r\n', '\n').split('\n');
+    const firstNonEmpty = lines.findIndex((line) => line.trim().length > 0);
+    const lastNonEmptyFromEnd = [...lines].reverse().findIndex((line) => line.trim().length > 0);
+    if (firstNonEmpty < 0 || lastNonEmptyFromEnd < 0) {
+        return '';
+    }
+    const trimmed = lines.slice(firstNonEmpty, lines.length - lastNonEmptyFromEnd);
+    const indents = trimmed
+        .filter((line) => line.trim().length > 0)
+        .map((line) => line.match(/^(\s*)/)?.[1].length ?? 0);
+    const minIndent = indents.length > 0 ? Math.min(...indents) : 0;
+    return trimmed
+        .map((line) => line.slice(minIndent))
+        .join('\n')
+        .trim();
+}
+function unwrapPreviewWrappers(source) {
+    let current = source.trim();
+    const stripPrefix = (token) => token.split(':').at(-1) ?? token;
+    const isPresentationToken = (token) => {
+        const t = stripPrefix(token);
+        if (t.length === 0)
+            return false;
+        if (t.startsWith('max-w-') || t.startsWith('min-w-') || t.startsWith('w-'))
+            return true;
+        if (t.startsWith('max-h-') || t.startsWith('min-h-') || t.startsWith('h-'))
+            return true;
+        if (/^(m|p)[trblxyse]?-\d+$/.test(t))
+            return true;
+        if (t.startsWith('gap-') || t.startsWith('space-'))
+            return true;
+        if (t.startsWith('overflow-'))
+            return true;
+        if (t === 'grid' || t.startsWith('grid-'))
+            return true;
+        if (t === 'flex' || t === 'inline-flex' || t.startsWith('flex-'))
+            return true;
+        if (t.startsWith('items-') || t.startsWith('justify-') || t.startsWith('content-'))
+            return true;
+        if (t.startsWith('self-') || t.startsWith('place-'))
+            return true;
+        if (t.startsWith('rounded'))
+            return true;
+        if (t.startsWith('border') || t.startsWith('ring') || t.startsWith('shadow'))
+            return true;
+        if (t === 'bg-transparent')
+            return true;
+        if (t.startsWith('bg-surface'))
+            return true;
+        if (t.startsWith('bg-['))
+            return true;
+        if (t.startsWith('text-') || t.startsWith('font-') || t.startsWith('leading-'))
+            return true;
+        if (t.startsWith('tracking-'))
+            return true;
+        if (t === 'uppercase' || t === 'lowercase' || t === 'capitalize')
+            return true;
+        if (t.startsWith('opacity-'))
+            return true;
+        if (t.startsWith('backdrop-blur') || t.startsWith('blur'))
+            return true;
+        if (t.startsWith('aspect-') || t.startsWith('object-'))
+            return true;
+        if (t.startsWith('size-'))
+            return true;
+        if (t.startsWith('[') && t.includes(']:'))
+            return true;
+        return false;
+    };
+    for (let pass = 0; pass < 3; pass += 1) {
+        const match = current.match(/^<div\b([^>]*)>([\s\S]*)<\/div>$/);
+        if (!match)
+            break;
+        const attrs = match[1];
+        const attrsWithoutClass = attrs
+            .replace(/\s*\bclass=(?:"[^"]*"|'[^']*')/, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+        if (attrsWithoutClass.length > 0)
+            break;
+        const classMatch = attrs.match(/\bclass=(?:"([^"]*)"|'([^']*)')/);
+        const classValue = (classMatch?.[1] ?? classMatch?.[2] ?? '').trim();
+        const tokens = classValue.length > 0 ? classValue.split(/\s+/) : [];
+        const isPreviewBg = tokens.some((token) => token.startsWith('bg-surface-container'));
+        const isBordered = tokens.some((token) => token.startsWith('border-outline-variant'));
+        const isRounded = tokens.some((token) => token.startsWith('rounded'));
+        const hasPadding = tokens.some((token) => /^p[trblxy]?-\d+$/.test(token));
+        const isMaxWidth = tokens.some((token) => token.startsWith('max-w-'));
+        const isOverflow = tokens.some((token) => token.startsWith('overflow-'));
+        const isPresentationOnly = tokens.length > 0 && tokens.every(isPresentationToken);
+        const shouldUnwrap = ((isPreviewBg || isBordered || isRounded) && hasPadding) || isOverflow;
+        const shouldUnwrapMaxWidth = isMaxWidth && isPresentationOnly;
+        if (!shouldUnwrap && !shouldUnwrapMaxWidth)
+            break;
+        current = match[2].trim();
+    }
+    return current;
+}
+export function extractSectionSnippet(sectionSource) {
+    const openTagEnd = sectionSource.indexOf('>');
+    const closeTagStart = sectionSource.lastIndexOf('</section>');
+    if (openTagEnd < 0 || closeTagStart < 0) {
+        return normalizeCode(sectionSource);
+    }
+    let inner = sectionSource.slice(openTagEnd + 1, closeTagStart);
+    inner = inner.replace(/^\s*<h2\b[\s\S]*?<\/h2>\s*/, '');
+    inner = inner.replace(/^\s*<!--[\s\S]*?-->\s*/g, '');
+    while (/^\s*<p\b[\s\S]*?<\/p>\s*/.test(inner)) {
+        inner = inner.replace(/^\s*<p\b[\s\S]*?<\/p>\s*/, '');
+    }
+    inner = inner.replace(/\s*<!--[\s\S]*?-->\s*$/g, '');
+    inner = unwrapPreviewWrappers(inner);
+    return normalizeCode(inner);
+}
+function decodeHeading(value) {
+    return value
+        .replaceAll('&amp;', '&')
+        .replaceAll('&times;', '×')
+        .replaceAll('&#39;', "'")
+        .replaceAll('&quot;', '"')
+        .trim();
+}
+function extractSectionHeading(sectionSource) {
+    const match = sectionSource.match(/<h2\b[^>]*>([\s\S]*?)<\/h2>/);
+    if (!match)
+        return '';
+    return decodeHeading(match[1].replace(/<[^>]+>/g, ' '));
+}
+export function getSectionSnippets(source, routeOverrides = {}) {
+    const overrides = routeOverrides;
+    return [...source.matchAll(/<section\b[\s\S]*?<\/section>/g)].map((match) => {
+        const sectionSource = match[0];
+        const heading = extractSectionHeading(sectionSource);
+        const overrideSnippet = heading ? overrides[heading] : undefined;
+        return {
+            heading,
+            snippet: overrideSnippet ?? extractSectionSnippet(sectionSource)
+        };
+    });
+}
+function detectLanguage(code) {
+    const source = code.trim();
+    if (source.includes('<script lang="ts">') ||
+        source.includes('$state(') ||
+        source.includes('{#each') ||
+        source.includes('<Button') ||
+        source.includes('<FormField')) {
+        return 'svelte';
+    }
+    if (source.startsWith('{') || source.startsWith('[')) {
+        return 'json';
+    }
+    if (source.startsWith('@import') ||
+        (source.includes('{') && source.includes(':') && source.includes(';'))) {
+        return 'css';
+    }
+    if (source.includes('import ') || source.includes('export ') || source.includes('interface ')) {
+        return 'ts';
+    }
+    if (source.startsWith('<') && source.endsWith('>')) {
+        return 'html';
+    }
+    if (source.startsWith('npm ') || source.startsWith('bun ') || source.startsWith('pnpm ')) {
+        return 'bash';
+    }
+    return 'js';
+}
+function decorateHighlightedHtml(html) {
+    return html.replace(/<pre class="shiki[\s\S]*?"[^>]*>/, '<pre class="shiki">');
+}
+export async function renderHighlightedCode(code, isDarkMode = true) {
+    const html = await codeToHtml(code, {
+        lang: detectLanguage(code),
+        theme: isDarkMode ? 'github-dark' : 'github-light'
+    });
+    return decorateHighlightedHtml(html);
+}
+export function slugToComponentName(slug) {
+    return slug
+        .split('-')
+        .filter((token) => token.length > 0)
+        .map((token) => (token[0] ? token[0].toUpperCase() + token.slice(1) : token))
+        .join('');
+}
+export function slugToHookName(slug) {
+    const tokens = slug.split('-').filter((token) => token.length > 0);
+    if (tokens.length === 0)
+        return '';
+    const [first, ...rest] = tokens;
+    return [
+        first,
+        ...rest.map((token) => (token[0] ? token[0].toUpperCase() + token.slice(1) : token))
+    ].join('');
+}
+export function buildDefaultComponentExample(slug) {
+    const componentName = slugToComponentName(slug);
+    return (`<script lang="ts">
+ import { ${componentName} } from 'svelora';
+<` +
+        `/script>
+
+<${componentName} />`);
+}
+export function buildDefaultHookExample(slug) {
+    const hookName = slugToHookName(slug);
+    return (`<script lang="ts">
+ import { ${hookName} } from 'svelora';
+<` +
+        `/script>
+
+const value = ${hookName}();`);
+}

package/dist/docs/navigation.d.ts

@@ -0,0 +1,27 @@
+export type DocsItem = {
+    title: string;
+    href: string;
+    icon: string;
+    legacyHref?: string;
+    description?: string;
+};
+export type DocsGroup = {
+    title: string;
+    items: DocsItem[];
+};
+export declare const docsMeta: {
+    readonly name: "Svelora";
+    readonly version: `v${string}`;
+    readonly npmCommand: "npm install svelora";
+    readonly githubHref: "https://github.com/asphum/svelora";
+};
+export declare const docsIntroItems: DocsItem[];
+export declare const docsThemeItems: DocsItem[];
+export declare const docsComponentGroups: DocsGroup[];
+export declare const docsHookItems: DocsItem[];
+export declare const docsTopNav: DocsItem[];
+export declare const allComponentItems: DocsItem[];
+export declare const allDocsItems: DocsItem[];
+export declare const totalComponents: number;
+export declare const totalHooks: number;
+export declare const docsPathAliases: Map<string, string>;