@studiometa/ui 1.7.0 → 1.8.0

package/ScrollAnimation/withScrollAnimationDebug.js

@@ -0,0 +1,309 @@
+import { createElement } from "@studiometa/js-toolkit/utils";
+const debugColors = [
+  "#8b5cf6",
+  // violet
+  "#3b82f6",
+  // blue
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#ef4444",
+  // red
+  "#ec4899",
+  // pink
+  "#06b6d4",
+  // cyan
+  "#84cc16"
+  // lime
+];
+function getDebugColor(index) {
+  return debugColors[(index - 1) % debugColors.length];
+}
+const debugStyles = `
+  .scroll-animation-debug {
+    --debug-color: #8b5cf6;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 80px;
+    pointer-events: none;
+    z-index: 99999;
+    font-family: ui-monospace, monospace;
+    font-size: 10px;
+  }
+  .scroll-animation-debug__marker {
+    position: absolute;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    color: white;
+    white-space: nowrap;
+    transform: translateY(-50%);
+  }
+  .scroll-animation-debug__marker::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    width: 100vw;
+    height: 1px;
+    background: var(--debug-color);
+  }
+  .scroll-animation-debug__marker--start {
+    background: var(--debug-color);
+  }
+  .scroll-animation-debug__marker--end {
+    background: var(--debug-color);
+    opacity: 0.7;
+  }
+  .scroll-animation-debug__outline {
+    position: absolute;
+    inset: 0;
+    border: 2px dashed var(--debug-color);
+    pointer-events: none;
+    z-index: 99998;
+  }
+  .scroll-animation-debug-progress-container {
+    position: fixed;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+    z-index: 99999;
+    font-family: ui-monospace, monospace;
+    font-size: 10px;
+  }
+  .scroll-animation-debug__progress {
+    --debug-color: #8b5cf6;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+  .scroll-animation-debug__progress-bar {
+    width: 4px;
+    height: 60px;
+    background: rgba(139, 92, 246, 0.2);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .scroll-animation-debug__progress-fill {
+    width: 100%;
+    background: var(--debug-color);
+    border-radius: 2px;
+    transition: height 0.1s ease-out;
+  }
+  .scroll-animation-debug__progress-text {
+    color: var(--debug-color);
+    font-weight: bold;
+    width: 3ch;
+    text-align: center;
+  }
+`;
+let styleElement = null;
+let progressContainer = null;
+let debugInstanceCount = 0;
+let debugIdCounter = 0;
+function injectDebugStyles() {
+  if (!styleElement) {
+    styleElement = createElement("style", [debugStyles]);
+    document.head.appendChild(styleElement);
+  }
+}
+function removeDebugStyles() {
+  if (styleElement && debugInstanceCount === 0) {
+    styleElement.remove();
+    styleElement = null;
+  }
+}
+function getProgressContainer() {
+  if (!progressContainer) {
+    progressContainer = createElement("div", {
+      class: "scroll-animation-debug-progress-container"
+    });
+    document.body.appendChild(progressContainer);
+  }
+  return progressContainer;
+}
+function cleanupProgressContainer() {
+  if (progressContainer && progressContainer.children.length === 0) {
+    progressContainer.remove();
+    progressContainer = null;
+  }
+}
+const namedOffsets = {
+  start: 0,
+  center: 0.5,
+  end: 1
+};
+function parseOffsetValue(value) {
+  if (namedOffsets[value] !== void 0) {
+    return namedOffsets[value];
+  }
+  if (value.endsWith("%")) {
+    return Number.parseFloat(value) / 100;
+  }
+  return Number.parseFloat(value) || 0;
+}
+function parseOffset(offset) {
+  const parts = offset.split("/").map((part) => part.trim().split(" "));
+  const viewportStart = parseOffsetValue(parts[0]?.[1] || "end");
+  const viewportEnd = parseOffsetValue(parts[1]?.[1] || "start");
+  return { viewportStart, viewportEnd };
+}
+function createDebugElements(color) {
+  const startMarker = createElement(
+    "div",
+    { class: "scroll-animation-debug__marker scroll-animation-debug__marker--start" },
+    [createElement("span", ["start"])]
+  );
+  const endMarker = createElement(
+    "div",
+    { class: "scroll-animation-debug__marker scroll-animation-debug__marker--end" },
+    [createElement("span", ["end"])]
+  );
+  const wrapper = createElement("div", { class: "scroll-animation-debug" }, [
+    startMarker,
+    endMarker
+  ]);
+  wrapper.style.setProperty("--debug-color", color);
+  const progressBar = createElement("div", { class: "scroll-animation-debug__progress-fill" });
+  const progressText = createElement("span", { class: "scroll-animation-debug__progress-text" }, [
+    "0%"
+  ]);
+  const progress = createElement("div", { class: "scroll-animation-debug__progress" }, [
+    createElement("div", { class: "scroll-animation-debug__progress-bar" }, [progressBar]),
+    progressText
+  ]);
+  progress.style.setProperty("--debug-color", color);
+  return {
+    wrapper,
+    startMarker,
+    endMarker,
+    progress,
+    progressBar,
+    progressText
+  };
+}
+function createOutlineElement(color) {
+  const outline = createElement("div", {
+    class: "scroll-animation-debug__outline"
+  });
+  outline.style.setProperty("--debug-color", color);
+  return outline;
+}
+function withScrollAnimationDebug(BaseClass) {
+  class WithScrollAnimationDebug extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: BaseClass.config.name,
+      options: {
+        ...BaseClass.config.options,
+        debug: Boolean
+      }
+    };
+    /**
+     * Debug elements.
+     */
+    __debugElements = null;
+    /**
+     * Debug outline element.
+     */
+    __debugOutline = null;
+    /**
+     * Debug ID.
+     */
+    __debugId = "";
+    /**
+     * Mounted hook.
+     */
+    mounted() {
+      if (super.mounted) super.mounted();
+      if (this.$options.debug) {
+        this.__initDebug();
+      }
+    }
+    /**
+     * Destroyed hook.
+     */
+    destroyed() {
+      this.__destroyDebug();
+      if (super.destroyed) super.destroyed();
+    }
+    /**
+     * Initialize debug elements.
+     */
+    __initDebug() {
+      debugIdCounter += 1;
+      debugInstanceCount += 1;
+      this.__debugId = `timeline-${debugIdCounter}`;
+      const color = getDebugColor(debugIdCounter);
+      injectDebugStyles();
+      this.__debugElements = createDebugElements(color);
+      document.body.appendChild(this.__debugElements.wrapper);
+      const container = getProgressContainer();
+      container.appendChild(this.__debugElements.progress);
+      const { viewportStart, viewportEnd } = parseOffset(this.$options.offset);
+      const viewportHeight = window.innerHeight;
+      this.__debugElements.startMarker.style.top = `${viewportStart * viewportHeight}px`;
+      this.__debugElements.endMarker.style.top = `${viewportEnd * viewportHeight}px`;
+      this.__debugOutline = createOutlineElement(color);
+      const position = getComputedStyle(this.$el).position;
+      if (position === "static") {
+        this.$el.style.position = "relative";
+      }
+      this.$el.appendChild(this.__debugOutline);
+    }
+    /**
+     * Destroy debug elements.
+     */
+    __destroyDebug() {
+      if (this.__debugElements) {
+        this.__debugElements.wrapper.remove();
+        this.__debugElements.progress.remove();
+        this.__debugElements = null;
+      }
+      if (this.__debugOutline) {
+        this.__debugOutline.remove();
+        this.__debugOutline = null;
+      }
+      if (this.$options.debug) {
+        debugInstanceCount -= 1;
+        cleanupProgressContainer();
+        removeDebugStyles();
+      }
+    }
+    /**
+     * Update debug progress.
+     */
+    __updateDebug(props) {
+      if (!this.__debugElements) return;
+      const { progressBar, progressText } = this.__debugElements;
+      const progress = Math.round(props.dampedProgress.y * 100);
+      progressBar.style.height = `${progress}%`;
+      progressText.textContent = `${progress}%`;
+    }
+    /**
+     * Scrolled in view hook.
+     */
+    scrolledInView(props) {
+      if (this.$options.debug) {
+        this.__updateDebug(props);
+      }
+      super.scrolledInView(props);
+    }
+  }
+  return WithScrollAnimationDebug;
+}
+export {
+  withScrollAnimationDebug
+};
+//# sourceMappingURL=withScrollAnimationDebug.js.map

package/ScrollAnimation/withScrollAnimationDebug.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/ScrollAnimation/withScrollAnimationDebug.ts"],
+  "sourcesContent": ["import type {\n  Base,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n  BaseDecorator,\n  ScrollInViewProps,\n} from '@studiometa/js-toolkit';\nimport { createElement } from '@studiometa/js-toolkit/utils';\n\n/**\n * Debug marker element interface.\n */\ninterface DebugElements {\n  wrapper: HTMLElement;\n  startMarker: HTMLElement;\n  endMarker: HTMLElement;\n  progress: HTMLElement;\n  progressBar: HTMLElement;\n  progressText: HTMLElement;\n}\n\n/**\n * Debug colors for different timelines.\n */\nconst debugColors = [\n  '#8b5cf6', // violet\n  '#3b82f6', // blue\n  '#10b981', // emerald\n  '#f59e0b', // amber\n  '#ef4444', // red\n  '#ec4899', // pink\n  '#06b6d4', // cyan\n  '#84cc16', // lime\n];\n\n/**\n * Get debug color for a given index.\n */\nfunction getDebugColor(index: number): string {\n  return debugColors[(index - 1) % debugColors.length];\n}\n\n/**\n * Debug styles.\n */\nconst debugStyles = `\n  .scroll-animation-debug {\n    --debug-color: #8b5cf6;\n    position: fixed;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: 80px;\n    pointer-events: none;\n    z-index: 99999;\n    font-family: ui-monospace, monospace;\n    font-size: 10px;\n  }\n  .scroll-animation-debug__marker {\n    position: absolute;\n    right: 0;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 6px;\n    color: white;\n    white-space: nowrap;\n    transform: translateY(-50%);\n  }\n  .scroll-animation-debug__marker::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    width: 100vw;\n    height: 1px;\n    background: var(--debug-color);\n  }\n  .scroll-animation-debug__marker--start {\n    background: var(--debug-color);\n  }\n  .scroll-animation-debug__marker--end {\n    background: var(--debug-color);\n    opacity: 0.7;\n  }\n  .scroll-animation-debug__outline {\n    position: absolute;\n    inset: 0;\n    border: 2px dashed var(--debug-color);\n    pointer-events: none;\n    z-index: 99998;\n  }\n  .scroll-animation-debug-progress-container {\n    position: fixed;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    pointer-events: none;\n    z-index: 99999;\n    font-family: ui-monospace, monospace;\n    font-size: 10px;\n  }\n  .scroll-animation-debug__progress {\n    --debug-color: #8b5cf6;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n  }\n  .scroll-animation-debug__progress-bar {\n    width: 4px;\n    height: 60px;\n    background: rgba(139, 92, 246, 0.2);\n    border-radius: 2px;\n    overflow: hidden;\n  }\n  .scroll-animation-debug__progress-fill {\n    width: 100%;\n    background: var(--debug-color);\n    border-radius: 2px;\n    transition: height 0.1s ease-out;\n  }\n  .scroll-animation-debug__progress-text {\n    color: var(--debug-color);\n    font-weight: bold;\n    width: 3ch;\n    text-align: center;\n  }\n`;\n\n/**\n * Shared style element.\n */\nlet styleElement: HTMLStyleElement | null = null;\n\n/**\n * Shared progress container.\n */\nlet progressContainer: HTMLElement | null = null;\n\n/**\n * Debug instance counter.\n */\nlet debugInstanceCount = 0;\n\n/**\n * Debug ID counter.\n */\nlet debugIdCounter = 0;\n\n/**\n * Inject debug styles if not already injected.\n */\nfunction injectDebugStyles() {\n  if (!styleElement) {\n    styleElement = createElement('style', [debugStyles]) as HTMLStyleElement;\n    document.head.appendChild(styleElement);\n  }\n}\n\n/**\n * Remove debug styles if no more instances.\n */\nfunction removeDebugStyles() {\n  if (styleElement && debugInstanceCount === 0) {\n    styleElement.remove();\n    styleElement = null;\n  }\n}\n\n/**\n * Get or create the shared progress container.\n */\nfunction getProgressContainer(): HTMLElement {\n  if (!progressContainer) {\n    progressContainer = createElement('div', {\n      class: 'scroll-animation-debug-progress-container',\n    });\n    document.body.appendChild(progressContainer);\n  }\n  return progressContainer;\n}\n\n/**\n * Remove progress container if empty.\n */\nfunction cleanupProgressContainer() {\n  if (progressContainer && progressContainer.children.length === 0) {\n    progressContainer.remove();\n    progressContainer = null;\n  }\n}\n\n/**\n * Named offset values mapping.\n */\nconst namedOffsets: Record<string, number> = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Parse an offset value to a ratio (0-1).\n */\nfunction parseOffsetValue(value: string): number {\n  if (namedOffsets[value] !== undefined) {\n    return namedOffsets[value];\n  }\n  if (value.endsWith('%')) {\n    return Number.parseFloat(value) / 100;\n  }\n  return Number.parseFloat(value) || 0;\n}\n\n/**\n * Parse the offset option to get viewport positions.\n * Format: \"<targetStart> <viewportStart> / <targetEnd> <viewportEnd>\"\n */\nfunction parseOffset(offset: string): { viewportStart: number; viewportEnd: number } {\n  const parts = offset.split('/').map((part) => part.trim().split(' '));\n  const viewportStart = parseOffsetValue(parts[0]?.[1] || 'end');\n  const viewportEnd = parseOffsetValue(parts[1]?.[1] || 'start');\n  return { viewportStart, viewportEnd };\n}\n\n/**\n * Create debug marker elements.\n */\nfunction createDebugElements(color: string): DebugElements {\n  const startMarker = createElement(\n    'div',\n    { class: 'scroll-animation-debug__marker scroll-animation-debug__marker--start' },\n    [createElement('span', ['start'])],\n  );\n\n  const endMarker = createElement(\n    'div',\n    { class: 'scroll-animation-debug__marker scroll-animation-debug__marker--end' },\n    [createElement('span', ['end'])],\n  );\n\n  const wrapper = createElement('div', { class: 'scroll-animation-debug' }, [\n    startMarker,\n    endMarker,\n  ]) as HTMLElement;\n  wrapper.style.setProperty('--debug-color', color);\n\n  const progressBar = createElement('div', { class: 'scroll-animation-debug__progress-fill' });\n  const progressText = createElement('span', { class: 'scroll-animation-debug__progress-text' }, [\n    '0%',\n  ]);\n\n  const progress = createElement('div', { class: 'scroll-animation-debug__progress' }, [\n    createElement('div', { class: 'scroll-animation-debug__progress-bar' }, [progressBar]),\n    progressText,\n  ]) as HTMLElement;\n  progress.style.setProperty('--debug-color', color);\n\n  return {\n    wrapper,\n    startMarker,\n    endMarker,\n    progress,\n    progressBar,\n    progressText,\n  };\n}\n\n/**\n * Create outline element for the timeline.\n */\nfunction createOutlineElement(color: string): HTMLElement {\n  const outline = createElement('div', {\n    class: 'scroll-animation-debug__outline',\n  }) as HTMLElement;\n  outline.style.setProperty('--debug-color', color);\n  return outline;\n}\n\nexport interface WithScrollAnimationDebugProps extends BaseProps {\n  $options: {\n    debug: boolean;\n    offset: string;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface WithScrollAnimationDebugInterface extends BaseInterface {}\n\n/**\n * Add debug capabilities to a ScrollAnimationTimeline component.\n *\n * @example\n * ```js\n * import { ScrollAnimationTimeline } from '@studiometa/ui';\n * import { withScrollAnimationDebug } from '@studiometa/ui/ScrollAnimation/withScrollAnimationDebug';\n *\n * class App extends Base {\n *   static config = {\n *     name: 'App',\n *     components: {\n *       ScrollAnimationTimeline: withScrollAnimationDebug(ScrollAnimationTimeline),\n *     },\n *   };\n * }\n * ```\n */\nexport function withScrollAnimationDebug<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithScrollAnimationDebugInterface, S, WithScrollAnimationDebugProps> {\n  /**\n   * Class.\n   */\n  class WithScrollAnimationDebug<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithScrollAnimationDebugProps\n  > {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: BaseClass.config.name,\n      options: {\n        ...BaseClass.config.options,\n        debug: Boolean,\n      },\n    };\n\n    /**\n     * Debug elements.\n     */\n    private __debugElements: DebugElements | null = null;\n\n    /**\n     * Debug outline element.\n     */\n    private __debugOutline: HTMLElement | null = null;\n\n    /**\n     * Debug ID.\n     */\n    private __debugId: string = '';\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-expect-error - Calling parent method\n      if (super.mounted) super.mounted();\n      if (this.$options.debug) {\n        this.__initDebug();\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      this.__destroyDebug();\n      // @ts-expect-error - Calling parent method\n      if (super.destroyed) super.destroyed();\n    }\n\n    /**\n     * Initialize debug elements.\n     */\n    __initDebug() {\n      debugIdCounter += 1;\n      debugInstanceCount += 1;\n      this.__debugId = `timeline-${debugIdCounter}`;\n\n      const color = getDebugColor(debugIdCounter);\n\n      // Inject styles\n      injectDebugStyles();\n\n      // Create and append debug markers\n      this.__debugElements = createDebugElements(color);\n      document.body.appendChild(this.__debugElements.wrapper);\n\n      // Append progress to shared container\n      const container = getProgressContainer();\n      container.appendChild(this.__debugElements.progress);\n\n      // Position markers based on offset option\n      const { viewportStart, viewportEnd } = parseOffset(this.$options.offset);\n      const viewportHeight = window.innerHeight;\n\n      this.__debugElements.startMarker.style.top = `${viewportStart * viewportHeight}px`;\n      this.__debugElements.endMarker.style.top = `${viewportEnd * viewportHeight}px`;\n\n      // Create and append outline\n      this.__debugOutline = createOutlineElement(color);\n      const position = getComputedStyle(this.$el).position;\n      if (position === 'static') {\n        (this.$el as HTMLElement).style.position = 'relative';\n      }\n      this.$el.appendChild(this.__debugOutline);\n    }\n\n    /**\n     * Destroy debug elements.\n     */\n    __destroyDebug() {\n      if (this.__debugElements) {\n        this.__debugElements.wrapper.remove();\n        this.__debugElements.progress.remove();\n        this.__debugElements = null;\n      }\n\n      if (this.__debugOutline) {\n        this.__debugOutline.remove();\n        this.__debugOutline = null;\n      }\n\n      if (this.$options.debug) {\n        debugInstanceCount -= 1;\n        cleanupProgressContainer();\n        removeDebugStyles();\n      }\n    }\n\n    /**\n     * Update debug progress.\n     */\n    __updateDebug(props: ScrollInViewProps) {\n      if (!this.__debugElements) return;\n\n      const { progressBar, progressText } = this.__debugElements;\n\n      // Update progress\n      const progress = Math.round(props.dampedProgress.y * 100);\n      progressBar.style.height = `${progress}%`;\n      progressText.textContent = `${progress}%`;\n    }\n\n    /**\n     * Scrolled in view hook.\n     */\n    scrolledInView(props: ScrollInViewProps) {\n      if (this.$options.debug) {\n        this.__updateDebug(props);\n      }\n\n      // @ts-expect-error - Calling parent method\n      super.scrolledInView(props);\n    }\n  }\n\n  // @ts-ignore\n  return WithScrollAnimationDebug;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -30,10 +30,10 @@
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
     "deepmerge": "^4.3.1",
-    "morphdom": "^2.7.5"
+    "morphdom": "^2.7.8"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "3.4.1"
+    "@studiometa/js-toolkit": "3.4.3"
   },
   "peerDependencies": {
     "@studiometa/js-toolkit": "^3.4.0"