cursedbelt 1.0.0 → 2.3.0

package/src/react/canvas/CanvasNavHUD.tsx

@@ -1,210 +0,0 @@
-import { Crosshair, Maximize2, Minus, Plus } from 'lucide-react';
-import { type PointerEvent as ReactPointerEvent, useCallback, useRef } from 'react';
-import { IconButton } from '../components/IconButton';
-import { Surface } from '../components/Surface';
-import { cn } from '../lib/cn';
-
-export interface CanvasRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface CanvasMinimapPoint {
-  x: number;
-  y: number;
-  /** A `--tone-*`/`--chart-*` CSS value. Defaults to the muted foreground. */
-  color?: string;
-  /** The focus node is drawn larger and on top. */
-  focus?: boolean;
-}
-
-export interface CanvasNavHUDProps {
-  /** "Fit to canvas size" — frame the whole graph. Required: it is the escape
-   *  hatch from being lost, and a canvas without one is the reported defect. */
-  onFit: () => void;
-  /** "Centre on the active focus node". Omit only if the canvas has no focus. */
-  onCenterFocus?: () => void;
-  /** Named in the centre control's hint, so it says WHAT it will centre on. */
-  focusLabel?: string;
-  /** Current zoom (1 = 100%). Renders the zoom cluster when `onZoomChange` is set. */
-  zoom?: number;
-  onZoomChange?: (zoom: number) => void;
-  /** Zoom bounds for the +/- controls. Default 0.1 – 4. */
-  zoomRange?: [number, number];
-  /** The whole graph's bounds, in world units. */
-  world?: CanvasRect;
-  /** What the user can currently see, in the same units. */
-  viewport?: CanvasRect;
-  /** Optional node dots for the radar. Keep it cheap — sample, don't map 10k nodes. */
-  points?: CanvasMinimapPoint[];
-  /** Click/drag the radar to jump. Receives world coordinates. */
-  onMinimapJump?: (point: { x: number; y: number }) => void;
-  /** Which corner the HUD floats in. Default `bottom-right`. */
-  corner?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  className?: string;
-}
-
-const CORNER_CLASS: Record<NonNullable<CanvasNavHUDProps['corner']>, string> = {
-  'top-left': 'top-3 left-3',
-  'top-right': 'top-3 right-3',
-  'bottom-left': 'bottom-3 left-3',
-  'bottom-right': 'bottom-3 right-3',
-};
-
-const MINIMAP_W = 132;
-const MINIMAP_H = 88;
-
-/**
- * The floating navigation HUD every infinite canvas must have.
- *
- * `DESIGN.md` §7: *"Every infinite panning or zooming canvas must include an
- * explicit floating Navigation HUD. The HUD must pack three essential controls: a
- * 'Fit to Canvas Size' trigger, a 'Center Canvas on Active Focus Node' tracking
- * action, and a low-opacity Radar Mini-Map positioned in a viewport corner
- * indicating active coordinate bounds."*
- *
- * Nothing shared implemented any of the three — `HudPill` is a pill, not a HUD —
- * so the family tree, the atlas, the orch lanes and fractals each had a different
- * partial answer or none. This is the one implementation.
- *
- * It is deliberately presentational: it owns no camera. The canvas keeps its own
- * transform and passes `world`/`viewport` in the SAME units, which is the only
- * contract the radar needs and the reason this works for an SVG tree and a WebGL
- * field alike. The controls sit in a `Surface` at `--z-sticky`, above the canvas
- * and below every overlay (`DESIGN.md` §5's containment rule), and every one of
- * them is a real 44×44 target on a coarse pointer via `IconButton`.
- */
-export function CanvasNavHUD({
-  onFit,
-  onCenterFocus,
-  focusLabel,
-  zoom,
-  onZoomChange,
-  zoomRange = [0.1, 4],
-  world,
-  viewport,
-  points,
-  onMinimapJump,
-  corner = 'bottom-right',
-  className,
-}: CanvasNavHUDProps) {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const [minZoom, maxZoom] = zoomRange;
-
-  const jump = useCallback(
-    (e: ReactPointerEvent<SVGSVGElement>) => {
-      if (!onMinimapJump || !world) return;
-      const box = svgRef.current?.getBoundingClientRect();
-      if (!box || box.width === 0 || box.height === 0) return;
-      const fx = (e.clientX - box.left) / box.width;
-      const fy = (e.clientY - box.top) / box.height;
-      onMinimapJump({ x: world.x + fx * world.width, y: world.y + fy * world.height });
-    },
-    [onMinimapJump, world],
-  );
-
-  const showRadar = Boolean(world && world.width > 0 && world.height > 0);
-  const scaleX = showRadar ? MINIMAP_W / (world as CanvasRect).width : 0;
-  const scaleY = showRadar ? MINIMAP_H / (world as CanvasRect).height : 0;
-  const toX = (x: number) => (x - (world as CanvasRect).x) * scaleX;
-  const toY = (y: number) => (y - (world as CanvasRect).y) * scaleY;
-
-  return (
-    <Surface
-      level='overlay'
-      pad='none'
-      className={cn(
-        'pointer-events-auto absolute z-[var(--z-sticky)] flex flex-col gap-2 rounded-lg p-2',
-        // Low-opacity by default so it never competes with the graph, full presence
-        // the moment the pointer or the keyboard is anywhere near it.
-        'opacity-70 transition-opacity duration-[var(--duration-fast)] hover:opacity-100 focus-within:opacity-100',
-        CORNER_CLASS[corner],
-        className,
-      )}
-      data-cb-canvas-hud=''
-    >
-      <div className='flex items-center gap-1'>
-        <IconButton size='sm' label='Fit to canvas' onClick={onFit}>
-          <Maximize2 />
-        </IconButton>
-        {onCenterFocus ? (
-          <IconButton
-            size='sm'
-            label={focusLabel ? `Centre on ${focusLabel}` : 'Centre on the focused item'}
-            onClick={onCenterFocus}
-          >
-            <Crosshair />
-          </IconButton>
-        ) : null}
-        {onZoomChange ? (
-          <>
-            <IconButton
-              size='sm'
-              label='Zoom out'
-              disabled={zoom !== undefined && zoom <= minZoom}
-              onClick={() => onZoomChange(Math.max(minZoom, (zoom ?? 1) / 1.25))}
-            >
-              <Minus />
-            </IconButton>
-            <span className='min-w-10 text-center text-caption tabular-nums text-muted-foreground'>
-              {Math.round((zoom ?? 1) * 100)}%
-            </span>
-            <IconButton
-              size='sm'
-              label='Zoom in'
-              disabled={zoom !== undefined && zoom >= maxZoom}
-              onClick={() => onZoomChange(Math.min(maxZoom, (zoom ?? 1) * 1.25))}
-            >
-              <Plus />
-            </IconButton>
-          </>
-        ) : null}
-      </div>
-
-      {showRadar ? (
-        <svg
-          ref={svgRef}
-          role={onMinimapJump ? 'button' : 'img'}
-          aria-label={onMinimapJump ? 'Radar — click to jump' : 'Radar'}
-          tabIndex={onMinimapJump ? 0 : undefined}
-          width={MINIMAP_W}
-          height={MINIMAP_H}
-          viewBox={`0 0 ${MINIMAP_W} ${MINIMAP_H}`}
-          onPointerDown={jump}
-          className={cn(
-            'rounded border border-border bg-surface-sunken',
-            onMinimapJump && 'cursor-pointer',
-          )}
-        >
-          <title>Radar</title>
-          {(points ?? []).map((p, i) => (
-            <circle
-              // biome-ignore lint/suspicious/noArrayIndexKey: sampled dots have no stable identity
-              key={i}
-              cx={toX(p.x)}
-              cy={toY(p.y)}
-              r={p.focus ? 2.5 : 1.4}
-              fill={p.color ?? 'var(--muted-foreground)'}
-              opacity={p.focus ? 1 : 0.55}
-            />
-          ))}
-          {viewport ? (
-            <rect
-              x={toX(viewport.x)}
-              y={toY(viewport.y)}
-              width={Math.max(2, viewport.width * scaleX)}
-              height={Math.max(2, viewport.height * scaleY)}
-              fill='var(--accent)'
-              fillOpacity={0.12}
-              stroke='var(--accent)'
-              strokeWidth={1}
-              data-cb-hud-viewport=''
-            />
-          ) : null}
-        </svg>
-      ) : null}
-    </Surface>
-  );
-}

package/src/react/canvas/fitLabel.spec.ts

@@ -1,82 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-import { fitLabel } from './fitLabel';
-import { lodForNode, lodForZoom, lodShowsDetail, lodShowsText } from './lod';
-
-// A deterministic measurer: 6px per character at fontSize 12, scaling linearly.
-const measure = (t: string, size: number) => t.length * size * 0.5;
-
-describe('fitLabel — DESIGN.md §5, in the order the clause states', () => {
-  test('a name that fits is left alone', () => {
-    const fit = fitLabel('Ada Lovelace', { width: 200, fontSize: 12, measure });
-    expect(fit.lines).toEqual(['Ada Lovelace']);
-    expect(fit.strategy).toBe('as-is');
-    expect(fit.overflow).toBe(false);
-  });
-
-  test('middle names go before anything else does', () => {
-    // "Mary Anne Beth Sullivan" is 23 chars = 138px; "Mary Sullivan" is 13 = 78px.
-    const fit = fitLabel('Mary Anne Beth Sullivan', { width: 90, fontSize: 12, measure });
-    expect(fit.lines).toEqual(['Mary Sullivan']);
-    expect(fit.strategy).toBe('stripped');
-  });
-
-  test('then a clean second line, never a mid-word cut', () => {
-    const fit = fitLabel('Bartholomew Wickersham', { width: 80, fontSize: 12, measure });
-    expect(fit.lines.length).toBe(2);
-    expect(fit.lines.join(' ')).toBe('Bartholomew Wickersham');
-    // The load-bearing property: nothing is chopped.
-    for (const line of fit.lines) expect(line.endsWith('…')).toBe(false);
-  });
-
-  test('then the type scales down, in whole pixels', () => {
-    // 11 chars: 66px at 12, 55px at 10 — so it lands on 10 and stops there.
-    const fit = fitLabel('Bartholomew', { width: 58, fontSize: 12, measure });
-    expect(fit.strategy).toBe('scaled');
-    expect(Number.isInteger(fit.fontSize)).toBe(true);
-    expect(fit.fontSize).toBeLessThan(12);
-    expect(measure(fit.lines[0] as string, fit.fontSize)).toBeLessThanOrEqual(58);
-  });
-
-  test('the last rung is a first name and a last initial', () => {
-    // "Alexander Wickersham" is 20 chars and will not scale into 62px at the 10px
-    // floor; "Alexander W." is 12 chars = 60px, which does.
-    const fit = fitLabel('Alexander Wickersham', { width: 62, fontSize: 12, measure, maxLines: 1 });
-    expect(fit.lines).toEqual(['Alexander W.']);
-    expect(fit.strategy).toBe('initials');
-  });
-
-  test('a box too small for even that reports overflow, so the caller draws a glyph', () => {
-    const fit = fitLabel('Bartholomew Wickersham', { width: 4, fontSize: 12, measure });
-    expect(fit.overflow).toBe(true);
-    expect(fit.strategy).toBe('overflow');
-  });
-
-  test('empty and zero-width inputs do not throw', () => {
-    expect(fitLabel('', { width: 100, fontSize: 12 }).lines).toEqual(['']);
-    expect(fitLabel('x', { width: 0, fontSize: 12 }).overflow).toBe(true);
-  });
-});
-
-describe('lodForZoom — DESIGN.md §7 draws the line at 50%', () => {
-  test('full detail at 100%, names only in between, glyphs below half', () => {
-    expect(lodForZoom(1)).toBe('full');
-    expect(lodForZoom(0.6)).toBe('compact');
-    expect(lodForZoom(0.49)).toBe('glyph');
-  });
-
-  test('the 50% boundary itself still shows the name', () => {
-    expect(lodForZoom(0.5)).toBe('compact');
-    expect(lodShowsText(lodForZoom(0.5))).toBe(true);
-    expect(lodShowsDetail(lodForZoom(0.5))).toBe(false);
-  });
-
-  test('a hovered or focused node keeps its label at any zoom', () => {
-    // "until zoomed in OR HOVERED over" — the half that keeps a glyph field usable.
-    expect(lodForNode(0.1, false)).toBe('glyph');
-    expect(lodForNode(0.1, true)).toBe('full');
-  });
-
-  test('a nonsense zoom degrades to full detail rather than to nothing', () => {
-    expect(lodForZoom(Number.NaN)).toBe('full');
-  });
-});

package/src/react/canvas/fitLabel.ts

@@ -1,150 +0,0 @@
-/**
- * Fitting a human name into a node box without a harsh cut.
- *
- * `DESIGN.md` §5: *"Node diagrams, map elements, or tree visualizations displaying
- * user identities must never truncate names with harsh, broken text string cuts.
- * Use responsive font scaling, wrap long strings onto a clean second line, or
- * optimize middle-initial stripping to keep names human-readable."*
- *
- * That is three strategies in a stated order, and every canvas in the fleet was
- * improvising one of them (family's `TreeCanvas` does its own; the atlas does
- * none). This is the shared ladder, as a pure function with no DOM, so a `<text>`
- * in SVG, a 2D canvas and an absolutely-positioned `<div>` all fit labels the same
- * way and it can be tested without a browser.
- *
- * @see lodForZoom — below ~50% zoom the answer is not a smaller label, it is a glyph.
- */
-
-export type FitStrategy = 'as-is' | 'stripped' | 'wrapped' | 'scaled' | 'initials' | 'overflow';
-
-export interface FitLabelOptions {
-  /** Usable width of the node box, in px. */
-  width: number;
-  /** The size the label would like to be, in px. */
-  fontSize: number;
-  /** How many lines the box can hold. Default 2 — the "clean second line". */
-  maxLines?: number;
-  /** Never scale below this. Default 10px, which is `DESIGN.md` §4's floor minus
-   *  the two px a canvas label is allowed as a non-body-text glyph label. */
-  minFontSize?: number;
-  /**
-   * Width of `text` at `fontSize`. The default is a linear approximation
-   * (0.52em average advance, which is close for a UI sans at these sizes); a
-   * caller holding a real `CanvasRenderingContext2D` should pass `measureText`
-   * so the fit is exact.
-   */
-  measure?: (text: string, fontSize: number) => number;
-}
-
-export interface FittedLabel {
-  /** One entry per rendered line. Never empty. */
-  lines: string[];
-  /** The size to actually draw at. */
-  fontSize: number;
-  /** What the ladder had to do — surfaced so a caller can offer the full name in a
-   *  hint exactly when something was dropped, rather than always or never. */
-  strategy: FitStrategy;
-  /** True when even the last rung does not fit. Draw a glyph, not an ellipsis. */
-  overflow: boolean;
-}
-
-const defaultMeasure = (text: string, fontSize: number) => text.length * fontSize * 0.52;
-
-/** `Mary Anne Beth Sullivan` → `Mary Sullivan`; drops middles, keeps first + last. */
-function stripMiddles(parts: string[]): string[] {
-  if (parts.length <= 2) return parts;
-  return [parts[0] as string, parts[parts.length - 1] as string];
-}
-
-/** `Mary Sullivan` → `Mary S.` — the last rung before giving up on text entirely. */
-function toInitialForm(parts: string[]): string {
-  if (parts.length === 0) return '';
-  if (parts.length === 1) return parts[0] as string;
-  const first = parts[0] as string;
-  const last = parts[parts.length - 1] as string;
-  return `${first} ${last.charAt(0).toUpperCase()}.`;
-}
-
-/** Greedy word wrap into at most `maxLines`; returns null if it does not fit. */
-function wrap(
-  words: string[],
-  width: number,
-  fontSize: number,
-  maxLines: number,
-  measure: (t: string, s: number) => number,
-): string[] | null {
-  const lines: string[] = [];
-  let current = '';
-  for (const word of words) {
-    const candidate = current ? `${current} ${word}` : word;
-    if (measure(candidate, fontSize) <= width || !current) {
-      current = candidate;
-    } else {
-      lines.push(current);
-      current = word;
-      if (lines.length >= maxLines) return null;
-    }
-  }
-  if (current) lines.push(current);
-  if (lines.length === 0 || lines.length > maxLines) return null;
-  return lines.every((l) => measure(l, fontSize) <= width) ? lines : null;
-}
-
-/**
- * Fit `text` into `width`, in `DESIGN.md` §5's stated order: as-is → drop middle
- * names → wrap onto a second line → scale the type down → first name + last
- * initial → give up and tell the caller to draw a glyph.
- */
-export function fitLabel(text: string, options: FitLabelOptions): FittedLabel {
-  const {
-    width,
-    fontSize,
-    maxLines = 2,
-    minFontSize = 10,
-    measure = defaultMeasure,
-  } = options;
-  const clean = String(text ?? '').trim().replace(/\s+/g, ' ');
-  if (!clean) return { lines: [''], fontSize, strategy: 'as-is', overflow: false };
-  if (width <= 0) return { lines: [clean], fontSize, strategy: 'overflow', overflow: true };
-
-  if (measure(clean, fontSize) <= width) {
-    return { lines: [clean], fontSize, strategy: 'as-is', overflow: false };
-  }
-
-  const parts = clean.split(' ');
-  const stripped = stripMiddles(parts).join(' ');
-  if (stripped !== clean && measure(stripped, fontSize) <= width) {
-    return { lines: [stripped], fontSize, strategy: 'stripped', overflow: false };
-  }
-
-  if (maxLines > 1) {
-    const wrapped = wrap(stripped.split(' '), width, fontSize, maxLines, measure);
-    if (wrapped) {
-      return {
-        lines: wrapped,
-        fontSize,
-        strategy: stripped === clean ? 'wrapped' : 'stripped',
-        overflow: false,
-      };
-    }
-  }
-
-  // Scale down in whole pixels — a fractional ladder produces sizes that differ
-  // between two adjacent nodes by less than the eye can see, for no extra fit.
-  for (let size = fontSize - 1; size >= minFontSize; size--) {
-    const wrapped =
-      maxLines > 1
-        ? wrap(stripped.split(' '), width, size, maxLines, measure)
-        : measure(stripped, size) <= width
-          ? [stripped]
-          : null;
-    if (wrapped) return { lines: wrapped, fontSize: size, strategy: 'scaled', overflow: false };
-  }
-
-  const initials = toInitialForm(parts);
-  if (measure(initials, minFontSize) <= width) {
-    return { lines: [initials], fontSize: minFontSize, strategy: 'initials', overflow: false };
-  }
-
-  return { lines: [initials], fontSize: minFontSize, strategy: 'overflow', overflow: true };
-}

package/src/react/canvas/index.ts

@@ -1,15 +0,0 @@
-export {
-  CanvasNavHUD,
-  type CanvasMinimapPoint,
-  type CanvasNavHUDProps,
-  type CanvasRect,
-} from './CanvasNavHUD';
-export { fitLabel, type FitLabelOptions, type FittedLabel, type FitStrategy } from './fitLabel';
-export {
-  type CanvasLod,
-  lodForNode,
-  lodForZoom,
-  lodShowsDetail,
-  lodShowsText,
-  type LodThresholds,
-} from './lod';

package/src/react/canvas/lod.ts

@@ -1,53 +0,0 @@
-/**
- * Adaptive level of detail for an infinite canvas.
- *
- * `DESIGN.md` §7: *"Large-scale interactive graphs … must not render full textual
- * strings when zoomed out past 50%. Dynamically scale down information density:
- * collapse names or details entirely, displaying only clean geometric glyph nodes
- * or color-coded markers until zoomed in or hovered over."*
- *
- * `UX_STANDARDS.md` §3.1–§3.2 states the same thing as a principle — *"zooming out
- * changes the DESIGN, not the scale"* — and nothing in the fleet implemented it, so
- * every canvas shrinks its text into illegible grey fur instead. This is the shared
- * decision, kept as a pure function because the interesting part is the THRESHOLDS
- * and those must be identical in the tree, the atlas and the orch lanes.
- */
-
-/**
- * `full`    — name plus its secondary line, portraits, badges.
- * `compact` — the name only, at the node's own size.
- * `glyph`   — no text at all: a geometric marker, coloured by category. Labels
- *             come back on hover/focus, which is what keeps this navigable.
- */
-export type CanvasLod = 'full' | 'compact' | 'glyph';
-
-export interface LodThresholds {
-  /** At or above this zoom, everything is drawn. Default 0.75. */
-  full?: number;
-  /** At or above this zoom, the name survives. Default 0.5 — DESIGN.md §7's line. */
-  compact?: number;
-}
-
-/** The level of detail a canvas should draw at `zoom` (1 = 100%). */
-export function lodForZoom(zoom: number, thresholds: LodThresholds = {}): CanvasLod {
-  const full = thresholds.full ?? 0.75;
-  const compact = thresholds.compact ?? 0.5;
-  if (!Number.isFinite(zoom)) return 'full';
-  if (zoom >= full) return 'full';
-  if (zoom >= compact) return 'compact';
-  return 'glyph';
-}
-
-/** Whether a node at this level of detail should render any text at all. */
-export const lodShowsText = (lod: CanvasLod): boolean => lod !== 'glyph';
-
-/** Whether a node at this level of detail should render its secondary line. */
-export const lodShowsDetail = (lod: CanvasLod): boolean => lod === 'full';
-
-/**
- * A hovered or focused node always renders its label, whatever the zoom — that is
- * the "until zoomed in OR HOVERED over" half of the clause, and it is the thing
- * that keeps a glyph field usable rather than merely pretty.
- */
-export const lodForNode = (zoom: number, active: boolean, thresholds?: LodThresholds): CanvasLod =>
-  active ? 'full' : lodForZoom(zoom, thresholds);

package/src/react/seo/HeadProvider.tsx

@@ -1,67 +0,0 @@
-import type { HeadModel } from 'cwip/seo';
-import { createContext, type ReactNode, useContext, useEffect, useMemo } from 'react';
-import { applyHeadToDocument } from './applyHeadToDocument';
-
-export interface HeadProviderConfig {
-  // Applied under every route's model unless the route overrides the same field
-  // (route wins — see `useHead`).
-  default?: HeadModel;
-  siteUrl?: string;
-  titleTemplate?: string;
-}
-
-const HeadContext = createContext<HeadProviderConfig>({});
-
-export interface HeadProviderProps extends HeadProviderConfig {
-  children?: ReactNode;
-}
-
-// Provides the site-wide SEO defaults (base head + siteUrl + title template) that
-// every `useHead` call merges under its own model. Mount once near the app root.
-// Read the site-wide SEO config supplied by the nearest `HeadProvider` (siteUrl,
-// title template, base head). Returns `{}` when no provider is mounted, so a
-// consumer can fall back (e.g. to `window.location.origin`) without crashing.
-export const useHeadConfig = (): HeadProviderConfig => useContext(HeadContext);
-
-export const HeadProvider = ({ children, ...config }: HeadProviderProps) => {
-  const value = useMemo<HeadProviderConfig>(
-    () => ({
-      default: config.default,
-      siteUrl: config.siteUrl,
-      titleTemplate: config.titleTemplate,
-    }),
-    [config.default, config.siteUrl, config.titleTemplate],
-  );
-  return <HeadContext.Provider value={value}>{children}</HeadContext.Provider>;
-};
-
-const mergeHead = (
-  base: HeadModel | undefined,
-  model: HeadModel,
-  titleTemplate?: string,
-): HeadModel => ({
-  titleTemplate,
-  ...base,
-  ...model,
-});
-
-// Reconciles `document.head` for the CURRENT route. Merges the provider's default
-// head with `model` (model wins field-by-field), then applies it imperatively on
-// mount/update. SSR-safe — a no-op when `document` is unavailable.
-//
-// Multi-caller semantics (last-writer-wins): if more than one component calls
-// `useHead` while mounted at once, the effect that (re)runs LAST wins — its model
-// fully replaces the previously-applied managed tags, because `applyHeadToDocument`
-// removes any managed tag not present in the new render. Design routes so exactly
-// one component per active route calls `useHead`; a nested component that also
-// calls it will overwrite the route's head on every one of its own re-renders.
-export const useHead = (model: HeadModel): void => {
-  const config = useContext(HeadContext);
-  const merged = mergeHead(config.default, model, config.titleTemplate);
-  const serialized = JSON.stringify(merged);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    applyHeadToDocument(JSON.parse(serialized) as HeadModel);
-  }, [serialized]);
-};

package/src/react/seo/applyHeadToDocument.ts

@@ -1,73 +0,0 @@
-import { type HeadModel, renderHead, SEO_TAG_MARKER } from 'cwip/seo';
-
-// Applies a HeadModel to a live document: sets `document.title` and upserts the
-// managed <meta>/<link>/<script type="application/ld+json"> tags into <head>. Every
-// tag it creates or updates carries SEO_TAG_MARKER so a later call can find and
-// replace its own tags without ever touching app-authored markup, and so it can
-// remove a managed tag that is no longer present in the new model. Idempotent:
-// calling twice with the same model produces the same DOM, never duplicates.
-//
-// Built directly on cwip's `renderHead` output (a string of tags) so the client
-// reconciler and every other delivery mechanism (prerender/edge/server) stay in
-// sync on exactly what a HeadModel renders to — this module only does the DOM
-// diffing, not the serialization.
-export const applyHeadToDocument = (model: HeadModel, doc: Document = document): void => {
-  const html = renderHead(model, { marker: true });
-  const template = doc.createElement('template');
-  template.innerHTML = html;
-  const nextNodes = Array.from(template.content.childNodes).filter(
-    (node): node is Element => node.nodeType === 1,
-  );
-
-  const title = nextNodes.find((node) => node.tagName === 'TITLE');
-  doc.title = title?.textContent ?? doc.title;
-
-  const previouslyManaged = Array.from(doc.head.querySelectorAll(`[${SEO_TAG_MARKER}]`));
-  const stillPresent = new Set<Element>();
-
-  for (const node of nextNodes) {
-    if (node.tagName === 'TITLE') continue; // handled via doc.title above
-    const match = previouslyManaged.find(
-      (existing) => !stillPresent.has(existing) && isSameTag(existing, node),
-    );
-    if (match) {
-      copyAttributes(match, node);
-      match.textContent = node.textContent;
-      stillPresent.add(match);
-    } else {
-      const clone = node.cloneNode(true) as Element;
-      doc.head.appendChild(clone);
-      stillPresent.add(clone);
-    }
-  }
-
-  for (const existing of previouslyManaged) {
-    if (!stillPresent.has(existing)) existing.remove();
-  }
-};
-
-// Two tags are "the same" managed tag if they share a tag name and identifying key
-// (meta name/property, link rel+href, or — for scripts/title — just the tag name,
-// since a HeadModel carries at most one <title> and callers rarely emit more than
-// one ld+json script; multiple ld+json blocks are matched positionally by falling
-// through to a fresh append once earlier ones are claimed).
-const isSameTag = (a: Element, b: Element): boolean => {
-  if (a.tagName !== b.tagName) return false;
-  if (a.tagName === 'META') {
-    return (
-      identity(a, 'name') === identity(b, 'name') &&
-      identity(a, 'property') === identity(b, 'property')
-    );
-  }
-  if (a.tagName === 'LINK') {
-    return identity(a, 'rel') === identity(b, 'rel') && identity(a, 'href') === identity(b, 'href');
-  }
-  return true; // SCRIPT (ld+json) — matched positionally among managed scripts
-};
-
-const identity = (el: Element, attr: string): string => el.getAttribute(attr) ?? '';
-
-const copyAttributes = (target: Element, source: Element): void => {
-  for (const attr of Array.from(target.attributes)) target.removeAttribute(attr.name);
-  for (const attr of Array.from(source.attributes)) target.setAttribute(attr.name, attr.value);
-};

package/src/react/seo/index.ts

@@ -1,12 +0,0 @@
-// cursedbelt/react/seo — a tiny, react-helmet-style head manager keyed to cwip's
-// `HeadModel`. `HeadProvider` supplies site-wide defaults; a route calls `useHead`
-// once to own `document.head` for as long as it's mounted. Dedicated subpath so an
-// app that never touches SEO pays nothing for it.
-export { applyHeadToDocument } from './applyHeadToDocument';
-export {
-  HeadProvider,
-  type HeadProviderConfig,
-  type HeadProviderProps,
-  useHead,
-  useHeadConfig,
-} from './HeadProvider';