@terrafirmagreg-team/ui 0.1.0 → 1.2.0

package/src/hooks/{lang.ts → use-lang.ts}

@@ -6,3 +6,4 @@ export const UntranslatedContext = createContext(false);
 export function useUntranslated(): boolean {
   return useContext(UntranslatedContext);
 }
+

package/src/hooks/use-last-value.ts

@@ -13,3 +13,4 @@ export function useLastValue<T>(
   }
   return value ?? (stale ? undefined : held?.value);
 }
+

package/src/hooks/{layout.ts → use-layout.ts}

@@ -16,3 +16,4 @@ export function useLayout() {
     throw new Error('Missing LayoutContext, expected under <Layout />.');
   return context;
 }
+

package/src/hooks/use-marquee.ts

@@ -49,3 +49,4 @@ export function useMarquee<T extends HTMLElement>(): RefObject<T | null> {
 
   return ref;
 }
+

package/src/hooks/use-media-query.ts

@@ -12,3 +12,4 @@ export function useMediaQuery(query: string): boolean {
     () => false,
   );
 }
+

package/src/hooks/use-mobile.ts

@@ -17,3 +17,4 @@ export function useIsMobile() {
 
   return !!isMobile
 }
+

package/src/hooks/use-modifier-keys.ts

@@ -29,3 +29,4 @@ export function useModifierKeys(active = true): ModifierKeys {
   }, [active]);
   return keys;
 }
+

package/src/hooks/use-on-change.ts

@@ -33,3 +33,4 @@ export function useOnChange<T>(
     setPrev(value);
   }
 }
+

package/src/hooks/use-pane-keys.ts

@@ -26,3 +26,4 @@ export function usePaneKeys<T extends string>(
     return () => window.removeEventListener('keydown', onKey);
   }, [r, u, t, onSelect]);
 }
+

package/src/hooks/{sidebar.ts → use-sidebar.ts}

@@ -61,3 +61,4 @@ export function useAutoScroll(
       });
   }, [active, mode, ref]);
 }
+

package/src/hooks/use-swipe.ts

@@ -24,3 +24,4 @@ export function useSwipe(onSwipe: (dir: -1 | 1) => void) {
     },
   };
 }
+

package/src/hooks/use-tree.ts

@@ -18,7 +18,6 @@ export function useTreeContext(): TreeContextValue {
   return ctx;
 }
 
-
 export function useTabsGroups(tabs: TabOption[]): {
   active?: PageTree.Folder;
   options: TabOption[];
@@ -52,7 +51,6 @@ export function useTabsGroups(tabs: TabOption[]): {
   }, [tabs, tree, path]);
 }
 
-
 function collectTabs(
   scope: PageTree.Node[],
   active: PageTree.Folder,
@@ -80,7 +78,6 @@ function collectTabs(
 
 const footerCache = new WeakMap<PageTree.Root | PageTree.Folder, PageTree.Item[]>();
 
-
 export function useFooterItems(): PageTree.Item[] {
   const { root } = useTreeContext();
   const cached = footerCache.get(root);
@@ -100,3 +97,4 @@ export function useFooterItems(): PageTree.Item[] {
   footerCache.set(root, list);
   return list;
 }
+

package/src/hooks/viewer/use-in-float-bar.ts

@@ -4,3 +4,4 @@ import { createContext, useContext } from 'react';
 export const FloatBarContext = createContext(false);
 
 export const useInFloatBar = () => useContext(FloatBarContext);
+

package/src/hooks/viewer/use-viewer-prefs.ts

@@ -75,3 +75,4 @@ export function useViewerPrefs() {
     setSceneHeight,
   };
 }
+

package/src/lib/canvas/edge.ts

@@ -3,65 +3,31 @@ import type {
   FlowPoint,
 } from '@terrafirmagreg-team/ui/types/canvas';
 
-const CHEVRON_SPACING = 10;
+export const CHEVRON_SPACING = 10;
 const CHEVRON_SIZE = 3.5;
 
-const RUN_COS = Math.cos(Math.PI / 7);
+export const CHEVRON_GLYPH = `M${-CHEVRON_SIZE * 0.45} ${-CHEVRON_SIZE * 0.9}L${CHEVRON_SIZE} 0L${-CHEVRON_SIZE * 0.45} ${CHEVRON_SIZE * 0.9}`;
 
-export type ChevronRun = { d: string; shiftX: number; shiftY: number };
-
-export function chevronTicksAlongPath(
-  points: readonly FlowPoint[],
-): ChevronRun[] {
-  if (points.length < 2) return [];
-  const lens: number[] = [];
+export function chevronTicksAlongPath(points: readonly FlowPoint[]): {
+  offsets: number[];
+  total: number;
+} {
   let total = 0;
   for (let i = 0; i + 1 < points.length; i += 1) {
-    const len = Math.hypot(
+    total += Math.hypot(
       points[i + 1]!.x - points[i]!.x,
       points[i + 1]!.y - points[i]!.y,
     );
-    lens.push(len);
-    total += len;
   }
-  if (total < 2) return [];
-  const size = CHEVRON_SIZE;
-  const back = size * 0.45;
-  const wing = size * 0.9;
-  const runs: { ux: number; uy: number; parts: string[] }[] = [];
-  let run: (typeof runs)[0] | null = null;
-  let seg = 0;
-  let segStart = 0;
-  for (let d = CHEVRON_SPACING; d <= total; d += CHEVRON_SPACING) {
-    while (seg < lens.length && segStart + lens[seg]! < d) {
-      segStart += lens[seg]!;
-      seg += 1;
-    }
-    if (seg >= lens.length) break;
-    const len = lens[seg]!;
-    if (len < 0.001) continue;
-    const p0 = points[seg]!;
-    const p1 = points[seg + 1]!;
-    const t = (d - segStart) / len;
-    const ux = (p1.x - p0.x) / len;
-    const uy = (p1.y - p0.y) / len;
-    const cx = p0.x + (p1.x - p0.x) * t;
-    const cy = p0.y + (p1.y - p0.y) * t;
-    if (!run || ux * run.ux + uy * run.uy < RUN_COS) {
-      run = { ux, uy, parts: [] };
-      runs.push(run);
-    }
-    const px = -uy;
-    const py = ux;
-    run.parts.push(
-      `M${cx - ux * back + px * wing} ${cy - uy * back + py * wing}L${cx + ux * size} ${cy + uy * size}L${cx - ux * back - px * wing} ${cy - uy * back - py * wing}`,
-    );
+  const offsets: number[] = [];
+  for (
+    let d = CHEVRON_SPACING;
+    d <= total - CHEVRON_SPACING / 2;
+    d += CHEVRON_SPACING
+  ) {
+    offsets.push(d);
   }
-  return runs.map((entry) => ({
-    d: entry.parts.join(''),
-    shiftX: entry.ux * CHEVRON_SPACING,
-    shiftY: entry.uy * CHEVRON_SPACING,
-  }));
+  return { offsets, total };
 }
 
 export function svgPathToPoints(d: string, samples = 12): FlowPoint[] {
@@ -155,6 +121,66 @@ export function chamferedPolylinePath(
   return `${d}L${last.x} ${last.y}`;
 }
 
+export function roundedPolylinePath(
+  points: readonly FlowPoint[],
+  radius = 10,
+): string {
+  if (!points.length) return '';
+  if (points.length < 3) {
+    return `M${points[0]!.x} ${points[0]!.y}${points
+      .slice(1)
+      .map((p) => `L${p.x} ${p.y}`)
+      .join('')}`;
+  }
+  let d = `M${points[0]!.x} ${points[0]!.y}`;
+  let cursor = points[0]!;
+  for (let i = 1; i + 1 < points.length; i += 1) {
+    const corner = points[i]!;
+    const next = points[i + 1]!;
+    const inLen = Math.hypot(corner.x - cursor.x, corner.y - cursor.y);
+    const outLen = Math.hypot(next.x - corner.x, next.y - corner.y);
+    const take = Math.min(radius, inLen / 2, outLen / 2);
+    if (take < 0.5) {
+      d += `L${corner.x} ${corner.y}`;
+      cursor = corner;
+      continue;
+    }
+    const ax = corner.x - ((corner.x - cursor.x) / inLen) * take;
+    const ay = corner.y - ((corner.y - cursor.y) / inLen) * take;
+    const bx = corner.x + ((next.x - corner.x) / outLen) * take;
+    const by = corner.y + ((next.y - corner.y) / outLen) * take;
+    d += `L${ax} ${ay}Q${corner.x} ${corner.y} ${bx} ${by}`;
+    cursor = { x: bx, y: by };
+  }
+  const last = points[points.length - 1]!;
+  return `${d}L${last.x} ${last.y}`;
+}
+
+export function nearestPointOnPolyline(
+  points: readonly FlowPoint[],
+  p: FlowPoint,
+): FlowPoint {
+  let best = points[0]!;
+  let bestD = Infinity;
+  for (let i = 1; i < points.length; i += 1) {
+    const a = points[i - 1]!;
+    const b = points[i]!;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const len2 = dx * dx + dy * dy;
+    const t = len2
+      ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2))
+      : 0;
+    const q = { x: a.x + dx * t, y: a.y + dy * t };
+    const d = (q.x - p.x) ** 2 + (q.y - p.y) ** 2;
+    if (d < bestD) {
+      bestD = d;
+      best = q;
+    }
+  }
+  return best;
+}
+
 export function chevronHighlightClass(
   highlight: ChevronEdgeHighlight,
 ): string {
@@ -163,6 +189,8 @@ export function chevronHighlightClass(
       return 'chevron-edge--incoming';
     case 'outgoing':
       return 'chevron-edge--outgoing';
+    case 'dim':
+      return 'chevron-edge--dim';
     case undefined:
       return '';
     default: {
@@ -171,3 +199,4 @@ export function chevronHighlightClass(
     }
   }
 }
+

package/src/lib/canvas/geometry.ts

@@ -51,3 +51,4 @@ export function zoomToFitBox(
   );
   return Math.min(maxZoom, Math.max(minZoom, zoom));
 }
+

package/src/lib/canvas/state.ts

@@ -45,3 +45,4 @@ export function decorateFlowEdges<E extends Edge>(
     return { ...edge, data: { hidden, highlight } };
   });
 }
+

package/src/lib/canvas/viewport.ts

@@ -35,3 +35,4 @@ export function writeStoredViewport(
 
   }
 }
+

package/src/lib/canvas/xyflow.ts

@@ -1 +1,2 @@
 export * from '@xyflow/react';
+

package/src/lib/config.ts

@@ -22,6 +22,22 @@ export const DEFAULT_EXTERNAL_META_PROVIDERS: ExternalMetaProvider[] = [
     description: 'description',
     replace: [[/_/g, ' ']],
   },
+  {
+    host: /^github\.com$/i,
+    path: /^\/([^/]+)\/([^/?#]+)\/releases\/tag\/([^/?#]+)\/?$/,
+    url: 'https://api.github.com/repos/{1}/{2}/releases/tags/{3}',
+    kind: 'json',
+    title: 'name',
+    description: 'body',
+  },
+  {
+    host: /^github\.com$/i,
+    path: /^\/([^/]+)\/([^/?#]+)\/(?:issues|pull)\/([^/?#]+)\/?$/,
+    url: 'https://api.github.com/repos/{1}/{2}/issues/{3}',
+    kind: 'json',
+    title: 'title',
+    description: 'body',
+  },
   {
     host: /^github\.com$/i,
     path: /^\/([^/]+)\/([^/?#]+)\/?$/,
@@ -30,6 +46,14 @@ export const DEFAULT_EXTERNAL_META_PROVIDERS: ExternalMetaProvider[] = [
     title: 'full_name',
     description: 'description',
   },
+  {
+    host: /^github\.com$/i,
+    path: /^\/([^/?#]+)\/?$/,
+    url: 'https://api.github.com/users/{1}',
+    kind: 'json',
+    title: 'name',
+    description: 'bio',
+  },
   {
     host: /.*/,
     url: 'https://api.allorigins.win/raw?url={href}',
@@ -79,3 +103,4 @@ const { register: registerUiConfig, get: uiConfig } =
   createConfigRegistry<UiConfig>();
 
 export { registerUiConfig, uiConfig };
+

package/src/lib/mdx/callout.ts

@@ -18,3 +18,4 @@ export function calloutStyle(
 ): CSSProperties {
   return { '--callout-color': COLORS[type] ?? COLORS.info, ...style } as CSSProperties;
 }
+

package/src/lib/mdx/gradient.ts

@@ -13,3 +13,4 @@ export function gradientImage({
 }: GradientProps): string {
   return image ?? `linear-gradient(${dir}, ${from}, ${to})`;
 }
+

package/src/lib/mdx/mermaid.ts

@@ -12,3 +12,4 @@ export function renderMermaidChart(chart: string): string | null {
     return null;
   }
 }
+

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

@@ -74,3 +74,4 @@ export function cropOpaqueImageDataUrl(
   );
   return out.toDataURL('image/png');
 }
+

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

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

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

@@ -115,3 +115,4 @@ export function trimTransparent(src: string): Promise<string> {
     image.src = src;
   });
 }
+

package/src/lib/readability/config.ts

@@ -8,3 +8,4 @@ const { register: registerReadabilityConfig, get: readabilityConfig } =
   createConfigRegistry<ReadabilityConfig>();
 
 export { registerReadabilityConfig, readabilityConfig };
+

package/src/lib/readability/spotlight.ts

@@ -184,3 +184,4 @@ export function rowBand(
   const pr = parent.getBoundingClientRect();
   return { top, left: pr.left, width: pr.width, height: bottom - top };
 }
+

package/src/lib/readability/store.ts

@@ -144,3 +144,4 @@ export function clearState() {
   root.style.removeProperty('--page-width');
   root.style.removeProperty('--content-width');
 }
+

package/src/lib/tree.ts

@@ -7,7 +7,6 @@ export function normalizeUrl(url: string): string {
   return url;
 }
 
-
 export function findPath(
   nodes: PageTree.Node[],
   matcher: (node: PageTree.Node) => boolean,
@@ -45,7 +44,6 @@ export function findPath(
   return run(nodes) ?? null;
 }
 
-
 export function searchPath(
   nodes: PageTree.Node[],
   url: string,
@@ -57,7 +55,6 @@ export function searchPath(
   );
 }
 
-
 export function findProjection(
   from: PageTree.Folder,
   to: PageTree.Folder,
@@ -90,3 +87,4 @@ export function findProjection(
   }
   return projection;
 }
+

package/src/lib/utils/cn.ts

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

package/src/lib/utils/format.ts

@@ -1,8 +1,7 @@
-
-export function formatCount(value: number): string {
+export function formatCount(value: number, roundAt = 10_000): string {
   if (!Number.isFinite(value)) return String(value);
   const abs = Math.abs(value);
-  if (abs < 10_000) return String(Math.trunc(value));
+  if (abs < roundAt) return String(Math.trunc(value));
   const units: [number, string][] = [
     [1_000_000_000, 'B'],
     [1_000_000, 'M'],
@@ -20,3 +19,4 @@ export function formatCount(value: number): string {
   }
   return String(value);
 }
+

package/src/lib/utils/highlight-style.ts

@@ -0,0 +1,10 @@
+const injected = new Set<string>();
+
+export function injectHighlightStyle(name: string, css: string): void {
+  if (injected.has(name) || typeof document === 'undefined') return;
+  injected.add(name);
+  const style = document.createElement('style');
+  style.textContent = `::highlight(${name}){${css}}`;
+  document.head.appendChild(style);
+}
+

package/src/lib/utils/history.ts

@@ -7,3 +7,4 @@ export function replaceUrlState(href: string) {
 export function pushUrlState(href: string) {
   window.history.pushState(null, '', href);
 }
+

package/src/lib/utils/merge-refs.ts

@@ -11,3 +11,4 @@ export function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCa
     });
   };
 }
+

package/src/lib/utils/nav-active.ts

@@ -56,3 +56,4 @@ export function langScopeKey(
     id = id?.replaceAll(`:${lang}`, '').replaceAll(`/${lang}`, '');
   return id;
 }
+

package/src/lib/utils/stored-value.ts

@@ -134,3 +134,4 @@ export function numberCodec(
     write: (value) => String(clamp(value)),
   };
 }
+

package/src/lib/utils/urls.ts

@@ -1,5 +1,5 @@
 export function safeURL(value?: string): string | undefined {
-  // oxlint-disable-next-line no-control-regex
+
   if (!value || /[\u0000-\u0020\\]/.test(value)) return undefined;
   return /^(https?:\/\/|\/(?!\/)|#)/i.test(value) ? value : undefined;
 }
@@ -15,3 +15,4 @@ export function isActive(href: string, pathname: string, nested = false): boolea
 
   return href === pathname || (nested && pathname.startsWith(`${href}/`));
 }
+