@ponchia/ui 0.4.0 → 0.5.0

package/classes/index.js

@@ -245,7 +245,227 @@ export const cls = Object.freeze({
   timeline: 'ui-timeline',
   timelineItem: 'ui-timeline__item',
   timelineTime: 'ui-timeline__time',
+  // report kit (opt-in css/report.css)
+  report: 'ui-report',
+  reportCompact: 'ui-report--compact',
+  reportNumbered: 'ui-report--numbered',
+  reportCover: 'ui-report__cover',
+  reportCoverCompact: 'ui-report__cover--compact',
+  reportHeader: 'ui-report__header',
+  reportTitle: 'ui-report__title',
+  reportSubtitle: 'ui-report__subtitle',
+  reportMeta: 'ui-report__meta',
+  reportToc: 'ui-report__toc',
+  reportSummary: 'ui-report__summary',
+  reportSection: 'ui-report__section',
+  reportSectionUnnumbered: 'ui-report__section--unnumbered',
+  reportSectionHead: 'ui-report__section-head',
+  reportFinding: 'ui-report__finding',
+  reportEvidence: 'ui-report__evidence',
+  reportFigure: 'ui-report__figure',
+  reportCaption: 'ui-report__caption',
+  reportSources: 'ui-report__sources',
+  reportAppendix: 'ui-report__appendix',
+  reportFootnotes: 'ui-report__footnotes',
+  chart: 'ui-chart',
+  chartCaption: 'ui-chart__caption',
+  chartPlot: 'ui-chart__plot',
+  chartBar: 'ui-chart__bar',
+  chartLabel: 'ui-chart__label',
+  chartTrack: 'ui-chart__track',
+  chartFill: 'ui-chart__fill',
+  chartFallback: 'ui-chart__fallback',
+  // legend (standalone data keys — css/legend.css)
+  legend: 'ui-legend',
+  legendVertical: 'ui-legend--vertical',
+  legendCompact: 'ui-legend--compact',
+  legendGradient: 'ui-legend--gradient',
+  legendDiverging: 'ui-legend--diverging',
+  legendThreshold: 'ui-legend--threshold',
+  legendWithValues: 'ui-legend--with-values',
+  legendInteractive: 'ui-legend--interactive',
+  legendTitle: 'ui-legend__title',
+  legendItem: 'ui-legend__item',
+  legendSwatch: 'ui-legend__swatch',
+  legendSwatchCircle: 'ui-legend__swatch--circle',
+  legendSwatchLine: 'ui-legend__swatch--line',
+  legendSwatch1: 'ui-legend__swatch--1',
+  legendSwatch2: 'ui-legend__swatch--2',
+  legendSwatch3: 'ui-legend__swatch--3',
+  legendSwatch4: 'ui-legend__swatch--4',
+  legendSwatch5: 'ui-legend__swatch--5',
+  legendSwatch6: 'ui-legend__swatch--6',
+  legendSwatch7: 'ui-legend__swatch--7',
+  legendSwatch8: 'ui-legend__swatch--8',
+  legendSymbol: 'ui-legend__symbol',
+  legendLabel: 'ui-legend__label',
+  legendValue: 'ui-legend__value',
+  legendCaption: 'ui-legend__caption',
+  legendTrack: 'ui-legend__track',
+  legendTicks: 'ui-legend__ticks',
+  legendTick: 'ui-legend__tick',
+  annotation: 'ui-annotation',
+  annotationSubject: 'ui-annotation__subject',
+  annotationConnector: 'ui-annotation__connector',
+  annotationConnectorEnd: 'ui-annotation__connector-end',
+  annotationNote: 'ui-annotation__note',
+  annotationNoteLine: 'ui-annotation__note-line',
+  annotationTitle: 'ui-annotation__title',
+  annotationLabel: 'ui-annotation__label',
+  annotationBadge: 'ui-annotation__badge',
+  annotationLabelVariant: 'ui-annotation--label',
+  annotationCallout: 'ui-annotation--callout',
+  annotationElbow: 'ui-annotation--elbow',
+  annotationCurve: 'ui-annotation--curve',
+  annotationCircle: 'ui-annotation--circle',
+  annotationRect: 'ui-annotation--rect',
+  annotationThreshold: 'ui-annotation--threshold',
+  annotationBadgeVariant: 'ui-annotation--badge',
+  annotationBracket: 'ui-annotation--bracket',
+  annotationBand: 'ui-annotation--band',
+  annotationSlope: 'ui-annotation--slope',
+  annotationCompare: 'ui-annotation--compare',
+  annotationCluster: 'ui-annotation--cluster',
+  annotationAxis: 'ui-annotation--axis',
+  annotationTimeline: 'ui-annotation--timeline',
+  annotationEvidence: 'ui-annotation--evidence',
+  annotationAccent: 'ui-annotation--accent',
+  annotationMuted: 'ui-annotation--muted',
+  annotationSuccess: 'ui-annotation--success',
+  annotationWarning: 'ui-annotation--warning',
+  annotationDanger: 'ui-annotation--danger',
+  annotationInfo: 'ui-annotation--info',
+  annotationDraw: 'ui-annotation--draw',
+  annotationPulse: 'ui-annotation--pulse',
+  annotationReveal: 'ui-annotation--reveal',
+  annotationFocus: 'ui-annotation--focus',
+  // marks (evidence/emphasis for running text — css/marks.css)
+  mark: 'ui-mark',
+  markAccent: 'ui-mark--accent',
+  markSuccess: 'ui-mark--success',
+  markWarning: 'ui-mark--warning',
+  markDanger: 'ui-mark--danger',
+  markInfo: 'ui-mark--info',
+  markMuted: 'ui-mark--muted',
+  markUnderline: 'ui-mark--underline',
+  markBox: 'ui-mark--box',
+  markStrike: 'ui-mark--strike',
+  markDraw: 'ui-mark--draw',
+  bracketNote: 'ui-bracket-note',
+  bracketNoteLabel: 'ui-bracket-note__label',
+  bracketNoteAccent: 'ui-bracket-note--accent',
+  bracketNoteWarning: 'ui-bracket-note--warning',
+  bracketNoteDanger: 'ui-bracket-note--danger',
+  bracketNoteInfo: 'ui-bracket-note--info',
+  // connectors (leader lines — css/connectors.css)
+  connector: 'ui-connector',
+  connectorPath: 'ui-connector__path',
+  connectorEnd: 'ui-connector__end',
+  connectorDashed: 'ui-connector--dashed',
+  connectorAccent: 'ui-connector--accent',
+  connectorMuted: 'ui-connector--muted',
+  connectorSuccess: 'ui-connector--success',
+  connectorWarning: 'ui-connector--warning',
+  connectorDanger: 'ui-connector--danger',
+  connectorInfo: 'ui-connector--info',
+  connectorDraw: 'ui-connector--draw',
+  // spotlight (guided-focus overlay — css/spotlight.css)
+  spotlight: 'ui-spotlight',
+  spotlightHole: 'ui-spotlight__hole',
+  spotlightRing: 'ui-spotlight--ring',
+  tourNote: 'ui-tour-note',
+  tourNoteStep: 'ui-tour-note__step',
+  tourNoteTitle: 'ui-tour-note__title',
+  tourNoteBody: 'ui-tour-note__body',
+  tourNoteActions: 'ui-tour-note__actions',
+  // crosshair (plot ruler + readout — css/crosshair.css)
+  crosshair: 'ui-crosshair',
+  crosshairMuted: 'ui-crosshair--muted',
+  crosshairLine: 'ui-crosshair__line',
+  crosshairLineX: 'ui-crosshair__line--x',
+  crosshairLineY: 'ui-crosshair__line--y',
+  crosshairBadge: 'ui-crosshair__badge',
+  readout: 'ui-readout',
+  // selection-state vocabulary (cross-cutting — css/selection.css)
+  sel: 'ui-sel',
+  selOn: 'ui-sel--on',
+  selOff: 'ui-sel--off',
+  selMaybe: 'ui-sel--maybe',
+  // source / citation / provenance — the trust layer (css/sources.css)
+  citation: 'ui-citation',
+  citationChip: 'ui-citation--chip',
+  sourceList: 'ui-source-list',
+  sourceListItem: 'ui-source-list__item',
+  sourceCard: 'ui-source-card',
+  sourceCardTitle: 'ui-source-card__title',
+  sourceCardOrigin: 'ui-source-card__origin',
+  sourceCardTime: 'ui-source-card__time',
+  sourceCardExcerpt: 'ui-source-card__excerpt',
+  sourceCardActions: 'ui-source-card__actions',
+  provenance: 'ui-provenance',
+  provenanceItem: 'ui-provenance__item',
+  srcVerified: 'ui-src--verified',
+  srcUnverified: 'ui-src--unverified',
+  srcGenerated: 'ui-src--generated',
+  srcReviewed: 'ui-src--reviewed',
+  srcStale: 'ui-src--stale',
+  srcConflict: 'ui-src--conflict',
+  // lifecycle / system state (css/state.css)
+  state: 'ui-state',
+  stateLabel: 'ui-state__label',
+  stateDetail: 'ui-state__detail',
+  stateBusy: 'ui-state--busy',
+  stateSaving: 'ui-state--saving',
+  stateSaved: 'ui-state--saved',
+  stateQueued: 'ui-state--queued',
+  stateOffline: 'ui-state--offline',
+  stateStale: 'ui-state--stale',
+  stateConflict: 'ui-state--conflict',
+  stateError: 'ui-state--error',
+  stateLocked: 'ui-state--locked',
+  stateReviewed: 'ui-state--reviewed',
+  stateNeedsReview: 'ui-state--needs-review',
+  syncbar: 'ui-syncbar',
+  // generated content / AI-trust surfaces (css/generated.css)
+  generated: 'ui-generated',
+  generatedLabel: 'ui-generated__label',
+  originLabel: 'ui-origin-label',
+  originLabelAi: 'ui-origin-label--ai',
+  reasoning: 'ui-reasoning',
+  reasoningBody: 'ui-reasoning__body',
+  toolLog: 'ui-tool-log',
+  toolCall: 'ui-tool-call',
+  toolCallName: 'ui-tool-call__name',
+  toolCallStatus: 'ui-tool-call__status',
+  toolCallBody: 'ui-tool-call__body',
+  // workbench — inspector / property / selection bar (css/workbench.css)
+  inspector: 'ui-inspector',
+  inspectorHeader: 'ui-inspector__header',
+  inspectorBody: 'ui-inspector__body',
+  property: 'ui-property',
+  propertyLabel: 'ui-property__label',
+  propertyValue: 'ui-property__value',
+  selectionbar: 'ui-selectionbar',
+  selectionbarCount: 'ui-selectionbar__count',
+  selectionbarActions: 'ui-selectionbar__actions',
+  // command palette shell (css/command.css + initCommand)
+  command: 'ui-command',
+  commandInput: 'ui-command__input',
+  commandList: 'ui-command__list',
+  commandGroup: 'ui-command__group',
+  commandItem: 'ui-command__item',
+  commandShortcut: 'ui-command__shortcut',
+  commandMeta: 'ui-command__meta',
+  commandEmpty: 'ui-command__empty',
+  printOnly: 'ui-print-only',
+  screenOnly: 'ui-screen-only',
+  breakBefore: 'ui-break-before',
+  breakAfter: 'ui-break-after',
+  keep: 'ui-keep',
+  printExact: 'ui-print-exact',
   kbd: 'ui-kbd',
+  shortcut: 'ui-shortcut',
+  shortcutSep: 'ui-shortcut__sep',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -262,6 +482,9 @@ export const cls = Object.freeze({
   animateFade: 'ui-animate-fade',
   animateDot: 'ui-animate-dot',
   animateMatrix: 'ui-animate-matrix',
+  scrollProgress: 'ui-scroll-progress',
+  scrollReveal: 'ui-scroll-reveal',
+  vt: 'ui-vt',
   // admin shell (was the legacy .app-* vocabulary; promoted in 0.3.0)
   appShell: 'ui-app-shell',
   appShellFull: 'ui-app-shell--full',
@@ -304,6 +527,31 @@ export function cx(...parts) {
 
 const j = (...p) => p.filter(Boolean).join(' ');
 
+// Lifecycle state → canonical tone class.
+const stateTone = (state) =>
+  ({
+    saving: cls.stateSaving,
+    saved: cls.stateSaved,
+    queued: cls.stateQueued,
+    offline: cls.stateOffline,
+    stale: cls.stateStale,
+    conflict: cls.stateConflict,
+    error: cls.stateError,
+    locked: cls.stateLocked,
+    reviewed: cls.stateReviewed,
+    'needs-review': cls.stateNeedsReview,
+  })[state] || '';
+
+// Trust-state → tone class, shared by the source/citation/provenance recipes.
+const srcTone = (state) =>
+  (state === 'verified' && cls.srcVerified) ||
+  (state === 'unverified' && cls.srcUnverified) ||
+  (state === 'generated' && cls.srcGenerated) ||
+  (state === 'reviewed' && cls.srcReviewed) ||
+  (state === 'stale' && cls.srcStale) ||
+  (state === 'conflict' && cls.srcConflict) ||
+  '';
+
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
     j(
@@ -399,6 +647,110 @@ export const ui = {
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
   inputIcon: ({ end } = {}) => j(cls.inputIcon, end && cls.inputIconEnd),
+  legend: ({ orient, type, diverging, compact, withValues, interactive } = {}) =>
+    j(
+      cls.legend,
+      orient === 'vertical' && cls.legendVertical,
+      type === 'gradient' && cls.legendGradient,
+      type === 'threshold' && cls.legendThreshold,
+      diverging && cls.legendDiverging,
+      compact && cls.legendCompact,
+      withValues && cls.legendWithValues,
+      interactive && cls.legendInteractive,
+    ),
+  legendItem: ({ inactive } = {}) => j(cls.legendItem, inactive && 'is-inactive'),
+  legendSwatch: ({ series, shape } = {}) =>
+    j(
+      cls.legendSwatch,
+      series === 1 && cls.legendSwatch1,
+      series === 2 && cls.legendSwatch2,
+      series === 3 && cls.legendSwatch3,
+      series === 4 && cls.legendSwatch4,
+      series === 5 && cls.legendSwatch5,
+      series === 6 && cls.legendSwatch6,
+      series === 7 && cls.legendSwatch7,
+      series === 8 && cls.legendSwatch8,
+      shape === 'circle' && cls.legendSwatchCircle,
+      shape === 'line' && cls.legendSwatchLine,
+    ),
+  annotation: ({ variant = 'callout', tone = 'accent', motion } = {}) =>
+    j(
+      cls.annotation,
+      variant === 'label' && cls.annotationLabelVariant,
+      variant === 'callout' && cls.annotationCallout,
+      variant === 'elbow' && cls.annotationElbow,
+      variant === 'curve' && cls.annotationCurve,
+      variant === 'circle' && cls.annotationCircle,
+      variant === 'rect' && cls.annotationRect,
+      variant === 'threshold' && cls.annotationThreshold,
+      variant === 'badge' && cls.annotationBadgeVariant,
+      variant === 'bracket' && cls.annotationBracket,
+      variant === 'band' && cls.annotationBand,
+      variant === 'slope' && cls.annotationSlope,
+      variant === 'compare' && cls.annotationCompare,
+      variant === 'cluster' && cls.annotationCluster,
+      variant === 'axis' && cls.annotationAxis,
+      variant === 'timeline' && cls.annotationTimeline,
+      variant === 'evidence' && cls.annotationEvidence,
+      tone === 'accent' && cls.annotationAccent,
+      tone === 'muted' && cls.annotationMuted,
+      tone === 'success' && cls.annotationSuccess,
+      tone === 'warning' && cls.annotationWarning,
+      tone === 'danger' && cls.annotationDanger,
+      tone === 'info' && cls.annotationInfo,
+      motion === 'draw' && cls.annotationDraw,
+      motion === 'pulse' && cls.annotationPulse,
+      motion === 'reveal' && cls.annotationReveal,
+      motion === 'focus' && cls.annotationFocus,
+    ),
+  mark: ({ style, tone, motion } = {}) =>
+    j(
+      cls.mark,
+      style === 'underline' && cls.markUnderline,
+      style === 'box' && cls.markBox,
+      style === 'strike' && cls.markStrike,
+      tone === 'accent' && cls.markAccent,
+      tone === 'success' && cls.markSuccess,
+      tone === 'warning' && cls.markWarning,
+      tone === 'danger' && cls.markDanger,
+      tone === 'info' && cls.markInfo,
+      tone === 'muted' && cls.markMuted,
+      motion === 'draw' && cls.markDraw,
+    ),
+  bracketNote: ({ tone } = {}) =>
+    j(
+      cls.bracketNote,
+      tone === 'accent' && cls.bracketNoteAccent,
+      tone === 'warning' && cls.bracketNoteWarning,
+      tone === 'danger' && cls.bracketNoteDanger,
+      tone === 'info' && cls.bracketNoteInfo,
+    ),
+  connector: ({ tone, dashed, motion } = {}) =>
+    j(
+      cls.connector,
+      tone === 'accent' && cls.connectorAccent,
+      tone === 'muted' && cls.connectorMuted,
+      tone === 'success' && cls.connectorSuccess,
+      tone === 'warning' && cls.connectorWarning,
+      tone === 'danger' && cls.connectorDanger,
+      tone === 'info' && cls.connectorInfo,
+      dashed && cls.connectorDashed,
+      motion === 'draw' && cls.connectorDraw,
+    ),
+  spotlight: ({ ring } = {}) => j(cls.spotlight, ring && cls.spotlightRing),
+  crosshair: ({ muted } = {}) => j(cls.crosshair, muted && cls.crosshairMuted),
+  sel: ({ state } = {}) =>
+    j(
+      cls.sel,
+      state === 'on' && cls.selOn,
+      state === 'off' && cls.selOff,
+      state === 'maybe' && cls.selMaybe,
+    ),
+  citation: ({ chip, state } = {}) => j(cls.citation, chip && cls.citationChip, srcTone(state)),
+  source: ({ state } = {}) => j(cls.sourceCard, srcTone(state)),
+  provenance: ({ state } = {}) => j(cls.provenance, srcTone(state)),
+  state: ({ state, busy } = {}) => j(cls.state, stateTone(state), busy && cls.stateBusy),
+  originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
 };
 
 export default ui;

package/classes/vscode.css-custom-data.json

@@ -7,19 +7,19 @@
     },
     {
       "name": "--accent-1",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-2",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-3",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-4",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-5",
@@ -29,6 +29,10 @@
       "name": "--accent-6",
       "description": "Global scale token. Value: `var(--accent-strong)`"
     },
+    {
+      "name": "--accent-ramp-end",
+      "description": "Theme token. Light: `#ffffff` · Dark: `#000000`"
+    },
     {
       "name": "--accent-soft",
       "description": "Theme token. Light: `color-mix(in srgb, var(--accent) 10%, transparent)` · Dark: `color-mix(in srgb, var(--accent) 14%, transparent)`"
@@ -43,7 +47,7 @@
     },
     {
       "name": "--bg",
-      "description": "Theme token. Light: `#f4f4f2` · Dark: `#000000`"
+      "description": "Theme token. Light: `#f4f4f2` · Dark: `#121212`"
     },
     {
       "name": "--bg-accent",
@@ -51,7 +55,7 @@
     },
     {
       "name": "--bg-elevated",
-      "description": "Theme token. Light: `#fbfbfa` · Dark: `#0a0a0a`"
+      "description": "Theme token. Light: `#fbfbfa` · Dark: `#181818`"
     },
     {
       "name": "--border",
@@ -199,11 +203,11 @@
     },
     {
       "name": "--line",
-      "description": "Theme token. Light: `#d8d8d4` · Dark: `#2a2a2a`"
+      "description": "Theme token. Light: `#d8d8d4` · Dark: `#383838`"
     },
     {
       "name": "--line-strong",
-      "description": "Theme token. Light: `#a8a8a2` · Dark: `#444444`"
+      "description": "Theme token. Light: `#a8a8a2` · Dark: `#555555`"
     },
     {
       "name": "--mono",
@@ -211,15 +215,15 @@
     },
     {
       "name": "--panel",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#0c0c0c`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#1c1c1c`"
     },
     {
       "name": "--panel-soft",
-      "description": "Theme token. Light: `#ececea` · Dark: `#1a1a1a`"
+      "description": "Theme token. Light: `#ececea` · Dark: `#242424`"
     },
     {
       "name": "--panel-strong",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#141414`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#222222`"
     },
     {
       "name": "--radius-lg",
@@ -327,7 +331,7 @@
     },
     {
       "name": "--text",
-      "description": "Theme token. Light: `#0a0a0a` · Dark: `#f2f2f2`"
+      "description": "Theme token. Light: `#0a0a0a` · Dark: `#e6e6e6`"
     },
     {
       "name": "--text-2xs",
@@ -339,7 +343,7 @@
     },
     {
       "name": "--text-dim",
-      "description": "Theme token. Light: `#686863` · Dark: `#858585`"
+      "description": "Theme token. Light: `#686863` · Dark: `#a0a0a0`"
     },
     {
       "name": "--text-lg",
@@ -351,7 +355,7 @@
     },
     {
       "name": "--text-soft",
-      "description": "Theme token. Light: `#353533` · Dark: `#c4c4c4`"
+      "description": "Theme token. Light: `#353533` · Dark: `#c8c8c8`"
     },
     {
       "name": "--text-xl",

package/connectors/index.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @ponchia/ui/connectors — dependency-free SVG geometry for leader lines.
+ * Pure functions: points/rects in, SVG path strings (or coordinates) out.
+ */
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type Side = 'top' | 'right' | 'bottom' | 'left' | 'center';
+export type ConnectorShape = 'straight' | 'elbow' | 'curve';
+
+export interface ConnectorPathOptions {
+  from: Point;
+  to: Point;
+  shape?: ConnectorShape;
+  /** Curve control-point reach along the dominant axis (curve shape). Default 0.5. */
+  curvature?: number;
+  /** Turn position 0..1 along the span (elbow shape). Default 0.5. */
+  mid?: number;
+}
+
+export interface ConnectRectsOptions {
+  fromRect: Rect;
+  toRect: Rect;
+  /** Anchor edges. Omit both to auto-pick facing edges from the rects. */
+  fromSide?: Side;
+  toSide?: Side;
+  shape?: ConnectorShape;
+  curvature?: number;
+  mid?: number;
+}
+
+export interface ConnectRectsResult {
+  /** SVG path data. */
+  d: string;
+  from: Point;
+  to: Point;
+  /**
+   * The path's **end-tangent** at `to` in radians (`endTangentAngle(from, to,
+   * shape)`) — the direction the path arrives, so rotating an arrowhead at `to`
+   * by this points it along the path. Equals the straight `from`→`to` angle for
+   * `shape: 'straight'`; axis-aligned for `elbow`/`curve`.
+   */
+  angle: number;
+}
+
+export declare function anchorPoint(rect: Rect, side?: Side): Point;
+export declare function angleBetween(from: Point, to: Point): number;
+export declare function straightPath(from: Point, to: Point): string;
+export declare function elbowPath(from: Point, to: Point, opts?: { mid?: number }): string;
+export declare function curvePath(from: Point, to: Point, opts?: { curvature?: number }): string;
+export declare function connectorPath(opts: ConnectorPathOptions): string;
+export declare function arrowHead(p: Point, angle: number, size?: number): string;
+export declare function dotMark(p: Point, radius?: number): string;
+export declare function autoSides(
+  fromRect: Rect,
+  toRect: Rect,
+): { from: Side; to: Side };
+/** Angle (radians) at which a `shape` path arrives at `to` — the chord for
+ *  `straight`, axis-aligned for `elbow`/`curve`. Use it to rotate an end marker. */
+export declare function endTangentAngle(from: Point, to: Point, shape?: ConnectorShape): number;
+export declare function connectRects(opts: ConnectRectsOptions): ConnectRectsResult;