@panphora/bevel 0.1.0

package/dist/react/components/code-editor.d.ts

@@ -0,0 +1,122 @@
+import { EditorView } from '@codemirror/view';
+import { Compartment, type Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+import { type ComponentProps, type RefObject } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export declare const wrapCompartment: Compartment;
+export declare const darkCompartment: Compartment;
+/** iOS zooms the page when a focused editable is under 16px, contenteditable included. */
+export declare function coarsePointer(): boolean;
+/** Wrapping is remembered per device. A blocked or absent store falls back to the pointer. */
+export declare function storedWrap(coarse: boolean): boolean;
+export declare function rememberWrap(on: boolean): boolean;
+export declare const wrapExtension: (on: boolean) => Extension;
+export declare const bevelHighlight: HighlightStyle;
+/** One theme serves both modes: the tokens are light-dark() and the dark flag is a facet. */
+export declare function bevelEditorTheme(coarse: boolean): Extension;
+export interface CodeEditorExtensionOptions {
+    coarse: boolean;
+    wrapped: boolean;
+    dark: boolean;
+    onSave: () => void;
+    onDocChange: () => void;
+    onFindChange: (open: boolean) => void;
+}
+export declare function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange }: CodeEditorExtensionOptions): Extension[];
+export type CodeEditorAction = 'undo' | 'redo' | 'find' | 'outdent' | 'indent' | 'wrap' | 'fold' | 'suggest';
+interface CodeEditorState {
+    view: EditorView | null;
+    register: (view: EditorView | null) => void;
+    doc: string;
+    coarse: boolean;
+    dark: boolean;
+    wrapped: boolean;
+    dirty: boolean;
+    /** The host clears the flag through this once its own write has landed. `save()` never clears it. */
+    setDirty: (next: boolean | ((previous: boolean) => boolean), details: ChangeDetails) => void;
+    findOpen: boolean;
+    extensions: Extension[];
+    root: RefObject<HTMLDivElement | null>;
+    save: () => void;
+    run: (action: CodeEditorAction) => void;
+}
+export declare function useCodeEditor(): CodeEditorState;
+export interface CodeEditorProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** The document, read once. React never re-renders the editor while it is being typed in. */
+    doc: string;
+    onSave?: (doc: string, view: EditorView) => void;
+    dirty?: boolean;
+    defaultDirty?: boolean;
+    onDirtyChange?: (dirty: boolean, details: ChangeDetails) => void;
+    wrap?: boolean;
+    defaultWrap?: boolean;
+    onWrapChange?: (wrap: boolean, details: ChangeDetails) => void;
+    /** The mounted view, and null when it is torn down. The tab drives live sync through it. */
+    onViewChange?: (view: EditorView | null) => void;
+    extensions?: Extension[];
+}
+declare function Root({ doc, onSave, dirty, defaultDirty, onDirtyChange, wrap, defaultWrap, onWrapChange, onViewChange, extensions, ref, children, ...props }: CodeEditorProps): import("react").JSX.Element;
+declare function Dirty({ children, hidden, ...props }: ComponentProps<'i'>): import("react").JSX.Element;
+export interface CodeEditorToolProps extends ComponentProps<'button'> {
+    action?: CodeEditorAction;
+}
+declare function Tool({ action, children, onClick, ...props }: CodeEditorToolProps): import("react").JSX.Element;
+declare function Save({ children, disabled, onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Toolbar({ children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function KeyboardBar({ children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function Status({ children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function Surface({ ref, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const CodeEditor: {
+    Root: typeof Root;
+    Tab: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Name: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Host: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Dirty: typeof Dirty;
+    Spacer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Toolbar: typeof Toolbar;
+    Tool: typeof Tool;
+    Save: typeof Save;
+    Surface: typeof Surface;
+    Status: typeof Status;
+    Meta: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    KeyboardBar: typeof KeyboardBar;
+    BarTools: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};