@auto-skeleton/core 0.0.2

package/dist/index.cjs

@@ -0,0 +1,166 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  scanBones: () => scanBones
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/scanner.ts
+var DEFAULT_MIN_SIZE = 8;
+var DEFAULT_TEXT_LINE_HEIGHT_FACTOR = 0.72;
+var DEFAULT_TEXT_RADIUS = 4;
+function isVisible(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const style = window.getComputedStyle(el);
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  if (Number(style.opacity) === 0) return false;
+  return true;
+}
+function toRadius(style, width, height) {
+  const raw = parseFloat(style.borderRadius || "0");
+  if (Number.isNaN(raw)) return 0;
+  return Math.min(raw, Math.min(width, height) / 2);
+}
+function autoKind(width, height, radius) {
+  const nearSquare = Math.abs(width - height) <= 2;
+  const likelyCircle = nearSquare && radius >= Math.min(width, height) * 0.45;
+  return likelyCircle ? "circle" : "rect";
+}
+function forcedShape(el) {
+  const shape = el.dataset.skeletonShape;
+  if (shape === "circle" || shape === "rect") return shape;
+  return null;
+}
+function explicitLineCount(el) {
+  const raw = el.dataset.skeletonLines;
+  if (!raw) return null;
+  const parsed = Number.parseInt(raw, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return parsed;
+}
+function shouldIgnore(el, options) {
+  if (el.dataset.noSkeleton !== void 0) return true;
+  if (el.dataset.skeletonIgnore !== void 0) return true;
+  if (options.ignoreSelectors?.some((selector) => el.matches(selector))) return true;
+  return false;
+}
+function isMarkedContainer(el) {
+  return el.dataset.skeletonContainer !== void 0;
+}
+function hasDirectTextNode(el) {
+  for (const n of Array.from(el.childNodes)) {
+    if (n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+function hasVisibleElementChildren(el) {
+  for (const c of Array.from(el.children)) {
+    if (isVisible(c)) return true;
+  }
+  return false;
+}
+function shouldUseTextMode(el, forced) {
+  return !forced && hasDirectTextNode(el);
+}
+function shouldSkipContainerBone(el, forced) {
+  if (forced) return false;
+  if (isMarkedContainer(el)) return true;
+  return hasVisibleElementChildren(el) && !hasDirectTextNode(el);
+}
+function makeTextBones(el, rootRect, minSize) {
+  const rect = el.getBoundingClientRect();
+  if (rect.width < minSize || rect.height < minSize) return [];
+  const style = window.getComputedStyle(el);
+  const fontSize = parseFloat(style.fontSize || "16") || 16;
+  const lineHeightRaw = parseFloat(style.lineHeight || "0");
+  const lineHeight = Number.isFinite(lineHeightRaw) && lineHeightRaw > 0 ? lineHeightRaw : fontSize * 1.4;
+  const estimatedLines = Math.max(1, Math.round(rect.height / lineHeight));
+  const lines = explicitLineCount(el) ?? estimatedLines;
+  const bones = [];
+  for (let i = 0; i < lines; i++) {
+    const isLast = i === lines - 1;
+    const y = rect.top - rootRect.top + i * lineHeight;
+    const height = Math.max(minSize, Math.round(lineHeight * DEFAULT_TEXT_LINE_HEIGHT_FACTOR));
+    const width = Math.round(rect.width * (isLast && lines > 1 ? 0.75 : 1));
+    bones.push({
+      x: Math.round(rect.left - rootRect.left),
+      y: Math.round(y),
+      width,
+      height,
+      radius: DEFAULT_TEXT_RADIUS,
+      kind: "rect"
+    });
+  }
+  return bones;
+}
+function scanBones(root, options = {}) {
+  const minSize = options.minSize ?? DEFAULT_MIN_SIZE;
+  const rootRect = root.getBoundingClientRect();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  const bones = [];
+  let current = walker.currentNode;
+  while (current) {
+    if (isVisible(current) && !shouldIgnore(current, options)) {
+      const el = current;
+      const forced = forcedShape(el);
+      if (shouldUseTextMode(el, forced)) {
+        bones.push(...makeTextBones(el, rootRect, minSize));
+      } else if (!shouldSkipContainerBone(el, forced)) {
+        const rect = el.getBoundingClientRect();
+        const width = Math.round(rect.width);
+        const height = Math.round(rect.height);
+        if (width >= minSize && height >= minSize) {
+          const style = window.getComputedStyle(el);
+          const radius = toRadius(style, width, height);
+          bones.push({
+            x: Math.round(rect.left - rootRect.left),
+            y: Math.round(rect.top - rootRect.top),
+            width,
+            height,
+            radius,
+            kind: forced ?? autoKind(width, height, radius)
+          });
+        }
+      }
+    }
+    current = walker.nextNode();
+  }
+  return dedupeBones(bones);
+}
+function dedupeBones(bones) {
+  const seen = /* @__PURE__ */ new Set();
+  const output = [];
+  for (const b of bones) {
+    const key = `${b.x}:${b.y}:${b.width}:${b.height}:${b.radius}:${b.kind}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      output.push(b);
+    }
+  }
+  return output;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  scanBones
+});

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+type Bone = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    kind: "rect" | "circle";
+};
+type ScanOptions = {
+    ignoreSelectors?: string[];
+    minSize?: number;
+};
+
+declare function scanBones(root: HTMLElement, options?: ScanOptions): Bone[];
+
+export { type Bone, type ScanOptions, scanBones };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+type Bone = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    kind: "rect" | "circle";
+};
+type ScanOptions = {
+    ignoreSelectors?: string[];
+    minSize?: number;
+};
+
+declare function scanBones(root: HTMLElement, options?: ScanOptions): Bone[];
+
+export { type Bone, type ScanOptions, scanBones };

package/dist/index.js

@@ -0,0 +1,139 @@
+// src/scanner.ts
+var DEFAULT_MIN_SIZE = 8;
+var DEFAULT_TEXT_LINE_HEIGHT_FACTOR = 0.72;
+var DEFAULT_TEXT_RADIUS = 4;
+function isVisible(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const style = window.getComputedStyle(el);
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  if (Number(style.opacity) === 0) return false;
+  return true;
+}
+function toRadius(style, width, height) {
+  const raw = parseFloat(style.borderRadius || "0");
+  if (Number.isNaN(raw)) return 0;
+  return Math.min(raw, Math.min(width, height) / 2);
+}
+function autoKind(width, height, radius) {
+  const nearSquare = Math.abs(width - height) <= 2;
+  const likelyCircle = nearSquare && radius >= Math.min(width, height) * 0.45;
+  return likelyCircle ? "circle" : "rect";
+}
+function forcedShape(el) {
+  const shape = el.dataset.skeletonShape;
+  if (shape === "circle" || shape === "rect") return shape;
+  return null;
+}
+function explicitLineCount(el) {
+  const raw = el.dataset.skeletonLines;
+  if (!raw) return null;
+  const parsed = Number.parseInt(raw, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return parsed;
+}
+function shouldIgnore(el, options) {
+  if (el.dataset.noSkeleton !== void 0) return true;
+  if (el.dataset.skeletonIgnore !== void 0) return true;
+  if (options.ignoreSelectors?.some((selector) => el.matches(selector))) return true;
+  return false;
+}
+function isMarkedContainer(el) {
+  return el.dataset.skeletonContainer !== void 0;
+}
+function hasDirectTextNode(el) {
+  for (const n of Array.from(el.childNodes)) {
+    if (n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+function hasVisibleElementChildren(el) {
+  for (const c of Array.from(el.children)) {
+    if (isVisible(c)) return true;
+  }
+  return false;
+}
+function shouldUseTextMode(el, forced) {
+  return !forced && hasDirectTextNode(el);
+}
+function shouldSkipContainerBone(el, forced) {
+  if (forced) return false;
+  if (isMarkedContainer(el)) return true;
+  return hasVisibleElementChildren(el) && !hasDirectTextNode(el);
+}
+function makeTextBones(el, rootRect, minSize) {
+  const rect = el.getBoundingClientRect();
+  if (rect.width < minSize || rect.height < minSize) return [];
+  const style = window.getComputedStyle(el);
+  const fontSize = parseFloat(style.fontSize || "16") || 16;
+  const lineHeightRaw = parseFloat(style.lineHeight || "0");
+  const lineHeight = Number.isFinite(lineHeightRaw) && lineHeightRaw > 0 ? lineHeightRaw : fontSize * 1.4;
+  const estimatedLines = Math.max(1, Math.round(rect.height / lineHeight));
+  const lines = explicitLineCount(el) ?? estimatedLines;
+  const bones = [];
+  for (let i = 0; i < lines; i++) {
+    const isLast = i === lines - 1;
+    const y = rect.top - rootRect.top + i * lineHeight;
+    const height = Math.max(minSize, Math.round(lineHeight * DEFAULT_TEXT_LINE_HEIGHT_FACTOR));
+    const width = Math.round(rect.width * (isLast && lines > 1 ? 0.75 : 1));
+    bones.push({
+      x: Math.round(rect.left - rootRect.left),
+      y: Math.round(y),
+      width,
+      height,
+      radius: DEFAULT_TEXT_RADIUS,
+      kind: "rect"
+    });
+  }
+  return bones;
+}
+function scanBones(root, options = {}) {
+  const minSize = options.minSize ?? DEFAULT_MIN_SIZE;
+  const rootRect = root.getBoundingClientRect();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  const bones = [];
+  let current = walker.currentNode;
+  while (current) {
+    if (isVisible(current) && !shouldIgnore(current, options)) {
+      const el = current;
+      const forced = forcedShape(el);
+      if (shouldUseTextMode(el, forced)) {
+        bones.push(...makeTextBones(el, rootRect, minSize));
+      } else if (!shouldSkipContainerBone(el, forced)) {
+        const rect = el.getBoundingClientRect();
+        const width = Math.round(rect.width);
+        const height = Math.round(rect.height);
+        if (width >= minSize && height >= minSize) {
+          const style = window.getComputedStyle(el);
+          const radius = toRadius(style, width, height);
+          bones.push({
+            x: Math.round(rect.left - rootRect.left),
+            y: Math.round(rect.top - rootRect.top),
+            width,
+            height,
+            radius,
+            kind: forced ?? autoKind(width, height, radius)
+          });
+        }
+      }
+    }
+    current = walker.nextNode();
+  }
+  return dedupeBones(bones);
+}
+function dedupeBones(bones) {
+  const seen = /* @__PURE__ */ new Set();
+  const output = [];
+  for (const b of bones) {
+    const key = `${b.x}:${b.y}:${b.width}:${b.height}:${b.radius}:${b.kind}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      output.push(b);
+    }
+  }
+  return output;
+}
+export {
+  scanBones
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@auto-skeleton/core",
+  "version": "0.0.2",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}