@selectwin/kit 0.1.88 → 0.1.90

package/dist/SelectFlowCanvas.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+export type SelectFlowEdgeState = 'default' | 'on' | 'muted';
+export interface SelectFlowEdge {
+    id: string;
+    /** `d` de um <path> SVG, em coordenadas do canvas. */
+    d: string;
+    state?: SelectFlowEdgeState;
+}
+export interface SelectFlowLabel {
+    id: string;
+    x: number;
+    y: number;
+    text: ReactNode;
+    /** `yes` = saída afirmativa de uma decisão (verde). */
+    tone?: 'neutral' | 'yes';
+    /** No caminho do teste. */
+    active?: boolean;
+}
+export interface SelectFlowPlus {
+    id: string;
+    x: number;
+    y: number;
+    /** Nome acessível e dica — o que o "+" insere ali. */
+    label: string;
+    onClick: () => void;
+}
+export interface SelectFlowCanvasProps {
+    /** Tamanho do desenho em px (antes do zoom). */
+    width: number;
+    height: number;
+    edges: SelectFlowEdge[];
+    labels?: SelectFlowLabel[];
+    pluses?: SelectFlowPlus[];
+    /** Os nós (`SelectFlowNode`) e qualquer conteúdo posicionado no canvas. */
+    children?: ReactNode;
+    /** Zoom controlado; sem ele o canvas guarda o próprio. */
+    zoom?: number;
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Clique no fundo (fora de nó) — normalmente limpa a seleção. */
+    onBackgroundClick?: () => void;
+    ariaLabel: string;
+}
+export declare function SelectFlowCanvas({ width, height, edges, labels, pluses, children, zoom, defaultZoom, onZoomChange, minZoom, maxZoom, onBackgroundClick, ariaLabel, }: SelectFlowCanvasProps): import("react").JSX.Element;
+export interface SelectFlowNodeProps {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /**
+     * `card` = passo (gatilho, espera, envio) · `decision` = pergunta, com pontas laterais de fluxograma ·
+     * `pill` = desfecho curto no fim de um ramo ("Para a fila") · `terminal` = fim do fluxo, tracejado.
+     */
+    shape?: 'card' | 'decision' | 'pill' | 'terminal';
+    /** Cor do chip do ícone (só `card`). */
+    tone?: 'primary' | 'info' | 'warning' | 'success' | 'neutral';
+    icon?: ReactNode;
+    /** Número de ordem (só `decision`). */
+    order?: ReactNode;
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Badges embaixo do texto. */
+    tags?: ReactNode;
+    /** Título em tom de alerta (ex.: "Escolher mensagem"). */
+    titleTone?: 'default' | 'warning';
+    selected?: boolean;
+    /** No caminho do teste. */
+    active?: boolean;
+    /** Fora do caminho, pausado ou inalcançável. */
+    muted?: boolean;
+    invalid?: boolean;
+    onClick?: () => void;
+    ariaLabel?: string;
+}
+export declare function SelectFlowNode({ x, y, width, height, shape, tone, icon, order, eyebrow, title, subtitle, tags, titleTone, selected, active, muted, invalid, onClick, ariaLabel, }: SelectFlowNodeProps): import("react").JSX.Element;
+export interface SelectFlowLayoutProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Voltar (seta à esquerda do título). */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Controles do meio da barra (ex.: o seletor de fluxo). */
+    toolbar?: ReactNode;
+    /** Ações à direita (estado de salvamento, Salvar). */
+    actions?: ReactNode;
+    /** Aviso/erro acima do canvas. */
+    error?: ReactNode;
+    /** O `SelectFlowCanvas`. */
+    canvas: ReactNode;
+    /** Cabeçalho fixo do painel lateral (ex.: abas Editar | Testar). */
+    inspectorHead?: ReactNode;
+    inspector: ReactNode;
+    inspectorLabel?: string;
+}
+/**
+ * SelectFlowLayout — a página de um editor de fluxo: barra (voltar · identidade · ferramentas · ações),
+ * o canvas ocupando o que sobra e um painel lateral para o bloco selecionado. Como o
+ * `SelectBuilderWorkspace`, mede `height: 100%` e governa a própria rolagem (o shell zera o respiro
+ * de rodapé para ela). Em telas estreitas o painel desce para baixo do canvas.
+ */
+export declare function SelectFlowLayout({ title, subtitle, onBack, backLabel, toolbar, actions, error, canvas, inspectorHead, inspector, inspectorLabel, }: SelectFlowLayoutProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -168,6 +168,7 @@ export { SelectNumberField } from './SelectNumberField';
 export { SelectRepeatingFieldArray } from './SelectRepeatingFieldArray';
 export { SelectBuilderLayout } from './SelectBuilderLayout';
 export { SelectBuilderWorkspace } from './SelectBuilderWorkspace';
+export { SelectFlowCanvas, SelectFlowNode, SelectFlowLayout } from './SelectFlowCanvas';
 export { SelectSwitchField } from './SelectSwitchField';
 export { SelectColorField } from './SelectColorField';
 export { SelectImageField } from './SelectImageField';
@@ -176,6 +177,7 @@ export type { SelectNumberFieldProps } from './SelectNumberField';
 export type { SelectRepeatingFieldArrayProps, SelectRepeatingRowHelpers } from './SelectRepeatingFieldArray';
 export type { SelectBuilderLayoutProps } from './SelectBuilderLayout';
 export type { SelectBuilderSection, SelectBuilderWorkspaceProps } from './SelectBuilderWorkspace';
+export type { SelectFlowCanvasProps, SelectFlowNodeProps, SelectFlowEdge, SelectFlowEdgeState, SelectFlowLabel, SelectFlowPlus, SelectFlowLayoutProps } from './SelectFlowCanvas';
 export type { SelectSwitchFieldProps } from './SelectSwitchField';
 export type { SelectColorFieldProps } from './SelectColorField';
 export type { SelectImageFieldProps } from './SelectImageField';