@ship-it-ui/shipit 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,461 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, SVGAttributes } from 'react';
+import { BadgeProps } from '@ship-it-ui/ui';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * AskBar — the primary "ask anything" input. The leading ✦ glyph + accent
+ * caret give it the same identity as the Copilot bubbles. Submit with the
+ * button or `⌘↵` / `Ctrl↵`.
+ *
+ * Children are rendered as scope chips below the textarea (use the existing
+ * `<Chip>` from @ship-it-ui/ui to mark a scoped query). Children render slot is
+ * the "scopes" row — leave empty for an unscoped bar.
+ */
+interface AskBarProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires with the current query when submitted (button or ⌘↵). */
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    /** Streaming caret next to the input. */
+    streaming?: boolean;
+    /** Submit button label. Default `Ask`. */
+    submitLabel?: ReactNode;
+    /** Disable submit. */
+    disabled?: boolean;
+    /** Pixel max-width. Default 620. */
+    maxWidth?: number | string;
+}
+declare const AskBar: react.ForwardRefExoticComponent<AskBarProps & react.RefAttributes<HTMLFormElement>>;
+
+interface CitationProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Citation number (1-indexed). */
+    index: number;
+    /** Source label — e.g., `runbook-oncall.md:L42`. */
+    source?: ReactNode;
+    /** Connector / origin line — e.g., `notion · updated 2d ago`. */
+    meta?: ReactNode;
+    /** Inline superscript variant (renders the number only, no source row). */
+    inline?: boolean;
+}
+declare const Citation: react.ForwardRefExoticComponent<CitationProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * ConfidenceIndicator — horizontal bar + percent + tier label. The tier tone
+ * is derived automatically from the value (high ≥ 95, medium ≥ 80, low ≥ 50,
+ * unverified < 50) but can be overridden via `tier`.
+ */
+type ConfidenceTier = 'high' | 'medium' | 'low' | 'unverified';
+interface ConfidenceIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** Confidence value 0..100. */
+    value: number;
+    /** Override the auto-derived tier. */
+    tier?: ConfidenceTier;
+    /** Override the tier label. */
+    label?: ReactNode;
+    /** Pixel width of the bar. Default 120. */
+    width?: number;
+    /** Hide the percent number. */
+    hideValue?: boolean;
+}
+declare const ConfidenceIndicator: react.ForwardRefExoticComponent<ConfidenceIndicatorProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * CopilotMessage — chat bubble for the AI conversation. Two roles:
+ * `user` (right-aligned implicit, panel-2 background) and `assistant`
+ * (left-aligned, framed panel + border). Pass `streaming` to render a pulsing
+ * caret at the end of the body.
+ */
+type CopilotRole = 'user' | 'assistant';
+interface CopilotMessageProps extends HTMLAttributes<HTMLDivElement> {
+    role: CopilotRole;
+    /** Avatar initials (or full node) shown on the side. */
+    avatar?: ReactNode;
+    /** Streaming caret at the end of the body. */
+    streaming?: boolean;
+}
+declare const CopilotMessage: react.ForwardRefExoticComponent<CopilotMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ReasoningBlock — collapsible "Reasoning · N steps · 1.8s" disclosure. Shows
+ * the chain-of-thought / step trace expanded or collapsed. Pass `<ReasoningStep>`
+ * children for each step.
+ */
+interface ReasoningBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Override the heading label (defaults to `Reasoning · N steps`). */
+    label?: ReactNode;
+    /** Visible step count when label is auto. Defaults to children length. */
+    stepCount?: number;
+    /** Visible duration label (e.g., `1.8s`). */
+    duration?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ReasoningBlock: react.ForwardRefExoticComponent<ReasoningBlockProps & react.RefAttributes<HTMLDivElement>>;
+interface ReasoningStepProps extends HTMLAttributes<HTMLDivElement> {
+    /** 1-indexed step number. Renders accent-colored before the body. */
+    step: number;
+}
+declare const ReasoningStep: react.ForwardRefExoticComponent<ReasoningStepProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * SuggestionChip — pill-shaped prompt suggestion. The ✦ glyph prefix signals
+ * "ask about this" and matches the AskBar's identity.
+ */
+interface SuggestionChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Override the leading glyph. Defaults to `✦`. */
+    glyph?: ReactNode;
+}
+declare const SuggestionChip: react.ForwardRefExoticComponent<SuggestionChipProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ToolCallCard — visual card for a function/tool invocation in the AI
+ * conversation. Shows a `TOOL` badge, the tool name, status (running →
+ * duration · result), and an optional code/args preview body.
+ *
+ * Pass `running` to render a streaming caret next to the timing. When the
+ * call completes, replace `running` with `duration` and optionally `result`.
+ */
+interface ToolCallCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tool / function name. Rendered in mono. */
+    name: ReactNode;
+    /** Status text — e.g., `94ms · 142 rows`. */
+    status?: ReactNode;
+    /** When true, shows a streaming caret next to the status. */
+    running?: boolean;
+    /** Optional preformatted body — typically args or a query preview. */
+    children?: ReactNode;
+}
+declare const ToolCallCard: react.ForwardRefExoticComponent<ToolCallCardProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Canonical ShipIt entity vocabulary. The six types are the categories the
+ * graph cares about — anything else is rendered as `service` by default.
+ */
+type EntityType = 'service' | 'person' | 'document' | 'deployment' | 'incident' | 'ticket';
+declare const ENTITY_GLYPH: Record<EntityType, string>;
+declare const ENTITY_LABEL: Record<EntityType, string>;
+declare const ENTITY_TONE_CLASS: Record<EntityType, string>;
+declare const ENTITY_TONE_BG: Record<EntityType, string>;
+
+interface EntityBadgeProps extends Omit<BadgeProps, 'variant'> {
+    type: EntityType;
+    /** Override the visible label. Defaults to the canonical type label. */
+    label?: ReactNode;
+    /** Hide the leading glyph. */
+    hideGlyph?: boolean;
+}
+declare const EntityBadge: react.ForwardRefExoticComponent<EntityBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * EntityCard — display card for a graph entity. Plate (icon + tinted bg),
+ * title, optional subtitle / description, and an optional stats grid.
+ *
+ * Stats render in a 2- or 3-column grid below the description; pass `[]` (or
+ * omit) to skip them.
+ */
+interface EntityStat {
+    label: ReactNode;
+    value: ReactNode;
+    /** Tone for the value text — defaults to plain `text-text`. */
+    tone?: 'accent' | 'ok' | 'warn' | 'err' | 'muted';
+}
+interface EntityCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    type: EntityType;
+    title: ReactNode;
+    /** Subtitle line — typically owner / scope. */
+    subtitle?: ReactNode;
+    /** Body description. */
+    description?: ReactNode;
+    /** Stat tiles. Up to 6 fit comfortably across one row. */
+    stats?: ReadonlyArray<EntityStat>;
+    /** Right-side actions (buttons). */
+    actions?: ReactNode;
+    /** Override the leading glyph. */
+    glyph?: ReactNode;
+}
+declare const EntityCard: react.ForwardRefExoticComponent<EntityCardProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * EntityListRow — compact row for entity lists (e.g., dependents / dependencies
+ * panels on a detail page). Glyph dot + name + optional relation pill +
+ * optional trailing meta.
+ *
+ * Renders as a button when `onClick` is supplied; otherwise a plain row.
+ */
+interface EntityListRowProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    type: EntityType;
+    /** Entity name / id. Rendered in mono. */
+    name: ReactNode;
+    /** Trailing pill (e.g., relation type: `OWNED_BY`). */
+    relation?: ReactNode;
+    /** Trailing meta line (e.g., a timestamp). */
+    meta?: ReactNode;
+    /** When provided, the row becomes a clickable button. */
+    onClick?: () => void;
+    /** When true, hides the leading glyph dot. */
+    hideGlyph?: boolean;
+}
+declare const EntityListRow: react.ForwardRefExoticComponent<EntityListRowProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * GraphEdge — SVG `<line>` (or `<path>` if curve points are provided) rendered
+ * with one of four canonical styles. Place inside a parent `<svg>`.
+ *
+ * For curves, pass `curve={{ cx, cy }}` — the edge becomes `M x1,y1 Q cx,cy x2,y2`.
+ * Pass `arrowheadId="arr-accent"` and define a matching `<defs><marker id="arr-accent">…</marker></defs>`
+ * once in your SVG to enable arrows.
+ */
+type GraphEdgeStyle = 'solid' | 'dashed' | 'highlighted' | 'dim';
+interface GraphEdgeProps extends Omit<SVGAttributes<SVGElement>, 'd'> {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    /** Optional Q-curve control point. */
+    curve?: {
+        cx: number;
+        cy: number;
+    };
+    edgeStyle?: GraphEdgeStyle;
+    /** Stroke color override. Defaults to the style's tone. */
+    color?: string;
+    /** Marker id for an arrowhead. */
+    arrowheadId?: string;
+}
+declare const GraphEdge: react.ForwardRefExoticComponent<GraphEdgeProps & react.RefAttributes<SVGElement>>;
+
+/**
+ * GraphInspector — drill-in panel that appears next to a selected graph node.
+ * Header (type badge + id), title + description, properties table, and a
+ * relations list.
+ *
+ * The component is presentation-only: data shape mirrors what an inspector
+ * needs to show, without prescribing how the consumer fetches it.
+ */
+interface InspectorProperty {
+    key: ReactNode;
+    value: ReactNode;
+}
+interface InspectorRelation {
+    /** Direction or label, e.g., `→ depends on`. Rendered in mono. */
+    relation: ReactNode;
+    /** Related entity name. */
+    entity: ReactNode;
+}
+interface GraphInspectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    type: EntityType;
+    /** Right-side machine id (e.g., `ent_0x7a2f`). */
+    entityId?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    properties?: ReadonlyArray<InspectorProperty>;
+    relations?: ReadonlyArray<InspectorRelation>;
+    /** Total relation count if `relations` is a partial slice. */
+    relationCount?: number;
+}
+declare const GraphInspector: react.ForwardRefExoticComponent<GraphInspectorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface GraphLegendEntry {
+    /** Entity type (resolves color + label automatically) or a custom shape. */
+    type?: EntityType;
+    color?: string;
+    label: ReactNode;
+}
+interface GraphLegendProps extends HTMLAttributes<HTMLDivElement> {
+    entries?: ReadonlyArray<GraphLegendEntry>;
+    /** Heading rendered above the entries. Default `Legend`. */
+    heading?: ReactNode;
+}
+declare const GraphLegend: react.ForwardRefExoticComponent<GraphLegendProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * GraphMinimap — miniature scatter of node positions with a translucent
+ * rectangle marking the current viewport. Coordinates are normalized to
+ * [0, 1] × [0, 1]; the minimap renders them inside its fixed pixel box.
+ */
+interface MinimapPoint {
+    /** Normalized x, 0..1. */
+    x: number;
+    /** Normalized y, 0..1. */
+    y: number;
+    /** Optional dot color. */
+    color?: string;
+}
+interface MinimapViewport {
+    /** Top-left x, normalized 0..1. */
+    x: number;
+    /** Top-left y, normalized 0..1. */
+    y: number;
+    /** Width as a fraction of the minimap, 0..1. */
+    width: number;
+    /** Height as a fraction of the minimap, 0..1. */
+    height: number;
+}
+interface GraphMinimapProps extends HTMLAttributes<HTMLDivElement> {
+    points: ReadonlyArray<MinimapPoint>;
+    viewport?: MinimapViewport;
+    /** Pixel width. Default 120. */
+    width?: number;
+    /** Pixel height. Default 72. */
+    height?: number;
+}
+declare const GraphMinimap: react.ForwardRefExoticComponent<GraphMinimapProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * GraphNode — visual representation of a graph node. Six entity-type variants
+ * × five states (default, hover, selected, on-path, dimmed). The component
+ * itself is presentation-only; pan / zoom / drag is the host's job.
+ */
+type GraphNodeState = 'default' | 'hover' | 'selected' | 'path' | 'dim';
+interface GraphNodeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    type: EntityType;
+    state?: GraphNodeState;
+    /** Override the leading glyph. */
+    glyph?: ReactNode;
+    /** Caption rendered below the node. */
+    label?: ReactNode;
+    /** Pixel size of the square. Default 52. */
+    size?: number;
+    /** Use the node's "on a path" purple ring even if state isn't `path`. */
+    pathColor?: string;
+}
+declare const GraphNode: react.ForwardRefExoticComponent<GraphNodeProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PathOverlay — `<polyline>` highlighting a multi-hop path through the graph.
+ * Renders inside a parent `<svg>`; takes the path as a list of `{ x, y }`
+ * waypoints and draws a thicker, accent-tone line plus an optional shadow
+ * stroke for legibility on busy backgrounds.
+ */
+interface PathPoint {
+    x: number;
+    y: number;
+}
+interface PathOverlayProps extends Omit<SVGAttributes<SVGGElement>, 'points'> {
+    points: ReadonlyArray<PathPoint>;
+    /** Stroke color. Defaults to the path-emphasis purple. */
+    color?: string;
+    /** Stroke width in px. Default 2.5. */
+    width?: number;
+    /** Halo shadow stroke for legibility. Default true. */
+    halo?: boolean;
+}
+declare const PathOverlay: react.ForwardRefExoticComponent<PathOverlayProps & react.RefAttributes<SVGGElement>>;
+
+/**
+ * CTAStrip — full-width call-to-action band. Title + body + actions, on a
+ * gradient panel background. Sits between feature sections and the footer.
+ */
+interface CTAStripProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+declare const CTAStrip: react.ForwardRefExoticComponent<CTAStripProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * FeatureGrid — responsive grid of feature tiles. Each tile shows a glyph,
+ * title, body description.
+ */
+interface Feature {
+    glyph: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+}
+interface FeatureGridProps extends HTMLAttributes<HTMLDivElement> {
+    features: ReadonlyArray<Feature>;
+    /** Columns at the largest breakpoint. Default 3. */
+    columns?: 2 | 3 | 4;
+}
+declare const FeatureGrid: react.ForwardRefExoticComponent<FeatureGridProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Footer — site footer with brand on the left and grouped link columns on
+ * the right, plus a copyright line below a divider.
+ */
+interface FooterLink {
+    label: ReactNode;
+    href: string;
+}
+interface FooterColumn {
+    heading: ReactNode;
+    links: ReadonlyArray<FooterLink>;
+}
+interface FooterProps extends HTMLAttributes<HTMLElement> {
+    /** Brand label (logo + word mark). */
+    brand?: ReactNode;
+    columns: ReadonlyArray<FooterColumn>;
+    /** Copyright / legal line. */
+    copyright?: ReactNode;
+    /** Right-side closing line (e.g., `made with care · san francisco`). */
+    closing?: ReactNode;
+}
+declare const Footer: react.ForwardRefExoticComponent<FooterProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Hero — landing-page top section. Optional eyebrow / pill above the headline,
+ * a large heading (children of `<h1>`), a body description, and an action row.
+ *
+ * Designed for marketing surfaces only — do not bring this into the app.
+ */
+interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Eyebrow / pill rendered above the headline. */
+    eyebrow?: ReactNode;
+    /** Headline. Pass JSX to highlight a phrase (e.g., `<span className="text-accent">…</span>`). */
+    title: ReactNode;
+    /** Subheading. */
+    description?: ReactNode;
+    /** Action buttons row. */
+    actions?: ReactNode;
+    /** Trailing visual (right-side image, animation). When provided, the hero
+     * switches to a two-column layout. */
+    visual?: ReactNode;
+}
+declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * PricingCard — single tier in a pricing table. Shows tier name, price,
+ * description, list of features (with ✓ markers), and an action button slot.
+ *
+ * Pass `featured` to highlight the card with an accent border + tinted
+ * background for the "recommended" tier.
+ */
+interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tier name — e.g., `Pro`, `Team`. */
+    tier: ReactNode;
+    /** Price. Pass JSX (`<span>$29</span><span> / mo</span>`) for layout. */
+    price: ReactNode;
+    /** Short description below the tier name. */
+    description?: ReactNode;
+    /** Feature bullet list. */
+    features: ReadonlyArray<ReactNode>;
+    /** Action button (typically a `<Button>`). */
+    action?: ReactNode;
+    /** Highlight as the recommended tier. */
+    featured?: boolean;
+}
+declare const PricingCard: react.ForwardRefExoticComponent<PricingCardProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Testimonial — pull-quote with author + role. Centered for marketing
+ * surfaces.
+ */
+interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'role'> {
+    /** The quoted body. */
+    quote: ReactNode;
+    /** Author display name. */
+    author: ReactNode;
+    /** Author role / company. */
+    role?: ReactNode;
+    /** Avatar initials or full node. */
+    avatar?: ReactNode;
+}
+declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & react.RefAttributes<HTMLElement>>;
+
+export { AskBar, type AskBarProps, CTAStrip, type CTAStripProps, Citation, type CitationProps, ConfidenceIndicator, type ConfidenceIndicatorProps, type ConfidenceTier, CopilotMessage, type CopilotMessageProps, type CopilotRole, ENTITY_GLYPH, ENTITY_LABEL, ENTITY_TONE_BG, ENTITY_TONE_CLASS, EntityBadge, type EntityBadgeProps, EntityCard, type EntityCardProps, EntityListRow, type EntityListRowProps, type EntityStat, type EntityType, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GraphEdge, type GraphEdgeProps, type GraphEdgeStyle, GraphInspector, type GraphInspectorProps, GraphLegend, type GraphLegendEntry, type GraphLegendProps, GraphMinimap, type GraphMinimapProps, GraphNode, type GraphNodeProps, type GraphNodeState, Hero, type HeroProps, type InspectorProperty, type InspectorRelation, type MinimapPoint, type MinimapViewport, PathOverlay, type PathOverlayProps, type PathPoint, PricingCard, type PricingCardProps, ReasoningBlock, type ReasoningBlockProps, ReasoningStep, type ReasoningStepProps, SuggestionChip, type SuggestionChipProps, Testimonial, type TestimonialProps, ToolCallCard, type ToolCallCardProps, cn };