es-application-template 0.0.8 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.0.13
+
+- Add Appearance core/runtime/bootstrap and the Appearance management workspace with Theme Library.
+- Add schema 14 migration, including explicit schema 13 to 14 grid color-source migration.
+- AppProvider now composes AppearanceRuntime, SettingRuntime and ShortcutRuntime.
+- Export bootstrapAppearance, useAppearance, AppearanceSettingsPage, appearanceDefaults and AppearanceConfig from the package root.
+- Widen es-grid-template peer compatibility to the verified 1.9.46+ line used by ADMIN/PO.
+- Skip protected Config API fetches in Appearance/Setting runtime until a user identity exists.
+
+## 0.0.9
+
+- Add the Settings key convention living specification with quick-reference and full-contract views.
+- Add copy-all and JSON download actions generated from one structured convention source.
+- Make the package sidebar styling self-contained instead of relying on the host application's `.customizer` class.
+
 ## 0.1.0
 
 - Initial standalone package extracted from the verified ADMIN embedded module.

package/README.md

@@ -1,6 +1,6 @@
 # es-application-template
 
-Shared Setting and Shortcut infrastructure for ES applications.
+Shared Setting, Shortcut and Appearance infrastructure for ES applications.
 
 The package layout/build convention follows `client/es-document-template`: `src/index.tsx`, `src/package/index.ts`, `rollup.config.mjs`, one package `tsconfig.json`, CJS + ESM + declaration + extracted CSS output.
 
@@ -10,7 +10,7 @@ The package layout/build convention follows `client/es-document-template`: `src/
 npm install es-application-template
 ```
 
-Host applications provide the peer dependencies declared in `package.json`, including React 18, TanStack React Query and `es-grid-template >=1.9.72 <2`.
+Host applications provide the peer dependencies declared in `package.json`, including React 18, TanStack React Query and `es-grid-template >=1.9.46 <2`.
 
 Package CSS is emitted at:
 
@@ -18,17 +18,38 @@ Package CSS is emitted at:
 dist/styles/index.css
 ```
 
-## Provider
+Host applications must import the extracted stylesheet once from their
+application entry, after the host global styles:
+
+```ts
+import 'es-application-template/dist/styles/index.css'
+```
+
+The package `style` metadata does not make CRA/Webpack load the stylesheet
+automatically.
+
+## Bootstrap and Provider
+
+Apply the cached Appearance before React paints, then mount the package runtime inside the host QueryClient:
 
 ```tsx
-import { AppProvider } from 'es-application-template'
+import { AppProvider, bootstrapAppearance } from 'es-application-template'
+
+bootstrapAppearance()
 
-<AppProvider>
-  <App />
-</AppProvider>
+const root = createRoot(document.getElementById('root')!)
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <AppProvider>
+      <App />
+    </AppProvider>
+  </QueryClientProvider>
+)
 ```
 
-The package uses the host `QueryClientProvider`; it does not create its own `QueryClient`.
+`AppProvider` composes `AppearanceRuntime -> SettingRuntime -> ShortcutRuntime`. The package uses the host `QueryClientProvider`; it never creates a `QueryClient`.
+
+Host applications keep router/menu/permission/Redux and layout composition. A Vuexy application may add one host-owned compatibility bridge that consumes `useAppearance()` and synchronizes legacy layout state.
 
 ## Setting
 
@@ -62,6 +83,19 @@ const actions: ShortcutActions = {
 <Shortcuts actions={actions} />
 ```
 
+## Appearance
+
+```tsx
+import {
+  AppearanceSettingsPage,
+  appearanceDefaults,
+  useAppearance
+} from 'es-application-template'
+```
+
+`AppearanceSettingsPage` edits the current PRODUCT override. Runtime resolution remains `SYSTEM -> PRODUCT -> USER`. `useAppearance()` exposes only the effective saved Appearance; editor drafts stay inside Preview until saved.
+
+The package owns visual tokens, theme normalization/migration, light/dark runtime, common control/Grid visual styling and Theme Library UI. The host owns where Navbar/Sidebar/Product Rail/Mega Menu are rendered.
 ## Management pages
 
 The management screens stay independent:
@@ -69,7 +103,8 @@ The management screens stay independent:
 ```tsx
 import {
   SettingsPage,
-  ShortcutsPage
+  ShortcutsPage,
+  AppearanceSettingsPage
 } from 'es-application-template'
 ```
 
@@ -92,6 +127,12 @@ useShortcutHint
 
 ShortcutActionId
 ShortcutActions
+
+bootstrapAppearance
+useAppearance
+AppearanceSettingsPage
+appearanceDefaults
+AppearanceConfig
 ```
 
 ## Deliberate differences from es-document-template

package/dist/api/index.d.ts

@@ -1,6 +1,13 @@
 import { IConfig, IParamsConfigByCode } from '../domain/models/IConfig';
 import { IFListBoxResourceProductDeployParams } from '../domain/models/IProductsDeploy';
 export declare const configApi: {
+    getPagingApi: (params: {
+        Keyword: string;
+        Filter: string;
+        Order: string;
+        PageNumber: number;
+        PageSize: number;
+    }) => Promise<any>;
     getConfigByCodeApi: (params: IParamsConfigByCode) => Promise<any>;
     updateApi: (params: IConfig) => Promise<any>;
     deleteApi: (id: string) => Promise<any>;
@@ -10,6 +17,13 @@ export declare const settingCatalogApi: {
 };
 declare const _default: {
     configApi: {
+        getPagingApi: (params: {
+            Keyword: string;
+            Filter: string;
+            Order: string;
+            PageNumber: number;
+            PageSize: number;
+        }) => Promise<any>;
         getConfigByCodeApi: (params: IParamsConfigByCode) => Promise<any>;
         updateApi: (params: IConfig) => Promise<any>;
         deleteApi: (id: string) => Promise<any>;

package/dist/appearance/core/contrast.d.ts

@@ -0,0 +1,30 @@
+export declare const AUTO_TEXT_LIGHT = "#FFFFFF";
+export declare const AUTO_TEXT_DARK = "#000000";
+/**
+ * Trộn foreground vào background.
+ * ratio = 0 => background; ratio = 1 => foreground.
+ */
+export declare const mixHex: (background: string, foreground: string, ratio: number) => string;
+export declare const getRelativeLuminance: (hex: string) => number;
+export declare const getContrastRatio: (background: string, foreground: string) => number;
+/**
+ * Ưu tiên trắng cho nền tối/trung bình và đen cho nền sáng.
+ * Nếu màu ưu tiên không đạt 3:1 thì tự đổi sang màu còn lại.
+ */
+export declare const getReadableTextColor: (background: string) => string;
+export type SidebarStateColors = {
+    text: string;
+    groupText: string;
+    hoverBackground: string;
+    hoverText: string;
+    activeBackground: string;
+    activeText: string;
+    accentText: string;
+    activeIndicator: string;
+};
+/**
+ * Sidebar sáng và tối dùng tỷ lệ pha khác nhau.
+ * - Sidebar tối: active là màu Sidebar pha Primary, chữ trắng/đen tự tính.
+ * - Sidebar sáng: active là Primary rất nhạt, chữ ưu tiên Primary làm đậm.
+ */
+export declare const buildSidebarStateColors: (sidebarBackground: string, primary: string) => SidebarStateColors;

package/dist/appearance/core/defaults.d.ts

@@ -0,0 +1,5 @@
+import { AppearanceConfig } from './types';
+export declare const APPEARANCE_SCHEMA_VERSION = 14;
+export declare const allowedAppearanceFonts: readonly string[];
+export declare const appearanceDefaults: AppearanceConfig;
+export declare const cloneAppearanceConfig: (config: AppearanceConfig) => AppearanceConfig;

package/dist/appearance/core/grid.d.ts

@@ -0,0 +1,7 @@
+import { AppearanceConfig, AppearanceGridPalette, AppearanceGridShadow } from './types';
+export declare const resolveAppearanceGridPalette: (input: AppearanceConfig, darkMode: boolean) => AppearanceGridPalette;
+export declare const resolveAppearanceGridShadow: (value: AppearanceGridShadow) => string;
+export declare const resolveAppearanceGridLineWidths: (config: AppearanceConfig) => {
+    horizontal: string;
+    vertical: string;
+};

package/dist/appearance/core/index.d.ts

@@ -0,0 +1,14 @@
+export * from './contrast';
+export * from './defaults';
+export * from './grid';
+export * from './migrate';
+export * from './options';
+export * from './presets';
+export * from './runtime';
+export * from './types';
+export * from './validate';
+export * from './ranges';
+export * from './theme-constants';
+export * from './theme-presets';
+export * from './theme-types';
+export * from './theme-utils';

package/dist/appearance/core/migrate.d.ts

@@ -0,0 +1,2 @@
+import { AppearanceConfig } from './types';
+export declare const migrateAppearanceConfig: (stored: unknown) => AppearanceConfig;

package/dist/appearance/core/options.d.ts

@@ -0,0 +1,125 @@
+import { AppearanceDropdownShadow, AppearanceGridColorMode, AppearanceGridLineMode, AppearanceGridShadow, AppearanceMode, AppearanceShadow, NavigationActiveStyle } from './types';
+export type AppearanceOption<T extends string | number = string | number> = {
+    value: T;
+    label: string;
+};
+export declare const createNumberOptions: (min: number, max: number, step?: number, suffix?: string) => Array<AppearanceOption<number>>;
+export declare const createSelectedNumberOptions: (values: number[], suffix?: string) => Array<AppearanceOption<number>>;
+export declare const appearanceModeOptions: Array<AppearanceOption<AppearanceMode>>;
+/**
+ * Chỉ dùng font hệ thống hoặc font ứng dụng đã tải sẵn để có thể áp dụng ngay.
+ * Tránh trường hợp chọn font nhưng thực tế browser fallback nên nhìn như không đổi.
+ */
+export declare const appearanceFontOptions: readonly [{
+    readonly value: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+    readonly label: "Mặc định theo thiết bị (Khuyến nghị)";
+}, {
+    readonly value: "\"Segoe UI\", Arial, sans-serif";
+    readonly label: "Segoe UI";
+}, {
+    readonly value: "Montserrat, \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Montserrat";
+}, {
+    readonly value: "Arial, \"Segoe UI\", sans-serif";
+    readonly label: "Arial";
+}, {
+    readonly value: "Tahoma, \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Tahoma";
+}, {
+    readonly value: "Calibri, \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Calibri";
+}, {
+    readonly value: "Verdana, \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Verdana";
+}, {
+    readonly value: "\"Trebuchet MS\", \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Trebuchet MS";
+}, {
+    readonly value: "\"Arial Narrow\", Arial, \"Segoe UI\", sans-serif";
+    readonly label: "Arial Narrow";
+}, {
+    readonly value: "\"Microsoft Sans Serif\", \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Microsoft Sans Serif";
+}, {
+    readonly value: "Bahnschrift, \"Segoe UI\", Arial, sans-serif";
+    readonly label: "Bahnschrift";
+}, {
+    readonly value: "Georgia, \"Times New Roman\", serif";
+    readonly label: "Georgia (Serif)";
+}, {
+    readonly value: "Cambria, Georgia, \"Times New Roman\", serif";
+    readonly label: "Cambria (Serif)";
+}, {
+    readonly value: "\"Times New Roman\", Times, serif";
+    readonly label: "Times New Roman (Serif)";
+}, {
+    readonly value: "Consolas, \"Courier New\", monospace";
+    readonly label: "Consolas (Monospace)";
+}, {
+    readonly value: "\"Courier New\", Courier, monospace";
+    readonly label: "Courier New (Monospace)";
+}];
+export declare const appearanceFontWeightOptions: Array<AppearanceOption<number>>;
+export declare const appearanceLineHeightOptions: AppearanceOption<number>[];
+export declare const appearanceLetterSpacingOptions: AppearanceOption<number>[];
+export declare const appearanceBaseFontSizeOptions: AppearanceOption<number>[];
+export declare const appearancePageTitleSizeOptions: AppearanceOption<number>[];
+export declare const appearanceSectionTitleSizeOptions: AppearanceOption<number>[];
+export declare const appearanceCardTitleSizeOptions: AppearanceOption<number>[];
+export declare const appearanceMenuFontSizeOptions: AppearanceOption<number>[];
+export declare const appearanceFormLabelSizeOptions: AppearanceOption<number>[];
+export declare const appearanceSmallFontSizeOptions: AppearanceOption<number>[];
+export declare const appearanceControlHeightOptions: AppearanceOption<number>[];
+export declare const appearanceButtonHeightOptions: AppearanceOption<number>[];
+export declare const appearanceButtonPaddingOptions: AppearanceOption<number>[];
+export declare const appearanceButtonRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceInputRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceCardRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceModalRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceDropdownRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceSpacingOptions: AppearanceOption<number>[];
+export declare const appearanceFocusRingOptions: AppearanceOption<number>[];
+export declare const appearanceTransitionOptions: AppearanceOption<number>[];
+export declare const appearanceTabHeightOptions: AppearanceOption<number>[];
+export declare const appearanceTabRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceCheckboxSizeOptions: AppearanceOption<number>[];
+export declare const appearanceSwitchHeightOptions: AppearanceOption<number>[];
+export declare const appearanceGridFontSizeOptions: AppearanceOption<number>[];
+export declare const appearanceGridRowHeightOptions: AppearanceOption<number>[];
+export declare const appearanceGridHeaderHeightOptions: AppearanceOption<number>[];
+export declare const appearanceGridCellPaddingXOptions: AppearanceOption<number>[];
+export declare const appearanceGridCellPaddingYOptions: AppearanceOption<number>[];
+export declare const appearanceGridHeaderPaddingXOptions: AppearanceOption<number>[];
+export declare const appearanceGridHeaderPaddingYOptions: AppearanceOption<number>[];
+export declare const appearanceGridHeaderFontWeightOptions: AppearanceOption<number>[];
+export declare const appearanceGridPagerHeightOptions: AppearanceOption<number>[];
+export declare const appearanceGridBorderWidthOptions: AppearanceOption<number>[];
+export declare const appearanceGridRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceGridLineModeOptions: Array<AppearanceOption<AppearanceGridLineMode>>;
+export declare const appearanceGridShadowOptions: Array<AppearanceOption<AppearanceGridShadow>>;
+export declare const appearanceGridColorModeOptions: Array<AppearanceOption<AppearanceGridColorMode>>;
+export declare const appearanceCardShadowOptions: Array<AppearanceOption<AppearanceShadow>>;
+export declare const appearanceDropdownShadowOptions: Array<AppearanceOption<AppearanceDropdownShadow>>;
+export declare const appearanceSidebarWidthOptions: AppearanceOption<number>[];
+export declare const appearanceCollapsedWidthOptions: AppearanceOption<number>[];
+export declare const appearanceNavbarHeightOptions: AppearanceOption<number>[];
+export declare const appearanceFooterHeightOptions: AppearanceOption<number>[];
+export declare const appearanceContentPaddingOptions: AppearanceOption<number>[];
+export declare const appearanceGutterOptions: AppearanceOption<number>[];
+export declare const appearanceSectionGapOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationItemHeightOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationIndentOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationGroupSpacingOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationIconSizeOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationActiveRadiusOptions: AppearanceOption<number>[];
+export declare const appearanceNavigationActiveStyleOptions: Array<AppearanceOption<NavigationActiveStyle>>;
+export declare const appearanceScrollbarOptions: readonly [{
+    readonly value: "Mảnh";
+    readonly label: "Mảnh";
+}, {
+    readonly value: "Mặc định";
+    readonly label: "Mặc định theo hệ điều hành";
+}, {
+    readonly value: "Ẩn";
+    readonly label: "Ẩn thanh cuộn";
+}];

package/dist/appearance/core/presets.d.ts

@@ -0,0 +1,22 @@
+import { AppearanceConfig } from './types';
+export type AppearanceGridDensityPreset = Pick<AppearanceConfig['grid'], 'fontSize' | 'rowHeight' | 'headerHeight' | 'cellPaddingX' | 'cellPaddingY' | 'headerPaddingX' | 'headerPaddingY' | 'pagerHeight'>;
+export declare const appearanceGridPresets: Record<'compact' | 'standard' | 'comfortable', AppearanceGridDensityPreset>;
+export declare const appearancePresets: {
+    professional: AppearanceConfig;
+    compact: AppearanceConfig;
+    comfortable: AppearanceConfig;
+};
+export type AppearanceColorPreset = {
+    id: string;
+    name: string;
+    description: string;
+    colors: AppearanceConfig['colors'];
+    darkColors: AppearanceConfig['darkColors'];
+};
+export declare const appearanceColorPresets: AppearanceColorPreset[];
+export type AppearanceTypographyPreset = {
+    id: string;
+    name: string;
+    typography: Partial<AppearanceConfig['typography']>;
+};
+export declare const appearanceTypographyPresets: AppearanceTypographyPreset[];

package/dist/appearance/core/ranges.d.ts

@@ -0,0 +1,313 @@
+export type AppearanceNumericRange = {
+    min: number;
+    max: number;
+    step: number;
+    quick?: readonly number[];
+    specialValues?: readonly AppearanceSpecialNumericValue[];
+};
+export type AppearanceSpecialNumericValue = {
+    value: number;
+    label: string;
+};
+/**
+ * Nguồn min/max duy nhất cho Appearance.
+ * Editor, options, normalize và validate phải dùng chung map này để tránh
+ * trường hợp UI cho nhập một giá trị nhưng Save lại bị clamp về range khác.
+ */
+export declare const appearanceRanges: {
+    readonly 'typography.baseFontSize': {
+        readonly min: 8;
+        readonly max: 40;
+        readonly step: 1;
+        readonly quick: readonly [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 28, 32, 36, 40];
+    };
+    readonly 'typography.baseLineHeight': {
+        readonly min: 1;
+        readonly max: 2.2;
+        readonly step: 0.05;
+        readonly quick: readonly [1, 1.1, 1.2, 1.3, 1.4, 1.45, 1.5, 1.6, 1.7, 1.8, 2, 2.2];
+    };
+    readonly 'typography.pageTitleSize': {
+        readonly min: 12;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 44, 48];
+    };
+    readonly 'typography.sectionTitleSize': {
+        readonly min: 10;
+        readonly max: 40;
+        readonly step: 1;
+        readonly quick: readonly [10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40];
+    };
+    readonly 'typography.cardTitleSize': {
+        readonly min: 10;
+        readonly max: 36;
+        readonly step: 1;
+        readonly quick: readonly [10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36];
+    };
+    readonly 'typography.menuFontSize': {
+        readonly min: 8;
+        readonly max: 28;
+        readonly step: 1;
+        readonly quick: readonly [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 28];
+    };
+    readonly 'typography.formLabelSize': {
+        readonly min: 8;
+        readonly max: 24;
+        readonly step: 1;
+        readonly quick: readonly [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24];
+    };
+    readonly 'typography.smallFontSize': {
+        readonly min: 8;
+        readonly max: 24;
+        readonly step: 1;
+        readonly quick: readonly [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24];
+    };
+    readonly 'typography.letterSpacing': {
+        readonly min: -2;
+        readonly max: 4;
+        readonly step: 0.1;
+        readonly quick: readonly [-2, -1.5, -1, -0.5, 0, 0.25, 0.5, 1, 1.5, 2, 3, 4];
+    };
+    readonly 'components.controlHeight': {
+        readonly min: 22;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 52, 56, 60, 64];
+    };
+    readonly 'components.buttonHeight': {
+        readonly min: 22;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 52, 56, 60, 64];
+    };
+    readonly 'components.buttonRadius': {
+        readonly min: 0;
+        readonly max: 24;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 999];
+        readonly specialValues: readonly [{
+            readonly value: 999;
+            readonly label: "Pill";
+        }];
+    };
+    readonly 'components.inputRadius': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48];
+    };
+    readonly 'components.cardRadius': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48];
+    };
+    readonly 'components.modalRadius': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'components.dropdownRadius': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48];
+    };
+    readonly 'components.buttonPaddingX': {
+        readonly min: 4;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 48];
+    };
+    readonly 'components.cardPadding': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'components.cardGap': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'components.focusRingSize': {
+        readonly min: 0;
+        readonly max: 12;
+        readonly step: 1;
+        readonly quick: readonly [0, 1, 2, 3, 4, 5, 6, 8, 10, 12];
+    };
+    readonly 'components.transitionDuration': {
+        readonly min: 0;
+        readonly max: 1000;
+        readonly step: 10;
+        readonly quick: readonly [0, 80, 100, 120, 150, 180, 200, 250, 300, 400, 500, 650, 800, 1000];
+    };
+    readonly 'components.tabHeight': {
+        readonly min: 28;
+        readonly max: 72;
+        readonly step: 1;
+        readonly quick: readonly [28, 30, 32, 34, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72];
+    };
+    readonly 'components.tabRadius': {
+        readonly min: 0;
+        readonly max: 16;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 14, 16];
+    };
+    readonly 'components.checkboxSize': {
+        readonly min: 10;
+        readonly max: 32;
+        readonly step: 1;
+        readonly quick: readonly [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32];
+    };
+    readonly 'components.switchHeight': {
+        readonly min: 12;
+        readonly max: 40;
+        readonly step: 1;
+        readonly quick: readonly [12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 40];
+    };
+    readonly 'grid.fontSize': {
+        readonly min: 8;
+        readonly max: 32;
+        readonly step: 1;
+        readonly quick: readonly [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 28, 32];
+    };
+    readonly 'grid.rowHeight': {
+        readonly min: 22;
+        readonly max: 120;
+        readonly step: 1;
+        readonly quick: readonly [22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 44, 48, 52, 56, 64, 72, 80, 96, 120];
+    };
+    readonly 'grid.headerHeight': {
+        readonly min: 22;
+        readonly max: 96;
+        readonly step: 1;
+        readonly quick: readonly [22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 44, 48, 52, 56, 64, 72, 80, 96];
+    };
+    readonly 'grid.cellPaddingX': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 48];
+    };
+    readonly 'grid.cellPaddingY': {
+        readonly min: 0;
+        readonly max: 32;
+        readonly step: 1;
+        readonly quick: readonly [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 28, 32];
+    };
+    readonly 'grid.headerPaddingX': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 9, 10, 12, 14, 16, 20, 24, 28, 32, 40, 48];
+    };
+    readonly 'grid.headerPaddingY': {
+        readonly min: 0;
+        readonly max: 32;
+        readonly step: 1;
+        readonly quick: readonly [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 28, 32];
+    };
+    readonly 'grid.headerFontWeight': {
+        readonly min: 100;
+        readonly max: 900;
+        readonly step: 100;
+        readonly quick: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900];
+    };
+    readonly 'grid.pagerHeight': {
+        readonly min: 24;
+        readonly max: 96;
+        readonly step: 1;
+        readonly quick: readonly [24, 28, 32, 36, 40, 44, 46, 48, 52, 56, 60, 64, 72, 80, 96];
+    };
+    readonly 'grid.borderWidth': {
+        readonly min: 0;
+        readonly max: 6;
+        readonly step: 1;
+        readonly quick: readonly [0, 1, 2, 3, 4, 5, 6];
+    };
+    readonly 'grid.radius': {
+        readonly min: 0;
+        readonly max: 48;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48];
+    };
+    readonly 'layout.sidebarWidth': {
+        readonly min: 140;
+        readonly max: 480;
+        readonly step: 1;
+        readonly quick: readonly [140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 340, 360, 400, 440, 480];
+    };
+    readonly 'layout.collapsedWidth': {
+        readonly min: 40;
+        readonly max: 160;
+        readonly step: 1;
+        readonly quick: readonly [40, 44, 48, 52, 56, 64, 72, 80, 88, 96, 104, 112, 120, 136, 160];
+    };
+    readonly 'layout.navbarHeight': {
+        readonly min: 40;
+        readonly max: 120;
+        readonly step: 1;
+        readonly quick: readonly [40, 44, 48, 52, 56, 60, 64, 72, 80, 88, 96, 100, 108, 120];
+    };
+    readonly 'layout.footerHeight': {
+        readonly min: 0;
+        readonly max: 120;
+        readonly step: 1;
+        readonly quick: readonly [0, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96, 120];
+    };
+    readonly 'layout.contentPadding': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'layout.gutter': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'layout.sectionGap': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'navigation.itemHeight': {
+        readonly min: 24;
+        readonly max: 72;
+        readonly step: 1;
+        readonly quick: readonly [24, 26, 28, 30, 32, 34, 36, 38, 40, 44, 48, 52, 56, 60, 64, 72];
+    };
+    readonly 'navigation.indent': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'navigation.groupSpacing': {
+        readonly min: 0;
+        readonly max: 64;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64];
+    };
+    readonly 'navigation.iconSize': {
+        readonly min: 10;
+        readonly max: 36;
+        readonly step: 1;
+        readonly quick: readonly [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36];
+    };
+    readonly 'navigation.activeRadius': {
+        readonly min: 0;
+        readonly max: 32;
+        readonly step: 1;
+        readonly quick: readonly [0, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32];
+    };
+};
+export type AppearanceRangeKey = keyof typeof appearanceRanges;
+export declare const getAppearanceRange: (key: AppearanceRangeKey) => AppearanceNumericRange;
+export declare const isAppearanceRangeValueValid: (key: AppearanceRangeKey, value: unknown) => boolean;