alabit-ui 0.1.0

package/dist/server.js

@@ -0,0 +1,622 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/lib/responsive/server.ts
+import { randomUUID } from "crypto";
+import { access } from "fs/promises";
+import { constants } from "fs";
+import { chromium } from "playwright-core";
+
+// src/lib/responsive/shared.ts
+var DEVICE_PRESETS = [
+  {
+    id: "mobile-sm",
+    name: "Mobile S",
+    width: 360,
+    height: 780,
+    kind: "phone",
+    category: "phone",
+    brand: "generic",
+    line: "generic-smartphone",
+    tags: ["sm", "360", "small"]
+  },
+  {
+    id: "iphone-12-pro",
+    name: "iPhone 12 Pro",
+    width: 390,
+    height: 844,
+    kind: "phone",
+    category: "phone",
+    brand: "apple",
+    line: "iphone",
+    tags: ["apple", "ios", "390"]
+  },
+  {
+    id: "mobile-lg",
+    name: "Mobile L",
+    width: 640,
+    height: 960,
+    kind: "phone",
+    category: "phone",
+    brand: "generic",
+    line: "generic-smartphone",
+    tags: ["lg", "640", "large"]
+  },
+  {
+    id: "ipad-mini",
+    name: "iPad Mini",
+    width: 744,
+    height: 1133,
+    kind: "tablet",
+    category: "tablet",
+    brand: "apple",
+    line: "ipad",
+    tags: ["apple", "ipad", "mini"]
+  },
+  {
+    id: "ipad",
+    name: "iPad",
+    width: 768,
+    height: 1024,
+    kind: "tablet",
+    category: "tablet",
+    brand: "apple",
+    line: "ipad",
+    tags: ["apple", "ipad", "768"]
+  },
+  {
+    id: "ipad-air",
+    name: "iPad Air",
+    width: 820,
+    height: 1180,
+    kind: "tablet",
+    category: "tablet",
+    brand: "apple",
+    line: "ipad",
+    tags: ["apple", "ipad", "air"]
+  },
+  {
+    id: "ipad-pro-11",
+    name: 'iPad Pro 11"',
+    width: 834,
+    height: 1194,
+    kind: "tablet",
+    category: "tablet",
+    brand: "apple",
+    line: "ipad",
+    tags: ["apple", "ipad", "pro", "11"]
+  },
+  {
+    id: "ipad-pro-12-9",
+    name: 'iPad Pro 12.9"',
+    width: 1024,
+    height: 1366,
+    kind: "tablet",
+    category: "tablet",
+    brand: "apple",
+    line: "ipad",
+    tags: ["apple", "ipad", "pro", "12"]
+  },
+  {
+    id: "galaxy-tab-s9",
+    name: "Galaxy Tab S9",
+    width: 847,
+    height: 1210,
+    kind: "tablet",
+    category: "tablet",
+    brand: "samsung",
+    line: "galaxy-tab",
+    tags: ["samsung", "android", "galaxy-tab"]
+  },
+  {
+    id: "tablet-generic",
+    name: "Tablet Gen\xE9rica",
+    width: 800,
+    height: 1280,
+    kind: "tablet",
+    category: "tablet",
+    brand: "generic",
+    line: "generic-tablet",
+    tags: ["generic", "android"]
+  },
+  {
+    id: "laptop",
+    name: "Laptop",
+    width: 1024,
+    height: 768,
+    kind: "desktop",
+    category: "laptop",
+    brand: "generic",
+    line: "generic-laptop",
+    tags: ["1024", "lg-screen"]
+  },
+  {
+    id: "macbook-air-13",
+    name: 'MacBook Air 13"',
+    width: 1280,
+    height: 832,
+    kind: "desktop",
+    category: "laptop",
+    brand: "apple",
+    line: "macbook",
+    tags: ["apple", "mac", "macbook", "air", "13"]
+  },
+  {
+    id: "macbook-pro-14",
+    name: 'MacBook Pro 14"',
+    width: 1512,
+    height: 982,
+    kind: "desktop",
+    category: "laptop",
+    brand: "apple",
+    line: "macbook",
+    tags: ["apple", "mac", "macbook", "pro", "14"]
+  },
+  {
+    id: "macbook-pro-16",
+    name: 'MacBook Pro 16"',
+    width: 1728,
+    height: 1117,
+    kind: "desktop",
+    category: "laptop",
+    brand: "apple",
+    line: "macbook",
+    tags: ["apple", "mac", "macbook", "pro", "16"]
+  },
+  {
+    id: "desktop",
+    name: "Desktop",
+    width: 1280,
+    height: 800,
+    kind: "desktop",
+    category: "desktop",
+    brand: "monitor",
+    line: "generic-desktop",
+    tags: ["1280", "hd", "screen"]
+  },
+  {
+    id: "imac-24",
+    name: 'iMac 24"',
+    width: 2240,
+    height: 1260,
+    kind: "desktop",
+    category: "aio",
+    brand: "apple",
+    line: "imac",
+    tags: ["apple", "mac", "imac", "24", "screen"]
+  },
+  {
+    id: "desktop-xl",
+    name: "Desktop XL",
+    width: 1536,
+    height: 960,
+    kind: "desktop",
+    category: "desktop",
+    brand: "monitor",
+    line: "pro-monitor",
+    tags: ["1536", "2xl", "screen"]
+  },
+  {
+    id: "imac-27",
+    name: 'iMac 27"',
+    width: 2560,
+    height: 1440,
+    kind: "desktop",
+    category: "aio",
+    brand: "apple",
+    line: "imac",
+    tags: ["apple", "mac", "imac", "27", "5k", "screen"]
+  },
+  {
+    id: "full-hd",
+    name: "Full HD",
+    width: 1920,
+    height: 1080,
+    kind: "desktop",
+    category: "desktop",
+    brand: "monitor",
+    line: "pro-monitor",
+    tags: ["1920", "1080", "fhd", "screen"]
+  },
+  {
+    id: "wqxga",
+    name: "WQXGA 2.5K",
+    width: 2560,
+    height: 1600,
+    kind: "desktop",
+    category: "desktop",
+    brand: "monitor",
+    line: "pro-monitor",
+    tags: ["2560", "1600", "2k", "qhd", "screen"]
+  },
+  {
+    id: "uhd-4k",
+    name: "4K UHD",
+    width: 3840,
+    height: 2160,
+    kind: "desktop",
+    category: "desktop",
+    brand: "monitor",
+    line: "pro-monitor",
+    tags: ["3840", "2160", "4k", "uhd", "screen"]
+  },
+  {
+    id: "custom",
+    name: "Personalizado",
+    width: 480,
+    height: 720,
+    kind: "phone",
+    category: "custom",
+    brand: "custom",
+    line: "custom",
+    tags: ["custom", "user"]
+  }
+];
+function getViewportSize(device, orientation) {
+  const baseIsLandscape = device.width >= device.height;
+  if (orientation === "landscape") {
+    return baseIsLandscape ? { width: device.width, height: device.height } : { width: device.height, height: device.width };
+  }
+  return baseIsLandscape ? { width: device.height, height: device.width } : { width: device.width, height: device.height };
+}
+
+// src/lib/responsive/server.ts
+var _a;
+var DEFAULT_CHROME_PATH = (_a = process.env.RESPONSIVE_CHROME_PATH) != null ? _a : "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+var SESSION_TTL_MS = 1e3 * 60 * 15;
+var ACTION_SETTLE_MS = 350;
+var NAVIGATION_TIMEOUT_MS = 3e4;
+var SCREENSHOT_TIMEOUT_MS = 6e4;
+function getStore() {
+  if (!globalThis.__responsiveStore__) {
+    globalThis.__responsiveStore__ = {
+      browserPromise: null,
+      sessions: /* @__PURE__ */ new Map(),
+      cleanupTimer: null
+    };
+  }
+  if (!globalThis.__responsiveStore__.cleanupTimer) {
+    globalThis.__responsiveStore__.cleanupTimer = setInterval(() => {
+      void cleanupExpiredSessions();
+    }, 6e4);
+  }
+  return globalThis.__responsiveStore__;
+}
+async function resolveBrowser() {
+  const store = getStore();
+  if (!store.browserPromise) {
+    store.browserPromise = (async () => {
+      await access(DEFAULT_CHROME_PATH, constants.X_OK);
+      return chromium.launch({
+        headless: true,
+        executablePath: DEFAULT_CHROME_PATH,
+        args: [
+          "--disable-dev-shm-usage",
+          "--disable-background-timer-throttling",
+          "--disable-renderer-backgrounding"
+        ]
+      });
+    })().catch((error) => {
+      store.browserPromise = null;
+      throw error;
+    });
+  }
+  return store.browserPromise;
+}
+function sanitizeUrl(rawUrl) {
+  try {
+    const url = new URL(rawUrl);
+    if (!["http:", "https:"].includes(url.protocol)) {
+      throw new Error("Solo se permiten URLs http/https.");
+    }
+    return url.toString();
+  } catch (e) {
+    throw new Error("URL invalida. Usa una ruta local completa o una URL externa valida.");
+  }
+}
+function emptySnapshot(device, orientation, targetUrl) {
+  const viewport = getViewportSize(device, orientation);
+  return {
+    deviceId: device.id,
+    name: device.name,
+    width: viewport.width,
+    height: viewport.height,
+    screenshotDataUrl: null,
+    status: "loading",
+    currentUrl: targetUrl,
+    title: "",
+    error: null
+  };
+}
+async function waitForPageReady(page) {
+  await page.waitForLoadState("domcontentloaded", { timeout: NAVIGATION_TIMEOUT_MS });
+  try {
+    await page.waitForLoadState("networkidle", { timeout: 2e3 });
+  } catch (e) {
+  }
+}
+function getBrowserNavigationError(page) {
+  const currentUrl = page.url();
+  if (currentUrl.startsWith("chrome-error://")) {
+    return "Chrome no pudo cargar la URL destino.";
+  }
+  return null;
+}
+async function captureFrame(frame) {
+  const { page } = frame;
+  try {
+    const navigationError = getBrowserNavigationError(page);
+    if (navigationError) {
+      throw new Error(navigationError);
+    }
+    await page.waitForTimeout(60);
+    const buffer = await page.screenshot({
+      type: "jpeg",
+      quality: 65,
+      animations: "disabled",
+      caret: "hide",
+      timeout: SCREENSHOT_TIMEOUT_MS
+    });
+    frame.snapshot = __spreadProps(__spreadValues({}, frame.snapshot), {
+      screenshotDataUrl: `data:image/jpeg;base64,${buffer.toString("base64")}`,
+      status: "ready",
+      currentUrl: page.url(),
+      title: await page.title(),
+      error: null
+    });
+  } catch (error) {
+    frame.snapshot = __spreadProps(__spreadValues({}, frame.snapshot), {
+      screenshotDataUrl: null,
+      status: "error",
+      currentUrl: page.url(),
+      title: "",
+      error: error instanceof Error ? error.message : "No se pudo capturar el viewport."
+    });
+  }
+}
+async function refreshSession(session) {
+  for (const frame of session.frames.values()) {
+    await captureFrame(frame);
+  }
+  session.updatedAt = Date.now();
+}
+async function closeSessionResources(session) {
+  if (session.closed) {
+    return;
+  }
+  session.closed = true;
+  await Promise.all(
+    Array.from(session.frames.values()).map(async (frame) => {
+      await frame.context.close().catch(() => void 0);
+    })
+  );
+  session.frames.clear();
+}
+async function cleanupExpiredSessions() {
+  const store = getStore();
+  const now = Date.now();
+  const expired = Array.from(store.sessions.values()).filter(
+    (session) => now - session.updatedAt > SESSION_TTL_MS
+  );
+  await Promise.all(
+    expired.map(async (session) => {
+      store.sessions.delete(session.id);
+      await closeSessionResources(session);
+    })
+  );
+}
+function requireSession(sessionId) {
+  const store = getStore();
+  const session = store.sessions.get(sessionId);
+  if (!session || session.closed) {
+    throw new Error("La sesion ya no existe. Abri la URL de nuevo.");
+  }
+  session.updatedAt = Date.now();
+  return session;
+}
+function toSnapshot(session) {
+  return {
+    sessionId: session.id,
+    targetUrl: session.targetUrl,
+    orientation: session.orientation,
+    updatedAt: session.updatedAt,
+    frames: DEVICE_PRESETS.map((device) => {
+      var _a2;
+      const frame = session.frames.get(device.id);
+      return (_a2 = frame == null ? void 0 : frame.snapshot) != null ? _a2 : emptySnapshot(device, session.orientation, session.targetUrl);
+    })
+  };
+}
+async function createFrame(browser, device, targetUrl, orientation) {
+  const viewport = getViewportSize(device, orientation);
+  const context = await browser.newContext({
+    viewport,
+    screen: viewport,
+    deviceScaleFactor: 1,
+    isMobile: device.kind === "phone",
+    hasTouch: device.kind !== "desktop"
+  });
+  const page = await context.newPage();
+  const snapshot = emptySnapshot(device, orientation, targetUrl);
+  try {
+    await page.goto(targetUrl, {
+      waitUntil: "domcontentloaded",
+      timeout: NAVIGATION_TIMEOUT_MS
+    });
+    await waitForPageReady(page);
+    const navigationError = getBrowserNavigationError(page);
+    if (navigationError) {
+      throw new Error(navigationError);
+    }
+  } catch (error) {
+    snapshot.status = "error";
+    snapshot.error = error instanceof Error ? error.message : "No se pudo abrir la URL.";
+  }
+  const frame = {
+    device,
+    context,
+    page,
+    snapshot: __spreadProps(__spreadValues({}, snapshot), {
+      currentUrl: page.url() || targetUrl
+    })
+  };
+  await captureFrame(frame);
+  return frame;
+}
+async function createResponsiveSession(targetUrl, orientation) {
+  const sanitizedUrl = sanitizeUrl(targetUrl);
+  const browser = await resolveBrowser();
+  const frames = [];
+  for (const device of DEVICE_PRESETS) {
+    frames.push(await createFrame(browser, device, sanitizedUrl, orientation));
+  }
+  const session = {
+    id: randomUUID(),
+    targetUrl: sanitizedUrl,
+    orientation,
+    frames: new Map(frames.map((frame) => [frame.device.id, frame])),
+    updatedAt: Date.now(),
+    closed: false
+  };
+  getStore().sessions.set(session.id, session);
+  return toSnapshot(session);
+}
+async function getResponsiveSession(sessionId) {
+  const session = requireSession(sessionId);
+  await refreshSession(session);
+  return toSnapshot(session);
+}
+async function deleteResponsiveSession(sessionId) {
+  const store = getStore();
+  const session = store.sessions.get(sessionId);
+  if (!session) {
+    return;
+  }
+  store.sessions.delete(sessionId);
+  await closeSessionResources(session);
+}
+function clampRatio(value) {
+  return Math.max(0, Math.min(1, value));
+}
+async function settleSession(session) {
+  await Promise.all(
+    Array.from(session.frames.values()).map(async ({ page }) => {
+      try {
+        await page.waitForTimeout(ACTION_SETTLE_MS);
+      } catch (e) {
+        return void 0;
+      }
+    })
+  );
+}
+async function performResponsiveAction(sessionId, input) {
+  var _a2, _b;
+  const session = requireSession(sessionId);
+  if (input.type === "reload") {
+    await Promise.all(
+      Array.from(session.frames.values()).map(async ({ page, snapshot }) => {
+        snapshot.status = "loading";
+        try {
+          await page.reload({ waitUntil: "domcontentloaded", timeout: NAVIGATION_TIMEOUT_MS });
+          await waitForPageReady(page);
+          const navigationError = getBrowserNavigationError(page);
+          if (navigationError) {
+            throw new Error(navigationError);
+          }
+        } catch (error) {
+          snapshot.status = "error";
+          snapshot.error = error instanceof Error ? error.message : "No se pudo recargar.";
+        }
+      })
+    );
+  }
+  if (input.type === "set-orientation") {
+    session.orientation = input.orientation;
+    await Promise.all(
+      Array.from(session.frames.values()).map(async (frame) => {
+        const viewport = getViewportSize(frame.device, input.orientation);
+        frame.snapshot = __spreadProps(__spreadValues({}, frame.snapshot), {
+          width: viewport.width,
+          height: viewport.height,
+          status: "loading",
+          error: null
+        });
+        await frame.page.setViewportSize(viewport);
+      })
+    );
+  }
+  if (input.type === "navigate") {
+    const targetUrl = sanitizeUrl(input.targetUrl);
+    session.targetUrl = targetUrl;
+    await Promise.all(
+      Array.from(session.frames.values()).map(async ({ page, snapshot }) => {
+        snapshot.status = "loading";
+        try {
+          await page.goto(targetUrl, {
+            waitUntil: "domcontentloaded",
+            timeout: NAVIGATION_TIMEOUT_MS
+          });
+          await waitForPageReady(page);
+          const navigationError = getBrowserNavigationError(page);
+          if (navigationError) {
+            throw new Error(navigationError);
+          }
+        } catch (error) {
+          snapshot.status = "error";
+          snapshot.error = error instanceof Error ? error.message : "No se pudo navegar.";
+        }
+      })
+    );
+  }
+  if (input.type === "click") {
+    await Promise.all(
+      Array.from(session.frames.values()).map(async (frame) => {
+        const { width, height } = getViewportSize(frame.device, session.orientation);
+        await frame.page.mouse.click(
+          clampRatio(input.xRatio) * width,
+          clampRatio(input.yRatio) * height
+        );
+      })
+    );
+  }
+  if (input.type === "scroll") {
+    const deltaX = (_a2 = input.deltaX) != null ? _a2 : 0;
+    const deltaY = (_b = input.deltaY) != null ? _b : 0;
+    await Promise.all(
+      Array.from(session.frames.values()).map(
+        ({ page }) => page.evaluate(
+          ({ nextX, nextY }) => {
+            window.scrollBy(nextX, nextY);
+          },
+          { nextX: deltaX, nextY: deltaY }
+        )
+      )
+    );
+  }
+  await settleSession(session);
+  await refreshSession(session);
+  return toSnapshot(session);
+}
+export {
+  createResponsiveSession,
+  deleteResponsiveSession,
+  getResponsiveSession,
+  performResponsiveAction
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "alabit-ui",
+  "version": "0.1.0",
+  "description": "Alabit UI — React component library built with Tailwind v4 + @base-ui/react.",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "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"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "node": {
+        "import": "./dist/server.js",
+        "require": "./dist/server.cjs"
+      },
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "./theme.css": "./dist/foundations/tokens/tokens.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm build",
+    "release": "pnpm typecheck && pnpm build && pnpm publish --no-git-checks --tag latest"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4",
+    "@base-ui/react": "*"
+  },
+  "dependencies": {
+    "lucide-react": "^0.460",
+    "clsx": "^2",
+    "tailwind-merge": "^2",
+    "class-variance-authority": "^0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}