youiyoux 0.1.2 → 0.1.4

package/dist/hub-demo/public/data/specimens.site.dark.94a6706908.css

@@ -0,0 +1,92 @@
+/* src/styles/ui.css */
+/* The site's kit: one BEM block per element, modifiers with --. */
+:root {
+  --ui-radius: 8px;
+  --ui-control-height: 32px;
+  --ui-space: 4px;
+}
+
+.ui-button {
+  display: inline-flex;
+  align-items: center;
+  height: var(--ui-control-height);
+  padding: 0 calc(var(--ui-space) * 3);
+  border-radius: var(--ui-radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.ui-button--sm {
+  height: 28px;
+  padding: 0 10px;
+}
+
+.ui-button:is(:hover, .youi-state-hover, .youi-state-hover *) {
+  background: #f4f4f5;
+}
+
+@media (max-width: 640px) {
+  .ui-button {
+    height: 40px;
+  }
+}
+
+.ui-badge {
+  display: inline-flex;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.ui-card {
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px solid #e4e4e7;
+}
+
+.ui-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.ui-tab {
+  height: 28px;
+  padding: 0 12px;
+  border-radius: var(--ui-radius);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.ui-tab--active {
+  background: #fff;
+}
+
+/* src/styles/marketing.css */
+/* The marketing pages' own styles: a plain .badge, with no kit prefix. */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge--muted {
+  opacity: 0.7;
+}
+
+/* Named like an element, but sets no shape: not a kit member. */
+.tag-list {
+  display: flex;
+  gap: 8px;
+}
+
+:root { color-scheme: dark; }
+
+/* youi-states: forced-state twins */

package/dist/hub-demo/public/data/specimens.site.light.3ddbc8d28d.css

@@ -0,0 +1,92 @@
+/* src/styles/ui.css */
+/* The site's kit: one BEM block per element, modifiers with --. */
+:root {
+  --ui-radius: 8px;
+  --ui-control-height: 32px;
+  --ui-space: 4px;
+}
+
+.ui-button {
+  display: inline-flex;
+  align-items: center;
+  height: var(--ui-control-height);
+  padding: 0 calc(var(--ui-space) * 3);
+  border-radius: var(--ui-radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.ui-button--sm {
+  height: 28px;
+  padding: 0 10px;
+}
+
+.ui-button:is(:hover, .youi-state-hover, .youi-state-hover *) {
+  background: #f4f4f5;
+}
+
+@media (max-width: 640px) {
+  .ui-button {
+    height: 40px;
+  }
+}
+
+.ui-badge {
+  display: inline-flex;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.ui-card {
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px solid #e4e4e7;
+}
+
+.ui-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.ui-tab {
+  height: 28px;
+  padding: 0 12px;
+  border-radius: var(--ui-radius);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.ui-tab--active {
+  background: #fff;
+}
+
+/* src/styles/marketing.css */
+/* The marketing pages' own styles: a plain .badge, with no kit prefix. */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge--muted {
+  opacity: 0.7;
+}
+
+/* Named like an element, but sets no shape: not a kit member. */
+.tag-list {
+  display: flex;
+  gap: 8px;
+}
+
+:root { color-scheme: light; }
+
+/* youi-states: forced-state twins */

package/dist/hub-previews.js

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+import { createRequire as __youiRequire } from "node:module"; import { dirname as __youiDir } from "node:path"; import { fileURLToPath as __youiPath } from "node:url"; const require = __youiRequire(import.meta.url); const __youiDirname = __youiDir(__youiPath(import.meta.url));
+import {
+  launchBrowser
+} from "./chunks/chunk-4BBYLTZX.js";
+import {
+  discoverCacheDir,
+  loadIndex
+} from "./chunks/chunk-M5XZWCPS.js";
+import {
+  THUMBS_PATH,
+  THUMB_SCHEMES,
+  needsCapture,
+  prunePictures,
+  readThumbIndex,
+  selectCandidates,
+  thumbsDir,
+  writeThumbIndex
+} from "./chunks/chunk-FJZFCAL5.js";
+import "./chunks/chunk-XAEMVEYX.js";
+import "./chunks/chunk-FVVL5JCY.js";
+import "./chunks/chunk-NYDJYMID.js";
+import "./chunks/chunk-WNTS7ZO4.js";
+
+// ../../apps/web/scripts/capture-discover-thumbs.ts
+import { createHash } from "node:crypto";
+import { mkdir, rename, writeFile } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+var DRAW_TIMEOUT_MS = 9e4;
+var SETTLE_MS = 300;
+var INSET = 8;
+var WEBP_QUALITY = 0.86;
+var BLANK_SHARE = 2e-3;
+var SCALE = 2;
+async function writeBytes(file, bytes) {
+  const temporary = `${file}.${process.pid}.tmp`;
+  await writeFile(temporary, bytes);
+  await rename(temporary, file);
+}
+async function webp(page, png) {
+  const { url, share } = await page.evaluate(
+    async ({ data, quality }) => {
+      const image = new Image();
+      image.src = `data:image/png;base64,${data}`;
+      await image.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      const context = canvas.getContext("2d");
+      context.drawImage(image, 0, 0);
+      const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
+      let away = 0;
+      for (let i = 0; i < pixels.length; i += 4) if (Math.abs(pixels[i] - pixels[0]) + Math.abs(pixels[i + 1] - pixels[1]) + Math.abs(pixels[i + 2] - pixels[2]) > 24) away++;
+      return { url: canvas.toDataURL("image/webp", quality), share: away / (pixels.length / 4) };
+    },
+    { data: png.toString("base64"), quality: WEBP_QUALITY }
+  );
+  if (!url.startsWith("data:image/webp;base64,")) throw new Error("this Chromium cannot encode WebP");
+  return { bytes: Buffer.from(url.slice("data:image/webp;base64,".length), "base64"), blank: share < BLANK_SHARE };
+}
+async function photograph(page, hub, id, project) {
+  await page.goto(`${hub}/discover/specimen?id=${encodeURIComponent(id)}&project=${encodeURIComponent(project)}`);
+  const settled = page.locator(`[data-capture="${id}"][data-capture-state="ready"] [data-capture-stage] iframe[data-placed], [data-capture-state="failed"]`).first();
+  try {
+    await settled.waitFor({ timeout: DRAW_TIMEOUT_MS });
+    await page.waitForFunction(() => document.querySelector('[data-capture-state="failed"]') || document.querySelectorAll("[data-capture-stage] iframe[data-placed]").length === 2, void 0, { timeout: DRAW_TIMEOUT_MS });
+  } catch {
+    return { status: "failed", reason: `It did not draw within ${DRAW_TIMEOUT_MS / 1e3}s` };
+  }
+  await page.waitForTimeout(SETTLE_MS);
+  const failed = page.locator('[data-capture-state="failed"]');
+  if (await failed.count()) return { status: "failed", reason: (await failed.first().getAttribute("data-capture-reason") ?? "It could not be drawn").replace(/\.$/, "") };
+  const shots = {};
+  let size = { width: 0, height: 0 };
+  for (const scheme of THUMB_SCHEMES) {
+    const box = await page.locator(`[data-capture-stage="${scheme}"]`).boundingBox();
+    if (!box) return { status: "failed", reason: "Its stage was not on the page" };
+    const clip = { x: box.x + INSET, y: box.y + INSET, width: box.width - 2 * INSET, height: box.height - 2 * INSET };
+    const shot = await webp(page, await page.screenshot({ clip }));
+    if (shot.blank) return { status: "failed", reason: "It draws nothing visible on its own (it may need data, a size or a parent)" };
+    shots[scheme] = shot.bytes;
+    size = { width: Math.round(clip.width * SCALE), height: Math.round(clip.height * SCALE) };
+  }
+  return { status: "drawn", light: shots.light, dark: shots.dark, ...size };
+}
+async function main() {
+  const { values } = parseArgs({ options: { hub: { type: "string" }, registry: { type: "string" }, role: { type: "string" }, limit: { type: "string" }, force: { type: "boolean", default: false }, cache: { type: "string" } } });
+  const hub = (values.hub ?? "http://localhost:5173").replace(/\/+$/, "");
+  const cache = resolve(discoverCacheDir(values.cache));
+  const limit = values.limit === void 0 ? null : Number(values.limit);
+  if (limit !== null && (!Number.isSafeInteger(limit) || limit <= 0)) throw new Error("--limit takes a whole number above 0");
+  const answer = await fetch(`${hub}${THUMBS_PATH}`).then(
+    async (res) => ({ ok: res.ok, body: await res.json().catch(() => null) }),
+    () => null
+  );
+  if (!answer) {
+    process.stderr.write(`\u2716 no hub answers at ${hub}: start one on your project with \`youiyoux ui --project <dir>\` (it says its port), then run this again
+`);
+    return 1;
+  }
+  if (!answer.ok || !answer.body?.project) {
+    process.stderr.write(`\u2716 ${answer.body?.error ?? `the hub at ${hub} cannot serve Discover previews`}
+`);
+    return 1;
+  }
+  const project = answer.body.project;
+  const listings = selectCandidates((await loadIndex(cache)).entries, { registry: values.registry ?? null, role: values.role ?? null, limit });
+  let index = readThumbIndex(cache, project);
+  const todo = listings.filter((e) => needsCapture(index, e.id, e.provenance.sha256, values.force));
+  process.stdout.write(`Photographing ${todo.length} of ${listings.length} candidates in ${project}'s theme (${listings.length - todo.length} already current)
+`);
+  const dir = thumbsDir(cache, project);
+  await mkdir(dir, { recursive: true });
+  const offsite = [];
+  const browser = await launchBrowser(process.env.YOUI_CHROMIUM, { purpose: { what: "Discover previews", command: "youiyoux discover previews" } });
+  let drawn = 0;
+  let failed = 0;
+  try {
+    const context = await browser.newContext({ viewport: { width: 1200, height: 800 }, deviceScaleFactor: SCALE, reducedMotion: "reduce" });
+    const host = new URL(hub).host;
+    await context.route("**/*", (route) => {
+      const url = new URL(route.request().url());
+      if (url.host === host || url.protocol === "data:" || url.protocol === "blob:" || url.protocol === "about:") return route.continue();
+      offsite.push(url.href);
+      return route.abort();
+    });
+    const page = await context.newPage();
+    for (const entry of todo) {
+      const sha = entry.provenance.sha256;
+      const outcome = await photograph(page, hub, entry.id, project);
+      const items = { ...index.items };
+      const failures = { ...index.failed };
+      const at = (/* @__PURE__ */ new Date()).toISOString();
+      if (outcome.status === "drawn") {
+        const key = createHash("sha256").update(outcome.light).update(outcome.dark).digest("hex").slice(0, 16);
+        await writeBytes(join(dir, `${key}.light.webp`), outcome.light);
+        await writeBytes(join(dir, `${key}.dark.webp`), outcome.dark);
+        items[entry.id] = { sha, key, width: outcome.width, height: outcome.height, capturedAt: at };
+        delete failures[entry.id];
+        drawn++;
+        process.stdout.write(`  \u2713 ${entry.source.ref}
+`);
+      } else {
+        delete items[entry.id];
+        failures[entry.id] = { sha, reason: outcome.reason, at };
+        failed++;
+        process.stdout.write(`  \u2013 ${entry.source.ref}: ${outcome.reason}
+`);
+      }
+      index = { ...index, items, failed: failures };
+      await writeThumbIndex(cache, index);
+    }
+  } finally {
+    await browser.close();
+  }
+  const current = new Map((await loadIndex(cache)).entries.map((e) => [e.id, e.provenance?.sha256]));
+  index = { ...index, items: Object.fromEntries(Object.entries(index.items).filter(([id, t]) => current.get(id) === t.sha)), failed: Object.fromEntries(Object.entries(index.failed).filter(([id, f]) => current.get(id) === f.sha)) };
+  await writeThumbIndex(cache, index);
+  const pruned = await prunePictures(cache, index);
+  process.stdout.write(`${drawn} photographed, ${failed} could not be drawn on their own${pruned ? `, ${pruned} old pictures removed` : ""} \u2192 ${dir}
+`);
+  if (offsite.length) process.stdout.write(`${offsite.length} requests to other hosts were blocked (${[...new Set(offsite.map((u) => new URL(u).host))].slice(0, 5).join(", ")})
+`);
+  process.stdout.write(`Next: open ${hub}/discover?view=gallery
+`);
+  return 0;
+}
+process.exitCode = await main().catch((error) => {
+  process.stderr.write(`\u2716 ${error instanceof Error ? error.message : String(error)}
+`);
+  return 1;
+});