@sc4rfurryx/proteusjs 1.0.0 → 1.1.1

package/dist/modules/typography.esm.js

@@ -0,0 +1,168 @@
+/*!
+ * ProteusJS v1.1.1
+ * Shape-shifting responsive design that adapts like the sea god himself
+ * (c) 2025 sc4rfurry
+ * Released under the MIT License
+ */
+/**
+ * @sc4rfurryx/proteusjs/typography
+ * Fluid typography with CSS-first approach
+ *
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+/**
+ * Generate pure-CSS clamp() rules for fluid typography
+ */
+function fluidType(minRem, maxRem, options = {}) {
+    const { minViewportPx = 320, maxViewportPx = 1200, lineHeight, containerUnits = false } = options;
+    // Convert rem to px for calculations (assuming 16px base)
+    const minPx = minRem * 16;
+    const maxPx = maxRem * 16;
+    // Calculate slope and y-intercept for linear interpolation
+    const slope = (maxPx - minPx) / (maxViewportPx - minViewportPx);
+    const yIntercept = minPx - slope * minViewportPx;
+    // Generate clamp() function
+    const viewportUnit = containerUnits ? 'cqw' : 'vw';
+    const clampValue = `clamp(${minRem}rem, ${yIntercept / 16}rem + ${slope * 100}${viewportUnit}, ${maxRem}rem)`;
+    let css = `font-size: ${clampValue};`;
+    // Add line-height if specified
+    if (lineHeight) {
+        css += `\nline-height: ${lineHeight};`;
+    }
+    return { css };
+}
+/**
+ * Apply fluid typography to elements
+ */
+function applyFluidType(selector, minRem, maxRem, options = {}) {
+    const { css } = fluidType(minRem, maxRem, options);
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `${selector} {\n  ${css.replace(/\n/g, '\n  ')}\n}`;
+    styleElement.setAttribute('data-proteus-typography', selector);
+    document.head.appendChild(styleElement);
+}
+/**
+ * Create a complete typographic scale
+ */
+function createTypographicScale(baseSize = 1, ratio = 1.25, steps = 6, options = {}) {
+    const scale = {};
+    for (let i = -2; i <= steps - 3; i++) {
+        const size = baseSize * Math.pow(ratio, i);
+        const minSize = size * 0.8; // 20% smaller at min viewport
+        const maxSize = size * 1.2; // 20% larger at max viewport
+        const stepName = i <= 0 ? `small${Math.abs(i)}` : `large${i}`;
+        scale[stepName] = fluidType(minSize, maxSize, options);
+    }
+    return scale;
+}
+/**
+ * Generate CSS custom properties for a typographic scale
+ */
+function generateScaleCSS(scale, prefix = '--font-size') {
+    const cssVars = Object.entries(scale)
+        .map(([name, result]) => `  ${prefix}-${name}: ${result.css.replace('font-size: ', '').replace(';', '')};`)
+        .join('\n');
+    return `:root {\n${cssVars}\n}`;
+}
+/**
+ * Optimize line height for readability
+ */
+function optimizeLineHeight(fontSize, measure = 65) {
+    // Optimal line height based on font size and measure (characters per line)
+    // Smaller fonts need more line height, larger fonts need less
+    const baseLineHeight = 1.4;
+    const sizeAdjustment = Math.max(0.1, Math.min(0.3, (1 - fontSize) * 0.5));
+    const measureAdjustment = Math.max(-0.1, Math.min(0.1, (65 - measure) * 0.002));
+    return baseLineHeight + sizeAdjustment + measureAdjustment;
+}
+/**
+ * Calculate optimal font size for container width
+ */
+function calculateOptimalSize(containerWidth, targetCharacters = 65, baseCharWidth = 0.5) {
+    // Calculate font size to achieve target characters per line
+    const optimalFontSize = containerWidth / (targetCharacters * baseCharWidth);
+    // Clamp to reasonable bounds (12px to 24px)
+    return Math.max(0.75, Math.min(1.5, optimalFontSize));
+}
+/**
+ * Apply responsive typography to an element
+ */
+function makeResponsive(target, options = {}) {
+    const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+    if (!targetEl) {
+        throw new Error('Target element not found');
+    }
+    const { minSize = 0.875, maxSize = 1.25, targetCharacters = 65, autoLineHeight = true } = options;
+    // Apply fluid typography
+    const { css } = fluidType(minSize, maxSize);
+    const element = targetEl;
+    // Parse and apply CSS
+    const styles = css.split(';').filter(Boolean);
+    styles.forEach(style => {
+        const [property, value] = style.split(':').map(s => s.trim());
+        if (property && value) {
+            element.style.setProperty(property, value);
+        }
+    });
+    // Auto line height if enabled
+    if (autoLineHeight) {
+        const updateLineHeight = () => {
+            const computedStyle = getComputedStyle(element);
+            const fontSize = parseFloat(computedStyle.fontSize);
+            const containerWidth = element.getBoundingClientRect().width;
+            const charactersPerLine = containerWidth / (fontSize * 0.5);
+            const optimalLineHeight = optimizeLineHeight(fontSize / 16, charactersPerLine);
+            element.style.lineHeight = optimalLineHeight.toString();
+        };
+        updateLineHeight();
+        // Update on resize
+        if ('ResizeObserver' in window) {
+            const resizeObserver = new ResizeObserver(updateLineHeight);
+            resizeObserver.observe(element);
+            // Store cleanup function
+            element._proteusTypographyCleanup = () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }
+}
+/**
+ * Remove applied typography styles
+ */
+function cleanup(target) {
+    if (target) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (targetEl && targetEl._proteusTypographyCleanup) {
+            targetEl._proteusTypographyCleanup();
+            delete targetEl._proteusTypographyCleanup;
+        }
+    }
+    else {
+        // Remove all typography style elements
+        const styleElements = document.querySelectorAll('style[data-proteus-typography]');
+        styleElements.forEach(element => element.remove());
+    }
+}
+/**
+ * Check if container query units are supported
+ */
+function supportsContainerUnits() {
+    return CSS.supports('width', '1cqw');
+}
+// Export default object for convenience
+var index = {
+    fluidType,
+    applyFluidType,
+    createTypographicScale,
+    generateScaleCSS,
+    optimizeLineHeight,
+    calculateOptimalSize,
+    makeResponsive,
+    cleanup,
+    supportsContainerUnits
+};
+
+export { applyFluidType, calculateOptimalSize, cleanup, createTypographicScale, index as default, fluidType, generateScaleCSS, makeResponsive, optimizeLineHeight, supportsContainerUnits };
+//# sourceMappingURL=typography.esm.js.map

package/dist/modules/typography.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.esm.js","sources":["../../src/modules/typography/index.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}