skull-dom 1.0.1 → 1.0.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 AutoSkeleton
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 AutoSkeleton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,165 +1,178 @@
-# 💀 SkullDOM
-> **Automagic skeleton screens for any framework.**
-> Zero config. Zero manual styles. Just robust, layout-aware loading states.
-
-## Why SkullDOM?
-
-Most skeleton libraries require you to manually build "skeleton versions" of your components. You end up maintaining two UIs: the real one and the fake one.
-
-**SkullDOM is different.**
-It looks at your **existing DOM**, infers its layout (text, images, grids, flex), and overlays a pixel-perfect skeleton on top of it.
-
-- **Framework Agnostic:** First-class adapters for React, Vue, Svelte, Solid, and Vanilla.
-- **Zero Layout Shift:** It overlays perfectly on your actual elements.
-- **Automagic Inference:** Detects text lines, border radii, and flex gaps automatically.
-- **Memory Safe:** Uses `WeakMap` to ensure skeletons are garbage collected automatically.
-
----
-
-## 📦 Installation
-
-```bash
-npm install skull-dom
-```
-
----
-
-## 🚀 Quick Start
-
-### 1. Vanilla / HTML Variables
-Add attributes to your HTML. No JS required.
-
-```html
-<!-- 1. Import the utility once in your app entry -->
-<script>
-  import { initSkeletonObserver } from 'skull-dom/vanilla';
-  initSkeletonObserver();
-</script>
-
-<!-- 2. Toggle the attribute when loading -->
-<div data-skeleton="loading">
-  <h1>My Content</h1>
-  <p>SkullDOM will infer this text structure and cover it.</p>
-</div>
-```
-
-### 2. React
-Use the `useSkeleton` hook.
-
-```tsx
-import { useRef } from 'react';
-import { useSkeleton } from 'skull-dom/react';
-
-function UserCard({ isLoading, user }) {
-  const ref = useRef(null);
-  
-  // Automagically handles attach/detach lifecycle
-  useSkeleton(ref, isLoading);
-
-  return (
-    <div ref={ref} className="card">
-      <img src={user.avatar} className="avatar" />
-      <h3>{user.name}</h3>
-    </div>
-  );
-}
-```
-
-### 3. Vue
-Use the `v-skeleton` directive.
-
-```vue
-<script setup>
-import { vSkeleton } from 'skull-dom/vue';
-defineProps(['loading']);
-</script>
-
-<template>
-  <div v-skeleton="loading" class="card">
-    <!-- content -->
-  </div>
-</template>
-```
-
-### 4. Svelte
-Use the `skeleton` action.
-
-```svelte
-<script>
-  import { skeleton } from 'skull-dom/adapters/svelte';
-  export let loading = true;
-</script>
-
-<div use:skeleton={loading}>
-  <!-- content -->
-</div>
-```
-
-### 5. SolidJS
-Use the `skeleton` directive.
-
-```jsx
-import { skeleton } from 'skull-dom/solid';
-
-<div use:skeleton={isLoading()}>
-  {/* content */}
-</div>
-```
-
----
-
-## 🧠 How it Works
-
-SkullDOM operates on a simple "Overlay" mental model:
-
-1.  **Probe:** It scans your target DOM element and measures computed styles (width, height, margin, padding, line-height, etc.).
-2.  **Infer:** It creates a lightweight tree representation of what matters (Text lines? Block? Flex group?).
-3.  **Render:** It builds a mirrored DOM structure with gray backgrounds and shimmer animations.
-4.  **Overlay:** It sets your original element to `visibility: hidden` and absolutely positions the skeleton layer directly on top of it.
-
-### Important: You need content!
-Because SkullDOM **infers** from your DOM, your elements need to exist in the DOM (even if empty).
-*   ✅ **Good:** Render your component with empty strings or optional chaining.
-*   ❌ **Bad:** `if (loading) return null;` (There is nothing to infer!)
-
-**Correct Pattern:**
-```jsx
-// React Example
-function Card({ loading, data }) {
-  const ref = useRef(null);
-  useSkeleton(ref, loading);
-
-  return (
-    <div ref={ref}>
-      {/* Render structure even if data is missing! */}
-      <h1>{data?.title || 'Placeholder Title'}</h1> 
-    </div>
-  )
-}
-```
-
----
-
-## 🧩 API Reference
-
-### Core (Advanced)
-If you are building your own adapter, import from the root.
-
-```ts
-import { attachSkeleton } from 'skull-dom';
-
-// Returns a cleanup function
-const cleanup = attachSkeleton(myElement);
-
-// Later...
-cleanup();
-```
-
-### Styling
-Currently, SkullDOM injects a default gray theme (`#d1d5db` base, `#9ca3af` text lines) with a modest border radius. 
-Future versions will expose CSS variables for theming.
-
----
-
-## 📄 License
-MIT
+# 💀 SkullDOM
+
+> **Automagic skeleton screens for any framework.**
+> Zero config. Zero manual styles. Just robust, layout-aware loading states.
+
+## Why SkullDOM?
+Most skeleton libraries require you to manually build "skeleton versions" of your components.
+**SkullDOM is different.** It looks at your **existing DOM**, infers its layout (text, images, grids, flex), and overlays a pixel-perfect skeleton on top of it.
+
+- **Framework Agnostic:** First-class adapters for React, Vue, Svelte, Solid, and Vanilla.
+- **0 Layout Shift:** Uses `Range` API to capture exact text wrapping and dimensions.
+- **12+ Animations:** Built-in premium animations (Wave, Neon, Glimmer, etc.).
+- **Automagic Inference:** Detects text lines, border radii, and flex gaps automatically.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install skull-dom
+```
+
+---
+
+## 🚀 Usage
+
+### React
+Use the `useSkeleton` hook.
+
+```tsx
+import { useRef } from 'react';
+import { useSkeleton } from 'skull-dom/react';
+
+function UserCard({ isLoading, user }) {
+  const ref = useRef(null);
+  
+  // 1. Basic Usage
+  useSkeleton(ref, isLoading);
+
+  // 2. With Configuration
+  // useSkeleton(ref, isLoading, { 
+  //   animation: 'neon', 
+  //   color: '#3b82f6' 
+  // });
+
+  return (
+    <div ref={ref} className="card">
+      <img src={user.avatar} />
+      <h3>{user.name}</h3>
+    </div>
+  );
+}
+```
+
+### Vue
+Use the `v-skeleton` directive.
+
+```vue
+<script setup>
+import { vSkeleton } from 'skull-dom/vue';
+defineProps(['loading']);
+</script>
+
+<template>
+  <!-- Basic -->
+  <div v-skeleton="loading" class="card">
+    <h1>Content</h1>
+  </div>
+
+  <!-- With Configuration -->
+  <div v-skeleton="{ loading, config: { animation: 'pulse' } }">
+    <h1>Content</h1>
+  </div>
+</template>
+```
+
+### Svelte
+Use the `skeleton` action.
+
+```svelte
+<script>
+  import { skeleton } from 'skull-dom/svelte';
+  export let loading = true;
+</script>
+
+<!-- Basic -->
+<div use:skeleton={loading}>
+  <h1>Content</h1>
+</div>
+
+<!-- With Configuration -->
+<div use:skeleton={{ loading, config: { animation: 'glimmer' } }}>
+  <h1>Content</h1>
+</div>
+```
+
+### SolidJS
+Use the `skeleton` directive.
+
+```jsx
+import { skeleton } from 'skull-dom/solid';
+
+// Basic
+<div use:skeleton={isLoading()}>
+  <h1>Content</h1>
+</div>
+
+// With Configuration
+<div use:skeleton={{ loading: isLoading(), config: { animation: 'wave', borderRadius: 8 } }}>
+  <h1>Content</h1>
+</div>
+```
+
+### Vanilla / HTML
+Add `data-skeleton="loading"` to any element.
+
+```html
+<!-- 1. Initialize once -->
+<script type="module">
+  import { initSkeletonObserver } from 'skull-dom/adapters/vanilla';
+  initSkeletonObserver();
+</script>
+
+<!-- 2. Toggle attribute to show skeleton -->
+<div data-skeleton="loading">
+  <h1>I am covered!</h1>
+</div>
+
+<!-- 3. With Configuration (JSON) -->
+<div 
+  data-skeleton="loading" 
+  data-skeleton-config='{ "animation": "neon", "color": "#10b981" }'
+>
+  <h1>Custom Style</h1>
+</div>
+```
+
+---
+
+## 🎨 Animations & Config
+
+You can customize the look and feel by passing a config object.
+
+```typescript
+interface SkeletonConfig {
+  animation?: 'wave' | 'pulse' | 'glimmer' | 'scan' | 'breathing' 
+            | 'fade-in' | 'slide-in' | 'rumble' | 'neon' 
+            | 'classic' | 'shimmer-vertical' | 'bounce';
+            
+  color?: string;          // Base background color (e.g. #d1d5db)
+  highlightColor?: string; // Shimmer/Highlight color
+  borderRadius?: number;   // Force global border radius
+}
+```
+
+### Animation Presets
+- **`wave`** (Default): Standard left-to-right gradient shimmer.
+- **`pulse`**: Opacity fades in and out.
+- **`glimmer`**: Thin white reflection shoots across.
+- **`scan`**: Cyberpunk-style vertical scanner.
+- **`neon`**: Glowing box-shadow pulse.
+- **`breathing`**: Subtle scale up/down.
+- **`classic`**: Static gray box (no animation).
+- And more! (`slide-in`, `fade-in`, `rumble`, `bounce`...)
+
+---
+
+## 🧠 How it Works regarding "Zero Layout Shift"
+
+SkullDOM uses the browser's **Range API** to create a pixel-perfect "snapshot" of your text nodes. 
+Instead of guessing how many lines of text you have, it measures the **exact bounding box of every line** as rendered by the browser. 
+
+This means if your text wraps in a unique way around an image, the skeleton will wrap exactly the same way.
+
+---
+
+## 📄 License
+MIT

package/dist/adapters/react/index.d.ts

@@ -7,5 +7,15 @@
  * useSkeleton(ref, loading);
  * <div ref={ref}>Content</div>
  */
-export declare function useSkeleton(ref: React.RefObject<HTMLElement | null>, loading: boolean): void;
+import { SkeletonConfig } from "../../core/infer/types.js";
+/**
+ * A React hook that automatically attaches a skeleton overlay to the referenced element
+ * when `loading` is true.
+ *
+ * Usage:
+ * const ref = useRef(null);
+ * useSkeleton(ref, loading, { animation: 'pulse' });
+ * <div ref={ref}>Content</div>
+ */
+export declare function useSkeleton(ref: React.RefObject<HTMLElement | null>, loading: boolean, config?: SkeletonConfig): void;
 //# sourceMappingURL=index.d.ts.map

package/dist/adapters/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/react/index.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,OAAO,EAAE,OAAO,QAkBnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/react/index.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,CAAC,EAAE,cAAc,QAkB1B"}

package/dist/adapters/react/index.js

@@ -6,22 +6,22 @@ import { attachSkeleton } from "../../core/lifecycle/attachSkeleton.js";
  *
  * Usage:
  * const ref = useRef(null);
- * useSkeleton(ref, loading);
+ * useSkeleton(ref, loading, { animation: 'pulse' });
  * <div ref={ref}>Content</div>
  */
-export function useSkeleton(ref, loading) {
+export function useSkeleton(ref, loading, config) {
     useEffect(() => {
         const element = ref.current;
         // Only attach if we have an element AND we are loading
         if (!element || !loading)
             return;
         // Attach returns a cleanup function
-        const cleanup = attachSkeleton(element);
+        const cleanup = attachSkeleton(element, config);
         // React calls this when:
         // 1. Component unmounts
         // 2. dependencies change (loading becomes false)
         return () => {
             cleanup();
         };
-    }, [loading, ref]); // re-run if loading state or ref changes
+    }, [loading, ref, JSON.stringify(config)]); // re-run if config changes (deep compare via stringify for simple objects)
 }

package/dist/adapters/solid/index.d.ts

@@ -1,7 +1,12 @@
+import { SkeletonConfig } from "../../core/infer/types.js";
+type SkeletonAccessor = boolean | {
+    loading: boolean;
+    config?: SkeletonConfig;
+};
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            skeleton: boolean;
+            skeleton: SkeletonAccessor;
         }
     }
 }
@@ -10,6 +15,8 @@ declare module "solid-js" {
  *
  * Usage:
  * <div use:skeleton={loading()}>...</div>
+ * <div use:skeleton={{ loading: loading(), config: { animation: 'pulse' } }}>...</div>
  */
-export declare function skeleton(el: HTMLElement, accessor: () => boolean): void;
+export declare function skeleton(el: HTMLElement, accessor: () => SkeletonAccessor): void;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/adapters/solid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/solid/index.ts"],"names":[],"mappings":"AAGA,OAAO,QAAQ,UAAU,CAAC;IACtB,UAAU,GAAG,CAAC;QACV,UAAU,UAAU;YAChB,QAAQ,EAAE,OAAO,CAAC;SACrB;KACJ;CACJ;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,QAShE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/solid/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC;AAEhF,OAAO,QAAQ,UAAU,CAAC;IACtB,UAAU,GAAG,CAAC;QACV,UAAU,UAAU;YAChB,QAAQ,EAAE,gBAAgB,CAAC;SAC9B;KACJ;CACJ;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,QAWzE"}

package/dist/adapters/solid/index.js

@@ -5,12 +5,15 @@ import { attachSkeleton } from "../../core/lifecycle/attachSkeleton.js";
  *
  * Usage:
  * <div use:skeleton={loading()}>...</div>
+ * <div use:skeleton={{ loading: loading(), config: { animation: 'pulse' } }}>...</div>
  */
 export function skeleton(el, accessor) {
     createEffect(() => {
-        const loading = accessor();
+        const value = accessor();
+        const loading = typeof value === 'boolean' ? value : value.loading;
+        const config = typeof value === 'boolean' ? undefined : value.config;
         if (loading) {
-            const detach = attachSkeleton(el);
+            const detach = attachSkeleton(el, config);
             onCleanup(() => detach());
         }
     });

package/dist/adapters/svelte/index.d.ts

@@ -1,9 +1,16 @@
 import { Action } from "svelte/action";
+import { SkeletonConfig } from "../../core/infer/types.js";
+type SkeletonParams = boolean | {
+    loading: boolean;
+    config?: SkeletonConfig;
+};
 /**
  * A Svelte Action that attaches a skeleton when `loading` is true.
  *
  * Usage:
  * <div use:skeleton={loading}>...</div>
+ * <div use:skeleton={{ loading, config: { animation: 'wave' } }}>...</div>
  */
-export declare const skeleton: Action<HTMLElement, boolean>;
+export declare const skeleton: Action<HTMLElement, SkeletonParams>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/adapters/svelte/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAwBjD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,KAAK,cAAc,GAAG,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC;AAE9E;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CA+BxD,CAAC"}

package/dist/adapters/svelte/index.js

@@ -4,22 +4,28 @@ import { attachSkeleton } from "../../core/lifecycle/attachSkeleton.js";
  *
  * Usage:
  * <div use:skeleton={loading}>...</div>
+ * <div use:skeleton={{ loading, config: { animation: 'wave' } }}>...</div>
  */
-export const skeleton = (node, loading) => {
+export const skeleton = (node, params) => {
     let cleanup = null;
+    const isLoading = (p) => typeof p === 'boolean' ? p : p.loading;
+    const getConfig = (p) => typeof p === 'boolean' ? undefined : p.config;
     // Initial state
-    if (loading) {
-        cleanup = attachSkeleton(node);
+    if (isLoading(params)) {
+        cleanup = attachSkeleton(node, getConfig(params));
     }
     return {
-        update(newLoading) {
-            if (newLoading && !cleanup) {
-                cleanup = attachSkeleton(node);
+        update(newParams) {
+            const loading = isLoading(newParams);
+            const config = getConfig(newParams);
+            if (loading && !cleanup) {
+                cleanup = attachSkeleton(node, config);
             }
-            else if (!newLoading && cleanup) {
+            else if (!loading && cleanup) {
                 cleanup();
                 cleanup = null;
             }
+            // Ideally we also handle config updates while loading by re-attaching
         },
         destroy() {
             if (cleanup) {

package/dist/adapters/vanilla/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/vanilla/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,qBAsCnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/vanilla/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,qBAgDnC"}

package/dist/adapters/vanilla/index.js

@@ -16,7 +16,17 @@ export function initSkeletonObserver() {
         const state = el.getAttribute("data-skeleton");
         if (state === "loading" && !cleanupMap.has(el)) {
             // Start loading
-            const cleanup = attachSkeleton(el);
+            let config = undefined;
+            const configStr = el.getAttribute("data-skeleton-config");
+            if (configStr) {
+                try {
+                    config = JSON.parse(configStr);
+                }
+                catch (e) {
+                    console.warn("SkullDOM: Invalid JSON in data-skeleton-config", configStr);
+                }
+            }
+            const cleanup = attachSkeleton(el, config);
             cleanupMap.set(el, cleanup);
         }
         else if (state !== "loading" && cleanupMap.has(el)) {

package/dist/adapters/vue/index.d.ts

@@ -2,12 +2,16 @@ import { ObjectDirective } from "vue";
 interface HTMLElementWithCleanup extends HTMLElement {
     _skCleanup?: () => void;
 }
+import { SkeletonConfig } from "../../core/infer/types.js";
 /**
  * A Vue directive that attaches a skeleton when the value is true.
- *
- * Usage:
- * <div v-skeleton="loading"></div>
+ * Supports:
+ * - v-skeleton="loading" (boolean)
+ * - v-skeleton="{ loading, config }" (object)
  */
-export declare const vSkeleton: ObjectDirective<HTMLElementWithCleanup, boolean>;
+export declare const vSkeleton: ObjectDirective<HTMLElementWithCleanup, boolean | {
+    loading: boolean;
+    config?: SkeletonConfig;
+}>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/adapters/vue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAItC,UAAU,sBAAuB,SAAQ,WAAW;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,sBAAsB,EAAE,OAAO,CAwBtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/adapters/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAItC,UAAU,sBAAuB,SAAQ,WAAW;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,sBAAsB,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,cAAc,CAAA;CAAE,CAkCtH,CAAC"}

package/dist/adapters/vue/index.js

@@ -1,22 +1,30 @@
 import { attachSkeleton } from "../../core/lifecycle/attachSkeleton.js";
 /**
  * A Vue directive that attaches a skeleton when the value is true.
- *
- * Usage:
- * <div v-skeleton="loading"></div>
+ * Supports:
+ * - v-skeleton="loading" (boolean)
+ * - v-skeleton="{ loading, config }" (object)
  */
 export const vSkeleton = {
     mounted(el, binding) {
-        if (binding.value) {
-            el._skCleanup = attachSkeleton(el);
+        const value = binding.value;
+        const isLoading = typeof value === 'boolean' ? value : value === null || value === void 0 ? void 0 : value.loading;
+        const config = typeof value === 'object' ? value.config : undefined;
+        if (isLoading) {
+            el._skCleanup = attachSkeleton(el, config);
         }
     },
     updated(el, binding) {
+        const value = binding.value;
+        const isLoading = typeof value === 'boolean' ? value : value === null || value === void 0 ? void 0 : value.loading;
+        const config = typeof value === 'object' ? value.config : undefined;
+        // Note: Changes to config while loading might require re-attaching, but simpler for now implies just on/off toggling.
+        // For full reactivity on config, we'd need to detach and re-attach if config changed.
         // If value turned true and we don't have cleanup, attach
-        if (binding.value && !el._skCleanup) {
-            el._skCleanup = attachSkeleton(el);
+        if (isLoading && !el._skCleanup) {
+            el._skCleanup = attachSkeleton(el, config);
         } // If value turned false and we HAVE cleanup, detach
-        else if (!binding.value && el._skCleanup) {
+        else if (!isLoading && el._skCleanup) {
             el._skCleanup();
             el._skCleanup = undefined;
         }

package/dist/core/infer/inferNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inferNode.d.ts","sourceRoot":"","sources":["../../../src/core/infer/inferNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiB,MAAM,YAAY,CAAC;AAIzD,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAqF9D"}
+{"version":3,"file":"inferNode.d.ts","sourceRoot":"","sources":["../../../src/core/infer/inferNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiB,MAAM,YAAY,CAAC;AAIzD,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAsI9D"}

package/dist/core/infer/inferNode.js

@@ -10,29 +10,73 @@ export function inferNode(el) {
         const fontSize = parseFloat(probeData.styles.fontSize) || 16;
         let lineHeight;
         if (lineHeightStr === 'normal') {
-            // Browser default is typically 1.2
             lineHeight = fontSize * 1.2;
         }
         else if (lineHeightStr.endsWith('px')) {
-            // Explicit pixel value like "24px"
             lineHeight = parseFloat(lineHeightStr);
         }
         else {
-            // Unitless multiplier like "1.5"
             lineHeight = parseFloat(lineHeightStr) * fontSize;
         }
-        // "Single element should not be represented as multiple lines except it has a line height css property"
-        // If line-height is 'normal', force lines = 1.
-        // Otherwise calculate based on height.
-        let lines = 1;
-        if (lineHeightStr !== 'normal') {
-            lines = Math.max(1, Math.round(probeData.height / lineHeight));
+        // Use Range API for precise line detection
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const rects = Array.from(range.getClientRects());
+        let textLines = [];
+        if (rects.length > 0) {
+            // Group rects by vertical position (Y) to identify lines
+            const linesMap = new Map();
+            const threshold = 4; // Pixel threshold to consider rects on the same line
+            rects.forEach(rect => {
+                if (rect.width === 0 || rect.height === 0)
+                    return; // Ignore invisible rects
+                // Find an existing line group that matches this top
+                let foundKey = -1;
+                for (const key of linesMap.keys()) {
+                    if (Math.abs(key - rect.top) < threshold) {
+                        foundKey = key;
+                        break;
+                    }
+                }
+                if (foundKey !== -1) {
+                    const group = linesMap.get(foundKey);
+                    group.minX = Math.min(group.minX, rect.left);
+                    group.maxX = Math.max(group.maxX, rect.right);
+                    group.bottom = Math.max(group.bottom, rect.bottom); // Track max bottom to calc height
+                }
+                else {
+                    linesMap.set(rect.top, {
+                        minX: rect.left,
+                        maxX: rect.right,
+                        top: rect.top,
+                        bottom: rect.bottom
+                    });
+                }
+            });
+            // Convert groups to sorted lines
+            textLines = Array.from(linesMap.values())
+                .sort((a, b) => a.top - b.top)
+                .map(g => ({
+                width: g.maxX - g.minX,
+                height: g.bottom - g.top // Calculate exact height of the line
+            }));
+        }
+        let lines = textLines.length;
+        // Fallback if Range API failed to detect specific lines or returned 0
+        if (lines === 0) {
+            if (lineHeightStr !== 'normal') {
+                lines = Math.max(1, Math.round(probeData.height / lineHeight));
+            }
+            else {
+                lines = 1;
+            }
         }
         return {
             kind: "text",
             width: probeData.width,
             height: lineHeight, // Height of a single line
             lines,
+            textLines,
             radius: parseFloat(probeData.borderRadius) || 4, // Default radius for text
             padding: probeData.styles.padding,
             margin: probeData.styles.margin,

package/dist/core/infer/types.d.ts

@@ -9,6 +9,10 @@ export interface SkeletonBase {
 export interface SkeletonText extends SkeletonBase {
     kind: "text";
     lines: number;
+    textLines?: {
+        width: number;
+        height: number;
+    }[];
 }
 export interface SkeletonBlock extends SkeletonBase {
     kind: "block";
@@ -24,5 +28,12 @@ export interface SkeletonGroup extends SkeletonBase {
     gridTemplateColumns?: string;
     gridTemplateRows?: string;
 }
+export type AnimationType = 'pulse' | 'wave' | 'glimmer' | 'scan' | 'breathing' | 'fade-in' | 'slide-in' | 'rumble' | 'neon' | 'classic' | 'shimmer-vertical' | 'bounce';
+export interface SkeletonConfig {
+    animation?: AnimationType;
+    color?: string;
+    highlightColor?: string;
+    borderRadius?: number;
+}
 export type SkeletonNode = SkeletonBlock | SkeletonText | SkeletonGroup;
 //# sourceMappingURL=types.d.ts.map

package/dist/core/infer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/infer/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,YAAY;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,YAAY;IAC/C,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,YAAY;IAC/C,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IAEzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/infer/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,YAAY;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACnD;AAED,MAAM,WAAW,aAAc,SAAQ,YAAY;IAC/C,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,YAAY;IAC/C,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IAEzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,aAAa,GACnB,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GACnD,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAC1C,SAAS,GAAG,kBAAkB,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAC"}

package/dist/core/lifecycle/SkeletonOverlayManager.js

@@ -15,7 +15,7 @@ export class SkeletonOverlayManager {
         }
         const parent = target.parentElement;
         if (!parent) {
-            console.warn("AutoSkeleton: Target element has no parent, cannot attach overlay.");
+            console.warn("SkullDOM: Target element has no parent, cannot attach overlay.");
             // Return a dummy record so the caller doesn't crash, but nothing happened.
             return { skeletonEl, restoreVisibility: "" };
         }

package/dist/core/lifecycle/attachSkeleton.d.ts

@@ -1,7 +1,8 @@
+import { SkeletonConfig } from '../infer/types.js';
 /**
  * Attaches a skeleton overlay to the target element.
  * Hides the target element (visibility: hidden) and places the skeleton on top.
  * Returns a cleanup function to remove the skeleton and show the target element.
  */
-export declare function attachSkeleton(target: HTMLElement): () => void;
+export declare function attachSkeleton(target: HTMLElement, config?: SkeletonConfig): () => void;
 //# sourceMappingURL=attachSkeleton.d.ts.map

package/dist/core/lifecycle/attachSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachSkeleton.d.ts","sourceRoot":"","sources":["../../../src/core/lifecycle/attachSkeleton.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,IAAI,CAwB9D"}
+{"version":3,"file":"attachSkeleton.d.ts","sourceRoot":"","sources":["../../../src/core/lifecycle/attachSkeleton.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CA2BvF"}

package/dist/core/lifecycle/attachSkeleton.js

@@ -1,12 +1,15 @@
 import { inferNode } from '../infer/inferNode.js';
 import { renderSkeleton } from '../render/renderSkeleton.js';
 import { skeletonOverlayManager } from './SkeletonOverlayManager.js';
+import { injectStyles } from '../styles/styles.js';
 /**
  * Attaches a skeleton overlay to the target element.
  * Hides the target element (visibility: hidden) and places the skeleton on top.
  * Returns a cleanup function to remove the skeleton and show the target element.
  */
-export function attachSkeleton(target) {
+export function attachSkeleton(target, config) {
+    // 0. Ensure styles are injected
+    injectStyles();
     // 1. Check if already controlled
     if (skeletonOverlayManager.has(target)) {
         // If we want to allow re-attaching or updating, we'd handle it here.
@@ -16,10 +19,10 @@ export function attachSkeleton(target) {
     // 2. Infer & Render
     const tree = inferNode(target);
     if (!tree) {
-        console.warn("AutoSkeleton: Could not infer structure for element", target);
+        console.warn("SkullDOM: Could not infer structure for element", target);
         return () => { };
     }
-    const skeletonEl = renderSkeleton(tree);
+    const skeletonEl = renderSkeleton(tree, config);
     // 3. Delegate to Manager
     skeletonOverlayManager.attach(target, skeletonEl);
     // 4. Return detach closure

package/dist/core/render/renderSkeleton.d.ts

@@ -1,3 +1,3 @@
-import { SkeletonNode } from "../infer/types.js";
-export declare function renderSkeleton(node: SkeletonNode): HTMLElement;
+import { SkeletonNode, SkeletonConfig } from "../infer/types.js";
+export declare function renderSkeleton(node: SkeletonNode, config?: SkeletonConfig): HTMLElement;
 //# sourceMappingURL=renderSkeleton.d.ts.map

package/dist/core/render/renderSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderSkeleton.d.ts","sourceRoot":"","sources":["../../../src/core/render/renderSkeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW,CA2F9D"}
+{"version":3,"file":"renderSkeleton.d.ts","sourceRoot":"","sources":["../../../src/core/render/renderSkeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEjE,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,WAAW,CAqIvF"}

package/dist/core/render/renderSkeleton.js

@@ -1,10 +1,15 @@
-export function renderSkeleton(node) {
+export function renderSkeleton(node, config) {
     try {
         const el = document.createElement("div");
         el.style.boxSizing = "border-box"; // Critical for sizing
         // Default styles
-        el.style.backgroundColor = "#d1d5db"; // Darker gray for better visibility
+        el.style.backgroundColor = (config === null || config === void 0 ? void 0 : config.color) || "#d1d5db"; // Configurable base color
         el.style.overflow = "hidden"; // Clip children if needed
+        // CSS Variables for animations
+        if (config === null || config === void 0 ? void 0 : config.color)
+            el.style.setProperty('--sk-color', config.color);
+        if (config === null || config === void 0 ? void 0 : config.highlightColor)
+            el.style.setProperty('--sk-highlight', config.highlightColor);
         // Apply common layout styles
         if (node.padding)
             el.style.padding = node.padding;
@@ -12,17 +17,28 @@ export function renderSkeleton(node) {
             el.style.margin = node.margin;
         if (node.border)
             el.style.border = node.border;
+        // Apply Animation Class
+        const anim = (config === null || config === void 0 ? void 0 : config.animation) || 'wave';
+        // For container-based animations
+        if (['fade-in', 'slide-in', 'breathing', 'bounce', 'neon'].includes(anim)) {
+            el.classList.add(`sk-anim-${anim}`);
+        }
         if (node.kind === "block") {
             el.style.width = `${node.width}px`;
             el.style.height = `${node.height}px`;
-            el.style.borderRadius = `${node.radius || 0}px`;
+            el.style.borderRadius = `${typeof (config === null || config === void 0 ? void 0 : config.borderRadius) === 'number' ? config.borderRadius : (node.radius || 0)}px`;
             el.setAttribute("data-sk", "block");
+            // Leaf node animations
+            if (!['fade-in', 'slide-in', 'breathing', 'bounce'].includes(anim)) {
+                el.classList.add(`sk-anim-${anim}`);
+            }
             return el;
         }
         if (node.kind === "text") {
             el.style.width = `${node.width}px`;
             el.style.display = "flex";
             el.style.flexDirection = "column";
+            el.style.alignItems = "flex-start"; // Ensure lines don't stretch to container width
             // Add small gap for visual separation between skeleton lines
             const visualGap = 4;
             el.style.gap = `${visualGap}px`;
@@ -32,16 +48,38 @@ export function renderSkeleton(node) {
             const totalGapHeight = visualGap * (node.lines - 1);
             const adjustedLineHeight = node.lines > 1
                 ? (node.height * node.lines - totalGapHeight) / node.lines
-                : node.height;
-            // Ensure valid line height
-            const validLineHeight = isNaN(adjustedLineHeight) ? node.height : adjustedLineHeight;
-            for (let i = 0; i < node.lines; i++) {
-                const line = document.createElement("div");
-                line.style.width = i === node.lines - 1 && node.lines > 1 ? "60%" : "100%"; // Last line short
-                line.style.height = `${validLineHeight}px`;
-                line.style.backgroundColor = "#9ca3af"; // Darker line color
-                line.style.borderRadius = `${node.radius || 4}px`;
-                el.appendChild(line);
+                : node.height; // Note: node.height here comes from inferNode which is set to lineHeight
+            // Use the inferred line height, or fallback if something went wrong
+            const validLineHeight = node.height;
+            // Use exact text lines if available
+            if (node.textLines && node.textLines.length > 0) {
+                node.textLines.forEach((lineData, i) => {
+                    const line = document.createElement("div");
+                    line.style.width = `${lineData.width}px`;
+                    line.style.height = `${lineData.height}px`; // Use exact captured height
+                    line.style.backgroundColor = (config === null || config === void 0 ? void 0 : config.color) || "#9ca3af";
+                    line.style.borderRadius = `${typeof (config === null || config === void 0 ? void 0 : config.borderRadius) === 'number' ? config.borderRadius : (node.radius || 4)}px`;
+                    line.style.flexShrink = "0"; // Prevent shrinking
+                    // Leaf node animations
+                    if (!['fade-in', 'slide-in', 'breathing', 'bounce'].includes(anim)) {
+                        line.classList.add(`sk-anim-${anim}`);
+                    }
+                    el.appendChild(line);
+                });
+            }
+            else {
+                // Fallback for when textLines extraction failed
+                for (let i = 0; i < node.lines; i++) {
+                    const line = document.createElement("div");
+                    line.style.width = i === node.lines - 1 && node.lines > 1 ? "60%" : "100%"; // Last line short
+                    line.style.height = `${validLineHeight}px`;
+                    line.style.backgroundColor = (config === null || config === void 0 ? void 0 : config.color) || "#9ca3af"; // Darker line color
+                    line.style.borderRadius = `${typeof (config === null || config === void 0 ? void 0 : config.borderRadius) === 'number' ? config.borderRadius : (node.radius || 4)}px`;
+                    if (!['fade-in', 'slide-in', 'breathing', 'bounce'].includes(anim)) {
+                        line.classList.add(`sk-anim-${anim}`);
+                    }
+                    el.appendChild(line);
+                }
             }
             return el;
         }
@@ -69,7 +107,7 @@ export function renderSkeleton(node) {
             }
             el.setAttribute("data-sk", "group");
             node.children.forEach(child => {
-                el.appendChild(renderSkeleton(child));
+                el.appendChild(renderSkeleton(child, config));
             });
             return el;
         }

package/dist/core/styles/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const CSS_ANIMATIONS = "\n  /* Keyframes */\n  @keyframes sk-pulse {\n    0% { opacity: 0.6; }\n    50% { opacity: 1; }\n    100% { opacity: 0.6; }\n  }\n  @keyframes sk-wave {\n    0% { background-position: -200% 0; }\n    100% { background-position: 200% 0; }\n  }\n  @keyframes sk-glimmer {\n    0% { mask-position: -200%; -webkit-mask-position: -200%; }\n    100% { mask-position: 200%; -webkit-mask-position: 200%; }\n  }\n  @keyframes sk-scan {\n    0% { transform: translateY(-100%); }\n    100% { transform: translateY(100%); }\n  }\n  @keyframes sk-breathing {\n    0% { transform: scale(0.99); opacity: 0.8; }\n    50% { transform: scale(1.0); opacity: 1; }\n    100% { transform: scale(0.99); opacity: 0.8; }\n  }\n  @keyframes sk-fade-in {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n  }\n  @keyframes sk-slide-in {\n    0% { transform: translateY(10px); opacity: 0; }\n    100% { transform: translateY(0); opacity: 1; }\n  }\n  @keyframes sk-rumble {\n    0% { transform: translateX(-1px); }\n    25% { transform: translateX(1px); }\n    50% { transform: translateX(-1px); }\n    75% { transform: translateX(1px); }\n    100% { transform: translateX(-1px); }\n  }\n  @keyframes sk-neon {\n    0% { box-shadow: 0 0 5px #e5e7eb; }\n    50% { box-shadow: 0 0 15px #9ca3af; }\n    100% { box-shadow: 0 0 5px #e5e7eb; }\n  }\n  @keyframes sk-shimmer-vertical {\n    0% { background-position: 0 -200%; }\n    100% { background-position: 0 200%; }\n  }\n  @keyframes sk-bounce {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-2px); }\n  }\n\n  /* Classes */\n  .sk-anim-pulse { animation: sk-pulse 1.5s ease-in-out infinite; }\n  \n  .sk-anim-wave { \n    background: linear-gradient(90deg, var(--sk-color, #d1d5db) 25%, var(--sk-highlight, #e5e7eb) 50%, var(--sk-color, #d1d5db) 75%);\n    background-size: 200% 100%;\n    animation: sk-wave 2s infinite linear; \n  }\n\n  .sk-anim-glimmer {\n    position: relative;\n    overflow: hidden;\n  }\n  .sk-anim-glimmer::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n    transform: skewX(-20deg);\n    animation: sk-wave 1.5s infinite;\n  }\n\n  /* Scan uses a pseudo-element overlay */\n  .sk-anim-scan {\n    position: relative;\n    overflow: hidden;\n  }\n  .sk-anim-scan::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 2px;\n    background: #fff;\n    box-shadow: 0 0 10px #fff;\n    animation: sk-scan 2s linear infinite;\n  }\n\n  .sk-anim-breathing { animation: sk-breathing 3s ease-in-out infinite; }\n  .sk-anim-fade-in { animation: sk-fade-in 0.5s ease-out forwards; }\n  .sk-anim-slide-in { animation: sk-slide-in 0.4s ease-out forwards; }\n  .sk-anim-rumble { animation: sk-rumble 0.2s linear infinite; }\n  .sk-anim-neon { animation: sk-neon 2s ease-in-out infinite; }\n  \n  .sk-anim-shimmer-vertical {\n    background: linear-gradient(180deg, var(--sk-color, #d1d5db) 25%, var(--sk-highlight, #e5e7eb) 50%, var(--sk-color, #d1d5db) 75%);\n    background-size: 100% 200%;\n    animation: sk-shimmer-vertical 2s infinite linear;\n  }\n  \n  .sk-anim-bounce { animation: sk-bounce 2s ease-in-out infinite; }\n  .sk-anim-classic { /* No animation */ }\n";
+export declare function injectStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/core/styles/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/core/styles/styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,gwGAuG1B,CAAC;AAEF,wBAAgB,YAAY,SAQ3B"}

package/dist/core/styles/styles.js

@@ -0,0 +1,114 @@
+export const CSS_ANIMATIONS = `
+  /* Keyframes */
+  @keyframes sk-pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+  }
+  @keyframes sk-wave {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+  @keyframes sk-glimmer {
+    0% { mask-position: -200%; -webkit-mask-position: -200%; }
+    100% { mask-position: 200%; -webkit-mask-position: 200%; }
+  }
+  @keyframes sk-scan {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
+  }
+  @keyframes sk-breathing {
+    0% { transform: scale(0.99); opacity: 0.8; }
+    50% { transform: scale(1.0); opacity: 1; }
+    100% { transform: scale(0.99); opacity: 0.8; }
+  }
+  @keyframes sk-fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @keyframes sk-slide-in {
+    0% { transform: translateY(10px); opacity: 0; }
+    100% { transform: translateY(0); opacity: 1; }
+  }
+  @keyframes sk-rumble {
+    0% { transform: translateX(-1px); }
+    25% { transform: translateX(1px); }
+    50% { transform: translateX(-1px); }
+    75% { transform: translateX(1px); }
+    100% { transform: translateX(-1px); }
+  }
+  @keyframes sk-neon {
+    0% { box-shadow: 0 0 5px #e5e7eb; }
+    50% { box-shadow: 0 0 15px #9ca3af; }
+    100% { box-shadow: 0 0 5px #e5e7eb; }
+  }
+  @keyframes sk-shimmer-vertical {
+    0% { background-position: 0 -200%; }
+    100% { background-position: 0 200%; }
+  }
+  @keyframes sk-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-2px); }
+  }
+
+  /* Classes */
+  .sk-anim-pulse { animation: sk-pulse 1.5s ease-in-out infinite; }
+  
+  .sk-anim-wave { 
+    background: linear-gradient(90deg, var(--sk-color, #d1d5db) 25%, var(--sk-highlight, #e5e7eb) 50%, var(--sk-color, #d1d5db) 75%);
+    background-size: 200% 100%;
+    animation: sk-wave 2s infinite linear; 
+  }
+
+  .sk-anim-glimmer {
+    position: relative;
+    overflow: hidden;
+  }
+  .sk-anim-glimmer::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    transform: skewX(-20deg);
+    animation: sk-wave 1.5s infinite;
+  }
+
+  /* Scan uses a pseudo-element overlay */
+  .sk-anim-scan {
+    position: relative;
+    overflow: hidden;
+  }
+  .sk-anim-scan::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 2px;
+    background: #fff;
+    box-shadow: 0 0 10px #fff;
+    animation: sk-scan 2s linear infinite;
+  }
+
+  .sk-anim-breathing { animation: sk-breathing 3s ease-in-out infinite; }
+  .sk-anim-fade-in { animation: sk-fade-in 0.5s ease-out forwards; }
+  .sk-anim-slide-in { animation: sk-slide-in 0.4s ease-out forwards; }
+  .sk-anim-rumble { animation: sk-rumble 0.2s linear infinite; }
+  .sk-anim-neon { animation: sk-neon 2s ease-in-out infinite; }
+  
+  .sk-anim-shimmer-vertical {
+    background: linear-gradient(180deg, var(--sk-color, #d1d5db) 25%, var(--sk-highlight, #e5e7eb) 50%, var(--sk-color, #d1d5db) 75%);
+    background-size: 100% 200%;
+    animation: sk-shimmer-vertical 2s infinite linear;
+  }
+  
+  .sk-anim-bounce { animation: sk-bounce 2s ease-in-out infinite; }
+  .sk-anim-classic { /* No animation */ }
+`;
+export function injectStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById('skull-dom-styles'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'skull-dom-styles';
+    style.textContent = CSS_ANIMATIONS;
+    document.head.appendChild(style);
+}

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { attachSkeleton } from "./core/lifecycle/attachSkeleton.js";
 export { skeletonOverlayManager } from "./core/lifecycle/SkeletonOverlayManager.js";
 export { inferNode } from "./core/infer/inferNode.js";
 export { renderSkeleton } from "./core/render/renderSkeleton.js";
-export type { SkeletonNode } from "./core/infer/types.js";
+export type { SkeletonNode, SkeletonConfig } from "./core/infer/types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAGpF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAGpF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skull-dom",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -51,8 +51,11 @@
   "license": "MIT",
   "description": "Automagic skeleton screens for any framework",
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
+    "happy-dom": "^20.0.11",
     "jsdom": "^27.4.0",
     "react": "^19.2.3",
     "solid-js": "^1.9.10",