@terrafirmagreg-team/ui 0.0.0-stage → 0.1.0

package/src/lib/media/crop-opaque.ts

@@ -0,0 +1,76 @@
+type OpaqueBBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function opaqueBBox(
+  pixels: ArrayLike<number>,
+  width: number,
+  height: number,
+): OpaqueBBox | undefined {
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+  for (let i = 0; i < width * height; i++) {
+    if ((pixels[i * 4 + 3] ?? 0) === 0) continue;
+    const x = i % width;
+    const y = (i / width) | 0;
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  if (maxX < 0) return undefined;
+  return { x: minX, y: minY, width: maxX - minX + 1, height: maxY - minY + 1 };
+}
+
+export function cropOpaqueImageDataUrl(
+  image: HTMLImageElement,
+): string | undefined {
+  const width = image.naturalWidth;
+  const height = image.naturalHeight;
+  if (width < 1 || height < 1) return undefined;
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) return undefined;
+  ctx.drawImage(image, 0, 0);
+  let pixels: ImageData;
+  try {
+    pixels = ctx.getImageData(0, 0, width, height);
+  } catch {
+    return undefined;
+  }
+  const box = opaqueBBox(pixels.data, width, height);
+  if (!box) return undefined;
+  if (
+    box.x === 0 &&
+    box.y === 0 &&
+    box.width === width &&
+    box.height === height
+  ) {
+    return undefined;
+  }
+  const out = document.createElement('canvas');
+  out.width = box.width;
+  out.height = box.height;
+  const outCtx = out.getContext('2d');
+  if (!outCtx) return undefined;
+  outCtx.imageSmoothingEnabled = false;
+  outCtx.drawImage(
+    image,
+    box.x,
+    box.y,
+    box.width,
+    box.height,
+    0,
+    0,
+    box.width,
+    box.height,
+  );
+  return out.toDataURL('image/png');
+}

package/src/lib/media/nearby-indexes.ts

@@ -0,0 +1,6 @@
+export function nearbyIndexes(selected: number, length: number): number[] {
+  if (length <= 1) return [0];
+  const next = (selected + 1) % length;
+  const prev = (selected - 1 + length) % length;
+  return next === prev ? [selected, next] : [selected, next, prev];
+}

package/src/lib/media/trim-transparent.ts

@@ -0,0 +1,117 @@
+const TRIM_TOL = 8;
+
+export function trimTransparent(src: string): Promise<string> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    image.onload = () => {
+      const width = image.naturalWidth;
+      const height = image.naturalHeight;
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        resolve(src);
+        return;
+      }
+      ctx.drawImage(image, 0, 0);
+      let imageData: ImageData;
+      try {
+        imageData = ctx.getImageData(0, 0, width, height);
+      } catch {
+        resolve(src);
+        return;
+      }
+      const { data } = imageData;
+      const at = (x: number, y: number) => (y * width + x) * 4;
+      const closeRgb = (i: number, j: number) =>
+        Math.abs(data[i]! - data[j]!) <= TRIM_TOL &&
+        Math.abs(data[i + 1]! - data[j + 1]!) <= TRIM_TOL &&
+        Math.abs(data[i + 2]! - data[j + 2]!) <= TRIM_TOL;
+      const empty = (x: number, y: number, ref: number) => {
+        const i = at(x, y);
+        if (data[i + 3]! <= TRIM_TOL) return true;
+        if (data[ref + 3]! <= TRIM_TOL) return false;
+        return closeRgb(i, ref);
+      };
+      const rowPad = (y: number, x0: number, x1: number) => {
+        let ref = -1;
+        for (let x = x0; x <= x1; x++) {
+          const i = at(x, y);
+          if (data[i + 3]! > TRIM_TOL) {
+            ref = i;
+            break;
+          }
+        }
+        if (ref < 0) return true;
+        for (let x = x0; x <= x1; x++) {
+          if (!empty(x, y, ref)) return false;
+        }
+        return true;
+      };
+      const colPad = (x: number, y0: number, y1: number) => {
+        let ref = -1;
+        for (let y = y0; y <= y1; y++) {
+          const i = at(x, y);
+          if (data[i + 3]! > TRIM_TOL) {
+            ref = i;
+            break;
+          }
+        }
+        if (ref < 0) return true;
+        for (let y = y0; y <= y1; y++) {
+          if (!empty(x, y, ref)) return false;
+        }
+        return true;
+      };
+
+      let minX = 0;
+      let minY = 0;
+      let maxX = width - 1;
+      let maxY = height - 1;
+      let changed = true;
+      while (changed && minX < maxX && minY < maxY) {
+        changed = false;
+        if (rowPad(minY, minX, maxX)) {
+          minY += 1;
+          changed = true;
+        }
+        if (minY < maxY && rowPad(maxY, minX, maxX)) {
+          maxY -= 1;
+          changed = true;
+        }
+        if (colPad(minX, minY, maxY)) {
+          minX += 1;
+          changed = true;
+        }
+        if (minX < maxX && colPad(maxX, minY, maxY)) {
+          maxX -= 1;
+          changed = true;
+        }
+      }
+      if (
+        maxX <= minX ||
+        maxY <= minY ||
+        (minX === 0 && minY === 0 && maxX === width - 1 && maxY === height - 1)
+      ) {
+        resolve(src);
+        return;
+      }
+      const tw = maxX - minX + 1;
+      const th = maxY - minY + 1;
+      const out = document.createElement('canvas');
+      out.width = tw;
+      out.height = th;
+      const outCtx = out.getContext('2d');
+      if (!outCtx) {
+        resolve(src);
+        return;
+      }
+      outCtx.drawImage(image, minX, minY, tw, th, 0, 0, tw, th);
+      resolve(out.toDataURL('image/png'));
+    };
+    image.onerror = () => resolve(src);
+    image.crossOrigin = 'anonymous';
+    image.src = src;
+  });
+}

package/src/lib/readability/config.ts

@@ -0,0 +1,10 @@
+import { createConfigRegistry } from '@terrafirmagreg-team/ui/lib/config';
+
+export type ReadabilityConfig = {
+  isSpotlightDisabled?: (pathname: string) => boolean;
+};
+
+const { register: registerReadabilityConfig, get: readabilityConfig } =
+  createConfigRegistry<ReadabilityConfig>();
+
+export { registerReadabilityConfig, readabilityConfig };

package/src/lib/readability/spotlight.ts

@@ -0,0 +1,186 @@
+'use client';
+import type { SpotlightStyle } from '@terrafirmagreg-team/ui/types/readability';
+
+const UNIT_SELECTOR =
+  'figure, table, blockquote, details, ul, ol, video, iframe, .codeblock';
+const PHRASING_SELECTOR =
+  'a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, ' +
+  'data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, ' +
+  'label, map, mark, math, meter, noscript, object, output, picture, ' +
+  'progress, q, rp, rt, ruby, s, samp, script, select, slot, small, span, ' +
+  'strong, sub, sup, svg, template, textarea, time, u, var, video, wbr';
+const MEDIA_SELECTOR = 'img, svg, video, canvas, audio, picture';
+
+export function contentRoot(): HTMLElement | null {
+  return document.getElementById('page')?.parentElement ?? null;
+}
+
+function isBlockish(el: HTMLElement): boolean {
+  const display = getComputedStyle(el).display;
+  return !display.startsWith('inline') && display !== 'none';
+}
+
+function isStructural(el: HTMLElement): boolean {
+  if (el.matches(MEDIA_SELECTOR)) return false;
+  for (const child of el.children) {
+    if (!child.matches(PHRASING_SELECTOR)) return true;
+  }
+  return false;
+}
+
+function hasDirectText(el: HTMLElement): boolean {
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+      return true;
+  }
+  return false;
+}
+
+function isInteractive(el: HTMLElement): boolean {
+  const tag = el.tagName;
+  if (tag !== 'A' && tag !== 'BUTTON' && el.getAttribute('role') !== 'button')
+    return false;
+  const parent = el.parentElement;
+  if (!parent) return false;
+  return !hasDirectText(parent);
+}
+
+function isBoundary(el: HTMLElement, root: HTMLElement): boolean {
+  return (
+    el === root ||
+    el.parentElement === root ||
+    el.matches('article, nav, .prose, #toc')
+  );
+}
+
+function isUnit(el: HTMLElement): boolean {
+  if (isStructural(el)) return true;
+  if (hasDirectText(el)) return true;
+  return el.matches(UNIT_SELECTOR);
+}
+
+function closestBlock(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  const found = el.closest(UNIT_SELECTOR);
+  return found instanceof HTMLElement && root.contains(found) ? found : null;
+}
+
+function findElementToBeHighlighted(
+  element: HTMLElement | null,
+  rootContainer: HTMLElement,
+): HTMLElement | null {
+  if (!element) return null;
+  const isAncestorValid = (current: HTMLElement | null): boolean => {
+    if (!current || current === rootContainer) return false;
+    const parent = current.parentElement;
+    if (!parent) return false;
+    if (parent === rootContainer) return true;
+    const parentDisplay = getComputedStyle(parent).display;
+    if (
+      parentDisplay.startsWith('inline') ||
+      parentDisplay === 'none' ||
+      hasDirectText(parent)
+    )
+      return false;
+    if (parent.tagName === 'DIV') {
+      if (parent.classList.contains('codeblock')) return false;
+      for (const child of parent.children) {
+        if (child.tagName === 'PRE') return false;
+      }
+    }
+    if (
+      parent.tagName === 'LI' &&
+      current.tagName !== 'P' &&
+      !isBlockish(current)
+    ) {
+      return false;
+    }
+    return isAncestorValid(parent);
+  };
+  return isAncestorValid(element)
+    ? element
+    : findElementToBeHighlighted(element.parentElement, rootContainer);
+}
+
+function interactiveUnit(
+  el: HTMLElement,
+  root: HTMLElement,
+): HTMLElement | null {
+  let current: HTMLElement | null = el;
+  while (current && !isBoundary(current, root)) {
+    if (isInteractive(current) && isStructural(current)) return current;
+    current = current.parentElement;
+  }
+  return null;
+}
+
+function resolveAside(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  const block = closestBlock(el, root);
+  if (block) return block;
+  const unit = interactiveUnit(el, root);
+  if (unit) return unit;
+  const found = findElementToBeHighlighted(el, root);
+  if (!found || isBoundary(found, root)) return null;
+  if (isStructural(found) && found.tagName !== 'A' && found.tagName !== 'BUTTON')
+    return null;
+  return found;
+}
+
+function resolveUnder(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  let interactive: HTMLElement | null = null;
+  let current: HTMLElement | null = el;
+  while (current && !isBoundary(current, root)) {
+    if (isInteractive(current)) interactive = current;
+    current = current.parentElement;
+  }
+  if (interactive) return interactive;
+  current = el;
+  let leaf: HTMLElement | null = null;
+  while (current && !isBoundary(current, root)) {
+    const leafish = isBlockish(current) && !isStructural(current);
+    if (!leafish && leaf) return leaf;
+    const inText =
+      current.parentElement && hasDirectText(current.parentElement);
+    if (leafish && !inText) leaf = current;
+    if (
+      !inText &&
+      isUnit(current) &&
+      !current.matches(PHRASING_SELECTOR)
+    )
+      return current;
+    current = current.parentElement;
+  }
+  if (leaf) return leaf;
+  const found = findElementToBeHighlighted(el, root);
+  return found && !isBoundary(found, root) ? found : null;
+}
+
+export function resolveSpotlight(
+  el: HTMLElement,
+  root: HTMLElement,
+  style: SpotlightStyle,
+): HTMLElement | null {
+  return style === 'under' ? resolveUnder(el, root) : resolveAside(el, root);
+}
+
+export function rowBand(
+  el: HTMLElement,
+  root: HTMLElement,
+  style: SpotlightStyle,
+): { top: number; left: number; width: number; height: number } | null {
+  if (style !== 'aside' || el.tagName === 'P') return null;
+  const parent = el.parentElement;
+  if (!parent || parent === root) return null;
+  const rect = el.getBoundingClientRect();
+  let top = rect.top;
+  let bottom = rect.bottom;
+  for (const child of parent.children) {
+    if (child === el || !(child instanceof HTMLElement)) continue;
+    const r = child.getBoundingClientRect();
+    if (r.height === 0 || r.top >= rect.bottom || r.bottom <= rect.top)
+      continue;
+    top = Math.min(top, r.top);
+    bottom = Math.max(bottom, r.bottom);
+  }
+  const pr = parent.getBoundingClientRect();
+  return { top, left: pr.left, width: pr.width, height: bottom - top };
+}

package/src/lib/readability/store.ts

@@ -0,0 +1,146 @@
+'use client';
+import {
+  readStoredValue,
+  subscribeStoredValue,
+  writeStoredValue,
+} from '@terrafirmagreg-team/ui/lib/utils/stored-value';
+import {
+  readabilityLayouts,
+  spotlightStyles,
+  type ReadabilityLayout,
+  type ReadabilityState,
+  type SpotlightStyle,
+} from '@terrafirmagreg-team/ui/types/readability';
+
+const STORAGE = 'readability';
+const WIDTH_MIN = 60;
+const WIDTH_MAX = 100;
+const WIDTH_DEBOUNCE_MS = 1000;
+const ANIM_DURATION_MS = 5000;
+
+export const defaults: ReadabilityState = {
+  layout: 'original',
+  pageWidth: 100,
+  contentWidth: 80,
+  spotlight: false,
+  spotlightStyle: 'aside',
+};
+
+let cached: ReadabilityState = defaults;
+
+export function getServerSnapshot() {
+  return defaults;
+}
+
+function snapshot(next: ReadabilityState): ReadabilityState {
+  if (
+    cached.layout === next.layout &&
+    cached.pageWidth === next.pageWidth &&
+    cached.contentWidth === next.contentWidth &&
+    cached.spotlight === next.spotlight &&
+    cached.spotlightStyle === next.spotlightStyle
+  ) {
+    return cached;
+  }
+  cached = next;
+  return cached;
+}
+
+export function subscribe(onStoreChange: () => void) {
+  return subscribeStoredValue(STORAGE, onStoreChange);
+}
+
+function isLayout(value: unknown): value is ReadabilityLayout {
+  return readabilityLayouts.includes(value as ReadabilityLayout);
+}
+
+function isSpotlightStyle(value: unknown): value is SpotlightStyle {
+  return spotlightStyles.includes(value as SpotlightStyle);
+}
+
+export function clampWidth(value: unknown, fallback: number): number {
+  const n = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(n)) return fallback;
+  return Math.min(WIDTH_MAX, Math.max(WIDTH_MIN, Math.round(n)));
+}
+
+export function readState(): ReadabilityState {
+  return snapshot(
+    readStoredValue(STORAGE, (raw) => {
+      if (!raw) return defaults;
+      try {
+        const parsed = JSON.parse(raw) as Partial<ReadabilityState>;
+        return {
+          layout: isLayout(parsed.layout) ? parsed.layout : defaults.layout,
+          pageWidth: clampWidth(parsed.pageWidth, defaults.pageWidth),
+          contentWidth: clampWidth(parsed.contentWidth, defaults.contentWidth),
+          spotlight: parsed.spotlight === true,
+          spotlightStyle: isSpotlightStyle(parsed.spotlightStyle)
+            ? parsed.spotlightStyle
+            : defaults.spotlightStyle,
+        };
+      } catch {
+        return defaults;
+      }
+    }),
+  );
+}
+
+export function writeState(patch: Partial<ReadabilityState>) {
+  writeStoredValue(
+    STORAGE,
+    { ...readState(), ...patch },
+    JSON.stringify,
+  );
+}
+
+let widthTimer: ReturnType<typeof setTimeout> | undefined;
+let animTimer: ReturnType<typeof setTimeout> | undefined;
+let initialized = false;
+
+function writeWidths(state: ReadabilityState) {
+  const root = document.documentElement;
+  root.style.setProperty('--page-width', `${state.pageWidth}%`);
+  root.style.setProperty('--content-width', `${state.contentWidth}%`);
+}
+
+function applyWidths(state: ReadabilityState) {
+  clearTimeout(widthTimer);
+  widthTimer = setTimeout(() => writeWidths(state), WIDTH_DEBOUNCE_MS);
+}
+
+function triggerAnimation() {
+  const root = document.documentElement;
+  root.setAttribute('data-readability-anim', '');
+  clearTimeout(animTimer);
+  animTimer = setTimeout(() => {
+    root.removeAttribute('data-readability-anim');
+  }, ANIM_DURATION_MS);
+}
+
+export function applyState(state: ReadabilityState) {
+  const root = document.documentElement;
+  root.dataset.layout = state.layout;
+  root.toggleAttribute('data-spotlight', state.spotlight);
+  root.dataset.spotlightStyle = state.spotlightStyle;
+  if (!initialized) {
+    initialized = true;
+    writeWidths(state);
+    return;
+  }
+  applyWidths(state);
+  triggerAnimation();
+}
+
+export function clearState() {
+  const root = document.documentElement;
+  initialized = false;
+  clearTimeout(widthTimer);
+  clearTimeout(animTimer);
+  delete root.dataset.layout;
+  delete root.dataset.spotlightStyle;
+  root.removeAttribute('data-spotlight');
+  root.removeAttribute('data-readability-anim');
+  root.style.removeProperty('--page-width');
+  root.style.removeProperty('--content-width');
+}

package/src/lib/tree.ts

@@ -0,0 +1,92 @@
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+
+export function normalizeUrl(url: string): string {
+  if (url.startsWith('http://') || url.startsWith('https://')) return url;
+  if (!url.startsWith('/')) url = `/${url}`;
+  if (url.length > 1 && url.endsWith('/')) url = url.slice(0, -1);
+  return url;
+}
+
+
+export function findPath(
+  nodes: PageTree.Node[],
+  matcher: (node: PageTree.Node) => boolean,
+  options: { includeSeparator?: boolean } = {},
+): PageTree.Node[] | null {
+  const { includeSeparator = true } = options;
+
+  function run(nodes: PageTree.Node[]): PageTree.Node[] | undefined {
+    let separator: PageTree.Node | undefined;
+    for (const node of nodes) {
+      if (matcher(node)) {
+        const items: PageTree.Node[] = [];
+        if (separator) items.push(separator);
+        items.push(node);
+        return items;
+      }
+      if (node.type === 'separator' && includeSeparator) {
+        separator = node;
+        continue;
+      }
+      if (node.type === 'folder') {
+        const items =
+          node.index && matcher(node.index)
+            ? [node.index]
+            : run(node.children);
+        if (items) {
+          items.unshift(node);
+          if (separator) items.unshift(separator);
+          return items;
+        }
+      }
+    }
+  }
+
+  return run(nodes) ?? null;
+}
+
+
+export function searchPath(
+  nodes: PageTree.Node[],
+  url: string,
+): PageTree.Node[] | null {
+  const normalizedUrl = normalizeUrl(url);
+  return findPath(
+    nodes,
+    (node) => node.type === 'page' && node.url === normalizedUrl,
+  );
+}
+
+
+export function findProjection(
+  from: PageTree.Folder,
+  to: PageTree.Folder,
+  page: PageTree.Item,
+): PageTree.Item | undefined {
+  const path = findPath(from.children, (node) => node === page, {
+    includeSeparator: false,
+  });
+  if (!path) return;
+
+  let target: PageTree.Node[] = to.children;
+  let projection: PageTree.Item | undefined;
+  outer: for (let i = 1; i < path.length; i++) {
+    const segment = path[i];
+    for (const node of target) {
+      if (node.$id === segment.$id && node.type === 'page') {
+        projection = node;
+        continue outer;
+      }
+      if (
+        node.type === 'folder' &&
+        segment.type === 'folder' &&
+        (node.$id === segment.$id || node === segment)
+      ) {
+        target = node.children;
+        continue outer;
+      }
+    }
+    return;
+  }
+  return projection;
+}

package/src/lib/utils/async-cache.ts

@@ -0,0 +1,32 @@
+export type AsyncCache<A extends unknown[], V> = ((
+  ...args: A
+) => Promise<V>) & {
+  peek: (...args: A) => V | undefined;
+};
+
+export function createAsyncCache<A extends unknown[], V>(
+  loader: (...args: A) => Promise<V>,
+  keyOf: (...args: A) => string = (...args) => JSON.stringify(args),
+): AsyncCache<A, V> {
+  const cache = new Map<string, Promise<V>>();
+  const resolved = new Map<string, V>();
+  const call = (...args: A) => {
+    const key = keyOf(...args);
+    let pending = cache.get(key);
+    if (!pending) {
+      pending = loader(...args)
+        .then((value) => {
+          resolved.set(key, value);
+          return value;
+        })
+        .catch((err) => {
+          cache.delete(key);
+          throw err;
+        });
+      cache.set(key, pending);
+    }
+    return pending;
+  };
+  call.peek = (...args: A) => resolved.get(keyOf(...args));
+  return call;
+}

package/src/lib/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from 'cn';

package/src/lib/utils/format.ts

@@ -0,0 +1,22 @@
+
+export function formatCount(value: number): string {
+  if (!Number.isFinite(value)) return String(value);
+  const abs = Math.abs(value);
+  if (abs < 10_000) return String(Math.trunc(value));
+  const units: [number, string][] = [
+    [1_000_000_000, 'B'],
+    [1_000_000, 'M'],
+    [1_000, 'k'],
+  ];
+  for (const [div, suffix] of units) {
+    if (abs >= div) {
+      const rounded = value / div;
+      const text =
+        Math.abs(rounded) >= 100
+          ? String(Math.trunc(rounded))
+          : String(Math.round(rounded * 10) / 10).replace(/\.0$/, '');
+      return `${text}${suffix}`;
+    }
+  }
+  return String(value);
+}

package/src/lib/utils/history.ts

@@ -0,0 +1,9 @@
+'use client';
+
+export function replaceUrlState(href: string) {
+  window.history.replaceState(null, '', href);
+}
+
+export function pushUrlState(href: string) {
+  window.history.pushState(null, '', href);
+}