chapterjs 0.1.2 → 0.1.4

package/dist/components/custom-id.d.ts

@@ -0,0 +1,72 @@
+/** The kinds of values a component can carry in its `data`. */
+export type DataKind = 'string' | 'number' | 'boolean';
+/**
+ * One value a component carries: its kind, or its kind with a default
+ * value, which makes it optional where the component is put in a message.
+ */
+export type DataField = DataKind | {
+    type: 'string';
+    default?: string;
+} | {
+    type: 'number';
+    default?: number;
+} | {
+    type: 'boolean';
+    default?: boolean;
+};
+/** What a component carries: a name for each value, and its kind. */
+export type DataShape = Readonly<Record<string, DataField>>;
+/** The kind of a field, however it was written. */
+type KindOf<Field extends DataField> = Field extends DataKind ? Field : Field extends {
+    type: infer Kind;
+} ? Kind : never;
+type ValueOf<Field extends DataField> = KindOf<Field> extends 'string' ? string : KindOf<Field> extends 'number' ? number : boolean;
+/** The names of the fields that have a default value. */
+type WithDefault<Shape extends DataShape> = {
+    [Name in keyof Shape]: Shape[Name] extends {
+        default: {};
+    } ? Name : never;
+}[keyof Shape];
+/**
+ * The values of a `data` declaration, typed from it: what `run` and the
+ * texts of the component receive. A value with a default is always there.
+ */
+export type DataValuesOf<Shape extends DataShape> = {
+    [Name in keyof Shape]: ValueOf<Shape[Name]>;
+};
+/**
+ * What a message gives to a component: the values of its `data`, those
+ * with a default value being optional.
+ */
+export type DataInputOf<Shape extends DataShape> = {
+    [Name in Exclude<keyof Shape, WithDefault<Shape>>]: ValueOf<Shape[Name]>;
+} & {
+    [Name in WithDefault<Shape>]?: ValueOf<Shape[Name]>;
+};
+export declare const DATA_KINDS: readonly DataKind[];
+/** The kind of a field, however it was written. */
+export declare const kindOf: (field: DataField) => DataKind;
+/** The default value of a field, if it has one. */
+export declare const defaultOf: (field: DataField) => string | number | boolean | undefined;
+/** Whether a component can be put in a message without data. */
+export declare const needsNoData: (shape: DataShape) => boolean;
+/** Checks the values a file gives to a component against its `data`. */
+export declare function checkData(what: string, shape: DataShape, values: unknown): Record<string, string | number | boolean>;
+/**
+ * The `custom_id` of a component: its path, then its values in the order
+ * of the declaration. Discord accepts 100 characters: when the data does
+ * not fit, the error says by how much.
+ */
+export declare function encodeCustomId(path: string, shape: DataShape, values: Record<string, string | number | boolean>): string;
+/** The path and the encoded values of a `custom_id` the framework wrote. */
+export declare function decodeCustomId(id: string): {
+    path: string;
+    parts: string[];
+};
+/**
+ * The values a `custom_id` carries, typed as the component declares them.
+ * `null` when they do not match the declaration: the file changed since the
+ * message was sent.
+ */
+export declare function readData(shape: DataShape, parts: readonly string[]): Record<string, string | number | boolean> | null;
+export {};

package/dist/components/custom-id.js

@@ -0,0 +1,128 @@
+// The `custom_id` of a component is never written by users: it is the path
+// of the file of the component (`buttons/ban`), followed by the data the
+// component carries, encoded by the framework. Stateless by design: it
+// survives a restart, and every process of the bot reads it the same way.
+// https://docs.discord.com/developers/components/reference#anatomy-of-a-component-custom-id
+import { Limits } from '../discord/api.js';
+export const DATA_KINDS = ['string', 'number', 'boolean'];
+/** The kind of a field, however it was written. */
+export const kindOf = (field) => typeof field === 'string' ? field : field.type;
+/** The default value of a field, if it has one. */
+export const defaultOf = (field) => typeof field === 'string' ? undefined : field.default;
+/** Whether a component can be put in a message without data. */
+export const needsNoData = (shape) => Object.values(shape).every(field => defaultOf(field) !== undefined);
+/** Fields are separated by `:`; a `:` or a `\` inside a value is escaped. */
+const SEPARATOR = ':';
+const escape = (value) => value.replace(/[\\:]/g, char => `\\${char}`);
+/**
+ * Splits on the separators that are not escaped, and unescapes the rest.
+ * Written by hand: a regular expression would need lookbehinds that count.
+ */
+function split(encoded) {
+    const parts = [];
+    let current = '';
+    for (let index = 0; index < encoded.length; index++) {
+        const char = encoded[index];
+        if (char === '\\' && index + 1 < encoded.length) {
+            current += encoded[++index];
+        }
+        else if (char === SEPARATOR) {
+            parts.push(current);
+            current = '';
+        }
+        else
+            current += char;
+    }
+    parts.push(current);
+    return parts;
+}
+/** Checks the values a file gives to a component against its `data`. */
+export function checkData(what, shape, values) {
+    const names = Object.keys(shape);
+    if (names.length === 0) {
+        if (values !== undefined) {
+            throw new TypeError(`${what} carries no data: it is used as is, without arguments.`);
+        }
+        return {};
+    }
+    const example = `${what}({ ${names
+        .filter(name => defaultOf(shape[name]) === undefined)
+        .map(name => `${name}: ${kindOf(shape[name]) === 'string' ? "'...'" : kindOf(shape[name]) === 'number' ? '1' : 'true'}`)
+        .join(', ')} })`;
+    // Every value has a default: the component is used as is, or with some.
+    if (values === undefined && needsNoData(shape))
+        values = {};
+    if (typeof values !== 'object' || values === null || Array.isArray(values)) {
+        throw new TypeError(`${what} needs its data: write ${example}.`);
+    }
+    const given = values;
+    for (const key of Object.keys(given)) {
+        if (!Object.hasOwn(shape, key)) {
+            throw new TypeError(`"${key}" is not in the data of ${what}. Its data is: ${names.join(', ')}.`);
+        }
+    }
+    const result = {};
+    for (const name of names) {
+        const fallback = defaultOf(shape[name]);
+        const value = given[name] === undefined ? fallback : given[name];
+        const kind = kindOf(shape[name]);
+        const got = JSON.stringify(value) ?? typeof value;
+        if (typeof value !== kind ||
+            (kind === 'number' && !Number.isFinite(value))) {
+            throw new TypeError(`The data "${name}" of ${what} is a ${kind}, got ${got}.`);
+        }
+        result[name] = value;
+    }
+    return result;
+}
+/**
+ * The `custom_id` of a component: its path, then its values in the order
+ * of the declaration. Discord accepts 100 characters: when the data does
+ * not fit, the error says by how much.
+ */
+export function encodeCustomId(path, shape, values) {
+    const parts = [path];
+    for (const name of Object.keys(shape))
+        parts.push(escape(String(values[name])));
+    const id = parts.join(SEPARATOR);
+    if (id.length > Limits.CustomId) {
+        throw new RangeError(`The data of ${path} is ${id.length - path.length - 1} characters long once encoded, and Discord leaves ${Limits.CustomId - path.length - 1} for it (its id is ${path}, ${path.length} characters, out of ${Limits.CustomId}). Carry less: an id instead of a name, or a shorter file name.`);
+    }
+    return id;
+}
+/** The path and the encoded values of a `custom_id` the framework wrote. */
+export function decodeCustomId(id) {
+    const [path = '', ...parts] = split(id);
+    return { path, parts };
+}
+/**
+ * The values a `custom_id` carries, typed as the component declares them.
+ * `null` when they do not match the declaration: the file changed since the
+ * message was sent.
+ */
+export function readData(shape, parts) {
+    const names = Object.keys(shape);
+    if (parts.length !== names.length)
+        return null;
+    const values = {};
+    for (const [index, name] of names.entries()) {
+        const part = parts[index];
+        switch (kindOf(shape[name])) {
+            case 'number': {
+                const number = Number(part);
+                if (part.trim() === '' || !Number.isFinite(number))
+                    return null;
+                values[name] = number;
+                break;
+            }
+            case 'boolean':
+                if (part !== 'true' && part !== 'false')
+                    return null;
+                values[name] = part === 'true';
+                break;
+            default:
+                values[name] = part;
+        }
+    }
+    return values;
+}

package/dist/components/embed.d.ts

@@ -0,0 +1,28 @@
+import type { Embed } from '../structures/payload.js';
+/**
+ * What `embed()` returns: the default export of an embed file. Import it
+ * where you send a message: `embeds: [welcome({ member })]`, or
+ * `embeds: [rules]` for an embed that always looks the same.
+ */
+export type EmbedFile<Args extends readonly unknown[] = []> = {
+    /** What the file gave to `embed()`, not checked yet. */
+    readonly config: unknown;
+} & ((...args: Args) => Embed);
+/**
+ * Declares an embed. Export the result as the default export of a file of
+ * `src/components/embeds/`. Give it the embed itself when it always looks
+ * the same, or a function of what it shows:
+ *
+ * ```ts
+ * import { embed, type GuildMember } from 'chapterjs';
+ *
+ * export default embed((member: GuildMember) => ({
+ *   title: `Welcome ${member.displayName}!`,
+ *   color: 0x57f287,
+ * }));
+ * ```
+ */
+export declare function embed(definition: Embed): EmbedFile<[]>;
+export declare function embed<const Args extends readonly unknown[]>(definition: (...args: Args) => Embed): EmbedFile<Args>;
+/** Whether a value is an embed file: a function to call for the embed. */
+export declare const isEmbedFile: (value: unknown) => value is EmbedFile<readonly unknown[]>;

package/dist/components/embed.js

@@ -0,0 +1,11 @@
+// `embed()`, as the files of `src/components/embeds/` import it from
+// 'chapterjs': an embed written once, used in every message that needs it.
+// Static, or a function of what it shows.
+import { createFile, fileStateOf } from './file.js';
+export function embed(definition) {
+    return createFile('embed', definition, {
+        asPiece: false,
+    });
+}
+/** Whether a value is an embed file: a function to call for the embed. */
+export const isEmbedFile = (value) => fileStateOf(value)?.kind === 'embed';

package/dist/components/file.d.ts

@@ -0,0 +1,30 @@
+import { type PieceKind, type Rendered } from './instance.js';
+/** The kinds of files of `src/components/`, which are its folders. */
+export type ComponentKind = 'button' | 'select' | 'modal' | 'embed';
+export declare const COMPONENT_FOLDERS: Record<string, ComponentKind>;
+/** A file as the loader knows it: what it declared, and once loaded, how to make instances. */
+export interface ComponentFileState {
+    readonly kind: ComponentKind;
+    readonly config: unknown;
+    /** The name of the file for messages, before it is bound: `button()`. */
+    readonly made: string;
+    bound?: {
+        /** The path of the file inside `src/components/`, without extension. */
+        path: string;
+        /** Makes an instance from what the file was called with. */
+        render: (args: readonly unknown[]) => Rendered | object;
+    };
+}
+/** The state of a component file, if the value is one. */
+export declare function fileStateOf(value: unknown): ComponentFileState | undefined;
+/**
+ * Makes a component file. `asPiece` says whether the file itself stands
+ * for its instance when it carries no data (a button, a menu, a modal: not
+ * an embed, which is only a function).
+ */
+export declare function createFile(kind: ComponentKind, config: unknown, { asPiece, pieceKind }: {
+    asPiece: boolean;
+    pieceKind?: PieceKind;
+}): (...args: unknown[]) => unknown;
+/** Binds a file to its path and to what makes its instances. */
+export declare function bindFile(file: unknown, bound: NonNullable<ComponentFileState['bound']>): void;

package/dist/components/file.js

@@ -0,0 +1,52 @@
+// What `button()`, `select()`, `modal()` and `embed()` return: the default
+// export of a file of `src/components/`. It is a function (called with the
+// data the component carries) that the loader recognises, checks, and binds
+// to the path of its file: that path is the custom_id. Until then it can't
+// make anything, which is how a definition outside `src/components/` is
+// refused.
+import { piece, pieceFunction, } from './instance.js';
+export const COMPONENT_FOLDERS = {
+    buttons: 'button',
+    selects: 'select',
+    modals: 'modal',
+    embeds: 'embed',
+};
+const FILE = Symbol.for('chapterjs.component.file');
+/** The state of a component file, if the value is one. */
+export function fileStateOf(value) {
+    if (typeof value !== 'function')
+        return undefined;
+    return value[FILE];
+}
+/**
+ * Makes a component file. `asPiece` says whether the file itself stands
+ * for its instance when it carries no data (a button, a menu, a modal: not
+ * an embed, which is only a function).
+ */
+export function createFile(kind, config, { asPiece, pieceKind }) {
+    const state = { kind, config, made: `${kind}()` };
+    const notBound = () => {
+        throw new Error(`This ${kind} was not loaded by ChapterJS: a ${kind} is a file of src/components/${Object.keys(COMPONENT_FOLDERS).find(folder => COMPONENT_FOLDERS[folder] === kind)}/, exported by default, and used after the bot started.`);
+    };
+    const file = (...args) => {
+        if (!state.bound)
+            return notBound();
+        const rendered = state.bound.render(args);
+        return pieceKind
+            ? piece(pieceKind, rendered.raw)
+            : rendered;
+    };
+    Object.defineProperty(file, FILE, { value: state });
+    Object.defineProperty(file, 'config', { value: config, enumerable: true });
+    if (asPiece) {
+        pieceFunction(file, () => state.bound ? state.bound.render([]) : notBound());
+    }
+    return file;
+}
+/** Binds a file to its path and to what makes its instances. */
+export function bindFile(file, bound) {
+    const state = fileStateOf(file);
+    if (!state)
+        throw new TypeError('Not a component file.');
+    state.bound = bound;
+}

package/dist/components/instance.d.ts

@@ -0,0 +1,100 @@
+import type { RawActionRow, RawButton, RawContainer, RawFileComponent, RawMediaGallery, RawSection, RawSelectMenu, RawSeparator, RawTextDisplay, RawThumbnail } from '../discord/types/component.js';
+import type { RawEmoji } from '../discord/types/emoji.js';
+import type { RawInteractionCallbackModalData } from '../discord/types/interaction.js';
+import type { EmojiInput } from '../structures/message.js';
+import type { Translator } from '../messages/messages.js';
+declare const brand: unique symbol;
+/** A piece of a message made by ChapterJS: a button, a menu, a layout. */
+export interface Piece<Kind extends string> {
+    /** What kind of piece it is. Only the framework makes pieces. */
+    readonly [brand]: Kind;
+}
+/** A button: of a file of `src/components/buttons/`, `linkButton()` or `premiumButton()`. */
+export type ButtonComponent = Piece<'button'>;
+/** A select menu of a file of `src/components/selects/`. */
+export type SelectComponent = Piece<'select'>;
+/** A row of up to 5 buttons, or of one menu: `row()`. */
+export type ActionRowComponent = Piece<'row'>;
+/** A text: `text()`. */
+export type TextComponent = Piece<'text'>;
+/** Texts with a button or a thumbnail beside them: `section()`. */
+export type SectionComponent = Piece<'section'>;
+/** A small image beside a section: `thumbnail()`. */
+export type ThumbnailComponent = Piece<'thumbnail'>;
+/** Up to 10 images or videos: `gallery()`. */
+export type GalleryComponent = Piece<'gallery'>;
+/** An attached file shown in the message: `file()`. */
+export type FileComponent = Piece<'file'>;
+/** Space, with or without a line: `separator()`. */
+export type SeparatorComponent = Piece<'separator'>;
+/** A box around other pieces, with an optional color: `container()`. */
+export type ContainerComponent = Piece<'container'>;
+/** A form to open with `interaction.showModal()`: of a file of `src/components/modals/`. */
+export type ModalComponent = Piece<'modal'>;
+/** What a container can hold. */
+export type ContainerChild = ButtonComponent | SelectComponent | ActionRowComponent | TextComponent | SectionComponent | GalleryComponent | FileComponent | SeparatorComponent;
+/**
+ * What the `components` of a message take. Buttons and menus are put in
+ * rows by the framework (5 buttons per row, a menu alone in its row);
+ * `row()` is there to choose. As soon as a message has a text, a section,
+ * a gallery, a file, a separator or a container, it is built with
+ * components only: Discord then takes no `content` and no `embeds`.
+ * @see https://docs.discord.com/developers/components/reference
+ */
+export type MessageComponent = ContainerChild | ContainerComponent;
+export type PieceKind = 'button' | 'select' | 'row' | 'text' | 'section' | 'thumbnail' | 'gallery' | 'file' | 'separator' | 'container' | 'modal';
+interface RawOf {
+    button: RawButton;
+    select: RawSelectMenu;
+    row: RawActionRow;
+    text: RawTextDisplay;
+    section: RawSection;
+    thumbnail: RawThumbnail;
+    gallery: RawMediaGallery;
+    file: RawFileComponent;
+    separator: RawSeparator;
+    container: RawContainer;
+    modal: RawInteractionCallbackModalData;
+}
+/**
+ * What a piece sends: known when the piece is made, or computed when the
+ * message is sent, with `t` in the language of who will read it (a piece
+ * whose texts are functions).
+ */
+export type Deferred<R> = R | ((t: Translator) => R);
+/** A piece as the framework sees it. */
+export interface Rendered<Kind extends PieceKind = PieceKind> {
+    kind: Kind;
+    raw: Deferred<RawOf[Kind]>;
+}
+/** A piece with what it sends, known: after `resolve()`. */
+export interface Resolved<Kind extends PieceKind = PieceKind> {
+    kind: Kind;
+    raw: RawOf[Kind];
+}
+/** What a piece sends, for the language of who will read it. */
+export declare function resolve<Kind extends PieceKind>(rendered: Rendered<Kind>, t: Translator): Resolved<Kind>;
+/**
+ * What a piece made of others sends: known now when every child is, else
+ * computed when the message is sent, from what the children send then.
+ */
+export declare function compose<R>(children: readonly Rendered[], build: (raws: readonly unknown[]) => R): Deferred<R>;
+/** Makes a piece. `raw` is frozen: a piece never changes once made. */
+export declare function piece<Kind extends PieceKind>(kind: Kind, raw: Deferred<RawOf[Kind]>): Piece<Kind>;
+/**
+ * Lets a function stand for a piece: the file of a button without data is
+ * a function (called with a look) and also the button itself. `render`
+ * is asked for the piece when the message is built.
+ */
+export declare function pieceFunction<F extends object>(target: F, render: () => Rendered): F;
+/** Whether a value is a piece made by the framework. */
+export declare function isPiece(value: unknown): value is Piece<PieceKind>;
+/** What a piece is and how it is sent. Throws on anything else. */
+export declare function renderedOf(value: unknown, where: string): Rendered;
+/**
+ * An emoji as a component takes it: a standard one (`'👍'`), a custom one as
+ * Discord writes it (`'<:name:id>'`, `'<a:name:id>'`) or one of
+ * `guild.emojis`.
+ */
+export declare function emojiOf(input: EmojiInput, what: string): Partial<RawEmoji>;
+export {};

package/dist/components/instance.js

@@ -0,0 +1,86 @@
+// What goes in the `components` of a message: pieces made by the framework
+// (a button of `src/components/buttons/`, a `row()`, a `container()`...),
+// never raw JSON. Each piece knows the Discord shape it is sent as; the
+// brand is what lets a message refuse anything else, so that no custom_id
+// is ever written by hand.
+/** What a piece sends, for the language of who will read it. */
+export function resolve(rendered, t) {
+    const { kind, raw } = rendered;
+    return { kind, raw: typeof raw === 'function' ? raw(t) : raw };
+}
+/**
+ * What a piece made of others sends: known now when every child is, else
+ * computed when the message is sent, from what the children send then.
+ */
+export function compose(children, build) {
+    if (children.every(child => typeof child.raw !== 'function')) {
+        return build(children.map(child => child.raw));
+    }
+    return (t) => build(children.map(child => resolve(child, t).raw));
+}
+const INSTANCE = Symbol.for('chapterjs.component');
+/** Makes a piece. `raw` is frozen: a piece never changes once made. */
+export function piece(kind, raw) {
+    return Object.freeze({
+        [INSTANCE]: true,
+        kind,
+        raw,
+    });
+}
+/**
+ * Lets a function stand for a piece: the file of a button without data is
+ * a function (called with a look) and also the button itself. `render`
+ * is asked for the piece when the message is built.
+ */
+export function pieceFunction(target, render) {
+    Object.defineProperty(target, INSTANCE, { value: true });
+    Object.defineProperty(target, 'kind', { get: () => render().kind });
+    Object.defineProperty(target, 'raw', { get: () => render().raw });
+    return target;
+}
+/** Whether a value is a piece made by the framework. */
+export function isPiece(value) {
+    return ((typeof value === 'object' || typeof value === 'function') &&
+        value !== null &&
+        value[INSTANCE] === true);
+}
+/** What a piece is and how it is sent. Throws on anything else. */
+export function renderedOf(value, where) {
+    if (!isPiece(value)) {
+        throw new TypeError(`${where} is not a component made by ChapterJS, got ${value === null ? 'null' : typeof value === 'object' && 'custom_id' in value ? 'an object with a custom_id' : typeof value}. Use the buttons, menus and modals of src/components/, and row(), text(), section(), container()... from 'chapterjs'. Components are never written as JSON.`);
+    }
+    const { kind, raw } = value;
+    return { kind, raw };
+}
+/**
+ * An emoji as a component takes it: a standard one (`'👍'`), a custom one as
+ * Discord writes it (`'<:name:id>'`, `'<a:name:id>'`) or one of
+ * `guild.emojis`.
+ */
+export function emojiOf(input, what) {
+    if (typeof input !== 'string') {
+        const id = input.id ?? null;
+        const name = input.name ?? null;
+        if (!id && !name) {
+            throw new TypeError(`The emoji of ${what} has no name and no id.`);
+        }
+        return {
+            ...(id ? { id } : {}),
+            ...(name ? { name } : {}),
+            ...(input.animated ? { animated: true } : {}),
+        };
+    }
+    const text = input.trim();
+    const custom = /^<(a?):(\w+):(\d+)>$/.exec(text);
+    if (custom) {
+        return {
+            id: custom[3],
+            name: custom[2],
+            ...(custom[1] ? { animated: true } : {}),
+        };
+    }
+    if (text === '') {
+        throw new TypeError(`The emoji of ${what} is empty: pass one like "👍", or a custom one like "<:name:id>".`);
+    }
+    return { name: text };
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,103 @@
+import type { Snowflake } from '../discord/types/common.js';
+import type { EmojiInput } from '../structures/message.js';
+import { type ActionRowComponent, type ButtonComponent, type ContainerChild, type ContainerComponent, type FileComponent, type GalleryComponent, type Rendered, type SectionComponent, type SelectComponent, type SeparatorComponent, type TextComponent, type ThumbnailComponent } from './instance.js';
+/** A link button: what it shows, and the address it opens. */
+export interface LinkButtonOptions {
+    /** The text on the button (80 characters at most). */
+    label?: string;
+    /** An emoji on the button, before the label. */
+    emoji?: EmojiInput;
+    /** The address the button opens (512 characters at most). */
+    url: string;
+    /** Shows the button greyed out, impossible to click. */
+    disabled?: boolean;
+}
+/**
+ * A button that opens a link. Nothing runs in your bot when it is clicked:
+ * Discord opens the address.
+ * @see https://docs.discord.com/developers/components/reference#button
+ */
+export declare function linkButton(options: LinkButtonOptions): ButtonComponent;
+/**
+ * A button that offers something to buy: Discord shows the name and the
+ * price of the SKU itself.
+ * @see https://docs.discord.com/developers/components/reference#button
+ */
+export declare function premiumButton(skuId: Snowflake, { disabled }?: {
+    disabled?: boolean;
+}): ButtonComponent;
+/**
+ * A row of components: up to 5 buttons, or one select menu. The framework
+ * makes rows by itself; use this to choose which buttons share a row.
+ * @see https://docs.discord.com/developers/components/reference#action-row
+ */
+export declare function row(components: readonly (ButtonComponent | SelectComponent)[]): ActionRowComponent;
+/**
+ * A text in a message built with components. Markdown works as in any
+ * message, mentions included. The texts of a message add up to 4000
+ * characters at most.
+ * @see https://docs.discord.com/developers/components/reference#text-display
+ */
+export declare function text(content: string): TextComponent;
+/** A picture or a video: its address, or `attachment://name` for a file of the message. */
+export interface MediaOptions {
+    /** The address of the media: a link, or `attachment://chart.png` for a file sent with the message. */
+    url: string;
+    /** What the media shows, for people who can't see it (1024 characters at most). */
+    description?: string;
+    /** Blurs the media until it is clicked. */
+    spoiler?: boolean;
+}
+/**
+ * A small picture beside the texts of a section.
+ * @see https://docs.discord.com/developers/components/reference#thumbnail
+ */
+export declare function thumbnail(media: string | MediaOptions): ThumbnailComponent;
+/**
+ * One to three texts with a button or a thumbnail beside them.
+ * @see https://docs.discord.com/developers/components/reference#section
+ */
+export declare function section(texts: string | readonly string[], accessory: ButtonComponent | ThumbnailComponent): SectionComponent;
+/**
+ * Up to 10 pictures or videos, shown in a grid.
+ * @see https://docs.discord.com/developers/components/reference#media-gallery
+ */
+export declare function gallery(items: readonly (string | MediaOptions)[]): GalleryComponent;
+/**
+ * A file sent with the message (its `files`), shown where it is placed.
+ * @see https://docs.discord.com/developers/components/reference#file
+ */
+export declare function file(name: string, { spoiler }?: {
+    spoiler?: boolean;
+}): FileComponent;
+/** How a separator looks. */
+export interface SeparatorOptions {
+    /** Shows a line. Shown by default. */
+    divider?: boolean;
+    /** How much space: `'small'` (the default) or `'large'`. */
+    spacing?: 'small' | 'large';
+}
+/**
+ * Space between two pieces, with a line by default.
+ * @see https://docs.discord.com/developers/components/reference#separator
+ */
+export declare function separator({ divider, spacing, }?: SeparatorOptions): SeparatorComponent;
+/** How a container looks. */
+export interface ContainerOptions {
+    /** The color of the line on its left, as a number (`0xc026d3`). */
+    color?: number;
+    /** Blurs the whole container until it is clicked. */
+    spoiler?: boolean;
+}
+/**
+ * A box around texts, sections, rows, galleries, files and separators,
+ * with an optional color on its left, like an embed.
+ * @see https://docs.discord.com/developers/components/reference#container
+ */
+export declare function container(children: readonly ContainerChild[], { color, spoiler }?: ContainerOptions): ContainerComponent;
+/**
+ * Puts the buttons and menus of a list in rows: buttons that follow each
+ * other share a row of 5 at most, a menu gets its own. Rows and layout
+ * pieces are kept as they are.
+ */
+export declare function autoRows(pieces: readonly Rendered[], where: string): Rendered[];