@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/motion-diagrams-2d/CameraRig.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface CameraKeyframe {
+    /** Frame when the camera begins moving toward this target */
+    startFrame: number;
+    /** World X coordinate to center in the viewport */
+    x: number;
+    /** World Y coordinate to center in the viewport */
+    y: number;
+    /** Camera zoom factor (1.0 = 1:1 with 1920x1080) */
+    zoom: number;
+    /** Subtle 2D camera banking angle in degrees */
+    rotateZ?: number;
+    /** Optional spring stiffness override */
+    stiffness?: number;
+    /** Optional mid-flight zoom dip for long camera flights */
+    flightZoomDip?: number;
+    /** Optional mid-flight banking angle (deg) */
+    flightBankDeg?: number;
+}
+export interface CameraRigProps {
+    keyframes: CameraKeyframe[];
+    stageWidth?: number;
+    stageHeight?: number;
+    variant?: 'light' | 'dark';
+    children: React.ReactNode;
+}
+export declare function evaluateCameraState(frame: number, fps: number, keyframes: CameraKeyframe[]): {
+    x: number;
+    y: number;
+    zoom: number;
+    rotateZ: number;
+    velocity: number;
+};
+export declare const CameraRig: React.FC<CameraRigProps>;

package/dist/motion-diagrams-2d/CodePayloadToast.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface CodePayloadToastProps {
+    x: number;
+    y: number;
+    width?: number;
+    methodBadge: string;
+    endpoint: string;
+    latencyText?: string;
+    code: string;
+    accentColor?: string;
+    startFrame: number;
+    endFrame: number;
+}
+export declare const CodePayloadToast: React.FC<CodePayloadToastProps>;

package/dist/motion-diagrams-2d/DataFlowEdge.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface Point2D {
+    x: number;
+    y: number;
+}
+export interface DataFlowEdgeProps {
+    id: string;
+    from: Point2D;
+    to: Point2D;
+    curveOffsetY?: number;
+    color?: string;
+    secondaryColor?: string;
+    drawStartFrame?: number;
+    flowStartFrame?: number;
+    flowEndFrame?: number;
+    packetCount?: number;
+    traverseFrames?: number;
+    direction?: 'forward' | 'reverse';
+    label?: string;
+    subLabel?: string;
+    labelOffsetY?: number;
+}
+export declare function evaluateCubicBezier(p0: Point2D, p1: Point2D, p2: Point2D, p3: Point2D, t: number): Point2D;
+export declare const DataFlowEdge: React.FC<DataFlowEdgeProps>;

package/dist/motion-diagrams-2d/NodeBox.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+/**
+ * Single Source of Truth for node coordinates on the 2D canvas.
+ * Use `portTop`, `portBottom`, `portLeft`, and `portRight` to connect SVG edges
+ * mathematically to card borders without manual coordinate guessing.
+ */
+export interface NodeBox {
+    cx: number;
+    cy: number;
+    w: number;
+    h: number;
+}
+export declare const portRight: (n: NodeBox, dy?: number) => {
+    x: number;
+    y: number;
+};
+export declare const portLeft: (n: NodeBox, dy?: number) => {
+    x: number;
+    y: number;
+};
+export declare const portTop: (n: NodeBox, dx?: number) => {
+    x: number;
+    y: number;
+};
+export declare const portBottom: (n: NodeBox, dx?: number) => {
+    x: number;
+    y: number;
+};
+export interface WorldBoxProps {
+    node: NodeBox;
+    scale?: number;
+    opacity?: number;
+    zIndex?: number;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+export declare const WorldBox: React.FC<WorldBoxProps>;
+export interface FlowCurveProps {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    /** Vertical arch offset for horizontal connections */
+    curveY?: number;
+    /** Horizontal detour arch offset for vertical connections (e.g. bypassing section headers) */
+    curveX?: number;
+    orientation?: 'horizontal' | 'vertical';
+    color?: string;
+    activeFromFrame: number;
+    /** Packet traversal time in frames @ 60 FPS (recommended: 92..120 frames) */
+    packetSpeedFrames?: number;
+    packetCount?: number;
+    strokeWidth?: number;
+    dashed?: boolean;
+    blocked?: boolean;
+}
+/**
+ * Animated SVG Bézier connection line with mathematical port terminals
+ * and smooth 60 FPS data packet flow.
+ */
+export declare const FlowCurve: React.FC<FlowCurveProps>;

package/dist/motion-diagrams-2d/SystemNode.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface SystemNodeProps {
+    id: string;
+    title: string;
+    subtitle: string;
+    badge: string;
+    statusText: string;
+    activeStatusText?: string;
+    icon: LucideIcon;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    accentColor?: string;
+    enterFrame?: number;
+    activeRanges?: Array<[number, number]>;
+    metricsLabel?: string;
+    metricsValue?: string;
+}
+export declare const SystemNode: React.FC<SystemNodeProps>;