@docentjs/dom 0.4.0 → 0.5.0

package/dist/connector-D6Al4Deu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"connector-D6Al4Deu.cjs","names":[],"sources":["../src/connector.ts"],"sourcesContent":["/**\n * Drawn connectors between the popover and its target: the arrow styles other\n * than the default caret. Geometry is pure (tested without a browser); the\n * Connector class turns it into SVG inside the shadow root.\n */\n\nexport interface Point {\n  x: number\n  y: number\n}\n\nexport interface ConnectorPath {\n  d: string\n  /** SVG stroke-dasharray. Dashed paths fade in instead of drawing. */\n  dash?: string\n  width?: number\n  opacity?: number\n}\n\nexport interface ConnectorShape {\n  paths: ConnectorPath[]\n  /** Arrowhead (open chevron) at the target end. */\n  head?: string\n  /** Filled dot at the target end (`pin`). */\n  dot?: Point\n}\n\nimport type { ConnectorStyle } from './arrows'\n\nexport { arrowGap, CONNECTOR_STYLES, type ConnectorStyle, isConnector } from './arrows'\n\nconst r = (n: number) => Math.round(n * 10) / 10\nconst pt = (p: Point) => `${r(p.x)} ${r(p.y)}`\n\nfunction frame(a: Point, b: Point) {\n  const dx = b.x - a.x\n  const dy = b.y - a.y\n  const length = Math.hypot(dx, dy) || 1\n  const u = { x: dx / length, y: dy / length }\n  const n = { x: -u.y, y: u.x }\n  const at = (along: number, across: number): Point => ({\n    x: a.x + u.x * along + n.x * across,\n    y: a.y + u.y * along + n.y * across,\n  })\n  return { length, u, n, at }\n}\n\nfunction polyline(points: Point[]): string {\n  return points.map((p, i) => `${i ? 'L' : 'M'}${pt(p)}`).join('')\n}\n\n/** Open chevron at `tip`, pointing along `dir` (unit vector). */\nexport function arrowHead(tip: Point, dir: Point, size = 7): string {\n  const angle = 0.5\n  const back = (s: number) => ({\n    x: tip.x - size * (dir.x * Math.cos(angle) - s * dir.y * Math.sin(angle)),\n    y: tip.y - size * (dir.y * Math.cos(angle) + s * dir.x * Math.sin(angle)),\n  })\n  return `M${pt(back(1))}L${pt(tip)}L${pt(back(-1))}`\n}\n\nfunction unit(from: Point, to: Point): Point {\n  const l = Math.hypot(to.x - from.x, to.y - from.y) || 1\n  return { x: (to.x - from.x) / l, y: (to.y - from.y) / l }\n}\n\n/** Polyline with rounded interior corners. */\nfunction rounded(points: Point[], radius: number): string {\n  let d = `M${pt(points[0] as Point)}`\n  for (let i = 1; i < points.length - 1; i++) {\n    const p = points[i] as Point\n    const prev = points[i - 1] as Point\n    const next = points[i + 1] as Point\n    const inLen = Math.hypot(p.x - prev.x, p.y - prev.y)\n    const outLen = Math.hypot(next.x - p.x, next.y - p.y)\n    const c = Math.min(radius, inLen / 2, outLen / 2)\n    const a = unit(p, prev)\n    const b = unit(p, next)\n    d += `L${pt({ x: p.x + a.x * c, y: p.y + a.y * c })}Q${pt(p)} ${pt({ x: p.x + b.x * c, y: p.y + b.y * c })}`\n  }\n  return `${d}L${pt(points[points.length - 1] as Point)}`\n}\n\n/**\n * Paths for a connector from `from` (popover edge) to `to` (just outside the\n * target). `bend` flips curves to the other side (1 or -1).\n */\nexport function connectorShape(\n  style: ConnectorStyle,\n  from: Point,\n  to: Point,\n  bend = 1,\n): ConnectorShape {\n  const f = frame(from, to)\n  const L = f.length\n  const straight = `M${pt(from)}L${pt(to)}`\n  const head = (dir: Point) => arrowHead(to, dir)\n\n  switch (style) {\n    case 'line':\n      return { paths: [{ d: straight }], head: head(f.u) }\n    case 'dashed':\n      return { paths: [{ d: straight, dash: '5 5' }], head: head(f.u) }\n    case 'dotted':\n      return { paths: [{ d: straight, dash: '0 6', width: 2.4 }], head: head(f.u) }\n    case 'curve':\n    case 'curve-dashed': {\n      const c = f.at(L / 2, bend * L * 0.32)\n      const path: ConnectorPath = { d: `M${pt(from)}Q${pt(c)} ${pt(to)}` }\n      if (style === 'curve-dashed') path.dash = '5 5'\n      return { paths: [path], head: head(unit(c, to)) }\n    }\n    case 'squiggle': {\n      const steps = Math.max(24, Math.round(L / 2))\n      const wave = 15\n      const points: Point[] = []\n      for (let i = 0; i <= steps; i++) {\n        const t = i / steps\n        const envelope = Math.min(1, t * 5, (1 - t) * 5)\n        points.push(f.at(L * t, bend * 4.5 * envelope * Math.sin((2 * Math.PI * L * t) / wave)))\n      }\n      return {\n        paths: [{ d: polyline(points) }],\n        head: head(unit(points[points.length - 3] as Point, to)),\n      }\n    }\n    case 'loop': {\n      // A prolate cycloid: one small loop, then on to the target.\n      const R = Math.min(22, Math.max(9, L / 5.5))\n      const steps = 48\n      const points: Point[] = []\n      for (let i = 0; i <= steps; i++) {\n        const t = i / steps\n        points.push(\n          f.at(\n            L * t - R * Math.sin(2 * Math.PI * t),\n            bend * 0.75 * R * (1 - Math.cos(2 * Math.PI * t)),\n          ),\n        )\n      }\n      return {\n        paths: [{ d: polyline(points) }],\n        head: head(unit(points[points.length - 3] as Point, to)),\n      }\n    }\n    case 'elbow': {\n      const dx = to.x - from.x\n      const dy = to.y - from.y\n      if (Math.abs(dx) < 6 || Math.abs(dy) < 6) return { paths: [{ d: straight }], head: head(f.u) }\n      const vertical = Math.abs(dy) >= Math.abs(dx)\n      const points = vertical\n        ? [from, { x: from.x, y: from.y + dy / 2 }, { x: to.x, y: from.y + dy / 2 }, to]\n        : [from, { x: from.x + dx / 2, y: from.y }, { x: from.x + dx / 2, y: to.y }, to]\n      return { paths: [{ d: rounded(points, 10) }], head: head(unit(points[2] as Point, to)) }\n    }\n    case 'sketch': {\n      // Two slightly different strokes read as hand-drawn; deterministic, so it never flickers.\n      const c1 = f.at(L * 0.45, bend * L * 0.12)\n      const c2 = f.at(L * 0.55, bend * L * 0.04 - 3)\n      const start2 = f.at(2, 2)\n      const end2 = { x: to.x + f.n.x * 2, y: to.y + f.n.y * 2 }\n      return {\n        paths: [\n          { d: `M${pt(from)}Q${pt(c1)} ${pt(to)}` },\n          { d: `M${pt(start2)}Q${pt(c2)} ${pt(end2)}`, opacity: 0.55, width: 1.2 },\n        ],\n        head: `${head(unit(c1, to))}${arrowHead(end2, unit(c2, end2), 6.5)}`,\n      }\n    }\n    case 'pin': {\n      const end = f.at(Math.max(0, L - 4), 0)\n      return { paths: [{ d: `M${pt(from)}L${pt(end)}`, dash: '0 5', width: 2.2 }], dot: to }\n    }\n  }\n}\n\n/** Styles for the connector layer, injected into the shadow root when first used. */\nexport const CONNECTOR_STYLES_CSS = `\n/* Connectors: drawn arrows from the popover to the target. */\n.connector {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  color: var(--docent-connector, oklch(98% 0.004 285 / 0.92));\n}\n:host([data-overlay=\"none\"]) .connector { color: var(--docent-connector, var(--docent-accent)); }\n.connector .stroke {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.connector .dot { fill: currentColor; }\n.connector .dot-halo { fill: currentColor; opacity: 0.2; }\n/* Drawn after the popover settles, so the line never trails it. */\n.connector.animate .draw {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: docent-draw calc(var(--docent-duration) * 1.6) var(--docent-easing) var(--docent-duration) forwards;\n}\n.connector.animate .fade,\n.connector.animate .head {\n  opacity: 0;\n  animation: docent-fade var(--docent-duration) ease-out calc(var(--docent-duration) * 1.6) forwards;\n}\n@keyframes docent-draw { to { stroke-dashoffset: 0; } }\n@keyframes docent-fade { to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) {\n  .connector.animate .draw, .connector.animate .fade, .connector.animate .head { animation: none; stroke-dashoffset: 0; opacity: 1; }\n}\n`\n\nconst SVG_NS = 'http://www.w3.org/2000/svg'\n\n/** SVG layer in the shadow root that draws the current connector. */\nexport class Connector {\n  readonly el: SVGSVGElement\n  private readonly doc: Document\n\n  constructor(doc: Document) {\n    this.doc = doc\n    this.el = doc.createElementNS(SVG_NS, 'svg')\n    this.el.setAttribute('class', 'connector')\n    this.el.setAttribute('part', 'connector')\n    this.el.setAttribute('aria-hidden', 'true')\n  }\n\n  clear(): void {\n    this.el.replaceChildren()\n  }\n\n  /** Draw a shape. `animate` plays the draw-in (after the popover settles). */\n  render(shape: ConnectorShape, animate: boolean): void {\n    const make = (d: string, cls: string) => {\n      const path = this.doc.createElementNS(SVG_NS, 'path')\n      path.setAttribute('d', d)\n      path.setAttribute('class', cls)\n      return path\n    }\n    const nodes: SVGElement[] = shape.paths.map((p) => {\n      const path = make(p.d, p.dash ? 'stroke fade' : 'stroke draw')\n      if (p.dash) path.setAttribute('stroke-dasharray', p.dash)\n      // Solid strokes draw on by animating a normalised dash.\n      else path.setAttribute('pathLength', '1')\n      if (p.width) path.setAttribute('stroke-width', String(p.width))\n      if (p.opacity) path.setAttribute('opacity', String(p.opacity))\n      return path\n    })\n    if (shape.head) nodes.push(make(shape.head, 'stroke head'))\n    if (shape.dot) {\n      for (const [radius, cls] of [\n        [8, 'dot-halo'],\n        [3.5, 'dot'],\n      ] as const) {\n        const c = this.doc.createElementNS(SVG_NS, 'circle')\n        c.setAttribute('cx', String(shape.dot.x))\n        c.setAttribute('cy', String(shape.dot.y))\n        c.setAttribute('r', String(radius))\n        c.setAttribute('class', `${cls} head`)\n        nodes.push(c)\n      }\n    }\n    this.el.classList.toggle('animate', animate)\n    this.el.replaceChildren(...nodes)\n  }\n}\n"],"mappings":"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"}

package/dist/index.cjs

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_arrows = require("./arrows-DdDu3O3y.cjs");
 let _docentjs_core = require("@docentjs/core");
 //#region src/content.ts
 const SAFE_SCHEMES = /* @__PURE__ */ new Set([
@@ -267,16 +268,41 @@ function clipToViewport(rect, viewport) {
 }
 //#endregion
 //#region src/overlay.ts
-/**
-* Full-viewport backdrop with a rounded cutout. The cutout is a `clip-path`
-* so pointer events pass through the hole to the page for free; a separate
-* blocker element covers it when the step forbids interaction.
-*/
 function holePath(viewport, hole, radius) {
 	const r = Math.max(0, Math.min(radius, hole.width / 2, hole.height / 2));
 	const { x, y, width: w, height: h } = hole;
 	return `path(evenodd, "${`M0 0H${viewport.width}V${viewport.height}H0Z`}${`M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`}")`;
 }
+/** The padded cutout and its corner radius for a shape. */
+function holeFor(target, padding, radius, shape = "rounded") {
+	if (shape === "circle") {
+		const cx = target.x + target.width / 2;
+		const cy = target.y + target.height / 2;
+		const rr = Math.hypot(target.width, target.height) / 2 + padding;
+		return {
+			hole: {
+				x: cx - rr,
+				y: cy - rr,
+				width: rr * 2,
+				height: rr * 2
+			},
+			radius: rr
+		};
+	}
+	const hole = inflate(target, padding);
+	if (shape === "rect") return {
+		hole,
+		radius: 0
+	};
+	if (shape === "pill") return {
+		hole,
+		radius: Math.min(hole.width, hole.height) / 2
+	};
+	return {
+		hole,
+		radius: Math.max(0, Math.min(radius, hole.width / 2, hole.height / 2))
+	};
+}
 var Overlay = class {
 	el;
 	blocker;
@@ -309,13 +335,13 @@ var Overlay = class {
 	get hole() {
 		return this.lastHole;
 	}
-	update(viewport, { target, padding, radius }, block) {
-		if (target) this.lastHole = inflate(target, padding);
-		else {
+	update(viewport, { target, padding, radius, shape }, block) {
+		if (!target) {
 			const c = this.lastHole;
 			const cx = c ? c.x + c.width / 2 : viewport.width / 2;
 			const cy = c ? c.y + c.height / 2 : viewport.height / 2;
 			this.lastHole = null;
+			this.setCentre(cx, cy);
 			this.el.style.clipPath = holePath(viewport, {
 				x: cx,
 				y: cy,
@@ -331,9 +357,11 @@ var Overlay = class {
 			this.blocker.hidden = true;
 			return;
 		}
-		const hole = this.lastHole;
-		this.el.style.clipPath = holePath(viewport, hole, radius);
-		this.placeRing(hole, Math.max(0, Math.min(radius, hole.width / 2, hole.height / 2)), true);
+		const { hole, radius: r } = holeFor(target, padding, radius, shape);
+		this.lastHole = hole;
+		this.setCentre(hole.x + hole.width / 2, hole.y + hole.height / 2);
+		this.el.style.clipPath = holePath(viewport, hole, r);
+		this.placeRing(hole, r, true);
 		this.blocker.hidden = !block;
 		if (block) {
 			this.blocker.style.transform = `translate(${hole.x}px, ${hole.y}px)`;
@@ -341,6 +369,11 @@ var Overlay = class {
 			this.blocker.style.height = `${hole.height}px`;
 		}
 	}
+	/** Exposed for the vignette style, which is centred on the cutout. */
+	setCentre(x, y) {
+		this.el.style.setProperty("--docent-hole-x", `${Math.round(x)}px`);
+		this.el.style.setProperty("--docent-hole-y", `${Math.round(y)}px`);
+	}
 };
 //#endregion
 //#region src/popover.ts
@@ -540,7 +573,7 @@ function buildHeadlessShell(doc) {
 * are ink tinted toward the Docent hue (OKLCH 285). Light is the default;
 * dark is opt-in through tokens or the `dark` preset.
 */
-const STYLES = `:host{--docent-bg:oklch(99.4% 0.003 285);--docent-fg:oklch(23% 0.018 285);--docent-muted:oklch(52% 0.014 285);--docent-accent:oklch(26% 0.02 285);--docent-accent-fg:oklch(98.5% 0.004 285);--docent-radius:14px;--docent-shadow:0 1px 2px oklch(23% 0.02 285 / 0.06),0 8px 24px -6px oklch(23% 0.02 285 / 0.16),0 28px 56px -16px oklch(23% 0.02 285 / 0.24);--docent-width:344px;--docent-overlay:oklch(20% 0.02 285);--docent-overlay-opacity:0.52;--docent-duration:220ms;--docent-easing:cubic-bezier(0.2,0.8,0.2,1);--_line:color-mix(in oklch,var(--docent-fg) 11%,transparent);--_soft:color-mix(in oklch,var(--docent-fg) 6%,transparent);--_body:color-mix(in oklch,var(--docent-fg) 80%,var(--docent-bg));position:fixed;inset:0;z-index:var(--docent-z,2147483000);pointer-events:none;color:var(--docent-fg);font-family:var(--docent-font);font-size:14px;font-weight:400;font-style:normal;line-height:1.55;letter-spacing:normal;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}.overlay{position:absolute;inset:0;background:var(--docent-overlay);opacity:var(--docent-overlay-opacity);pointer-events:auto;transition:clip-path var(--docent-duration) var(--docent-easing)}.blocker{position:absolute;left:0;top:0;pointer-events:auto}.ring{position:absolute;left:0;top:0;pointer-events:none;box-shadow:0 0 0 1px oklch(98% 0.004 285 / 0.58),0 0 0 6px oklch(98% 0.004 285 / 0.08);transition:transform var(--docent-duration) var(--docent-easing),width var(--docent-duration) var(--docent-easing),height var(--docent-duration) var(--docent-easing),border-radius var(--docent-duration) var(--docent-easing),opacity var(--docent-duration) var(--docent-easing)}.popover{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:var(--docent-width);max-width:calc(100vw - 32px);padding:20px 20px 16px;background:var(--docent-bg);border-radius:var(--docent-radius);box-shadow:0 0 0 1px var(--_line),var(--docent-shadow);pointer-events:auto;outline:none;transition:transform var(--docent-duration) var(--docent-easing),opacity var(--docent-duration) var(--docent-easing),scale var(--docent-duration) var(--docent-easing)}.popover[data-side="bottom"]{transform-origin:50% 0}.popover[data-side="top"]{transform-origin:50% 100%}.popover[data-side="right"]{transform-origin:0 50%}.popover[data-side="left"]{transform-origin:100% 50%}.popover[data-entering]{opacity:0;scale:0.97;transition:none}.popover[data-moving]>*{animation:docent-swap 160ms ease-out}@keyframes docent-swap{from{opacity:0}to{opacity:1}}.popover.headless{width:auto;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0}.arrow{position:absolute;width:12px;height:12px;background:var(--docent-bg);transform:rotate(45deg)}.popover[data-side="bottom"] .arrow{top:-6px;border-top:1px solid var(--_line);border-left:1px solid var(--_line);border-top-left-radius:2px}.popover[data-side="top"] .arrow{bottom:-6px;border-bottom:1px solid var(--_line);border-right:1px solid var(--_line);border-bottom-right-radius:2px}.popover[data-side="right"] .arrow{left:-6px;border-bottom:1px solid var(--_line);border-left:1px solid var(--_line);border-bottom-left-radius:2px}.popover[data-side="left"] .arrow{right:-6px;border-top:1px solid var(--_line);border-right:1px solid var(--_line);border-top-right-radius:2px}.popover[data-side="center"] .arrow,.popover[data-side="sheet"] .arrow{display:none}.header{display:flex;align-items:flex-start;gap:12px}.title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-0.012em;color:var(--docent-fg);text-wrap:balance}.close{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-3px -8px -3px 0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--docent-muted);cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out}.close svg{width:14px;height:14px}.close:hover{background:var(--_soft);color:var(--docent-fg)}.body{margin-top:6px;color:var(--_body);text-wrap:pretty}.body p{margin:0}.body p + p{margin-top:8px}.body strong{font-weight:600;color:var(--docent-fg)}.body a{color:var(--docent-fg);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--docent-fg) 32%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color 120ms ease-out}.body a:hover{text-decoration-color:currentColor}.body code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:0.88em;padding:1px 5px;border-radius:5px;background:var(--_soft);color:var(--docent-fg)}.media{margin-top:14px}.media img,.media video{display:block;width:100%;border-radius:8px;box-shadow:0 0 0 1px var(--_line)}.footer{display:flex;align-items:center;gap:12px;margin-top:20px}.progress{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--docent-muted);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0.01em;white-space:nowrap}.meter{flex:none;width:28px;height:3px;border-radius:999px;background:linear-gradient(var(--docent-fg),var(--docent-fg)) 0 0 / calc(var(--docent-step) / var(--docent-steps) * 100%) 100% no-repeat,var(--_line)}.buttons{display:flex;align-items:center;gap:6px}.button{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--docent-fg);font:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:-0.003em;white-space:nowrap;cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out,scale 80ms ease-out}.button:hover{background:var(--_soft)}.button:active{scale:0.97}[part~="button-skip"]{color:var(--docent-muted);padding:0 8px}[part~="button-skip"]:hover{color:var(--docent-fg);background:transparent}.button.primary{padding:0 14px;background:var(--docent-accent);color:var(--docent-accent-fg);font-weight:600;box-shadow:inset 0 1px 0 color-mix(in oklch,var(--docent-accent-fg) 14%,transparent)}.button.primary .icon{width:12px;height:12px;margin:0 -2px 0 6px;transition:translate 160ms var(--docent-easing)}.button.primary:hover .icon{translate:2px 0}.button.primary:hover{background:color-mix(in oklch,var(--docent-accent) 86%,var(--docent-accent-fg))}.button:focus-visible,.close:focus-visible{outline:2px solid var(--docent-accent);outline-offset:2px}.popover.sheet{max-width:none;padding:20px 20px max(16px,env(safe-area-inset-bottom));border-radius:var(--docent-radius) var(--docent-radius) 0 0;box-shadow:0 0 0 1px var(--_line),0 -12px 40px -12px oklch(23% 0.02 285 / 0.28)}@media (pointer:coarse){:host{font-size:15px}.button{min-height:44px;padding:0 16px;font-size:14px}.close{width:40px;height:40px;margin:-9px -12px -9px 0}}@media (prefers-reduced-motion:reduce){.overlay,.popover,.ring{transition:none}.popover[data-moving]>*{animation:none}}`;
+const STYLES = `:host{--docent-bg:oklch(99.4% 0.003 285);--docent-fg:oklch(23% 0.018 285);--docent-muted:oklch(52% 0.014 285);--docent-accent:oklch(26% 0.02 285);--docent-accent-fg:oklch(98.5% 0.004 285);--docent-radius:14px;--docent-shadow:0 1px 2px oklch(23% 0.02 285 / 0.06),0 8px 24px -6px oklch(23% 0.02 285 / 0.16),0 28px 56px -16px oklch(23% 0.02 285 / 0.24);--docent-width:344px;--docent-overlay:oklch(20% 0.02 285);--docent-overlay-opacity:0.52;--docent-duration:220ms;--docent-easing:cubic-bezier(0.2,0.8,0.2,1);--_line:color-mix(in oklch,var(--docent-fg) 11%,transparent);--_soft:color-mix(in oklch,var(--docent-fg) 6%,transparent);--_body:color-mix(in oklch,var(--docent-fg) 80%,var(--docent-bg));position:fixed;inset:0;z-index:var(--docent-z,2147483000);pointer-events:none;color:var(--docent-fg);font-family:var(--docent-font);font-size:14px;font-weight:400;font-style:normal;line-height:1.55;letter-spacing:normal;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}.overlay{--_scrim:color-mix(in oklch,var(--docent-overlay) calc(var(--docent-overlay-opacity) * 100%),transparent);position:absolute;inset:0;background:var(--_scrim);pointer-events:auto;transition:clip-path var(--docent-duration) var(--docent-easing)}:host([data-overlay="blur"]) .overlay{-webkit-backdrop-filter:blur(var(--docent-blur,4px));backdrop-filter:blur(var(--docent-blur,4px))}:host([data-overlay="vignette"]) .overlay{background:radial-gradient( circle at var(--docent-hole-x,50%) var(--docent-hole-y,50%),transparent 0,color-mix(in oklch,var(--docent-overlay) calc(var(--docent-overlay-opacity) * 30%),transparent) 22%,var(--_scrim) 78% )}:host([data-overlay="none"]) .overlay{background:transparent;pointer-events:none}.blocker{position:absolute;left:0;top:0;pointer-events:auto}.ring{position:absolute;left:0;top:0;pointer-events:none;color:var(--docent-ring,oklch(98% 0.004 285));box-shadow:0 0 0 1px color-mix(in oklch,currentColor 58%,transparent),0 0 0 6px color-mix(in oklch,currentColor 8%,transparent);transition:transform var(--docent-duration) var(--docent-easing),width var(--docent-duration) var(--docent-easing),height var(--docent-duration) var(--docent-easing),border-radius var(--docent-duration) var(--docent-easing),opacity var(--docent-duration) var(--docent-easing)}:host([data-overlay="none"]) .ring{color:var(--docent-ring,var(--docent-accent))}:host([data-ring="none"]) .ring{box-shadow:none}:host([data-ring="glow"]) .ring{box-shadow:0 0 0 1.5px color-mix(in oklch,currentColor 85%,transparent),0 0 20px 4px color-mix(in oklch,currentColor 42%,transparent)}:host([data-ring="solid"]) .ring{box-shadow:0 0 0 2px currentColor}:host([data-ring="dashed"]) .ring{box-shadow:none;outline:1.5px dashed color-mix(in oklch,currentColor 85%,transparent);outline-offset:3px}:host([data-ring="pulse"]) .ring::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:docent-pulse 1.8s var(--docent-easing) infinite}@keyframes docent-pulse{from{box-shadow:0 0 0 0 color-mix(in oklch,currentColor 60%,transparent)}to{box-shadow:0 0 0 14px transparent}}:host(:not([data-arrow="caret"])) .arrow{display:none}:host([data-tracking]) .overlay,:host([data-tracking]) .ring,:host([data-tracking]) .popover{transition:none}.popover{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:var(--docent-width);max-width:calc(100vw - 32px);padding:20px 20px 16px;background:var(--docent-bg);border-radius:var(--docent-radius);box-shadow:0 0 0 1px var(--_line),var(--docent-shadow);pointer-events:auto;outline:none;transition:transform var(--docent-duration) var(--docent-easing),opacity var(--docent-duration) var(--docent-easing),scale var(--docent-duration) var(--docent-easing)}.popover[data-side="bottom"]{transform-origin:50% 0}.popover[data-side="top"]{transform-origin:50% 100%}.popover[data-side="right"]{transform-origin:0 50%}.popover[data-side="left"]{transform-origin:100% 50%}.popover[data-entering]{opacity:0;scale:0.97;transition:none}.popover[data-moving]>*{animation:docent-swap 160ms ease-out}@keyframes docent-swap{from{opacity:0}to{opacity:1}}.popover.headless{width:auto;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0}.arrow{position:absolute;width:12px;height:12px;background:var(--docent-bg);transform:rotate(45deg)}.popover[data-side="bottom"] .arrow{top:-6px;border-top:1px solid var(--_line);border-left:1px solid var(--_line);border-top-left-radius:2px}.popover[data-side="top"] .arrow{bottom:-6px;border-bottom:1px solid var(--_line);border-right:1px solid var(--_line);border-bottom-right-radius:2px}.popover[data-side="right"] .arrow{left:-6px;border-bottom:1px solid var(--_line);border-left:1px solid var(--_line);border-bottom-left-radius:2px}.popover[data-side="left"] .arrow{right:-6px;border-top:1px solid var(--_line);border-right:1px solid var(--_line);border-top-right-radius:2px}.popover[data-side="center"] .arrow,.popover[data-side="sheet"] .arrow{display:none}.header{display:flex;align-items:flex-start;gap:12px}.title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-0.012em;color:var(--docent-fg);text-wrap:balance}.close{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-3px -8px -3px 0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--docent-muted);cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out}.close svg{width:14px;height:14px}.close:hover{background:var(--_soft);color:var(--docent-fg)}.body{margin-top:6px;color:var(--_body);text-wrap:pretty}.body p{margin:0}.body p + p{margin-top:8px}.body strong{font-weight:600;color:var(--docent-fg)}.body a{color:var(--docent-fg);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--docent-fg) 32%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color 120ms ease-out}.body a:hover{text-decoration-color:currentColor}.body code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:0.88em;padding:1px 5px;border-radius:5px;background:var(--_soft);color:var(--docent-fg)}.media{margin-top:14px}.media img,.media video{display:block;width:100%;border-radius:8px;box-shadow:0 0 0 1px var(--_line)}.footer{display:flex;align-items:center;gap:12px;margin-top:20px}.progress{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--docent-muted);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0.01em;white-space:nowrap}.meter{flex:none;width:28px;height:3px;border-radius:999px;background:linear-gradient(var(--docent-fg),var(--docent-fg)) 0 0 / calc(var(--docent-step) / var(--docent-steps) * 100%) 100% no-repeat,var(--_line)}.buttons{display:flex;align-items:center;gap:6px}.button{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--docent-fg);font:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:-0.003em;white-space:nowrap;cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out,scale 80ms ease-out}.button:hover{background:var(--_soft)}.button:active{scale:0.97}[part~="button-skip"]{color:var(--docent-muted);padding:0 8px}[part~="button-skip"]:hover{color:var(--docent-fg);background:transparent}.button.primary{padding:0 14px;background:var(--docent-accent);color:var(--docent-accent-fg);font-weight:600;box-shadow:inset 0 1px 0 color-mix(in oklch,var(--docent-accent-fg) 14%,transparent)}.button.primary .icon{width:12px;height:12px;margin:0 -2px 0 6px;transition:translate 160ms var(--docent-easing)}.button.primary:hover .icon{translate:2px 0}.button.primary:hover{background:color-mix(in oklch,var(--docent-accent) 86%,var(--docent-accent-fg))}.button:focus-visible,.close:focus-visible{outline:2px solid var(--docent-accent);outline-offset:2px}.popover.sheet{max-width:none;padding:20px 20px max(16px,env(safe-area-inset-bottom));border-radius:var(--docent-radius) var(--docent-radius) 0 0;box-shadow:0 0 0 1px var(--_line),0 -12px 40px -12px oklch(23% 0.02 285 / 0.28)}@media (pointer:coarse){:host{font-size:15px}.button{min-height:44px;padding:0 16px;font-size:14px}.close{width:40px;height:40px;margin:-9px -12px -9px 0}}@media (prefers-reduced-motion:reduce){.overlay,.popover,.ring{transition:none}.ring::after{animation:none !important}.popover[data-moving]>*{animation:none}}`;
 //#endregion
 //#region src/target.ts
 /** Attribute that `{ name }` targets resolve through. */
@@ -641,7 +674,9 @@ const THEME_VARS = {
 	overlay: "overlay",
 	overlayOpacity: "overlay-opacity",
 	duration: "duration",
-	zIndex: "z"
+	zIndex: "z",
+	connector: "connector",
+	ring: "ring"
 };
 /** Write theme tokens as inline custom properties on an element. Clears unset ones. */
 function applyTheme(el, theme) {
@@ -657,6 +692,11 @@ function mergeThemes(...themes) {
 }
 //#endregion
 //#region src/renderer.ts
+const DEFAULT_LOOK = {
+	arrow: "caret",
+	spotlight: {},
+	overlay: {}
+};
 const FOCUSABLE = "a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
 var DomRenderer = class {
 	doc;
@@ -675,6 +715,17 @@ var DomRenderer = class {
 	previousFocus = null;
 	/** Set once per step after the sheet has scrolled the target clear. */
 	sheetAdjusted = false;
+	connector;
+	/** Loaded on first use: connector styles cost nothing for tours that never use them. */
+	connectorModule;
+	connectorLoading;
+	/** Arrow, spotlight and overlay settings for the current step. */
+	look = DEFAULT_LOOK;
+	/** Until then the step's own transition runs; scroll updates may animate. */
+	settleUntil = 0;
+	/** Play the connector draw-in on its next render. */
+	drawConnector = false;
+	trackingFrame;
 	constructor(options = {}) {
 		this.options = options;
 		this.doc = options.document ?? document;
@@ -702,6 +753,9 @@ var DomRenderer = class {
 		const template = this.template(ctx);
 		applyTheme(host, mergeThemes(this.options.theme, template?.theme, ctx.tour.options?.theme));
 		this.setTemplateCss(template?.css);
+		this.applyLook(host, this.resolveLook(ctx, template));
+		this.settleUntil = performance.now() + this.duration(host) * 1.5;
+		this.drawConnector = true;
 		const initialFocus = this.options.headless ? this.buildHeadless(ctx, host, this.options.headless) : this.buildDefault(ctx, host, template);
 		if (this.popover && from) {
 			this.popover.style.transform = from;
@@ -732,31 +786,34 @@ var DomRenderer = class {
 			this.host = void 0;
 			this.shadow = void 0;
 			this.overlay = void 0;
+			this.connector = void 0;
 			this.templateStyle = void 0;
 		}
 		const prev = this.previousFocus;
 		this.previousFocus = null;
 		if (prev instanceof HTMLElement && prev.isConnected) prev.focus({ preventScroll: true });
 	}
-	/** Re-measure and re-position everything. Safe to call often. */
-	update() {
+	/**
+	* Re-measure and re-position everything. Safe to call often. `tracking`
+	* marks updates caused by scroll or resize: once the step's own transition
+	* has finished, those follow the target instantly instead of trailing it.
+	*/
+	update(tracking = false) {
 		const ctx = this.ctx;
 		const overlay = this.overlay;
 		const popover = this.popover;
 		const win = this.doc.defaultView;
 		if (!ctx || !overlay || !popover || !win) return;
+		if (tracking && performance.now() > this.settleUntil) this.markTracking();
 		const viewport = this.viewport();
 		const overlaySize = {
 			width: overlay.el.offsetWidth,
 			height: overlay.el.offsetHeight
 		};
-		const spotlight = {
-			...this.options.spotlight,
-			...ctx.tour.options?.spotlight,
-			...ctx.step.spotlight
-		};
+		const spotlight = this.look.spotlight;
 		const padding = spotlight.padding ?? 8;
 		const radius = spotlight.radius ?? 10;
+		const shape = spotlight.shape ?? "rounded";
 		const external = this.headlessContainer;
 		const sheet = this.isSheet(viewport);
 		popover.classList.toggle("sheet", sheet);
@@ -770,8 +827,10 @@ var DomRenderer = class {
 			overlay.update(overlaySize, {
 				target: rect,
 				padding,
-				radius
+				radius,
+				shape
 			}, this.blocksInteraction(ctx.step));
+			this.connector?.clear();
 			const vx = viewport.x ?? 0;
 			const top = (viewport.y ?? 0) + viewport.height - floating.height;
 			popover.style.transform = `translate(${vx}px, ${top}px)`;
@@ -786,6 +845,7 @@ var DomRenderer = class {
 				padding,
 				radius
 			}, false);
+			this.connector?.clear();
 			const { x, y } = centerPosition(floating, viewport);
 			popover.style.transform = `translate(${x}px, ${y}px)`;
 			popover.setAttribute("data-side", "center");
@@ -796,14 +856,16 @@ var DomRenderer = class {
 		overlay.update(overlaySize, {
 			target: rect,
 			padding,
-			radius
+			radius,
+			shape
 		}, this.blocksInteraction(ctx.step));
+		const hole = overlay.hole ?? rect;
 		const pos = computePosition({
-			anchor: clipToViewport(overlay.hole ?? rect, viewport),
+			anchor: clipToViewport(hole, viewport),
 			floating,
 			viewport,
 			placement: ctx.step.placement ?? "auto",
-			gap: this.options.gap ?? 12
+			gap: this.options.gap ?? require_arrows.arrowGap(this.look.arrow)
 		});
 		popover.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
 		popover.setAttribute("data-side", pos.side);
@@ -816,6 +878,142 @@ var DomRenderer = class {
 			external.setAttribute("data-side", pos.side);
 			external.style.setProperty("--docent-arrow", `${pos.arrow}px`);
 		}
+		this.renderConnector(pos, floating, hole);
+	}
+	/** Draw the connector for connector arrow styles; clear it otherwise. */
+	renderConnector(pos, floating, hole) {
+		const style = this.look.arrow;
+		if (!require_arrows.isConnector(style)) {
+			this.connector?.clear();
+			return;
+		}
+		const mod = this.connectorModule;
+		const connector = this.connector;
+		if (!mod || !connector) {
+			this.loadConnector();
+			return;
+		}
+		const inset = 6;
+		const clampX = (x) => Math.min(Math.max(x, hole.x + 10), hole.x + hole.width - 10);
+		const clampY = (y) => Math.min(Math.max(y, hole.y + 10), hole.y + hole.height - 10);
+		const cx = hole.x + hole.width / 2;
+		const cy = hole.y + hole.height / 2;
+		const alongX = pos.x + floating.width * (cx < pos.x + floating.width / 2 ? .3 : .7);
+		const alongY = pos.y + floating.height * (cy < pos.y + floating.height / 2 ? .3 : .7);
+		let from;
+		let to;
+		switch (pos.side) {
+			case "bottom":
+				from = {
+					x: alongX,
+					y: pos.y
+				};
+				to = {
+					x: clampX(cx),
+					y: hole.y + hole.height + inset
+				};
+				break;
+			case "top":
+				from = {
+					x: alongX,
+					y: pos.y + floating.height
+				};
+				to = {
+					x: clampX(cx),
+					y: hole.y - inset
+				};
+				break;
+			case "right":
+				from = {
+					x: pos.x,
+					y: alongY
+				};
+				to = {
+					x: hole.x + hole.width + inset,
+					y: clampY(cy)
+				};
+				break;
+			default:
+				from = {
+					x: pos.x + floating.width,
+					y: alongY
+				};
+				to = {
+					x: hole.x - inset,
+					y: clampY(cy)
+				};
+		}
+		const bend = pos.side === "top" || pos.side === "bottom" ? to.x < from.x ? 1 : -1 : to.y < from.y ? -1 : 1;
+		connector.render(mod.connectorShape(style, from, to, pos.side === "top" || pos.side === "left" ? -bend : bend), this.drawConnector);
+		this.drawConnector = false;
+	}
+	/** Fetch the connector module once, then draw with it. */
+	loadConnector() {
+		this.connectorLoading ??= Promise.resolve().then(() => require("./connector-D6Al4Deu.cjs")).then((mod) => {
+			this.connectorModule = mod;
+			if (this.shadow) this.attachConnector(this.shadow, mod);
+			this.update();
+		});
+	}
+	/** Add the connector layer and its styles, beneath any popover. */
+	attachConnector(shadow, mod) {
+		if (this.connector) return;
+		const style = this.doc.createElement("style");
+		style.textContent = mod.CONNECTOR_STYLES_CSS;
+		this.connector = new mod.Connector(this.doc);
+		const before = this.popover ?? null;
+		shadow.insertBefore(style, before);
+		shadow.insertBefore(this.connector.el, before);
+	}
+	resolveLook(ctx, template) {
+		const tour = ctx.tour.options ?? {};
+		const step = ctx.step;
+		return {
+			arrow: step.arrow ?? tour.arrow ?? template?.arrow ?? this.options.arrow ?? "caret",
+			spotlight: {
+				...this.options.spotlight,
+				...template?.spotlight,
+				...tour.spotlight,
+				...step.spotlight
+			},
+			overlay: {
+				...this.options.overlay,
+				...template?.overlay,
+				...tour.overlay,
+				...step.overlay
+			}
+		};
+	}
+	/** Expose the look to the stylesheet as host attributes and variables. */
+	applyLook(host, look) {
+		this.look = look;
+		host.setAttribute("data-arrow", look.arrow);
+		host.setAttribute("data-ring", look.spotlight.ring ?? "hairline");
+		host.setAttribute("data-shape", look.spotlight.shape ?? "rounded");
+		host.setAttribute("data-overlay", look.overlay.style ?? "dim");
+		const { color, opacity, blur } = look.overlay;
+		if (color !== void 0) host.style.setProperty("--docent-overlay", color);
+		if (opacity !== void 0) host.style.setProperty("--docent-overlay-opacity", String(opacity));
+		if (blur !== void 0) host.style.setProperty("--docent-blur", `${blur}px`);
+		else host.style.removeProperty("--docent-blur");
+	}
+	/** The current transition duration in ms, from the --docent-duration token. */
+	duration(host) {
+		const raw = this.doc.defaultView?.getComputedStyle(host).getPropertyValue("--docent-duration").trim() ?? "";
+		const n = Number.parseFloat(raw);
+		if (Number.isNaN(n)) return 220;
+		return raw.endsWith("ms") ? n : n * 1e3;
+	}
+	/** Disable transitions for this frame so scroll-driven moves stay glued to the target. */
+	markTracking() {
+		const host = this.host;
+		if (!host) return;
+		host.setAttribute("data-tracking", "");
+		if (this.trackingFrame !== void 0) cancelAnimationFrame(this.trackingFrame);
+		this.trackingFrame = requestAnimationFrame(() => {
+			this.trackingFrame = void 0;
+			host.removeAttribute("data-tracking");
+		});
 	}
 	/**
 	* The visible area in layout-viewport coordinates. Uses the visual viewport
@@ -954,6 +1152,7 @@ var DomRenderer = class {
 		shadow.appendChild(overlay.el);
 		shadow.appendChild(overlay.ring);
 		shadow.appendChild(overlay.blocker);
+		if (this.connectorModule) this.attachConnector(shadow, this.connectorModule);
 		this.doc.body.appendChild(host);
 		this.host = host;
 		this.shadow = shadow;
@@ -967,6 +1166,7 @@ var DomRenderer = class {
 		this.frame = void 0;
 		this.popover?.remove();
 		this.popover = void 0;
+		this.connector?.clear();
 		this.arrow = void 0;
 		this.ctx = void 0;
 		this.target = null;
@@ -1010,7 +1210,7 @@ var DomRenderer = class {
 		if (this.frame !== void 0) return;
 		this.frame = requestAnimationFrame(() => {
 			this.frame = void 0;
-			this.update();
+			this.update(true);
 		});
 	};
 	listen() {
@@ -1281,6 +1481,7 @@ function createDocent(options = {}) {
 	});
 }
 //#endregion
+exports.CONNECTOR_STYLES = require_arrows.CONNECTOR_STYLES;
 exports.DEFAULT_LABELS = DEFAULT_LABELS;
 exports.DomRenderer = DomRenderer;
 exports.DomTourController = DomTourController;
@@ -1288,6 +1489,7 @@ exports.NAME_ATTRIBUTE = NAME_ATTRIBUTE;
 exports.Overlay = Overlay;
 exports.THEME_VARS = THEME_VARS;
 exports.applyTheme = applyTheme;
+exports.arrowGap = require_arrows.arrowGap;
 exports.availableSpace = availableSpace;
 exports.buildHeadlessShell = buildHeadlessShell;
 exports.buildPopover = buildPopover;
@@ -1308,6 +1510,7 @@ exports.findOccluder = findOccluder;
 exports.formatProgress = formatProgress;
 exports.holePath = holePath;
 exports.inflate = inflate;
+exports.isConnector = require_arrows.isConnector;
 exports.isSafeUrl = isSafeUrl;
 exports.mergeThemes = mergeThemes;
 exports.parsePlacement = parsePlacement;