@fraxic/ui 0.3.0

package/index.d.ts

@@ -0,0 +1,167 @@
+export declare const ChartType: {
+  readonly LINE: "line";
+  readonly BAR: "bar";
+  readonly PIE: "pie";
+  readonly AREA: "area";
+};
+
+export declare const NoticeType: {
+  readonly INFO: "info";
+  readonly WARNING: "warning";
+  readonly ERROR: "error";
+  readonly SUCCESS: "success";
+};
+
+export type ChartTypeValue = typeof ChartType[keyof typeof ChartType];
+export type NoticeTypeValue = typeof NoticeType[keyof typeof NoticeType];
+
+export declare class Page {
+  readonly session: Session;
+  constructor(session: Session);
+  section(title: string, builder: (section: Section) => void): void;
+  toMap(): { components: Array<Record<string, unknown>> };
+}
+
+export declare class Section extends Container {}
+export declare class Horizontal extends Container {}
+export declare class Vertical extends Container {}
+export declare class Card extends Container {}
+export declare class TableCell extends Container {}
+
+export declare class Container {
+  horizontal(builder: (container: Horizontal) => void): void;
+  vertical(builder: (container: Vertical) => void): void;
+  card(builder: (container: Card) => void): void;
+  table(builder: (table: Table) => void): void;
+  text(content: string): void;
+  notice(message: string, type?: NoticeTypeValue): void;
+  progress(label: string, value: number, max: number): void;
+  separator(): void;
+  button(label: string, customId: string): void;
+  chart(chart: Chart): void;
+}
+
+export declare class Table {
+  header(builder: (row: TableRow) => void): void;
+  row(builder: (row: TableRow) => void): void;
+  toMap(): Record<string, unknown>;
+}
+
+export declare class TableRow {
+  cell(builder: (cell: TableCell) => void): void;
+}
+
+export declare class Chart {
+  constructor(type: ChartTypeValue);
+  label(label: string): this;
+  data(points: ChartDataPoint[]): this;
+  toMap(): Record<string, unknown>;
+}
+
+export declare class ChartDataPoint {
+  readonly label: string;
+  readonly value: number;
+  constructor(label: string, value: number);
+}
+
+export declare class ModalBuilder {
+  constructor(customId: string, title: string);
+  addTextInput(label: string, input: TextInputBuilder, description?: string | null): this;
+  addSelectInput(label: string, input: SelectInputBuilder, description?: string | null): this;
+  addFileInput(label: string, input: FileInputBuilder, description?: string | null): this;
+  addColorInput(label: string, input: ColorInputBuilder, description?: string | null): this;
+  addDateInput(label: string, input: DateInputBuilder, description?: string | null): this;
+  addParagraph(content: string, label?: string | null): this;
+  toMap(): Record<string, unknown>;
+}
+
+export declare class TextInputBuilder {
+  constructor(customId: string);
+  multiline(): this;
+  setPlaceholder(value: string | null): this;
+  setDefault(value: string | null): this;
+  setRequired(value: boolean | null): this;
+  setMinLength(value: number): this;
+  setMaxLength(value: number): this;
+}
+
+export declare class SelectInputBuilder {
+  constructor(customId: string);
+  setPlaceholder(value: string | null): this;
+  addOption(option: SelectOption): this;
+  setRequired(value: boolean | null): this;
+  setMinValues(value: number): this;
+  setMaxValues(value: number): this;
+  setSearchable(value: boolean | null): this;
+  isSearchable(): boolean;
+  optionCount(): number;
+}
+
+export declare class SelectOption {
+  readonly label: string;
+  readonly value: string;
+  readonly selected: boolean;
+  constructor(label: string, value: string);
+  setSelected(value: boolean | null): this;
+}
+
+export declare class FileInputBuilder {
+  constructor(customId: string);
+  setRequired(value: boolean | null): this;
+  setMinFiles(value: number): this;
+  setMaxFiles(value: number): this;
+}
+
+export declare class DateInputBuilder {
+  constructor(customId: string);
+  includeTime(): this;
+  setRequired(value: boolean | null): this;
+  setDefault(value: Date | string | null): this;
+}
+
+export declare class ColorInputBuilder {
+  constructor(customId: string);
+  setRequired(value: boolean | null): this;
+  setDefault(value: string | null): this;
+}
+
+export declare class Session {
+  readonly userKey: string;
+  constructor(userKey: string);
+  get<T = unknown>(key: string): T | null;
+  set<T = unknown>(key: string, value: T | null): void;
+  update<T = unknown>(key: string, updater: (current: T | null) => T | null): void;
+  delete(key: string): boolean;
+  list(): string[];
+  clear(): void;
+}
+
+export declare class ButtonInteraction {
+  readonly customId: string;
+  readonly session: Session;
+  reply(message: string): void;
+  showModal(modal: ModalBuilder): void;
+}
+
+export declare class ModalInteraction extends ButtonInteraction {
+  getTextInput(customId: string): string | null;
+  getSelectInput(customId: string): string[];
+  getFileInput(customId: string): Blob[];
+  getDateInput(customId: string): Date | null;
+  getColorInput(customId: string): string | null;
+  reject(message: string): void;
+  rejectInputs(inputs: Record<string, string>): void;
+}
+
+export declare class SelectMenuSearch {
+  readonly customId: string;
+  readonly query: string;
+  readonly session: Session;
+  respond(options: SelectOption[]): void;
+}
+
+export declare function dashboard(handler: (page: Page) => void): void;
+export declare function onButtonInteraction(handler: (interaction: ButtonInteraction) => void): void;
+export declare function onModalInteraction(handler: (interaction: ModalInteraction) => void): void;
+export declare function onSelectMenuSearch(handler: (search: SelectMenuSearch) => void): void;
+export declare function __fraxicHandleUiRequest(payload: unknown): unknown;

package/index.js

@@ -0,0 +1,991 @@
+export const ChartType = Object.freeze({
+  LINE: "line",
+  BAR: "bar",
+  PIE: "pie",
+  AREA: "area",
+});
+
+export const NoticeType = Object.freeze({
+  INFO: "info",
+  WARNING: "warning",
+  ERROR: "error",
+  SUCCESS: "success",
+});
+
+let dashboardHandler = null;
+const buttonHandlers = [];
+const modalHandlers = [];
+const selectMenuSearchHandlers = [];
+const sessions = new Map();
+const modalSchemas = new Map();
+
+function requireText(name, value) {
+  if (typeof value !== "string") throw new Error(`${name} must be a string`);
+  if (value.length > 5000) throw new Error(`${name} must be at most 5000 characters`);
+}
+
+function requireNonBlankText(name, value) {
+  requireText(name, value);
+  if (value.length === 0) throw new Error(`${name} must not be blank`);
+}
+
+function requireCustomId(customId) {
+  requireNonBlankText("customId", customId);
+  if (customId.length > 100) throw new Error("customId must be at most 100 characters");
+}
+
+function requireWhole(name, value) {
+  if (!Number.isFinite(value) || Math.floor(value) !== value) throw new Error(`${name} must be an integer`);
+}
+
+function requireRange(name, value, min, max) {
+  requireWhole(name, value);
+  if (value < min || value > max) throw new Error(`${name} must be between ${min} and ${max}`);
+}
+
+function required(item) {
+  return item.required !== false;
+}
+
+function numericOption(item, key, fallback) {
+  return Number.isFinite(item[key]) ? item[key] : fallback;
+}
+
+function isMidnightUtc(date) {
+  return date.getUTCHours() === 0 && date.getUTCMinutes() === 0 && date.getUTCSeconds() === 0 && date.getUTCMilliseconds() === 0;
+}
+
+function formatDateValue(includeTime, date) {
+  return includeTime ? date.toISOString() : date.toISOString().slice(0, 10);
+}
+
+function parseDateValue(value) {
+  if (value === null || value === undefined || value === "") return null;
+  if (value instanceof Date) return Number.isFinite(value.getTime()) ? value : null;
+  if (typeof value === "number" || typeof value === "string") {
+    const date = new Date(value);
+    return Number.isFinite(date.getTime()) ? date : null;
+  }
+  return null;
+}
+
+function parseColorValue(value) {
+  if (value === null || value === undefined || value === "") return null;
+  if (typeof value !== "string") return null;
+  if (value.length !== 7 && value.length !== 9) return null;
+  if (value[0] !== "#") return null;
+  for (let index = 1; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    const digit = code >= 48 && code <= 57;
+    const upper = code >= 65 && code <= 70;
+    const lower = code >= 97 && code <= 102;
+    if (!digit && !upper && !lower) return null;
+  }
+  return value.toUpperCase();
+}
+
+function normalizeInputValue(item, value) {
+  if (item.type === 17) return normalizeFiles(value);
+  if (item.type === 18) return parseDateValue(value) ?? value;
+  if (item.type === 19) return parseColorValue(value) ?? value;
+  return value;
+}
+
+function normalizeFiles(value) {
+  if (!Array.isArray(value)) return value;
+  return value.map((file) => filePayloadToBlob(file));
+}
+
+function filePayloadToBlob(file) {
+  if (file instanceof Blob) return file;
+  if (file === null || typeof file !== "object" || typeof file.data !== "string") return file;
+  const bytes = decodeBase64(file.data);
+  const type = typeof file.type === "string" ? file.type : "";
+  const name = typeof file.name === "string" && file.name.length > 0 ? file.name : "upload";
+  if (typeof File === "function") return new File([bytes], name, { type });
+  const blob = new Blob([bytes], { type });
+  try {
+    Object.defineProperty(blob, "name", { value: name, enumerable: true });
+  } catch {
+    // Some runtimes keep Blob objects non-extensible. The bytes still matter.
+  }
+  return blob;
+}
+
+function decodeBase64(value) {
+  const text = atob(value);
+  const bytes = new Uint8Array(text.length);
+  for (let index = 0; index < text.length; index += 1) bytes[index] = text.charCodeAt(index);
+  return bytes;
+}
+
+function component(type, values = {}) {
+  return { type, ...values };
+}
+
+function addComponent(page, children, value) {
+  page.addComponent();
+  children.push(value);
+}
+
+function addContainer(page, children, type, ContainerClass, builder) {
+  const container = new ContainerClass(page);
+  page.enterContainer();
+  try {
+    builder(container);
+  } finally {
+    page.leaveContainer();
+  }
+  addComponent(page, children, component(type, { children: container.toList() }));
+}
+
+function addText(page, children, content) {
+  requireText("content", content);
+  addComponent(page, children, component(5, { content }));
+}
+
+function addNotice(page, children, message, noticeType) {
+  requireText("message", message);
+  addComponent(page, children, component(6, { message, noticeType }));
+}
+
+function addProgress(page, children, label, value, max) {
+  requireText("label", label);
+  if (!Number.isFinite(value) || value < 0) throw new Error("value must be non-negative");
+  if (!Number.isFinite(max) || max <= 0) throw new Error("max must be positive");
+  addComponent(page, children, component(7, { label, value, max }));
+}
+
+function addButton(page, children, label, customId) {
+  requireText("label", label);
+  requireCustomId(customId);
+  addComponent(page, children, component(9, { customId, label }));
+}
+
+export class Container {
+  constructor(page) {
+    this.page = page;
+    this.children = [];
+  }
+
+  horizontal(builder) {
+    addContainer(this.page, this.children, 2, Horizontal, builder);
+  }
+
+  vertical(builder) {
+    addContainer(this.page, this.children, 3, Vertical, builder);
+  }
+
+  card(builder) {
+    addContainer(this.page, this.children, 4, Card, builder);
+  }
+
+  table(builder) {
+    const table = new Table(this.page);
+    this.page.enterContainer();
+    try {
+      builder(table);
+    } finally {
+      this.page.leaveContainer();
+    }
+    addComponent(this.page, this.children, table.toMap());
+  }
+
+  text(content) {
+    addText(this.page, this.children, content);
+  }
+
+  notice(message, noticeType = NoticeType.INFO) {
+    addNotice(this.page, this.children, message, noticeType);
+  }
+
+  progress(label, value, max) {
+    addProgress(this.page, this.children, label, value, max);
+  }
+
+  separator() {
+    addComponent(this.page, this.children, component(8));
+  }
+
+  button(label, customId) {
+    addButton(this.page, this.children, label, customId);
+  }
+
+  chart(chart) {
+    addComponent(this.page, this.children, chart.toMap());
+  }
+
+  toList() {
+    return this.children.slice();
+  }
+}
+
+export class Page {
+  constructor(session) {
+    this.session = session;
+    this.sections = [];
+    this.count = 0;
+    this.depth = 0;
+  }
+
+  section(title, builder) {
+    requireText("title", title);
+    const section = new Section(this);
+    this.enterContainer();
+    try {
+      builder(section);
+    } finally {
+      this.leaveContainer();
+    }
+    this.addComponent();
+    this.sections.push(component(1, { title, children: section.toList() }));
+  }
+
+  toMap() {
+    return { components: this.sections.slice() };
+  }
+
+  addComponent() {
+    this.count += 1;
+    if (this.count > 200) throw new Error("page component limit exceeded");
+  }
+
+  enterContainer() {
+    if (this.depth >= 8) throw new Error("maximum UI nesting depth exceeded");
+    this.depth += 1;
+  }
+
+  leaveContainer() {
+    this.depth -= 1;
+  }
+}
+
+export class Section extends Container {}
+export class Horizontal extends Container {}
+export class Vertical extends Container {}
+export class Card extends Container {}
+export class TableCell extends Container {}
+
+export class Table {
+  constructor(page) {
+    this.page = page;
+    this.rows = [];
+  }
+
+  header(builder) {
+    this.addRow(true, builder);
+  }
+
+  row(builder) {
+    this.addRow(false, builder);
+  }
+
+  toMap() {
+    return component(14, { rows: this.rows.slice() });
+  }
+
+  addRow(header, builder) {
+    if (this.rows.length >= 100) throw new Error("table row limit exceeded");
+    const row = new TableRow(this.page);
+    this.page.enterContainer();
+    try {
+      builder(row);
+    } finally {
+      this.page.leaveContainer();
+    }
+    const cells = row.toList();
+    if (this.rows.length > 0 && cells.length !== this.rows[0].cells.length) throw new Error("table rows must have the same number of cells");
+    this.page.addComponent();
+    this.rows.push({ header, cells });
+  }
+}
+
+export class TableRow {
+  constructor(page) {
+    this.page = page;
+    this.cells = [];
+  }
+
+  cell(builder) {
+    if (this.cells.length >= 20) throw new Error("table cell limit exceeded");
+    const cell = new TableCell(this.page);
+    this.page.enterContainer();
+    try {
+      builder(cell);
+    } finally {
+      this.page.leaveContainer();
+    }
+    this.page.addComponent();
+    this.cells.push(component(15, { children: cell.toList() }));
+  }
+
+  toList() {
+    return this.cells.slice();
+  }
+}
+
+export class Chart {
+  constructor(type) {
+    this.type = type;
+    this.labelValue = null;
+    this.points = [];
+  }
+
+  label(label) {
+    requireText("label", label);
+    this.labelValue = label;
+    return this;
+  }
+
+  data(points) {
+    if (!Array.isArray(points)) throw new Error("data must be an array");
+    if (points.length > 200) throw new Error("chart data limit exceeded");
+    this.points = points.slice();
+    return this;
+  }
+
+  toMap() {
+    return component(13, { chartType: this.type, label: this.labelValue, data: this.points.map((point) => ({ label: point.label, value: point.value })) });
+  }
+}
+
+export class ChartDataPoint {
+  constructor(label, value) {
+    requireText("label", label);
+    if (!Number.isFinite(value)) throw new Error("value must be a finite number");
+    this.label = label;
+    this.value = value;
+  }
+}
+
+export class ModalBuilder {
+  constructor(customId, title) {
+    requireCustomId(customId);
+    requireNonBlankText("title", title);
+    this.customId = customId;
+    this.title = title;
+    this.components = [];
+  }
+
+  addTextInput(label, input, description = null) {
+    return this.addInput(label, description, input.toMap(label, description));
+  }
+
+  addSelectInput(label, input, description = null) {
+    if (!input.isSearchable() && input.optionCount() === 0) throw new Error("non-searchable select input must have options");
+    return this.addInput(label, description, input.toMap(label, description));
+  }
+
+  addFileInput(label, input, description = null) {
+    return this.addInput(label, description, input.toMap(label, description));
+  }
+
+  addColorInput(label, input, description = null) {
+    return this.addInput(label, description, input.toMap(label, description));
+  }
+
+  addDateInput(label, input, description = null) {
+    return this.addInput(label, description, input.toMap(label, description));
+  }
+
+  addParagraph(content, label = null) {
+    requireNonBlankText("content", content);
+    if (label !== null) requireNonBlankText("label", label);
+    return this.add(component(20, { content, ...(label === null ? {} : { label }) }));
+  }
+
+  toMap() {
+    return { customId: this.customId, title: this.title, components: this.components.slice() };
+  }
+
+  schemaKey(session, interactionId) {
+    return `${session.userKey}:${interactionId}`;
+  }
+
+  parseData(raw) {
+    const parsed = {};
+    for (const item of this.components) {
+      if (item.customId) parsed[item.customId] = normalizeInputValue(item, raw[item.customId] ?? null);
+    }
+    return parsed;
+  }
+
+  validateData(raw) {
+    const errors = {};
+    for (const item of this.components) {
+      if (!item.customId) continue;
+      const error = validateInput(item, normalizeInputValue(item, raw[item.customId]));
+      if (error !== null) errors[item.customId] = error;
+    }
+    return errors;
+  }
+
+  addInput(label, description, item) {
+    requireNonBlankText("label", label);
+    if (description !== null) requireNonBlankText("description", description);
+    return this.add(item);
+  }
+
+  add(item) {
+    if (this.components.length >= 10) throw new Error("modal component limit exceeded");
+    this.components.push(item);
+    return this;
+  }
+}
+
+function validateInput(item, value) {
+  if (item.type === 16) return validateTextInput(item, value);
+  if (item.type === 11) return validateSelectInput(item, value);
+  if (item.type === 17) return validateFileInput(item, value);
+  if (item.type === 18) return validateDateInput(item, value);
+  if (item.type === 19) return validateColorInput(item, value);
+  return null;
+}
+
+function validateTextInput(item, value) {
+  if (value === null || value === undefined || value === "") return required(item) ? "Required." : null;
+  if (typeof value !== "string") return "Invalid value.";
+  if (item.minLength !== undefined && value.length < item.minLength) return `Must be at least ${item.minLength} characters.`;
+  if (item.maxLength !== undefined && value.length > item.maxLength) return `Must be at most ${item.maxLength} characters.`;
+  return null;
+}
+
+function validateSelectInput(item, value) {
+  if (!Array.isArray(value) || value.length === 0) return required(item) ? "Required." : null;
+  if (value.some((entry) => typeof entry !== "string")) return "Invalid value.";
+  const minValues = numericOption(item, "minValues", 0);
+  const maxValues = numericOption(item, "maxValues", 100);
+  if (value.length < minValues) return `Select at least ${minValues}.`;
+  if (value.length > maxValues) return `Select at most ${maxValues}.`;
+  return null;
+}
+
+function validateFileInput(item, value) {
+  if (!Array.isArray(value) || value.length === 0) return required(item) ? "Required." : null;
+  const minFiles = numericOption(item, "minFiles", 0);
+  const maxFiles = numericOption(item, "maxFiles", 10);
+  const maxFileSize = numericOption(item, "maxFileSize", 5242880);
+  if (value.length < minFiles) return `Upload at least ${minFiles} files.`;
+  if (value.length > maxFiles) return `Upload at most ${maxFiles} files.`;
+  for (const file of value) {
+    if (!(file instanceof Blob)) return "Invalid file.";
+    if (file.size > maxFileSize) return `File must be at most ${maxFileSize} bytes.`;
+  }
+  return null;
+}
+
+function validateDateInput(item, value) {
+  if (value === null || value === undefined || value === "") return required(item) ? "Required." : null;
+  const date = parseDateValue(value);
+  if (date === null) return "Invalid date.";
+  if (item.includeTime !== true && !isMidnightUtc(date)) return "Date must not include a time.";
+  return null;
+}
+
+function validateColorInput(item, value) {
+  if (value === null || value === undefined || value === "") return required(item) ? "Required." : null;
+  return parseColorValue(value) === null ? "Invalid color." : null;
+}
+
+export class TextInputBuilder {
+  constructor(customId) {
+    requireCustomId(customId);
+    this.customId = customId;
+    this.multilineValue = false;
+    this.placeholderValue = null;
+    this.defaultValue = null;
+    this.requiredValue = true;
+    this.minimumLength = null;
+    this.maximumLength = null;
+  }
+
+  multiline() {
+    this.multilineValue = true;
+    return this;
+  }
+
+  setPlaceholder(value) {
+    if (value !== null) requireNonBlankText("placeholder", value);
+    this.placeholderValue = value;
+    return this;
+  }
+
+  setDefault(value) {
+    if (value !== null) {
+      requireNonBlankText("value", value);
+      if (this.minimumLength !== null && value.length < this.minimumLength) throw new Error("value is shorter than min length");
+      if (this.maximumLength !== null && value.length > this.maximumLength) throw new Error("value is longer than max length");
+    }
+    this.defaultValue = value;
+    return this;
+  }
+
+  setRequired(value) {
+    this.requiredValue = value !== false;
+    return this;
+  }
+
+  setMinLength(value) {
+    requireRange("length", value, 0, 5000);
+    if (this.maximumLength !== null && value > this.maximumLength) throw new Error("length must not exceed max length");
+    if (this.defaultValue !== null && this.defaultValue.length < value) throw new Error("default value is shorter than min length");
+    this.minimumLength = value;
+    return this;
+  }
+
+  setMaxLength(value) {
+    requireRange("length", value, 1, 5000);
+    if (this.minimumLength !== null && value < this.minimumLength) throw new Error("length must not be below min length");
+    if (this.defaultValue !== null && this.defaultValue.length > value) throw new Error("default value is longer than max length");
+    this.maximumLength = value;
+    return this;
+  }
+
+  toMap(label, description = null) {
+    return component(16, {
+      label,
+      customId: this.customId,
+      multiline: this.multilineValue,
+      required: this.requiredValue,
+      ...(description === null ? {} : { description }),
+      ...(this.placeholderValue === null ? {} : { placeholder: this.placeholderValue }),
+      ...(this.defaultValue === null ? {} : { default: this.defaultValue }),
+      ...(this.minimumLength === null ? {} : { minLength: this.minimumLength }),
+      ...(this.maximumLength === null ? {} : { maxLength: this.maximumLength }),
+    });
+  }
+}
+
+export class SelectInputBuilder {
+  constructor(customId) {
+    requireCustomId(customId);
+    this.customId = customId;
+    this.placeholderValue = null;
+    this.options = [];
+    this.minimumValues = 1;
+    this.maximumValues = 1;
+    this.requiredValue = true;
+    this.searchableValue = false;
+  }
+
+  setPlaceholder(value) {
+    if (value !== null) requireNonBlankText("placeholder", value);
+    this.placeholderValue = value;
+    return this;
+  }
+
+  addOption(option) {
+    if (this.options.length >= 100) throw new Error("select option limit exceeded");
+    if (this.options.some((existing) => existing.value === option.value)) throw new Error("select option values must be unique");
+    this.options.push(option);
+    return this;
+  }
+
+  setRequired(value) {
+    this.requiredValue = value !== false;
+    return this;
+  }
+
+  setMinValues(value) {
+    requireRange("min", value, 0, 100);
+    this.minimumValues = value;
+    if (this.maximumValues < value) this.maximumValues = value;
+    return this;
+  }
+
+  setMaxValues(value) {
+    requireRange("max", value, 1, 100);
+    this.maximumValues = value;
+    if (this.minimumValues > value) this.minimumValues = value;
+    return this;
+  }
+
+  setSearchable(value) {
+    this.searchableValue = value !== false;
+    return this;
+  }
+
+  isSearchable() {
+    return this.searchableValue;
+  }
+
+  optionCount() {
+    return this.options.length;
+  }
+
+  toMap(label, description = null) {
+    return component(11, {
+      label,
+      customId: this.customId,
+      required: this.requiredValue,
+      minValues: this.minimumValues,
+      maxValues: this.maximumValues,
+      options: this.options.map((option) => option.toMap(true)),
+      ...(description === null ? {} : { description }),
+      ...(this.placeholderValue === null ? {} : { placeholder: this.placeholderValue }),
+      ...(this.searchableValue ? { searchable: true } : {}),
+    });
+  }
+}
+
+export class SelectOption {
+  constructor(label, value) {
+    requireNonBlankText("label", label);
+    requireNonBlankText("value", value);
+    this.label = label;
+    this.value = value;
+    this.selected = false;
+  }
+
+  setSelected(value) {
+    this.selected = value !== false;
+    return this;
+  }
+
+  toMap(includeSelected = false) {
+    return { label: this.label, value: this.value, ...(includeSelected && this.selected ? { selected: true } : {}) };
+  }
+}
+
+export class FileInputBuilder {
+  constructor(customId) {
+    requireCustomId(customId);
+    this.customId = customId;
+    this.requiredValue = true;
+    this.minimumFiles = 1;
+    this.maximumFiles = 1;
+  }
+
+  setRequired(value) {
+    this.requiredValue = value !== false;
+    return this;
+  }
+
+  setMinFiles(value) {
+    requireRange("min", value, 0, 10);
+    this.minimumFiles = value;
+    if (this.maximumFiles < value) this.maximumFiles = value;
+    return this;
+  }
+
+  setMaxFiles(value) {
+    requireRange("max", value, 1, 10);
+    this.maximumFiles = value;
+    if (this.minimumFiles > value) this.minimumFiles = value;
+    return this;
+  }
+
+  toMap(label, description = null) {
+    return component(17, { label, customId: this.customId, required: this.requiredValue, minFiles: this.minimumFiles, maxFiles: this.maximumFiles, maxFileSize: 5242880, ...(description === null ? {} : { description }) });
+  }
+}
+
+export class DateInputBuilder {
+  constructor(customId) {
+    requireCustomId(customId);
+    this.customId = customId;
+    this.includeTimeValue = false;
+    this.requiredValue = true;
+    this.defaultValue = null;
+  }
+
+  includeTime() {
+    this.includeTimeValue = true;
+    return this;
+  }
+
+  setRequired(value) {
+    this.requiredValue = value !== false;
+    return this;
+  }
+
+  setDefault(value) {
+    if (value === null) {
+      this.defaultValue = null;
+      return this;
+    }
+    const date = parseDateValue(value);
+    if (date === null) throw new Error("Invalid date.");
+    if (!this.includeTimeValue && !isMidnightUtc(date)) throw new Error("date must be at midnight UTC unless includeTime() is enabled");
+    this.defaultValue = date;
+    return this;
+  }
+
+  toMap(label, description = null) {
+    const formatted = this.defaultValue instanceof Date ? formatDateValue(this.includeTimeValue, this.defaultValue) : this.defaultValue;
+    return component(18, { label, customId: this.customId, includeTime: this.includeTimeValue, required: this.requiredValue, ...(description === null ? {} : { description }), ...(formatted === null ? {} : { default: formatted }) });
+  }
+}
+
+export class ColorInputBuilder {
+  constructor(customId) {
+    requireCustomId(customId);
+    this.customId = customId;
+    this.requiredValue = true;
+    this.defaultValue = null;
+  }
+
+  setRequired(value) {
+    this.requiredValue = value !== false;
+    return this;
+  }
+
+  setDefault(value) {
+    if (value === null) {
+      this.defaultValue = null;
+      return this;
+    }
+    const color = parseColorValue(value);
+    if (color === null) throw new Error("Invalid color.");
+    this.defaultValue = color;
+    return this;
+  }
+
+  toMap(label, description = null) {
+    return component(19, { label, customId: this.customId, required: this.requiredValue, ...(description === null ? {} : { description }), ...(this.defaultValue === null ? {} : { default: this.defaultValue }) });
+  }
+}
+
+export class Session {
+  constructor(userKey) {
+    requireText("userKey", userKey);
+    this.userKey = userKey;
+    this.entries = new Map();
+  }
+
+  get(key) {
+    requireText("key", key);
+    return this.entries.get(key) ?? null;
+  }
+
+  set(key, value) {
+    requireText("key", key);
+    if (value === null || value === undefined) this.entries.delete(key);
+    else this.entries.set(key, value);
+  }
+
+  update(key, updater) {
+    this.set(key, updater(this.get(key)));
+  }
+
+  delete(key) {
+    requireText("key", key);
+    return this.entries.delete(key);
+  }
+
+  list() {
+    return Array.from(this.entries.keys());
+  }
+
+  clear() {
+    this.entries.clear();
+  }
+}
+
+class InteractionBase {
+  constructor(customId, session, interactionId) {
+    requireCustomId(customId);
+    requireNonBlankText("interactionId", interactionId);
+    this.customId = customId;
+    this.session = session;
+    this.interactionId = interactionId;
+    this.resultValue = null;
+    this.replied = false;
+  }
+
+  reply(message) {
+    requireText("message", message);
+    this.ensureNotReplied();
+    this.replied = true;
+    this.resultValue = { ok: true, message };
+  }
+
+  showModal(modal) {
+    this.ensureNotReplied();
+    ensureModalHasComponents(modal);
+    this.replied = true;
+    modalSchemas.set(modal.schemaKey(this.session, this.interactionId), modal);
+    this.resultValue = { ok: true, modal: modal.toMap() };
+  }
+
+  result() {
+    return this.resultValue ?? noResponse();
+  }
+
+  ensureNotReplied() {
+    if (this.replied) throw new Error("interaction has already been replied to");
+  }
+}
+
+export class ButtonInteraction extends InteractionBase {}
+
+export class ModalInteraction extends InteractionBase {
+  constructor(customId, session, data, interactionId) {
+    super(customId, session, interactionId);
+    this.data = data;
+  }
+
+  getTextInput(customId) {
+    return this.data[customId] ?? null;
+  }
+
+  getSelectInput(customId) {
+    return this.data[customId] ?? [];
+  }
+
+  getFileInput(customId) {
+    return this.data[customId] ?? [];
+  }
+
+  getDateInput(customId) {
+    const value = this.data[customId];
+    return value == null ? null : new Date(value);
+  }
+
+  getColorInput(customId) {
+    return this.data[customId] ?? null;
+  }
+
+  reject(message) {
+    requireNonBlankText("message", message);
+    this.ensureNotReplied();
+    this.replied = true;
+    this.resultValue = { ok: true, rejection: { message } };
+  }
+
+  rejectInputs(inputs) {
+    this.ensureNotReplied();
+    if (inputs === null || typeof inputs !== "object" || Array.isArray(inputs)) throw new Error("inputs must be an object");
+    if (Object.keys(inputs).length === 0) throw new Error("inputs must not be empty");
+    const checked = {};
+    for (const [customId, message] of Object.entries(inputs)) {
+      requireCustomId(customId);
+      requireNonBlankText("message", message);
+      if (!Object.prototype.hasOwnProperty.call(this.data, customId)) throw new Error("modal input not found");
+      checked[customId] = message;
+    }
+    this.replied = true;
+    this.resultValue = inputRejection(checked);
+  }
+}
+
+export class SelectMenuSearch {
+  constructor(customId, query, session) {
+    requireCustomId(customId);
+    requireText("query", query);
+    this.customId = customId;
+    this.query = query;
+    this.session = session;
+    this.resultValue = null;
+    this.responded = false;
+  }
+
+  respond(options) {
+    if (this.responded) throw new Error("search has already been responded to");
+    if (options.length > 100) throw new Error("select option limit exceeded");
+    this.responded = true;
+    this.resultValue = { ok: true, customId: this.customId, options: options.map((option) => option.toMap(false)) };
+  }
+
+  result() {
+    return this.resultValue ?? noResponse();
+  }
+}
+
+export function dashboard(handler) {
+  dashboardHandler = handler;
+}
+
+export function onButtonInteraction(handler) {
+  buttonHandlers.push(handler);
+}
+
+export function onModalInteraction(handler) {
+  modalHandlers.push(handler);
+}
+
+export function onSelectMenuSearch(handler) {
+  selectMenuSearchHandlers.push(handler);
+}
+
+export function __fraxicHandleUiRequest(payload) {
+  const request = payload;
+  if (request.type === "render") return render(request);
+  if (request.type === "button") return handleButton(request);
+  if (request.type === "modal") return handleModal(request);
+  if (request.type === "selectMenuSearch") return handleSelectMenuSearch(request);
+  return { ok: false, reason: "invalidRequest" };
+}
+
+function render(request) {
+  if (dashboardHandler === null) return { ok: false, reason: "noHandler", components: [] };
+  const page = new Page(sessionFor(request));
+  dashboardHandler(page);
+  return { ok: true, components: page.toMap().components };
+}
+
+function handleButton(request) {
+  if (buttonHandlers.length === 0) return noHandler();
+  const interaction = new ButtonInteraction(request.customId, sessionFor(request), request.interactionId);
+  for (const handler of buttonHandlers) handler(interaction);
+  return interaction.result();
+}
+
+function handleModal(request) {
+  if (modalHandlers.length === 0) return noHandler();
+  const session = sessionFor(request);
+  const schemaKey = `${session.userKey}:${request.originInteractionId}`;
+  const schema = modalSchemas.get(schemaKey);
+  if (!schema) return { ok: false, reason: "gone" };
+  const errors = schema.validateData(request.data ?? {});
+  if (Object.keys(errors).length > 0) {
+    modalSchemas.delete(schemaKey);
+    modalSchemas.set(schema.schemaKey(session, request.interactionId), schema);
+    return inputRejection(errors);
+  }
+  const interaction = new ModalInteraction(request.customId, session, schema.parseData(request.data ?? {}), request.interactionId);
+  let removeSchema = true;
+  try {
+    for (const handler of modalHandlers) handler(interaction);
+    const result = interaction.result();
+    if (result.rejection) {
+      modalSchemas.delete(schemaKey);
+      modalSchemas.set(schema.schemaKey(session, request.interactionId), schema);
+      removeSchema = false;
+    }
+    return result;
+  } finally {
+    if (removeSchema) modalSchemas.delete(schemaKey);
+  }
+}
+
+function handleSelectMenuSearch(request) {
+  if (selectMenuSearchHandlers.length === 0) return noHandler();
+  const search = new SelectMenuSearch(request.customId, request.query, sessionFor(request));
+  for (const handler of selectMenuSearchHandlers) handler(search);
+  return search.result();
+}
+
+function sessionFor(request) {
+  const key = request.sessionKey;
+  if (!sessions.has(key)) sessions.set(key, new Session(key));
+  return sessions.get(key);
+}
+
+function inputRejection(inputs) {
+  return { ok: true, rejection: { inputs } };
+}
+
+function noHandler() {
+  return { ok: false, reason: "noHandler" };
+}
+
+function noResponse() {
+  return { ok: false, reason: "noResponse" };
+}
+
+function ensureModalHasComponents(modal) {
+  if (modal.toMap().components.length === 0) throw new Error("modal must have at least 1 component");
+}
+
+globalThis.__fraxic?.ipc?.listen?.("ui", __fraxicHandleUiRequest);

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@fraxic/ui",
+  "version": "0.3.0",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  }
+}