@react-x11/components 0.1.0 → 0.2.1

package/dist/code-language/types.d.ts

@@ -0,0 +1,173 @@
+/**
+ * One highlighted run within a line. Offsets are UTF-16 indices into the
+ * line's text (what `String.prototype.slice` takes), `from` inclusive, `to`
+ * exclusive. Runs never overlap; gaps between runs paint as plain text.
+ */
+export interface Token {
+    from: number;
+    to: number;
+    /** A name from {@link TokenType}, or any string a custom theme knows. */
+    type: string;
+}
+/**
+ * The token vocabulary the built-in languages emit and the built-in themes
+ * style. It is deliberately the vocabulary of Lezer's `classHighlighter`
+ * (minus the `tok-` prefix), so a Lezer grammar highlights correctly with no
+ * mapping table, and a TextMate scope maps onto it in one step.
+ *
+ * A theme may style any string; unknown types fall back through
+ * {@link TOKEN_FALLBACK} and then to the editor's plain text colour, so a
+ * language inventing `'heredoc'` degrades to readable rather than invisible.
+ */
+export type TokenType = 'keyword' | 'operator' | 'variableName' | 'typeName' | 'propertyName' | 'className' | 'labelName' | 'namespace' | 'macroName' | 'function' | 'string' | 'string2' | 'escape' | 'number' | 'bool' | 'atom' | 'self' | 'unit' | 'modifier' | 'comment' | 'docComment' | 'meta' | 'punctuation' | 'bracket' | 'invalid';
+/** How one token type paints. `color` may be a `$token` from the react-x11
+ * theme (`'$textMuted'`), resolved against the editor's own `theme` at paint. */
+export interface TokenStyle {
+    color?: string;
+    /** ntk font weight, 100–900. */
+    weight?: number;
+    /** `'italic'` is the one that earns its keep, for comments. */
+    fontStyle?: 'normal' | 'italic';
+}
+/** A token-type → style map. Missing entries fall back via
+ * {@link TOKEN_FALLBACK}, then to the editor's text colour. */
+export type TokenStyles = Readonly<Record<string, TokenStyle>>;
+/**
+ * Where an unknown or unstyled token type borrows its style from before
+ * giving up and painting plain. `string2 → string`, `docComment → comment`,
+ * and so on. Exported because a custom theme wants to know what it may omit.
+ */
+export declare const TOKEN_FALLBACK: Readonly<Record<string, string>>;
+/**
+ * A line-level description of an edit, handed to the tokenizer *after* the
+ * editor's line buffer has been updated. `fromLine` is the first affected
+ * line; `removed` lines were deleted there and `inserted` lines now sit in
+ * their place. A same-line edit is `{ fromLine: n, removed: 1, inserted: 1 }`.
+ */
+export interface LineEdit {
+    fromLine: number;
+    removed: number;
+    inserted: number;
+}
+/**
+ * What the editor hands an engine at creation time. `invalidate(fromLine)`
+ * is for engines that tokenize asynchronously (Lezer reparsing on a debounce,
+ * an LSP answering semantic tokens): call it when lines at or below
+ * `fromLine` have new tokens, and the editor repaints and pulls again.
+ * Synchronous engines never need it.
+ */
+export interface TokenizerHost {
+    invalidate(fromLine: number): void;
+}
+/**
+ * The per-document tokenizing instance. `setLines` hands over the editor's
+ * live line array — the tokenizer may keep the reference (the editor edits
+ * that array in place and guarantees an `edit()` call after every mutation)
+ * but must not mutate it. Reading it inside `lineTokens` is the point: an
+ * engine that instead snapshots the text at `setLines` time will paint the
+ * pre-edit document.
+ */
+export interface Tokenizer {
+    setLines(lines: readonly string[]): void;
+    edit(edit: LineEdit): void;
+    /** Tokens for one line, sorted, non-overlapping. `[]` is a fine answer —
+     * it is what "plain text" looks like. */
+    lineTokens(line: number): readonly Token[];
+    /** Drop timers, workers, subscriptions. Called on unmount and when the
+     * editor switches to a different `language`. */
+    dispose?(): void;
+}
+/**
+ * Metadata about a language that is not tokenization: what the editor's own
+ * commands (Ctrl+/, auto-indent) and the generic completion sources read.
+ * All optional — a language that only tokenizes is complete.
+ */
+export interface LanguageData {
+    /** `'--'`, `'#'`, `'//'` — enables Ctrl+/ toggle-comment. */
+    lineComment?: string;
+    /** Extra word characters for double-click and Ctrl+arrow, on top of
+     * letters, digits and `_` (SQL wants `$`, shell wants `-`). */
+    wordChars?: string;
+    /** Words for `keywordCompletionSource` — usually the keyword list the
+     * tokenizer matches, re-exported. */
+    completions?: readonly string[];
+    /** After Enter, indent one unit deeper when the previous line matches.
+     * The built-ins use `/[([{]\s*$/`. */
+    indentAfter?: RegExp;
+}
+/** What `<CodeEditor language>` takes: a named factory for tokenizers. */
+export interface Language {
+    name: string;
+    data?: LanguageData;
+    createTokenizer(host: TokenizerHost): Tokenizer;
+}
+/** A caret position: `line` is 0-based, `ch` a UTF-16 index into the line. */
+export interface Position {
+    line: number;
+    ch: number;
+}
+/** `anchor` is where the selection started, `head` where the caret is —
+ * equal when nothing is selected. */
+export interface Selection {
+    anchor: Position;
+    head: Position;
+}
+/**
+ * A range to underline. The shape (and the severity names) are LSP's, so a
+ * language-server client maps `publishDiagnostics` onto this prop without
+ * translation — see the module comment: this is one half of the "language
+ * server seam", completions being the other.
+ */
+export interface Diagnostic {
+    from: Position;
+    to: Position;
+    severity?: 'error' | 'warning' | 'information' | 'hint';
+    message?: string;
+    /** e.g. the lint rule or LSP `source`. Unused by the paint; carried for
+     * the app's own tooltip/status UI. */
+    source?: string;
+}
+/** Why a completion query is running. `'explicit'` is Ctrl+Space. */
+export type CompletionTrigger = 'input' | 'explicit';
+/** What a {@link CompletionSource} is asked with. */
+export interface CompletionContext {
+    /** The document, by line. Do not mutate. */
+    lines: readonly string[];
+    /** The caret. */
+    pos: Position;
+    /** The word being typed: `text` from `from` up to the caret. Sources that
+     * complete mid-token re-derive their own; most want this one. */
+    word: {
+        from: Position;
+        text: string;
+    };
+    trigger: CompletionTrigger;
+    /** The editor's language, for sources that adapt (keyword lists). */
+    language: Language | null;
+}
+export interface CompletionItem {
+    label: string;
+    /** Replaces the text from `from` (the source's, else the context word's)
+     * to the caret. Defaults to `label`. */
+    apply?: string;
+    /** Dim text after the label — a type, a table name, a signature. */
+    detail?: string;
+    /** Groups and ranks like kinds; also the theme hook for a badge later.
+     * Free-form; the built-ins use `'keyword' | 'word' | 'table' | 'column'`. */
+    kind?: string;
+    /** Sort/filter boost, higher wins ties. Default 0. */
+    boost?: number;
+}
+export interface CompletionResult {
+    /** Where the replacement starts. Defaults to the context word start. */
+    from?: Position;
+    items: readonly CompletionItem[];
+}
+/**
+ * One provider of completions. Return `null` for "nothing to say here".
+ * May be async — the editor drops a result that arrives after the document
+ * moved on. This signature is deliberately LSP-shaped: a client wrapping
+ * `textDocument/completion` is just an async source.
+ */
+export type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
+//# sourceMappingURL=types.d.ts.map

package/dist/code-language/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/code-language/types.ts"],"names":[],"mappings":"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"}

package/dist/code-language/types.js

@@ -0,0 +1,41 @@
+// The language seam `<CodeEditor>` is built around.
+//
+// The editor itself knows nothing about any language. It owns the text, the
+// caret and the pixels; everything language-shaped arrives through the
+// interfaces in this file, and three very different ecosystems are expected
+// to sit behind them:
+//
+// - the built-in stream tokenizers (`./stream.ts`, `./languages/*`) — zero
+//   dependencies, written here, line-state based the way CodeMirror 5 modes
+//   and VS Code's Monarch grammars are;
+// - Lezer parsers (`./lezer.ts`) — CodeMirror 6's incremental parsers,
+//   `@lezer/<lang>` packages, adapted through `@lezer/highlight`;
+// - TextMate grammars (`./textmate.ts`) — the VS Code / Shiki grammar world,
+//   adapted structurally so this package depends on none of it.
+//
+// The reason the seam is *pull-based and per-line* (`lineTokens(i)`) rather
+// than a push of the whole document's spans: the editor paints only the
+// visible window of lines, and an engine should never be forced to tokenize
+// a megabyte because line 3 changed. Engines that work document-wide (Lezer)
+// cache internally and slice.
+/**
+ * Where an unknown or unstyled token type borrows its style from before
+ * giving up and painting plain. `string2 → string`, `docComment → comment`,
+ * and so on. Exported because a custom theme wants to know what it may omit.
+ */
+export const TOKEN_FALLBACK = {
+    string2: 'string',
+    escape: 'string',
+    docComment: 'comment',
+    bool: 'atom',
+    self: 'keyword',
+    modifier: 'keyword',
+    macroName: 'meta',
+    namespace: 'typeName',
+    className: 'typeName',
+    labelName: 'variableName',
+    function: 'variableName',
+    unit: 'number',
+    bracket: 'punctuation',
+};
+//# sourceMappingURL=types.js.map

package/dist/code-language/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/code-language/types.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,EAAE;AACF,4EAA4E;AAC5E,uEAAuE;AACvE,4EAA4E;AAC5E,sBAAsB;AACtB,EAAE;AACF,2EAA2E;AAC3E,4EAA4E;AAC5E,wCAAwC;AACxC,uEAAuE;AACvE,kEAAkE;AAClE,6EAA6E;AAC7E,gEAAgE;AAChE,EAAE;AACF,4EAA4E;AAC5E,wEAAwE;AACxE,4EAA4E;AAC5E,6EAA6E;AAC7E,8BAA8B;AAiE9B;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAqC;IAC9D,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,cAAc;IACxB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa;CACvB,CAAC"}

package/dist/codeblock/index.d.ts

@@ -0,0 +1,69 @@
+import type { Language, TokenStyles } from '../code-language/index.js';
+import type { TextRun } from '../richtext/index.js';
+import type { Style } from 'react-x11/style';
+/** Code is set tighter than prose: the lines are short and the shapes are
+ *  what is being read. One value, so a fenced block and a `<Code>` in the
+ *  same window sit on the same rhythm. */
+export declare const CODE_LINE_HEIGHT = 1.25;
+/** Everything both components derive from the theme before drawing. */
+export interface CodeBlockLook {
+    /** The mono size, in pixels. */
+    size: number;
+    family: string;
+    /** The ink: unstyled tokens, and the gaps between styled ones. */
+    color: string;
+    /** Secondary ink — the line-number gutter. */
+    dim: string;
+    /** The block's own fill. */
+    fill: string;
+    padding: number;
+    radius: number;
+    lineHeight: number;
+    /** Token palette, picked against the theme background unless overridden. */
+    styles: TokenStyles;
+    /** Resolves `'$token'` colours a custom palette may use. */
+    resolveToken: (name: string) => string | undefined;
+}
+export interface CodeBlockLookOptions {
+    /** The mono size outright — `<Code>`'s `fontSize`. */
+    fontSize?: number;
+    /** The document's base text size, when there is one: the mono size is
+     *  0.9 of it. Ignored when `fontSize` is given. */
+    baseSize?: number;
+    /** Default `'monospace'` — there is no theme token for it. */
+    monoFamily?: string;
+    /** Token palette override. */
+    tokenStyles?: TokenStyles;
+}
+/** Resolve a `'$token'` colour against a theme. Both components need the
+ *  same four lines, and a custom token palette is the only thing that asks
+ *  for it. */
+export declare function themeTokenResolver(theme: Record<string, unknown>): (name: string) => string | undefined;
+/**
+ * What a block of code looks like against this theme.
+ *
+ * The fill is a tint of the *ink* rather than a colour of its own, so it
+ * works out to a slightly-darker patch on a light palette and a
+ * slightly-lighter one on a dark palette without either being named.
+ */
+export declare function codeBlockLook(theme: Record<string, unknown>, options?: CodeBlockLookOptions): CodeBlockLook;
+export interface CodeBlockRunOptions {
+    /** A fence-style tag — `'js'`, `'tsx'`, `'bash'`… */
+    lang?: string;
+    /** An explicit `Language`; takes precedence over `lang`. */
+    language?: Language;
+    /** A `Language` for a `lang` the built-ins do not cover — `hljsLanguage`
+     *  goes here for highlight.js's breadth. Null for a tag it does not know. */
+    resolveLanguage?: (tag: string) => Language | null;
+    /** False leaves the code unhighlighted, tag or no tag. */
+    highlight?: boolean;
+}
+/** The source as `<richtext>` runs: tokenized, then given the mono font.
+ *  The runs concatenate back to exactly `source`. */
+export declare function codeBlockRuns(source: string, look: CodeBlockLook, options?: CodeBlockRunOptions): TextRun[];
+/** The block's own box: fill, radius, padding. What surrounds it — a row
+ *  with a gutter, a column in a document — is the component's. */
+export declare function codeBlockStyle(look: CodeBlockLook): Style;
+/** The style the runs are laid out with, in both components. */
+export declare function codeTextStyle(look: CodeBlockLook): Style;
+//# sourceMappingURL=index.d.ts.map

package/dist/codeblock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/codeblock/index.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;0CAE0C;AAC1C,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,uEAAuE;AACvE,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,EAAE,WAAW,CAAC;IACpB,4DAA4D;IAC5D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;uDACmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;cAEc;AACd,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAKtC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,OAAO,GAAE,oBAAyB,GACjC,aAAa,CAmBf;AAED,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;iFAC6E;IAC7E,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC;IACnD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;qDACqD;AACrD,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,aAAa,EACnB,OAAO,GAAE,mBAAwB,GAChC,OAAO,EAAE,CASX;AAED;kEACkE;AAClE,wBAAgB,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,KAAK,CAMzD;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,KAAK,CAExD"}

package/dist/codeblock/index.js

@@ -0,0 +1,85 @@
+// The look of a block of code, as a shared module.
+//
+// `<Code>` and `<Markdown>`'s fenced blocks are the same widget seen twice:
+// mono runs tokenized through `../code-language/`, laid out unwrapped in a
+// `<richtext>`, on a faint tint of the ink colour with a small radius. They
+// were written twice and had already drifted (one padded from the document's
+// base size, the other from the mono size — the same number at 14px and not
+// at 20), which is what a look shared by two components does when it lives
+// in both of them.
+//
+// So: the palette derivation, the runs and the chrome are here, and the two
+// components keep only what is actually theirs — a gutter and a horizontal
+// viewport for `<Code>`, the surrounding document for `<Markdown>`.
+//
+// A shared module, not a component: no element registration, no React, and
+// nothing imported from either of its consumers (a component never imports
+// another component).
+import { codeRuns, autoTokenStyles } from '../code-language/index.js';
+import { tint } from 'react-x11/style';
+/** Code is set tighter than prose: the lines are short and the shapes are
+ *  what is being read. One value, so a fenced block and a `<Code>` in the
+ *  same window sit on the same rhythm. */
+export const CODE_LINE_HEIGHT = 1.25;
+/** Resolve a `'$token'` colour against a theme. Both components need the
+ *  same four lines, and a custom token palette is the only thing that asks
+ *  for it. */
+export function themeTokenResolver(theme) {
+    return (name) => {
+        const value = theme[name];
+        return typeof value === 'string' ? value : undefined;
+    };
+}
+/**
+ * What a block of code looks like against this theme.
+ *
+ * The fill is a tint of the *ink* rather than a colour of its own, so it
+ * works out to a slightly-darker patch on a light palette and a
+ * slightly-lighter one on a dark palette without either being named.
+ */
+export function codeBlockLook(theme, options = {}) {
+    const color = String(theme.text ?? '#2d3436');
+    const background = String(theme.background ?? 'white');
+    const base = options.baseSize ?? Number(theme.fontSize ?? 14);
+    const size = options.fontSize ?? Math.round(base * 0.9);
+    return {
+        size,
+        family: options.monoFamily ?? 'monospace',
+        color,
+        dim: String(theme.textMuted ?? '#7f8c8d'),
+        fill: tint(color, 0.06),
+        padding: Math.round(size * 0.65),
+        radius: 6,
+        lineHeight: CODE_LINE_HEIGHT,
+        // the same palettes the editor uses, picked by background luminance — a
+        // fenced block, a `<Code>` and a `<CodeEditor>` in one window agree
+        styles: options.tokenStyles ?? autoTokenStyles(background),
+        resolveToken: themeTokenResolver(theme),
+    };
+}
+/** The source as `<richtext>` runs: tokenized, then given the mono font.
+ *  The runs concatenate back to exactly `source`. */
+export function codeBlockRuns(source, look, options = {}) {
+    const { lang = '', language, resolveLanguage, highlight = true } = options;
+    return codeRuns(source, highlight ? lang : '', {
+        styles: look.styles,
+        color: look.color,
+        ...(highlight && language ? { language } : null),
+        ...(highlight && resolveLanguage ? { resolveLanguage } : null),
+        resolveToken: look.resolveToken,
+    }).map((run) => ({ ...run, family: look.family, size: look.size }));
+}
+/** The block's own box: fill, radius, padding. What surrounds it — a row
+ *  with a gutter, a column in a document — is the component's. */
+export function codeBlockStyle(look) {
+    return {
+        backgroundColor: look.fill,
+        borderRadius: look.radius,
+        padding: look.padding,
+    };
+}
+/** The style the runs are laid out with, in both components. */
+export function codeTextStyle(look) {
+    return { lineHeight: look.lineHeight };
+}
+//# sourceMappingURL=index.js.map

package/dist/codeblock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/codeblock/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,EAAE;AACF,4EAA4E;AAC5E,2EAA2E;AAC3E,4EAA4E;AAC5E,6EAA6E;AAC7E,4EAA4E;AAC5E,2EAA2E;AAC3E,mBAAmB;AACnB,EAAE;AACF,4EAA4E;AAC5E,2EAA2E;AAC3E,oEAAoE;AACpE,EAAE;AACF,2EAA2E;AAC3E,2EAA2E;AAC3E,sBAAsB;AACtB,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAkCrC;;cAEc;AACd,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC1B,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAC3B,KAA8B,EAC9B,OAAO,GAAyB,EAAE;IAElC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;IACxD,OAAO;QACL,IAAI;QACJ,MAAM,EAAE,OAAO,CAAC,UAAU,IAAI,WAAW;QACzC,KAAK;QACL,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC;QACzC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;QACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAChC,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,gBAAgB;QAC5B,wEAAwE;QACxE,oEAAoE;QACpE,MAAM,EAAE,OAAO,CAAC,WAAW,IAAI,eAAe,CAAC,UAAU,CAAC;QAC1D,YAAY,EAAE,kBAAkB,CAAC,KAAK,CAAC;KACxC,CAAC;AACJ,CAAC;AAcD;qDACqD;AACrD,MAAM,UAAU,aAAa,CAC3B,MAAc,EACd,IAAmB,EACnB,OAAO,GAAwB,EAAE;IAEjC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAC3E,OAAO,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7C,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAChD,GAAG,CAAC,SAAS,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,YAAY,EAAE,IAAI,CAAC,YAAY;KAChC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtE,CAAC;AAED;kEACkE;AAClE,MAAM,UAAU,cAAc,CAAC,IAAmB;IAChD,OAAO;QACL,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAAC,IAAmB;IAC/C,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;AACzC,CAAC"}

package/dist/color-picker/ColorField.d.ts

@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import type { Style } from 'react-x11/style';
+import type { AnchorOptions } from 'react-x11';
+import type { ColorPickerProps } from './ColorPicker.js';
+export interface ColorFieldProps extends Omit<ColorPickerProps, 'focusable' | 'focusVisible' | 'ref' | 'style'> {
+    /** What the trigger says. Defaults to the value in the picker's own output
+     *  spelling. */
+    format?: ColorPickerProps['format'];
+    /** Shown when there is no colour yet. */
+    placeholder?: string;
+    /** Where the sheet hangs. Defaults to below the trigger. */
+    anchor?: Partial<AnchorOptions>;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    style?: Style | Style[];
+}
+/**
+ * `<ColorField value onChange>` — the colour picker as a form control.
+ *
+ *   <ColorField value={fill} onChange={(ev) => setFill(ev.value)} />
+ *   <ColorField … alpha swatches={brand.colors} />
+ *
+ * Every `<ColorPicker>` prop passes straight through, and the value has the
+ * same shape here as there.
+ *
+ * The sheet opens on the **press**, not the release, for the reason
+ * `<Select>`'s menu does. It closes on Escape, on a second press of the
+ * trigger, and when the window loses focus — but *not* on a change, because
+ * a colour is chosen by dragging and there is no moment at which the choice
+ * is obviously finished.
+ *
+ * The popup is override-redirect and never takes focus, so the **trigger
+ * keeps the keyboard** and hands the panel its keys: Down/Up/Enter/Space
+ * open it, and once it is open the arrows drive the active axis and Tab
+ * moves between them. Escape stays here.
+ */
+export declare function ColorField(props: ColorFieldProps): ReactElement;
+//# sourceMappingURL=ColorField.d.ts.map

package/dist/color-picker/ColorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorField.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAmB,MAAM,iBAAiB,CAAC;AAE9D,OAAO,KAAK,EACV,aAAa,EAId,MAAM,WAAW,CAAC;AAUnB,OAAO,KAAK,EAIV,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AA8B1B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,gBAAgB,EAChB,WAAW,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAC/C;IACC;oBACgB;IAChB,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAyO/D"}