@arcanewizards/sigil 0.1.0

package/dist/frontend/appearance.cjs

@@ -0,0 +1,88 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkMXDDIFIOcjs = require('../chunk-MXDDIFIO.cjs');
+require('../chunk-PEARNJ5G.cjs');
+require('../chunk-RI33QVOD.cjs');
+require('../chunk-5DRI7C4U.cjs');
+
+// src/frontend/appearance.tsx
+var _core = require('@arcanejs/toolkit-frontend/components/core');
+var _util = require('@arcanejs/toolkit-frontend/util');
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var AppearanceSwitcher = ({
+  color,
+  onColorChange
+}) => {
+  const { colorSchemePreference, setColorSchemePreference } = _util.useColorSchemePreferences.call(void 0, );
+  const selectDarkMode = _react.useCallback.call(void 0, () => {
+    setColorSchemePreference("dark");
+  }, [setColorSchemePreference]);
+  const selectLightMode = _react.useCallback.call(void 0, () => {
+    setColorSchemePreference("light");
+  }, [setColorSchemePreference]);
+  const selectSystemMode = _react.useCallback.call(void 0, () => {
+    setColorSchemePreference("auto");
+  }, [setColorSchemePreference]);
+  const updateHintColor = _react.useCallback.call(void 0, 
+    (color2) => {
+      if (onColorChange) {
+        onColorChange(color2);
+      }
+    },
+    [onColorChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "control-grid-pos-all flex flex-wrap items-stretch gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkMXDDIFIOcjs.ControlButton,
+      {
+        onClick: selectDarkMode,
+        active: colorSchemePreference === "dark",
+        title: "Switch to Dark Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "dark_mode", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Dark" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkMXDDIFIOcjs.ControlButton,
+      {
+        onClick: selectLightMode,
+        active: colorSchemePreference === "light",
+        title: "Switch to Light Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "light_mode", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Light" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkMXDDIFIOcjs.ControlButton,
+      {
+        onClick: selectSystemMode,
+        active: colorSchemePreference === "auto",
+        title: "Switch to System Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "contrast", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Auto / System" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkMXDDIFIOcjs.ControlColorSelect,
+      {
+        color,
+        onChange: updateHintColor,
+        variant: "large"
+      }
+    )
+  ] });
+};
+
+
+exports.AppearanceSwitcher = AppearanceSwitcher;

package/dist/frontend/appearance.d.cts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SigilColor } from './styling.cjs';
+import 'zod';
+
+type AppearanceSwitcherProps = {
+    color: SigilColor;
+    onColorChange: (color: SigilColor) => void;
+};
+declare const AppearanceSwitcher: FC<AppearanceSwitcherProps>;
+
+export { AppearanceSwitcher };

package/dist/frontend/appearance.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SigilColor } from './styling.js';
+import 'zod';
+
+type AppearanceSwitcherProps = {
+    color: SigilColor;
+    onColorChange: (color: SigilColor) => void;
+};
+declare const AppearanceSwitcher: FC<AppearanceSwitcherProps>;
+
+export { AppearanceSwitcher };

package/dist/frontend/appearance.js

@@ -0,0 +1,88 @@
+import {
+  ControlButton,
+  ControlColorSelect
+} from "../chunk-XAK7WC3D.js";
+import "../chunk-BIY5HAXP.js";
+import "../chunk-4PMRDURG.js";
+import "../chunk-H4U4Z4GM.js";
+
+// src/frontend/appearance.tsx
+import { Icon } from "@arcanejs/toolkit-frontend/components/core";
+import { useColorSchemePreferences } from "@arcanejs/toolkit-frontend/util";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AppearanceSwitcher = ({
+  color,
+  onColorChange
+}) => {
+  const { colorSchemePreference, setColorSchemePreference } = useColorSchemePreferences();
+  const selectDarkMode = useCallback(() => {
+    setColorSchemePreference("dark");
+  }, [setColorSchemePreference]);
+  const selectLightMode = useCallback(() => {
+    setColorSchemePreference("light");
+  }, [setColorSchemePreference]);
+  const selectSystemMode = useCallback(() => {
+    setColorSchemePreference("auto");
+  }, [setColorSchemePreference]);
+  const updateHintColor = useCallback(
+    (color2) => {
+      if (onColorChange) {
+        onColorChange(color2);
+      }
+    },
+    [onColorChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "control-grid-pos-all flex flex-wrap items-stretch gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      ControlButton,
+      {
+        onClick: selectDarkMode,
+        active: colorSchemePreference === "dark",
+        title: "Switch to Dark Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "dark_mode", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ jsx("span", { children: "Dark" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ControlButton,
+      {
+        onClick: selectLightMode,
+        active: colorSchemePreference === "light",
+        title: "Switch to Light Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "light_mode", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ jsx("span", { children: "Light" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ControlButton,
+      {
+        onClick: selectSystemMode,
+        active: colorSchemePreference === "auto",
+        title: "Switch to System Mode",
+        variant: "large",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "contrast", className: "text-[1.5rem]" }),
+          /* @__PURE__ */ jsx("span", { children: "Auto / System" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ControlColorSelect,
+      {
+        color,
+        onChange: updateHintColor,
+        variant: "large"
+      }
+    )
+  ] });
+};
+export {
+  AppearanceSwitcher
+};

package/dist/frontend/context.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+var _chunkVZ4A6RRTcjs = require('../chunk-VZ4A6RRT.cjs');
+
+
+
+
+
+
+
+exports.ChangeCommitContext = _chunkVZ4A6RRTcjs.ChangeCommitContext; exports.DebuggerContext = _chunkVZ4A6RRTcjs.DebuggerContext; exports.SystemInformationContext = _chunkVZ4A6RRTcjs.SystemInformationContext; exports.useChangeCommitBoundary = _chunkVZ4A6RRTcjs.useChangeCommitBoundary; exports.useDebuggerContext = _chunkVZ4A6RRTcjs.useDebuggerContext; exports.useSystemInformation = _chunkVZ4A6RRTcjs.useSystemInformation;

package/dist/frontend/context.d.cts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { A as AppRootLogEntry, S as SystemInformation } from '../types-X8O95zmC.cjs';
+import '@arcanejs/diff';
+
+declare const SystemInformationContext: react.Context<SystemInformation>;
+type DebuggerContextData = {
+    setDebugMode: (enabled: boolean) => void;
+    logs: AppRootLogEntry[];
+};
+declare const DebuggerContext: react.Context<DebuggerContextData>;
+declare const useSystemInformation: () => SystemInformation;
+declare const useDebuggerContext: () => DebuggerContextData;
+/**
+ * Context used to signal that changes have been made that should be committed.
+ * This is used to easily signal when a user has made as many changes as they intend to,
+ * and then want to commit the changes.
+ */
+type ChangeCommitContextData = {
+    commitChanges: () => void;
+};
+declare const ChangeCommitContext: react.Context<ChangeCommitContextData>;
+/**
+ * Create a commit boundary that can by frontend components that
+ * a user wants to finish making changes.
+ *
+ * This allows for components to wait until a change has been fully committed
+ * and propagated, and then perform an action,
+ * such as closing a dialog, or moving focus to another component.
+ */
+declare const useChangeCommitBoundary: (dataRef: unknown, onCommit: () => void) => ChangeCommitContextData;
+
+export { ChangeCommitContext, type ChangeCommitContextData, DebuggerContext, type DebuggerContextData, SystemInformationContext, useChangeCommitBoundary, useDebuggerContext, useSystemInformation };

package/dist/frontend/context.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { A as AppRootLogEntry, S as SystemInformation } from '../types-X8O95zmC.js';
+import '@arcanejs/diff';
+
+declare const SystemInformationContext: react.Context<SystemInformation>;
+type DebuggerContextData = {
+    setDebugMode: (enabled: boolean) => void;
+    logs: AppRootLogEntry[];
+};
+declare const DebuggerContext: react.Context<DebuggerContextData>;
+declare const useSystemInformation: () => SystemInformation;
+declare const useDebuggerContext: () => DebuggerContextData;
+/**
+ * Context used to signal that changes have been made that should be committed.
+ * This is used to easily signal when a user has made as many changes as they intend to,
+ * and then want to commit the changes.
+ */
+type ChangeCommitContextData = {
+    commitChanges: () => void;
+};
+declare const ChangeCommitContext: react.Context<ChangeCommitContextData>;
+/**
+ * Create a commit boundary that can by frontend components that
+ * a user wants to finish making changes.
+ *
+ * This allows for components to wait until a change has been fully committed
+ * and propagated, and then perform an action,
+ * such as closing a dialog, or moving focus to another component.
+ */
+declare const useChangeCommitBoundary: (dataRef: unknown, onCommit: () => void) => ChangeCommitContextData;
+
+export { ChangeCommitContext, type ChangeCommitContextData, DebuggerContext, type DebuggerContextData, SystemInformationContext, useChangeCommitBoundary, useDebuggerContext, useSystemInformation };

package/dist/frontend/context.js

@@ -0,0 +1,16 @@
+import {
+  ChangeCommitContext,
+  DebuggerContext,
+  SystemInformationContext,
+  useChangeCommitBoundary,
+  useDebuggerContext,
+  useSystemInformation
+} from "../chunk-EJNNLQ2S.js";
+export {
+  ChangeCommitContext,
+  DebuggerContext,
+  SystemInformationContext,
+  useChangeCommitBoundary,
+  useDebuggerContext,
+  useSystemInformation
+};

package/dist/frontend/controls/index.cjs

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkMXDDIFIOcjs = require('../../chunk-MXDDIFIO.cjs');
+require('../../chunk-PEARNJ5G.cjs');
+require('../../chunk-RI33QVOD.cjs');
+require('../../chunk-5DRI7C4U.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.CheckboxControlButton = _chunkMXDDIFIOcjs.CheckboxControlButton; exports.ControlButton = _chunkMXDDIFIOcjs.ControlButton; exports.ControlButtonGroup = _chunkMXDDIFIOcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkMXDDIFIOcjs.ControlColorSelect; exports.ControlDetails = _chunkMXDDIFIOcjs.ControlDetails; exports.ControlDialog = _chunkMXDDIFIOcjs.ControlDialog; exports.ControlDialogButtons = _chunkMXDDIFIOcjs.ControlDialogButtons; exports.ControlInput = _chunkMXDDIFIOcjs.ControlInput; exports.ControlLabel = _chunkMXDDIFIOcjs.ControlLabel; exports.ControlParagraph = _chunkMXDDIFIOcjs.ControlParagraph; exports.ControlPercent = _chunkMXDDIFIOcjs.ControlPercent; exports.ControlSelect = _chunkMXDDIFIOcjs.ControlSelect; exports.InputSpanningTitle = _chunkMXDDIFIOcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkMXDDIFIOcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkMXDDIFIOcjs.LongPressableControlButton; exports.clsControlButton = _chunkMXDDIFIOcjs.clsControlButton; exports.clsControlPosition = _chunkMXDDIFIOcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkMXDDIFIOcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkMXDDIFIOcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkMXDDIFIOcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkMXDDIFIOcjs.controlPositionClass;

package/dist/frontend/controls/index.d.cts

@@ -0,0 +1,168 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, CSSProperties, FC, ComponentProps, InputHTMLAttributes, MutableRefObject } from 'react';
+import { TooltipProps } from '../tooltip.cjs';
+import { PressableOnClickListener } from '../input.cjs';
+import { DialogProps } from '../dialogs.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SigilColor } from '../styling.cjs';
+import 'zod';
+
+type ControlPosition = 'row' | 'label' | 'first' | 'second' | 'both' | 'all' | 'extra';
+declare const clsControlPosition: (position?: ControlPosition) => "control-grid-pos-row" | "control-grid-pos-label" | "control-grid-pos-first" | "control-grid-pos-second" | "control-grid-pos-both" | "control-grid-pos-all" | "control-grid-pos-extra" | undefined;
+declare const clsControlSubgridPosition: (position: ControlPosition, subgrid?: boolean) => "col-[1/span_1]" | "col-[2/span_1]" | "col-[3/span_1]" | undefined;
+declare const controlPositionClass: (position?: ControlPosition) => "control-grid-pos-row" | "control-grid-pos-label" | "control-grid-pos-first" | "control-grid-pos-second" | "control-grid-pos-both" | "control-grid-pos-all" | "control-grid-pos-extra" | undefined;
+
+declare const CONTROL_BUTTON_VAR_SUFFIX: {
+    readonly bg: "bg";
+    readonly bgHover: "bg-hover";
+    readonly bgActive: "bg-active";
+    readonly fg: "fg";
+    readonly fgHover: "fg-hover";
+    readonly fgActive: "fg-active";
+    readonly border: "border";
+    readonly borderHover: "border-hover";
+    readonly borderActive: "border-active";
+};
+declare const controlButtonColorVariable: (property: keyof typeof CONTROL_BUTTON_VAR_SUFFIX) => string;
+declare const controlButtonColorVariables: (usage: Record<keyof typeof CONTROL_BUTTON_VAR_SUFFIX, string>) => CSSProperties;
+type ControlButtonVariant = 'standard' | 'border' | 'large' | 'table-row' | 'toolbar' | 'titlebar' | 'properties';
+type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'onClick' | 'title'> & {
+    onClick: PressableOnClickListener;
+    variant: ControlButtonVariant;
+    active?: boolean;
+    title?: ReactNode;
+    tooltipSide?: TooltipProps['side'];
+    position?: ControlPosition;
+} & ({
+    children: ReactNode;
+    icon?: string;
+} | {
+    children?: undefined;
+    icon: string;
+});
+type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'title'> & {
+    children?: ReactNode;
+    icon?: string;
+    variant?: ControlButtonVariant;
+    active?: boolean;
+    touching?: boolean;
+    title?: ReactNode;
+    tooltipSide?: TooltipProps['side'];
+    position?: ControlPosition;
+};
+declare const clsControlButton: ({ variant, active, touching, position, className, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className">) => string;
+declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
+type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
+    label?: string;
+};
+declare const CheckboxControlButton: react.ForwardRefExoticComponent<Omit<ControlButtonProps, "children" | "icon"> & {
+    label?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+type LongPressableControlButtonProps = Omit<ControlButtonFrameProps, 'icon' | 'onClick' | 'touching'> & {
+    children: ReactNode;
+    onPress: () => void;
+    onRelease: () => void;
+};
+declare const LongPressableControlButton: react.ForwardRefExoticComponent<Omit<ControlButtonFrameProps, "onClick" | "touching" | "icon"> & {
+    children: ReactNode;
+    onPress: () => void;
+    onRelease: () => void;
+} & react.RefAttributes<HTMLButtonElement>>;
+type ControlButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+};
+declare const ControlButtonGroup: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type ControlParagraphMode = 'error' | 'success' | 'warning';
+type ControlParagraphProps = ComponentPropsWithoutRef<'p'> & {
+    position?: ControlPosition;
+    mode?: ControlParagraphMode;
+};
+declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    position?: ControlPosition;
+    mode?: ControlParagraphMode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+    subgrid?: boolean;
+    position?: ControlPosition;
+    disabled?: boolean;
+    nonMicro?: boolean;
+};
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    subgrid?: boolean;
+    position?: ControlPosition;
+    disabled?: boolean;
+    nonMicro?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+    align?: 'start' | 'center' | 'end';
+};
+declare const ControlDetails: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+    align?: "start" | "center" | "end";
+} & react.RefAttributes<HTMLDivElement>>;
+type InputSpanningTitleProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+};
+declare const InputSpanningTitle: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const ControlDialogButtons: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+type ControlDialogProps = Omit<DialogProps, 'variant'> & {
+    large?: boolean;
+};
+declare const ControlDialog: FC<ControlDialogProps>;
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'ref' | 'onChange'> & {
+    value: string | null;
+    disabled?: boolean;
+    onChange: (value: string, enterPressed: boolean) => void;
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+};
+declare const InputWithDelayedPropagation: FC<InputProps>;
+type ControlInputProps = ComponentProps<typeof InputWithDelayedPropagation> & {
+    position?: ControlPosition;
+    subgrid?: boolean;
+    nonMicro?: boolean;
+};
+declare const ControlInput: FC<ControlInputProps>;
+type ControlPercentProps = Omit<ControlInputProps, 'className'> & {
+    className?: string;
+};
+declare const ControlPercent: FC<ControlPercentProps>;
+
+type SelectOption<T> = {
+    label: string;
+    value: T;
+    /**
+     * Set to true to indicate that when selected,
+     * the select should look active.
+     */
+    active?: boolean;
+};
+type SelectProps<T extends string | null> = {
+    options: SelectOption<T>[];
+    value: T | '';
+    onChange: (value: T) => void;
+    triggerText?: (option: SelectOption<T>) => ReactNode;
+    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
+    option?: (option: SelectOption<T>) => ReactNode;
+    variant: ControlButtonVariant;
+    position?: ControlPosition;
+    disabled?: boolean;
+    tooltip?: string;
+    placeholder?: ReactNode;
+    triggerClassName?: string;
+};
+declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+type ControlColorSelectProps = {
+    color: SigilColor | '';
+    onChange: (color: SigilColor) => void;
+} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
+declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };