@activecollab/components/dist/esm/presentation/whiteboard/linkElement.d.ts

ActiveCollab Components

import React, { ReactElement } from "react";
import { ShapeTool } from "./bottomDock";
import { IStackedCardProps } from "../../components/StackedCard";
import { LinkDisplay, MockLink } from "../stackedCard/content";
/**
 * The only canvas element here built on the shipped design-system
 * `StackedCard`. The shell is hollow, so the board supplies the visual state
 * (`selected`) and the width, and the content comes from `LinkCard` — which
 * renders the unfurl lifecycle, not a static layout.
 *
 * Link cards are AUTO-HEIGHT. The host sets the width; the height follows the
 * content. That is why drawing a box commits only its width, and why resizing
 * is width-only.
 */
export declare const CARD_MIN_WIDTH = 180;
export declare const CARD_MAX_WIDTH = 420;
export declare const CARD_DRAW_THRESHOLD = 8;
export declare const clampCardWidth: (width: number) => number;
export declare const LINK_DEFAULT_WIDTH = 260;
export declare const isValidLinkUrl: (value: string) => boolean;
export declare const linkDomain: (url: string) => string;
export declare const LINK_PALETTE: string[];
export declare const linkColor: (domain: string, offset: number) => string;
export declare const KNOWN_LINKS: MockLink[];
/**
 * The fake "server" response for a URL — what `GET /link-previews/...` would
 * eventually hold. Known hosts get their seed; anything else resolves to a
 * generic article keyed off its own domain, so pasting an arbitrary link still
 * produces a believable card instead of an empty one.
 */
export declare const resolveMockLink: (url: string) => MockLink;
export declare const PRIVATE_HOST: RegExp;
export declare const isUnfurlable: (domain: string) => boolean;
/** A link element on the board. Position lives in the shared positions map. */
export interface LinkElementDef {
    id: string;
    width: number;
    /** null while the card is an empty placeholder waiting for a URL. */
    url: string | null;
}
export declare const LINK_DISPLAY: LinkDisplay;
export declare const StyledLinkCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<IStackedCardProps & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
export declare const StyledLinkEditArea: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledLinkInput: import("styled-components").StyledComponent<"input", any, {
    $invalid?: boolean;
}, never>;
export declare const StyledLinkHint: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../..").ICaptionProps & Omit<import("../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
export declare const StyledShapePreview: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const shapePreviewGlyph: (tool: ShapeTool, width: number, height: number) => ReactElement;
export declare const StyledLinkDraft: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface LinkFormattingToolbarProps {
    url: string;
    onEditUrl: () => void;
    onDelete: () => void;
}
export declare const LinkFormattingToolbar: ({ url, onEditUrl, onDelete, }: LinkFormattingToolbarProps) => ReactElement;
/**
 * The card's three resize callbacks, handed down untouched from the board. The
 * grip reports deltas measured from the gesture START and brackets the stream
 * with a start and a commit, so a card is only a conduit — the board resolves
 * what a delta means.
 */
export type CardResizeHandlers = Pick<IStackedCardProps, "onResizeStart" | "onResizeDelta" | "onResizeCommit">;
export interface LinkPreviewCardProps {
    element: LinkElementDef;
    selected: boolean;
    resize: CardResizeHandlers;
    onEditUrl: () => void;
    onDelete: () => void;
}
/**
 * A link element with a committed URL: the card runs the unfurl lifecycle.
 *
 * One controller per card, and the seed is memoized on the URL so the board's
 * own re-renders (drag, selection, a grid change) never restart the ladder.
 */
export declare const LinkPreviewCard: ({ element, selected, resize, onEditUrl, onDelete, }: LinkPreviewCardProps) => ReactElement;
export interface LinkElementProps {
    element: LinkElementDef;
    selected: boolean;
    /** Open the editor as soon as a freshly drawn placeholder lands. */
    autoEdit: boolean;
    onCommitUrl: (url: string) => void;
    resize: CardResizeHandlers;
    onDelete: () => void;
}
/**
 * The three phases of a link element:
 *
 *   placeholder  drawn but empty — an interactive invitation, distinct from the
 *                loading skeleton (spec §5)
 *   editing      the inline URL field, with the shell's `entered` ring and drag
 *                switched off
 *   preview      a URL is committed; the unfurl lifecycle takes over
 */
export declare const LinkElement: ({ element, selected, autoEdit, onCommitUrl, resize, onDelete, }: LinkElementProps) => ReactElement;
//# sourceMappingURL=linkElement.d.ts.map