@sragatiping/cuboid 0.1.0

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../theme/types';
+export interface CodeSnippetProps {
+    /** Any JSON-serialisable value */
+    data: unknown;
+    /**
+     * Start with all collapsible nodes collapsed.
+     * The user can then expand nodes individually.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Replace the built-in chevron icons with your own SVG components.
+     * You are responsible for sizing and coloring them.
+     *
+     * @example
+     * ```tsx
+     * import { ChevronRight, ChevronDown } from "lucide-react";
+     *
+     * <CodeSnippet
+     *   data={data}
+     *   icons={{
+     *     collapsed: <ChevronRight size={16} />,
+     *     expanded:  <ChevronDown size={16} />,
+     *   }}
+     * />
+     * ```
+     */
+    icons?: {
+        /** Shown when the node is collapsed. Defaults to a Material Design ChevronRight. */
+        collapsed?: React.ReactNode;
+        /** Shown when the node is expanded. Defaults to a Material Design ExpandMore. */
+        expanded?: React.ReactNode;
+    };
+    /**
+     * Fix the component to an exact height — content scrolls inside.
+     * Accepts any valid CSS value (e.g. "400px", "50vh", "20rem").
+     */
+    height?: string;
+    /**
+     * Cap the component height — content scrolls only when it exceeds this value.
+     * Accepts any valid CSS value (e.g. "400px", "50vh", "20rem").
+     */
+    maxHeight?: string;
+    /** Override any theme tokens for this instance */
+    theme?: CubeTheme;
+    /** Accessible label for the code region */
+    "aria-label"?: string;
+}
+export declare function CodeSnippet({ data, defaultCollapsed, icons, height, maxHeight, theme, "aria-label": ariaLabel, }: CodeSnippetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeSnippet/CodeSnippet.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeSnippet } from './CodeSnippet';
+declare const meta: Meta<typeof CodeSnippet>;
+export default meta;
+type Story = StoryObj<typeof CodeSnippet>;
+/** Real-world shaped device profile report — all nodes expanded by default */
+export declare const DeviceProfileReport: Story;
+/** Same report starting fully collapsed — drill into sections individually */
+export declare const DeviceProfileCollapsed: Story;
+/** Just the nested sections that benefit most from expand/collapse */
+export declare const PolicyDetails: Story;
+export declare const VelocityVariables: Story;
+export declare const KeyAttributes: Story;
+/** Fills the full viewport height — simulates being dropped into a page layout */
+export declare const FullViewportHeight: Story;
+/** Dark theme override */
+export declare const DarkTheme: Story;

package/dist/components/CodeSnippet/__fixtures__/device-profile-report.d.ts

@@ -0,0 +1,422 @@
+/**
+ * Fictional device-profile report modelled after a real fraud-detection
+ * vendor response. All vendor names, personal details, IPs, session IDs,
+ * addresses, and phone numbers are fabricated.
+ *
+ * Vendor name: NexusGuard (fictional)
+ */
+declare const deviceProfileReport: {
+    entityName: string;
+    requestKey: string;
+    active: boolean;
+    expiresDn: string;
+    createdOn: string;
+    reportPullDate: string;
+    status: string;
+    statusMessage: string;
+    data: {
+        os: string;
+        is_os: string;
+        nonce: string;
+        ua_os: string;
+        dns_ip: string;
+        org_id: string;
+        policy: string;
+        browser: string;
+        page_id: string;
+        true_ip: string;
+        api_type: string;
+        gpu_name: string;
+        proxy_ip: string;
+        ssn_hash: string;
+        vm_index: string;
+        cpu_clock: string;
+        cpu_cores: string;
+        device_id: string;
+        etag_guid: string;
+        time_zone: string;
+        ua_os_alt: string;
+        vm_rating: string;
+        vm_reason: string;
+        agent_type: string;
+        digital_id: string;
+        dns_ip_geo: string;
+        dns_ip_isp: string;
+        enabled_ck: string;
+        enabled_il: string;
+        enabled_im: string;
+        enabled_js: string;
+        event_type: string;
+        gpu_vendor: string;
+        is_browser: string;
+        os_anomaly: string;
+        os_version: string;
+        proxy_type: string;
+        request_id: string;
+        screen_res: string;
+        session_id: string;
+        ua_browser: string;
+        webgl_hash: string;
+        api_version: string;
+        canvas_hash: string;
+        cidr_number: string;
+        dns_ip_city: string;
+        dns_ip_home: string;
+        plugin_hash: string;
+        proxy_score: string;
+        reason_code: string[];
+        risk_rating: string;
+        true_ip_geo: string;
+        true_ip_isp: string;
+        ua_platform: string;
+        account_name: string;
+        bb_bot_score: string;
+        device_score: string;
+        http_referer: string;
+        image_loaded: string;
+        input_ip_geo: string;
+        input_ip_isp: string;
+        mirth_routine: string;
+        page_time_on: string;
+        policy_score: string;
+        profiled_url: string;
+        proxy_ip_geo: string;
+        proxy_ip_isp: string;
+        service_type: string;
+        system_state: string;
+        true_ip_city: string;
+        true_ip_home: string;
+        true_ip_result: string;
+        uar_os_sig_raw: string;
+        turn_os_sig_rtl: string;
+        browser_language: string;
+        css_image_loaded: string;
+        custom_output_10: string;
+        custom_output_2: string;
+        dns_ip_latitude: string;
+        fuzzy_device_id: string;
+        input_ip_region: string;
+        input_ip_result: string;
+        js_fonts_number: string;
+        profiled_domain: string;
+        profiling_delta: string;
+        proxy_ip_region: string;
+        proxy_ip_result: string;
+        screen_res_zoom: string;
+        ssn_hash_result: string;
+        ngx_reason_code: string[];
+        audio_context: string;
+        api_caller_ip: string;
+        bb_assessment: string;
+        bb_bot_rating: string;
+        device_memory: string;
+        device_result: string;
+        dns_ip_postal_code: string;
+        NexusGuardJDRule: null;
+        NexusGuardTrueId: string;
+        NexusGuardAgentId: null;
+        NexusGuardVMIndex: string;
+        NexusGuardChasScore: null;
+        NexusGuardDeviceID: string;
+        NexusGuardDnsIPGeo: string;
+        NexusGuardEventing: null;
+        NexusGuardTimeZone: string;
+        NexusGuardIsMobile: string;
+        NexusGuardAPINumber: null;
+        NexusGuardAgentName: null;
+        NexusGuardCarrierID: null;
+        NexusGuardDnsIPCity: string;
+        NexusGuardImageLoaded: string;
+        NexusGuardInputIPCity: string;
+        NexusGuardInputIPRegion: string;
+        NexusGuardInputIPResult: string;
+        NexusGuardProxyIPCity: string;
+        NexusGuardProxyIPRegion: string;
+        NexusGuardProxyIPResult: string;
+        NexusGuardProxyIPScore: string;
+        NexusGuardReviewStatus: string;
+        NexusGuardRiskRating: string;
+        NexusGuardTrueIPGeo: string;
+        NexusGuardTrueIPRegion: string;
+        NexusGuardTrueIPResult: string;
+        NexusGuardTurnDsSignT: string;
+        NexusGuardWebSessionID: null;
+        NexusGuardAccountNumber: null;
+        NexusGuardBBFraudRating: string;
+        NexusGuardBrowserString: string;
+        NexusGuardCcNumberHashFirstSeen: null;
+        NexusGuardCdNumberHashLastEvent: null;
+        NexusGuardChallengeMethod: null;
+        NexusGuardDeviceImeResult: null;
+        NexusGuardDeviceImeFirstSeen: null;
+        NexusGuardDeviceImeLastEvent: null;
+        NexusGuardDeviceLastAssertion: null;
+        NexusGuardDigitalIdConfidence: string;
+        NexusGuardDigitalIdTrustScoreRating: string;
+        NexusGuardFuzzyDeviceMatchResult: string;
+        NexusGuardHttpRefDomainFirstSeen: null;
+        NexusGuardInputIPOrganization: string;
+        NexusGuardPasswordHashLastUpdate: null;
+        NexusGuardPasswordHashWorstScore: null;
+        NexusGuardProxyIPHostingFacility: null;
+        NexusGuardShippingAddressCountry: null;
+        NexusGuardShippingAddressZipCode: null;
+        NexusGuardAccountEmailWorstScore: string;
+        NexusGuardAccountLoginLastUpdate: null;
+        NexusGuardAccountLoginWorstScore: null;
+        NexusGuardAccountNumberFirstSeen: null;
+        NexusGuardAccountNumberLastEvent: null;
+        NexusGuardBrowserStringMismatch: null;
+        NexusGuardCarrierAccountResult: null;
+        NexusGuardCarrierIdResult: null;
+        NexusGuardChallengeRiskMailing: null;
+        NexusGuardDeviceImeLastUpdate: null;
+        NexusGuardDnsIpHostingFacility: null;
+        NexusGuardFuzzyDeviceFirstSeen: string;
+        NexusGuardFuzzyDeviceLastEvent: string;
+        NexusGuardInputIPLastAssertion: null;
+        NexusGuardInputIPRoutingCode: string;
+        NexusGuardLocalTimeOffsetRange: null;
+        NexusGuardNationalIdAttributes: null;
+        NexusGuardPageFingerprintCheck: null;
+        NexusGuardPageFingerprintScore: null;
+        NexusGuardPrivateBrowsing: string;
+        NexusGuardProfileDomainFirstSeen: null;
+        NexusGuardTrueIpFirstSeen: string;
+        NexusGuardTrueIpLastEvent: string;
+        NexusGuardTrueIpIncSpeed: string;
+        NexusGuardAccountFirstName: null;
+        NexusGuardAccountNameScore: string;
+        NexusGuardAccountTelephone: string;
+        NexusGuardAuthStatusReason: null;
+        NexusGuardCcBinNumberBrand: null;
+        NexusGuardChallengePolicy: null;
+        NexusGuardAccountTelephoneResult: string;
+        NexusGuardAccountTelephoneLastUpdate: string;
+        NexusGuardAccountTelephoneWorstScore: string;
+        NexusGuardDeviceFingerprintFirstSeen: null;
+        NexusGuardDeviceFingerprintLastUpdate: null;
+        NexusGuardDeviceFingerprintWorstScore: null;
+        NexusGuardHttpRefDomainAssertHistory: null;
+        NexusGuardHttpRefDomainLastAssertion: null;
+        NexusGuardInputIPConnectionType: string;
+        NexusGuardNationalIdLastUpdate: null;
+        NexusGuardNationalIdWorstScore: null;
+        NexusGuardPageFingerprintFirstSeen: null;
+        NexusGuardPageFingerprintLastEvent: null;
+        NexusGuardProfileDomainLastAssertion: null;
+        NexusGuardShippingAddressBillVAddress: null;
+        NexusGuardShippingAddressFirstSeen: null;
+        NexusGuardShippingAddressLastEvent: null;
+        NexusGuardSmartLearningFraudRating: null;
+        NexusGuardAccountEmailLastAssertion: null;
+        NexusGuardAccountLoginLastAssertion: null;
+        NexusGuardAccountTelephoneFirstSeen: string;
+        NexusGuardAccountTelephoneLastEvent: string;
+        NexusGuardCarrierAccountLastAssertion: null;
+        NexusGuardCarrierMobileNumberResult: null;
+        NexusGuardCcBinNumberCategory: null;
+        NexusGuardDeviceAssertHistory: null;
+        NexusGuardDeviceImeFirstAssertion: null;
+        NexusGuardDeviceImeLastAssertion: null;
+        NexusGuardDriversLicenseHashScore: null;
+        NexusGuardDriversLicenceHashLastEvent: null;
+        NexusGuardProfileDomainAssertHistory: null;
+        NexusGuardTransactionShippingCurrency: null;
+        NexusGuardTransactionShippingAmount: null;
+        NexusGuardAccountAddressLastUpdate: null;
+        NexusGuardAccountAddressWorstScore: null;
+        NexusGuardAccountNameLastAssertion: null;
+        NexusGuardAgentPublickeyHashFirstSeen: string;
+        NexusGuardAgentPublickeyHashLastEvent: string;
+        NexusGuardAgentPublicKeyHashLastUpdate: string;
+        NexusGuardAgentPublickeyHashWorstScore: string;
+        NexusGuardDriversLicenseHashFirstSeen: null;
+        NexusGuardPageFingerprintLastAssertion: null;
+        NexusGuardPasswordHashLastAssertion: null;
+        NexusGuardShippingAddressLastUpdate: null;
+        NexusGuardShippingAddressWorstScore: null;
+        NexusGuardAccountAddressIPNormalized: null;
+        NexusGuardAgentPublicKeyHashFirstSeen: string;
+        NexusGuardAgentPublicKeyHashLastEvent: string;
+        NexusGuardCarrierAccountFirstSeen: null;
+        NexusGuardCarrierAccountLastEvent: null;
+        NexusGuardDeviceFirstSeen: string;
+        NexusGuardDeviceLastUpdate: string;
+        NexusGuardDeviceWorstScore: string;
+        NexusGuardDnsIPRoutingType: string;
+        NexusGuardFuzzyDeviceScale: string;
+        NexusGuardInputIPFirstSeen: string;
+        NexusGuardInputIPLastEvent: string;
+        NexusGuardInputIPLineSpeed: string;
+        NexusGuardIpActivitiesDesc: null;
+        NexusGuardIpAttributesDesc: null;
+        NexusGuardNationalIdNumber: null;
+        NexusGuardNationalIdResult: null;
+        NexusGuardProxyIPFirstSeen: string;
+        NexusGuardProxyIPLastEvent: string;
+        NexusGuardProxyIpLineSpeed: string;
+        NexusGuardSsnHashFirstSeen: null;
+        NexusGuardSsnHashLastEvent: null;
+        NexusGuardScreenResAnomaly: null;
+        NexusGuardTrueIpLastUpdate: string;
+        NexusGuardTrueIpPostalCode: string;
+        NexusGuardTrueIpWorstScore: string;
+        NexusGuardAccountAddressZip: string;
+        NexusGuardAccountEmailScore: string;
+        NexusGuardAccountLoginScore: null;
+        NexusGuardAccountNameLastUpdate: string;
+        NexusGuardAccountNameWorstScore: string;
+        NexusGuardAccountTelephoneScore: string;
+        NexusGuardBrowserLanguageAnomaly: null;
+        NexusGuardDriversLicenseHashResult: null;
+        NexusGuardFuzzyDeviceLastAssertion: null;
+        NexusGuardHoneypotFingerprintCheck: string;
+        NexusGuardHoneypotFingerprintMatch: string;
+        NexusGuardPageFingerprintLastUpdate: null;
+        NexusGuardPageFingerprintWorstScore: null;
+        NexusGuardShippingAddressLastAssertion: null;
+        NexusGuardAccountAddressLastAssertion: null;
+        NexusGuardAccountAddressZipNormalized: null;
+        NexusGuardAccountEmailFirstSeen: string;
+        NexusGuardAccountEmailLastEvent: string;
+        NexusGuardAccountAddressStreet1: string;
+        NexusGuardAccountAddressStreet2: string;
+        NexusGuardAccountEmailLastUpdate: string;
+        NexusGuardChallengePolicyScore: null;
+        NexusGuardFuzzyDeviceLastUpdate: string;
+        NexusGuardFuzzyDeviceWorstScore: string;
+        NexusGuardOnlineIDLastAssertion: null;
+        NexusGuardPageFingerprintResult: null;
+        NexusGuardPasswordHashFirstSeen: null;
+        NexusGuardPasswordHashLastEvent: null;
+        NexusGuardProxyIPConnectionType: string;
+        NexusGuardShippingAddressCity: null;
+        NexusGuardTransactionAuthAmount: null;
+        NexusGuardWebSessionIDFirstSeen: null;
+        NexusGuardWebSessionIDLastEvent: null;
+        battery_status: {
+            level: number;
+            status: string;
+        };
+        bb_fraud_score: string;
+        browser_string: string;
+        event_datetime: string;
+        input_ip_score: string;
+        local_attrib_1: string;
+        local_attrib_2: string;
+        local_attrib_3: string;
+        local_attrib_4: string;
+        local_attrib_5: string;
+        mime_type_hash: string;
+        proxy_ip_score: string;
+        request_result: string;
+        true_ip_region: string;
+        ub_browser_alt: string;
+        bb_fraud_rating: string;
+        browser_version: string;
+        proxy_ip_latitude: string;
+        ng_variables: {
+            _cc_per_exactid_hour: string;
+            _cc_per_smartid_hour: string;
+            _cc_per_smartid_gbl_hour: string;
+            _exactid_gbl_velocity_hour: string;
+            _smartid_gbl_velocity_hour: string;
+            customerneverprofiledlocal: string;
+            _accemail_gbl_velocity_hour: string;
+            _accphone_gbl_velocity_hour: string;
+            _exactid_per_email_gbl_hour: string;
+            universalrulepolicycallout: string;
+            _accteeails_per_exactid_hour: string;
+            _acnt_login_per_exactid_hour: string;
+            _acnt_login_per_smartid_hour: string;
+            _acntemails_per_smartid_hour: string;
+            _exactid_local_velocity_hour: string;
+            _smartid_local_velocity_hour: string;
+            _accemail_local_velocity_hour: string;
+            _acntemails_per_exactid_gbl_hour: string;
+            count_distinct_ssn_per_smart_id_local_7days: string;
+        };
+        true_ip_score: string;
+        NexusGuardAccountLoginLastSeen: null;
+        NexusGuardAccountLoginLastEvent: null;
+        NexusGuardAccountCountNameFirstSeen: string;
+        NexusGuardAccountCountNameLastEvent: string;
+        NexusGuardBrowserStringLanguageAnomaly: null;
+        NexusGuardCarrierIDLastUpdate: null;
+        NexusGuardCdNumberHashFirstSeen: null;
+        NexusGuardChallengeReviewStatus: null;
+        NexusGuardFuzzyDeviceConfidence: string;
+        NexusGuardHttpRefDomainActivities: null;
+        NexusGuardHttpRefDomainLastUpdate: null;
+        NexusGuardInputIPDomainFirstSeen: null;
+        NexusGuardShippingAddressCounty: null;
+        NexusGuardShippingAddressStreet1: null;
+        NexusGuardShippingAddressStreet2: null;
+        NexusGuardSmartLearningRiskRank: null;
+        NexusGuardAccountAddressFirstSeen: null;
+        NexusGuardAccountAddressLastEvent: null;
+        NexusGuardAgentPublicKeyHashResult: string;
+        NexusGuardDigitalIdConfidenceRating: string;
+        NexusGuardCarrierMobileNumberLastAssertion: null;
+        NexusGuardDriversLicenceHashResult: null;
+        NexusGuardDriversLicenceHashLastResult: null;
+        NexusGuardTransactionAuthCurrency: null;
+        NexusGuardTrueIpHostingFacility: null;
+        NexusGuardAccountAddressScore: null;
+        NexusGuardAccountNumberLastAssertion: null;
+        NexusGuardCarrierAccountLastUpdate: null;
+        NexusGuardCarrierAccountWorstScore: null;
+        NexusGuardCarrierMobileNumberFirstSeen: null;
+        NexusGuardCarrierMobileNumberLastEvent: null;
+        NexusGuardCarrierMobileNumberMatchResult: null;
+        NexusGuardDeviceFingerprintLastAssertion: null;
+        NexusGuardDriversLicenceHashFirstSeen: null;
+        NexusGuardDriversLicenseHashLastEvent: null;
+        policy_details_api: {
+            policy_detail_api: {
+                type: string;
+                customer: {
+                    pvid: string;
+                    vars: ({
+                        rid: string;
+                        value: string;
+                        variable: string;
+                        ovid?: undefined;
+                        score?: undefined;
+                        reason_code?: undefined;
+                    } | {
+                        rid: string;
+                        ovid: string;
+                        score: string;
+                        reason_code: string;
+                        value?: undefined;
+                        variable?: undefined;
+                    })[];
+                };
+            }[];
+        };
+    };
+    keyAttributes: {
+        lino: boolean;
+        ffreeze: boolean;
+        market: string;
+        disputed: boolean;
+        submarket: string;
+        bureauName: string;
+        suppressed: boolean;
+        doNotPromote: boolean;
+        initialFraud: boolean;
+        reportStatus: string;
+        extendedFraud: boolean;
+        reportedNames: {
+            person: {
+                last: string;
+                first: string;
+                middle: string;
+            };
+            source: string;
+        }[];
+    };
+};
+export default deviceProfileReport;

package/dist/components/CodeSnippet/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeSnippet } from './CodeSnippet';
+export type { CodeSnippetProps } from './CodeSnippet';

package/dist/components/CodeSnippet/tokenizer.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Converts any JSON-compatible value into a flat array of CodeLines.
+ *
+ * Two-pass design:
+ *   1. walkValue() recurses through the data, building lines while respecting
+ *      the current collapsedPaths set (collapsed subtrees are skipped).
+ *   2. The caller re-runs buildLines() whenever collapsedPaths changes,
+ *      which also recomputes sequential line numbers automatically.
+ *
+ * No external dependencies — pure TypeScript.
+ */
+export type TokenType = "key" | "string" | "string_url" | "string_email" | "string_uuid" | "number" | "boolean" | "null" | "bracket" | "operator" | "punctuation" | "ellipsis";
+export interface Token {
+    type: TokenType;
+    value: string;
+}
+export interface CodeLine {
+    /** 1-indexed. Recomputed every render pass so it stays correct after collapse. */
+    lineNumber: number;
+    /** Nesting depth — drives visual indentation. */
+    depth: number;
+    /** Ordered list of styled tokens that make up this line's content. */
+    tokens: Token[];
+    /**
+     * Present on opening-bracket lines (the first line of an object/array).
+     * Used as the key into collapsedPaths and as the toggle button's identifier.
+     */
+    collapseKey?: string;
+    /**
+     * True when collapseKey is set and the node is currently collapsed.
+     * Drives which chevron is rendered (▶ vs ▼).
+     */
+    isCollapsed?: boolean;
+    /**
+     * "summary" rows are the `… N lines` placeholder emitted between the opening
+     * and closing bracket of a collapsed node. Rendered with a muted highlight.
+     */
+    kind?: "summary";
+}
+/**
+ * Build the full list of visible CodeLines for the given data and collapse state.
+ * Call again whenever collapsedPaths changes.
+ */
+export declare function buildLines(data: unknown, collapsedPaths: Set<string>): CodeLine[];
+/**
+ * Collect every JSON path that CAN be collapsed (i.e. every non-empty object/array).
+ * Used to initialise the fully-collapsed state.
+ */
+export declare function getAllCollapsiblePaths(data: unknown, path?: string): Set<string>;

package/dist/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,11 @@
+import { CubeTheme } from '../../theme/types';
+export interface DataGridProps {
+    /** JSON-serializable row data (shape TBD) */
+    data: unknown;
+    /** Override any theme tokens for this instance */
+    theme?: CubeTheme;
+}
+/**
+ * Table-style JSON viewer — implementation TBD.
+ */
+export declare function DataGrid({ data }: DataGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps } from './DataGrid';

package/dist/components/Graph/GraphCanvas.d.ts

@@ -0,0 +1,15 @@
+import { default as React, CSSProperties } from 'react';
+export interface GraphCanvasProps {
+    children?: React.ReactNode;
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+    /** Initial zoom level. Default 1. */
+    defaultZoom?: number;
+    /** Initial pan offset. Default { x: 0, y: 0 }. */
+    defaultPan?: {
+        x: number;
+        y: number;
+    };
+    style?: CSSProperties;
+}
+export declare function GraphCanvas({ children, width, height, defaultZoom, defaultPan, style, }: GraphCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Graph/GraphCanvas.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { GraphCanvas } from './GraphCanvas';
+/**
+ * GraphCanvas — generic, use-case agnostic canvas primitives.
+ *
+ * These stories demonstrate the mechanics of the graph system:
+ * pan/zoom, handle registration, and edge drawing.
+ *
+ * GraphCard already has sensible visual defaults from the theme
+ * (background, border, shadow, padding, gap) so it looks good
+ * with any ReactNode as children.
+ *
+ * For the JSON-specific content layer (JsonCardTitle, JsonFieldRow,
+ * JsonObjectRow) see the JsonGraph stories.
+ */
+declare const meta: Meta<typeof GraphCanvas>;
+export default meta;
+type Story = StoryObj<typeof GraphCanvas>;
+export declare const TwoCards: Story;
+export declare const ThreeCards: Story;

package/dist/components/Graph/GraphCard.d.ts

@@ -0,0 +1,31 @@
+import { default as React, CSSProperties } from 'react';
+export interface GraphCardProps {
+    /** Unique identifier — used to build handle keys ("id:handleId"). */
+    id: string;
+    /** Position in canvas space (pixels, before zoom). */
+    x: number;
+    y: number;
+    /** Minimum card width. Content can make it wider. */
+    minWidth?: number;
+    children?: React.ReactNode;
+    /**
+     * Override any visual default (background, border, padding, gap …).
+     * Merged on top of theme defaults so partial overrides work naturally.
+     */
+    style?: CSSProperties;
+    className?: string;
+}
+/**
+ * A positioned, theme-styled container in the graph canvas.
+ *
+ * Visual defaults (background, border, shadow, padding, gap, border-radius)
+ * come from the active theme so the card looks good out of the box. Override
+ * any of them via the `style` prop, or swap the whole theme via `ThemeProvider`.
+ *
+ * Provides `CardContext` so any nested `GraphHandle` knows which card it
+ * belongs to when registering its canvas-space position.
+ *
+ * `overflow: visible` is intentional — handle dots extend beyond the card
+ * boundary and must not be clipped.
+ */
+export declare function GraphCard({ id, x, y, minWidth, children, style, className, }: GraphCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Graph/GraphEdge.d.ts

@@ -0,0 +1,27 @@
+export interface EdgeEndpoint {
+    /** The GraphCard id. */
+    node: string;
+    /** The GraphHandle id within that card. */
+    handle: string;
+}
+export interface GraphEdgeProps {
+    from: EdgeEndpoint;
+    to: EdgeEndpoint;
+    /** Stroke colour. Default: a neutral grey. */
+    color?: string;
+    /** Stroke width in canvas pixels. Default 1.5. */
+    strokeWidth?: number;
+    /**
+     * How strongly the bezier control points pull horizontally.
+     * 0 = straight line. 0.5 = gentle S-curve (default). 1 = strong pull.
+     */
+    curvature?: number;
+}
+/**
+ * Draws a smooth bezier curve between two GraphHandle positions.
+ *
+ * Renders nothing in its own DOM position — it portals a <path> element
+ * directly into the GraphCanvas SVG layer so edges always render in the
+ * correct coordinate space (behind cards, inside the canvas transform).
+ */
+export declare function GraphEdge({ from, to, color, strokeWidth, curvature, }: GraphEdgeProps): import('react').ReactPortal | null;

package/dist/components/Graph/GraphHandle.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export type HandleSide = "left" | "right" | "top" | "bottom";
+export interface GraphHandleProps {
+    /** Must be unique within its card. Edge references: "cardId:handleId". */
+    id: string;
+    side: HandleSide;
+    /**
+     * Radius of the D-shape semicircle in pixels — the bump protrudes this far
+     * from the card border. Default 12.
+     */
+    size?: number;
+    /** Dot fill colour. Defaults to the theme's blue accent. */
+    color?: string;
+    style?: CSSProperties;
+}
+export declare function GraphHandle({ id, side, size, color, style }: GraphHandleProps): import("react/jsx-runtime").JSX.Element;