Utility APIs

export default class Color {
  constructor(...args: any[]);
  
  // Color channel properties
  red: number;
  green: number;
  blue: number;
  alpha: number;
  hue: number;
  saturation: number;
  lightness: number;
  
  // Instance methods
  getHue(): number;
  setHue(value: number): void;
  getSaturation(): number;
  setSaturation(value: number): void;
  getLightness(): number;
  setLightness(value: number): void;
  clone(): Color;
  toString(type?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla'): string;
  
  // Static methods
  static parse(...args: any[]): Color;
  static parseObject(object: unknown): Color;
  static parseHex(hex: string): Color;
  static parseIndex(value: number, channels?: number): Color;
  static fromRGB(red: number, green: number, blue: number, alpha?: number): Color;
  static fromHSL(hue: number, saturation: number, lightness: number, alpha?: number): Color;
  static isColor(arg: unknown): arg is Color;
}

export class ColorTypeError extends Error {
  constructor();
}

import Color from "buefy";

// Create colors from different formats
const redHex = new Color('#ff0000');
const blueRgb = Color.fromRGB(0, 0, 255);
const greenHsl = Color.fromHSL(120, 1, 0.5);

// Manipulate colors
const color = new Color('#3273dc');
color.lightness = 0.8; // Lighten
color.saturation = 0.5; // Desaturate

// Convert between formats
console.log(color.toString('hex'));   // #a1c4f7
console.log(color.toString('hsl'));   // hsl(217deg, 50%, 80%)
console.log(color.toString('rgba'));  // rgba(161, 196, 247, 1)

// Parse from strings
const parsed = Color.parse('rgb(50, 115, 220)');
const named = Color.parse('rebeccapurple');

export const colorChannels: readonly ['red', 'green', 'blue', 'alpha'];
export type ColorChannel = typeof colorChannels[number];

export const hslChannels: readonly ['hue', 'saturation', 'lightness'];
export type HslChannel = typeof hslChannels[number];

export type Rgba = {
  [C in ColorChannel]: number;
};

export type Rgb = Omit<Rgba, 'alpha'>;

export type Hsla = {
  [C in HslChannel]: number;
};

export type Hsl = Omit<Hsla, 'alpha'>;

export const colorsNammed: {
  readonly transparent: '#00000000';
  readonly black: '#000000';
  readonly white: '#ffffff';
  readonly red: '#ff0000';
  readonly green: '#008000';
  readonly blue: '#0000ff';
  // ... all named colors
};

export type ColorName = keyof typeof colorsNammed;

// Type utilities
export type ExtractComponentProps<T> = T extends { new (...args: any[]): infer U }
  ? U extends { $props: infer P }
    ? { -readonly [Key in keyof P]?: P[Key] }
    : Record<string, never>
  : Record<string, never>;

export type ExtractComponentData<T> = T extends { new (...args: any[]): infer U }
  ? U extends { $data: infer D }
    ? { [Key in keyof D]?: D[Key] }
    : Record<string, never>
  : Record<string, never>;

// Math utilities
export const sign: (value: number) => number;

// Array utilities
export function indexOf<T>(
  array: T[], 
  obj: T, 
  fn?: (item: T, obj: T) => boolean
): number;

// Object utilities
export function merge<T>(
  target: { [K in keyof T]: T[K] },
  source: DeepPartial<T>,
  deep?: boolean
): { [K in keyof T]: T[K] };

// Vue utilities
export function copyAppContext(sourceApp: App, targetApp: App): void;
export function getComponentFromVNode(vnode: VNode): ComponentPublicInstance | null;

import { merge, indexOf, sign } from "buefy";

// Merge objects
const defaultConfig = { theme: 'light', size: 'medium' };
const userConfig = { theme: 'dark' };
const finalConfig = merge(defaultConfig, userConfig);
// Result: { theme: 'dark', size: 'medium' }

// Find array index with custom comparator
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const index = indexOf(users, { id: 2 }, (a, b) => a.id === b.id);
// Result: 1

// Math sign function
console.log(sign(-5)); // -1
console.log(sign(0));  // 0
console.log(sign(5));  // 1

export type VueClassAttribute =
  | (string | Record<string, boolean | undefined> | null | undefined)
  | (string | Record<string, boolean | undefined> | null | undefined)[];

export type ModalCancellableOption = 'escape' | 'x' | 'outside' | 'button';

export const NOTICE_POSITIONS: readonly [
  'is-top-right',
  'is-top',
  'is-top-left',
  'is-bottom-right',
  'is-bottom',
  'is-bottom-left'
];

export type NoticePosition = typeof NOTICE_POSITIONS[number];

export type ModalScrollBehavior = 'clip' | 'keep';

export interface BuefyConfig {
  defaultIconComponent?: string;
  defaultIconPack?: string;
  defaultToastPosition?: NoticePosition;
  defaultSnackbarPosition?: NoticePosition;
  defaultNotificationPosition?: NoticePosition;
  defaultTooltipType?: string;
  defaultTooltipAnimated?: boolean;
  defaultInputAutocomplete?: string;
  defaultDateFormatter?: (date: Date) => string;
  defaultDateParser?: (dateString: string) => Date;
  defaultDateCreator?: () => Date;
  defaultTimeFormatter?: (date: Date) => string;
  defaultTimeParser?: (timeString: string) => Date;
  defaultModalCanCancel?: boolean | string[];
  defaultModalScroll?: ModalScrollBehavior;
  defaultDatepickerMobileNative?: boolean;
  defaultTimepickerMobileNative?: boolean;
  defaultNotificationDuration?: number;
  defaultSnackbarDuration?: number;
  defaultToastDuration?: number;
  defaultProgrammaticPromise?: boolean;
  defaultLinkTags?: string[];
  defaultImageWebpFallback?: string;
  defaultImageLazy?: boolean;
  defaultUseHtml5Validation?: boolean;
  defaultFieldLabelPosition?: string;
  defaultFieldGrouped?: boolean;
  defaultFieldGroupMultiline?: boolean;
  defaultFieldAddons?: boolean;
  defaultDatepickerCloseOnClick?: boolean;
  defaultDatepickerShowWeekNumber?: boolean;
  defaultDatepickerWeekNumberClickable?: boolean;
  defaultDatepickerMobileModal?: boolean;
  defaultTimepickerEnableSeconds?: boolean;
  defaultTimepickerHoursLabel?: string;
  defaultTimepickerMinutesLabel?: string;
  defaultTimepickerSecondsLabel?: string;
  defaultClockpickerType?: string;
  defaultClockpickerHoursLabel?: string;
  defaultClockpickerMinutesLabel?: string;
  defaultTrapFocus?: boolean;
  defaultAutoFocus?: boolean;
  defaultTableSortIcon?: string;
  defaultTableSortIconAsc?: string;
  defaultTableSortIconDesc?: string;
  defaultPaginationSimple?: boolean;
  defaultPaginationSize?: string;
  defaultPaginationPerPage?: number;
  customIconPacks?: object;
}

export type BuefyConfigOptions = DeepPartial<BuefyConfig>;

export function setOptions(options: BuefyConfigOptions): void;
export function setVueInstance(Vue: App): void;
export function getVueInstance(): App | undefined;

import { setOptions } from "buefy";

// Configure Buefy globally
setOptions({
  defaultIconPack: 'fas',
  defaultToastPosition: 'is-bottom-right',
  defaultDateFormatter: (date) => date.toLocaleDateString(),
  defaultModalCanCancel: ['escape', 'outside'],
  defaultProgrammaticPromise: true
});

export function registerComponent(Vue: App, component: Component): void;
export function registerComponentProgrammatic(
  Vue: App, 
  property: string, 
  component: any
): void;

// Configure icon packs
app.use(Buefy, {
  defaultIconPack: 'fas', // FontAwesome Solid
  customIconPacks: {
    'custom': {
      sizes: {
        'default': '',
        'is-small': '',
        'is-medium': 'fa-lg',
        'is-large': 'fa-2x'
      },
      iconPrefix: 'custom-'
    }
  }
});

// VueClassAttribute type supports multiple formats
const classes: VueClassAttribute = [
  'base-class',
  {
    'is-active': isActive,
    'is-disabled': isDisabled
  },
  conditionalClass && 'conditional-class'
];