@ponchia/ui 0.4.1 → 0.6.0

package/classes/index.js

@@ -38,6 +38,11 @@ export const cls = Object.freeze({
   numPos: 'ui-num--pos',
   numNeg: 'ui-num--neg',
   numMuted: 'ui-num--muted',
+  delta: 'ui-delta',
+  deltaUp: 'ui-delta--up',
+  deltaDown: 'ui-delta--down',
+  deltaFlat: 'ui-delta--flat',
+  deltaInvert: 'ui-delta--invert',
   badge: 'ui-badge',
   badgeAccent: 'ui-badge--accent',
   badgeSuccess: 'ui-badge--success',
@@ -134,6 +139,7 @@ export const cls = Object.freeze({
   meterSuccess: 'ui-meter--success',
   meterWarning: 'ui-meter--warning',
   meterDanger: 'ui-meter--danger',
+  meterInfo: 'ui-meter--info',
   steps: 'ui-steps',
   stepsItem: 'ui-steps__item',
   stepsItemDone: 'ui-steps__item--done',
@@ -251,7 +257,7 @@ export const cls = Object.freeze({
   reportNumbered: 'ui-report--numbered',
   reportCover: 'ui-report__cover',
   reportCoverCompact: 'ui-report__cover--compact',
-  reportHeader: 'ui-report__header',
+  reportHead: 'ui-report__head',
   reportTitle: 'ui-report__title',
   reportSubtitle: 'ui-report__subtitle',
   reportMeta: 'ui-report__meta',
@@ -267,16 +273,194 @@ export const cls = Object.freeze({
   reportSources: 'ui-report__sources',
   reportAppendix: 'ui-report__appendix',
   reportFootnotes: 'ui-report__footnotes',
-  chart: 'ui-chart',
-  chartLegend: 'ui-chart__legend',
-  chartSwatch: 'ui-chart__swatch',
-  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',
+  compare: 'ui-compare',
+  compare2up: 'ui-compare--2up',
+  compareCol: 'ui-compare__col',
+  compareHead: 'ui-compare__head',
+  // 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',
+  bracketNoteSuccess: 'ui-bracket-note--success',
+  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',
+  src: 'ui-src',
+  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',
+  inspectorHead: 'ui-inspector__head',
+  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',
@@ -284,6 +468,8 @@ export const cls = Object.freeze({
   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',
@@ -308,7 +494,6 @@ export const cls = Object.freeze({
   appShellFull: 'ui-app-shell--full',
   appRail: 'ui-app-rail',
   appRailBrand: 'ui-app-rail__brand',
-  appRailToggle: 'ui-app-rail__toggle',
   appRailFoot: 'ui-app-rail__foot',
   appRailAccount: 'ui-app-rail__account',
   appTopbar: 'ui-app-topbar',
@@ -345,6 +530,33 @@ 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.
+// Object-literal lookup to match stateTone above (shorter, greppable, one idiom).
+const srcTone = (state) =>
+  ({
+    verified: cls.srcVerified,
+    unverified: cls.srcUnverified,
+    generated: cls.srcGenerated,
+    reviewed: cls.srcReviewed,
+    stale: cls.srcStale,
+    conflict: cls.srcConflict,
+  })[state] || '';
+
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
     j(
@@ -376,6 +588,15 @@ export const ui = {
       tone === 'neg' && cls.numNeg,
       tone === 'muted' && cls.numMuted,
     ),
+  delta: ({ dir, invert } = {}) =>
+    j(
+      cls.delta,
+      dir === 'up' && cls.deltaUp,
+      dir === 'down' && cls.deltaDown,
+      dir === 'flat' && cls.deltaFlat,
+      invert && cls.deltaInvert,
+    ),
+  compare: ({ cols } = {}) => j(cls.compare, cols === 2 && cls.compare2up),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
   link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
   dot: ({ tone, live } = {}) =>
@@ -427,6 +648,7 @@ export const ui = {
       tone === 'success' && cls.meterSuccess,
       tone === 'warning' && cls.meterWarning,
       tone === 'danger' && cls.meterDanger,
+      tone === 'info' && cls.meterInfo,
     ),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
@@ -440,6 +662,111 @@ 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 === 'success' && cls.bracketNoteSuccess,
+      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

@@ -141,6 +141,14 @@
       "name": "--display",
       "description": "Global scale token. Value: `var(--dot-font)`"
     },
+    {
+      "name": "--display-weight",
+      "description": "Global scale token. Value: `700`"
+    },
+    {
+      "name": "--display-weight-strong",
+      "description": "Global scale token. Value: `800`"
+    },
     {
       "name": "--dot-font",
       "description": "Global scale token. Value: `'Doto', var(--mono)`"
@@ -213,6 +221,10 @@
       "name": "--mono",
       "description": "Global scale token. Value: `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace`"
     },
+    {
+      "name": "--on-accent",
+      "description": "Theme token. Light: `var(--button-text)` · Dark: `var(--button-text)`"
+    },
     {
       "name": "--panel",
       "description": "Theme token. Light: `#ffffff` · Dark: `#1c1c1c`"

package/connectors/index.d.ts

@@ -0,0 +1,191 @@
+export function finite(name: any, value: any, fallback: any): any;
+export function dimension(name: any, value: any, fallback: any): any;
+export function fmt(value: any): string;
+export function point(x: any, y: any): string;
+export function clamp(value: any, min: any, max: any): any;
+/**
+ * A point on a rect's edge (or centre). `rect` is `{ x, y, width, height }`.
+ * @param {Rect} rect
+ * @param {Side} [side]
+ * @returns {Point}
+ */
+export function anchorPoint(rect: Rect, side?: Side): Point;
+/**
+ * Angle (radians) from `from` to `to`.
+ * @param {Point} from
+ * @param {Point} to
+ * @returns {number}
+ */
+export function angleBetween(from: Point, to: Point): number;
+/**
+ * Straight line from `from` to `to`.
+ * @param {Point} from
+ * @param {Point} to
+ * @returns {string}
+ */
+export function straightPath(from: Point, to: Point): string;
+/**
+ * Right-angle dogleg. Turns on the dominant axis at `mid` (0..1) of the span.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {{ mid?: number }} [opts]
+ * @returns {string}
+ */
+export function elbowPath(from: Point, to: Point, opts?: {
+    mid?: number;
+}): string;
+/**
+ * Cubic curve; control points extend along the dominant axis by `curvature`.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {{ curvature?: number }} [opts]
+ * @returns {string}
+ */
+export function curvePath(from: Point, to: Point, opts?: {
+    curvature?: number;
+}): string;
+/**
+ * Build a path between two points by `shape` (`straight` | `elbow` | `curve`).
+ * @param {ConnectorPathOptions} [opts]
+ * @returns {string}
+ */
+export function connectorPath(opts?: ConnectorPathOptions): string;
+/**
+ * A filled triangle arrowhead at `p`, pointing along `angle` (radians).
+ * @param {Point} p
+ * @param {number} angle
+ * @param {number} [size]
+ * @param {number} [spread] Half-angle of the head in radians (default 0.45).
+ *   Smaller is crisper/sharper; must be in (0, π/2).
+ * @returns {string}
+ */
+export function arrowHead(p: Point, angle: number, size?: number, spread?: number): string;
+/**
+ * A filled dot at `p`.
+ * @param {Point} p
+ * @param {number} [radius]
+ * @returns {string}
+ */
+export function dotMark(p: Point, radius?: number): string;
+/**
+ * Pick facing edges from the rects' relative centres.
+ * @param {Rect} fromRect
+ * @param {Rect} toRect
+ * @returns {{ from: Side, to: Side }}
+ */
+export function autoSides(fromRect: Rect, toRect: Rect): {
+    from: Side;
+    to: Side;
+};
+/**
+ * Angle (radians) at which a `shape` path *arrives* at `to` — straight is the
+ * chord; elbow/curve arrive axis-aligned along the dominant axis. Rotate an
+ * end marker by this so it points along the path, not the chord.
+ * @param {Point} from
+ * @param {Point} to
+ * @param {ConnectorShape} [shape]
+ * @returns {number}
+ */
+export function endTangentAngle(from: Point, to: Point, shape?: ConnectorShape): number;
+/**
+ * Connect two rects. Resolves anchor points (explicit `fromSide`/`toSide`, else
+ * auto), builds the path, and returns `{ d, from, to, angle }` so the caller can
+ * place an arrowhead/dot at `to` rotated by `angle`.
+ * @param {ConnectRectsOptions} [opts]
+ * @returns {ConnectRectsResult}
+ */
+export function connectRects(opts?: ConnectRectsOptions): ConnectRectsResult;
+/**
+ * @ponchia/ui/connectors — dependency-free SVG geometry for connecting two
+ * elements (or two points) with a leader line.
+ *
+ * Pure functions only: they take points/rects and return SVG path strings (or
+ * resolved coordinates). They own no DOM, no scales, and no live tracking —
+ * that optional glue lives in `@ponchia/ui/behaviors` (`initConnectors`). This
+ * is the page-coordinate, element-to-element cousin of the figure-coordinate
+ * `@ponchia/ui/annotations` helpers.
+ *
+ *   import { connectRects } from '@ponchia/ui/connectors';
+ *   const { d } = connectRects({ fromRect: a, toRect: b, shape: 'elbow' });
+ *
+ * The public types below are JSDoc `@typedef`s; the shipped `index.d.ts` is
+ * generated from them (and these signatures) by `tsc --emitDeclarationOnly`.
+ *
+ * @typedef {{ x: number, y: number }} Point
+ * @typedef {{ x: number, y: number, width: number, height: number }} Rect
+ * @typedef {'top' | 'right' | 'bottom' | 'left' | 'center'} Side
+ * @typedef {'straight' | 'elbow' | 'curve'} ConnectorShape
+ *
+ * @typedef {object} ConnectorPathOptions
+ * @property {Point} from
+ * @property {Point} to
+ * @property {ConnectorShape} [shape]
+ * @property {number} [curvature] Curve control-point reach along the dominant axis (curve shape). Default 0.5.
+ * @property {number} [mid] Turn position 0..1 along the span (elbow shape). Default 0.5.
+ *
+ * @typedef {object} ConnectRectsOptions
+ * @property {Rect} fromRect
+ * @property {Rect} toRect
+ * @property {Side} [fromSide] Anchor edges. Omit both to auto-pick facing edges from the rects.
+ * @property {Side} [toSide]
+ * @property {ConnectorShape} [shape]
+ * @property {number} [curvature]
+ * @property {number} [mid]
+ *
+ * @typedef {object} ConnectRectsResult
+ * @property {string} d SVG path data.
+ * @property {Point} from
+ * @property {Point} to
+ * @property {number} angle The path's end-tangent at `to` in radians — 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`.
+ */
+export const PRECISION: 1000;
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Side = "top" | "right" | "bottom" | "left" | "center";
+export type ConnectorShape = "straight" | "elbow" | "curve";
+export type ConnectorPathOptions = {
+    from: Point;
+    to: Point;
+    shape?: ConnectorShape | undefined;
+    /**
+     * Curve control-point reach along the dominant axis (curve shape). Default 0.5.
+     */
+    curvature?: number | undefined;
+    /**
+     * Turn position 0..1 along the span (elbow shape). Default 0.5.
+     */
+    mid?: number | undefined;
+};
+export type ConnectRectsOptions = {
+    fromRect: Rect;
+    toRect: Rect;
+    /**
+     * Anchor edges. Omit both to auto-pick facing edges from the rects.
+     */
+    fromSide?: Side | undefined;
+    toSide?: Side | undefined;
+    shape?: ConnectorShape | undefined;
+    curvature?: number | undefined;
+    mid?: number | undefined;
+};
+export type ConnectRectsResult = {
+    /**
+     * SVG path data.
+     */
+    d: string;
+    from: Point;
+    to: Point;
+    /**
+     * The path's end-tangent at `to` in radians — 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;
+};
+//# sourceMappingURL=index.d.ts.map

package/connectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAkDA,kEAIC;AAED,qEAIC;AAED,wCAGC;AAED,8CAEC;AAID,2DAGC;AAED;;;;;GAKG;AACH,kCAJW,IAAI,SACJ,IAAI,GACF,KAAK,CAoBjB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACd,MAAM,CAgBlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpB,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,oBAAoB,GAClB,MAAM,CAOlB;AAED;;;;;;;;GAQG;AACH,6BAPW,KAAK,SACL,MAAM,SACN,MAAM,WACN,MAAM,GAEJ,MAAM,CAalB;AAED;;;;;GAKG;AACH,2BAJW,KAAK,WACL,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;GAKG;AACH,oCAJW,IAAI,UACJ,IAAI,GACF;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAWpC;AAED;;;;;;;;GAQG;AACH,sCALW,KAAK,MACL,KAAK,UACL,cAAc,GACZ,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,oCAHW,mBAAmB,GACjB,kBAAkB,CAW9B;AAlRD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,wBAAyB,IAAI,CAAC;oBAhCjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;mBACxB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;mBACvD,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;6BAC9C,UAAU,GAAG,OAAO,GAAG,OAAO;;UAG7B,KAAK;QACL,KAAK;;;;;;;;;;;;cAML,IAAI;YACJ,IAAI;;;;;;;;;;;;;;OAQJ,MAAM;UACN,KAAK;QACL,KAAK;;;;WACL,MAAM"}