import { type CSSProperties, type ReactNode, type RefObject } from "react";
import type { WireframeElName, WireframeNode, WireframeTone } from "./wireframe.config.js";
/**
 * Shared wireframe "kit" — hand-drawn low-fi primitives, the el → component node
 * registry, the rough.js sketch overlay, and the viewer-level sketchy/clean
 * style preference. Ported verbatim (geometry-wise) from the plan template's
 * `app/components/plan/wireframe/kit/*` so any app can render wireframe blocks.
 *
 * DECOUPLING: the only behavioral change from the plan copy is theme detection —
 * core blocks read `document.documentElement.classList.contains("dark")` (the
 * MermaidBlock precedent) instead of importing `next-themes`. Everything else
 * (the `.plan-wf` / `.wf-*` / `[data-rough]` class contract the rough overlay
 * measures, the `--wf-*` / `--ink` / `--paper` token names every primitive
 * reads) is preserved exactly, so the kit looks identical in plan and renders
 * correctly in any app once the matching tokens exist in `core/styles/blocks.css`.
 */
export type WireframeStyle = "sketchy" | "clean";
export declare function setWireframeStyle(style: WireframeStyle): void;
export declare function toggleWireframeStyle(): void;
export declare function useWireframeStyle(): WireframeStyle;
/** Read the live dark-mode flag from the document root (next-themes-free). */
export declare function useIsDark(): boolean;
/**
 * Frame-level config threaded to every Screen so skeleton / theme / sketch-vs-
 * clean reach the kit no matter which path renders the root Screen.
 */
export declare const KitConfigContext: import("react").Context<{
    skeleton?: boolean;
    flushFrame?: boolean;
    sketch?: number;
    theme?: "light" | "dark";
    style?: "sketchy" | "clean";
}>;
declare const V: {
    readonly ink: "var(--ink)";
    readonly soft: "var(--ink-soft)";
    readonly line: "var(--line)";
    readonly paper: "var(--paper)";
    readonly card: "var(--card)";
    readonly accent: "var(--accent)";
    readonly accentSoft: "var(--accent-soft)";
    readonly warn: "var(--warn)";
    readonly warnSoft: "var(--warn-soft)";
    readonly ok: "var(--ok)";
    readonly okSoft: "var(--ok-soft)";
    readonly stroke: "var(--stroke)";
    readonly radius: "var(--radius)";
    readonly gap: "var(--gap)";
    readonly pad: "var(--pad)";
    readonly fs: "var(--fs)";
    readonly hand: "var(--font-hand)";
    readonly script: "var(--font-script)";
};
type ToneColors = {
    fg: string;
    bg: string;
    bd: string;
};
declare function toneColors(tone?: WireframeTone): ToneColors;
declare function toneInk(tone?: WireframeTone): string;
declare function fontWeight(weight?: "normal" | "medium" | "bold"): number;
export declare function Screen({ children, pad, sketch, density, theme, skeleton, style, }: {
    children?: ReactNode;
    pad?: number | string;
    sketch?: number;
    density?: "compact" | "regular" | "roomy";
    theme?: "light" | "dark";
    skeleton?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Hand({ children, size, weight, color, script, style, }: {
    children?: ReactNode;
    size?: number | string;
    weight?: number;
    color?: string;
    script?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Bar({ w, h, color, r, style, }: {
    w?: number | string;
    h?: number | string;
    color?: string;
    r?: number | string;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Lines({ n, gap, widths, color, style, }: {
    n?: number;
    gap?: number;
    widths?: Array<number | string>;
    color?: string;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Box({ children, pad, fill, dashed, style, }: {
    children?: ReactNode;
    pad?: number | string;
    fill?: string;
    dashed?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Check({ done, shape, size, }: {
    done?: boolean;
    shape?: "square" | "circle";
    size?: number;
}): import("react").JSX.Element;
export declare function Pill({ children, tone, style, }: {
    children?: ReactNode;
    tone?: WireframeTone;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Prio({ level, label }: {
    level?: number;
    label?: string;
}): import("react").JSX.Element;
export declare function Btn({ children, solid, full, size, tone, style, }: {
    children?: ReactNode;
    solid?: boolean;
    full?: boolean;
    size?: "sm" | "md" | "lg";
    tone?: WireframeTone;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Chip({ children, active, style, }: {
    children?: ReactNode;
    active?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Field({ label, value, placeholder, h, area, right, style, }: {
    label?: string;
    value?: string;
    placeholder?: number | string;
    h?: number | string;
    area?: boolean;
    right?: ReactNode;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function StatusBar(): import("react").JSX.Element;
export declare function Fab({ icon }: {
    icon?: string;
}): import("react").JSX.Element;
export declare function BrowserBar({ title, children, }: {
    title?: string;
    children?: ReactNode;
}): import("react").JSX.Element;
export declare function SectionLabel({ children, right, tone, }: {
    children?: ReactNode;
    right?: ReactNode;
    tone?: WireframeTone;
}): import("react").JSX.Element;
export declare function Avatar({ size }: {
    size?: number;
}): import("react").JSX.Element;
export declare function IconSquare({ size, active, }: {
    size?: number;
    active?: boolean;
}): import("react").JSX.Element;
export declare function NavItem({ label, count, active, dot, tone, }: {
    label?: string;
    count?: number;
    active?: boolean;
    dot?: boolean;
    tone?: WireframeTone;
}): import("react").JSX.Element;
export declare function Sidebar({ children, width, style, }: {
    children?: ReactNode;
    width?: number;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Main({ children, style, }: {
    children?: ReactNode;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Row({ children, full, style, }: {
    children?: ReactNode;
    full?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Col({ children, full, style, }: {
    children?: ReactNode;
    full?: boolean;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function TaskRow({ title, note, due, dueTone, prio, done, }: {
    title?: string;
    note?: string;
    due?: string;
    dueTone?: WireframeTone;
    prio?: number;
    done?: boolean;
}): import("react").JSX.Element;
export declare function Card({ children, style, }: {
    children?: ReactNode;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Column({ title, count, tone, width, children, }: {
    title?: string;
    count?: number;
    tone?: WireframeTone;
    width?: number;
    children?: ReactNode;
}): import("react").JSX.Element;
export declare function Toolbar({ children, style, }: {
    children?: ReactNode;
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Tabs({ items, }: {
    items?: Array<{
        label: string;
        active?: boolean;
    }>;
}): import("react").JSX.Element;
export declare function KV({ rows }: {
    rows?: Array<{
        k: string;
        v: string;
    }>;
}): import("react").JSX.Element;
export declare function SearchBar({ placeholder, }: {
    placeholder?: string;
}): import("react").JSX.Element;
export declare function Divider({ style }: {
    style?: CSSProperties;
}): import("react").JSX.Element;
export declare function Title({ text, script, size, color, }: {
    text?: string;
    script?: boolean;
    size?: number | string;
    color?: string;
}): import("react").JSX.Element;
export declare function Text({ value, color, weight, script, }: {
    value?: string;
    color?: WireframeTone;
    weight?: "normal" | "medium" | "bold";
    script?: boolean;
}): import("react").JSX.Element;
type NodeRenderer = (node: WireframeNode, children: ReactNode) => ReactNode;
declare const REGISTRY: Record<WireframeElName, NodeRenderer>;
/** Render a single kit-tree node (and its children, recursively). */
export declare function renderNode(node: WireframeNode, key?: string | number): ReactNode;
/** Render an array of nodes. */
export declare function renderNodes(nodes: WireframeNode[]): ReactNode;
/** Whether an `el` name has a registered renderer. */
export declare function hasRenderer(el: string): el is WireframeElName;
export { REGISTRY as NODE_REGISTRY, V as WFV, toneColors, toneInk, fontWeight };
/** The default selector used for HTML mockups: standard wireframe primitives plus explicit opt-ins. */
export declare const HTML_ROUGH_SELECTOR = "[data-rough],button,input,textarea,select,hr,.wf-btn,.wf-card,.wf-box,.wf-pill,.wf-chip,.wf-icon-fallback,[style*='border:'],[style*='border-top:'],[style*='border-right:'],[style*='border-bottom:'],[style*='border-left:']";
/** Map the 0–100 sketch slider to a rough.js roughness (calm + legible). */
export declare function sketchRoughness(sketch: number): number;
/** Rough.js cannot safely render paths whose inset consumes the whole box. */
export declare function hasDrawableRoughBounds(width: number, height: number, inset: number): boolean;
/**
 * Renders the rough overlay for a frame. `scopeRef` points at the frame root.
 * When `enabled` is false (skeleton / clean register) it renders nothing and the
 * crisp CSS borders stay visible.
 */
export declare function RoughOverlay({ scopeRef, sketch, enabled, drawFrame, frameRadius, selector, }: {
    scopeRef: RefObject<HTMLElement | null>;
    sketch?: number;
    enabled?: boolean;
    drawFrame?: boolean;
    frameRadius?: number;
    selector?: string;
}): import("react").JSX.Element | null;
//# sourceMappingURL=wireframe-kit.d.ts.map