@brunosouzas/design-system 0.0.0-stage → 0.1.0

package/dist/src/pieces/library.d.ts

@@ -0,0 +1,297 @@
+export * from "./metro.ts";
+type Point = [number, number];
+export type PillParams = {
+    x: number;
+    y: number;
+    text: string;
+    fill?: string;
+    width?: number;
+};
+/** Pill label centred on (x, y), usually overlapping the top edge of what it names. */
+export declare const pill: import("./piece.ts").Piece<PillParams>;
+export declare const RING_COUNT = 14;
+export type RingsParams = {
+    cx: number;
+    cy: number;
+    radius?: number;
+    color?: string;
+};
+/** Concentric rings around (cx, cy): 14 rings, step and width from the cover tokens. */
+export declare const rings: import("./piece.ts").Piece<RingsParams>;
+export type SheetRow = {
+    lead?: "none" | "checkbox" | "checked" | "question";
+    bar: number;
+    tail?: "none" | "check";
+};
+export type SheetParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rows: SheetRow[];
+    top?: number;
+    step?: number;
+    fill?: string;
+    leadFill?: string;
+    tick?: string;
+};
+/** A sheet of paper with rows of text bars, an optional lead mark and an optional tick at the end. */
+export declare const sheet: import("./piece.ts").Piece<SheetParams>;
+declare const CODE_COLOURS: {
+    readonly healthy: "#3DDC84";
+    readonly caller: "#8FB2FF";
+    readonly white: "#FFFFFF";
+    readonly backend: "#FF6B6B";
+};
+export type CodeLine = {
+    indent: number;
+    w: number;
+    color: keyof typeof CODE_COLOURS;
+    tall?: boolean;
+};
+export type CodePanelParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    lines: CodeLine[];
+    top?: number;
+    step?: number;
+};
+/** Dark code panel with coloured lines; a tall line marks the one under review. */
+export declare const codePanel: import("./piece.ts").Piece<CodePanelParams>;
+export type SpeechBubbleParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill?: string;
+};
+/** Chat slip with a tail at the bottom left and one white text line. */
+export declare const speechBubble: import("./piece.ts").Piece<SpeechBubbleParams>;
+export type BrowserWindowParams = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+/** Browser window: title bar with three dots, a hero block and two text lines. */
+export declare const browserWindow: import("./piece.ts").Piece<BrowserWindowParams>;
+export type FolderParams = {
+    x: number;
+    y: number;
+    scale?: number;
+};
+/** Open folder with two sheets peeking out, measured from the write-in-obsidian cover (190x198 at scale 1). */
+export declare const folder: import("./piece.ts").Piece<FolderParams>;
+export type BookParams = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+/** A closed book seen from the front: back page, front cover, spine and page edges. */
+export declare const book: import("./piece.ts").Piece<BookParams>;
+export type BlockArrowParams = {
+    x: number;
+    y: number;
+    length?: number;
+    fill?: string;
+};
+/** Chunky arrow pointing right, centred vertically on y. */
+export declare const blockArrow: import("./piece.ts").Piece<BlockArrowParams>;
+export type ArcArrowParams = {
+    from: Point;
+    c1: Point;
+    c2: Point;
+    to: Point;
+    color?: string;
+    dashed?: boolean;
+    width?: number;
+};
+/** Curved arrow (cubic Bézier) with a chevron head at `to`; solid or dashed. */
+export declare const arcArrow: import("./piece.ts").Piece<ArcArrowParams>;
+export type RailParams = {
+    x: number;
+    y: number;
+    width: number;
+    nodes: string[];
+    fill?: string;
+    thickness?: number;
+};
+/** A rail (track) with square nodes spread along it. */
+export declare const rail: import("./piece.ts").Piece<RailParams>;
+export type RoadParams = {
+    d: string;
+};
+/** A road: a wide grey band along a path with white dashes in the middle. */
+export declare const road: import("./piece.ts").Piece<RoadParams>;
+export type MilestonePinParams = {
+    x: number;
+    y: number;
+    text: string;
+    fill?: string;
+    stem?: number;
+};
+/** A pin standing on (x, y): a stem and a round head with a short label. */
+export declare const milestonePin: import("./piece.ts").Piece<MilestonePinParams>;
+export type PriceTagParams = {
+    x: number;
+    y: number;
+    text: string;
+    width?: number;
+    fill?: string;
+    stringFrom?: Point;
+};
+/** Price or version tag pointing left from its tip (x, y), with a hole and an optional string. */
+export declare const priceTag: import("./piece.ts").Piece<PriceTagParams>;
+export type NameTagParams = {
+    hangX: number;
+    hangY: number;
+    cx: number;
+    top: number;
+    rotate?: number;
+    icon: string;
+    fill?: string;
+};
+/** A name tag hanging on a string from (hangX, hangY), showing one EIP icon. */
+export declare const nameTag: import("./piece.ts").Piece<NameTagParams>;
+export type CheckBadgeParams = {
+    cx: number;
+    cy: number;
+    r?: number;
+};
+/** Green round badge with a tick. */
+export declare const checkBadge: import("./piece.ts").Piece<CheckBadgeParams>;
+export type StampParams = {
+    cx: number;
+    cy: number;
+    word: string;
+    fill?: string;
+    r?: number;
+    rotate?: number;
+    shape?: "round" | "rect";
+};
+/** Rubber stamp, round (dashed inner ring) or rectangular, tilted, with one word. */
+export declare const stamp: import("./piece.ts").Piece<StampParams>;
+export type RobotParams = {
+    cx: number;
+    top: number;
+};
+/** Robot: antenna, ears, green body with a visor and two eyes, mouth bars. Scale it with pose. */
+export declare const robot: import("./piece.ts").Piece<RobotParams>;
+export type MagnifierParams = {
+    cx: number;
+    cy: number;
+    r?: number;
+    color?: string;
+};
+/** Magnifier: lens centred on (cx, cy), handle to the bottom right. */
+export declare const magnifier: import("./piece.ts").Piece<MagnifierParams>;
+export type ServerStackParams = {
+    x: number;
+    y: number;
+    width?: number;
+    units?: number;
+    fill?: string;
+    failing?: number;
+};
+/** Stack of server units; the `failing` unit (0-based) shows a red light. */
+export declare const serverStack: import("./piece.ts").Piece<ServerStackParams>;
+export type CloudParams = {
+    cx: number;
+    cy: number;
+    scale?: number;
+    fill?: string;
+};
+export declare const cloud: import("./piece.ts").Piece<CloudParams>;
+export type GearParams = {
+    cx: number;
+    cy: number;
+    r?: number;
+    teeth?: number;
+    fill?: string;
+};
+/** Gear with square teeth and a white hub, as on the maven-release cover. */
+export declare const gear: import("./piece.ts").Piece<GearParams>;
+export type ParcelParams = {
+    x: number;
+    y: number;
+    size?: number;
+    fill?: string;
+};
+/** Parcel (box) with a lid line and a tape strip. */
+export declare const parcel: import("./piece.ts").Piece<ParcelParams>;
+export type StepsParams = {
+    x: number;
+    y: number;
+    count?: number;
+    width?: number;
+    rise?: number;
+    fill?: string;
+};
+/** Steps climbing to the right from the bottom-left corner (x, y), as on the obsidian-to-site guide cover. */
+export declare const steps: import("./piece.ts").Piece<StepsParams>;
+export type MuleTile = {
+    x: number;
+    kind: "scatter-gather" | "choice" | "for-each";
+};
+export type MuleFlowParams = {
+    x: number;
+    y: number;
+    width: number;
+    height?: number;
+    tiles: MuleTile[];
+    tileWidth?: number;
+    fill?: string;
+};
+/** A Mule flow: a bar with processor tiles linked left to right, each with its glyph. */
+export declare const muleFlow: import("./piece.ts").Piece<MuleFlowParams>;
+export type EipIconParams = {
+    name: string;
+    x: number;
+    y: number;
+    scale?: number;
+};
+/** One of the 26 EIP icons (64x40), placed at (x, y) and scaled; the cover's outline does not leak in. */
+export declare const eipIcon: import("./piece.ts").Piece<EipIconParams>;
+/** Every piece, by name, in catalogue order (spec illustration-pieces, "Piece catalogue"). */
+export declare const PIECES: {
+    readonly lineBadge: import("./piece.ts").Piece<import("./metro.ts").LineBadgeParams>;
+    readonly stationMarker: import("./piece.ts").Piece<import("./metro.ts").StationMarkerParams>;
+    readonly pipe: import("./piece.ts").Piece<import("./metro.ts").PipeParams>;
+    readonly countBadge: import("./piece.ts").Piece<import("./metro.ts").CountBadgeParams>;
+    readonly nodeBlock: import("./piece.ts").Piece<import("./metro.ts").NodeBlockParams>;
+    readonly pillNode: import("./piece.ts").Piece<import("./metro.ts").NodeParams>;
+    readonly hexNode: import("./piece.ts").Piece<import("./metro.ts").NodeParams>;
+    readonly messageArrow: import("./piece.ts").Piece<import("./metro.ts").MessageArrowParams>;
+    readonly ledgerMark: import("./piece.ts").Piece<import("./metro.ts").LedgerMarkParams>;
+    readonly pill: import("./piece.ts").Piece<PillParams>;
+    readonly rings: import("./piece.ts").Piece<RingsParams>;
+    readonly sheet: import("./piece.ts").Piece<SheetParams>;
+    readonly blockArrow: import("./piece.ts").Piece<BlockArrowParams>;
+    readonly arcArrow: import("./piece.ts").Piece<ArcArrowParams>;
+    readonly rail: import("./piece.ts").Piece<RailParams>;
+    readonly checkBadge: import("./piece.ts").Piece<CheckBadgeParams>;
+    readonly priceTag: import("./piece.ts").Piece<PriceTagParams>;
+    readonly nameTag: import("./piece.ts").Piece<NameTagParams>;
+    readonly codePanel: import("./piece.ts").Piece<CodePanelParams>;
+    readonly serverStack: import("./piece.ts").Piece<ServerStackParams>;
+    readonly cloud: import("./piece.ts").Piece<CloudParams>;
+    readonly stamp: import("./piece.ts").Piece<StampParams>;
+    readonly robot: import("./piece.ts").Piece<RobotParams>;
+    readonly magnifier: import("./piece.ts").Piece<MagnifierParams>;
+    readonly gear: import("./piece.ts").Piece<GearParams>;
+    readonly parcel: import("./piece.ts").Piece<ParcelParams>;
+    readonly road: import("./piece.ts").Piece<RoadParams>;
+    readonly milestonePin: import("./piece.ts").Piece<MilestonePinParams>;
+    readonly browserWindow: import("./piece.ts").Piece<BrowserWindowParams>;
+    readonly speechBubble: import("./piece.ts").Piece<SpeechBubbleParams>;
+    readonly steps: import("./piece.ts").Piece<StepsParams>;
+    readonly folder: import("./piece.ts").Piece<FolderParams>;
+    readonly book: import("./piece.ts").Piece<BookParams>;
+    readonly muleFlow: import("./piece.ts").Piece<MuleFlowParams>;
+    readonly eipIcon: import("./piece.ts").Piece<EipIconParams>;
+};
+export type PieceName = keyof typeof PIECES;
+export declare const PIECE_NAMES: PieceName[];