@ponchia/ui 0.4.1 → 0.6.0

package/classes/index.d.ts

@@ -34,6 +34,11 @@ export declare const cls: {
   readonly numPos: 'ui-num--pos';
   readonly numNeg: 'ui-num--neg';
   readonly numMuted: 'ui-num--muted';
+  readonly delta: 'ui-delta';
+  readonly deltaUp: 'ui-delta--up';
+  readonly deltaDown: 'ui-delta--down';
+  readonly deltaFlat: 'ui-delta--flat';
+  readonly deltaInvert: 'ui-delta--invert';
   readonly badge: 'ui-badge';
   readonly badgeAccent: 'ui-badge--accent';
   readonly badgeSuccess: 'ui-badge--success';
@@ -127,6 +132,7 @@ export declare const cls: {
   readonly meterSuccess: 'ui-meter--success';
   readonly meterWarning: 'ui-meter--warning';
   readonly meterDanger: 'ui-meter--danger';
+  readonly meterInfo: 'ui-meter--info';
   readonly steps: 'ui-steps';
   readonly stepsItem: 'ui-steps__item';
   readonly stepsItemDone: 'ui-steps__item--done';
@@ -237,7 +243,7 @@ export declare const cls: {
   readonly reportNumbered: 'ui-report--numbered';
   readonly reportCover: 'ui-report__cover';
   readonly reportCoverCompact: 'ui-report__cover--compact';
-  readonly reportHeader: 'ui-report__header';
+  readonly reportHead: 'ui-report__head';
   readonly reportTitle: 'ui-report__title';
   readonly reportSubtitle: 'ui-report__subtitle';
   readonly reportMeta: 'ui-report__meta';
@@ -253,16 +259,183 @@ export declare const cls: {
   readonly reportSources: 'ui-report__sources';
   readonly reportAppendix: 'ui-report__appendix';
   readonly reportFootnotes: 'ui-report__footnotes';
-  readonly chart: 'ui-chart';
-  readonly chartLegend: 'ui-chart__legend';
-  readonly chartSwatch: 'ui-chart__swatch';
-  readonly chartCaption: 'ui-chart__caption';
-  readonly chartPlot: 'ui-chart__plot';
-  readonly chartBar: 'ui-chart__bar';
-  readonly chartLabel: 'ui-chart__label';
-  readonly chartTrack: 'ui-chart__track';
-  readonly chartFill: 'ui-chart__fill';
-  readonly chartFallback: 'ui-chart__fallback';
+  readonly compare: 'ui-compare';
+  readonly compare2up: 'ui-compare--2up';
+  readonly compareCol: 'ui-compare__col';
+  readonly compareHead: 'ui-compare__head';
+  readonly legend: 'ui-legend';
+  readonly legendVertical: 'ui-legend--vertical';
+  readonly legendCompact: 'ui-legend--compact';
+  readonly legendGradient: 'ui-legend--gradient';
+  readonly legendDiverging: 'ui-legend--diverging';
+  readonly legendThreshold: 'ui-legend--threshold';
+  readonly legendWithValues: 'ui-legend--with-values';
+  readonly legendInteractive: 'ui-legend--interactive';
+  readonly legendTitle: 'ui-legend__title';
+  readonly legendItem: 'ui-legend__item';
+  readonly legendSwatch: 'ui-legend__swatch';
+  readonly legendSwatchCircle: 'ui-legend__swatch--circle';
+  readonly legendSwatchLine: 'ui-legend__swatch--line';
+  readonly legendSwatch1: 'ui-legend__swatch--1';
+  readonly legendSwatch2: 'ui-legend__swatch--2';
+  readonly legendSwatch3: 'ui-legend__swatch--3';
+  readonly legendSwatch4: 'ui-legend__swatch--4';
+  readonly legendSwatch5: 'ui-legend__swatch--5';
+  readonly legendSwatch6: 'ui-legend__swatch--6';
+  readonly legendSwatch7: 'ui-legend__swatch--7';
+  readonly legendSwatch8: 'ui-legend__swatch--8';
+  readonly legendSymbol: 'ui-legend__symbol';
+  readonly legendLabel: 'ui-legend__label';
+  readonly legendValue: 'ui-legend__value';
+  readonly legendCaption: 'ui-legend__caption';
+  readonly legendTrack: 'ui-legend__track';
+  readonly legendTicks: 'ui-legend__ticks';
+  readonly legendTick: 'ui-legend__tick';
+  readonly annotation: 'ui-annotation';
+  readonly annotationSubject: 'ui-annotation__subject';
+  readonly annotationConnector: 'ui-annotation__connector';
+  readonly annotationConnectorEnd: 'ui-annotation__connector-end';
+  readonly annotationNote: 'ui-annotation__note';
+  readonly annotationNoteLine: 'ui-annotation__note-line';
+  readonly annotationTitle: 'ui-annotation__title';
+  readonly annotationLabel: 'ui-annotation__label';
+  readonly annotationBadge: 'ui-annotation__badge';
+  readonly annotationLabelVariant: 'ui-annotation--label';
+  readonly annotationCallout: 'ui-annotation--callout';
+  readonly annotationElbow: 'ui-annotation--elbow';
+  readonly annotationCurve: 'ui-annotation--curve';
+  readonly annotationCircle: 'ui-annotation--circle';
+  readonly annotationRect: 'ui-annotation--rect';
+  readonly annotationThreshold: 'ui-annotation--threshold';
+  readonly annotationBadgeVariant: 'ui-annotation--badge';
+  readonly annotationBracket: 'ui-annotation--bracket';
+  readonly annotationBand: 'ui-annotation--band';
+  readonly annotationSlope: 'ui-annotation--slope';
+  readonly annotationCompare: 'ui-annotation--compare';
+  readonly annotationCluster: 'ui-annotation--cluster';
+  readonly annotationAxis: 'ui-annotation--axis';
+  readonly annotationTimeline: 'ui-annotation--timeline';
+  readonly annotationEvidence: 'ui-annotation--evidence';
+  readonly annotationAccent: 'ui-annotation--accent';
+  readonly annotationMuted: 'ui-annotation--muted';
+  readonly annotationSuccess: 'ui-annotation--success';
+  readonly annotationWarning: 'ui-annotation--warning';
+  readonly annotationDanger: 'ui-annotation--danger';
+  readonly annotationInfo: 'ui-annotation--info';
+  readonly annotationDraw: 'ui-annotation--draw';
+  readonly annotationPulse: 'ui-annotation--pulse';
+  readonly annotationReveal: 'ui-annotation--reveal';
+  readonly annotationFocus: 'ui-annotation--focus';
+  readonly mark: 'ui-mark';
+  readonly markAccent: 'ui-mark--accent';
+  readonly markSuccess: 'ui-mark--success';
+  readonly markWarning: 'ui-mark--warning';
+  readonly markDanger: 'ui-mark--danger';
+  readonly markInfo: 'ui-mark--info';
+  readonly markMuted: 'ui-mark--muted';
+  readonly markUnderline: 'ui-mark--underline';
+  readonly markBox: 'ui-mark--box';
+  readonly markStrike: 'ui-mark--strike';
+  readonly markDraw: 'ui-mark--draw';
+  readonly bracketNote: 'ui-bracket-note';
+  readonly bracketNoteLabel: 'ui-bracket-note__label';
+  readonly bracketNoteAccent: 'ui-bracket-note--accent';
+  readonly bracketNoteSuccess: 'ui-bracket-note--success';
+  readonly bracketNoteWarning: 'ui-bracket-note--warning';
+  readonly bracketNoteDanger: 'ui-bracket-note--danger';
+  readonly bracketNoteInfo: 'ui-bracket-note--info';
+  readonly connector: 'ui-connector';
+  readonly connectorPath: 'ui-connector__path';
+  readonly connectorEnd: 'ui-connector__end';
+  readonly connectorDashed: 'ui-connector--dashed';
+  readonly connectorAccent: 'ui-connector--accent';
+  readonly connectorMuted: 'ui-connector--muted';
+  readonly connectorSuccess: 'ui-connector--success';
+  readonly connectorWarning: 'ui-connector--warning';
+  readonly connectorDanger: 'ui-connector--danger';
+  readonly connectorInfo: 'ui-connector--info';
+  readonly connectorDraw: 'ui-connector--draw';
+  readonly spotlight: 'ui-spotlight';
+  readonly spotlightHole: 'ui-spotlight__hole';
+  readonly spotlightRing: 'ui-spotlight--ring';
+  readonly tourNote: 'ui-tour-note';
+  readonly tourNoteStep: 'ui-tour-note__step';
+  readonly tourNoteTitle: 'ui-tour-note__title';
+  readonly tourNoteBody: 'ui-tour-note__body';
+  readonly tourNoteActions: 'ui-tour-note__actions';
+  readonly crosshair: 'ui-crosshair';
+  readonly crosshairMuted: 'ui-crosshair--muted';
+  readonly crosshairLine: 'ui-crosshair__line';
+  readonly crosshairLineX: 'ui-crosshair__line--x';
+  readonly crosshairLineY: 'ui-crosshair__line--y';
+  readonly crosshairBadge: 'ui-crosshair__badge';
+  readonly readout: 'ui-readout';
+  readonly sel: 'ui-sel';
+  readonly selOn: 'ui-sel--on';
+  readonly selOff: 'ui-sel--off';
+  readonly selMaybe: 'ui-sel--maybe';
+  readonly citation: 'ui-citation';
+  readonly citationChip: 'ui-citation--chip';
+  readonly sourceList: 'ui-source-list';
+  readonly sourceListItem: 'ui-source-list__item';
+  readonly sourceCard: 'ui-source-card';
+  readonly sourceCardTitle: 'ui-source-card__title';
+  readonly sourceCardOrigin: 'ui-source-card__origin';
+  readonly sourceCardTime: 'ui-source-card__time';
+  readonly sourceCardExcerpt: 'ui-source-card__excerpt';
+  readonly sourceCardActions: 'ui-source-card__actions';
+  readonly provenance: 'ui-provenance';
+  readonly provenanceItem: 'ui-provenance__item';
+  readonly src: 'ui-src';
+  readonly srcVerified: 'ui-src--verified';
+  readonly srcUnverified: 'ui-src--unverified';
+  readonly srcGenerated: 'ui-src--generated';
+  readonly srcReviewed: 'ui-src--reviewed';
+  readonly srcStale: 'ui-src--stale';
+  readonly srcConflict: 'ui-src--conflict';
+  readonly state: 'ui-state';
+  readonly stateLabel: 'ui-state__label';
+  readonly stateDetail: 'ui-state__detail';
+  readonly stateBusy: 'ui-state--busy';
+  readonly stateSaving: 'ui-state--saving';
+  readonly stateSaved: 'ui-state--saved';
+  readonly stateQueued: 'ui-state--queued';
+  readonly stateOffline: 'ui-state--offline';
+  readonly stateStale: 'ui-state--stale';
+  readonly stateConflict: 'ui-state--conflict';
+  readonly stateError: 'ui-state--error';
+  readonly stateLocked: 'ui-state--locked';
+  readonly stateReviewed: 'ui-state--reviewed';
+  readonly stateNeedsReview: 'ui-state--needs-review';
+  readonly syncbar: 'ui-syncbar';
+  readonly generated: 'ui-generated';
+  readonly generatedLabel: 'ui-generated__label';
+  readonly originLabel: 'ui-origin-label';
+  readonly originLabelAi: 'ui-origin-label--ai';
+  readonly reasoning: 'ui-reasoning';
+  readonly reasoningBody: 'ui-reasoning__body';
+  readonly toolLog: 'ui-tool-log';
+  readonly toolCall: 'ui-tool-call';
+  readonly toolCallName: 'ui-tool-call__name';
+  readonly toolCallStatus: 'ui-tool-call__status';
+  readonly toolCallBody: 'ui-tool-call__body';
+  readonly inspector: 'ui-inspector';
+  readonly inspectorHead: 'ui-inspector__head';
+  readonly inspectorBody: 'ui-inspector__body';
+  readonly property: 'ui-property';
+  readonly propertyLabel: 'ui-property__label';
+  readonly propertyValue: 'ui-property__value';
+  readonly selectionbar: 'ui-selectionbar';
+  readonly selectionbarCount: 'ui-selectionbar__count';
+  readonly selectionbarActions: 'ui-selectionbar__actions';
+  readonly command: 'ui-command';
+  readonly commandInput: 'ui-command__input';
+  readonly commandList: 'ui-command__list';
+  readonly commandGroup: 'ui-command__group';
+  readonly commandItem: 'ui-command__item';
+  readonly commandShortcut: 'ui-command__shortcut';
+  readonly commandMeta: 'ui-command__meta';
+  readonly commandEmpty: 'ui-command__empty';
   readonly printOnly: 'ui-print-only';
   readonly screenOnly: 'ui-screen-only';
   readonly breakBefore: 'ui-break-before';
@@ -270,6 +443,8 @@ export declare const cls: {
   readonly keep: 'ui-keep';
   readonly printExact: 'ui-print-exact';
   readonly kbd: 'ui-kbd';
+  readonly shortcut: 'ui-shortcut';
+  readonly shortcutSep: 'ui-shortcut__sep';
   readonly display: 'ui-display';
   readonly mono: 'ui-mono';
   readonly muted: 'ui-muted';
@@ -292,7 +467,6 @@ export declare const cls: {
   readonly appShellFull: 'ui-app-shell--full';
   readonly appRail: 'ui-app-rail';
   readonly appRailBrand: 'ui-app-rail__brand';
-  readonly appRailToggle: 'ui-app-rail__toggle';
   readonly appRailFoot: 'ui-app-rail__foot';
   readonly appRailAccount: 'ui-app-rail__account';
   readonly appTopbar: 'ui-app-topbar';
@@ -338,6 +512,16 @@ export interface BadgeOpts {
 export interface NumOpts {
   tone?: 'pos' | 'neg' | 'muted';
 }
+export interface DeltaOpts {
+  /** Trend direction — sets the arrow glyph and the conventional tone. */
+  dir?: 'up' | 'down' | 'flat';
+  /** Swap only the tone when `up` is the bad direction (latency, error rate, cost). */
+  invert?: boolean;
+}
+export interface CompareOpts {
+  /** Pin exactly two equal columns (hard before/after) instead of the auto-fitting set. */
+  cols?: 2;
+}
 export interface ChipOpts {
   accent?: boolean;
 }
@@ -381,7 +565,7 @@ export interface ProgressOpts {
   indeterminate?: boolean;
 }
 export interface MeterOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
 }
 export interface DotspinnerOpts {
   size?: 'sm' | 'lg';
@@ -414,12 +598,106 @@ export interface InputIconOpts {
   /** Place the icon at the inline-end instead of the start. */
   end?: boolean;
 }
+export interface LegendOpts {
+  /** Stack entries vertically instead of the wrapping inline row. */
+  orient?: 'vertical';
+  /** Continuous colour ramp (`gradient`) or binned `threshold` key. Omit for the categorical default. */
+  type?: 'gradient' | 'threshold';
+  /** Use the 7-stop diverging ramp instead of the sequential one (gradient type). */
+  diverging?: boolean;
+  compact?: boolean;
+  /** Align a trailing `__value` column across rows. */
+  withValues?: boolean;
+  /** Entries are `<button aria-pressed>` toggles (pair with behaviors/legend.js). */
+  interactive?: boolean;
+}
+export interface LegendItemOpts {
+  /** Host-set inactive state. Equivalent to `[aria-pressed="false"]` on an interactive entry. */
+  inactive?: boolean;
+}
+export interface LegendSwatchOpts {
+  /** Categorical palette series 1–8 — sets the matching `--chart-N` colour. */
+  series?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  shape?: 'circle' | 'line';
+}
+export interface AnnotationOpts {
+  variant?: 'label' | 'callout' | 'elbow' | 'curve' | 'circle' | 'rect' | 'threshold' | 'badge' | 'bracket' | 'band' | 'slope' | 'compare' | 'cluster' | 'axis' | 'timeline' | 'evidence';
+  tone?: 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'info';
+  motion?: 'draw' | 'pulse' | 'reveal' | 'focus';
+}
+export interface MarkOpts {
+  /** How the mark is drawn. Omit for the highlight fill. */
+  style?: 'underline' | 'box' | 'strike';
+  /** `accent` is the rationed accent; status tones for status-bearing emphasis; `muted` for de-emphasis. */
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'muted';
+  /** Draw-on highlight sweep (respects `prefers-reduced-motion`). */
+  motion?: 'draw';
+}
+export interface BracketNoteOpts {
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
+}
+export interface ConnectorOpts {
+  tone?: 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'info';
+  dashed?: boolean;
+  /** Stroke the line in once (respects `prefers-reduced-motion`). */
+  motion?: 'draw';
+}
+export interface SpotlightOpts {
+  /** Add a ring around the cutout. */
+  ring?: boolean;
+}
+export interface CrosshairOpts {
+  /** A subtler, neutral crosshair instead of the accent. */
+  muted?: boolean;
+}
+export interface SelOpts {
+  /** Selection emphasis: `on` (selected), `off` (excluded), `maybe` (live-brush candidate). */
+  state?: 'on' | 'off' | 'maybe';
+}
+/** Trust state for the source/citation/provenance layer. Pair with an author-written label — never colour alone. */
+export type SrcState = 'verified' | 'unverified' | 'generated' | 'reviewed' | 'stale' | 'conflict';
+export interface CitationOpts {
+  /** Render as a named-source pill (leading tone dot) instead of an inline `[n]` reference. */
+  chip?: boolean;
+  state?: SrcState;
+}
+export interface SourceOpts {
+  /** Sets the source card's tone border. */
+  state?: SrcState;
+}
+export interface ProvenanceOpts {
+  /** Sets the provenance item's tone dot. */
+  state?: SrcState;
+}
+/** Canonical lifecycle state — sets the tone; pair with the canonical label (see docs/state.md). */
+export type LifecycleState =
+  | 'saving'
+  | 'saved'
+  | 'queued'
+  | 'offline'
+  | 'stale'
+  | 'conflict'
+  | 'error'
+  | 'locked'
+  | 'reviewed'
+  | 'needs-review';
+export interface StateOpts {
+  state?: LifecycleState;
+  /** Pulse the indicator for an in-progress state (saving / syncing / retrying). Reduced-motion-safe. */
+  busy?: boolean;
+}
+export interface OriginLabelOpts {
+  /** Accent-tint the label for AI/model-generated origin (vs a neutral tag). */
+  ai?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
   card(opts?: CardOpts): string;
   badge(opts?: BadgeOpts): string;
   num(opts?: NumOpts): string;
+  delta(opts?: DeltaOpts): string;
+  compare(opts?: CompareOpts): string;
   chip(opts?: ChipOpts): string;
   link(opts?: LinkOpts): string;
   dot(opts?: DotOpts): string;
@@ -442,6 +720,21 @@ export interface Ui {
   container(opts?: ContainerOpts): string;
   tag(opts?: TagOpts): string;
   inputIcon(opts?: InputIconOpts): string;
+  legend(opts?: LegendOpts): string;
+  legendItem(opts?: LegendItemOpts): string;
+  legendSwatch(opts?: LegendSwatchOpts): string;
+  annotation(opts?: AnnotationOpts): string;
+  mark(opts?: MarkOpts): string;
+  bracketNote(opts?: BracketNoteOpts): string;
+  connector(opts?: ConnectorOpts): string;
+  spotlight(opts?: SpotlightOpts): string;
+  crosshair(opts?: CrosshairOpts): string;
+  sel(opts?: SelOpts): string;
+  citation(opts?: CitationOpts): string;
+  source(opts?: SourceOpts): string;
+  provenance(opts?: ProvenanceOpts): string;
+  state(opts?: StateOpts): string;
+  originLabel(opts?: OriginLabelOpts): string;
 }
 
 export declare const ui: Ui;