@inizioevoke/astro-core 2.1.2 → 2.2.1

package/src/components/CssVariables.astro

@@ -0,0 +1,129 @@
+---
+// See /docs/components/CssVariables.md
+import type { ImageMetadata, ImageOutputFormat } from "astro";
+import { getImage } from "astro:assets";
+
+export type CssVariableType = 'image' | 'url';
+
+export interface Breakpoint {
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  value: string | number | ImageMetadata;
+}
+
+export interface CssVariable {
+  name: string;
+  type?: CssVariableType;
+  value: string | number | ImageMetadata;
+  breakpoints?: Breakpoint[];
+}
+
+export interface ImageCssVariable extends CssVariable {
+  type: 'image';
+  value: ImageMetadata;
+  optimize?: boolean;
+  format?: ImageOutputFormat;
+  quality?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface Props {
+  selector?: string;
+  variables: (CssVariable | ImageCssVariable)[];
+}
+
+const { selector, variables } = Astro.props;
+
+const breakpoints: {
+  minWidth?: string | number,
+  maxWidth?: string | number,
+  values: {
+    name: string,
+    type?: CssVariableType,
+    value: string | number | ImageMetadata
+  }[]
+}[] = [];
+
+// group all the breakpoints together to minimize the output
+for (const v of variables) {
+  if (v.breakpoints) {
+    for (const bp of v.breakpoints) {
+      const b = breakpoints.find((pt) => {
+        return pt.minWidth === bp.minWidth && pt.maxWidth === bp.maxWidth;
+      });
+      if (b) {
+        b.values.push({
+          name: v.name,
+          type: v.type,
+          value: bp.value
+        });
+      } else {
+        breakpoints.push({
+          minWidth: bp.minWidth,
+          maxWidth: bp.maxWidth,
+          values: [{
+            name: v.name,
+            type: v.type,
+            value: bp.value
+          }]
+        });
+      }
+    }
+  }
+}
+
+async function createVariable(v: ImageCssVariable | CssVariable) {
+  switch (v.type) {
+    case 'image': {
+      const iv = v as ImageCssVariable;
+      if (iv.optimize !== false) {
+        const img = await getImage({
+          src: iv.value,
+          format: iv.format ?? iv.value.format,
+          quality: iv.quality,
+          width: iv.width,
+          height: iv.height
+        });
+        return `--${v.name}:url("${img.src}");`;
+      } else {
+        return `--${v.name}:url("${iv.value.src}");`;
+      }
+    }
+    case 'url':
+      return `--${v.name}:url("${v.value}");`;
+    default:
+      return `--${v.name}:${v.value};`;
+  }
+}
+
+const styles: string[] = [];
+for (const v of variables) {
+  styles.push(await createVariable(v));
+}
+
+for (const bp of breakpoints) {
+  const widths = [];
+  if (bp.minWidth) {
+    widths.push(`(min-width:${typeof bp.minWidth == 'number' ? `${bp.minWidth}px` : bp.minWidth})`);
+  }
+  if (bp.maxWidth) {
+    widths.push(`(max-width:${typeof bp.maxWidth == 'number' ? `${bp.maxWidth}px` : bp.maxWidth})`);
+  }
+  if (widths.length > 0) {
+    styles.push(`@media screen and ${widths.join(' and ')}{`);
+    for (const v of bp.values) {
+      styles.push(await createVariable(v));
+    }
+    styles.push('}');
+  }
+}
+
+const html = [`${import.meta.env.PROD ? '' : '\n'}${selector ?? ':root'}{`]
+  .concat(styles.map((s) => { 
+    return `${s}`; 
+  }))
+  .concat(['}'])
+  .join(import.meta.env.PROD ? '' : '\n');
+---
+<style set:html={html} />

package/src/components/FlipCard/FlipCard.astro

@@ -37,11 +37,11 @@ const backTriggerSlot = Astro.slots.has('back-trigger') ? await Astro.slots.rend
 <evo-flip-card flipped="false" style={style.join(';')} {...attrs}>
   <div class="evo-flip-card-wrapper">
     <div class="evo-flip-card-front">
-      <button class="evo-flip-card-trigger">{frontTriggerSlot ?? <Fragment set:html={'&#8635;'} />}</button>
+      <button class="evo-flip-card-trigger"><Fragment set:html={frontTriggerSlot ?? '&#8635;'} /></button>
       <slot name="front" />
     </div>
     <div class="evo-flip-card-back">
-      <button class="evo-flip-card-trigger">{backTriggerSlot ?? <Fragment set:html={'&#8635;'} />}</button>
+      <button class="evo-flip-card-trigger"><Fragment set:html={backTriggerSlot ?? '&#8635;'} /></button>
       <slot name="back" />
     </div>
   </div>

package/src/components/Modal/Modal.ts

@@ -74,14 +74,14 @@ export class EvoModalElement extends HTMLElement implements IEvoModalElement {
 
         const duration = getAnimationDuration(this);
 
-        this.classList.add(`${CSS_PREFIX_HIDE}-${this.#animation}`);
-        this.classList.remove(`${CSS_PREFIX_SHOW}-${this.#animation}`);
+        this.classList.add(`${CSS_PREFIX_HIDE}-${animation}`);
+        this.classList.remove(`${CSS_PREFIX_SHOW}-${animation}`);
         if (overlay) {
           hideOverlay({ modal: this, animation: this.#animation, duration });
         }
 
         setTimeout(() => {
-          this.classList.remove('evo-modal-visible', `${CSS_PREFIX_HIDE}-${this.#animation}`);
+          this.classList.remove('evo-modal-visible', `${CSS_PREFIX_HIDE}-${animation}`);
           this.dispatchEvent(createModalEvent('evomodal-hidden', this, { replacedBy }));
           resolve();
         }, animation !== 'none' ? duration : 0);
@@ -176,7 +176,7 @@ export function hideOverlay({ modal, animation = 'fade', duration }: { modal?: E
 /**
  * Call this function when dynamically adding a trigger to the DOM
  */
-export function bindTriggers(container = document) {
+export function bindTriggers(container: Document | HTMLElement = document) {
   container.querySelectorAll<HTMLElement>('[data-evo-modal-show]').forEach((trigger) => {
     if (!trigger.hasAttribute('data-evo-modal-bound')) {
       trigger.setAttribute('data-evo-modal-bound','true');

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -32,7 +32,11 @@ switch (scrolling) {
     break;
 }
 
-containerAttrs.style = typeof containerAttrs.style == 'string' ? `${containerAttrs.style}${containerAttrs.style.endsWith(';') ? '' : ';'}` : '';
+containerAttrs.style = typeof containerAttrs.style == 'string'
+  ? `${containerAttrs.style}${containerAttrs.style.endsWith(';') ? '' : ';'}`
+  : typeof containerAttrs.style == 'object' && containerAttrs.style !== null
+    ? Object.entries(containerAttrs.style).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`).join(';') + ';'
+    : '';
 if (width) {
   containerAttrs.style = `${containerAttrs.style}width:${typeof width == 'number' || /^\d+$/.test(width) ? `${width}px` : width};`;
 }

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -11,18 +11,6 @@ const intersectionObserver = new IntersectionObserver((entries) => {
   { threshold: 0.1 }
 );
 
-const mutationObserver = new MutationObserver((mutations) => {
-  const containers = new Set<IScrollContainer>();
-  mutations.forEach((mutation) => {
-    const sc = getScrollContainer(mutation.target as HTMLElement);
-    if (sc) {
-      containers.add(sc);
-    }
-  });
-  [...containers].forEach((container) => {
-    container.refresh();
-  });
-});
 
 export type Scrolling = 'horizontal' | 'vertical' | 'both';
 
@@ -68,10 +56,12 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
   #mouseupHandlerHorz: any = undefined;
   #mousemoveHandlerHorz: any = undefined;
   #boundResizeHandler: () => void;
+  #mutationObserver: MutationObserver;
 
   constructor() {
     super();
     this.#boundResizeHandler = this.refresh.bind(this);
+    this.#mutationObserver = new MutationObserver(() => this.refresh());
   }
 
   connectedCallback() {
@@ -90,7 +80,7 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
     this.#scrolling = (this.dataset.scrolling as Scrolling) ?? 'vertical';
 
     intersectionObserver.observe(this);
-    mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+    this.#mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
 
     window.addEventListener('resize', this.#boundResizeHandler, { passive: true });
     if (this.#scrolling === 'horizontal') {
@@ -100,7 +90,8 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
 
   disconnectedCallback() {
     intersectionObserver.unobserve(this);
-    window.removeEventListener('resize', this.#boundResizeHandler); 
+    this.#mutationObserver.disconnect();
+    window.removeEventListener('resize', this.#boundResizeHandler);
     this.removeEventListener('wheel', this.#wheelHorz);
   }
 
@@ -182,14 +173,14 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
     }
   }
 
-  removeEventListener(type: keyof HTMLElementEventMap, listener: (this: EvoScrollContainerElement, ev: any) => void) {
+  removeEventListener(type: keyof HTMLElementEventMap, listener: (this: EvoScrollContainerElement, ev: any) => void, options?: boolean | EventListenerOptions) {
     switch (type) {
       case 'scroll':
       case 'scrollend':
-        this.#content.removeEventListener(type, listener);
+        this.#content.removeEventListener(type, listener, options);
         break;
       default:
-        super.removeEventListener(type, listener);
+        super.removeEventListener(type, listener, options);
         break;
     }
   }
@@ -207,7 +198,7 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
         const trackOffset = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-height-offset'), 10);
         const trackAdjust = (!isNaN(trackTop) ? trackTop : 0) + (!isNaN(trackBot) ? trackBot : 0) + (!isNaN(trackOffset) ? trackOffset : 0);
 
-        const shouldScroll = (containerHeight / scrollHeight) < 1;
+        // const shouldScroll = (containerHeight / scrollHeight) < 1;
         const visibleRatioVert = (containerHeight - trackAdjust) / scrollHeight;
         const thumbHeight = visibleRatioVert * trackHeight;
 
@@ -261,7 +252,7 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
   #thumbMouseMoveVert(e: MouseEvent) {
     if (this.#isDraggingVert) {
       const deltaY = e.clientY - this.#startY;
-      const thumbTrackHeight = this.clientHeight - this.#thumbVert!.clientHeight;
+      const thumbTrackHeight = this.#trackVert!.clientHeight - this.#thumbVert!.clientHeight;
       if (thumbTrackHeight <= 0) return;
       const scrollRatio = (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
       this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
@@ -294,7 +285,7 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
   #thumbMouseMoveHorz(e: MouseEvent) {
     if (this.#isDraggingHorz) {
       const deltaX = e.clientX - this.#startX;
-      const thumbTrackWidth = this.clientWidth - this.#thumbHorz!.clientWidth;
+      const thumbTrackWidth = this.#trackHorz!.clientWidth - this.#thumbHorz!.clientWidth;
       if (thumbTrackWidth <= 0) return;
       const scrollRatio = (this.#content.scrollWidth - this.clientWidth) / thumbTrackWidth;
       this.#content.scrollLeft = this.#startScrollLeft + deltaX * scrollRatio;
@@ -367,8 +358,8 @@ export function refresh(selector?: string | HTMLElement) {
       sc.refresh()
     }
   } else {
-    [...document.querySelectorAll<EvoScrollContainerElement>(EvoScrollContainerElement.htmlTagName)].forEach((selector) => {
-      selector.refresh();
+    [...document.querySelectorAll<EvoScrollContainerElement>(EvoScrollContainerElement.htmlTagName)].forEach((sc) => {
+      sc.refresh();
     });
   }
 }

package/src/components/Tabs/TabItem.astro

@@ -1,6 +1,5 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import { undefined } from 'astro:schema';
 interface Props {
   active?: true;
   tabAttrs?: HTMLAttributes<'div'>
@@ -15,7 +14,7 @@ const tabTitle = await Astro.slots.render('title');
 const attrs = { ...tabAttrs, title: tabTitle };
 ---
 <div 
-  data-tab-attrs={attrs ? btoa(JSON.stringify(attrs)) : undefined}
+  data-tab-attrs={btoa(JSON.stringify(attrs))}
   data-tab-active={active ?? false}
   {...panelAttrs}
   role="tabpanel" 

package/src/components/Tabs/Tabs.astro

@@ -55,8 +55,7 @@ const itemHtml = html.replace(
     let updated = match
       .replace(/\s*data-tab-attrs="[^"]*"/, '')
       .replace(/\s*data-tab-active="[^"]*"/, '')
-      .replace(/\s*hidden(?:="[^"]*")?/, '')
-      + (active ? '' : '');
+      .replace(/\s*hidden(?:="[^"]*")?/, '');
 
     // Insert data-tab index
     updated = updated.replace(/^<(\w+)/, `<$1 data-tab="${currentIndex}"`);
@@ -79,7 +78,7 @@ const tabHtml = tabs.map((tab) => {
   Object.keys(tab)
     .filter(key => !['class','active','title','index'].includes(key))
     .forEach((key) => {
-      attrs.push(`${key}="${tab[key as keyof typeof tab].replace(/"/g, '')}"`)
+      attrs.push(`${key}="${String(tab[key as keyof typeof tab] ?? '').replace(/"/g, '')}"`)
     });
 
   if (listType === 'none') {

package/src/components/index.ts

@@ -1,3 +1,5 @@
+export { default as CssBackgroundImage } from './CssBackgroundImage.astro';
+export { default as CssVariables } from './CssVariables.astro';
 export { default as FlipCard } from './FlipCard/FlipCard.astro';
 export { default as RightISI } from './ISI/Right/RightISI.astro';
 export { default as Modal } from './Modal/Modal.astro';

package/src/integrations/prune-build.ts

@@ -20,6 +20,7 @@ async function getFiles(dir: string, { includeExts, excludeExts }: { includeExts
 }
 
 interface PruneBuildOpts {
+  enabled?: boolean;
   keep?: (string | RegExp)[]
 }
 export default function(opts?: PruneBuildOpts): AstroIntegration {
@@ -27,43 +28,50 @@ export default function(opts?: PruneBuildOpts): AstroIntegration {
     name: 'prune-build',
     hooks: {
       'astro:build:done': async ({ dir, logger }) => {
+        if (opts?.enabled === false) {
+          return;
+        }
         logger.info('Pruning unused assets from build');
         let dirPath = fileURLToPath(dir);
         if (dirPath.endsWith(sep)) {
           dirPath = dirPath.slice(0, -1);
         }
-        const assets = await getFiles(dirPath, { excludeExts: ['.html'] });
-        const files = await getFiles(dirPath, { includeExts: ['.css', '.html', '.js'] });
-        const keep = new Set<string>();
-        
-        for (const file of files) {
-          const content = await readFile(file, 'utf8');
-          for (const asset of assets) {
-            if (content.includes(basename(asset))) {
-              keep.add(asset);
+        try {
+          const assets = await getFiles(dirPath, { excludeExts: ['.html'] });
+          const files = await getFiles(dirPath, { includeExts: ['.css', '.html', '.js'] });
+          const keepAssets = new Set<string>();
+
+          for (const file of files) {
+            const content = await readFile(file, 'utf8');
+            for (const asset of assets) {
+              if (content.includes(basename(asset))) {
+                keepAssets.add(asset);
+              }
             }
           }
-        }
 
-        for (const asset of assets) {
-          if (!keep.has(asset)) {
-            let prune = true;
-            const relPath = asset.replace(dirPath, '').replace(/\\/g, '/');
-            if (opts?.keep && opts.keep.length > 0) {
-              for (const k of opts.keep) {
-                if ((typeof k == 'string' && k === relPath) || (k instanceof RegExp && k.test(relPath))) {
-                  prune = false;
-                  break;
+          for (const asset of assets) {
+            if (!keepAssets.has(asset)) {
+              let prune = true;
+              const relPath = asset.slice(dirPath.length).replace(/\\/g, '/');
+              if (opts?.keep && opts.keep.length > 0) {
+                for (const k of opts.keep) {
+                  if ((typeof k == 'string' && k === relPath) || (k instanceof RegExp && k.test(relPath))) {
+                    prune = false;
+                    break;
+                  }
                 }
               }
-            }
-            if (prune) {
-              logger.warn(`Pruning asset: ${relPath}`);
-              await rm(asset, { force: true });
-            } else {
-              logger.info(`Retaining asset: ${relPath}`);
+              if (prune) {
+                logger.warn(`Pruning asset: ${relPath}`);
+                await rm(asset, { force: true });
+              } else {
+                logger.info(`Retaining asset: ${relPath}`);
+              }
             }
           }
+        } catch (error: any) {
+          logger.error(error.toString());
         }
       }
     }

package/src/lib/gestures/pinch.ts

@@ -1,22 +1,47 @@
-export function createPinchListener() {
-  type PinchDirection = 'in' | 'out';
+/** `'spread'` — fingers moving apart; `'pinch'` — fingers moving together. */
+export type PinchGesture = 'spread' | 'pinch';
 
+export interface PinchController {
+  enable: () => void;
+  disable: () => void;
+  dispose: () => void;
+}
+
+/**
+ * Attaches a two-finger pinch gesture listener to `window`.
+ *
+ * Tracks the cumulative scale across gestures, snapping to `1` when crossing
+ * the natural scale boundary. Fires `onPinch` on every move tick where the
+ * finger distance changes.
+ *
+ * @param onPinch - Called with the current cumulative scale and gesture direction.
+ * @returns A `PinchController` with `enable`, `disable`, and `dispose` methods.
+ *
+ * @example
+ * const pinch = createPinchListener((scale, gesture) => {
+ *   console.log(gesture, scale); // 'spread' 1.23
+ * });
+ *
+ * // Later, to clean up:
+ * pinch.dispose();
+ */
+export function createPinchListener(onPinch: (scale: number, gesture: PinchGesture) => void): PinchController {
   let initialDist: number = 0;
   let lastDistance: number = 0;
   let currentScale: number = 1;
   let activeScale: number = 1;
 
-  function getTouchDistance(touches: TouchList) {
+  const getTouchDistance = (touches: TouchList) => {
     return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
-  }
-  
-  function reset() {
+  };
+
+  const reset = () => {
     window.removeEventListener('touchmove', touchmove);
     window.removeEventListener('touchend', touchend);
     currentScale = activeScale;
     initialDist = 0;
     lastDistance = 0;
-  }
+  };
 
   const touchstart = (e: TouchEvent) => {
     if (e.touches.length === 2) {
@@ -36,22 +61,22 @@ export function createPinchListener() {
 
       const rawScale = currentScale * ratio;
 
-      // Detect if we're crossing 1 from either direction
+      // Detect if we're crossing 1 from either gesture
       const crossingOne =
         (currentScale > 1 && rawScale < 1) ||
         (currentScale < 1 && rawScale > 1);
 
       activeScale = crossingOne ? 1 : rawScale; // snap to 1
 
-      let direction: PinchDirection | undefined = undefined;
+      let gesture: PinchGesture | undefined = undefined;
       if (currentDistance > lastDistance) {
-        direction = 'in';
+        gesture = 'spread';
       } else if (currentDistance < lastDistance) {
-        direction = 'out';
+        gesture = 'pinch';
       }
 
-      if (direction !== undefined) {
-        console.log(activeScale, direction);
+      if (gesture !== undefined) {
+        onPinch(activeScale, gesture);
         lastDistance = currentDistance;
       }
     }
@@ -62,5 +87,27 @@ export function createPinchListener() {
       reset();
     }
   };
-  window.addEventListener('touchstart', touchstart, { passive: true });
-}
+
+  let listening = false;
+
+  const enable = () => {
+    if (!listening) {
+      listening = true;
+      window.addEventListener('touchstart', touchstart, { passive: true });
+    }
+  };
+
+  const disable = () => {
+    listening = false;
+    window.removeEventListener('touchstart', touchstart);
+    reset();
+  };
+
+  enable();
+
+  return { 
+    enable, 
+    disable, 
+    dispose: disable 
+  };
+}